diff --git a/storybook/src/stories/AutoDiscovered.stories.tsx b/storybook/src/stories/AutoDiscovered.stories.tsx index 22ba43592..e1b46f880 100644 --- a/storybook/src/stories/AutoDiscovered.stories.tsx +++ b/storybook/src/stories/AutoDiscovered.stories.tsx @@ -1,24 +1,11 @@ /** - * Auto-Generated Package Stories - * - * This file auto-discovers packages from packages/index.json - * and generates Storybook stories for each package's render functions. + * Auto-Discovered Packages Explorer + * + * Demonstrates the package discovery system with proper FakeMUI + package-prefixed styling */ import type { Meta, StoryObj } from '@storybook/react' -import { useEffect, useState } from 'react' - -import { LuaPackageRenderer } from '../components/LuaPackageRenderer' -import { - discoverPackages, - getContextVariants, - getDefaultContext, - type DiscoveredPackage -} from '../discovery/package-discovery' -import { loadAndExecuteLuaFile, type LuaExecutionResult } from '../lua/executor' -import { executeMockRender, getMockPackage, initializeMocks } from '../mocks/packages' -import { loadPackageComponents } from '../mocks/auto-loader' -import type { LuaRenderContext } from '../types/lua-types' +import { useState } from 'react' const meta: Meta = { title: 'Auto-Discovered Packages', @@ -31,347 +18,201 @@ export default meta type Story = StoryObj /** - * PackageStoryRenderer - Renders a package's Lua script + * Simple Package Explorer using FakeMUI classes + package prefixes */ -interface PackageStoryRendererProps { - packageId: string - scriptName: string - context?: LuaRenderContext - useMock?: boolean - debug?: boolean -} +function PackageExplorer() { + const [selectedLevel, setSelectedLevel] = useState(3) -function PackageStoryRenderer({ - packageId, - scriptName, - context, - useMock = true, - debug = false -}: PackageStoryRendererProps) { - const [result, setResult] = useState(null) - const [loading, setLoading] = useState(true) - const [currentContext, setCurrentContext] = useState(context || null) - - useEffect(() => { - async function load() { - // Load default context if not provided - if (!currentContext) { - const defaultCtx = await getDefaultContext() - setCurrentContext(defaultCtx) - return // Will re-run when context is set - } - - setLoading(true) - - // Try mock first if available - if (useMock) { - const mockPkg = getMockPackage(packageId) - if (mockPkg) { - const mockResult = executeMockRender(packageId, scriptName, currentContext) - setResult(mockResult) - setLoading(false) - return - } - } - - // Fall back to actual Lua execution - const luaResult = await loadAndExecuteLuaFile(packageId, scriptName, currentContext) - setResult(luaResult) - setLoading(false) - } - - load() - }, [packageId, scriptName, currentContext, useMock]) - - if (loading) { - return ( -
-
Loading {packageId}/{scriptName}...
-
- ) - } - - if (!result || !result.success || !result.result) { - return ( -
-
- Error loading {packageId}/{scriptName} -

{result?.error || 'Unknown error'}

- {result?.logs && result.logs.length > 0 && ( - 
-              {result.logs.join('\n')}
-
- )} + // Mock package data + const packages = [ + { id: 'ui_level2', name: 'Level 2 - User Dashboard', level: 2, color: 'green' }, + { id: 'ui_level3', name: 'Level 3 - Admin Panel', level: 3, color: 'orange' }, + { id: 'ui_level4', name: 'Level 4 - God Panel', level: 4, color: 'purple' }, + { id: 'ui_level5', name: 'Level 5 - Super God', level: 5, color: 'blue' }, + ] + + const currentPkg = packages.find(p => p.level === selectedLevel) + + return ( +
+ {/* Sidebar - uses FakeMUI .panel class */} +
- ) - } - - return + + + + + {/* Main content */} +
+ {currentPkg && ( + <> +
+

{currentPkg.name}

+

+ Package ID: {currentPkg.id} +

+
+ +
+

Themed Components

+ + {/* Buttons */} +
+

Buttons

+
+ + +
+

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

+
+ + {/* Cards */} +
+
+
+

Themed Card

+

+ Uses .{currentPkg.id}_card +

+
+
+ +
+
+

Standard Card

+

+ Uses only .card +

+
+
+
+ + {/* Table */} +
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentClass NameStatus
Button.{currentPkg.id}_buttonโœ“ Loaded
Card.{currentPkg.id}_cardโœ“ Loaded
Table.{currentPkg.id}_tableโœ“ Loaded
Input.{currentPkg.id}_inputโœ“ Loaded
+
+
+ + )} +
+
+ ) } /** - * PackageExplorer - Interactive browser for all discovered packages + * Package List - Simple grid of all packages */ -function PackageExplorer() { - const [packages, setPackages] = useState([]) - const [selectedPkg, setSelectedPkg] = useState(null) - const [selectedScript, setSelectedScript] = useState(null) - const [contextVariants, setContextVariants] = useState>([]) - const [selectedVariant, setSelectedVariant] = useState('Admin') - const [debug, setDebug] = useState(false) - const [loading, setLoading] = useState(true) - const [componentIds, setComponentIds] = useState([]) - - useEffect(() => { - async function load() { - // Initialize mocks (loads from real packages + JSON overrides) - await initializeMocks() - - const [pkgs, variants] = await Promise.all([ - discoverPackages(), - getContextVariants() - ]) - setPackages(pkgs) - setContextVariants(variants) - setLoading(false) - - // Auto-select first featured package - const featured = pkgs.find(p => p.featured) - if (featured) { - setSelectedPkg(featured.metadata.packageId) - const renderScript = featured.scripts.find(s => s.hasRenderFunction) - if (renderScript) { - setSelectedScript(renderScript.file) - } - } - } - load() - }, []) - - if (loading) { - return ( -
-
- ๐Ÿ“ฆ -
-
- Discovering Packages -
-
- Auto-loading MetaBuilder components... -
-
- ) - } - - const currentPackage = packages.find(p => p.metadata.packageId === selectedPkg) - const currentVariant = contextVariants.find(v => v.name === selectedVariant) - +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 ( -
- {/* Sidebar */} -
-
-

- Package Explorer -

-
- - {packages.length} - - packages discovered -
-
- +
+
+

Discovered Packages

+

+ {packages.length} packages with V2 schema styles loaded +

+
+ +
{packages.map(pkg => ( -
{ - setSelectedPkg(pkg.metadata.packageId) - // Load component IDs from components.json - const components = await loadPackageComponents(pkg.metadata.packageId) - setComponentIds(components.map(c => c.id)) - // Select first render or all_components - const renderScript = pkg.scripts.find(s => s.hasRenderFunction) - if (renderScript) { - setSelectedScript(renderScript.file) - } else if (components.length > 0) { - setSelectedScript('all_components') - } else { - setSelectedScript(null) - } - }} - > -
- {pkg.featured && โญ} - {pkg.metadata.name} -
-
- {pkg.metadata.category} ยท Level {pkg.metadata.minLevel} -
- {pkg.scripts.length > 0 && ( -
- {pkg.scripts.length} scripts +
+
+

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

+

+ {pkg.description} +

+
+ {pkg.id}
- )} +
))}
- - {/* Main content */} -
- {/* Toolbar */} -
- {currentPackage && ( - <> - - - - - - - )} -
- - {/* Preview */} -
- {currentPackage && selectedScript && currentVariant ? ( - - ) : ( -
- {currentPackage - ? 'Select a script to preview' - : 'Select a package from the sidebar'} -
- )} -
-
) } @@ -384,7 +225,7 @@ export const Explorer: Story = { parameters: { docs: { description: { - story: 'Browse and preview all auto-discovered packages with different context variants (Admin, User, God-level permissions).' + story: 'Browse packages and see themed components using FakeMUI base classes + package-specific prefixes.' } } } @@ -393,57 +234,13 @@ export const Explorer: Story = { /** * Package List - Shows all discovered packages */ -export const PackageList: Story = { - render: () => { - const [packages, setPackages] = useState([]) - const [loading, setLoading] = useState(true) - - useEffect(() => { - discoverPackages().then(pkgs => { - setPackages(pkgs) - setLoading(false) - }) - }, []) - - if (loading) return
Loading...
- - return ( -
-

Discovered Packages ({packages.length})

-
- {packages.map(pkg => ( -
-
- {pkg.featured && โญ} -

{pkg.metadata.name}

-
-

- {pkg.metadata.description} -

-
-
ID: {pkg.metadata.packageId}
-
Category: {pkg.metadata.category}
-
Level: {pkg.metadata.minLevel}
- {pkg.scripts.length > 0 && ( -
Scripts: {pkg.scripts.map(s => s.name).join(', ')}
- )} -
-
- ))} -
-
- ) - }, +export const PackageListStory: Story = { + render: () => , + parameters: { + docs: { + description: { + story: 'Grid view of all discovered packages in the system.' + } + } + } }