startup-starter/skybridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reorg

Browse Source
This commit is contained in:
Ryan Copley
2025-08-27 01:29:24 -04:00
parent 9bb42117e6
commit fd2a756db3
34 changed files with 113 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
web/demo/.gitignore → web/.gitignore vendored
View File

5764
web/demo/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
web/demo/package.json
View File

@ -1,32 +0,0 @@
{
"name": "demo",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"dev": "webpack serve --mode development"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@mantine/core": "^7.0.0",
"@mantine/hooks": "^7.0.0",
"@tabler/icons-react": "^2.40.0"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"typescript": "^4.9.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.7.4"
}
}

11
web/demo/public/index.html
View File

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

151
web/demo/src/App.tsx
View File

@ -1,151 +0,0 @@
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;

14
web/demo/src/index.tsx
View File

@ -1,14 +0,0 @@
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>
);

76
web/demo/webpack.config.js
View File

@ -1,76 +0,0 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
mode: 'development',
entry: './src/index.tsx',
devServer: {
port: 3001,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
'@babel/preset-typescript',
],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'demo',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App.tsx',
},
shared: {
react: {
singleton: true,
requiredVersion: '^18.2.0',
eager: false,
},
'react-dom': {
singleton: true,
requiredVersion: '^18.2.0',
eager: false,
},
'@mantine/core': {
singleton: true,
requiredVersion: '^7.0.0',
eager: false,
},
'@mantine/hooks': {
singleton: true,
requiredVersion: '^7.0.0',
eager: false,
},
'@tabler/icons-react': {
singleton: true,
requiredVersion: '^2.40.0',
eager: false,
},
},
}),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};

1
web/dist/index.html vendored Normal file
View File

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

2
web/dist/main.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

61
web/dist/main.js.LICENSE.txt vendored Normal file
View File

@ -0,0 +1,61 @@
/**
* @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
* 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.
*/
/**
* @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.
*/
/**
* @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.
*/
/**
* @remix-run/router v1.23.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
/**
* React Router v6.30.1
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/

0
web/shell/package-lock.json → web/package-lock.json generated
View File

0
web/shell/package.json → web/package.json
View File

0
web/shell/public/index.html → web/public/index.html
View File

1
web/shell/.gitignore vendored
View File

@ -1 +0,0 @@
node_modules

0
web/shell/src/App.tsx → web/src/App.tsx
View File

0
web/shell/src/components/AppLoader.tsx → web/src/components/AppLoader.tsx
View File

0
web/shell/src/components/Breadcrumbs.tsx → web/src/components/Breadcrumbs.tsx
View File

0
web/shell/src/components/Header.tsx → web/src/components/Header.tsx
View File

0
web/shell/src/components/Navigation.tsx → web/src/components/Navigation.tsx
View File

0
web/shell/src/index.tsx → web/src/index.tsx
View File

0
web/shell/src/pages/HomePage.tsx → web/src/pages/HomePage.tsx
View File

0
web/shell/webpack.config.js → web/webpack.config.js
View File