@akinon/ui-shell-dev 1.1.0 → 1.2.0

package/src/providers.tsx

@@ -0,0 +1,108 @@
+import type { ApplicationActions, RegisteredApp } from '@akinon/app-shell';
+import { AppShellProvider, type ShellNavigation } from '@akinon/app-shell';
+import { notification } from '@akinon/ui-react';
+import React from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import type { ShellConfig } from './types';
+
+interface ProvidersProps {
+  config: ShellConfig;
+  children: React.ReactNode;
+}
+
+export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
+  const [api, contextHolder] = notification.useNotification();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  // Convert shell config to apps format for AppShellProvider
+  const apps: RegisteredApp[] = [
+    {
+      id: 1,
+      url: config.plugin.url,
+      slug: config.plugin.name.toLowerCase().replace(/\s+/g, '-'),
+      path: '', // Empty path for development like playground
+      type: config.plugin.type === 'fullpage' ? 'full_page' : 'plugin',
+      name: config.plugin.name
+    }
+  ];
+
+  const navigation: ShellNavigation = {
+    navigate: ({ id, path, external }: any) => {
+      const app = apps.find(app => app.id === id);
+      if (!app) return;
+
+      const uri = external ? path : `/external/${app.slug}${path || ''}`;
+      navigate(uri);
+    }
+  };
+
+  const data = {
+    lng: 'en',
+    username: 'Developer',
+    searchParams: Object.fromEntries([...searchParams])
+  };
+
+  const defaultActions = {
+    showModalDialog: () => {
+      // Implementation for showing a modal dialog
+    },
+    showToast: (
+      content: string,
+      type: 'success' | 'error' | 'info' | 'warning' | 'loading' | 'destroy'
+    ) => {
+      if (type === 'loading' || type === 'destroy') {
+        return;
+      }
+      api[type]({
+        message: content,
+        placement: 'top'
+      });
+    },
+    showErrorMessage: (title: string, content: string) => {
+      api.error({
+        message: title,
+        description: content,
+        placement: 'top'
+      });
+    },
+    showRichModal: () => {
+      // Rich modal implementation
+    }
+  };
+
+  const customActions = {
+    reloadPage: () => window.location.reload(),
+    logMessage: (newItem: Object) => {
+      try {
+        const prevItems = JSON.parse(
+          localStorage.getItem('logMessages') || '[]'
+        );
+        localStorage.setItem(
+          'logMessages',
+          JSON.stringify([...prevItems, newItem])
+        );
+      } catch {}
+    }
+  };
+
+  const actions: ApplicationActions = {
+    ...defaultActions,
+    actions: {
+      ...customActions
+    }
+  };
+
+  return (
+    <AppShellProvider
+      apps={apps}
+      navigation={navigation}
+      data={data}
+      actions={actions}
+    >
+      {children}
+      {contextHolder}
+    </AppShellProvider>
+  );
+};

package/src/routes.tsx

@@ -0,0 +1,44 @@
+import { useAppShell } from '@akinon/app-shell';
+import React from 'react';
+import { Route, Routes as ReactRouterRoutes } from 'react-router-dom';
+
+import { PageDashboard } from './pages/Dashboard';
+import { PageExternal } from './pages/External';
+import { PagePluginTest } from './pages/PluginTest';
+
+export const Routes = () => {
+  const { apps, configs } = useAppShell();
+  const fullpageApps = apps.filter(app => app.type === 'full_page');
+
+  return (
+    <ReactRouterRoutes>
+      {fullpageApps.map(app => (
+        <Route key={app.id} path={`/external/${app.slug}`}>
+          <Route index element={<PageExternal id={app.id} path={app.path} />} />
+
+          {(configs.get(app.id) as any)?.menu?.map((sub: any) => {
+            return (
+              sub.path !== '/' && (
+                <Route
+                  key={sub.path}
+                  path={`/external/${app.slug}${sub.path}`}
+                  element={
+                    <PageExternal
+                      id={app.id}
+                      path={
+                        app.subSlug ? `${app.subSlug}${sub.path}` : sub.path
+                      }
+                    />
+                  }
+                />
+              )
+            );
+          })}
+        </Route>
+      ))}
+
+      <Route path="/plugin-test" element={<PagePluginTest />} />
+      <Route path="/" element={<PageDashboard />} />
+    </ReactRouterRoutes>
+  );
+};

package/src/server/dev-server.mjs

@@ -35,12 +35,13 @@ export class ShellDevServer {
   async start() {
     try {
       console.log('🔧 Starting shell server initialization...');
-      
+
       const shellRoot = path.resolve(__dirname, '../..');
       const distPath = path.resolve(shellRoot, 'dist');
       // Only use production mode if explicitly set via env var
-      const isProduction = process.env.NODE_ENV === 'production' && fs.existsSync(distPath);
-      
+      const isProduction =
+        process.env.NODE_ENV === 'production' && fs.existsSync(distPath);
+
       console.log(`📁 Shell root: ${shellRoot}`);
       console.log(`🏭 Production mode: ${isProduction}`);
 
@@ -50,14 +51,14 @@ export class ShellDevServer {
       if (isProduction) {
         // Production: serve built assets
         this.app.use('/assets', express.static(path.join(distPath, 'assets')));
-        
+
         this.app.get('*', (req, res, next) => {
           if (req.path.startsWith('/api')) {
             return next();
           }
 
           console.log(`📄 Serving production HTML for: ${req.url}`);
-          
+
           let template = fs.readFileSync(
             path.resolve(distPath, 'index.html'),
             'utf-8'
@@ -85,20 +86,18 @@ export class ShellDevServer {
 
         console.log('✅ Vite server created successfully');
 
-        // Use Vite middleware for assets and HMR
-        this.app.use(this.viteServer.middlewares);
-        
-        console.log('✅ Vite middleware configured');
-
-        // Serve the shell app (only for HTML requests)
+        // Serve the shell app (only for HTML requests) - MUST be before Vite middleware
         this.app.get('*', async (req, res, next) => {
-          if (req.path.startsWith('/api') || req.path.startsWith('/src') || req.path.includes('.')) {
+          if (
+            req.path.startsWith('/api') ||
+            req.path.startsWith('/src') ||
+            req.path.startsWith('/@') ||
+            req.path.includes('.')
+          ) {
             return next();
           }
 
           try {
-            console.log(`📄 Serving development HTML for: ${req.url}`);
-            
             let template = fs.readFileSync(
               path.resolve(__dirname, '../../index.html'),
               'utf-8'
@@ -115,7 +114,6 @@ export class ShellDevServer {
               `<script>window.__SHELL_CONFIG__ = ${JSON.stringify(this.config)};</script>`
             );
 
-            console.log(`✅ HTML processed successfully for ${req.url}`);
             res.status(200).set({ 'Content-Type': 'text/html' }).end(template);
           } catch (error) {
             console.error(`❌ Error serving ${req.url}:`, error);
@@ -123,6 +121,11 @@ export class ShellDevServer {
             next(error);
           }
         });
+
+        // Use Vite middleware for assets and HMR - MUST be after our route handler
+        this.app.use(this.viteServer.middlewares);
+
+        console.log('✅ Vite middleware configured');
       }
 
       // Start server

package/src/shell-app.tsx

@@ -1,7 +1,10 @@
 import { AkinonUiProvider } from '@akinon/ui-react';
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 
 import { AppLayout } from './components/AppLayout';
+import { Providers } from './providers';
+import { Routes } from './routes';
 import type { ShellConfig } from './types';
 
 interface ShellAppProps {
@@ -10,8 +13,14 @@ interface ShellAppProps {
 
 export const ShellApp: React.FC<ShellAppProps> = ({ config }) => {
   return (
-    <AkinonUiProvider>
-      <AppLayout config={config} />
-    </AkinonUiProvider>
+    <BrowserRouter>
+      <AkinonUiProvider>
+        <Providers config={config}>
+          <AppLayout>
+            <Routes />
+          </AppLayout>
+        </Providers>
+      </AkinonUiProvider>
+    </BrowserRouter>
   );
 };

package/src/utils/navigation.tsx

@@ -0,0 +1,65 @@
+import type { RegisteredApp } from '@akinon/app-shell';
+import type { TMenuItemType } from '@akinon/ui-react';
+
+const STATIC_NAVIGATION_ITEMS: TMenuItemType[] = [
+  {
+    key: '/',
+    label: 'Welcome',
+    icon: 'dashboard'
+  },
+  {
+    key: '/placeholder-1',
+    label: 'Settings',
+    icon: 'ayarlar',
+    disabled: true
+  },
+  {
+    key: '/placeholder-2',
+    label: 'Help & Support',
+    icon: 'bilgilendirme_servis',
+    disabled: true
+  }
+];
+
+const PLUGIN_NAVIGATION_ITEMS: TMenuItemType[] = [
+  {
+    key: '/plugin-test',
+    label: 'Plugin Test',
+    icon: 'box'
+  }
+];
+
+export const getStaticNavigationItems = () => {
+  return STATIC_NAVIGATION_ITEMS;
+};
+
+export const getFullpageNavigationItems = (
+  apps: RegisteredApp[],
+  configs: Map<number, any>
+): TMenuItemType[] => {
+  return apps
+    .filter(app => app.type === 'full_page')
+    .map((app): TMenuItemType => {
+      return {
+        key: `/external/${app.slug}`,
+        label: app.name,
+        icon: 'stoklistesi',
+        children: configs
+          .get(app.id)
+          ?.menu?.map((sub: any): TMenuItemType | false => {
+            if (sub?.child) return false;
+
+            return {
+              key: `/external/${app.slug}${sub.path}`,
+              label: sub.label,
+              icon: 'eksi'
+            };
+          })
+          .filter(Boolean)
+      };
+    });
+};
+
+export const getPluginNavigationItems = () => {
+  return PLUGIN_NAVIGATION_ITEMS;
+};