refactor: remove Storybook stories
This commit is contained in:
Jordan Knott
parent
0760edac80
commit
0cc1b5a1df
@ -73,8 +73,6 @@
|
|||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject",
|
"eject": "react-scripts eject",
|
||||||
"storybook": "start-storybook -p 9009 -s public",
|
|
||||||
"build-storybook": "build-storybook -s public",
|
|
||||||
"generate": "graphql-codegen",
|
"generate": "graphql-codegen",
|
||||||
"lint": "eslint --ext js,ts,tsx src",
|
"lint": "eslint --ext js,ts,tsx src",
|
||||||
"tsc": "tsc"
|
"tsc": "tsc"
|
||||||
@ -99,16 +97,6 @@
|
|||||||
"@graphql-codegen/typescript": "^1.13.2",
|
"@graphql-codegen/typescript": "^1.13.2",
|
||||||
"@graphql-codegen/typescript-operations": "^1.13.2",
|
"@graphql-codegen/typescript-operations": "^1.13.2",
|
||||||
"@graphql-codegen/typescript-react-apollo": "^1.13.2",
|
"@graphql-codegen/typescript-react-apollo": "^1.13.2",
|
||||||
"@storybook/addon-actions": "^5.3.13",
|
|
||||||
"@storybook/addon-backgrounds": "^5.3.17",
|
|
||||||
"@storybook/addon-docs": "^5.3.17",
|
|
||||||
"@storybook/addon-knobs": "^5.3.17",
|
|
||||||
"@storybook/addon-links": "^5.3.13",
|
|
||||||
"@storybook/addon-storysource": "^5.3.17",
|
|
||||||
"@storybook/addon-viewport": "^5.3.17",
|
|
||||||
"@storybook/addons": "^5.3.13",
|
|
||||||
"@storybook/preset-create-react-app": "^1.5.2",
|
|
||||||
"@storybook/react": "^5.3.13",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^2.20.0",
|
"@typescript-eslint/eslint-plugin": "^2.20.0",
|
||||||
"@typescript-eslint/parser": "^2.20.0",
|
"@typescript-eslint/parser": "^2.20.0",
|
||||||
"eslint": "^6.8.0",
|
"eslint": "^6.8.0",
|
||||||
|
|||||||
@ -1,19 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import AddList from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: AddList,
|
|
||||||
title: 'AddList',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: theme.colors.bg.secondary, default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return <AddList onSave={action('on save')} />;
|
|
||||||
};
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { ThemeProvider } from 'styled-components';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import Admin from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Admin,
|
|
||||||
title: 'Admin',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<Admin
|
|
||||||
onInviteUser={action('invite user')}
|
|
||||||
canInviteUser
|
|
||||||
initialTab={1}
|
|
||||||
onUpdateUserPassword={action('update user password')}
|
|
||||||
onDeleteUser={action('delete user')}
|
|
||||||
users={[
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
username: 'jordanthedev',
|
|
||||||
email: 'jordan@jordanthedev.com',
|
|
||||||
role: { code: 'admin', name: 'Admin' },
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
profileIcon: {
|
|
||||||
bgColor: '#fff',
|
|
||||||
initials: 'JK',
|
|
||||||
url: null,
|
|
||||||
},
|
|
||||||
owned: {
|
|
||||||
teams: [{ id: '1', name: 'Team' }],
|
|
||||||
projects: [{ id: '2', name: 'Project' }],
|
|
||||||
},
|
|
||||||
member: {
|
|
||||||
teams: [],
|
|
||||||
projects: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
invitedUsers={[]}
|
|
||||||
onAddUser={action('add user')}
|
|
||||||
onDeleteInvitedUser={action('delete invited user')}
|
|
||||||
/>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
|
||||||
import Button from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Button,
|
|
||||||
title: 'Button',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const ButtonRow = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
margin: 25px;
|
|
||||||
width: 100%;
|
|
||||||
& > button {
|
|
||||||
margin-right: 1.5rem;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<BaseStyles />
|
|
||||||
<NormalizeStyles />
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<ButtonRow>
|
|
||||||
<Button>Primary</Button>
|
|
||||||
<Button color="success">Success</Button>
|
|
||||||
<Button color="danger">Danger</Button>
|
|
||||||
<Button color="warning">Warning</Button>
|
|
||||||
<Button color="dark">Dark</Button>
|
|
||||||
<Button disabled>Disabled</Button>
|
|
||||||
</ButtonRow>
|
|
||||||
<ButtonRow>
|
|
||||||
<Button variant="outline">Primary</Button>
|
|
||||||
<Button variant="outline" color="success">
|
|
||||||
Success
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" color="danger">
|
|
||||||
Danger
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" color="warning">
|
|
||||||
Warning
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" color="dark">
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" disabled>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</ButtonRow>
|
|
||||||
<ButtonRow>
|
|
||||||
<Button variant="flat">Primary</Button>
|
|
||||||
<Button variant="flat" color="success">
|
|
||||||
Success
|
|
||||||
</Button>
|
|
||||||
<Button variant="flat" color="danger">
|
|
||||||
Danger
|
|
||||||
</Button>
|
|
||||||
<Button variant="flat" color="warning">
|
|
||||||
Warning
|
|
||||||
</Button>
|
|
||||||
<Button variant="flat" color="dark">
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button variant="flat" disabled>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</ButtonRow>
|
|
||||||
<ButtonRow>
|
|
||||||
<Button variant="lineDown">Primary</Button>
|
|
||||||
<Button variant="lineDown" color="success">
|
|
||||||
Success
|
|
||||||
</Button>
|
|
||||||
<Button variant="lineDown" color="danger">
|
|
||||||
Danger
|
|
||||||
</Button>
|
|
||||||
<Button variant="lineDown" color="warning">
|
|
||||||
Warning
|
|
||||||
</Button>
|
|
||||||
<Button variant="lineDown" color="dark">
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button variant="lineDown" disabled>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</ButtonRow>
|
|
||||||
<ButtonRow>
|
|
||||||
<Button variant="gradient">Primary</Button>
|
|
||||||
<Button variant="gradient" color="success">
|
|
||||||
Success
|
|
||||||
</Button>
|
|
||||||
<Button variant="gradient" color="danger">
|
|
||||||
Danger
|
|
||||||
</Button>
|
|
||||||
<Button variant="gradient" color="warning">
|
|
||||||
Warning
|
|
||||||
</Button>
|
|
||||||
<Button variant="gradient" color="dark">
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button variant="gradient" disabled>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</ButtonRow>
|
|
||||||
<ButtonRow>
|
|
||||||
<Button variant="relief">Primary</Button>
|
|
||||||
<Button variant="relief" color="success">
|
|
||||||
Success
|
|
||||||
</Button>
|
|
||||||
<Button variant="relief" color="danger">
|
|
||||||
Danger
|
|
||||||
</Button>
|
|
||||||
<Button variant="relief" color="warning">
|
|
||||||
Warning
|
|
||||||
</Button>
|
|
||||||
<Button variant="relief" color="dark">
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button variant="relief" disabled>
|
|
||||||
Disabled
|
|
||||||
</Button>
|
|
||||||
</ButtonRow>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,174 +0,0 @@
|
|||||||
import React, { useRef } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import LabelColors from 'shared/constants/labelColors';
|
|
||||||
import Card from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Card,
|
|
||||||
title: 'Card',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const labelData: Array<ProjectLabel> = [
|
|
||||||
{
|
|
||||||
id: 'development',
|
|
||||||
name: 'Development',
|
|
||||||
createdDate: new Date().toString(),
|
|
||||||
labelColor: {
|
|
||||||
id: '1',
|
|
||||||
colorHex: LabelColors.BLUE,
|
|
||||||
name: 'blue',
|
|
||||||
position: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description=""
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Labels = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description=""
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
labels={labelData}
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Badges = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const PastDue = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: true, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Everything = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
members={[
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
profileIcon: {
|
|
||||||
bgColor: '#0079bf',
|
|
||||||
initials: 'JK',
|
|
||||||
url: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
labels={labelData}
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Members = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
description={null}
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
members={[
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
profileIcon: {
|
|
||||||
bgColor: '#0079bf',
|
|
||||||
initials: 'JK',
|
|
||||||
url: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
labels={[]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Editable = () => {
|
|
||||||
const $ref = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
labels={labelData}
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
editable
|
|
||||||
onEditCard={action('edit card')}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import CardComposer from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: CardComposer,
|
|
||||||
title: 'CardComposer',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return <CardComposer isOpen onClose={action('on close')} onCreateCard={action('on create card')} />;
|
|
||||||
};
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import produce from 'immer';
|
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
|
||||||
import NOOP from 'shared/utils/noop';
|
|
||||||
import Checklist, { ChecklistItem } from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Checklist,
|
|
||||||
title: 'Checklist',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
width: 552px;
|
|
||||||
margin: 25px;
|
|
||||||
border: 1px solid ${props => props.theme.colors.bg.primary};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const defaultItems = [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
position: 1,
|
|
||||||
taskChecklistID: '1',
|
|
||||||
complete: false,
|
|
||||||
name: 'Tasks',
|
|
||||||
assigned: null,
|
|
||||||
dueDate: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
taskChecklistID: '1',
|
|
||||||
position: 2,
|
|
||||||
complete: false,
|
|
||||||
name: 'Projects',
|
|
||||||
assigned: null,
|
|
||||||
dueDate: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
position: 3,
|
|
||||||
taskChecklistID: '1',
|
|
||||||
complete: false,
|
|
||||||
name: 'Teams',
|
|
||||||
assigned: null,
|
|
||||||
dueDate: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
position: 4,
|
|
||||||
complete: false,
|
|
||||||
taskChecklistID: '1',
|
|
||||||
name: 'Organizations',
|
|
||||||
assigned: null,
|
|
||||||
dueDate: null,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
const [checklistName, setChecklistName] = useState('Checklist');
|
|
||||||
const [items, setItems] = useState(defaultItems);
|
|
||||||
const onToggleItem = (itemID: string, complete: boolean) => {
|
|
||||||
setItems(
|
|
||||||
produce(items, draftState => {
|
|
||||||
const idx = items.findIndex(item => item.id === itemID);
|
|
||||||
if (idx !== -1) {
|
|
||||||
draftState[idx] = {
|
|
||||||
...draftState[idx],
|
|
||||||
complete,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<BaseStyles />
|
|
||||||
<NormalizeStyles />
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<Container>
|
|
||||||
<Checklist
|
|
||||||
wrapperProps={{}}
|
|
||||||
handleProps={{}}
|
|
||||||
name={checklistName}
|
|
||||||
checklistID="checklist-one"
|
|
||||||
items={items}
|
|
||||||
onDeleteChecklist={action('delete checklist')}
|
|
||||||
onChangeName={currentName => {
|
|
||||||
setChecklistName(currentName);
|
|
||||||
}}
|
|
||||||
onAddItem={itemName => {
|
|
||||||
let position = 1;
|
|
||||||
const lastItem = items[-1];
|
|
||||||
if (lastItem) {
|
|
||||||
position = lastItem.position * 2 + 1;
|
|
||||||
}
|
|
||||||
setItems([
|
|
||||||
...items,
|
|
||||||
{
|
|
||||||
id: `${Math.random()}`,
|
|
||||||
name: itemName,
|
|
||||||
complete: false,
|
|
||||||
assigned: null,
|
|
||||||
dueDate: null,
|
|
||||||
position,
|
|
||||||
taskChecklistID: '1',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}}
|
|
||||||
onDeleteItem={itemID => {
|
|
||||||
setItems(items.filter(item => item.id !== itemID));
|
|
||||||
}}
|
|
||||||
onChangeItemName={(itemID, currentName) => {
|
|
||||||
setItems(
|
|
||||||
produce(items, draftState => {
|
|
||||||
const idx = items.findIndex(item => item.id === itemID);
|
|
||||||
if (idx !== -1) {
|
|
||||||
draftState[idx] = {
|
|
||||||
...draftState[idx],
|
|
||||||
name: currentName,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
onToggleItem={onToggleItem}
|
|
||||||
>
|
|
||||||
{items.map(item => (
|
|
||||||
<ChecklistItem
|
|
||||||
key={item.id}
|
|
||||||
wrapperProps={{}}
|
|
||||||
handleProps={{}}
|
|
||||||
checklistID="id"
|
|
||||||
itemID={item.id}
|
|
||||||
name={item.name}
|
|
||||||
complete={item.complete}
|
|
||||||
onDeleteItem={NOOP}
|
|
||||||
onChangeName={NOOP}
|
|
||||||
onToggleItem={NOOP}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Checklist>
|
|
||||||
</Container>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
|
||||||
import { User } from 'shared/icons';
|
|
||||||
|
|
||||||
import Input from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Input,
|
|
||||||
title: 'Input',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
background: ${props => props.theme.colors.bg.primary};
|
|
||||||
padding: 45px;
|
|
||||||
margin: 25px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<Wrapper>
|
|
||||||
<Input label="Label placeholder" />
|
|
||||||
<Input width="100%" placeholder="Placeholder" />
|
|
||||||
<Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
|
|
||||||
</Wrapper>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import React, { createRef, useState } from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import DropdownMenu from '.';
|
|
||||||
import theme from '../../../App/ThemeStyles';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: DropdownMenu,
|
|
||||||
title: 'DropdownMenu',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
{ name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
|
||||||
const Button = styled.div`
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 15px 20px;
|
|
||||||
color: #fff;
|
|
||||||
background: #000;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
const [menu, setMenu] = useState({
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
isOpen: false,
|
|
||||||
});
|
|
||||||
const $buttonRef: any = createRef();
|
|
||||||
const onClick = () => {
|
|
||||||
setMenu({
|
|
||||||
isOpen: !menu.isOpen,
|
|
||||||
left: $buttonRef.current.getBoundingClientRect().right,
|
|
||||||
top: $buttonRef.current.getBoundingClientRect().bottom,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Container>
|
|
||||||
<Button onClick={onClick} ref={$buttonRef}>
|
|
||||||
Click me
|
|
||||||
</Button>
|
|
||||||
</Container>
|
|
||||||
{menu.isOpen && (
|
|
||||||
<DropdownMenu
|
|
||||||
onAdminConsole={action('admin')}
|
|
||||||
onCloseDropdown={() => {
|
|
||||||
setMenu({ top: 0, left: 0, isOpen: false });
|
|
||||||
}}
|
|
||||||
onLogout={action('on logout')}
|
|
||||||
left={menu.left}
|
|
||||||
top={menu.top}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
|
||||||
import { Popup } from '../PopupMenu';
|
|
||||||
import DueDateManager from '.';
|
|
||||||
|
|
||||||
const PopupWrapper = styled.div`
|
|
||||||
width: 310px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: DueDateManager,
|
|
||||||
title: 'DueDateManager',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<PopupWrapper>
|
|
||||||
<Popup title={null} tab={0}>
|
|
||||||
<DueDateManager
|
|
||||||
task={{
|
|
||||||
id: '1',
|
|
||||||
taskGroup: { name: 'General', id: '1', position: 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: 'hello!',
|
|
||||||
assigned: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
profileIcon: { url: null, initials: null, bgColor: null },
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
onCancel={action('cancel')}
|
|
||||||
onDueDateChange={action('due date change')}
|
|
||||||
onRemoveDueDate={action('remove due date')}
|
|
||||||
/>
|
|
||||||
</Popup>
|
|
||||||
</PopupWrapper>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
|
||||||
import { User } from 'shared/icons';
|
|
||||||
|
|
||||||
import Input from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Input,
|
|
||||||
title: 'Input',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
background: ${props => props.theme.colors.bg.primary};
|
|
||||||
padding: 45px;
|
|
||||||
margin: 25px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<Wrapper>
|
|
||||||
<Input label="Label placeholder" />
|
|
||||||
<Input width="100%" placeholder="Placeholder" />
|
|
||||||
<Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
|
|
||||||
</Wrapper>
|
|
||||||
</ThemeProvider>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
import React, { createRef } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import Card from 'shared/components/Card';
|
|
||||||
import CardComposer from 'shared/components/CardComposer';
|
|
||||||
import LabelColors from 'shared/constants/labelColors';
|
|
||||||
import NOOP from 'shared/utils/noop';
|
|
||||||
import List, { ListCards } from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: List,
|
|
||||||
title: 'List',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const labelData: Array<ProjectLabel> = [
|
|
||||||
{
|
|
||||||
id: 'development',
|
|
||||||
name: 'Development',
|
|
||||||
createdDate: new Date().toString(),
|
|
||||||
labelColor: {
|
|
||||||
id: '1',
|
|
||||||
colorHex: LabelColors.BLUE,
|
|
||||||
name: 'blue',
|
|
||||||
position: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const createCard = () => {
|
|
||||||
const $ref = createRef<HTMLDivElement>();
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$ref}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
labels={labelData}
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
id=""
|
|
||||||
name="General"
|
|
||||||
isComposerOpen={false}
|
|
||||||
onSaveName={action('on save name')}
|
|
||||||
onOpenComposer={action('on open composer')}
|
|
||||||
onExtraMenuOpen={action('extra menu open')}
|
|
||||||
>
|
|
||||||
<ListCards>
|
|
||||||
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
|
|
||||||
</ListCards>
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithCardComposer = () => {
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
id="1"
|
|
||||||
name="General"
|
|
||||||
isComposerOpen
|
|
||||||
onSaveName={action('on save name')}
|
|
||||||
onOpenComposer={action('on open composer')}
|
|
||||||
onExtraMenuOpen={action('extra menu open')}
|
|
||||||
>
|
|
||||||
<ListCards>
|
|
||||||
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
|
|
||||||
</ListCards>
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithCard = () => {
|
|
||||||
const $cardRef: any = createRef();
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
id="1"
|
|
||||||
name="General"
|
|
||||||
isComposerOpen={false}
|
|
||||||
onSaveName={action('on save name')}
|
|
||||||
onOpenComposer={action('on open composer')}
|
|
||||||
onExtraMenuOpen={action('extra menu open')}
|
|
||||||
>
|
|
||||||
<ListCards>
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$cardRef}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
labels={labelData}
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
|
|
||||||
</ListCards>
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const WithCardAndComposer = () => {
|
|
||||||
const $cardRef: any = createRef();
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
id="1"
|
|
||||||
name="General"
|
|
||||||
isComposerOpen
|
|
||||||
onSaveName={action('on save name')}
|
|
||||||
onOpenComposer={action('on open composer')}
|
|
||||||
onExtraMenuOpen={action('extra menu open')}
|
|
||||||
>
|
|
||||||
<ListCards>
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$cardRef}
|
|
||||||
title="Hello, world"
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={action('on context click')}
|
|
||||||
watched
|
|
||||||
labels={labelData}
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
|
|
||||||
</ListCards>
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -56,11 +56,7 @@ const List = React.forwardRef(
|
|||||||
};
|
};
|
||||||
const onBlur = () => {
|
const onBlur = () => {
|
||||||
setEditingTitle(false);
|
setEditingTitle(false);
|
||||||
if (listName.trim() === '') {
|
|
||||||
setListName(name);
|
|
||||||
} else {
|
|
||||||
onSaveName(listName);
|
onSaveName(listName);
|
||||||
}
|
|
||||||
};
|
};
|
||||||
const onEscape = () => {
|
const onEscape = () => {
|
||||||
if ($listNameRef && $listNameRef.current) {
|
if ($listNameRef && $listNameRef.current) {
|
||||||
|
|||||||
@ -1,104 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import theme from 'App/ThemeStyles';
|
|
||||||
import Lists from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Lists,
|
|
||||||
title: 'Lists',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: theme.colors.bg.secondary, default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const initialListsData = {
|
|
||||||
columns: {
|
|
||||||
'column-1': {
|
|
||||||
taskGroupID: 'column-1',
|
|
||||||
name: 'General',
|
|
||||||
taskIds: ['task-3', 'task-4', 'task-1', 'task-2'],
|
|
||||||
position: 1,
|
|
||||||
tasks: [],
|
|
||||||
},
|
|
||||||
'column-2': {
|
|
||||||
taskGroupID: 'column-2',
|
|
||||||
name: 'Development',
|
|
||||||
taskIds: [],
|
|
||||||
position: 2,
|
|
||||||
tasks: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tasks: {
|
|
||||||
'task-1': {
|
|
||||||
taskID: 'task-1',
|
|
||||||
taskGroup: { taskGroupID: 'column-1' },
|
|
||||||
name: 'Create roadmap',
|
|
||||||
position: 2,
|
|
||||||
labels: [],
|
|
||||||
},
|
|
||||||
'task-2': {
|
|
||||||
taskID: 'task-2',
|
|
||||||
taskGroup: { taskGroupID: 'column-1' },
|
|
||||||
position: 1,
|
|
||||||
name: 'Create authentication',
|
|
||||||
labels: [],
|
|
||||||
},
|
|
||||||
'task-3': {
|
|
||||||
taskID: 'task-3',
|
|
||||||
taskGroup: { taskGroupID: 'column-1' },
|
|
||||||
position: 3,
|
|
||||||
name: 'Create login',
|
|
||||||
labels: [],
|
|
||||||
},
|
|
||||||
'task-4': {
|
|
||||||
taskID: 'task-4',
|
|
||||||
taskGroup: { taskGroupID: 'column-1' },
|
|
||||||
position: 4,
|
|
||||||
name: 'Create plugins',
|
|
||||||
labels: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
const [listsData, setListsData] = useState(initialListsData);
|
|
||||||
const onCardDrop = (droppedTask: Task) => {
|
|
||||||
const newState = {
|
|
||||||
...listsData,
|
|
||||||
tasks: {
|
|
||||||
...listsData.tasks,
|
|
||||||
[droppedTask.id]: droppedTask,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
setListsData(newState);
|
|
||||||
};
|
|
||||||
const onListDrop = (droppedColumn: any) => {
|
|
||||||
const newState = {
|
|
||||||
...listsData,
|
|
||||||
columns: {
|
|
||||||
...listsData.columns,
|
|
||||||
[droppedColumn.taskGroupID]: droppedColumn,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
setListsData(newState);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Lists
|
|
||||||
taskGroups={[]}
|
|
||||||
onTaskClick={action('card click')}
|
|
||||||
onQuickEditorOpen={action('card composer open')}
|
|
||||||
onCreateTask={action('card create')}
|
|
||||||
onTaskDrop={onCardDrop}
|
|
||||||
onTaskGroupDrop={onListDrop}
|
|
||||||
onChangeTaskGroupName={action('change group name')}
|
|
||||||
cardLabelVariant="large"
|
|
||||||
onCardLabelClick={action('label click')}
|
|
||||||
onCreateTaskGroup={action('create list')}
|
|
||||||
onExtraMenuOpen={action('extra menu open')}
|
|
||||||
onCardMemberClick={action('card member click')}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import LoadingSpinner from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: LoadingSpinner,
|
|
||||||
title: 'Login',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
{ name: 'gray', value: '#cdd3e1', default: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<LoadingSpinner />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Login from '.';
|
|
||||||
|
|
||||||
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Login,
|
|
||||||
title: 'Login',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
{ name: 'gray', value: '#cdd3e1', default: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LoginWrapper = styled.div`
|
|
||||||
width: 60%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Container>
|
|
||||||
<LoginWrapper>
|
|
||||||
<Login onSubmit={action('on submit')} />
|
|
||||||
</LoginWrapper>
|
|
||||||
</Container>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithSubmission = () => {
|
|
||||||
const onSubmit = async (data: LoginFormData, setComplete: (val: boolean) => void, setError: any) => {
|
|
||||||
await sleep(2000);
|
|
||||||
if (data.username !== 'test' || data.password !== 'test') {
|
|
||||||
setError('username', 'invalid', 'Invalid username');
|
|
||||||
setError('password', 'invalid', 'Invalid password');
|
|
||||||
}
|
|
||||||
setComplete(true);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Container>
|
|
||||||
<LoginWrapper>
|
|
||||||
<Login onSubmit={onSubmit} />
|
|
||||||
</LoginWrapper>
|
|
||||||
</Container>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import MemberManager from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: MemberManager,
|
|
||||||
title: 'MemberManager',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return <MemberManager availableMembers={[]} activeMembers={[]} onMemberChange={action('member change')} />;
|
|
||||||
};
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import Modal from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Modal,
|
|
||||||
title: 'Modal',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
{ name: 'gray', value: '#cdd3e1', default: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Modal
|
|
||||||
width={1040}
|
|
||||||
onClose={action('on close')}
|
|
||||||
renderContent={() => {
|
|
||||||
return <h1>Hello!</h1>;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import { Home } from 'shared/icons';
|
|
||||||
import Navbar, { ActionButton, ButtonContainer, PrimaryLogo } from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Navbar,
|
|
||||||
title: 'Navbar',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#cdd3e1' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const MainContent = styled.div`
|
|
||||||
padding: 0 0 50px 80px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Navbar>
|
|
||||||
<PrimaryLogo />
|
|
||||||
<ButtonContainer>
|
|
||||||
<ActionButton name="Home">
|
|
||||||
<Home width={28} height={28} />
|
|
||||||
</ActionButton>
|
|
||||||
<ActionButton name="Home">
|
|
||||||
<Home width={28} height={28} />
|
|
||||||
</ActionButton>
|
|
||||||
</ButtonContainer>
|
|
||||||
</Navbar>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import NOOP from 'shared/utils/noop';
|
|
||||||
import NewProject from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: NewProject,
|
|
||||||
title: 'NewProject',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<NewProject
|
|
||||||
initialTeamID={null}
|
|
||||||
onCreateProject={action('create project')}
|
|
||||||
teams={[{ name: 'General', id: 'general', createdAt: '' }]}
|
|
||||||
onClose={NOOP}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import ProjectGridItem from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: ProjectGridItem,
|
|
||||||
title: 'ProjectGridItem',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const projectsData = [
|
|
||||||
{ taskGroups: [], teamTitle: 'Personal', projectID: 'aaaa', name: 'Taskcafé', color: '#aa62e3' },
|
|
||||||
{ taskGroups: [], teamTitle: 'Personal', projectID: 'bbbb', name: 'Editorial Calender', color: '#aa62e3' },
|
|
||||||
{ taskGroups: [], teamTitle: 'Personal', projectID: 'cccc', name: 'New Blog', color: '#aa62e3' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ProjectsWrapper = styled.div`
|
|
||||||
width: 60%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<Container>
|
|
||||||
<ProjectsWrapper>
|
|
||||||
{projectsData.map(project => (
|
|
||||||
<ProjectGridItem project={project} />
|
|
||||||
))}
|
|
||||||
</ProjectsWrapper>
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
import React, { createRef, useState } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import Card from 'shared/components/Card';
|
|
||||||
import CardComposer from 'shared/components/CardComposer';
|
|
||||||
import LabelColors from 'shared/constants/labelColors';
|
|
||||||
import List, { ListCards } from 'shared/components/List';
|
|
||||||
import QuickCardEditor from 'shared/components/QuickCardEditor';
|
|
||||||
import NOOP from 'shared/utils/noop';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: QuickCardEditor,
|
|
||||||
title: 'QuickCardEditor',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const labelData: Array<TaskLabel> = [
|
|
||||||
{
|
|
||||||
id: 'development',
|
|
||||||
assignedDate: new Date().toString(),
|
|
||||||
projectLabel: {
|
|
||||||
id: 'development',
|
|
||||||
name: 'Development',
|
|
||||||
createdDate: 'date',
|
|
||||||
labelColor: {
|
|
||||||
id: 'label-color-blue',
|
|
||||||
colorHex: LabelColors.BLUE,
|
|
||||||
name: 'blue',
|
|
||||||
position: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
const $cardRef: any = createRef();
|
|
||||||
const task: Task = {
|
|
||||||
id: 'task',
|
|
||||||
name: 'Hello, world!',
|
|
||||||
position: 1,
|
|
||||||
labels: labelData,
|
|
||||||
taskGroup: {
|
|
||||||
id: '1',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const [isEditorOpen, setEditorOpen] = useState(false);
|
|
||||||
const [target, setTarget] = useState<null | React.RefObject<HTMLElement>>(null);
|
|
||||||
const [top, setTop] = useState(0);
|
|
||||||
const [left, setLeft] = useState(0);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{isEditorOpen && target && (
|
|
||||||
<QuickCardEditor
|
|
||||||
task={task}
|
|
||||||
onCloseEditor={() => setEditorOpen(false)}
|
|
||||||
onEditCard={action('edit card')}
|
|
||||||
onOpenLabelsPopup={action('open popup')}
|
|
||||||
onOpenDueDatePopup={action('open popup')}
|
|
||||||
onOpenMembersPopup={action('open popup')}
|
|
||||||
onToggleComplete={action('complete')}
|
|
||||||
onArchiveCard={action('archive card')}
|
|
||||||
target={target}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<List
|
|
||||||
id="1"
|
|
||||||
name="General"
|
|
||||||
isComposerOpen={false}
|
|
||||||
onSaveName={action('on save name')}
|
|
||||||
onOpenComposer={action('on open composer')}
|
|
||||||
onExtraMenuOpen={NOOP}
|
|
||||||
>
|
|
||||||
<ListCards>
|
|
||||||
<Card
|
|
||||||
taskID="1"
|
|
||||||
taskGroupID="1"
|
|
||||||
description="hello!"
|
|
||||||
ref={$cardRef}
|
|
||||||
title={task.name}
|
|
||||||
onClick={action('on click')}
|
|
||||||
onContextMenu={() => {
|
|
||||||
setTarget($cardRef);
|
|
||||||
setEditorOpen(true);
|
|
||||||
}}
|
|
||||||
watched
|
|
||||||
labels={labelData.map(l => l.projectLabel)}
|
|
||||||
checklists={{ complete: 1, total: 4 }}
|
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
|
||||||
/>
|
|
||||||
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
|
|
||||||
</ListCards>
|
|
||||||
</List>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -106,7 +106,7 @@ const QuickCardEditor = ({
|
|||||||
ref={$dueDate}
|
ref={$dueDate}
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onOpenDueDatePopup($dueDate, task);
|
onOpenDueDatePopup($labelsRef, task);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Edit Due Date
|
Edit Due Date
|
||||||
|
|||||||
@ -1,37 +0,0 @@
|
|||||||
import React, { createRef, useState } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import Settings from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Settings,
|
|
||||||
title: 'Settings',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const profile = {
|
|
||||||
id: '1',
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
username: 'jordanthedev',
|
|
||||||
profileIcon: { url: '/uploads/headshot.png', bgColor: '#000', initials: 'JK' },
|
|
||||||
};
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Settings
|
|
||||||
profile={profile}
|
|
||||||
onChangeUserInfo={action('change user info')}
|
|
||||||
onResetPassword={action('reset password')}
|
|
||||||
onProfileAvatarRemove={action('remove')}
|
|
||||||
onProfileAvatarChange={action('profile avatar change')}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import Navbar from 'shared/components/Navbar';
|
|
||||||
import Sidebar from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Sidebar,
|
|
||||||
title: 'Sidebar',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
{ name: 'gray', value: '#cdd3e1', default: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Navbar />
|
|
||||||
<Sidebar />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import React, { useRef } from 'react';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import Tabs from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: Tabs,
|
|
||||||
title: 'Tabs',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<Tabs />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -294,7 +294,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
|||||||
const $addMemberBtn = useRef<HTMLDivElement>(null);
|
const $addMemberBtn = useRef<HTMLDivElement>(null);
|
||||||
const $dueDateBtn = useRef<HTMLDivElement>(null);
|
const $dueDateBtn = useRef<HTMLDivElement>(null);
|
||||||
const $detailsTitle = useRef<HTMLTextAreaElement>(null);
|
const $detailsTitle = useRef<HTMLTextAreaElement>(null);
|
||||||
const $addLabel = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = [];
|
const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = [];
|
||||||
|
|
||||||
@ -475,7 +474,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<TaskDetailsAddLabelIcon ref={$addLabel} onClick={() => onOpenAddLabelPopup(task, $addLabel)}>
|
<TaskDetailsAddLabelIcon>
|
||||||
<Plus width={12} height={12} />
|
<Plus width={12} height={12} />
|
||||||
</TaskDetailsAddLabelIcon>
|
</TaskDetailsAddLabelIcon>
|
||||||
</MetaDetailContent>
|
</MetaDetailContent>
|
||||||
|
|||||||
@ -1,50 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import TopNavbar from '.';
|
|
||||||
import theme from '../../../App/ThemeStyles';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: TopNavbar,
|
|
||||||
title: 'TopNavbar',
|
|
||||||
|
|
||||||
// Our exports that end in "Data" are not stories.
|
|
||||||
excludeStories: /.*Data$/,
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff' },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
{ name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
<TopNavbar
|
|
||||||
onOpenProjectFinder={action('finder')}
|
|
||||||
name="Projects"
|
|
||||||
user={{
|
|
||||||
id: '1',
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
profileIcon: {
|
|
||||||
url: null,
|
|
||||||
initials: 'JK',
|
|
||||||
bgColor: '#000',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onChangeRole={action('change role')}
|
|
||||||
onNotificationClick={action('notifications click')}
|
|
||||||
onOpenSettings={action('open settings')}
|
|
||||||
onDashboardClick={action('open dashboard')}
|
|
||||||
onRemoveFromBoard={action('remove project')}
|
|
||||||
onProfileClick={action('profile click')}
|
|
||||||
onMyTasksClick={action('profile click')}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user