From 35f812249e52a494bd4d213a3aa567a12dbb34b3 Mon Sep 17 00:00:00 2001 From: Anass Bouassaba Date: Wed, 20 Nov 2024 04:36:39 +0100 Subject: [PATCH] refactor: simplify bundle stories --- src/stories/bundles/app.stories.tsx | 447 +++++++++++++++++- src/stories/bundles/layout.stories.tsx | 208 +++++++- src/stories/bundles/page.stories.tsx | 251 +++++++++- src/stories/common/data.ts | 33 -- src/stories/common/layout.tsx | 156 ------ src/stories/common/list.tsx | 84 ---- src/stories/common/page.tsx | 18 - src/stories/common/paragraphs.tsx | 32 -- src/stories/common/settings.tsx | 94 ---- src/stories/components/data-table.stories.tsx | 37 +- src/stories/components/shell.stories.tsx | 51 +- src/stories/components/sidenav.stories.tsx | 51 +- 12 files changed, 994 insertions(+), 468 deletions(-) delete mode 100644 src/stories/common/data.ts delete mode 100644 src/stories/common/layout.tsx delete mode 100644 src/stories/common/list.tsx delete mode 100644 src/stories/common/page.tsx delete mode 100644 src/stories/common/paragraphs.tsx delete mode 100644 src/stories/common/settings.tsx diff --git a/src/stories/bundles/app.stories.tsx b/src/stories/bundles/app.stories.tsx index bf55761..58bc897 100644 --- a/src/stories/bundles/app.stories.tsx +++ b/src/stories/bundles/app.stories.tsx @@ -1,19 +1,61 @@ -import { useEffect } from 'react' +import { ReactElement, useEffect, useState } from 'react' +import { + Avatar, + Button, + IconButton, + MenuItem, + Progress, + Switch, + Link as ChakraLink, + useDisclosure, + Tabs, + TabList, + Tab, +} from '@chakra-ui/react' +import { + AccountMenu, + AppBar, + AuxiliaryDrawer, + DataTable, + Form, + IconAdd, + IconAdminPanelSettings, + IconChat, + IconDelete, + IconEdit, + IconFavorite, + IconFlag, + IconGroup, + IconLogout, + IconStacks, + IconTune, + IconUpload, + IconWorkspaces, + Logo, + NumberTag, + PagePagination, + SearchBar, + Shell, + usePagePagination, +} from '@koupr/ui' import { Meta, StoryObj } from '@storybook/react' -import { Route, Routes, useLocation, useNavigate } from 'react-router-dom' -import { Layout } from '../common/layout' -import { List } from '../common/list' -import { Page } from '../common/page' -import { ParagraphGroups, ParagraphOrganizations } from '../common/paragraphs' -import { Settings } from '../common/settings' - -export const App = () => { +import cx from 'classnames' +import { + Link, + Outlet, + Route, + Routes, + useLocation, + useNavigate, +} from 'react-router-dom' + +const App = () => { const location = useLocation() const navigate = useNavigate() useEffect(() => { if (location.pathname === '/workspace') { - navigate('/workspace/list') + navigate('/workspace/data-table') } }, [location.pathname, navigate]) @@ -25,28 +67,403 @@ export const App = () => { element={} children={ <> - } /> - } /> + } + /> + } /> } /> - } /> - } /> + + Commodo volutpat facilisis habitant; mattis ultrices mauris ex + nisi. Consequat nascetur lacus sed fames convallis pretium sit + justo. Gravida curabitur condimentum hac mi, ridiculus montes. + Eros commodo porttitor erat amet primis imperdiet. Morbi at + potenti volutpat litora viverra dapibus sapien. Fermentum sodales + nullam aliquam fusce aliquam. +

+ } + /> + + Dis eros primis condimentum a porttitor orci curabitur. Aluctus + arcu blandit dui facilisi interdum pretium tristique. Cras nam + congue parturient posuere tempor lectus? Felis hendrerit penatibus + semper maximus convallis tortor. Et potenti quisque ex phasellus + magnis leo netus. Hac enim ante curae odio libero feugiat metus + conubia tincidunt. +

+ } + /> ) } +type LayoutProps = { + children?: ReactElement +} + +const Layout = ({ children }: LayoutProps) => { + const location = useLocation() + const navigate = useNavigate() + const tasks = useDisclosure() + const uploads = useDisclosure() + const [query, setQuery] = useState('') + + useEffect(() => { + if (location.pathname === '/') { + navigate('/workspace') + } + }, [navigate]) + + return ( + } + topBar={ + } + title="Search filters" + aria-label="Search filters" + /> + } + onSearch={setQuery} + onClear={() => setQuery('')} + /> + } + buttons={ + <> + + } + title="Open console" + aria-label="Open console" + /> + } + header="Uploads" + body={<>} + isOpen={uploads.isOpen} + onClose={uploads.onClose} + onOpen={uploads.onOpen} + /> + } + header="Tasks" + body={<>} + hasBadge={true} + isOpen={tasks.isOpen} + onOpen={tasks.onOpen} + onClose={tasks.onClose} + /> + + + Settings + + +
+ Invitations + 5 +
+ + + Sign Out + + + } + /> + + } + /> + } + items={[ + { + href: '/workspace', + icon: , + primaryText: 'Workspaces', + secondaryText: 'Isolated containers for files and folders.', + }, + { + href: '/group', + icon: , + primaryText: 'Groups', + secondaryText: 'Allows assigning permissions to a group of users.', + }, + { + href: '/organization', + icon: , + primaryText: 'Organizations', + secondaryText: 'Umbrellas for workspaces and users.', + }, + ]} + pathnameFn={() => location.pathname} + navigateFn={navigate} + > + {children} + + ) +} + +const Page = () => { + const navigate = useNavigate() + return ( +
+ + + navigate('/workspace/data-table')}> + Data Table + + navigate('/workspace/form')}>Form + + + +
+ ) +} + const meta: Meta = { title: 'Bundles/App', component: App, parameters: { layout: 'fullscreen', }, - excludeStories: /App/, } export default meta type Story = StoryObj export const Default: Story = {} + +type SampleItem = { + name: string + symbol: string + dateOfBirth: string +} + +const SampleDataTable = () => { + const navigate = useNavigate() + const location = useLocation() + const { page, size, steps, setPage, setSize } = usePagePagination({ + navigateFn: navigate, + searchFn: () => location.search, + }) + + return ( + + items={[ + { + name: 'Bruce Wayne', + symbol: 'Batman', + dateOfBirth: '1915-04-07', + }, + { + name: 'Tony Stark', + symbol: 'Iron Man', + dateOfBirth: '1970-05-29', + }, + { + name: 'Steven Rogers', + symbol: 'Captain America', + dateOfBirth: '1918-07-04', + }, + { + name: 'Clinton Barton', + symbol: 'Hawkeye', + dateOfBirth: '1975-01-01', + }, + { + name: 'Natasha Romanoff', + symbol: 'Black Widow', + dateOfBirth: '1984-12-03', + }, + ]} + columns={[ + { + title: 'Name', + renderCell: (item) => ( +
+ + + {item.name} + +
+ ), + }, + { + title: 'Symbol', + renderCell: (item) => {item.symbol}, + }, + { + title: 'Date of Birth', + renderCell: (item) => ( + {new Date(item.dateOfBirth).toLocaleString()} + ), + }, + ]} + actions={[ + { + label: 'Mark As Favorite', + icon: , + onClick: (item) => console.log(`Marking ${item.name} as favorite!`), + }, + { + label: 'Start Conversation', + icon: , + isDisabled: true, + onClick: (item) => + console.log(`Starting a conversation with ${item.name}.`), + }, + { + label: 'Remove From Organization', + icon: , + isDestructive: true, + onClick: (item) => + console.log(`Removing ${item.name} from organization...`), + }, + ]} + pagination={ + + } + /> + ) +} + +const SampleForm = () => ( +
+ 5.67 GB of 38 GB used + + + ), + }, + { + title: 'Basics', + rows: [ + { + label: 'Full name', + content: ( + <> + Bruce Wayne + } + className={cx('h-[40px]', 'w-[40px]')} + title="Edit full name" + aria-label="Edit full name" + /> + + ), + }, + ], + }, + { + title: 'Credentials', + rows: [ + { + label: 'Email', + content: ( + <> + bruce.wayne@koupr.com + } + className={cx('h-[40px]', 'w-[40px]')} + title="Edit email" + aria-label="Edit email" + /> + + ), + }, + { + label: 'Password', + content: ( + } + className={cx('h-[40px]', 'w-[40px]')} + title="Change password" + aria-label="Change password" + /> + ), + }, + ], + }, + { + title: 'Theme', + rows: [ + { + label: 'Dark mode', + content: , + }, + ], + }, + { + title: 'Advanced', + rows: [ + { + label: 'Delete account', + content: ( + } + variant="solid" + colorScheme="red" + title="Delete account" + aria-label="Delete account" + /> + ), + }, + ], + }, + ]} + /> +) diff --git a/src/stories/bundles/layout.stories.tsx b/src/stories/bundles/layout.stories.tsx index ae63775..d222b54 100644 --- a/src/stories/bundles/layout.stories.tsx +++ b/src/stories/bundles/layout.stories.tsx @@ -1,11 +1,160 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { Route, Routes } from 'react-router-dom' -import { Layout } from '../common/layout' +import { ReactElement, useEffect, useState } from 'react' +import { Button, IconButton, MenuItem, useDisclosure } from '@chakra-ui/react' import { - ParagraphGroups, - ParagraphOrganizations, - ParagraphWorkspaces, -} from '../common/paragraphs' + AccountMenu, + AppBar, + AuxiliaryDrawer, + IconAdd, + IconAdminPanelSettings, + IconFlag, + IconGroup, + IconStacks, + IconTune, + IconUpload, + IconWorkspaces, + Logo, + NumberTag, + SearchBar, + Shell, +} from '@koupr/ui' +import type { Meta, StoryObj } from '@storybook/react' +import cx from 'classnames' +import { Link, Route, Routes, useLocation, useNavigate } from 'react-router-dom' + +type LayoutProps = { + children?: ReactElement +} + +const Layout = ({ children }: LayoutProps) => { + const location = useLocation() + const navigate = useNavigate() + const tasks = useDisclosure() + const uploads = useDisclosure() + const [query, setQuery] = useState('') + + useEffect(() => { + if (location.pathname === '/') { + navigate('/workspace') + } + }, [navigate]) + + return ( + } + topBar={ + } + title="Search filters" + aria-label="Search filters" + /> + } + onSearch={setQuery} + onClear={() => setQuery('')} + /> + } + buttons={ + <> + + } + title="Open console" + aria-label="Open console" + /> + } + header="Uploads" + body={<>} + isOpen={uploads.isOpen} + onClose={uploads.onClose} + onOpen={uploads.onOpen} + /> + } + header="Tasks" + body={<>} + hasBadge={true} + isOpen={tasks.isOpen} + onOpen={tasks.onOpen} + onClose={tasks.onClose} + /> + + + Settings + + +
+ Invitations + 5 +
+ + + Sign Out + + + } + /> + + } + /> + } + items={[ + { + href: '/workspace', + icon: , + primaryText: 'Workspaces', + secondaryText: 'Isolated containers for files and folders.', + }, + { + href: '/group', + icon: , + primaryText: 'Groups', + secondaryText: 'Allows assigning permissions to a group of users.', + }, + { + href: '/organization', + icon: , + primaryText: 'Organizations', + secondaryText: 'Umbrellas for workspaces and users.', + }, + ]} + pathnameFn={() => location.pathname} + navigateFn={navigate} + > + {children} + + ) +} const meta: Meta = { title: 'Bundles/Layout', @@ -22,9 +171,48 @@ export const Default: Story = { args: { children: ( - } /> - } /> - } /> + + Lorem ipsum odor amet, consectetuer adipiscing elit. Duis nascetur + magnis morbi laoreet; montes porta. Pulvinar nunc per accumsan sed + suspendisse sit sapien. Venenatis maximus inceptos taciti + vestibulum porta sagittis quisque ipsum erat. Risus sodales + conubia leo facilisi dignissim potenti senectus. Lectus feugiat + ornare amet iaculis metus inceptos adipiscing placerat. Vestibulum + faucibus facilisis viverra magna litora. Molestie lorem leo + malesuada dictumst porta erat sagittis ullamcorper sollicitudin. + Hendrerit ante maximus tincidunt, venenatis mauris molestie. +

+ } + /> + + Commodo volutpat facilisis habitant; mattis ultrices mauris ex + nisi. Consequat nascetur lacus sed fames convallis pretium sit + justo. Gravida curabitur condimentum hac mi, ridiculus montes. + Eros commodo porttitor erat amet primis imperdiet. Morbi at + potenti volutpat litora viverra dapibus sapien. Fermentum sodales + nullam aliquam fusce aliquam. +

+ } + /> + + Dis eros primis condimentum a porttitor orci curabitur. Aluctus + arcu blandit dui facilisi interdum pretium tristique. Cras nam + congue parturient posuere tempor lectus? Felis hendrerit penatibus + semper maximus convallis tortor. Et potenti quisque ex phasellus + magnis leo netus. Hac enim ante curae odio libero feugiat metus + conubia tincidunt. +

+ } + /> ), }, diff --git a/src/stories/bundles/page.stories.tsx b/src/stories/bundles/page.stories.tsx index fa662b8..eb6855d 100644 --- a/src/stories/bundles/page.stories.tsx +++ b/src/stories/bundles/page.stories.tsx @@ -1,9 +1,51 @@ import { useEffect } from 'react' +import { + Avatar, + IconButton, + Link, + Progress, + Switch, + Tab, + TabList, + Tabs, +} from '@chakra-ui/react' +import { + DataTable, + Form, + IconChat, + IconDelete, + IconEdit, + IconFavorite, + IconLogout, + PagePagination, + usePagePagination, +} from '@koupr/ui' import { Meta, StoryObj } from '@storybook/react' -import { Route, Routes, useLocation, useNavigate } from 'react-router-dom' -import { List } from '../common/list' -import { Page } from '../common/page' -import { Settings } from '../common/settings' +import cx from 'classnames' +import { + Outlet, + Route, + Routes, + useLocation, + useNavigate, +} from 'react-router-dom' + +const Page = () => { + const navigate = useNavigate() + return ( +
+ + + navigate('/workspace/data-table')}> + Data Table + + navigate('/workspace/form')}>Form + + + +
+ ) +} const meta: Meta = { title: 'Bundles/Page', @@ -14,15 +56,15 @@ const meta: Meta = { useEffect(() => { if (location.pathname === '/') { - navigate('/workspace/list') + navigate('/workspace/data-table') } }, [location.pathname, navigate]) return ( }> - } /> - } /> + } /> + } /> ) @@ -33,3 +75,198 @@ export default meta type Story = StoryObj export const Default: Story = {} + +type SampleItem = { + name: string + symbol: string + dateOfBirth: string +} + +const SampleDataTable = () => { + const navigate = useNavigate() + const location = useLocation() + const { page, size, steps, setPage, setSize } = usePagePagination({ + navigateFn: navigate, + searchFn: () => location.search, + }) + + return ( + + items={[ + { + name: 'Bruce Wayne', + symbol: 'Batman', + dateOfBirth: '1915-04-07', + }, + { + name: 'Tony Stark', + symbol: 'Iron Man', + dateOfBirth: '1970-05-29', + }, + { + name: 'Steven Rogers', + symbol: 'Captain America', + dateOfBirth: '1918-07-04', + }, + { + name: 'Clinton Barton', + symbol: 'Hawkeye', + dateOfBirth: '1975-01-01', + }, + { + name: 'Natasha Romanoff', + symbol: 'Black Widow', + dateOfBirth: '1984-12-03', + }, + ]} + columns={[ + { + title: 'Name', + renderCell: (item) => ( +
+ + {item.name} +
+ ), + }, + { + title: 'Symbol', + renderCell: (item) => {item.symbol}, + }, + { + title: 'Date of Birth', + renderCell: (item) => ( + {new Date(item.dateOfBirth).toLocaleString()} + ), + }, + ]} + actions={[ + { + label: 'Mark As Favorite', + icon: , + onClick: (item) => console.log(`Marking ${item.name} as favorite!`), + }, + { + label: 'Start Conversation', + icon: , + isDisabled: true, + onClick: (item) => + console.log(`Starting a conversation with ${item.name}.`), + }, + { + label: 'Remove From Organization', + icon: , + isDestructive: true, + onClick: (item) => + console.log(`Removing ${item.name} from organization...`), + }, + ]} + pagination={ + + } + /> + ) +} + +const SampleForm = () => ( + + 5.67 GB of 38 GB used + + + ), + }, + { + title: 'Basics', + rows: [ + { + label: 'Full name', + content: ( + <> + Bruce Wayne + } + className={cx('h-[40px]', 'w-[40px]')} + title="Edit full name" + aria-label="Edit full name" + /> + + ), + }, + ], + }, + { + title: 'Credentials', + rows: [ + { + label: 'Email', + content: ( + <> + bruce.wayne@koupr.com + } + className={cx('h-[40px]', 'w-[40px]')} + title="Edit email" + aria-label="Edit email" + /> + + ), + }, + { + label: 'Password', + content: ( + } + className={cx('h-[40px]', 'w-[40px]')} + title="Change password" + aria-label="Change password" + /> + ), + }, + ], + }, + { + title: 'Theme', + rows: [ + { + label: 'Dark mode', + content: , + }, + ], + }, + { + title: 'Advanced', + rows: [ + { + label: 'Delete account', + content: ( + } + variant="solid" + colorScheme="red" + title="Delete account" + aria-label="Delete account" + /> + ), + }, + ], + }, + ]} + /> +) diff --git a/src/stories/common/data.ts b/src/stories/common/data.ts deleted file mode 100644 index 06694db..0000000 --- a/src/stories/common/data.ts +++ /dev/null @@ -1,33 +0,0 @@ -export type Hero = { - name: string - symbol: string - dateOfBirth: string -} - -export const items: Hero[] = [ - { - name: 'Bruce Wayne', - symbol: 'Batman', - dateOfBirth: '1915-04-07', - }, - { - name: 'Tony Stark', - symbol: 'Iron Man', - dateOfBirth: '1970-05-29', - }, - { - name: 'Steven Rogers', - symbol: 'Captain America', - dateOfBirth: '1918-07-04', - }, - { - name: 'Clinton Barton', - symbol: 'Hawkeye', - dateOfBirth: '1975-01-01', - }, - { - name: 'Natasha Romanoff', - symbol: 'Black Widow', - dateOfBirth: '1984-12-03', - }, -] diff --git a/src/stories/common/layout.tsx b/src/stories/common/layout.tsx deleted file mode 100644 index b3b317b..0000000 --- a/src/stories/common/layout.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { ReactElement, useEffect, useState } from 'react' -import { Button, IconButton, MenuItem, useDisclosure } from '@chakra-ui/react' -import { - AccountMenu, - AppBar, - AuxiliaryDrawer, - IconAdd, - IconAdminPanelSettings, - IconFlag, - IconGroup, - IconStacks, - IconTune, - IconUpload, - IconWorkspaces, - Logo, - NumberTag, - SearchBar, - Shell, -} from '@koupr/ui' -import cx from 'classnames' -import { Link, useLocation, useNavigate } from 'react-router-dom' - -export type LayoutProps = { - children?: ReactElement -} - -export const Layout = ({ children }: LayoutProps) => { - const location = useLocation() - const navigate = useNavigate() - const tasks = useDisclosure() - const uploads = useDisclosure() - const [query, setQuery] = useState('') - - useEffect(() => { - if (location.pathname === '/') { - navigate('/workspace') - } - }, [navigate]) - - return ( - } - topBar={ - } - title="Search filters" - aria-label="Search filters" - /> - } - onSearch={setQuery} - onClear={() => setQuery('')} - /> - } - buttons={ - <> - - } - title="Open console" - aria-label="Open console" - /> - } - header="Uploads" - body={<>} - isOpen={uploads.isOpen} - onClose={uploads.onClose} - onOpen={uploads.onOpen} - /> - } - header="Tasks" - body={<>} - hasBadge={true} - isOpen={tasks.isOpen} - onOpen={tasks.onOpen} - onClose={tasks.onClose} - /> - - - Settings - - -
- Invitations - 5 -
- - - Sign Out - - - } - /> - - } - /> - } - items={[ - { - href: '/workspace', - icon: , - primaryText: 'Workspaces', - secondaryText: 'Isolated containers for files and folders.', - }, - { - href: '/group', - icon: , - primaryText: 'Groups', - secondaryText: 'Allows assigning permissions to a group of users.', - }, - { - href: '/organization', - icon: , - primaryText: 'Organizations', - secondaryText: 'Umbrellas for workspaces and users.', - }, - ]} - pathnameFn={() => location.pathname} - navigateFn={navigate} - > - {children} - - ) -} diff --git a/src/stories/common/list.tsx b/src/stories/common/list.tsx deleted file mode 100644 index decd8c0..0000000 --- a/src/stories/common/list.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { Avatar, Link } from '@chakra-ui/react' -import { - DataTable, - IconChat, - IconFavorite, - IconLogout, - PagePagination, - usePagePagination, -} from '@koupr/ui' -import cx from 'classnames' -import { useLocation, useNavigate } from 'react-router-dom' -import { items } from './data' - -export const List = () => { - const navigate = useNavigate() - const location = useLocation() - const { page, size, steps, setPage, setSize } = usePagePagination({ - navigateFn: navigate, - searchFn: () => location.search, - }) - - return ( - ( -
- - {item.name} -
- ), - }, - { - title: 'Symbol', - renderCell: (item) => {item.symbol}, - }, - { - title: 'Date of Birth', - renderCell: (item) => ( - {new Date(item.dateOfBirth).toLocaleString()} - ), - }, - ]} - actions={[ - { - label: 'Mark As Favorite', - icon: , - onClick: (item) => console.log(`Marking ${item.name} as favorite!`), - }, - { - label: 'Start Conversation', - icon: , - isDisabled: true, - onClick: (item) => - console.log(`Starting a conversation with ${item.name}.`), - }, - { - label: 'Remove From Organization', - icon: , - isDestructive: true, - onClick: (item) => - console.log(`Removing ${item.name} from organization...`), - }, - ]} - pagination={ - - } - /> - ) -} diff --git a/src/stories/common/page.tsx b/src/stories/common/page.tsx deleted file mode 100644 index f64fab2..0000000 --- a/src/stories/common/page.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Tabs, TabList, Tab } from '@chakra-ui/react' -import cx from 'classnames' -import { Outlet, useNavigate } from 'react-router-dom' - -export const Page = () => { - const navigate = useNavigate() - return ( -
- - - navigate('/workspace/list')}>List - navigate('/workspace/settings')}>Settings - - - -
- ) -} diff --git a/src/stories/common/paragraphs.tsx b/src/stories/common/paragraphs.tsx deleted file mode 100644 index a9782d4..0000000 --- a/src/stories/common/paragraphs.tsx +++ /dev/null @@ -1,32 +0,0 @@ -export const ParagraphWorkspaces = () => ( -

- Lorem ipsum odor amet, consectetuer adipiscing elit. Duis nascetur magnis - morbi laoreet; montes porta. Pulvinar nunc per accumsan sed suspendisse sit - sapien. Venenatis maximus inceptos taciti vestibulum porta sagittis quisque - ipsum erat. Risus sodales conubia leo facilisi dignissim potenti senectus. - Lectus feugiat ornare amet iaculis metus inceptos adipiscing placerat. - Vestibulum faucibus facilisis viverra magna litora. Molestie lorem leo - malesuada dictumst porta erat sagittis ullamcorper sollicitudin. Hendrerit - ante maximus tincidunt, venenatis mauris molestie. -

-) - -export const ParagraphGroups = () => ( -

- Commodo volutpat facilisis habitant; mattis ultrices mauris ex nisi. - Consequat nascetur lacus sed fames convallis pretium sit justo. Gravida - curabitur condimentum hac mi, ridiculus montes. Eros commodo porttitor erat - amet primis imperdiet. Morbi at potenti volutpat litora viverra dapibus - sapien. Fermentum sodales nullam aliquam fusce aliquam. -

-) - -export const ParagraphOrganizations = () => ( -

- Dis eros primis condimentum a porttitor orci curabitur. Aluctus arcu blandit - dui facilisi interdum pretium tristique. Cras nam congue parturient posuere - tempor lectus? Felis hendrerit penatibus semper maximus convallis tortor. Et - potenti quisque ex phasellus magnis leo netus. Hac enim ante curae odio - libero feugiat metus conubia tincidunt. -

-) diff --git a/src/stories/common/settings.tsx b/src/stories/common/settings.tsx deleted file mode 100644 index 68acdb5..0000000 --- a/src/stories/common/settings.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { IconButton, Progress, Switch } from '@chakra-ui/react' -import { Form, IconDelete, IconEdit } from '@koupr/ui' -import cx from 'classnames' - -export const Settings = () => ( - - 5.67 GB of 38 GB used - - - ), - }, - { - title: 'Basics', - rows: [ - { - label: 'Full name', - content: ( - <> - Bruce Wayne - } - className={cx('h-[40px]', 'w-[40px]')} - title="Edit full name" - aria-label="Edit full name" - /> - - ), - }, - ], - }, - { - title: 'Credentials', - rows: [ - { - label: 'Email', - content: ( - <> - bruce.wayne@koupr.com - } - className={cx('h-[40px]', 'w-[40px]')} - title="Edit email" - aria-label="Edit email" - /> - - ), - }, - { - label: 'Password', - content: ( - } - className={cx('h-[40px]', 'w-[40px]')} - title="Change password" - aria-label="Change password" - /> - ), - }, - ], - }, - { - title: 'Theme', - rows: [ - { - label: 'Dark mode', - content: , - }, - ], - }, - { - title: 'Advanced', - rows: [ - { - label: 'Delete account', - content: ( - } - variant="solid" - colorScheme="red" - title="Delete account" - aria-label="Delete account" - /> - ), - }, - ], - }, - ]} - /> -) diff --git a/src/stories/components/data-table.stories.tsx b/src/stories/components/data-table.stories.tsx index 75ab7b9..6f73364 100644 --- a/src/stories/components/data-table.stories.tsx +++ b/src/stories/components/data-table.stories.tsx @@ -2,19 +2,50 @@ import { Avatar, Link } from '@chakra-ui/react' import { DataTable, IconChat, IconFavorite, IconLogout } from '@koupr/ui' import { Meta, StoryObj } from '@storybook/react' import cx from 'classnames' -import { Hero, items } from '../common/data' const meta: Meta = { title: 'Components/Data Table', component: DataTable, } +type SampleItem = { + name: string + symbol: string + dateOfBirth: string +} + export default meta -type Story = StoryObj> +type Story = StoryObj> export const Default: Story = { args: { - items: items, + items: [ + { + name: 'Bruce Wayne', + symbol: 'Batman', + dateOfBirth: '1915-04-07', + }, + { + name: 'Tony Stark', + symbol: 'Iron Man', + dateOfBirth: '1970-05-29', + }, + { + name: 'Steven Rogers', + symbol: 'Captain America', + dateOfBirth: '1918-07-04', + }, + { + name: 'Clinton Barton', + symbol: 'Hawkeye', + dateOfBirth: '1975-01-01', + }, + { + name: 'Natasha Romanoff', + symbol: 'Black Widow', + dateOfBirth: '1984-12-03', + }, + ], columns: [ { title: 'Name', diff --git a/src/stories/components/shell.stories.tsx b/src/stories/components/shell.stories.tsx index d2dc95b..0ef56ee 100644 --- a/src/stories/components/shell.stories.tsx +++ b/src/stories/components/shell.stories.tsx @@ -1,11 +1,6 @@ import { IconFlag, IconGroup, IconWorkspaces, Logo, Shell } from '@koupr/ui' import { Meta, StoryObj } from '@storybook/react' import { useLocation, useNavigate, Routes, Route } from 'react-router-dom' -import { - ParagraphGroups, - ParagraphOrganizations, - ParagraphWorkspaces, -} from '../common/paragraphs' const meta: Meta = { title: 'Components/Shell', @@ -54,9 +49,49 @@ export const Default: Story = { navigateFn={(href: string) => navigate(href)} > - } /> - } /> - } /> + + Lorem ipsum odor amet, consectetuer adipiscing elit. Duis + nascetur magnis morbi laoreet; montes porta. Pulvinar nunc per + accumsan sed suspendisse sit sapien. Venenatis maximus inceptos + taciti vestibulum porta sagittis quisque ipsum erat. Risus + sodales conubia leo facilisi dignissim potenti senectus. Lectus + feugiat ornare amet iaculis metus inceptos adipiscing placerat. + Vestibulum faucibus facilisis viverra magna litora. Molestie + lorem leo malesuada dictumst porta erat sagittis ullamcorper + sollicitudin. Hendrerit ante maximus tincidunt, venenatis mauris + molestie. +

+ } + /> + + Commodo volutpat facilisis habitant; mattis ultrices mauris ex + nisi. Consequat nascetur lacus sed fames convallis pretium sit + justo. Gravida curabitur condimentum hac mi, ridiculus montes. + Eros commodo porttitor erat amet primis imperdiet. Morbi at + potenti volutpat litora viverra dapibus sapien. Fermentum + sodales nullam aliquam fusce aliquam. +

+ } + /> + + Dis eros primis condimentum a porttitor orci curabitur. Aluctus + arcu blandit dui facilisi interdum pretium tristique. Cras nam + congue parturient posuere tempor lectus? Felis hendrerit + penatibus semper maximus convallis tortor. Et potenti quisque ex + phasellus magnis leo netus. Hac enim ante curae odio libero + feugiat metus conubia tincidunt. +

+ } + /> ) diff --git a/src/stories/components/sidenav.stories.tsx b/src/stories/components/sidenav.stories.tsx index 48d8e31..5eb671c 100644 --- a/src/stories/components/sidenav.stories.tsx +++ b/src/stories/components/sidenav.stories.tsx @@ -9,11 +9,6 @@ import { import { Meta, StoryObj } from '@storybook/react' import cx from 'classnames' import { Route, Routes, useLocation, useNavigate } from 'react-router-dom' -import { - ParagraphGroups, - ParagraphOrganizations, - ParagraphWorkspaces, -} from '../common/paragraphs' const meta: Meta = { title: 'Components/Sidenav', @@ -65,9 +60,49 @@ export const Default: Story = {
- } /> - } /> - } /> + + Lorem ipsum odor amet, consectetuer adipiscing elit. Duis + nascetur magnis morbi laoreet; montes porta. Pulvinar nunc per + accumsan sed suspendisse sit sapien. Venenatis maximus + inceptos taciti vestibulum porta sagittis quisque ipsum erat. + Risus sodales conubia leo facilisi dignissim potenti senectus. + Lectus feugiat ornare amet iaculis metus inceptos adipiscing + placerat. Vestibulum faucibus facilisis viverra magna litora. + Molestie lorem leo malesuada dictumst porta erat sagittis + ullamcorper sollicitudin. Hendrerit ante maximus tincidunt, + venenatis mauris molestie. +

+ } + /> + + Commodo volutpat facilisis habitant; mattis ultrices mauris ex + nisi. Consequat nascetur lacus sed fames convallis pretium sit + justo. Gravida curabitur condimentum hac mi, ridiculus montes. + Eros commodo porttitor erat amet primis imperdiet. Morbi at + potenti volutpat litora viverra dapibus sapien. Fermentum + sodales nullam aliquam fusce aliquam. +

+ } + /> + + Dis eros primis condimentum a porttitor orci curabitur. + Aluctus arcu blandit dui facilisi interdum pretium tristique. + Cras nam congue parturient posuere tempor lectus? Felis + hendrerit penatibus semper maximus convallis tortor. Et + potenti quisque ex phasellus magnis leo netus. Hac enim ante + curae odio libero feugiat metus conubia tincidunt. +

+ } + />