-

demo/src/App.tsx

@@ -22,11 +22,25 @@ import {
   IconRefresh,
   IconCheck,
   IconInfoCircle,
+  IconPlus,
 } from '@tabler/icons-react';
+import { 
+  DataTable, 
+  TableColumn,
+  FormSidebar, 
+  FormField 
+} from '@skybridge/web-components';
 
 const DemoApp: React.FC = () => {
   const [progress, setProgress] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
+  const [showTable, setShowTable] = useState(false);
+  const [sidebarOpened, setSidebarOpened] = useState(false);
+  const [demoData, setDemoData] = useState([
+    { id: '1', name: 'John Doe', email: 'john@example.com', status: 'active', role: 'admin', created_at: '2024-01-15' },
+    { id: '2', name: 'Jane Smith', email: 'jane@example.com', status: 'active', role: 'user', created_at: '2024-02-20' },
+    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', status: 'inactive', role: 'viewer', created_at: '2024-03-10' },
+  ]);
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -53,6 +67,63 @@ const DemoApp: React.FC = () => {
     { title: 'Custom Reports', description: 'Generate detailed reports' },
   ];
 
+  const tableColumns: TableColumn[] = [
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'email', label: 'Email', sortable: true },
+    { key: 'role', label: 'Role', render: (value) => <Badge variant="light" size="sm">{value}</Badge> },
+    { key: 'status', label: 'Status' }, // Uses default status rendering
+    { key: 'created_at', label: 'Created', render: (value) => new Date(value).toLocaleDateString() },
+  ];
+
+  const formFields: FormField[] = [
+    { name: 'name', label: 'Full Name', type: 'text', required: true, placeholder: 'Enter full name' },
+    { name: 'email', label: 'Email', type: 'email', required: true, placeholder: 'Enter email address', validation: { email: true } },
+    { 
+      name: 'role', 
+      label: 'Role', 
+      type: 'select', 
+      required: true,
+      options: [
+        { value: 'admin', label: 'Admin' },
+        { value: 'user', label: 'User' },
+        { value: 'viewer', label: 'Viewer' },
+      ],
+      defaultValue: 'user'
+    },
+    { 
+      name: 'status', 
+      label: 'Status', 
+      type: 'select', 
+      required: true,
+      options: [
+        { value: 'active', label: 'Active' },
+        { value: 'inactive', label: 'Inactive' },
+      ],
+      defaultValue: 'active'
+    },
+  ];
+
+  const handleFormSubmit = async (values: any) => {
+    // Simulate API call
+    console.log('Form submitted:', values);
+    const newItem = {
+      id: Date.now().toString(),
+      ...values,
+      created_at: new Date().toISOString().split('T')[0]
+    };
+    setDemoData([...demoData, newItem]);
+  };
+
+  const handleEdit = (item: any) => {
+    console.log('Edit item:', item);
+    // Would normally open form with item data
+    setSidebarOpened(true);
+  };
+
+  const handleDelete = async (item: any) => {
+    setDemoData(demoData.filter(d => d.id !== item.id));
+  };
+
   return (
     <Container size="xl" py="xl">
       <Stack gap="xl">
@@ -135,6 +206,43 @@ const DemoApp: React.FC = () => {
 
         <Divider />
 
+        <div>
+          <Title order={2} mb="md">Shared Components Demo</Title>
+          <Text c="dimmed" mb="lg">
+            Demonstration of shared components from @skybridge/web-components
+          </Text>
+          
+          <Group mb="md">
+            <Button 
+              leftSection={<IconPlus size={16} />} 
+              onClick={() => setShowTable(!showTable)}
+            >
+              {showTable ? 'Hide' : 'Show'} DataTable Demo
+            </Button>
+            <Button 
+              variant="outline" 
+              onClick={() => setSidebarOpened(true)}
+            >
+              Show FormSidebar Demo
+            </Button>
+          </Group>
+
+          {showTable && (
+            <DataTable
+              data={demoData}
+              columns={tableColumns}
+              title="Demo User Management"
+              searchable
+              onAdd={() => setSidebarOpened(true)}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              emptyMessage="No demo data available"
+            />
+          )}
+        </div>
+
+        <Divider />
+
         <Group justify="center">
           <Button variant="outline" size="md">
             View Documentation
@@ -144,6 +252,19 @@ const DemoApp: React.FC = () => {
           </Button>
         </Group>
       </Stack>
+      
+      <FormSidebar
+        opened={sidebarOpened}
+        onClose={() => setSidebarOpened(false)}
+        onSuccess={() => {
+          setSidebarOpened(false);
+          setShowTable(true); // Show table after successful form submission
+        }}
+        title="Demo User"
+        fields={formFields}
+        onSubmit={handleFormSubmit}
+        width={400}
+      />
     </Container>
   );
 };