reorg

demo/src/App.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Container,
+  Title,
+  Text,
+  Card,
+  SimpleGrid,
+  Group,
+  Badge,
+  Button,
+  Stack,
+  Progress,
+  ActionIcon,
+  Paper,
+  Divider,
+  Alert,
+} from '@mantine/core';
+import {
+  IconRocket,
+  IconChartLine,
+  IconUsers,
+  IconRefresh,
+  IconCheck,
+  IconInfoCircle,
+} from '@tabler/icons-react';
+
+const DemoApp: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
+    }, 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  const handleRefresh = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 1500);
+  };
+
+  const stats = [
+    { label: 'Active Users', value: '1,234', icon: IconUsers, color: 'blue' },
+    { label: 'Total Revenue', value: '$45,678', icon: IconChartLine, color: 'green' },
+    { label: 'Projects', value: '89', icon: IconRocket, color: 'orange' },
+  ];
+
+  const features = [
+    { 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' },
+  ];
+
+  return (
+    <Container size="xl" py="xl">
+      <Stack gap="xl">
+        <Group justify="space-between" align="center">
+          <div>
+            <Title order={1}>Demo Application</Title>
+            <Text c="dimmed" size="lg" mt="xs">
+              A sample federated application showcasing module federation
+            </Text>
+          </div>
+          <ActionIcon
+            size="lg"
+            variant="light"
+            loading={isLoading}
+            onClick={handleRefresh}
+          >
+            <IconRefresh size={18} />
+          </ActionIcon>
+        </Group>
+
+        <Alert icon={<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.
+        </Alert>
+
+        <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
+          {stats.map((stat) => (
+            <Paper key={stat.label} p="md" radius="md" withBorder>
+              <Group justify="space-between">
+                <div>
+                  <Text c="dimmed" size="sm" fw={500} tt="uppercase">
+                    {stat.label}
+                  </Text>
+                  <Text fw={700} size="xl">
+                    {stat.value}
+                  </Text>
+                </div>
+                <stat.icon size={24} color={`var(--mantine-color-${stat.color}-6)`} />
+              </Group>
+            </Paper>
+          ))}
+        </SimpleGrid>
+
+        <Card shadow="sm" padding="lg" radius="md" withBorder>
+          <Card.Section withBorder inheritPadding py="xs">
+            <Group justify="space-between">
+              <Text fw={500}>System Performance</Text>
+              <Badge color="green" variant="light">
+                Healthy
+              </Badge>
+            </Group>
+          </Card.Section>
+
+          <Card.Section inheritPadding py="md">
+            <Stack gap="xs">
+              <Text size="sm" c="dimmed">
+                CPU Usage: {progress.toFixed(1)}%
+              </Text>
+              <Progress value={progress} size="sm" color="blue" animated />
+            </Stack>
+          </Card.Section>
+        </Card>
+
+        <div>
+          <Title order={2} mb="md">Features</Title>
+          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+            {features.map((feature, index) => (
+              <Card key={index} shadow="sm" padding="lg" radius="md" withBorder>
+                <Group mb="xs">
+                  <IconCheck size={16} color="var(--mantine-color-green-6)" />
+                  <Text fw={500}>{feature.title}</Text>
+                </Group>
+                <Text size="sm" c="dimmed">
+                  {feature.description}
+                </Text>
+              </Card>
+            ))}
+          </SimpleGrid>
+        </div>
+
+        <Divider />
+
+        <Group justify="center">
+          <Button variant="outline" size="md">
+            View Documentation
+          </Button>
+          <Button size="md">
+            Get Started
+          </Button>
+        </Group>
+      </Stack>
+    </Container>
+  );
+};
+
+export default DemoApp;

demo/src/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { MantineProvider } from '@mantine/core';
+import App from './App';
+import '@mantine/core/styles.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <MantineProvider>
+      <App />
+    </MantineProvider>
+  </React.StrictMode>
+);