From d863f9cf3831a8e1033ccf781a38dc3aa366e3f9 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 09:13:20 -0500 Subject: [PATCH 1/7] docs: update all pages to include OnThisPage --- docs/app/icons/layout.tsx | 21 ++++++++----------- docs/app/icons/page.tsx | 21 ++++++++++++------- docs/app/icons/side-nav.json | 19 +++++++++++++++++ docs/app/preset/colors/colors.mdx | 17 +++++++++++++++ .../preset/colors/components/PaletteList.tsx | 8 ------- docs/app/preset/colors/page.tsx | 16 +++++++++++--- docs/app/preset/layout.tsx | 20 ++++-------------- docs/app/preset/page.tsx | 16 +++++++++++--- docs/app/preset/theme/page.tsx | 16 +++++++++++--- docs/app/preset/typography/page.tsx | 16 +++++++++++--- docs/app/react/layout.tsx | 14 ++----------- docs/app/react/page.tsx | 16 +++++++++++--- docs/app/react/use-theme-context/page.tsx | 18 ++++++++++++++-- docs/app/react/use-theme/page.tsx | 16 +++++++++++++- 14 files changed, 160 insertions(+), 74 deletions(-) create mode 100644 docs/app/icons/side-nav.json diff --git a/docs/app/icons/layout.tsx b/docs/app/icons/layout.tsx index 4c2042a8..20ca9758 100644 --- a/docs/app/icons/layout.tsx +++ b/docs/app/icons/layout.tsx @@ -1,21 +1,18 @@ import type { PropsWithChildren } from 'react' -import { cx } from '@/styled-system/css' -import { container } from '@/styled-system/patterns' -import { markdown } from '../styles/markdown' +import { PageLayout, PageSideNav } from '../components/PageLayout' +import SideNav, { type NavList } from '../components/SideNav' +import sideNavData from './side-nav.json' interface IconsProps {} export default function IconsLayout(props: PropsWithChildren) { return ( -
+ + + + + {props.children} -
+ ) } diff --git a/docs/app/icons/page.tsx b/docs/app/icons/page.tsx index a4df0ce5..81aaf10c 100644 --- a/docs/app/icons/page.tsx +++ b/docs/app/icons/page.tsx @@ -1,14 +1,19 @@ -import { css } from '@/styled-system/css' +import OnThisPage from '../components/OnThisPage' +import { PageMainContent, PageSections } from '../components/PageLayout' import Overview from './overview.mdx' export default function IconsPage() { return ( -
- -
+ <> + +
+ +
+ + + + + + ) } diff --git a/docs/app/icons/side-nav.json b/docs/app/icons/side-nav.json new file mode 100644 index 00000000..fc8cf99d --- /dev/null +++ b/docs/app/icons/side-nav.json @@ -0,0 +1,19 @@ +[ + { + "id": "1", + "label": "Overview", + "type": "heading" + }, + { + "id": "1:a", + "label": "Installation", + "route": "/icons", + "type": "route" + }, + { + "id": "1:b", + "label": "Icons", + "route": "/icons/all", + "type": "route" + } +] diff --git a/docs/app/preset/colors/colors.mdx b/docs/app/preset/colors/colors.mdx index 72c620e3..fd3b62c3 100644 --- a/docs/app/preset/colors/colors.mdx +++ b/docs/app/preset/colors/colors.mdx @@ -4,9 +4,26 @@ import PaletteList from './components/PaletteList' The Cerberus preset provides a set of semantic color tokens that can be used to style your application. +## Neutral + + +## Action + + +## Info + + +## Success + + +## Warning + + +## Danger + diff --git a/docs/app/preset/colors/components/PaletteList.tsx b/docs/app/preset/colors/components/PaletteList.tsx index f4379c30..a582ff46 100644 --- a/docs/app/preset/colors/components/PaletteList.tsx +++ b/docs/app/preset/colors/components/PaletteList.tsx @@ -97,14 +97,6 @@ export default function PaletteList(props: PaletteListProps) { mb: '8', })} > -

- {palette} -

    - - + <> + +
    + +
    +     + + + + + ) } diff --git a/docs/app/preset/layout.tsx b/docs/app/preset/layout.tsx index 4708c4ac..860d699c 100644 --- a/docs/app/preset/layout.tsx +++ b/docs/app/preset/layout.tsx @@ -1,30 +1,18 @@ import type { PropsWithChildren } from 'react' -import { - PageLayout, - PageMainContent, - PageSideNav, - PageSections, -} from '../components/PageLayout' +import { PageLayout, PageSideNav } from '../components/PageLayout' import SideNav, { type NavList } from '../components/SideNav' import sideNavData from './side-nav.json' -import OnThisPage from '../components/OnThisPage' -interface TypographyProps {} +interface PresetProps {} -export default function PresetLayout( - props: PropsWithChildren, -) { +export default function PresetLayout(props: PropsWithChildren) { return ( - {props.children} - - - - + {props.children} ) } diff --git a/docs/app/preset/page.tsx b/docs/app/preset/page.tsx index 81d8f606..0f213d93 100644 --- a/docs/app/preset/page.tsx +++ b/docs/app/preset/page.tsx @@ -1,9 +1,19 @@ +import OnThisPage from '../components/OnThisPage' +import { PageMainContent, PageSections } from '../components/PageLayout' import Overview from './overview.mdx' export default function PresetPage() { return ( -
    - -
    + <> + +
    + +
    +     + + + + + ) } diff --git a/docs/app/preset/theme/page.tsx b/docs/app/preset/theme/page.tsx index 5b28a4ff..16c500eb 100644 --- a/docs/app/preset/theme/page.tsx +++ b/docs/app/preset/theme/page.tsx @@ -1,9 +1,19 @@ +import OnThisPage from '../../components/OnThisPage' +import { PageMainContent, PageSections } from '../../components/PageLayout' import Theme from './theme.mdx' export default function ThemePage() { return ( -
    - -
    + <> + +
    + +
    +     + + + + + ) } diff --git a/docs/app/preset/typography/page.tsx b/docs/app/preset/typography/page.tsx index fc1eb1bb..d3f594fa 100644 --- a/docs/app/preset/typography/page.tsx +++ b/docs/app/preset/typography/page.tsx @@ -1,9 +1,19 @@ +import OnThisPage from '../../components/OnThisPage' +import { PageMainContent, PageSections } from '../../components/PageLayout' import Doc from './doc.mdx' export default function TypographyPage() { return ( -
    - -
    + <> + +
    + +
    +     + + + + + ) } diff --git a/docs/app/react/layout.tsx b/docs/app/react/layout.tsx index 452f9143..112cbded 100644 --- a/docs/app/react/layout.tsx +++ b/docs/app/react/layout.tsx @@ -1,13 +1,7 @@ import type { PropsWithChildren } from 'react' -import { - PageLayout, - PageMainContent, - PageSideNav, - PageSections, -} from '../components/PageLayout' +import { PageLayout, PageSideNav } from '../components/PageLayout' import SideNav, { type NavList } from '../components/SideNav' import sideNavData from './side-nav.json' -import OnThisPage from '../components/OnThisPage' interface ReactProps {} @@ -18,11 +12,7 @@ export default function ReactLayout(props: PropsWithChildren) { - {props.children} - - - - + {props.children} ) } diff --git a/docs/app/react/page.tsx b/docs/app/react/page.tsx index 8022f2f3..95b6c451 100644 --- a/docs/app/react/page.tsx +++ b/docs/app/react/page.tsx @@ -1,9 +1,19 @@ +import OnThisPage from '../components/OnThisPage' +import { PageMainContent, PageSections } from '../components/PageLayout' import Overview from './overview.mdx' export default function ReactPage() { return ( -
    - -
    + <> + +
    + +
    +     + + + + + ) } diff --git a/docs/app/react/use-theme-context/page.tsx b/docs/app/react/use-theme-context/page.tsx index 94f47365..8aa5f899 100644 --- a/docs/app/react/use-theme-context/page.tsx +++ b/docs/app/react/use-theme-context/page.tsx @@ -1,5 +1,19 @@ +import OnThisPage from '../../components/OnThisPage' +import { PageMainContent, PageSections } from '../../components/PageLayout' import UseThemeDoc from './doc.mdx' -export default function UseThemePage() { - return +export default function UseThemeContextPage() { + return ( + <> + +
    + +
    +     + + + + + + ) } diff --git a/docs/app/react/use-theme/page.tsx b/docs/app/react/use-theme/page.tsx index 94f47365..084e165b 100644 --- a/docs/app/react/use-theme/page.tsx +++ b/docs/app/react/use-theme/page.tsx @@ -1,5 +1,19 @@ +import OnThisPage from '../../components/OnThisPage' +import { PageMainContent, PageSections } from '../../components/PageLayout' import UseThemeDoc from './doc.mdx' export default function UseThemePage() { - return + return ( + <> + +
    + +
    +     + + + + + + ) } From 7ad69319b28a55e96f941e76d6d059d6e12f5cc7 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 10:00:34 -0500 Subject: [PATCH 2/7] feat(react): add Show component --- docs/app/react/show/doc.mdx | 81 ++++++++++++++++++++++++++ docs/app/react/show/page.tsx | 19 ++++++ docs/app/react/side-nav.json | 4 +- packages/react/src/components/Show.tsx | 23 ++++++++ packages/react/src/index.ts | 4 ++ tests/README.md | 63 ++++++++++++++++++++ tests/react/components/show.test.tsx | 48 +++++++++++++++ 7 files changed, 240 insertions(+), 2 deletions(-) create mode 100644 docs/app/react/show/doc.mdx create mode 100644 docs/app/react/show/page.tsx create mode 100644 packages/react/src/components/Show.tsx create mode 100644 tests/README.md create mode 100644 tests/react/components/show.test.tsx diff --git a/docs/app/react/show/doc.mdx b/docs/app/react/show/doc.mdx new file mode 100644 index 00000000..6cf27396 --- /dev/null +++ b/docs/app/react/show/doc.mdx @@ -0,0 +1,81 @@ +import { + WhenToUseAdmonition, + WhenNotToUseAdmonition, +} from '@/app/components/Admonition' + +# Show + +An easy to read absraction of the [Ternary Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) that allows you to conditionally render components in a more performant way. + + + +## Usage + +```tsx title="nav.tsx" {6} +import { useTheme } from '@cerberus-design/react' + +type CustomizedThemes = 'party-town' + +function Nav() { + const { theme, mode, updateTheme, updateMode } = useTheme() + + function handleSetTheme(theme: string) { + updateTheme('party-town') + } + + function handleToggleMode() { + updateMode((prev) => (prev === 'light' ? 'dark' : 'light')) + } + + return ( + + ) +} +``` + + + +## API + +```ts showLineNumbers=false +type DefaultThemes = 'cerberus' +type CustomThemes = 'cerberus' | K +type ColorModes = 'light' | 'dark' + +define function useTheme( + defaultTheme: CustomThemes = 'cerberus', + defaultColorMode: ColorModes = 'light', +): { + theme: CustomThemes + mode: ColorModes + updateTheme: (theme: CustomThemes) => void + updateMode: (mode: ColorModes) => void +} +``` + +### Arguments + +The `useTheme` accepts the following optional arguments: + +| Name | Default | Description | +| ------------ | ---------- | ------------------------------------------------ | +| defaultTheme | 'cerberus' | The default theme of the Cerberus Design System. | +| defaultMode | 'light' | The default mode of the Cerberus Design System. | + +### Return + +The `useTheme` hook returns an object with the following properties: + +| Name | Description | +| ----------- | ----------------------------------------------------------------------------- | +| theme | The current theme of the Cerberus Design System. | +| mode | The current mode of the Cerberus Design System. | +| updateTheme | A function that allows you to update the theme of the Cerberus Design System. | +| updateMode | A function that allows you to update the mode of the Cerberus Design System. | diff --git a/docs/app/react/show/page.tsx b/docs/app/react/show/page.tsx new file mode 100644 index 00000000..4c2c8f8f --- /dev/null +++ b/docs/app/react/show/page.tsx @@ -0,0 +1,19 @@ +import OnThisPage from '../../components/OnThisPage' +import { PageMainContent, PageSections } from '../../components/PageLayout' +import Doc from './doc.mdx' + +export default function ShowPage() { + return ( + <> + +
    + +
    +     + + + + + + ) +} diff --git a/docs/app/react/side-nav.json b/docs/app/react/side-nav.json index 2974d412..7cb4499c 100644 --- a/docs/app/react/side-nav.json +++ b/docs/app/react/side-nav.json @@ -17,8 +17,8 @@ }, { "id": "2:a", - "label": "Button", - "route": "/react/button", + "label": "Show", + "route": "/react/show", "type": "route" }, { diff --git a/packages/react/src/components/Show.tsx b/packages/react/src/components/Show.tsx new file mode 100644 index 00000000..0a20c78c --- /dev/null +++ b/packages/react/src/components/Show.tsx @@ -0,0 +1,23 @@ +'use client' + +import { useMemo, type PropsWithChildren, type ReactNode } from 'react' + +export interface ShowProps { + when: boolean | null | undefined + fallback?: ReactNode +} + +/** + * Conditionally render its children or an optional fallback component + * based on the SolidJS component. + * @description https://docs.solidjs.com/reference/components/show + */ +export function Show(props: PropsWithChildren) { + const { when, children, fallback } = props + const condition = useMemo(() => when ?? false, [when]) + + return useMemo(() => { + if (condition) return children + return fallback ?? null + }, [condition, children, fallback]) +} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 335f7851..4c2c5de6 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,3 +1,7 @@ +// components + +export * from './components/Show' + // context export * from './context/theme' diff --git a/tests/README.md b/tests/README.md new file mode 100644 index 00000000..413e115e --- /dev/null +++ b/tests/README.md @@ -0,0 +1,63 @@ +# Tests + +The workspace for writing an running tests for the Cerberus Design System. + +## Writing Tests + +This workspace uses Bun and Testing Library to write and run tests for the Cerberus Design System. + +### Setup + +Because this workspace uses Bun and Testing Library you will need to add some additional helpers to your `describe` functions. + +Add this to each test: + +```diff +import { describe, test, expect, afterEach } from 'bun:test' +import { cleanup, render, screen } from '@testing-library/react' +import { Show } from '@cerberus-design/react' +import { setupStrictMode } from '@/utils' + +describe('Show', () => { ++ setupStrictMode() ++ afterEach(cleanup) + + test('should do something', () => { + // Your test here + }) +}) +``` + +This is because Testing Library is tightly coupled to Jest (unfortunately) and Cerberus prefers a more lightweight and performant testing library via Bun and HappyDom. + +### Expect Statements + +Similar, you (currently) cannot use the Testing Library Jest helpers, rather you must use the native helpers. + +This will error: + +```ts +expect(screen.getByText(/hello world/i)).toBeInTheDocument() +``` + +This will work: + +```ts +expect(screen.queryByText(/hello world/i)).toBeTruthy() +``` + +## Running Tests + +To run tests, you can use the following commands: + +To run all tests with a coverage report (recommended): + +```bash +pnpm run test:ci +``` + +To run all tests without a coverage report: + +```bash +pnpm run test +``` diff --git a/tests/react/components/show.test.tsx b/tests/react/components/show.test.tsx new file mode 100644 index 00000000..e5041cd6 --- /dev/null +++ b/tests/react/components/show.test.tsx @@ -0,0 +1,48 @@ +import { describe, test, expect, afterEach } from 'bun:test' +import { cleanup, render, screen } from '@testing-library/react' +import { Show } from '@cerberus-design/react' +import { setupStrictMode } from '@/utils' + +describe('Show', () => { + setupStrictMode() + afterEach(cleanup) + + test('should render children when condition is true', () => { + render( + +
    children
    +     , + ) + expect(screen.getByText('children')).toBeTruthy() + }) + + test('should render fallback when condition is false', () => { + render( + fallback}> +
    children
    +     , + ) + expect(screen.getByText('fallback')).toBeTruthy() + expect(screen.queryByText('children')).toBeNull() + }) + + test('should render fallback when condition is undefined', () => { + render( + fallback}> +
    children
    +     , + ) + expect(screen.getByText('fallback')).toBeTruthy() + expect(screen.queryByText('children')).toBeNull() + }) + + test('should render fallback when condition is null', () => { + render( + fallback}> +
    children
    +     , + ) + expect(screen.getByText('fallback')).toBeTruthy() + expect(screen.queryByText('children')).toBeNull() + }) +}) From d15116fd7519e64e47003e5521b6e3c6abb326d5 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 10:28:13 -0500 Subject: [PATCH 3/7] docs(react): add Show doc.mdx --- docs/app/components/Nav.tsx | 81 ++++++++++++++++++++----------------- docs/app/react/show/doc.mdx | 74 +++++++++++++-------------------- 2 files changed, 72 insertions(+), 83 deletions(-) diff --git a/docs/app/components/Nav.tsx b/docs/app/components/Nav.tsx index 1ceb9bfa..452b77da 100644 --- a/docs/app/components/Nav.tsx +++ b/docs/app/components/Nav.tsx @@ -6,11 +6,50 @@ import { css } from '@/styled-system/css' import { grid, gridItem, hstack } from '@/styled-system/patterns' import navData from '@/app/data/navLinks.json' import { LogoGithub } from '@cerberus-design/icons' -import { useThemeContext } from '@cerberus-design/react' +import { Show, useThemeContext } from '@cerberus-design/react' import { AnimatingSunIcon } from './icons/AnimatingSunIcon' import { AnimatingMoonIcon } from './icons/AnimatingMoonIcon' import { usePathname } from 'next/navigation' +const navLogoContent = ( +
    + + Cerberus + Design System + +
    +) +const navGHLogoContent = ( +
  • + + + +
    • +) + export function Nav() { const pathname = usePathname() const { mode, updateMode } = useThemeContext() @@ -36,30 +75,7 @@ export function Nav() { }, })} > -
    - - Cerberus - Design System - -
    + {navLogoContent}
    -
  • - - - -
    • + {navGHLogoContent}
diff --git a/docs/app/react/show/doc.mdx b/docs/app/react/show/doc.mdx index 6cf27396..ba31e832 100644 --- a/docs/app/react/show/doc.mdx +++ b/docs/app/react/show/doc.mdx @@ -7,75 +7,55 @@ import { An easy to read absraction of the [Ternary Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) that allows you to conditionally render components in a more performant way. - + ## Usage -```tsx title="nav.tsx" {6} -import { useTheme } from '@cerberus-design/react' - -type CustomizedThemes = 'party-town' +```tsx title="nav.tsx" +import { Show } from '@cerberus-design/react' function Nav() { - const { theme, mode, updateTheme, updateMode } = useTheme() + const [isSignedIn, setIsSignedIn] = useState(false) - function handleSetTheme(theme: string) { - updateTheme('party-town') + function handleSignIn() { + setIsSignedIn(true) } - function handleToggleMode() { - updateMode((prev) => (prev === 'light' ? 'dark' : 'light')) + function handleSignOut() { + setIsSignedIn(false) } return ( - + ) } ``` - + ## API ```ts showLineNumbers=false -type DefaultThemes = 'cerberus' -type CustomThemes = 'cerberus' | K -type ColorModes = 'light' | 'dark' - -define function useTheme( - defaultTheme: CustomThemes = 'cerberus', - defaultColorMode: ColorModes = 'light', -): { - theme: CustomThemes - mode: ColorModes - updateTheme: (theme: CustomThemes) => void - updateMode: (mode: ColorModes) => void +export interface ShowProps { + when: boolean | null | undefined + fallback?: ReactNode } -``` -### Arguments - -The `useTheme` accepts the following optional arguments: - -| Name | Default | Description | -| ------------ | ---------- | ------------------------------------------------ | -| defaultTheme | 'cerberus' | The default theme of the Cerberus Design System. | -| defaultMode | 'light' | The default mode of the Cerberus Design System. | +define function Show(props: ShowProps): ReactNode | null +``` -### Return +### Props -The `useTheme` hook returns an object with the following properties: +The `Show` component the following props: -| Name | Description | -| ----------- | ----------------------------------------------------------------------------- | -| theme | The current theme of the Cerberus Design System. | -| mode | The current mode of the Cerberus Design System. | -| updateTheme | A function that allows you to update the theme of the Cerberus Design System. | -| updateMode | A function that allows you to update the mode of the Cerberus Design System. | +| Name | Default | Description | +| -------- | ------- | ------------------------------------------------------------- | +| when | false | The condition to evalue for showing the children or fallback. | +| fallback | null | The content to render when the condition is false. | From 9fdb975cc11db887d25b23bf97dafa78ad9dda6a Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 12:07:05 -0500 Subject: [PATCH 4/7] docs: add CodePreview component --- docs/app/components/CodePreview.tsx | 101 ++++++++++++++++++++++++++++ docs/app/react/show/doc.mdx | 48 +++++++------ 2 files changed, 127 insertions(+), 22 deletions(-) create mode 100644 docs/app/components/CodePreview.tsx diff --git a/docs/app/components/CodePreview.tsx b/docs/app/components/CodePreview.tsx new file mode 100644 index 00000000..447ab76d --- /dev/null +++ b/docs/app/components/CodePreview.tsx @@ -0,0 +1,101 @@ +'use client' + +import { useState, type PropsWithChildren, type ReactNode } from 'react' +import { Show } from '@cerberus-design/react' +import { Code, CodeHide } from '@cerberus-design/icons' +import { css } from '@/styled-system/css' +import { hstack, vstack } from '@/styled-system/patterns' + +const tempBtnStyles = css({ + alignItems: 'center', + display: 'inline-flex', + gap: '2', +}) + +interface CodePreviewProps { + preview: ReactNode +} + +export default function CodePreview( + props: PropsWithChildren, +) { + const [viewCode, setViewCode] = useState(false) + + function handleShowCode() { + setViewCode(true) + } + + function handleHideCode() { + setViewCode(false) + } + + return ( + + {props.preview} + + } + > +
+ +
+ {props.children} + + ) +} + +interface PreviewLayoutProps { + onShowCode: () => void +} + +export function PreviewLayout(props: PropsWithChildren) { + return ( +
+
+ +
+
+ {props.children} +
+
+ ) +} diff --git a/docs/app/react/show/doc.mdx b/docs/app/react/show/doc.mdx index ba31e832..c3506c3d 100644 --- a/docs/app/react/show/doc.mdx +++ b/docs/app/react/show/doc.mdx @@ -2,6 +2,7 @@ import { WhenToUseAdmonition, WhenNotToUseAdmonition, } from '@/app/components/Admonition' +import CodePreview from '@/app/components/CodePreview' # Show @@ -11,32 +12,35 @@ An easy to read absraction of the [Ternary Operator](https://developer.mozilla.o ## Usage +test}> ```tsx title="nav.tsx" import { Show } from '@cerberus-design/react' function Nav() { - const [isSignedIn, setIsSignedIn] = useState(false) - - function handleSignIn() { - setIsSignedIn(true) - } - - function handleSignOut() { - setIsSignedIn(false) - } - - return ( - Sign in} - > - - - ) +const [isSignedIn, setIsSignedIn] = useState(false) + +function handleSignIn() { +setIsSignedIn(true) +} + +function handleSignOut() { +setIsSignedIn(false) } -``` + +return ( + +Sign in} +> + + +) } + +```` + @@ -49,7 +53,7 @@ export interface ShowProps { } define function Show(props: ShowProps): ReactNode | null -``` +```` ### Props From 9d991d939b629cff8aa9d2329085e402fa41f8ee Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 12:38:56 -0500 Subject: [PATCH 5/7] doc: update show/docs.mdx --- .vscode/settings.json | 3 +- docs/app/components/CodePreview.tsx | 1 + .../react/show/components/show-preview.tsx | 33 +++++++++++++++++++ docs/app/react/show/doc.mdx | 12 ++++--- 4 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 docs/app/react/show/components/show-preview.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index cdb137ef..97a2fa06 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,7 +9,8 @@ "Shiki", "shikijs", "tseslint", - "Twoslash" + "Twoslash", + "Unauthenticate" ], "prettier.configPath": ".prettierrc", "prettier.prettierPath": "./node_modules/prettier", diff --git a/docs/app/components/CodePreview.tsx b/docs/app/components/CodePreview.tsx index 447ab76d..a8ad75a0 100644 --- a/docs/app/components/CodePreview.tsx +++ b/docs/app/components/CodePreview.tsx @@ -6,6 +6,7 @@ import { Code, CodeHide } from '@cerberus-design/icons' import { css } from '@/styled-system/css' import { hstack, vstack } from '@/styled-system/patterns' +// TODO: Replace with button recipe const tempBtnStyles = css({ alignItems: 'center', display: 'inline-flex', diff --git a/docs/app/react/show/components/show-preview.tsx b/docs/app/react/show/components/show-preview.tsx new file mode 100644 index 00000000..bc3f2b5a --- /dev/null +++ b/docs/app/react/show/components/show-preview.tsx @@ -0,0 +1,33 @@ +'use client' + +import { Show } from '@cerberus-design/react' +import { useState } from 'react' + +// TODO: Replace with button recipe + +export default function ShowPreview() { + const [authenticated, setAuthenticated] = useState(false) + + function handleAuthenticate() { + setAuthenticated(true) + } + + function handleUnauthenticate() { + setAuthenticated(false) + } + + return ( + + Sign in + + } + > + + + ) +} diff --git a/docs/app/react/show/doc.mdx b/docs/app/react/show/doc.mdx index c3506c3d..e7e5b75d 100644 --- a/docs/app/react/show/doc.mdx +++ b/docs/app/react/show/doc.mdx @@ -3,16 +3,21 @@ import { WhenNotToUseAdmonition, } from '@/app/components/Admonition' import CodePreview from '@/app/components/CodePreview' +import ShowPreview from '@/app/react/show/components/show-preview' # Show An easy to read absraction of the [Ternary Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) that allows you to conditionally render components in a more performant way. +```ts +import { Show } from '@cerberus-design/react' +``` + ## Usage -test}> +}> ```tsx title="nav.tsx" import { Show } from '@cerberus-design/react' @@ -38,8 +43,7 @@ return ( ) } - -```` +``` @@ -53,7 +57,7 @@ export interface ShowProps { } define function Show(props: ShowProps): ReactNode | null -```` +``` ### Props From 8325c5881091588d4b221f666a05b185b1f67973 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 14:45:59 -0500 Subject: [PATCH 6/7] docs(react): update Show doc based on feedback --- docs/app/components/CodePreview.tsx | 21 ++++++++++++++++++- .../react/show/components/show-preview.tsx | 2 +- docs/app/react/show/doc.mdx | 2 +- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/docs/app/components/CodePreview.tsx b/docs/app/components/CodePreview.tsx index a8ad75a0..4dfe9a38 100644 --- a/docs/app/components/CodePreview.tsx +++ b/docs/app/components/CodePreview.tsx @@ -6,7 +6,9 @@ import { Code, CodeHide } from '@cerberus-design/icons' import { css } from '@/styled-system/css' import { hstack, vstack } from '@/styled-system/patterns' -// TODO: Replace with button recipe +// TODO: Replace with Badge component +// TODO: Replace with Button component + const tempBtnStyles = css({ alignItems: 'center', display: 'inline-flex', @@ -92,9 +94,26 @@ export function PreviewLayout(props: PropsWithChildren) { mb: '4', minH: '18.75rem', overflow: 'hidden', + position: 'relative', py: '8', })} > + + preview mode + + {props.children} diff --git a/docs/app/react/show/components/show-preview.tsx b/docs/app/react/show/components/show-preview.tsx index bc3f2b5a..43d4e64c 100644 --- a/docs/app/react/show/components/show-preview.tsx +++ b/docs/app/react/show/components/show-preview.tsx @@ -3,7 +3,7 @@ import { Show } from '@cerberus-design/react' import { useState } from 'react' -// TODO: Replace with button recipe +// TODO: Replace with button component export default function ShowPreview() { const [authenticated, setAuthenticated] = useState(false) diff --git a/docs/app/react/show/doc.mdx b/docs/app/react/show/doc.mdx index e7e5b75d..a59ac58d 100644 --- a/docs/app/react/show/doc.mdx +++ b/docs/app/react/show/doc.mdx @@ -46,7 +46,7 @@ return ( ``` - + ## API From c1b01fddca8fe3c48c584e411743c9b112d234aa Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Wed, 15 May 2024 16:01:54 -0500 Subject: [PATCH 7/7] docs: update typography page --- .../components/typography-block.tsx} | 46 +++++++++++++--- .../typography/components/typography-list.tsx | 54 +++++++++++++++++++ docs/app/preset/typography/doc.mdx | 22 +------- 3 files changed, 96 insertions(+), 26 deletions(-) rename docs/app/{components/TypographyBlock.tsx => preset/typography/components/typography-block.tsx} (64%) create mode 100644 docs/app/preset/typography/components/typography-list.tsx diff --git a/docs/app/components/TypographyBlock.tsx b/docs/app/preset/typography/components/typography-block.tsx similarity index 64% rename from docs/app/components/TypographyBlock.tsx rename to docs/app/preset/typography/components/typography-block.tsx index 1277cde2..fdefe844 100644 --- a/docs/app/components/TypographyBlock.tsx +++ b/docs/app/preset/typography/components/typography-block.tsx @@ -1,5 +1,7 @@ import { css } from '@/styled-system/css' +import { vstack } from '@/styled-system/patterns' import { textStyles } from '@cerberus-design/panda-preset' +import { Show } from '@cerberus-design/react' const textStyleData = Object.entries(textStyles).map(([key, value]) => ({ key, @@ -7,6 +9,7 @@ const textStyleData = Object.entries(textStyles).map(([key, value]) => ({ })) const textStyleCSS = css({ + pb: 'initial !important', '&[data-style="display-sm"]': { textStyle: 'display-sm', }, @@ -71,21 +74,52 @@ const textStyleCSS = css({ interface TypographyBlockProps { group: 'display' | 'h' | 'body' | 'mono' | 'link' + liveText?: string } export function TypographyBlock(props: TypographyBlockProps) { const textList = textStyleData.filter(({ key }) => key.includes(props.group)) return ( -
+
    {textList.map(({ key, value }) => ( -
    -

    +

  • +

    {key}

    -

    {value.description as string}

    -
    • +

    + {value.description as string}} + > + {props.liveText} + +

    + ))} -
+ ) } diff --git a/docs/app/preset/typography/components/typography-list.tsx b/docs/app/preset/typography/components/typography-list.tsx new file mode 100644 index 00000000..36565f10 --- /dev/null +++ b/docs/app/preset/typography/components/typography-list.tsx @@ -0,0 +1,54 @@ +'use client' + +import { TypographyBlock } from './typography-block' +import { css } from '@/styled-system/css' +import { useState, type ChangeEvent } from 'react' + +interface TypographyListProps {} + +export default function TypographyList(props: TypographyListProps) { + const [temporaryText, setTemporaryText] = useState('') + + function handleUpdateText(e: ChangeEvent) { + setTemporaryText(e.currentTarget.value) + } + + return ( +
+
+ +
+ + + + + + +
+ ) +} diff --git a/docs/app/preset/typography/doc.mdx b/docs/app/preset/typography/doc.mdx index c4e3e2a2..926645cc 100644 --- a/docs/app/preset/typography/doc.mdx +++ b/docs/app/preset/typography/doc.mdx @@ -1,25 +1,7 @@ -import { TypographyBlock } from '@/app/components/TypographyBlock' +import TypographyList from './components/typography-list' # Typography The Cerberus preset provides a set of text style tokens that can be used to style the typography in your application. -## Display - - - -## Heading - - - -## Body - - - -## Code - - - -## Link - - +