From e3c2f0a8c001f7cfb25ccbeb673c3769f9824e0c Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 5 Sep 2024 10:30:43 -0500 Subject: [PATCH 1/4] feat(preset): make progressBar recipe --- docs/app/preset/utilities/doc.mdx | 2 +- packages/panda-preset/src/recipes/index.ts | 4 +- .../src/recipes/slots/progressBar.ts | 62 +++++++++++++++++++ packages/panda-preset/src/utilities.ts | 11 +++- 4 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 packages/panda-preset/src/recipes/slots/progressBar.ts diff --git a/docs/app/preset/utilities/doc.mdx b/docs/app/preset/utilities/doc.mdx index 66bdc2c7..c2987dc0 100644 --- a/docs/app/preset/utilities/doc.mdx +++ b/docs/app/preset/utilities/doc.mdx @@ -15,4 +15,4 @@ If you need to support multiple languages, we recommend using the `mxi` and `pxi | ------------------ | ------------------------- | | `mxi` | x-axis margin shorthand - used to set inline margin at the start and end of an element. | | `pxi` | x-axis padding shorthand - used to set inline padding at the start and end of an element. | -| `cerbGradient` | Custom gradient - either `purple`, `green`, or `blue` | \ No newline at end of file +| `cerbGradient` | Custom gradient - either `purple`, 'purple-100', `green`, or `blue` | \ No newline at end of file diff --git a/packages/panda-preset/src/recipes/index.ts b/packages/panda-preset/src/recipes/index.ts index 2a49e6af..163f8dcd 100644 --- a/packages/panda-preset/src/recipes/index.ts +++ b/packages/panda-preset/src/recipes/index.ts @@ -13,6 +13,7 @@ import { fileUploader } from './slots/fileUploader' import { input } from './slots/input' import { modal } from './slots/modal' import { notification } from './slots/notification' +import { progressBar } from './slots/progressBar' import { radio } from './slots/radio' import { select } from './slots/select' import { table } from './slots/table' @@ -40,8 +41,9 @@ export const recipes = { export const slotRecipes = { fileUploader, input, - notification, modal, + notification, + progressBar, radio, select, table, diff --git a/packages/panda-preset/src/recipes/slots/progressBar.ts b/packages/panda-preset/src/recipes/slots/progressBar.ts new file mode 100644 index 00000000..da2ccc46 --- /dev/null +++ b/packages/panda-preset/src/recipes/slots/progressBar.ts @@ -0,0 +1,62 @@ +import { defineSlotRecipe, type SlotRecipeConfig } from '@pandacss/dev' + +/** + * This module contains the progressBar recipe. + * @module + */ + +/** + * Styles for the ProgressBar component + * @definition [ProgressBar docs](https://cerberus.digitalu.design/react/progress-bar) + */ +export const progressBar: Partial = defineSlotRecipe({ + className: 'progressBar', + slots: ['root', 'bar'], + + base: { + root: { + bgColor: 'page.bg.100', + position: 'relative', + w: 'full', + }, + bar: { + cerbGradient: 'purple-100', + h: 'full', + left: 0, + position: 'absolute', + top: 0, + zIndex: 'decorator', + _indeterminate: { + _motionSafe: {}, + }, + }, + }, + + variants: { + size: { + sm: { + root: { + h: '0.75rem', + }, + }, + md: { + root: { + h: '1.5rem', + }, + }, + }, + usage: { + block: {}, + rounded: { + root: { + rounded: 'full', + }, + bar: { + rounded: 'full', + }, + }, + }, + }, + + defaultVariants: {}, +}) diff --git a/packages/panda-preset/src/utilities.ts b/packages/panda-preset/src/utilities.ts index 6bc5cb77..9b5f8c2d 100644 --- a/packages/panda-preset/src/utilities.ts +++ b/packages/panda-preset/src/utilities.ts @@ -33,9 +33,9 @@ const pxi: CustomUtilityConfig<'pxi'> = { const cerberusGradient: CustomUtilityConfig<'cerberusGradient'> = { cerberusGradient: { className: 'cerberus-gradient', - values: ['green', 'blue', 'purple'], + values: ['green', 'blue', 'purple', 'purple-100'], shorthand: 'cerbGradient', - transform(value: 'green' | 'blue' | 'purple') { + transform(value: 'green' | 'blue' | 'purple' | 'purple-100') { const color = '#21143B' switch (value) { case 'purple': @@ -45,6 +45,13 @@ const cerberusGradient: CustomUtilityConfig<'cerberusGradient'> = { 'linear-gradient(to bottom left, #EFE5F8, #BB93E1)', } + case 'purple-100': + return { + color, + backgroundImage: + 'linear-gradient(234deg, #5F00B5 -1.22%, #9F66D3 79.15%)', + } + case 'blue': return { color, From c9d0cd775723212b157e6ce77d80b5488bf6e613 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 5 Sep 2024 11:04:00 -0500 Subject: [PATCH 2/4] docs: create init Progress Bar pages --- docs/app/data/categories.json | 2 +- docs/app/react/progress-bar/a11y.mdx | 18 + .../components/progress-bar-preview.tsx | 55 +++ .../progress-bar/components/table-preview.tsx | 305 ++++++++++++ docs/app/react/progress-bar/dev.mdx | 465 ++++++++++++++++++ docs/app/react/progress-bar/guidelines.mdx | 24 + docs/app/react/progress-bar/overview.mdx | 28 ++ docs/app/react/progress-bar/page.tsx | 54 ++ docs/app/react/side-nav.json | 6 + .../src/recipes/slots/progressBar.ts | 26 +- 10 files changed, 976 insertions(+), 7 deletions(-) create mode 100644 docs/app/react/progress-bar/a11y.mdx create mode 100644 docs/app/react/progress-bar/components/progress-bar-preview.tsx create mode 100644 docs/app/react/progress-bar/components/table-preview.tsx create mode 100644 docs/app/react/progress-bar/dev.mdx create mode 100644 docs/app/react/progress-bar/guidelines.mdx create mode 100644 docs/app/react/progress-bar/overview.mdx create mode 100644 docs/app/react/progress-bar/page.tsx diff --git a/docs/app/data/categories.json b/docs/app/data/categories.json index 91b1fab0..f231d0a3 100644 --- a/docs/app/data/categories.json +++ b/docs/app/data/categories.json @@ -7,7 +7,7 @@ "communication": { "name": "Communication", "description": "Communication components provide useful information.", - "items": ["Notification", "Tag", "Tooltip"] + "items": ["Notification", "Progress Bar", "Tag", "Tooltip"] }, "containment": { "name": "Containment", diff --git a/docs/app/react/progress-bar/a11y.mdx b/docs/app/react/progress-bar/a11y.mdx new file mode 100644 index 00000000..ecb89d1e --- /dev/null +++ b/docs/app/react/progress-bar/a11y.mdx @@ -0,0 +1,18 @@ +--- +--- + +import { + WhenToUseAdmonition +} from '@/app/components/Admonition' +import OverviewList from '@/app/components/OverviewList' + +## Use Cases + + + +## Interaction & Style + +The active indicator, which displays progress, provides visual contrast of at least 3:1 against most background colors. diff --git a/docs/app/react/progress-bar/components/progress-bar-preview.tsx b/docs/app/react/progress-bar/components/progress-bar-preview.tsx new file mode 100644 index 00000000..99d5a6ec --- /dev/null +++ b/docs/app/react/progress-bar/components/progress-bar-preview.tsx @@ -0,0 +1,55 @@ +import { Tag } from '@cerberus-design/react' +import { hstack, vstack } from '@cerberus/styled-system/patterns' +import { + progressBar, + type ProgressBarVariantProps, +} from '@cerberus/styled-system/recipes' +import type { HtmlHTMLAttributes } from 'react' + +type ProgressBarProps = HtmlHTMLAttributes & + ProgressBarVariantProps & { + value: number + } + +function ProgressBar(props: ProgressBarProps) { + const styles = progressBar({ size: props.size, usage: props.usage }) + const width = { + width: `${props.value}%`, + } + + return ( +
+
+
+ ) +} + +export function OverviewPreview() { + return ( +
+
+ + Rounded +
+
+ + Block +
+
+ ) +} diff --git a/docs/app/react/progress-bar/components/table-preview.tsx b/docs/app/react/progress-bar/components/table-preview.tsx new file mode 100644 index 00000000..689c852b --- /dev/null +++ b/docs/app/react/progress-bar/components/table-preview.tsx @@ -0,0 +1,305 @@ +'use client' + +import { SortAscending, SortDescending } from '@cerberus-design/icons' +import { + Table, + Tbody, + Th, + Thead, + Tr, + Td, + Toggle, + Field, + useToggle, + Show, +} from '@cerberus-design/react' +import { css } from '@cerberus/styled-system/css' +import { hstack } from '@cerberus/styled-system/patterns' +import { useCallback, useMemo, useState } from 'react' + +export function SizesPreview() { + return ( +
+ + + + + + + + + + + +
Medium
Small
+ + + + + + + + + + + +
Medium
Medium
+ + + + + + + + + + + +
Large
Large
+
+ ) +} + +export function DecorationPreview() { + return ( +
+ + + + + + + + + + + + + + + + + +
Default
one
two
three
+ + + + + + + + + + + + + + + + + +
Zebra
one
two
three
+
+ ) +} + +export function BasicTablePreview() { + const first = useToggle() + const second = useToggle() + const third = useToggle() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + +
AnimalWildAdopt
DogFalse + + + +
CatMaybe + + + +
FishTrue + + + +
+ ) +} + +export function ClickablePreview() { + const [order, setOrder] = useState<'asc' | 'desc'>('asc') + const data = useMemo( + () => [ + { + id: '1', + name: 'John Doe', + age: 30, + }, + { + id: '2', + name: 'Jane Doe', + age: 25, + }, + ], + [], + ) + const sortedData = useMemo(() => { + return order === 'asc' + ? data.sort((a, b) => a.age - b.age) + : data.sort((a, b) => b.age - a.age) + }, [data, order]) + + const handleClick = useCallback(() => { + setOrder((prev) => (prev === 'asc' ? 'desc' : 'asc')) + }, []) + + return ( + + + + + + + + + {sortedData.map((person) => ( + + + + + ))} + +
Name + Age + }> + + +
{person.name}{person.age}
+ ) +} + +export function CustomizedPreview() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Wu-Tang Members + + Alias +
Method ManJohnny Blaze
RaekwonThe Chef
GZAThe Genius
Ghostface KillahTony Starks
Inspectah DeckRebel INS
U-GodGolden Arms
Masta KillaNoodles
Ol' Dirty BastardAson Unique
RZABobby Digital
+ ) +} diff --git a/docs/app/react/progress-bar/dev.mdx b/docs/app/react/progress-bar/dev.mdx new file mode 100644 index 00000000..aa0df861 --- /dev/null +++ b/docs/app/react/progress-bar/dev.mdx @@ -0,0 +1,465 @@ +--- +npm: '@cerberus-design/react' +source: 'components/Table.tsx' +recipe: 'table.ts' +--- + +import CodePreview from '@/app/components/CodePreview' +import { + NoteAdmonition +} from '@/app/components/Admonition' +import { + BasicTablePreview, + SizesPreview, + DecorationPreview, + ClickablePreview, + CustomizedPreview +} from '@/app/react/table/components/table-preview' + +```tsx +import { + Table, + Tbody, + Th, + Thead, + Tr, + Td +} from '@cerberus-design/react' +``` + +## Usage + +}> +```tsx title="table.tsx" +'use client' + +import { + Table, + Tbody, + Th, + Thead, + Tr, + Td, + Toggle, + Field, + useToggle, +} from '@cerberus-design/react' + +function BasicTablePreview() { + const first = useToggle() + const second = useToggle() + const third = useToggle() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + +
AnimalWildAdopt
DogFalse + + + +
CatMaybe + + + +
FishTrue + + + +
+ ) +} +``` + + +## Sizes + +}> +```tsx title="table.tsx" {17,22,29,34,41,46} +import { + Table, + Tbody, + Th, + Thead, + Tr, + Td, +} from '@cerberus-design/react' +import { hstack } from '@cerberus/styled-system/patterns' + +function SizesPreview() { + return ( +
+ + + + + + + + + + + +
Medium
Small
+ + + + + + + + + + + +
Medium
Medium
+ + + + + + + + + + + +
Large
Large
+
+ ) +} +``` + + +## Decoration + +}> +```tsx title="table.tsx" {20,38} +import { + Table, + Tbody, + Th, + Thead, + Tr, + Td, +} from '@cerberus-design/react' +import { hstack } from '@cerberus/styled-system/patterns' + +function DecorationPreview() { + return ( +
+ + + + + + + + + + + + + + + + + +
Default
one
two
three
+ + + + + + + + + + + + + + + + + +
Zebra
one
two
three
+
+ ) +} +``` + + +## Clickable + +}> +```tsx title="table.tsx" {51} +'use client' + +import { + Show, + Table, + Tbody, + Th, + Thead, + Tr, + Td, +} from '@cerberus-design/react' +import { SortAscending, SortDescending } from '@cerberus-design/icons' +imort { useCallback, useMemo, useState } from 'react' + +function ClickablePreview() { + const [order, setOrder] = useState<'asc' | 'desc'>('asc') + const data = useMemo( + () => [ + { + id: '1', + name: 'John Doe', + age: 30, + }, + { + id: '2', + name: 'Jane Doe', + age: 25, + }, + ], + [], + ) + const sortedData = useMemo(() => { + return order === 'asc' + ? data.sort((a, b) => a.age - b.age) + : data.sort((a, b) => b.age - a.age) + }, [data, order]) + + const handleClick = useCallback(() => { + setOrder((prev) => (prev === 'asc' ? 'desc' : 'asc')) + }, []) + + return ( + + + + + + + + + {sortedData.map((person) => ( + + + + + ))} + +
Name + Age + }> + + +
{person.name}{person.age}
+ ) +} +``` + + +## Customization + +You can customize the table by utilizing the `css` function. For full control, we recommend extending the recipes provided in your panda config. + +}> +```tsx title="table.tsx" +import { css } from '@cerberus/styled-system/css' +import { + Table, + Tbody, + Th, + Thead, + Tr, + Td, +} from '@cerberus-design/react' + +function CustomizedPreview() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Wu-Tang Members + + Alias +
Method ManJohnny Blaze
RaekwonThe Chef
GZAThe Genius
Ghostface KillahTony Starks
Inspectah DeckRebel INS
U-GodGolden Arms
Masta KillaNoodles
Ol' Dirty BastardAson Unique
RZABobby Digital
+ ) +} +``` + + +## API + +All Table components extend the native HTML elements. The following APIs are the only exception. + +### Table + +```ts showLineNumbers=false +interface TableProps extends TableHTMLAttributes { + caption: string +} + +define function Table(props: PropsWithChildren): ReactNode +```` + +| Name | Default | Description | +| -------- | ------- | -------------------------------------------- | +| caption | | A description of the table used for accessibility. | + +### Th + +```ts showLineNumbers=false +export type ThBaseProps = TableHTMLAttributes & { + onClick?: MouseEventHandler +} +export type ThProps = ThBaseProps & ThVariantProps + +define function Th(props: ThProps): ReactNode +```` + +| Name | Default | Description | +| -------- | ------- | -------------------------------------------- | +| size | `md` | The cell size of the th. | +| onClick | | Converts the table cell to a button element. | + +### Tbody + +```ts showLineNumbers=false +export type TbodyBaseProps = TableHTMLAttributes +export type TbodyProps = TbodyBaseProps & TbodyVariantProps + +define function Tbody(props: TbodyProps): ReactNode +```` + +| Name | Default | Description | +| -------- | ------- | -------------------------------------------- | +| decoration | `default` | Which style decoration to display for rows. | + +### Td + +```ts showLineNumbers=false +export type TdBaseProps = TableHTMLAttributes +export type TdProps = TdBaseProps & TdVariantProps + +define function Td(props: TdProps): ReactNode +```` + +| Name | Default | Description | +| -------- | ------- | -------------------------------------------- | +| size | `md` | The cell size of the td. | \ No newline at end of file diff --git a/docs/app/react/progress-bar/guidelines.mdx b/docs/app/react/progress-bar/guidelines.mdx new file mode 100644 index 00000000..e1352fe4 --- /dev/null +++ b/docs/app/react/progress-bar/guidelines.mdx @@ -0,0 +1,24 @@ +--- +--- + +import CodePreview from '@/app/components/CodePreview' +import OverviewList from '@/app/components/OverviewList' +import { + WhenToUseAdmonition, + WhenNotToUseAdmonition, +} from '@/app/components/Admonition' +import { + OverviewPreview +} from '@/app/react/progress-bar/components/progress-bar-preview' + +## Usage + +Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app's state and indicate available actions, such as whether users can navigate away from the current screen. + +Display overall progress of a group rather than the progress of each item in the group. + +} /> + + + + diff --git a/docs/app/react/progress-bar/overview.mdx b/docs/app/react/progress-bar/overview.mdx new file mode 100644 index 00000000..5979ac5a --- /dev/null +++ b/docs/app/react/progress-bar/overview.mdx @@ -0,0 +1,28 @@ +--- +heading: 'Progress Bar' +description: 'Progress bars show the status of a process in real time.' +a11y: 'forms' +--- + +import CodePreview from '@/app/components/CodePreview' +import OverviewList from '@/app/components/OverviewList' +import { + OverviewPreview +} from '@/app/react/progress-bar/components/progress-bar-preview' + + + +## Example + +} /> + +## Resources + +| Name | Resource | Status | +| -------- | -------- | ---------------------------------------------------- | +| Figma | [Design Kit (Figma)](https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?m=auto&node-id=0-1) | Private | \ No newline at end of file diff --git a/docs/app/react/progress-bar/page.tsx b/docs/app/react/progress-bar/page.tsx new file mode 100644 index 00000000..8f798857 --- /dev/null +++ b/docs/app/react/progress-bar/page.tsx @@ -0,0 +1,54 @@ +import ApiLinks from '@/app/components/ApiLinks' +import { + TabPageContent, + TabPageContentLayout, +} from '../../components/PageLayout' +import FeatureHeader from '@/app/components/FeatureHeader' +import type { MatchFeatureKind } from '@/app/components/MatchFeatureImg' +import PageTabs from '@/app/components/PageTabs' + +import Overview, { frontmatter } from './overview.mdx' +import Guidelines from './guidelines.mdx' +import Dev, { frontmatter as devFrontmatter } from './dev.mdx' +import A11y from './a11y.mdx' + +export default function ProgressBarPage() { + return ( + <> + + + + + + + } + guidelines={ + + + + } + dev={ + +
+ + +
+ + } + a11y={ + + + + } + /> + + + ) +} diff --git a/docs/app/react/side-nav.json b/docs/app/react/side-nav.json index b5714671..9875c2b0 100644 --- a/docs/app/react/side-nav.json +++ b/docs/app/react/side-nav.json @@ -35,6 +35,12 @@ "tag": "new", "type": "route" }, + { + "label": "Progress Bar", + "route": "/react/progress-bar", + "tag": "next", + "type": "route" + }, { "label": "Tag", "route": "/react/tags", diff --git a/packages/panda-preset/src/recipes/slots/progressBar.ts b/packages/panda-preset/src/recipes/slots/progressBar.ts index da2ccc46..e47daea6 100644 --- a/packages/panda-preset/src/recipes/slots/progressBar.ts +++ b/packages/panda-preset/src/recipes/slots/progressBar.ts @@ -25,9 +25,13 @@ export const progressBar: Partial = defineSlotRecipe({ left: 0, position: 'absolute', top: 0, + willChange: 'width', zIndex: 'decorator', - _indeterminate: { - _motionSafe: {}, + _motionSafe: { + transitionProperty: 'width', + transitionDuration: '150ms', + transitionTimingFunction: 'ease', + _indeterminate: {}, }, }, }, @@ -46,17 +50,27 @@ export const progressBar: Partial = defineSlotRecipe({ }, }, usage: { - block: {}, + block: { + root: { + rounded: 'initial', + }, + bar: { + rounded: 'initial', + }, + }, rounded: { root: { - rounded: 'full', + rounded: '1.5rem', }, bar: { - rounded: 'full', + rounded: '1.5rem', }, }, }, }, - defaultVariants: {}, + defaultVariants: { + size: 'md', + usage: 'rounded', + }, }) From 203f8db5831f3456fb2be13b29d85b60507dffb8 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 5 Sep 2024 11:06:56 -0500 Subject: [PATCH 3/4] test: add progressBar.test.ts --- .../recipes/slots/progressBar.test.ts | 75 +++++++++++++++++++ tests/panda-preset/utilities.test.ts | 9 +++ 2 files changed, 84 insertions(+) create mode 100644 tests/panda-preset/recipes/slots/progressBar.test.ts diff --git a/tests/panda-preset/recipes/slots/progressBar.test.ts b/tests/panda-preset/recipes/slots/progressBar.test.ts new file mode 100644 index 00000000..09b17961 --- /dev/null +++ b/tests/panda-preset/recipes/slots/progressBar.test.ts @@ -0,0 +1,75 @@ +import { describe, test, expect } from 'bun:test' +import { slotRecipes } from '@cerberus-design/panda-preset' + +describe('progressBar recipe', () => { + const { progressBar } = slotRecipes + + test('should be exported', () => { + expect(progressBar).toBeDefined() + }) + + test('should have a base style', () => { + expect(progressBar.base?.root).toMatchObject({ + bgColor: 'page.bg.100', + position: 'relative', + w: 'full', + }) + expect(progressBar.base?.bar).toMatchObject({ + cerbGradient: 'purple-100', + h: 'full', + left: 0, + position: 'absolute', + top: 0, + willChange: 'width', + zIndex: 'decorator', + _motionSafe: { + transitionProperty: 'width', + transitionDuration: '150ms', + transitionTimingFunction: 'ease', + _indeterminate: {}, + }, + }) + }) + + test('should have variants', () => { + expect(progressBar.variants).toMatchObject({ + size: { + sm: { + root: { + h: '0.75rem', + }, + }, + md: { + root: { + h: '1.5rem', + }, + }, + }, + usage: { + block: { + root: { + rounded: 'initial', + }, + bar: { + rounded: 'initial', + }, + }, + rounded: { + root: { + rounded: '1.5rem', + }, + bar: { + rounded: '1.5rem', + }, + }, + }, + }) + }) + + test('should have default variants', () => { + expect(progressBar.defaultVariants).toMatchObject({ + size: 'md', + usage: 'rounded', + }) + }) +}) diff --git a/tests/panda-preset/utilities.test.ts b/tests/panda-preset/utilities.test.ts index 3fbac920..5f7ab8a0 100644 --- a/tests/panda-preset/utilities.test.ts +++ b/tests/panda-preset/utilities.test.ts @@ -34,6 +34,7 @@ describe('utilities', () => { 'green', 'blue', 'purple', + 'purple-100', ]) // @ts-expect-error bug in the Panda-CSS types expect(utilities.extend.cerberusGradient.transform('green')).toMatchObject({ @@ -52,5 +53,13 @@ describe('utilities', () => { color: '#21143B', }, ) + expect( + // @ts-expect-error bug in the Panda-CSS types + utilities.extend.cerberusGradient.transform('purple-100'), + ).toMatchObject({ + backgroundImage: + 'linear-gradient(234deg, #5F00B5 -1.22%, #9F66D3 79.15%)', + color: '#21143B', + }) }) }) From 71b45c749795ad7c2ad33a39ef29daa345a0eadc Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 5 Sep 2024 11:12:51 -0500 Subject: [PATCH 4/4] docs: update progress-bar dev page --- .../progress-bar/components/table-preview.tsx | 305 ------------ docs/app/react/progress-bar/dev.mdx | 448 +----------------- 2 files changed, 13 insertions(+), 740 deletions(-) delete mode 100644 docs/app/react/progress-bar/components/table-preview.tsx diff --git a/docs/app/react/progress-bar/components/table-preview.tsx b/docs/app/react/progress-bar/components/table-preview.tsx deleted file mode 100644 index 689c852b..00000000 --- a/docs/app/react/progress-bar/components/table-preview.tsx +++ /dev/null @@ -1,305 +0,0 @@ -'use client' - -import { SortAscending, SortDescending } from '@cerberus-design/icons' -import { - Table, - Tbody, - Th, - Thead, - Tr, - Td, - Toggle, - Field, - useToggle, - Show, -} from '@cerberus-design/react' -import { css } from '@cerberus/styled-system/css' -import { hstack } from '@cerberus/styled-system/patterns' -import { useCallback, useMemo, useState } from 'react' - -export function SizesPreview() { - return ( -
- - - - - - - - - - - -
Medium
Small
- - - - - - - - - - - -
Medium
Medium
- - - - - - - - - - - -
Large
Large
-
- ) -} - -export function DecorationPreview() { - return ( -
- - - - - - - - - - - - - - - - - -
Default
one
two
three
- - - - - - - - - - - - - - - - - -
Zebra
one
two
three
-
- ) -} - -export function BasicTablePreview() { - const first = useToggle() - const second = useToggle() - const third = useToggle() - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - -
AnimalWildAdopt
DogFalse - - - -
CatMaybe - - - -
FishTrue - - - -
- ) -} - -export function ClickablePreview() { - const [order, setOrder] = useState<'asc' | 'desc'>('asc') - const data = useMemo( - () => [ - { - id: '1', - name: 'John Doe', - age: 30, - }, - { - id: '2', - name: 'Jane Doe', - age: 25, - }, - ], - [], - ) - const sortedData = useMemo(() => { - return order === 'asc' - ? data.sort((a, b) => a.age - b.age) - : data.sort((a, b) => b.age - a.age) - }, [data, order]) - - const handleClick = useCallback(() => { - setOrder((prev) => (prev === 'asc' ? 'desc' : 'asc')) - }, []) - - return ( - - - - - - - - - {sortedData.map((person) => ( - - - - - ))} - -
Name - Age - }> - - -
{person.name}{person.age}
- ) -} - -export function CustomizedPreview() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Wu-Tang Members - - Alias -
Method ManJohnny Blaze
RaekwonThe Chef
GZAThe Genius
Ghostface KillahTony Starks
Inspectah DeckRebel INS
U-GodGolden Arms
Masta KillaNoodles
Ol' Dirty BastardAson Unique
RZABobby Digital
- ) -} diff --git a/docs/app/react/progress-bar/dev.mdx b/docs/app/react/progress-bar/dev.mdx index aa0df861..2fd831ba 100644 --- a/docs/app/react/progress-bar/dev.mdx +++ b/docs/app/react/progress-bar/dev.mdx @@ -1,7 +1,7 @@ --- npm: '@cerberus-design/react' -source: 'components/Table.tsx' -recipe: 'table.ts' +source: 'components/ProgressBar.tsx' +recipe: 'slots/progressBar.ts' --- import CodePreview from '@/app/components/CodePreview' @@ -9,457 +9,35 @@ import { NoteAdmonition } from '@/app/components/Admonition' import { - BasicTablePreview, - SizesPreview, - DecorationPreview, - ClickablePreview, - CustomizedPreview -} from '@/app/react/table/components/table-preview' + OverviewPreview +} from '@/app/react/progress-bar/components/progress-bar-preview' ```tsx -import { - Table, - Tbody, - Th, - Thead, - Tr, - Td -} from '@cerberus-design/react' +import { ProgressBar } from '@cerberus-design/react' ``` ## Usage -}> -```tsx title="table.tsx" -'use client' - -import { - Table, - Tbody, - Th, - Thead, - Tr, - Td, - Toggle, - Field, - useToggle, -} from '@cerberus-design/react' - -function BasicTablePreview() { - const first = useToggle() - const second = useToggle() - const third = useToggle() - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - -
AnimalWildAdopt
DogFalse - - - -
CatMaybe - - - -
FishTrue - - - -
- ) -} -``` - - -## Sizes - -}> -```tsx title="table.tsx" {17,22,29,34,41,46} -import { - Table, - Tbody, - Th, - Thead, - Tr, - Td, -} from '@cerberus-design/react' -import { hstack } from '@cerberus/styled-system/patterns' - -function SizesPreview() { - return ( -
- - - - - - - - - - - -
Medium
Small
- - - - - - - - - - - -
Medium
Medium
- - - - - - - - - - - -
Large
Large
-
- ) -} -``` - - -## Decoration - -}> -```tsx title="table.tsx" {20,38} -import { - Table, - Tbody, - Th, - Thead, - Tr, - Td, -} from '@cerberus-design/react' -import { hstack } from '@cerberus/styled-system/patterns' - -function DecorationPreview() { - return ( -
- - - - - - - - - - - - - - - - - -
Default
one
two
three
- - - - - - - - - - - - - - - - - -
Zebra
one
two
three
-
- ) -} -``` - - -## Clickable - -}> -```tsx title="table.tsx" {51} -'use client' - -import { - Show, - Table, - Tbody, - Th, - Thead, - Tr, - Td, -} from '@cerberus-design/react' -import { SortAscending, SortDescending } from '@cerberus-design/icons' -imort { useCallback, useMemo, useState } from 'react' - -function ClickablePreview() { - const [order, setOrder] = useState<'asc' | 'desc'>('asc') - const data = useMemo( - () => [ - { - id: '1', - name: 'John Doe', - age: 30, - }, - { - id: '2', - name: 'Jane Doe', - age: 25, - }, - ], - [], - ) - const sortedData = useMemo(() => { - return order === 'asc' - ? data.sort((a, b) => a.age - b.age) - : data.sort((a, b) => b.age - a.age) - }, [data, order]) - - const handleClick = useCallback(() => { - setOrder((prev) => (prev === 'asc' ? 'desc' : 'asc')) - }, []) - - return ( - - - - - - - - - {sortedData.map((person) => ( - - - - - ))} - -
Name - Age - }> - - -
{person.name}{person.age}
- ) -} -``` - +} /> ## Customization You can customize the table by utilizing the `css` function. For full control, we recommend extending the recipes provided in your panda config. -}> -```tsx title="table.tsx" -import { css } from '@cerberus/styled-system/css' -import { - Table, - Tbody, - Th, - Thead, - Tr, - Td, -} from '@cerberus-design/react' - -function CustomizedPreview() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Wu-Tang Members - - Alias -
Method ManJohnny Blaze
RaekwonThe Chef
GZAThe Genius
Ghostface KillahTony Starks
Inspectah DeckRebel INS
U-GodGolden Arms
Masta KillaNoodles
Ol' Dirty BastardAson Unique
RZABobby Digital
- ) -} -``` - +} /> ## API -All Table components extend the native HTML elements. The following APIs are the only exception. - -### Table - ```ts showLineNumbers=false -interface TableProps extends TableHTMLAttributes { - caption: string +export interface ProgressBarProps extends HTMLAttributes { + size?: 'sm' | 'md' + usage?: 'block' | 'rounded' } -define function Table(props: PropsWithChildren): ReactNode -```` - -| Name | Default | Description | -| -------- | ------- | -------------------------------------------- | -| caption | | A description of the table used for accessibility. | - -### Th - -```ts showLineNumbers=false -export type ThBaseProps = TableHTMLAttributes & { - onClick?: MouseEventHandler -} -export type ThProps = ThBaseProps & ThVariantProps - -define function Th(props: ThProps): ReactNode -```` - -| Name | Default | Description | -| -------- | ------- | -------------------------------------------- | -| size | `md` | The cell size of the th. | -| onClick | | Converts the table cell to a button element. | - -### Tbody - -```ts showLineNumbers=false -export type TbodyBaseProps = TableHTMLAttributes -export type TbodyProps = TbodyBaseProps & TbodyVariantProps - -define function Tbody(props: TbodyProps): ReactNode -```` - -| Name | Default | Description | -| -------- | ------- | -------------------------------------------- | -| decoration | `default` | Which style decoration to display for rows. | - -### Td - -```ts showLineNumbers=false -export type TdBaseProps = TableHTMLAttributes -export type TdProps = TdBaseProps & TdVariantProps - -define function Td(props: TdProps): ReactNode +define function ProgressBar(props: ProgressBarProps): ReactNode ```` | Name | Default | Description | | -------- | ------- | -------------------------------------------- | -| size | `md` | The cell size of the td. | \ No newline at end of file +| size | `md` | The size of the progress bar. | +| usage | `rounded` | The style of the progress bar. | \ No newline at end of file