@akinon/ui-shell-dev 1.0.0

package/src/server/dev-server.ts

@@ -0,0 +1,142 @@
+import cors from 'cors';
+import express from 'express';
+import fs from 'fs';
+import path from 'path';
+import { createServer as createViteServer } from 'vite';
+
+import type { ShellConfig } from '../types';
+
+export class ShellDevServer {
+  private app: express.Application;
+  private config: ShellConfig;
+  private viteServer?: import('vite').ViteDevServer;
+
+  constructor(config: ShellConfig) {
+    this.app = express();
+    this.config = config;
+    this.setupMiddleware();
+  }
+
+  private setupMiddleware() {
+    // Enable CORS for plugin communication
+    this.app.use(
+      cors({
+        origin: true,
+        credentials: true
+      })
+    );
+
+    // Parse JSON bodies
+    this.app.use(express.json());
+
+    // Serve static assets
+    this.app.use('/assets', express.static(path.join(__dirname, '../assets')));
+  }
+
+  async start() {
+    try {
+      // Create Vite server for the shell app
+      this.viteServer = await createViteServer({
+        server: {
+          middlewareMode: true,
+          cors: true
+        },
+        appType: 'spa',
+        root: path.resolve(__dirname, '..')
+      });
+
+      // Use Vite middleware
+      this.app.use(this.viteServer.ssrFixStacktrace);
+      this.app.use(this.viteServer.middlewares);
+
+      // API endpoints
+      this.setupApiRoutes();
+
+      // Serve the shell app
+      this.app.get('*', async (req, res, next) => {
+        if (req.path.startsWith('/api')) {
+          return next();
+        }
+
+        try {
+          let template = fs.readFileSync(
+            path.resolve(__dirname, '../index.html'),
+            'utf-8'
+          );
+
+          template = await this.viteServer.transformIndexHtml(
+            req.url,
+            template
+          );
+
+          // Inject config
+          template = template.replace(
+            '<!--SHELL_CONFIG-->',
+            `<script>window.__SHELL_CONFIG__ = ${JSON.stringify(this.config)};</script>`
+          );
+
+          res.status(200).set({ 'Content-Type': 'text/html' }).end(template);
+        } catch (error) {
+          this.viteServer.ssrFixStacktrace(error);
+          next(error);
+        }
+      });
+
+      // Start server
+      const server = this.app.listen(this.config.shell.port, () => {
+        console.log(
+          `🚀 Shell development server running on http://localhost:${this.config.shell.port}`
+        );
+        console.log(`📱 Plugin expected at: ${this.config.plugin.url}`);
+        console.log(`🎨 Theme: ${this.config.shell.theme}`);
+      });
+
+      // Handle graceful shutdown
+      process.on('SIGTERM', () => {
+        console.log('🛑 Shutting down shell server...');
+        server.close(() => {
+          if (this.viteServer) {
+            this.viteServer.close();
+          }
+          process.exit(0);
+        });
+      });
+
+      return server;
+    } catch (error) {
+      console.error('❌ Failed to start shell server:', error);
+      throw error;
+    }
+  }
+
+  private setupApiRoutes() {
+    // Health check
+    this.app.get('/api/health', (req, res) => {
+      res.json({
+        status: 'ok',
+        config: this.config,
+        timestamp: new Date().toISOString()
+      });
+    });
+
+    // Configuration endpoint
+    this.app.get('/api/config', (req, res) => {
+      res.json(this.config);
+    });
+
+    // Plugin proxy endpoint (for development)
+    this.app.get('/api/plugin/health', async (req, res) => {
+      try {
+        const response = await fetch(`${this.config.plugin.url}/api/health`);
+        const data = await response.json();
+        res.json({ plugin: data, shell: { status: 'ok' } });
+      } catch (error) {
+        res.status(502).json({
+          error: 'Plugin not available',
+          plugin_url: this.config.plugin.url,
+          message: error.message
+        });
+      }
+    });
+  }
+}

package/src/shell-app.tsx

@@ -0,0 +1,17 @@
+import { AkinonUiProvider } from '@akinon/ui-system';
+import React from 'react';
+
+import { AppLayout } from './components/AppLayout';
+import type { ShellConfig } from './types';
+
+interface ShellAppProps {
+  config: ShellConfig;
+}
+
+export const ShellApp: React.FC<ShellAppProps> = ({ config }) => {
+  return (
+    <AkinonUiProvider>
+      <AppLayout config={config} />
+    </AkinonUiProvider>
+  );
+};

package/src/themes/index.ts

@@ -0,0 +1,37 @@
+import type { SidebarItem, ThemeConfig } from '../types';
+import { omnitronSidebarItems, omnitronTheme } from './omnitron';
+
+export const themes: Record<string, ThemeConfig> = {
+  omnitron: omnitronTheme,
+  'seller-center': omnitronTheme, // Use same for now
+  minimal: {
+    ...omnitronTheme,
+    name: 'minimal',
+    colors: {
+      ...omnitronTheme.colors,
+      sidebar: '#ffffff',
+      background: '#ffffff'
+    }
+  }
+};
+
+export const defaultSidebarItems: Record<string, SidebarItem[]> = {
+  omnitron: omnitronSidebarItems,
+  'seller-center': omnitronSidebarItems,
+  minimal: [
+    {
+      key: 'plugin',
+      label: 'Plugin Area',
+      icon: 'plugin',
+      active: true
+    }
+  ]
+};
+
+export function getTheme(themeName: string): ThemeConfig {
+  return themes[themeName] || themes.omnitron;
+}
+
+export function getSidebarItems(themeName: string): SidebarItem[] {
+  return defaultSidebarItems[themeName] || defaultSidebarItems.omnitron;
+}

package/src/themes/omnitron.ts

@@ -0,0 +1,66 @@
+import type { ThemeConfig } from '../types';
+
+export const omnitronTheme: ThemeConfig = {
+  name: 'omnitron',
+  colors: {
+    primary: '#1890ff',
+    secondary: '#52c41a',
+    background: '#f0f2f5',
+    sidebar: '#001529',
+    header: '#ffffff'
+  },
+  sidebar: {
+    width: 240,
+    collapsedWidth: 80
+  },
+  header: {
+    height: 64
+  }
+};
+
+export const omnitronSidebarItems = [
+  {
+    key: '1',
+    label: 'Dashboard',
+    icon: 'dashboard'
+  },
+  {
+    key: '2',
+    label: 'Products',
+    icon: 'shopping',
+    children: [
+      { key: '2-1', label: 'Product List' },
+      { key: '2-2', label: 'Categories' },
+      { key: '2-3', label: 'Attributes' }
+    ]
+  },
+  {
+    key: '3',
+    label: 'Orders',
+    icon: 'shopping-cart',
+    children: [
+      { key: '3-1', label: 'Order List' },
+      { key: '3-2', label: 'Order Status' }
+    ]
+  },
+  {
+    key: '4',
+    label: 'Customers',
+    icon: 'user'
+  },
+  {
+    key: '5',
+    label: 'Reports',
+    icon: 'chart',
+    children: [
+      { key: '5-1', label: 'Sales Reports' },
+      { key: '5-2', label: 'Customer Reports' }
+    ]
+  },
+  {
+    key: 'plugin',
+    label: 'Plugin Area',
+    icon: 'plugin',
+    active: true
+  }
+];

package/src/types.ts

@@ -0,0 +1,40 @@
+export interface ShellConfig {
+  plugin: {
+    url: string;
+    path: string;
+  };
+  shell: {
+    port: number;
+    theme: 'omnitron' | 'seller-center' | 'minimal';
+    title: string;
+  };
+  sidebar: {
+    items: SidebarItem[];
+  };
+}
+
+export interface SidebarItem {
+  key: string;
+  label: string;
+  icon?: string;
+  active?: boolean;
+  children?: SidebarItem[];
+}
+
+export interface ThemeConfig {
+  name: string;
+  colors: {
+    primary: string;
+    secondary: string;
+    background: string;
+    sidebar: string;
+    header: string;
+  };
+  sidebar: {
+    width: number;
+    collapsedWidth: number;
+  };
+  header: {
+    height: number;
+  };
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@akinon/typescript-config/vite.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  server: {
+    port: 4000,
+    cors: true
+  },
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      // Exclude server files from build
+      external: (id) => {
+        return id.includes('/server/') || id.includes('server');
+      }
+    }
+  }
+});