From f22beffd053b82c95ee0fe25512a56da440eab06 Mon Sep 17 00:00:00 2001 From: Richard Ward Date: Wed, 31 Dec 2025 01:49:21 +0000 Subject: [PATCH] code: tsx,storybook,stories (1 files) --- .../src/stories/AutoDiscovered.stories.tsx | 292 ++++++------------ 1 file changed, 94 insertions(+), 198 deletions(-) diff --git a/storybook/src/stories/AutoDiscovered.stories.tsx b/storybook/src/stories/AutoDiscovered.stories.tsx index 610b7a182..b369a6c2d 100644 --- a/storybook/src/stories/AutoDiscovered.stories.tsx +++ b/storybook/src/stories/AutoDiscovered.stories.tsx @@ -1,221 +1,117 @@ /** - * Auto-Discovered Packages Explorer + * Auto-Discovered Packages * - * Demonstrates the package discovery system with proper FakeMUI + package-prefixed styling + * Demonstrates package-prefixed styling from V2 schemas */ import type { Meta, StoryObj } from '@storybook/react' -import { useState } from 'react' + +interface ButtonProps { + packageId: string + label: string +} + +interface CardProps { + packageId: string + title: string + content: string +} + +interface TableProps { + packageId: string +} const meta: Meta = { title: 'Auto-Discovered Packages', parameters: { - layout: 'fullscreen', + layout: 'centered', }, } export default meta -type Story = StoryObj /** - * Simple Package Explorer using FakeMUI classes + package prefixes + * Button - Package-themed buttons */ -function PackageExplorer() { - const [selectedPkg, setSelectedPkg] = useState('ui_level3') +export const Button: StoryObj = { + args: { + packageId: 'ui_level3', + label: 'Button', + }, + argTypes: { + packageId: { + control: 'select', + options: ['shared', 'ui_home', 'ui_header', 'ui_footer', 'ui_level2', 'ui_level3', 'ui_level4', 'ui_level5', 'ui_level6', 'admin_panel', 'code_editor', 'css_designer'], + }, + label: { control: 'text' }, + }, + render: ({ packageId, label }) => ( + + ), +} - // All discovered packages - const packages = [ - { id: 'shared', name: 'Shared', description: 'Base design system tokens', themed: false }, - { id: 'ui_home', name: 'UI Home', description: 'Landing page components', themed: false }, - { id: 'ui_header', name: 'UI Header', description: 'Navigation header', themed: false }, - { id: 'ui_footer', name: 'UI Footer', description: 'Site footer', themed: false }, - { id: 'ui_level2', name: 'Level 2', description: 'User dashboard theme', themed: true }, - { id: 'ui_level3', name: 'Level 3', description: 'Admin panel theme', themed: true }, - { id: 'ui_level4', name: 'Level 4', description: 'God-tier builder theme', themed: true }, - { id: 'ui_level5', name: 'Level 5', description: 'Super god theme', themed: true }, - { id: 'ui_level6', name: 'Level 6', description: 'Supergod theme', themed: true }, - { id: 'admin_panel', name: 'Admin Panel', description: 'Admin components', themed: true }, - { id: 'code_editor', name: 'Code Editor', description: 'Code editing components', themed: false }, - { id: 'css_designer', name: 'CSS Designer', description: 'Visual CSS designer', themed: false }, - ] - - const currentPkg = packages.find(p => p.id === selectedPkg) - - return ( -
- - -
- {currentPkg && ( - <> -
-

{currentPkg.name}

-

Package ID: {currentPkg.id}

-
- -
-

Themed Components

- -
-

Buttons

-
- - -
-

- The left button uses .{currentPkg.id}_button which adds theme styling on top of FakeMUI .button -

-
- -
-
-
-

Themed Card

-

Uses .{currentPkg.id}_card

-
-
- -
-
-

Standard Card

-

Uses only .card

-
-
-
- -
-

Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComponentClass NameStatus
Button.{currentPkg.id}_button✓ Loaded
Card.{currentPkg.id}_card✓ Loaded
Table.{currentPkg.id}_table✓ Loaded
Input.{currentPkg.id}_input✓ Loaded
-
-
- - )} -
+/** + * Card - Package-themed cards + */ +export const Card: Story = { + args: { + packageId: 'ui_level3', + title: 'Card Title', + content: 'Card content goes here', + }, + argTypes: { + packageId: { + control: 'select', + options: ['shared', 'ui_home', 'ui_header', 'ui_footer', 'ui_level2', 'ui_level3', 'ui_level4', 'ui_level5', 'ui_level6', 'admin_panel', 'code_editor', 'css_designer'], + }, + title: { control: 'text' }, + content: { control: 'text' }, + }, + render: ({ packageId, title, content }) => ( +
+

{title}

+

{content}

- ) + ), } /** - * Package List - Simple grid of all packages + * Table - Package-themed tables */ -function PackageList() { - const packages = [ - { id: 'shared', name: 'Shared', description: 'Base design system tokens' }, - { id: 'ui_home', name: 'UI Home', description: 'Landing page components' }, - { id: 'ui_header', name: 'UI Header', description: 'Navigation header' }, - { id: 'ui_footer', name: 'UI Footer', description: 'Site footer' }, - { id: 'ui_level2', name: 'Level 2', description: 'User dashboard theme' }, - { id: 'ui_level3', name: 'Level 3', description: 'Admin panel theme' }, - { id: 'ui_level4', name: 'Level 4', description: 'God-tier builder theme' }, - { id: 'ui_level5', name: 'Level 5', description: 'Super god theme' }, - { id: 'ui_level6', name: 'Level 6', description: 'Supergod theme' }, - { id: 'admin_panel', name: 'Admin Panel', description: 'Admin components' }, - { id: 'code_editor', name: 'Code Editor', description: 'Code editing components' }, - { id: 'css_designer', name: 'CSS Designer', description: 'Visual CSS designer' }, - ] - - return ( -
-
-

Discovered Packages

-

{packages.length} packages with V2 schema styles loaded

-
- -
- {packages.map(pkg => ( -
-
-

- {pkg.name} - {(pkg.id.includes('level') || pkg.id === 'admin_panel') && ( - Themed - )} -

-

{pkg.description}

-
{pkg.id}
-
-
- ))} -
-
- ) -} - -/** - * Interactive Package Explorer - */ -export const Explorer: Story = { - render: () => , - parameters: { - docs: { - description: { - story: 'Browse packages and see themed components using FakeMUI base classes + package-specific prefixes.' - } - } - } -} - -/** - * Package List - Shows all discovered packages - */ -export const PackageListStory: Story = { - render: () => , - parameters: { - docs: { - description: { - story: 'Grid view of all discovered packages in the system.' - } - } - } +export const Table: Story = { + args: { + packageId: 'ui_level3', + }, + argTypes: { + packageId: { + control: 'select', + options: ['shared', 'ui_home', 'ui_header', 'ui_footer', 'ui_level2', 'ui_level3', 'ui_level4', 'ui_level5', 'ui_level6', 'admin_panel', 'code_editor', 'css_designer'], + }, + }, + render: ({ packageId }) => ( + + + + + + + + + + + + + + + + + + + + + +
ComponentClass
Button.{packageId}_button
Card.{packageId}_card
Table.{packageId}_table
+ ), }