-

demo/dist/540.js.LICENSE.txt

@@ -1,9 +0,0 @@
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

demo/dist/665.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[665],{665:(e,t,a)=>{a.r(t),a.d(t,{default:()=>c});var r=a(914),l=a.n(r),n=a(435),i=a(101);const c=()=>{const[e,t]=(0,r.useState)(0),[a,c]=(0,r.useState)(!1);(0,r.useEffect)(()=>{const e=setInterval(()=>{t(e=>e>=100?0:e+1)},100);return()=>clearInterval(e)},[]);const o=[{label:"Active Users",value:"1,234",icon:i.IconUsers,color:"blue"},{label:"Total Revenue",value:"$45,678",icon:i.IconChartLine,color:"green"},{label:"Projects",value:"89",icon:i.IconRocket,color:"orange"}];return l().createElement(n.Container,{size:"xl",py:"xl"},l().createElement(n.Stack,{gap:"xl"},l().createElement(n.Group,{justify:"space-between",align:"center"},l().createElement("div",null,l().createElement(n.Title,{order:1},"Demo Application"),l().createElement(n.Text,{c:"dimmed",size:"lg",mt:"xs"},"A sample federated application showcasing module federation")),l().createElement(n.ActionIcon,{size:"lg",variant:"light",loading:a,onClick:()=>{c(!0),setTimeout(()=>c(!1),1500)}},l().createElement(i.IconRefresh,{size:18}))),l().createElement(n.Alert,{icon:l().createElement(i.IconInfoCircle,{size:16}),title:"Welcome!",color:"blue",variant:"light"},"This is a demo application loaded via Module Federation. It demonstrates how microfrontends can be seamlessly integrated into the shell application."),l().createElement(n.SimpleGrid,{cols:{base:1,sm:3},spacing:"md"},o.map(e=>l().createElement(n.Paper,{key:e.label,p:"md",radius:"md",withBorder:!0},l().createElement(n.Group,{justify:"space-between"},l().createElement("div",null,l().createElement(n.Text,{c:"dimmed",size:"sm",fw:500,tt:"uppercase"},e.label),l().createElement(n.Text,{fw:700,size:"xl"},e.value)),l().createElement(e.icon,{size:24,color:`var(--mantine-color-${e.color}-6)`}))))),l().createElement(n.Card,{shadow:"sm",padding:"lg",radius:"md",withBorder:!0},l().createElement(n.Card.Section,{withBorder:!0,inheritPadding:!0,py:"xs"},l().createElement(n.Group,{justify:"space-between"},l().createElement(n.Text,{fw:500},"System Performance"),l().createElement(n.Badge,{color:"green",variant:"light"},"Healthy"))),l().createElement(n.Card.Section,{inheritPadding:!0,py:"md"},l().createElement(n.Stack,{gap:"xs"},l().createElement(n.Text,{size:"sm",c:"dimmed"},"CPU Usage: ",e.toFixed(1),"%"),l().createElement(n.Progress,{value:e,size:"sm",color:"blue",animated:!0})))),l().createElement("div",null,l().createElement(n.Title,{order:2,mb:"md"},"Features"),l().createElement(n.SimpleGrid,{cols:{base:1,sm:2},spacing:"md"},[{title:"Real-time Analytics",description:"Monitor your data in real-time"},{title:"Team Collaboration",description:"Work together seamlessly"},{title:"Cloud Integration",description:"Connect with cloud services"},{title:"Custom Reports",description:"Generate detailed reports"}].map((e,t)=>l().createElement(n.Card,{key:t,shadow:"sm",padding:"lg",radius:"md",withBorder:!0},l().createElement(n.Group,{mb:"xs"},l().createElement(i.IconCheck,{size:16,color:"var(--mantine-color-green-6)"}),l().createElement(n.Text,{fw:500},e.title)),l().createElement(n.Text,{size:"sm",c:"dimmed"},e.description))))),l().createElement(n.Divider,null),l().createElement(n.Group,{justify:"center"},l().createElement(n.Button,{variant:"outline",size:"md"},"View Documentation"),l().createElement(n.Button,{size:"md"},"Get Started"))))}}}]);

demo/dist/81.js.LICENSE.txt

@@ -1,9 +0,0 @@
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

demo/dist/961.js.LICENSE.txt

@@ -1,19 +0,0 @@
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

demo/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Demo App</title><script defer="defer" src="main.js"></script><script defer="defer" src="remoteEntry.js"></script></head><body><div id="root"></div></body></html>

demo/package.json

@@ -12,7 +12,11 @@
     "react-dom": "^18.2.0",
     "@mantine/core": "^7.0.0",
     "@mantine/hooks": "^7.0.0",
-    "@tabler/icons-react": "^2.40.0"
+    "@mantine/notifications": "^7.0.0",
+    "@mantine/form": "^7.0.0",
+    "@mantine/modals": "^7.0.0",
+    "@tabler/icons-react": "^2.40.0",
+    "@skybridge/web-components": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

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>
   );
 };