From 0cc1b5a1df4684c916f5c3b096bc7a17047800ff Mon Sep 17 00:00:00 2001 From: Jordan Knott Date: Sun, 7 Feb 2021 14:54:36 -0600 Subject: [PATCH] refactor: remove Storybook stories --- frontend/package.json | 12 -- .../components/AddList/AddList.stories.tsx | 19 -- .../shared/components/Admin/Admin.stories.tsx | 61 ------ .../components/Button/Button.stories.tsx | 138 -------------- .../shared/components/Card/Card.stories.tsx | 174 ------------------ .../CardComposer/CardComposer.stories.tsx | 18 -- .../Checklist/Checklist.stories.tsx | 155 ---------------- .../ControlledInput/Input.stories.tsx | 43 ----- .../DropdownMenu/DropdownMenu.stories.tsx | 65 ------- .../DueDateManager/DueDateManager.stories.tsx | 74 -------- .../shared/components/Input/Input.stories.tsx | 43 ----- .../shared/components/List/List.stories.tsx | 146 --------------- frontend/src/shared/components/List/index.tsx | 6 +- .../shared/components/Lists/Lists.stories.tsx | 104 ----------- .../LoadingSpinner/LoadingSpinner.stories.tsx | 24 --- .../shared/components/Login/Login.stories.tsx | 67 ------- .../MemberManager/MemberManager.stories.tsx | 18 -- .../shared/components/Modal/Modal.stories.tsx | 32 ---- .../components/Navbar/Navbar.stories.tsx | 40 ---- .../NewProject/NewProject.stories.tsx | 32 ---- .../ProjectGridItem.stories.tsx | 47 ----- .../QuickCardEditor.stories.tsx | 99 ---------- .../components/QuickCardEditor/index.tsx | 2 +- .../components/Settings/Settings.stories.tsx | 37 ---- .../components/Sidebar/Sidebar.stories.tsx | 27 --- .../shared/components/Tabs/Tabs.stories.tsx | 25 --- .../shared/components/TaskDetails/index.tsx | 3 +- .../TopNavbar/TopNavbar.stories.tsx | 50 ----- 28 files changed, 3 insertions(+), 1558 deletions(-) delete mode 100644 frontend/src/shared/components/AddList/AddList.stories.tsx delete mode 100644 frontend/src/shared/components/Admin/Admin.stories.tsx delete mode 100644 frontend/src/shared/components/Button/Button.stories.tsx delete mode 100644 frontend/src/shared/components/Card/Card.stories.tsx delete mode 100644 frontend/src/shared/components/CardComposer/CardComposer.stories.tsx delete mode 100644 frontend/src/shared/components/Checklist/Checklist.stories.tsx delete mode 100644 frontend/src/shared/components/ControlledInput/Input.stories.tsx delete mode 100644 frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx delete mode 100644 frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx delete mode 100644 frontend/src/shared/components/Input/Input.stories.tsx delete mode 100644 frontend/src/shared/components/List/List.stories.tsx delete mode 100644 frontend/src/shared/components/Lists/Lists.stories.tsx delete mode 100644 frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx delete mode 100644 frontend/src/shared/components/Login/Login.stories.tsx delete mode 100644 frontend/src/shared/components/MemberManager/MemberManager.stories.tsx delete mode 100644 frontend/src/shared/components/Modal/Modal.stories.tsx delete mode 100644 frontend/src/shared/components/Navbar/Navbar.stories.tsx delete mode 100644 frontend/src/shared/components/NewProject/NewProject.stories.tsx delete mode 100644 frontend/src/shared/components/ProjectGridItem/ProjectGridItem.stories.tsx delete mode 100644 frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx delete mode 100644 frontend/src/shared/components/Settings/Settings.stories.tsx delete mode 100644 frontend/src/shared/components/Sidebar/Sidebar.stories.tsx delete mode 100644 frontend/src/shared/components/Tabs/Tabs.stories.tsx delete mode 100644 frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx diff --git a/frontend/package.json b/frontend/package.json index 07a4d8f..60e6da7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -73,8 +73,6 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "storybook": "start-storybook -p 9009 -s public", - "build-storybook": "build-storybook -s public", "generate": "graphql-codegen", "lint": "eslint --ext js,ts,tsx src", "tsc": "tsc" @@ -99,16 +97,6 @@ "@graphql-codegen/typescript": "^1.13.2", "@graphql-codegen/typescript-operations": "^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/parser": "^2.20.0", "eslint": "^6.8.0", diff --git a/frontend/src/shared/components/AddList/AddList.stories.tsx b/frontend/src/shared/components/AddList/AddList.stories.tsx deleted file mode 100644 index 56953c5..0000000 --- a/frontend/src/shared/components/AddList/AddList.stories.tsx +++ /dev/null @@ -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 ; -}; diff --git a/frontend/src/shared/components/Admin/Admin.stories.tsx b/frontend/src/shared/components/Admin/Admin.stories.tsx deleted file mode 100644 index 71dbae6..0000000 --- a/frontend/src/shared/components/Admin/Admin.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - ); -}; diff --git a/frontend/src/shared/components/Button/Button.stories.tsx b/frontend/src/shared/components/Button/Button.stories.tsx deleted file mode 100644 index 3dac813..0000000 --- a/frontend/src/shared/components/Button/Button.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/frontend/src/shared/components/Card/Card.stories.tsx b/frontend/src/shared/components/Card/Card.stories.tsx deleted file mode 100644 index 9bebbc0..0000000 --- a/frontend/src/shared/components/Card/Card.stories.tsx +++ /dev/null @@ -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 = [ - { - id: 'development', - name: 'Development', - createdDate: new Date().toString(), - labelColor: { - id: '1', - colorHex: LabelColors.BLUE, - name: 'blue', - position: 1, - }, - }, -]; - -export const Default = () => { - const $ref = useRef(null); - return ( - - ); -}; - -export const Labels = () => { - const $ref = useRef(null); - return ( - - ); -}; - -export const Badges = () => { - const $ref = useRef(null); - return ( - - ); -}; - -export const PastDue = () => { - const $ref = useRef(null); - return ( - - ); -}; - -export const Everything = () => { - const $ref = useRef(null); - return ( - - ); -}; - -export const Members = () => { - const $ref = useRef(null); - return ( - - ); -}; - -export const Editable = () => { - const $ref = useRef(null); - return ( - - ); -}; diff --git a/frontend/src/shared/components/CardComposer/CardComposer.stories.tsx b/frontend/src/shared/components/CardComposer/CardComposer.stories.tsx deleted file mode 100644 index 326eafe..0000000 --- a/frontend/src/shared/components/CardComposer/CardComposer.stories.tsx +++ /dev/null @@ -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 ; -}; diff --git a/frontend/src/shared/components/Checklist/Checklist.stories.tsx b/frontend/src/shared/components/Checklist/Checklist.stories.tsx deleted file mode 100644 index c778c45..0000000 --- a/frontend/src/shared/components/Checklist/Checklist.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - { - 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 => ( - - ))} - - - - - ); -}; diff --git a/frontend/src/shared/components/ControlledInput/Input.stories.tsx b/frontend/src/shared/components/ControlledInput/Input.stories.tsx deleted file mode 100644 index ba0187f..0000000 --- a/frontend/src/shared/components/ControlledInput/Input.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - } width="100%" placeholder="Placeholder" /> - - - - ); -}; diff --git a/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx b/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx deleted file mode 100644 index 33a8090..0000000 --- a/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - {menu.isOpen && ( - { - setMenu({ top: 0, left: 0, isOpen: false }); - }} - onLogout={action('on logout')} - left={menu.left} - top={menu.top} - /> - )} - - ); -}; diff --git a/frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx b/frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx deleted file mode 100644 index 04ed13f..0000000 --- a/frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - - - - - ); -}; diff --git a/frontend/src/shared/components/Input/Input.stories.tsx b/frontend/src/shared/components/Input/Input.stories.tsx deleted file mode 100644 index ba0187f..0000000 --- a/frontend/src/shared/components/Input/Input.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - } width="100%" placeholder="Placeholder" /> - - - - ); -}; diff --git a/frontend/src/shared/components/List/List.stories.tsx b/frontend/src/shared/components/List/List.stories.tsx deleted file mode 100644 index 19543c7..0000000 --- a/frontend/src/shared/components/List/List.stories.tsx +++ /dev/null @@ -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 = [ - { - id: 'development', - name: 'Development', - createdDate: new Date().toString(), - labelColor: { - id: '1', - colorHex: LabelColors.BLUE, - name: 'blue', - position: 1, - }, - }, -]; - -const createCard = () => { - const $ref = createRef(); - return ( - - ); -}; - -export const Default = () => { - return ( - - - - - - ); -}; - -export const WithCardComposer = () => { - return ( - - - - - - ); -}; - -export const WithCard = () => { - const $cardRef: any = createRef(); - return ( - - - - - - - ); -}; -export const WithCardAndComposer = () => { - const $cardRef: any = createRef(); - return ( - - - - - - - ); -}; diff --git a/frontend/src/shared/components/List/index.tsx b/frontend/src/shared/components/List/index.tsx index b834da3..4ae813f 100644 --- a/frontend/src/shared/components/List/index.tsx +++ b/frontend/src/shared/components/List/index.tsx @@ -56,11 +56,7 @@ const List = React.forwardRef( }; const onBlur = () => { setEditingTitle(false); - if (listName.trim() === '') { - setListName(name); - } else { - onSaveName(listName); - } + onSaveName(listName); }; const onEscape = () => { if ($listNameRef && $listNameRef.current) { diff --git a/frontend/src/shared/components/Lists/Lists.stories.tsx b/frontend/src/shared/components/Lists/Lists.stories.tsx deleted file mode 100644 index a55a297..0000000 --- a/frontend/src/shared/components/Lists/Lists.stories.tsx +++ /dev/null @@ -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 ( - - ); -}; diff --git a/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx b/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx deleted file mode 100644 index 8f66e5f..0000000 --- a/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - ); -}; diff --git a/frontend/src/shared/components/Login/Login.stories.tsx b/frontend/src/shared/components/Login/Login.stories.tsx deleted file mode 100644 index 2617280..0000000 --- a/frontend/src/shared/components/Login/Login.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - - - ); -}; - -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 ( - <> - - - - - - - - - ); -}; diff --git a/frontend/src/shared/components/MemberManager/MemberManager.stories.tsx b/frontend/src/shared/components/MemberManager/MemberManager.stories.tsx deleted file mode 100644 index 42598a5..0000000 --- a/frontend/src/shared/components/MemberManager/MemberManager.stories.tsx +++ /dev/null @@ -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 ; -}; diff --git a/frontend/src/shared/components/Modal/Modal.stories.tsx b/frontend/src/shared/components/Modal/Modal.stories.tsx deleted file mode 100644 index 765c73d..0000000 --- a/frontend/src/shared/components/Modal/Modal.stories.tsx +++ /dev/null @@ -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 ( - <> - - - { - return

Hello!

; - }} - /> - - ); -}; diff --git a/frontend/src/shared/components/Navbar/Navbar.stories.tsx b/frontend/src/shared/components/Navbar/Navbar.stories.tsx deleted file mode 100644 index 8c482bb..0000000 --- a/frontend/src/shared/components/Navbar/Navbar.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - - - - - - - - - - ); -}; diff --git a/frontend/src/shared/components/NewProject/NewProject.stories.tsx b/frontend/src/shared/components/NewProject/NewProject.stories.tsx deleted file mode 100644 index 6b9322b..0000000 --- a/frontend/src/shared/components/NewProject/NewProject.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - ); -}; diff --git a/frontend/src/shared/components/ProjectGridItem/ProjectGridItem.stories.tsx b/frontend/src/shared/components/ProjectGridItem/ProjectGridItem.stories.tsx deleted file mode 100644 index e6b71c7..0000000 --- a/frontend/src/shared/components/ProjectGridItem/ProjectGridItem.stories.tsx +++ /dev/null @@ -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 ( - - - {projectsData.map(project => ( - - ))} - - - ); -}; diff --git a/frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx b/frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx deleted file mode 100644 index d989fc1..0000000 --- a/frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx +++ /dev/null @@ -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 = [ - { - 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); - const [top, setTop] = useState(0); - const [left, setLeft] = useState(0); - return ( - <> - {isEditorOpen && target && ( - 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} - /> - )} - - - { - setTarget($cardRef); - setEditorOpen(true); - }} - watched - labels={labelData.map(l => l.projectLabel)} - checklists={{ complete: 1, total: 4 }} - dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }} - /> - - - - - ); -}; diff --git a/frontend/src/shared/components/QuickCardEditor/index.tsx b/frontend/src/shared/components/QuickCardEditor/index.tsx index eabf862..ccbd794 100644 --- a/frontend/src/shared/components/QuickCardEditor/index.tsx +++ b/frontend/src/shared/components/QuickCardEditor/index.tsx @@ -106,7 +106,7 @@ const QuickCardEditor = ({ ref={$dueDate} onClick={e => { e.stopPropagation(); - onOpenDueDatePopup($dueDate, task); + onOpenDueDatePopup($labelsRef, task); }} > Edit Due Date diff --git a/frontend/src/shared/components/Settings/Settings.stories.tsx b/frontend/src/shared/components/Settings/Settings.stories.tsx deleted file mode 100644 index 52bce63..0000000 --- a/frontend/src/shared/components/Settings/Settings.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - ); -}; diff --git a/frontend/src/shared/components/Sidebar/Sidebar.stories.tsx b/frontend/src/shared/components/Sidebar/Sidebar.stories.tsx deleted file mode 100644 index 7d5956c..0000000 --- a/frontend/src/shared/components/Sidebar/Sidebar.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - - ); -}; diff --git a/frontend/src/shared/components/Tabs/Tabs.stories.tsx b/frontend/src/shared/components/Tabs/Tabs.stories.tsx deleted file mode 100644 index 10a5099..0000000 --- a/frontend/src/shared/components/Tabs/Tabs.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - ); -}; diff --git a/frontend/src/shared/components/TaskDetails/index.tsx b/frontend/src/shared/components/TaskDetails/index.tsx index ce764ab..64f8b12 100644 --- a/frontend/src/shared/components/TaskDetails/index.tsx +++ b/frontend/src/shared/components/TaskDetails/index.tsx @@ -294,7 +294,6 @@ const TaskDetails: React.FC = ({ const $addMemberBtn = useRef(null); const $dueDateBtn = useRef(null); const $detailsTitle = useRef(null); - const $addLabel = useRef(null); const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = []; @@ -475,7 +474,7 @@ const TaskDetails: React.FC = ({ /> ); })} - onOpenAddLabelPopup(task, $addLabel)}> + diff --git a/frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx b/frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx deleted file mode 100644 index 89b9356..0000000 --- a/frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx +++ /dev/null @@ -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 ( - <> - - - - - ); -};