diff --git a/.changeset/swingset-sidebar-organization.md b/.changeset/swingset-sidebar-organization.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/swingset-sidebar-organization.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/swingset/CLAUDE.md b/packages/swingset/CLAUDE.md index ddd0765758f..32550e15031 100644 --- a/packages/swingset/CLAUDE.md +++ b/packages/swingset/CLAUDE.md @@ -55,17 +55,18 @@ Pick the archetype below by the component's **layer** (its `meta.group`), then f ### Layers -`meta.group` places an entry in one of these layers. Sidebar order follows the `registry` array; group order follows first appearance there. Use these exact group strings: +`meta.group` places an entry in one of these layers. Sidebar order follows the `registry` array; group order follows first appearance there. Within a group, an optional `meta.navigation.category` sub-groups entries under a small collapsible subheading (e.g. `User Profile` splits into `Panels` and `Sections`), collapsed by default unless it contains the active page; category order also follows first appearance in the registry, and uncategorized entries render with no subheading (list them before the categorized ones). Use these exact group strings: | Group | What lives here | Archetype | | ------------ | -------------------------------------------------------------- | --------- | -| `User` | Composed flow UI (e.g. `UserButton`) | C | +| `User Button` | Composed flow UI (e.g. `UserButton`) | C | +| `User Profile` | Composed flow UI (e.g. `UserProfileProfilePanel`) | C | | `Components` | Styled Mosaic components — simple, with a flat variant surface (`Button`, `Input`), or compound (`Card`, `Field`, `Menu`, `Popover`) | A | | `Primitives` | Headless `@clerk/headless` primitives (`Accordion`) | B | | `Styles` | Atomic styles that ship as StyleX atoms, not components (`Scroll Area`) | B (adapted) | | `Hooks` | Headless hooks (`useDataTable`) | B (adapted) | -`User` → `Components` → `Primitives` runs high-level-composition → low-level-primitive. Composed layers are documented as compositions of lower layers (archetype C); leaf layers (Components, Primitives) get full prop/knob docs (archetypes A and B). +`User Button` / `User Profile` → `Components` → `Primitives` runs high-level-composition → low-level-primitive. Composed layers are documented as compositions of lower layers (archetype C); leaf layers (Components, Primitives) get full prop/knob docs (archetypes A and B). `Styles` and `Hooks` are the non-component layers: there is no element to knob, so they follow archetype B's shape (Example → Usage → Parts → Styling) with `Props` replaced by whatever the export @@ -239,7 +240,7 @@ The story is `meta` (no `styles`) plus a single `Default` export that renders th **Document the default value for every prop in a dedicated Default column.** Every props table — auto and hand-written — has a **Default** column; the `Type` stays a plain union/enum and the default is named in its own column (the convention every component-doc site and TypeDoc's `@default` tag follow), never inlined into the type. The auto `` renders `Prop | Type | Default | Value` and fills Default from `meta.styles._defaultVariants` (the **Value** column is the live knob seeded with that default); hand-written tables render `Prop | Type | Default | Description` and fill it by hand. Name the default member (`'base'`, `'multiple'`, `'bottom-start'`); use `—` when there is no default (a controlled-only or required prop) and append `(required)` for required props; when the default is behavioral rather than a literal, state it in words (`inherits Root`, `falls back to value`). -### Archetype C — composed layer (`User`) +### Archetype C — composed layer (`User Button`, `User Profile`) These compose lower layers, so the docs lead with the composition rather than knobs. Required MDX: diff --git a/packages/swingset/src/components/Composition.tsx b/packages/swingset/src/components/Composition.tsx index 60ee46ad440..27dc0fd44bb 100644 --- a/packages/swingset/src/components/Composition.tsx +++ b/packages/swingset/src/components/Composition.tsx @@ -7,13 +7,13 @@ export interface CompositionPiece { name: string; /** Route to the piece's page in swingset (e.g. `/components/button`). */ href: string; - /** Which Mosaic layer the piece lives in (e.g. `User`, `Components`, `Primitives`). */ + /** Which Mosaic layer the piece lives in (e.g. `User Button`, `Components`, `Primitives`). */ layer: string; } // Mosaic layers, high → low. Drives the order the composition groups render in. // Matches the sidebar group names. -const LAYER_ORDER = ['User', 'Components', 'Styles', 'Primitives']; +const LAYER_ORDER = ['User Button', 'User Profile', 'Components', 'Styles', 'Primitives']; function layerRank(layer: string): number { const i = LAYER_ORDER.indexOf(layer); diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx index 56efb348dce..3a52fbae376 100644 --- a/packages/swingset/src/components/DocsViewer.tsx +++ b/packages/swingset/src/components/DocsViewer.tsx @@ -10,25 +10,27 @@ import { ViewSource } from './ViewSource'; // MDX docs keyed by `group` slug → `component` slug. Group-aware so identically-named // entries (the headless `Dialog` primitive vs. the styled `Dialog` component) stay distinct. const docModules: Record> = { - user: { - 'user-page': dynamic(() => import('../stories/user-page.mdx')), - 'user-profile-api-keys-panel': dynamic(() => import('../stories/user-profile-api-keys-panel.mdx')), + 'user-button': { 'user-button': dynamic(() => import('../stories/user-button.mdx')), + }, + 'user-profile': { + 'user-page': dynamic(() => import('../stories/user-page.mdx')), 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')), 'user-profile-security-panel': dynamic(() => import('../stories/user-profile-security-panel.mdx')), 'user-profile-billing-panel': dynamic(() => import('../stories/user-profile-billing-panel.mdx')), + 'user-profile-api-keys-panel': dynamic(() => import('../stories/user-profile-api-keys-panel.mdx')), 'user-profile-account-section': dynamic(() => import('../stories/user-profile-account-section.mdx')), 'user-profile-password-section': dynamic(() => import('../stories/user-profile-password-section.mdx')), 'user-profile-passkeys-section': dynamic(() => import('../stories/user-profile-passkeys-section.mdx')), 'user-profile-mfa-section': dynamic(() => import('../stories/user-profile-mfa-section.mdx')), 'user-profile-active-devices-section': dynamic(() => import('../stories/user-profile-active-devices-section.mdx')), - 'user-profile-billing-history-section': dynamic( - () => import('../stories/user-profile-billing-history-section.mdx'), - ), 'user-profile-subscription-section': dynamic(() => import('../stories/user-profile-subscription-section.mdx')), 'user-profile-payment-methods-section': dynamic( () => import('../stories/user-profile-payment-methods-section.mdx'), ), + 'user-profile-billing-history-section': dynamic( + () => import('../stories/user-profile-billing-history-section.mdx'), + ), 'user-profile-connected-accounts-section': dynamic( () => import('../stories/user-profile-connected-accounts-section.mdx'), ), diff --git a/packages/swingset/src/components/app-sidebar.tsx b/packages/swingset/src/components/app-sidebar.tsx index 4a68f409fec..00cc791f6c2 100644 --- a/packages/swingset/src/components/app-sidebar.tsx +++ b/packages/swingset/src/components/app-sidebar.tsx @@ -1,9 +1,11 @@ 'use client'; +import { ChevronRightIcon } from 'lucide-react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import * as React from 'react'; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { Sidebar, SidebarContent, @@ -15,78 +17,113 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarRail, + SidebarSeparator, } from '@/components/ui/sidebar'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { getSidebarGroups } from '@/lib/registry'; -import type { StoryModule } from '@/lib/types'; const groups = getSidebarGroups(); -type SidebarEntry = { mod: StoryModule; componentSlug: string }; +const COLLAPSED_BY_DEFAULT = new Set(['Primitives', 'Components', 'Styles', 'Hooks']); -function getNavigationFamilies(components: SidebarEntry[]) { - const families = new Map>(); +type SidebarEntry = ReturnType[number]['components'][number]; +// Partitions a group's entries by `meta.navigation.category` into subheaded runs. Category and +// entry order both follow first appearance in the registry; uncategorized entries get no subheading. +function byCategory(components: SidebarEntry[]) { + const categories: { category: string; components: SidebarEntry[] }[] = []; for (const component of components) { - const family = component.mod.meta.navigation?.family ?? ''; const category = component.mod.meta.navigation?.category ?? ''; - const categories = families.get(family) ?? new Map(); - const entries = categories.get(category) ?? []; - - entries.push(component); - categories.set(category, entries); - families.set(family, categories); + const bucket = categories.find(c => c.category === category); + if (bucket) { + bucket.components.push(component); + } else { + categories.push({ category, components: [component] }); + } } + return categories; +} + +function SidebarUsageItem({ usage, href, isActive }: { usage: string; href: string; isActive: boolean }) { + const labelRef = React.useRef(null); + const [isTruncated, setIsTruncated] = React.useState(false); - return Array.from(families, ([family, categories]) => ({ - family, - categories: Array.from(categories, ([category, components]) => ({ - category, - components: components.sort( - (a, b) => - (a.mod.meta.navigation?.order ?? Number.MAX_SAFE_INTEGER) - - (b.mod.meta.navigation?.order ?? Number.MAX_SAFE_INTEGER), - ), - })), - })); + React.useEffect(() => { + const label = labelRef.current; + if (!label) { + return; + } + const check = () => setIsTruncated(label.scrollWidth > label.clientWidth); + check(); + const observer = new ResizeObserver(check); + observer.observe(label); + return () => observer.disconnect(); + }, []); + + return ( + + + } + > + + {usage} + + + } + /> + + {usage} + + + + ); } -function SidebarEntryLink({ - entry, +function SidebarEntryMenu({ + components, groupSlug, pathname, }: { - entry: SidebarEntry; + components: SidebarEntry[]; groupSlug: string; pathname: string; }) { - const { mod, componentSlug } = entry; - const href = `/${groupSlug}/${componentSlug}`; - const usage = mod.meta.label - ? mod.meta.label - : mod.meta.group === 'Hooks' - ? `${mod.meta.title}()` - : mod.meta.group === 'Styles' - ? mod.meta.title - : `<${mod.meta.title} />`; - return ( - - } - > - - {usage} - - - + + {components.map(({ mod, componentSlug }) => { + const href = `/${groupSlug}/${componentSlug}`; + // How an entry is USED differs by layer, so the label follows the layer rather + // than a guess at the title: hooks are called, atomic styles are a set of + // exports with no single call form worth privileging, and everything else is a + // component rendered as JSX. + const usage = + mod.meta.group === 'Hooks' + ? `${mod.meta.title}()` + : mod.meta.group === 'Styles' + ? mod.meta.title + : `<${mod.meta.title} />`; + return ( + + ); + })} + ); } @@ -129,43 +166,69 @@ export function AppSidebar({ ...props }: React.ComponentProps) { {groups.map(({ group, groupSlug, components }) => ( - - - {group} - - - {getNavigationFamilies(components).map(({ family, categories }) => ( -
- {family ? ( -
{family}
- ) : null} - {categories.map(({ category, components }) => ( -
- {category ? ( -
- {category} -
- ) : null} - - {components.map(entry => ( - - ))} - -
- ))} -
- ))} - - + + {group === 'Components' && } + + + } + > + {group} + + + + + {byCategory(components).map(({ category, components }) => + category ? ( + pathname === `/${groupSlug}/${componentSlug}`, + )} + className='group/category' + > + + + {category} + + + +
+ +
+ + + ) : ( + + ), + )} + + + + + ))} diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts index 9bb529c1a36..05d34dccb2d 100644 --- a/packages/swingset/src/lib/registry.ts +++ b/packages/swingset/src/lib/registry.ts @@ -353,13 +353,16 @@ const userProfileDeleteSectionModule: StoryModule = { }; export const registry: StoryModule[] = [ - // User + // User Button userButtonModule, + // User Profile userPageModule, + // User Profile · Panels userProfileProfilePanelModule, userProfileSecurityPanelModule, userProfileBillingPanelModule, userProfileApiKeysPanelModule, + // User Profile · Sections userProfileAccountSectionModule, userProfilePasswordSectionModule, userProfilePasskeysSectionModule, diff --git a/packages/swingset/src/stories/user-button.stories.tsx b/packages/swingset/src/stories/user-button.stories.tsx index 784be217083..60f6fb2f9ed 100644 --- a/packages/swingset/src/stories/user-button.stories.tsx +++ b/packages/swingset/src/stories/user-button.stories.tsx @@ -17,10 +17,9 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-button.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Button', title: 'UserButton', label: 'User button', - navigation: { family: 'User button', category: 'Compositions', order: 10 }, source: 'packages/ui/src/mosaic/user-button/user-button.view.tsx', }; diff --git a/packages/swingset/src/stories/user-page.mdx b/packages/swingset/src/stories/user-page.mdx index 703e198507a..8592ea9f463 100644 --- a/packages/swingset/src/stories/user-page.mdx +++ b/packages/swingset/src/stories/user-page.mdx @@ -9,9 +9,9 @@ and API Keys panels without imposing a modal height or scroll container. name='Default' storyModule={Stories} composition={[ - { name: 'Profile panel', href: '/user/user-profile-profile-panel', layer: 'Compositions' }, - { name: 'Security panel', href: '/user/user-profile-security-panel', layer: 'Compositions' }, - { name: 'Billing panel', href: '/user/user-profile-billing-panel', layer: 'Compositions' }, - { name: 'API keys panel', href: '/user/user-profile-api-keys-panel', layer: 'Compositions' }, + { name: 'Profile panel', href: '/user-profile/user-profile-profile-panel', layer: 'User Profile' }, + { name: 'Security panel', href: '/user-profile/user-profile-security-panel', layer: 'User Profile' }, + { name: 'Billing panel', href: '/user-profile/user-profile-billing-panel', layer: 'User Profile' }, + { name: 'API keys panel', href: '/user-profile/user-profile-api-keys-panel', layer: 'User Profile' }, ]} /> diff --git a/packages/swingset/src/stories/user-page.stories.tsx b/packages/swingset/src/stories/user-page.stories.tsx index 73601476229..d07565d467a 100644 --- a/packages/swingset/src/stories/user-page.stories.tsx +++ b/packages/swingset/src/stories/user-page.stories.tsx @@ -19,11 +19,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-page.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserPage', label: 'User page', layout: 'wide', - navigation: { family: 'User profile', category: 'Compositions', order: 0 }, source: 'packages/ui/src/mosaic/user-profile/user-page.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-account-section.stories.tsx b/packages/swingset/src/stories/user-profile-account-section.stories.tsx index 653eb5b9ab4..bba49d88af4 100644 --- a/packages/swingset/src/stories/user-profile-account-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-account-section.stories.tsx @@ -10,10 +10,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-account-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileAccountSection', label: 'Account', - navigation: { family: 'User profile', category: 'Sections', order: 10 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx b/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx index c39c3ef0f8d..1c231a6e034 100644 --- a/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx @@ -7,10 +7,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-active-devices-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileActiveDevicesSection', label: 'Active devices', - navigation: { family: 'User profile', category: 'Sections', order: 50 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-active-devices-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx b/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx index 2a3eebba9a3..b8421bbe5fd 100644 --- a/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx @@ -7,10 +7,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-api-keys-panel.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileApiKeysPanel', label: 'API keys panel', - navigation: { family: 'User profile', category: 'Compositions', order: 40 }, + navigation: { category: 'Panels' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-api-keys-panel.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx b/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx index af3cc9c4a75..aabb3f04b83 100644 --- a/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx @@ -7,10 +7,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-billing-history-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileBillingHistorySection', label: 'Billing history', - navigation: { family: 'User profile', category: 'Billing sections', order: 30 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-billing-history-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx b/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx index 2f645f5dea8..b048aa576f6 100644 --- a/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx @@ -11,10 +11,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-billing-panel.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileBillingPanel', label: 'Billing panel', - navigation: { family: 'User profile', category: 'Compositions', order: 30 }, + navigation: { category: 'Panels' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-billing-panel.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx index 12dbba0267d..61a8f4d63af 100644 --- a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx @@ -5,10 +5,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-connected-accounts-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileConnectedAccountsSection', label: 'Connected accounts', - navigation: { family: 'User profile', category: 'Sections', order: 60 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-connected-accounts-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-delete-section.stories.tsx b/packages/swingset/src/stories/user-profile-delete-section.stories.tsx index e9f3f65d4b9..cc18ac403eb 100644 --- a/packages/swingset/src/stories/user-profile-delete-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-delete-section.stories.tsx @@ -5,10 +5,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-delete-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileDeleteSection', label: 'Danger zone', - navigation: { family: 'User profile', category: 'Sections', order: 80 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx b/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx index 088aafcb23c..0fd8382332d 100644 --- a/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx @@ -7,10 +7,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-mfa-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileMfaSection', label: '2-step verification', - navigation: { family: 'User profile', category: 'Sections', order: 40 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-mfa-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx index 36b8db7ea07..fe476e55d54 100644 --- a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx @@ -7,10 +7,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-passkeys-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfilePasskeysSection', label: 'Passkeys', - navigation: { family: 'User profile', category: 'Sections', order: 30 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-passkeys-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-password-section.stories.tsx b/packages/swingset/src/stories/user-profile-password-section.stories.tsx index ea87582a5ac..462112b0db4 100644 --- a/packages/swingset/src/stories/user-profile-password-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-password-section.stories.tsx @@ -5,10 +5,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-password-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfilePasswordSection', label: 'Password', - navigation: { family: 'User profile', category: 'Sections', order: 20 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-password-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx b/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx index bd5fa8581e3..4a4148f1ac3 100644 --- a/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx @@ -7,10 +7,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-payment-methods-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfilePaymentMethodsSection', label: 'Payment methods', - navigation: { family: 'User profile', category: 'Billing sections', order: 20 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-payment-methods-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx b/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx index 0cf5d47d924..7662754284e 100644 --- a/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx @@ -10,10 +10,10 @@ const profileImageUrl = 'https://avatars.githubusercontent.com/u/51144033?v=4'; export { default as __source } from './user-profile-profile-panel.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileProfilePanel', label: 'Profile panel', - navigation: { family: 'User profile', category: 'Compositions', order: 10 }, + navigation: { category: 'Panels' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx index 10ed084ee17..e02a43d8489 100644 --- a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx @@ -11,10 +11,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-security-panel.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileSecurityPanel', label: 'Security panel', - navigation: { family: 'User profile', category: 'Compositions', order: 20 }, + navigation: { category: 'Panels' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-security-panel.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx b/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx index b865ff7b82f..5ef950b817e 100644 --- a/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx @@ -6,10 +6,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-subscription-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileSubscriptionSection', label: 'Subscription', - navigation: { family: 'User profile', category: 'Billing sections', order: 10 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-subscription-section.view.tsx', }; diff --git a/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx b/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx index ba03cc6280c..9b0bec9b6ab 100644 --- a/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx @@ -5,10 +5,10 @@ import type { StoryMeta } from '@/lib/types'; export { default as __source } from './user-profile-web3-wallets-section.stories?raw'; export const meta: StoryMeta = { - group: 'User', + group: 'User Profile', title: 'UserProfileWeb3WalletsSection', label: 'Web3 wallets', - navigation: { family: 'User profile', category: 'Sections', order: 70 }, + navigation: { category: 'Sections' }, source: 'packages/ui/src/mosaic/user-profile/user-profile-web3-wallets-section.view.tsx', };