From 3273b44f75e357b0010939cff6a6c7aa6f5e4163 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 19 Sep 2024 11:33:54 -0500 Subject: [PATCH 1/4] docs: update react sideNav to use categories.json --- docs/app/components/SideNav.tsx | 14 ++++---- docs/app/data/categories.json | 24 ++++++++++---- docs/app/react/layout.tsx | 8 ++--- docs/app/react/side-nav.ts | 57 +++++++++++++++++++++++++++++++++ 4 files changed, 85 insertions(+), 18 deletions(-) create mode 100644 docs/app/react/side-nav.ts diff --git a/docs/app/components/SideNav.tsx b/docs/app/components/SideNav.tsx index 897cae86..2ed2aee4 100644 --- a/docs/app/components/SideNav.tsx +++ b/docs/app/components/SideNav.tsx @@ -4,19 +4,17 @@ import { type PropsWithChildren, memo } from 'react' import MatchSideNavItem from './MatchSideNavItem' export type NavList = (HeadingItem | LinkItem)[] -type SideNavType = 'heading' | 'route' +export type NavItemType = 'heading' | 'route' -interface SideNavItem { - id: string +export interface HeadingItem { label: string - type: SideNavType -} - -export interface HeadingItem extends SideNavItem { + route?: never + tag?: never type: 'heading' } -export interface LinkItem extends SideNavItem { +export interface LinkItem { + label: string route: string tag: '' | 'new' | 'next' type: 'route' diff --git a/docs/app/data/categories.json b/docs/app/data/categories.json index c2cad021..b314106a 100644 --- a/docs/app/data/categories.json +++ b/docs/app/data/categories.json @@ -2,31 +2,43 @@ "actions": { "name": "Actions", "description": "Components that trigger an action.", - "items": ["Button", "Icon Button"] + "items": ["Button", "Icon Button"], + "next": [], + "new": [] }, "communication": { "name": "Communication", "description": "Communication components provide useful information.", - "items": ["Avatar", "Notification", "Progress Bar", "Tag", "Tooltip"] + "items": ["Avatar", "Notification", "Progress Bar", "Tag", "Tooltip"], + "next": [], + "new": ["Avatar", "Progress Bar"] }, "containment": { "name": "Containment", "description": "Components that contain other components.", - "items": ["Confirm Modal", "Prompt Modal", "Modal", "Table"] + "items": ["Confirm Modal", "Prompt Modal", "Modal", "Table"], + "next": [], + "new": [] }, "navigation": { "name": "Navigation", "description": "Components that help users navigate through the app.", - "items": ["Nav Menu", "Tabs"] + "items": ["Nav Menu", "Tabs"], + "next": [], + "new": [] }, "selection": { "name": "Selection", "description": "Components that allow users to select choices.", - "items": ["Drag & Drop", "Checkbox", "Radio", "Select", "Toggle"] + "items": ["Drag & Drop", "Checkbox", "Radio", "Select", "Toggle"], + "next": [], + "new": ["Select", "Checkbox"] }, "inputs": { "name": "Inputs", "description": "Components that allow users to input data.", - "items": ["Input", "Textarea", "File Uploader"] + "items": ["Input", "Textarea", "File Uploader"], + "next": [], + "new": ["File Uploader"] } } diff --git a/docs/app/react/layout.tsx b/docs/app/react/layout.tsx index 3f13c517..bbe0eca0 100644 --- a/docs/app/react/layout.tsx +++ b/docs/app/react/layout.tsx @@ -1,8 +1,8 @@ import type { PropsWithChildren } from 'react' -import { PageLayout, PageSideNav } from '../components/PageLayout' -import SideNav, { type NavList } from '../components/SideNav' -import sideNavData from './side-nav.json' import type { Metadata } from 'next/types' +import { PageLayout, PageSideNav } from '../components/PageLayout' +import SideNav from '../components/SideNav' +import { sideNavData } from './side-nav' interface ReactProps {} @@ -14,7 +14,7 @@ export default function ReactLayout(props: PropsWithChildren) { return ( - + {props.children} diff --git a/docs/app/react/side-nav.ts b/docs/app/react/side-nav.ts new file mode 100644 index 00000000..cc08c6d9 --- /dev/null +++ b/docs/app/react/side-nav.ts @@ -0,0 +1,57 @@ +import categoriesData from '@/app/data/categories.json' +import { type NavList } from '../components/SideNav' + +interface Category { + name: string + description: string + items: string[] + next: string[] + new: string[] +} +type CategoriesList = Record + +const overviewGroup: CategoriesList = { + overview: { + name: 'Overview', + description: 'Getting started with Cerberus React', + items: ['Getting Started', 'Loading States'], + next: [], + new: ['Loading States'], + }, +} + +function createSideNavData(categories: CategoriesList): NavList { + const navList: NavList = [] + Object.values(categories).forEach((category) => { + navList.push({ + label: category.name, + type: 'heading', + }) + category.items.forEach((name) => { + const formattedName = name === 'Getting Started' ? '' : name + navList.push({ + label: name, + route: `/react/${formattedName.replace(/ /g, '-').toLowerCase()}`, + tag: getCategoryItemTags(name, category.new, category.next), + type: 'route', + }) + }) + }) + return navList +} + +function getCategoryItemTags( + category: string, + newItems: string[], + next: string[], +): '' | 'new' | 'next' { + if (newItems.includes(category)) return 'new' + if (next.includes(category)) return 'next' + return '' +} + +// now we need to flatten the data structure +export const sideNavData: NavList = [ + ...createSideNavData(overviewGroup), + ...createSideNavData(categoriesData), +] From 506b61082fcaecc3fc6a4b849f2f9c705e7d1f8e Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 19 Sep 2024 11:36:43 -0500 Subject: [PATCH 2/4] docs: rename categories.json to categories.react.json --- docs/app/components/CategoryList.tsx | 6 +- ...{categories.json => categories.react.json} | 0 docs/app/react/side-nav.json | 241 ------------------ docs/app/react/side-nav.ts | 2 +- 4 files changed, 4 insertions(+), 245 deletions(-) rename docs/app/data/{categories.json => categories.react.json} (100%) delete mode 100644 docs/app/react/side-nav.json diff --git a/docs/app/components/CategoryList.tsx b/docs/app/components/CategoryList.tsx index d595147f..659ccd6f 100644 --- a/docs/app/components/CategoryList.tsx +++ b/docs/app/components/CategoryList.tsx @@ -1,5 +1,5 @@ -import categoryData from '@/app/data/categories.json' -import navData from '@/app/react/side-nav.json' +import categoryData from '@/app/data/categories.react.json' +import { sideNavData } from '@/app/react/side-nav' import { Image as ImageIcon } from '@cerberus-design/icons' import { Show } from '@cerberus-design/react' import { css } from '@cerberus/styled-system/css' @@ -13,7 +13,7 @@ interface CategoryCardProps { } function CategoryCard(props: CategoryCardProps) { - const item = navData.find((navItem) => navItem.label === props.item) + const item = sideNavData.find((navItem) => navItem.label === props.item) return ( Date: Thu, 19 Sep 2024 11:40:23 -0500 Subject: [PATCH 3/4] doc: fine tune avatar live-preview --- docs/app/components/code-builder/builder-snippet.tsx | 2 +- docs/app/react/avatar/components/live-playground.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/app/components/code-builder/builder-snippet.tsx b/docs/app/components/code-builder/builder-snippet.tsx index 2ac69fb7..2ca66a73 100644 --- a/docs/app/components/code-builder/builder-snippet.tsx +++ b/docs/app/components/code-builder/builder-snippet.tsx @@ -46,7 +46,7 @@ export default function BuilderSnippet( if (isFormState(key) || isProgressKey(key)) { return `{${selectedProps[key as keyof typeof selectedProps] || 'false'}}` } - return `"${selectedProps[key as keyof typeof selectedProps] || 'false'}"` + return `"${selectedProps[key as keyof typeof selectedProps] || ''}"` }) }, [props.code, selectedProps]) diff --git a/docs/app/react/avatar/components/live-playground.tsx b/docs/app/react/avatar/components/live-playground.tsx index 08282a2d..a01e8228 100644 --- a/docs/app/react/avatar/components/live-playground.tsx +++ b/docs/app/react/avatar/components/live-playground.tsx @@ -59,7 +59,7 @@ export function AvatarPreview() { return ( @@ -68,7 +68,7 @@ export function AvatarPreview() { return ( ) From 55b08cd8e3f6c4649e7178ddb79475b2ca7d5090 Mon Sep 17 00:00:00 2001 From: "@casey_baggz_omni" Date: Thu, 19 Sep 2024 11:42:46 -0500 Subject: [PATCH 4/4] fix: correct fileStatus gradient usage in recipe --- packages/panda-preset/src/recipes/slots/fileStatus.ts | 10 +++++----- tests/panda-preset/recipes/slots/fileStatus.test.ts | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/panda-preset/src/recipes/slots/fileStatus.ts b/packages/panda-preset/src/recipes/slots/fileStatus.ts index 7e3e68e1..48a39600 100644 --- a/packages/panda-preset/src/recipes/slots/fileStatus.ts +++ b/packages/panda-preset/src/recipes/slots/fileStatus.ts @@ -35,22 +35,22 @@ export const fileStatus: Partial = defineSlotRecipe({ todo: { icon: { ...action, - cerbGradient: 'purple', - color: 'colorPalette.text.inverse', + cerbGradient: 'dark-purple', + color: 'action.text.initial', }, }, processing: { icon: { ...action, - cerbGradient: 'purple', - color: 'colorPalette.text.inverse', + cerbGradient: 'dark-purple', + color: 'action.text.initial', }, }, done: { icon: { ...success, cerbGradient: 'green', - color: 'colorPalette.text.200', + color: 'colorPalette.text.static', }, }, error: { diff --git a/tests/panda-preset/recipes/slots/fileStatus.test.ts b/tests/panda-preset/recipes/slots/fileStatus.test.ts index d2d9db10..d171464c 100644 --- a/tests/panda-preset/recipes/slots/fileStatus.test.ts +++ b/tests/panda-preset/recipes/slots/fileStatus.test.ts @@ -27,22 +27,22 @@ describe('fileStatus recipe', () => { test('should have a todo status variant', () => { expect(fileStatus.variants?.status?.todo?.icon).toMatchObject({ - cerbGradient: 'purple', - color: 'colorPalette.text.inverse', + cerbGradient: 'dark-purple', + color: 'action.text.initial', }) }) test('should have a processing status variant', () => { expect(fileStatus.variants?.status?.processing?.icon).toMatchObject({ - cerbGradient: 'purple', - color: 'colorPalette.text.inverse', + cerbGradient: 'dark-purple', + color: 'action.text.initial', }) }) test('should have a done status variant', () => { expect(fileStatus.variants?.status?.done?.icon).toMatchObject({ cerbGradient: 'green', - color: 'colorPalette.text.200', + color: 'colorPalette.text.static', }) })