87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { action } from '@storybook/addon-actions';
|
|
import NormalizeStyles from 'App/NormalizeStyles';
|
|
import BaseStyles from 'App/BaseStyles';
|
|
import Modal from 'shared/components/Modal';
|
|
import TaskDetails from '.';
|
|
|
|
export default {
|
|
component: TaskDetails,
|
|
title: 'TaskDetails',
|
|
parameters: {
|
|
backgrounds: [
|
|
{ name: 'white', value: '#ffffff' },
|
|
{ name: 'gray', value: '#cdd3e1', default: true },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const Default = () => {
|
|
const [description, setDescription] = useState('');
|
|
return (
|
|
<>
|
|
<NormalizeStyles />
|
|
<BaseStyles />
|
|
<Modal
|
|
width={1040}
|
|
onClose={action('on close')}
|
|
renderContent={() => {
|
|
return (
|
|
<TaskDetails
|
|
onDeleteItem={action('delete item')}
|
|
onChangeItemName={action('change item name')}
|
|
task={{
|
|
id: '1',
|
|
taskGroup: { name: 'General', id: '1' },
|
|
name: 'Hello, world',
|
|
position: 1,
|
|
labels: [
|
|
{
|
|
id: 'soft-skills',
|
|
assignedDate: new Date().toString(),
|
|
projectLabel: {
|
|
createdDate: new Date().toString(),
|
|
id: 'label-soft-skills',
|
|
name: 'Soft Skills',
|
|
labelColor: {
|
|
id: '1',
|
|
name: 'white',
|
|
colorHex: '#fff',
|
|
position: 1,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
description,
|
|
assigned: [
|
|
{
|
|
id: '1',
|
|
profileIcon: { bgColor: null, url: null, initials: null },
|
|
fullName: 'Jordan Knott',
|
|
},
|
|
],
|
|
}}
|
|
onTaskNameChange={action('task name change')}
|
|
onTaskDescriptionChange={(_task, desc) => setDescription(desc)}
|
|
onDeleteTask={action('delete task')}
|
|
onCloseModal={action('close modal')}
|
|
onMemberProfile={action('profile')}
|
|
onOpenAddMemberPopup={action('open add member popup')}
|
|
onAddItem={action('add item')}
|
|
onToggleTaskComplete={action('toggle task complete')}
|
|
onToggleChecklistItem={action('toggle checklist item')}
|
|
onOpenAddLabelPopup={action('open add label popup')}
|
|
onChangeChecklistName={action('change checklist name')}
|
|
onDeleteChecklist={action('delete checklist')}
|
|
onOpenAddChecklistPopup={action(' open checklist')}
|
|
onOpenDueDatePopop={action('open due date popup')}
|
|
onChecklistDrop={action('on checklist drop')}
|
|
onChecklistItemDrop={action('on checklist item drop')}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|