From 136e27d5cbe710d259a203f7a4216ba6f13e81b2 Mon Sep 17 00:00:00 2001
From: Richard Ward <JohnDoe6345789@gmail.com>
Date: Wed, 31 Dec 2025 01:51:44 +0000
Subject: [PATCH] code: tsx,storybook,stories (1 files)

---
 storybook/src/stories/LuaPackages.stories.tsx | 155 +++---------------
 1 file changed, 21 insertions(+), 134 deletions(-)

diff --git a/storybook/src/stories/LuaPackages.stories.tsx b/storybook/src/stories/LuaPackages.stories.tsx
index 3d59ba378..80bbc7c64 100644
--- a/storybook/src/stories/LuaPackages.stories.tsx
+++ b/storybook/src/stories/LuaPackages.stories.tsx
@@ -1,146 +1,33 @@
+/**
+ * Lua Packages
+ *
+ * Demonstrates Lua UI packages loaded from the main frontend
+ */
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Import Lua loader from main frontend
 import { loadLuaUIPackage } from '../../../frontends/nextjs/src/lib/lua/ui/load-lua-ui-package'
 
-/**
- * The LuaPackageRenderer renders Lua UI component trees to React.
- * 
- * In production, the component trees are generated by executing Lua scripts via fengari.
- * In Storybook, we use mock data that mirrors the Lua output structure.
- */
-const meta: Meta<typeof LuaPackageRenderer> = {
-  title: 'Lua Packages/Renderer',
-  component: LuaPackageRenderer,
+const meta: Meta = {
+  title: 'Lua Packages',
   parameters: {
-    layout: 'fullscreen',
+    layout: 'padded',
   },
-  tags: ['autodocs'],
 }
 
 export default meta
-type Story = StoryObj<typeof LuaPackageRenderer>
+type Story = StoryObj
 
-// Helper to create stories from mock renders
-function createPackageStory(
-  packageId: string, 
-  renderName: string, 
-  contextOverrides?: Partial<LuaRenderContext>
-): Story {
-  const context = createDefaultContext(contextOverrides)
-  const result = executeMockRender(packageId, renderName, context)
-  
-  if (!result.success || !result.result) {
-    return {
-      render: () => (
-        <div style={{ padding: '2rem', color: 'red' }}>
-          Error: {result.error || 'No result'}
-        </div>
-      ),
-    }
-  }
-  
-  return {
-    args: {
-      component: result.result,
-      debug: false,
-    },
-  }
-}
-
-/**
- * Dashboard stats card from packages/dashboard
- */
-export const DashboardStatsCard: Story = createPackageStory('dashboard', 'stats.card')
-
-/**
- * Dashboard stats grid showing multiple stat cards
- */
-export const DashboardStatsGrid: Story = createPackageStory('dashboard', 'stats.grid')
-
-/**
- * Dashboard standard layout with header
- */
-export const DashboardLayout: Story = createPackageStory('dashboard', 'layout.standard', {
-  user: { username: 'john_doe', level: 4 },
-})
-
-/**
- * Level 4 admin panel main layout
- */
-export const Level4AdminPanel: Story = createPackageStory('ui_level4', 'layout.render', {
-  user: { username: 'admin', level: 4 },
-  nerdMode: false,
-})
-
-/**
- * Level 4 admin panel in "nerd mode"
- */
-export const Level4AdminPanelNerdMode: Story = createPackageStory('ui_level4', 'layout.render', {
-  user: { username: 'admin', level: 4 },
-  nerdMode: true,
-})
-
-/**
- * Level 4 schemas tab content
- */
-export const Level4Schemas: Story = createPackageStory('ui_level4', 'schemas.render')
-
-/**
- * Level 4 workflows tab content
- */
-export const Level4Workflows: Story = createPackageStory('ui_level4', 'workflows.render')
-
-/**
- * User manager table view
- */
-export const UserManagerTable: Story = createPackageStory('user_manager', 'render_users')
-
-/**
- * Debug mode shows component boundaries
- */
-export const DebugMode: Story = {
-  ...createPackageStory('dashboard', 'stats.grid'),
-  args: {
-    ...createPackageStory('dashboard', 'stats.grid').args,
-    debug: true,
-  },
-}
-
-/**
- * List of all registered mock packages
- */
-export const PackageList: Story = {
-  render: () => {
-    const packages = listMockPackages()
-    return (
-      <div style={{ padding: '2rem' }}>
-        <h2 style={{ marginBottom: '1rem' }}>Registered Mock Packages</h2>
-        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
-          {packages.map(pkg => (
-            <div 
-              key={pkg.metadata.packageId}
-              style={{ 
-                padding: '1rem', 
-                border: '1px solid #e5e7eb', 
-                borderRadius: '8px',
-                background: '#fff',
-              }}
-            >
-              <h3 style={{ margin: '0 0 0.5rem' }}>{pkg.metadata.name}</h3>
-              <p style={{ margin: '0 0 0.5rem', color: '#6b7280', fontSize: '0.875rem' }}>
-                {pkg.metadata.description}
-              </p>
-              <div style={{ fontSize: '0.75rem', color: '#9ca3af' }}>
-                <div>ID: {pkg.metadata.packageId}</div>
-                <div>Category: {pkg.metadata.category}</div>
-                <div>Min Level: {pkg.metadata.minLevel}</div>
-                <div>Renders: {Object.keys(pkg.renders).join(', ')}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  },
+/**
+ * Simple demo showing the Lua loader is accessible
+ */
+export const LoaderDemo: Story = {
+  render: () => (
+    <div className="card">
+      <h3>Lua Package Loader</h3>
+      <p>The loadLuaUIPackage function is imported from the main frontend.</p>
+      <code>loadLuaUIPackage: {typeof loadLuaUIPackage}</code>
+    </div>
+  ),
 }