Skip to content

Commit

Permalink
feat: enrich app bundle (#20)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bouassaba
bouassaba authored Nov 20, 2024
1 parent 6f13fcb commit 210d2cd
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 79 deletions.
218 changes: 170 additions & 48 deletions src/stories/bundles/app.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -21,11 +29,14 @@ import {
IconAdd,
IconAdminPanelSettings,
IconChat,
IconCheckCircle,
IconDelete,
IconEdit,
IconError,
IconFavorite,
IconFlag,
IconGroup,
IconHourglass,
IconLogout,
IconStacks,
IconTune,
Expand All @@ -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,
Expand Down Expand Up @@ -75,30 +90,18 @@ const App = () => {
</>
}
/>
<Route
path="/group"
element={
<p>
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.
</p>
}
/>
<Route path="/group" element={<SimulateLoadAndFail />} />
<Route
path="/organization"
element={
<p>
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.
</p>
<SectionPlaceholder
text="There are no organizations."
content={
<Button leftIcon={<IconAdd />} variant="solid">
New Organization
</Button>
}
/>
}
/>
</Routes>
Expand Down Expand Up @@ -146,13 +149,7 @@ const Layout = ({ children }: LayoutProps) => {
}
buttons={
<>
<Button
as={Link}
to="/new/workspace"
leftIcon={<IconAdd />}
variant="solid"
colorScheme="blue"
>
<Button leftIcon={<IconAdd />} variant="solid" colorScheme="blue">
New Workspace
</Button>
<IconButton
Expand All @@ -163,15 +160,24 @@ const Layout = ({ children }: LayoutProps) => {
<AuxiliaryDrawer
icon={<IconUpload />}
header="Uploads"
body={<></>}
body={
<SectionPlaceholder
text="There are no uploads."
content={
<Button leftIcon={<IconUpload />} variant="solid">
Upload File
</Button>
}
/>
}
isOpen={uploads.isOpen}
onClose={uploads.onClose}
onOpen={uploads.onOpen}
/>
<AuxiliaryDrawer
icon={<IconStacks />}
header="Tasks"
body={<></>}
body={<CardList />}
hasBadge={true}
isOpen={tasks.isOpen}
onOpen={tasks.onOpen}
Expand All @@ -183,10 +189,8 @@ const Layout = ({ children }: LayoutProps) => {
hasBadge={true}
menuItems={
<>
<MenuItem as={Link} to="/account/settings">
Settings
</MenuItem>
<MenuItem as={Link} to="/account/invitation">
<MenuItem>Settings</MenuItem>
<MenuItem>
<div
className={cx(
'flex',
Expand All @@ -199,13 +203,7 @@ const Layout = ({ children }: LayoutProps) => {
<NumberTag>5</NumberTag>
</div>
</MenuItem>
<MenuItem
as={Link}
to="/sign-out"
className={cx('text-red-500')}
>
Sign Out
</MenuItem>
<MenuItem className={cx('text-red-500')}>Sign Out</MenuItem>
</>
}
/>
Expand Down Expand Up @@ -271,7 +269,7 @@ type Story = StoryObj<typeof App>

export const Default: Story = {}

type SampleItem = {
type DataItem = {
name: string
symbol: string
dateOfBirth: string
Expand All @@ -286,7 +284,7 @@ const SampleDataTable = () => {
})

return (
<DataTable<SampleItem>
<DataTable<DataItem>
items={[
{
name: 'Bruce Wayne',
Expand Down Expand Up @@ -324,9 +322,7 @@ const SampleDataTable = () => {
size="sm"
className={cx('w-[40px]', 'h-[40px]')}
/>
<ChakraLink className={cx('no-underline')}>
{item.name}
</ChakraLink>
<Link className={cx('no-underline')}>{item.name}</Link>
</div>
),
},
Expand Down Expand Up @@ -467,3 +463,129 @@ const SampleForm = () => (
]}
/>
)

const SimulateLoadAndFail = () => {
const [isError, setIsError] = useState(false)

useEffect(() => {
setTimeout(() => setIsError(true), 1000)
}, [])

return (
<>
{!isError ? <SectionSpinner /> : null}
{isError ? <SectionError text="Failed to load data." /> : 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: (
<CircularProgress
isIndeterminate={true}
className={cx('text-black')}
size="20px"
/>
),
},
{
title: 'Lorem ipsum dolor sit amet',
icon: <IconHourglass />,
},
{
title: 'Lorem ipsum dolor sit amet',
icon: (
<IconCheckCircle
className={cx('shrink-0', 'text-green-500')}
filled={true}
/>
),
},
{
title: 'Lorem ipsum dolor sit amet',
icon: <IconError filled={true} className={cx('text-red-500')} />,
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 (
<div
className={cx(
'flex',
'flex-col',
'gap-1.5',
'justify-between',
'items-center',
'h-full',
)}
>
<div
className={cx(
'flex',
'flex-col',
'gap-1.5',
'w-full',
'overflow-y-auto',
)}
>
{items.map((item) => (
<Card variant="outline">
<CardBody>
<div className={cx('flex', 'flex-col', 'gap-1')}>
<div
className={cx('flex', 'flex-row', 'items-center', 'gap-1.5')}
>
{item.icon}
{item.title}
</div>
{item.accordion ? (
<Accordion allowMultiple>
<AccordionItem className={cx('border-none')}>
<AccordionButton className={cx('p-0.5')}>
<div className={cx('flex', 'flex-row', 'w-full')}>
<span className={cx('text-left', 'grow')}>
{item.accordion.title}
</span>
<AccordionIcon />
</div>
</AccordionButton>
<AccordionPanel className={cx('p-0.5')}>
<Text className={cx('text-red-500')} noOfLines={5}>
{item.accordion.content}
</Text>
</AccordionPanel>
</AccordionItem>
</Accordion>
) : null}
</div>
</CardBody>
</Card>
))}
</div>
<Pagination
size="sm"
maxButtons={3}
page={page}
totalPages={3}
onPageChange={(value) => setPage(value)}
/>
</div>
)
}
24 changes: 5 additions & 19 deletions src/stories/bundles/layout.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -61,13 +61,7 @@ const Layout = ({ children }: LayoutProps) => {
}
buttons={
<>
<Button
as={Link}
to="/new/workspace"
leftIcon={<IconAdd />}
variant="solid"
colorScheme="blue"
>
<Button leftIcon={<IconAdd />} variant="solid" colorScheme="blue">
New Workspace
</Button>
<IconButton
Expand Down Expand Up @@ -98,10 +92,8 @@ const Layout = ({ children }: LayoutProps) => {
hasBadge={true}
menuItems={
<>
<MenuItem as={Link} to="/account/settings">
Settings
</MenuItem>
<MenuItem as={Link} to="/account/invitation">
<MenuItem>Settings</MenuItem>
<MenuItem>
<div
className={cx(
'flex',
Expand All @@ -114,13 +106,7 @@ const Layout = ({ children }: LayoutProps) => {
<NumberTag>5</NumberTag>
</div>
</MenuItem>
<MenuItem
as={Link}
to="/sign-out"
className={cx('text-red-500')}
>
Sign Out
</MenuItem>
<MenuItem className={cx('text-red-500')}>Sign Out</MenuItem>
</>
}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/stories/bundles/page.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ type Story = StoryObj<typeof Page>

export const Default: Story = {}

type SampleItem = {
type DataItem = {
name: string
symbol: string
dateOfBirth: string
Expand All @@ -91,7 +91,7 @@ const SampleDataTable = () => {
})

return (
<DataTable<SampleItem>
<DataTable<DataItem>
items={[
{
name: 'Bruce Wayne',
Expand Down
Loading

0 comments on commit 210d2cd

Please sign in to comment.