From 210d2cdefd004b8d6e104b6ff0a6050ef0c7b0c8 Mon Sep 17 00:00:00 2001 From: Anass Bouassaba Date: Wed, 20 Nov 2024 05:44:52 +0100 Subject: [PATCH] feat: enrich app bundle (#20) --- src/stories/bundles/app.stories.tsx | 218 ++++++++++++++---- src/stories/bundles/layout.stories.tsx | 24 +- src/stories/bundles/page.stories.tsx | 4 +- .../components/account-menu.stories.tsx | 11 +- src/stories/components/data-table.stories.tsx | 4 +- 5 files changed, 182 insertions(+), 79 deletions(-) diff --git a/src/stories/bundles/app.stories.tsx b/src/stories/bundles/app.stories.tsx index 58bc897..047c4cc 100644 --- a/src/stories/bundles/app.stories.tsx +++ b/src/stories/bundles/app.stories.tsx @@ -6,11 +6,19 @@ import { MenuItem, Progress, Switch, - Link as ChakraLink, + Link, useDisclosure, Tabs, TabList, Tab, + Card, + CardBody, + Accordion, + AccordionItem, + AccordionButton, + AccordionIcon, + AccordionPanel, + CircularProgress, } from '@chakra-ui/react' import { AccountMenu, @@ -21,11 +29,14 @@ import { IconAdd, IconAdminPanelSettings, IconChat, + IconCheckCircle, IconDelete, IconEdit, + IconError, IconFavorite, IconFlag, IconGroup, + IconHourglass, IconLogout, IconStacks, IconTune, @@ -34,14 +45,18 @@ import { Logo, NumberTag, PagePagination, + Pagination, SearchBar, + SectionError, + SectionPlaceholder, + SectionSpinner, Shell, + Text, usePagePagination, } from '@koupr/ui' import { Meta, StoryObj } from '@storybook/react' import cx from 'classnames' import { - Link, Outlet, Route, Routes, @@ -75,30 +90,18 @@ const App = () => { } /> - - 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. -

+ } variant="solid"> + New Organization + + } + /> } /> @@ -146,13 +149,7 @@ const Layout = ({ children }: LayoutProps) => { } buttons={ <> - { } header="Uploads" - body={<>} + body={ + } variant="solid"> + Upload File + + } + /> + } isOpen={uploads.isOpen} onClose={uploads.onClose} onOpen={uploads.onOpen} @@ -171,7 +177,7 @@ const Layout = ({ children }: LayoutProps) => { } header="Tasks" - body={<>} + body={} hasBadge={true} isOpen={tasks.isOpen} onOpen={tasks.onOpen} @@ -183,10 +189,8 @@ const Layout = ({ children }: LayoutProps) => { hasBadge={true} menuItems={ <> - - Settings - - + Settings +
{ 5
- - Sign Out - + Sign Out } /> @@ -271,7 +269,7 @@ type Story = StoryObj export const Default: Story = {} -type SampleItem = { +type DataItem = { name: string symbol: string dateOfBirth: string @@ -286,7 +284,7 @@ const SampleDataTable = () => { }) return ( - + items={[ { name: 'Bruce Wayne', @@ -324,9 +322,7 @@ const SampleDataTable = () => { size="sm" className={cx('w-[40px]', 'h-[40px]')} /> - - {item.name} - + {item.name} ), }, @@ -467,3 +463,129 @@ const SampleForm = () => ( ]} /> ) + +const SimulateLoadAndFail = () => { + const [isError, setIsError] = useState(false) + + useEffect(() => { + setTimeout(() => setIsError(true), 1000) + }, []) + + return ( + <> + {!isError ? : null} + {isError ? : null} + + ) +} + +type CardItem = { + title: string + icon: ReactElement + accordion?: { + title: string + content: string + } +} + +const CardList = () => { + const [page, setPage] = useState(1) + const items: CardItem[] = [ + { + title: 'Lorem ipsum dolor sit amet', + icon: ( + + ), + }, + { + title: 'Lorem ipsum dolor sit amet', + icon: , + }, + { + title: 'Lorem ipsum dolor sit amet', + icon: ( + + ), + }, + { + title: 'Lorem ipsum dolor sit amet', + icon: , + accordion: { + title: 'Expand to view details.', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + }, + }, + ] + + return ( +
+
+ {items.map((item) => ( + + +
+
+ {item.icon} + {item.title} +
+ {item.accordion ? ( + + + +
+ + {item.accordion.title} + + +
+ + + + {item.accordion.content} + + + + + ) : null} +
+ + + ))} +
+ setPage(value)} + /> +
+ ) +} diff --git a/src/stories/bundles/layout.stories.tsx b/src/stories/bundles/layout.stories.tsx index d222b54..bc2e63d 100644 --- a/src/stories/bundles/layout.stories.tsx +++ b/src/stories/bundles/layout.stories.tsx @@ -19,7 +19,7 @@ import { } from '@koupr/ui' import type { Meta, StoryObj } from '@storybook/react' import cx from 'classnames' -import { Link, Route, Routes, useLocation, useNavigate } from 'react-router-dom' +import { Route, Routes, useLocation, useNavigate } from 'react-router-dom' type LayoutProps = { children?: ReactElement @@ -61,13 +61,7 @@ const Layout = ({ children }: LayoutProps) => { } buttons={ <> - { hasBadge={true} menuItems={ <> - - Settings - - + Settings +
{ 5
- - Sign Out - + Sign Out } /> diff --git a/src/stories/bundles/page.stories.tsx b/src/stories/bundles/page.stories.tsx index eb6855d..55a0957 100644 --- a/src/stories/bundles/page.stories.tsx +++ b/src/stories/bundles/page.stories.tsx @@ -76,7 +76,7 @@ type Story = StoryObj export const Default: Story = {} -type SampleItem = { +type DataItem = { name: string symbol: string dateOfBirth: string @@ -91,7 +91,7 @@ const SampleDataTable = () => { }) return ( - + items={[ { name: 'Bruce Wayne', diff --git a/src/stories/components/account-menu.stories.tsx b/src/stories/components/account-menu.stories.tsx index 8e00fb6..0ebdc27 100644 --- a/src/stories/components/account-menu.stories.tsx +++ b/src/stories/components/account-menu.stories.tsx @@ -2,7 +2,6 @@ import { MenuItem } from '@chakra-ui/react' import { AccountMenu, NumberTag } from '@koupr/ui' import { Meta, StoryObj } from '@storybook/react' import cx from 'classnames' -import { Link } from 'react-router-dom' const meta: Meta = { title: 'Components/Account Menu', @@ -20,18 +19,14 @@ export const Default: Story = { isLoading: false, menuItems: ( <> - - Settings - - + Settings +
Invitations 5
- - Sign Out - + Sign Out ), }, diff --git a/src/stories/components/data-table.stories.tsx b/src/stories/components/data-table.stories.tsx index 6f73364..321585b 100644 --- a/src/stories/components/data-table.stories.tsx +++ b/src/stories/components/data-table.stories.tsx @@ -8,14 +8,14 @@ const meta: Meta = { component: DataTable, } -type SampleItem = { +type DataItem = { name: string symbol: string dateOfBirth: string } export default meta -type Story = StoryObj> +type Story = StoryObj> export const Default: Story = { args: {