@akinon/ui-shell-dev 1.0.0 → 1.2.0

package/src/components/WelcomePage.tsx

@@ -0,0 +1,117 @@
+import { useAppShell } from '@akinon/app-shell';
+import { Button, Card, Divider, Tag } from '@akinon/ui-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const WelcomePage: React.FC = () => {
+  const navigate = useNavigate();
+  const { apps } = useAppShell();
+  const app = apps[0]; // Get the first (and likely only) app
+
+  return (
+    <div>
+      <Card title="Application Configuration" style={{ marginBottom: '24px' }}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '16px'
+          }}
+        >
+          <div>
+            <strong>Application Name:</strong>
+            <p style={{ margin: '12px 0 4px 0' }}>
+              {app?.name || 'Development App'}
+            </p>
+          </div>
+          <div>
+            <strong>Application Type:</strong>
+            <p style={{ margin: '12px 0 4px 0' }}>
+              <Tag color={app?.type === 'full_page' ? 'blue' : 'green'}>
+                {app?.type === 'full_page' ? 'fullpage' : 'plugin'}
+              </Tag>
+            </p>
+          </div>
+          <div>
+            <strong>Development URL:</strong>
+            <p
+              style={{
+                margin: '12px 0 4px 0',
+                color: '#999',
+                fontFamily: 'monospace',
+                fontSize: '13px'
+              }}
+            >
+              {app?.url || 'http://localhost:4001'}
+            </p>
+          </div>
+          <div>
+            <strong>Shell Theme:</strong>
+            <p style={{ margin: '12px 0 4px 0', color: '#999' }}>omnitron</p>
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Quick Actions" style={{ marginBottom: '24px' }}>
+        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+          <Button
+            type="primary"
+            onClick={() => navigate(`/external/${app?.slug}`)}
+          >
+            Launch Application
+          </Button>
+          {app?.type === 'plugin' && (
+            <Button onClick={() => navigate('/plugin-test')}>
+              Test Plugin Integration
+            </Button>
+          )}
+        </div>
+      </Card>
+
+      <Card title="Development Instructions">
+        <div style={{ lineHeight: '1.6' }}>
+          <h4 style={{ margin: '0 0 8px 0' }}>Getting Started:</h4>
+          <ol style={{ paddingLeft: '20px' }}>
+            <li>
+              Make sure your application is running at{' '}
+              <code>{app?.url || 'http://localhost:4001'}</code>
+            </li>
+            <li>
+              Click &quot;Launch Application&quot; to load your app in the shell
+              environment
+            </li>
+            {app?.type === 'plugin' && (
+              <li>
+                Use &quot;Test Plugin Integration&quot; to test your plugin in
+                different placeholder configurations
+              </li>
+            )}
+            <li>
+              The shell provides a realistic integration environment for testing
+            </li>
+          </ol>
+
+          <Divider />
+
+          <h4 style={{ margin: '16px 0 8px 0' }}>
+            Application Type:{' '}
+            {app?.type === 'full_page' ? 'fullpage' : 'plugin'}
+          </h4>
+          {app?.type === 'full_page' ? (
+            <p style={{ margin: 0, color: '#666' }}>
+              Your fullpage application will render as complete pages within the
+              shell environment, providing full control over the content area
+              and routing.
+            </p>
+          ) : (
+            <p style={{ margin: 0, color: '#666' }}>
+              Your plugin application will render within designated placeholders
+              in the host application, providing component-level integration
+              capabilities.
+            </p>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+};

package/src/components/layout.scss

@@ -0,0 +1,48 @@
+.akinon-layout {
+  height: 100vh;
+}
+
+.akinon-layout-sider {
+  overflow-x: hidden;
+}
+
+.akinon-layout-content {
+  height: calc(100vh - 64px - 40px); // Subtract header and footer
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.akinon-menu-item.akinon-menu-item-disabled {
+  opacity: 0.6;
+}
+
+.akinon-menu-item {
+  font-weight: 500 !important;
+}
+
+.akinon-menu-item-selected {
+  font-weight: 600 !important;
+}
+
+.log-messages {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+
+  .akinon-space-item {
+    width: 100%;
+  }
+
+  &-item {
+    border-radius: 10px;
+    border: 1px solid #fff;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.25rem;
+
+    & > div {
+      width: 100%;
+    }
+  }
+}

package/src/global.scss

@@ -0,0 +1,33 @@
+*,
+*::before,
+*::after {
+  font-family: 'Jost Variable', sans-serif;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  padding: 4px 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--color-ebonyClay-400);
+  border: none;
+  padding: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-ebonyClay-700);
+  border-radius: 3px;
+  border: none;
+}

package/src/main.tsx

@@ -1,3 +1,7 @@
+import '@akinon/fonts-jost-variable';
+import '@akinon/ui-utils';
+import './global.scss';
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -9,8 +13,10 @@ const config: ShellConfig = (
   window as unknown as { __SHELL_CONFIG__?: ShellConfig }
 ).__SHELL_CONFIG__ || {
   plugin: {
-    url: 'http://localhost:4002',
-    path: './src'
+    url: 'http://localhost:4001',
+    path: './src',
+    name: 'Development App',
+    type: 'fullpage'
   },
   shell: {
     port: 4000,

package/src/pages/Dashboard.tsx

@@ -0,0 +1,25 @@
+import './pages.scss';
+
+import React from 'react';
+
+import { PageContent } from '../components/PageContent';
+import { PageHeading } from '../components/PageHeading';
+import { WelcomePage } from '../components/WelcomePage';
+
+export const PageDashboard: React.FC = () => {
+  return (
+    <div className="page-dashboard">
+      <div className="page-heading-container">
+        <PageHeading
+          title="Welcome"
+          description="Development environment for testing and integrating your applications"
+        />
+      </div>
+      <div className="page-content-container">
+        <PageContent>
+          <WelcomePage />
+        </PageContent>
+      </div>
+    </div>
+  );
+};

package/src/pages/External.tsx

@@ -0,0 +1,15 @@
+import './pages.scss';
+
+import { AppRenderer } from '@akinon/app-shell';
+import React from 'react';
+
+export const PageExternal: React.FC<{ id: number; path?: string }> = ({
+  id,
+  path
+}) => {
+  return (
+    <div className="page-plugin-external">
+      <AppRenderer id={id} path={path} />
+    </div>
+  );
+};

package/src/pages/PluginTest.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { PluginTestPage } from '../components/PluginTestPage';
+
+export const PagePluginTest: React.FC = () => {
+  return <PluginTestPage />;
+};

package/src/pages/pages.scss

@@ -0,0 +1,9 @@
+// Common page styling
+.page-dashboard,
+.page-plugin-external {
+  height: 100%;
+}
+
+.page-content-container {
+  // Additional content styling if needed
+}

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-system';
+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/types.ts

@@ -2,6 +2,8 @@ export interface ShellConfig {
   plugin: {
     url: string;
     path: string;
+    name: string;
+    type: 'fullpage' | 'plugin';
   };
   shell: {
     port: number;
@@ -38,3 +40,5 @@ export interface ThemeConfig {
     height: number;
   };
 }
+
+export type ViewType = 'welcome' | 'app' | 'plugin-test';

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

package/dist/assets/index-CuIRnKVE.css

@@ -1 +0,0 @@
-.akinon-layout-footer{text-align:center}.akinon-layout-header{padding-inline:1rem;height:3.5rem;border-bottom:1px solid var(--color-gray-900);display:flex;align-items:center;justify-content:space-between;line-height:unset;position:sticky;top:0;z-index:999}.akinon-layout-sider{position:sticky;top:0;height:100svh;overflow-y:auto}.akinon-layout-sider.left{inset-inline-start:0}.akinon-layout-sider.right{inset-inline-end:0}.akinon-layout-sider .logo-container{display:flex;flex-direction:row;align-items:center;height:3.5rem;gap:.8rem;background-color:var(--color-ebonyClay-600);padding-inline:1.5rem}.akinon-layout-sider .logo-container.collapsed{justify-content:center;padding-inline:1rem}.akinon-layout-sider .logo-container.collapsed .brand-image{display:none}