npm - @akinon/ui-shell-dev - Versions diffs - 1.3.6 → 1.5.0 - Mend

@akinon/ui-shell-dev 1.3.6 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/assets/index-BTAQndJC.js +1 -0
package/dist/assets/index-CX4XmW02.css +1 -0
package/dist/assets/index-DAU00iTN.js +434 -0
package/dist/index.html +2 -2
package/index.mjs +1 -1
package/package.json +15 -16
package/src/components/Header.tsx +1 -1
package/src/components/HeaderSearch.tsx +1 -1
package/src/components/HeaderUser.tsx +9 -2
package/src/components/Navigation.tsx +104 -12
package/src/components/PageHeading.tsx +4 -8
package/src/components/PluginTestPage.tsx +1 -1
package/src/components/WelcomePage.tsx +26 -17
package/src/main.tsx +8 -6
package/src/pages/External.tsx +15 -1
package/src/providers.tsx +4 -2
package/src/routes.tsx +6 -2
package/src/server/dev-server.mjs +15 -13
package/src/server/dev-server.ts +15 -13
package/src/types.ts +1 -1
package/src/utils/navigation.tsx +16 -8
package/dist/assets/index-BFs1gfY5.css +0 -1
package/dist/assets/index-CNgx52S6.js +0 -426

package/dist/index.html CHANGED Viewed

@@ -24,8 +24,8 @@
         box-sizing: border-box;
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-CNgx52S6.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BFs1gfY5.css">
+    <script type="module" crossorigin src="/assets/index-DAU00iTN.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CX4XmW02.css">
   </head>
   <body>
     <div id="root"></div>

package/index.mjs CHANGED Viewed

	@@ -1 +1 @@
1	- export { ShellDevServer } from './src/server/dev-server.mjs';
1	+ export { ShellDevServer } from './src/server/dev-server.mjs';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-shell-dev",
-  "version": "1.3.6",
+  "version": "1.5.0",
   "private": false,
   "description": "Development shell application for Akinon UI Protocol plugins",
   "type": "module",
@@ -15,37 +15,36 @@
     "tsconfig.json"
   ],
   "dependencies": {
-    "@akinon/app-shell": "^1.3.0",
-    "@akinon/fonts-jost-variable": "^2.0.1",
-    "@akinon/icons": "^1.0.0",
-    "@akinon/ui-react": "^1.2.0",
-    "@akinon/ui-utils": "^1.0.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "*",
+    "react-dom": "*",
     "react-router-dom": "^6.28.0",
-    "vite": "^5.2.0"
+    "vite": "*",
+    "@akinon/app-shell": "1.4.0",
+    "@akinon/ui-react": "1.3.0",
+    "@akinon/fonts-jost-variable": "2.1.0",
+    "@akinon/icons": "1.1.0",
+    "@akinon/ui-utils": "1.1.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "*",
+    "@types/react-dom": "*",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "1.0.1"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.1.0"
   },
   "engines": {
     "node": ">=18"
   },
   "scripts": {
     "build": "vite build",
+    "clean": "rm -rf dist node_modules",
     "dev": "vite",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
     "lint": "eslint",
-    "clean": "rm -rf dist node_modules"
+    "preview": "vite preview"
   }
 }

package/src/components/Header.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Badge, Button } from '@akinon/ui-react';
+import { Button } from '@akinon/ui-react';
 import React from 'react';
 // Get version from package.json via Vite environment variable

package/src/components/HeaderSearch.tsx CHANGED Viewed

@@ -9,4 +9,4 @@ export const HeaderSearch: React.FC = () => {
       onSearch={() => {}}
     />
   );
-};
+};

package/src/components/HeaderUser.tsx CHANGED Viewed

@@ -14,10 +14,17 @@ export const HeaderUser: React.FC = () => {
       }}
       placement="bottomRight"
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          cursor: 'pointer'
+        }}
+      >
         <Avatar size="small">Dev</Avatar>
         <span style={{ fontSize: '14px' }}>Developer</span>
       </div>
     </Dropdown>
   );
-};
+};

package/src/components/Navigation.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useAppShell } from '@akinon/app-shell';
-import { IMenuProps, Menu } from '@akinon/ui-react';
-import { useEffect, useState } from 'react';
+import { IMenuProps, Menu, TMenuItemType } from '@akinon/ui-react';
+import { useEffect, useMemo, useState } from 'react';
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -21,24 +21,115 @@ export const Navigation: React.FC = () => {
   const itemsBottom = getStaticNavigationItemsBottom();
   const fullpageItems = getFullpageNavigationItems(
     apps,
-    configs as Map<number, any>
+    configs as Map<number, unknown>
   );
   const pluginItems = getPluginNavigationItems(apps);
+  const navigationItems = useMemo(
+    () => [...items, ...fullpageItems, ...pluginItems, ...itemsBottom],
+    [items, fullpageItems, pluginItems, itemsBottom]
+  );
+  const { allItemKeys, childToParentKey } = useMemo(() => {
+    function collectKeys(items: TMenuItemType[] | undefined): string[] {
+      if (!items) return [];
+      const keys: string[] = [];
+      items.forEach(item => {
+        if ('key' in item && item.key) keys.push(item.key);
+        if ('children' in item && item.children) {
+          (item.children as TMenuItemType[]).forEach(child => {
+            if ('key' in child && child.key) keys.push(child.key);
+          });
+        }
+      });
+      return keys;
+    }
+    const keys = collectKeys(navigationItems);
+    const map = new Map<string, string>();
+    fullpageItems.forEach(parent => {
+      if ('children' in parent && parent.children) {
+        (parent.children as TMenuItemType[]).forEach(child => {
+          if ('key' in child && child.key && 'key' in parent && parent.key) {
+            map.set(child.key, parent.key);
+          }
+        });
+      }
+    });
+    return { allItemKeys: keys, childToParentKey: map };
+  }, [navigationItems, fullpageItems]);
+  const parentKeys = useMemo(() => {
+    const keys = new Set<string>();
+    fullpageItems.forEach(p => {
+      if (
+        'key' in p &&
+        p.key &&
+        'children' in p &&
+        Array.isArray(p.children) &&
+        (p.children as TMenuItemType[]).length > 0
+      ) {
+        keys.add(p.key as string);
+      }
+    });
+    return keys;
+  }, [fullpageItems]);
   useEffect(() => {
-    setSelectedKey(location.pathname);
-  }, [location]);
+    const pathname = location.pathname;
+    // Pick the longest menu key that is a prefix of the current path
+    const bestMatch = allItemKeys
+      .filter(key => typeof key === 'string' && pathname.startsWith(key))
+      .sort((a, b) => (b as string).length - (a as string).length)[0] as
+      | string
+      | undefined;
-  const onClick: IMenuProps['onClick'] = (e: any) => {
-    if (!e.key.includes('external')) {
-      setOpenKeys([]);
+    if (bestMatch) setSelectedKey(bestMatch);
+    const parentKey = bestMatch ? childToParentKey.get(bestMatch) : undefined;
+    // Auto open parent submenu when landing on a child route
+    if (parentKey) setOpenKeys([parentKey]);
+    else if (
+      // If landing on a parent path that has children, open it too
+      fullpageItems.some(p => {
+        const isSameKey = 'key' in p && p.key === bestMatch;
+        const hasChildren =
+          'children' in p &&
+          Array.isArray(p.children) &&
+          (p.children as TMenuItemType[]).length > 0;
+        return isSameKey && hasChildren;
+      })
+    ) {
+      setOpenKeys([bestMatch as string]);
+    }
+  }, [location, allItemKeys, childToParentKey, fullpageItems]);
+  const onClick: IMenuProps['onClick'] = e => {
+    const key = e.key;
+    // Toggle parent submenu open/close when clicking its title
+    if (parentKeys.has(key)) {
+      setOpenKeys(prev => (prev.includes(key) ? [] : [key]));
+      setSelectedKey(key);
+      return;
     }
-    navigate(e.key);
+    const parentKey = childToParentKey.get(key);
+    if (parentKey) setOpenKeys([parentKey]);
+    if (!key.includes('external')) setOpenKeys([]);
+    navigate(key);
   };
-  const onOpenChange = (openKeys: string[]) => {
-    setOpenKeys([openKeys.pop() || '']);
+  const onOpenChange = (nextOpenKeys: string[]) => {
+    // Keep at most one submenu open; allow closing to none
+    if (nextOpenKeys.length === 0) {
+      setOpenKeys([]);
+      return;
+    }
+    setOpenKeys([nextOpenKeys[nextOpenKeys.length - 1]]);
   };
   return (
@@ -46,8 +137,9 @@ export const Navigation: React.FC = () => {
       <Menu
         mode="inline"
         selectedKeys={[selectedKey]}
-        items={[...items, ...fullpageItems, ...pluginItems, ...itemsBottom]}
+        items={navigationItems}
         onClick={onClick}
+        triggerSubMenuAction="click"
         theme="dark"
         openKeys={openKeys}
         onOpenChange={onOpenChange}

package/src/components/PageHeading.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Flex, Space, Typography } from 'antd';
+import { Flex, Paragraph, Space, Title } from '@akinon/ui-react';
 import * as React from 'react';
 export interface PageHeadingProps {
@@ -45,14 +45,10 @@ export const PageHeading = ({
       }}
     >
       <Space direction="vertical" size={4}>
-        <Typography.Title level={4} style={{ margin: 0 }}>
+        <Title level={4} style={{ margin: 0 }}>
           {title}
-        </Typography.Title>
-        {description && (
-          <Typography.Paragraph type="secondary">
-            {description}
-          </Typography.Paragraph>
-        )}
+        </Title>
+        {description && <Paragraph type="secondary">{description}</Paragraph>}
       </Space>
       {actions && <Space>{actions}</Space>}

package/src/components/PluginTestPage.tsx CHANGED Viewed

@@ -66,7 +66,7 @@ export const PluginTestPage: React.FC = () => {
         <PageContent>
           {pluginPlaceholders.length > 0 ? (
             <Row gutter={[20, 20]}>
-              {pluginPlaceholders.map((placeholderId, index) => (
+              {pluginPlaceholders.map(placeholderId => (
                 <Col span={12} key={placeholderId}>
                   <div
                     className="plugin-placeholder"

package/src/components/WelcomePage.tsx CHANGED Viewed

@@ -41,10 +41,10 @@ const SharedDataDisplay: React.FC<{ data: Record<string, unknown> }> = ({
 export const WelcomePage: React.FC = () => {
   const { apps } = useAppShell();
-  const config: ShellConfig = (
-    window as unknown as { __SHELL_CONFIG__?: ShellConfig }
-  ).__SHELL_CONFIG__ as ShellConfig;
+  const config: ShellConfig =
+    ((window as unknown as { __SHELL_CONFIG__?: ShellConfig })
+      .__SHELL_CONFIG__ as ShellConfig) || {};
   const data = config.data;
   return (
@@ -53,12 +53,18 @@ export const WelcomePage: React.FC = () => {
         {apps.length === 0 ? (
           <p style={{ color: '#999' }}>No applications configured</p>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}
+          >
             {apps.map((app, index) => (
-              <div key={app.id} style={{
-                borderBottom: index < apps.length - 1 ? '1px solid #e0e0e0' : 'none',
-                paddingBottom: index < apps.length - 1 ? '20px' : '0'
-              }}>
+              <div
+                key={app.id}
+                style={{
+                  borderBottom:
+                    index < apps.length - 1 ? '1px solid #e0e0e0' : 'none',
+                  paddingBottom: index < apps.length - 1 ? '20px' : '0'
+                }}
+              >
                 <h4 style={{ margin: '0 0 16px 0' }}>
                   {app.name} {apps.length > 1 && `(App ${index + 1})`}
                 </h4>
@@ -96,7 +102,7 @@ export const WelcomePage: React.FC = () => {
             <div style={{ marginTop: '10px' }}>
               <strong>Shell Theme:</strong>
               <p style={{ margin: '12px 0 4px 0', color: '#999' }}>
-                {config.shell.theme}
+                {config?.shell?.theme}
               </p>
             </div>
           </div>
@@ -112,8 +118,11 @@ export const WelcomePage: React.FC = () => {
           <h4 style={{ margin: '0 0 8px 0' }}>Getting Started:</h4>
           <ol style={{ paddingLeft: '20px' }}>
             <li>
-              Make sure your application{apps.length > 1 ? 's are' : ' is'} running at{' '}
-              <code>{apps.length > 0 ? apps[0].url : 'http://localhost:4001'}</code>
+              Make sure your application{apps.length > 1 ? 's are' : ' is'}{' '}
+              running at{' '}
+              <code>
+                {apps.length > 0 ? apps[0].url : 'http://localhost:4001'}
+              </code>
               {apps.length > 1 && (
                 <>
                   {' and '}
@@ -154,15 +163,15 @@ export const WelcomePage: React.FC = () => {
           </h4>
           {apps.some(a => a.type === 'full_page') && (
             <p style={{ margin: 0, color: '#666' }}>
-              Full page applications render as complete pages within the
-              shell environment, providing full control over the content area
-              and routing.
+              Full page applications render as complete pages within the shell
+              environment, providing full control over the content area and
+              routing.
             </p>
           )}
           {apps.some(a => a.type === 'plugin') && (
             <p style={{ margin: '8px 0 0 0', color: '#666' }}>
-              Plugin applications render within designated placeholders
-              in the host application, providing component-level integration
+              Plugin applications render within designated placeholders in the
+              host application, providing component-level integration
               capabilities.
             </p>
           )}

package/src/main.tsx CHANGED Viewed

@@ -12,12 +12,14 @@ import type { ShellConfig } from './types';
 const config: ShellConfig = (
   window as unknown as { __SHELL_CONFIG__?: ShellConfig }
 ).__SHELL_CONFIG__ || {
-  plugin: {
-    url: 'http://localhost:4001',
-    path: './src',
-    name: 'Development App',
-    type: 'fullpage'
-  },
+  apps: [
+    {
+      url: 'http://localhost:4001',
+      path: './src',
+      name: 'Development App',
+      type: 'full_page'
+    }
+  ],
   shell: {
     port: 4000,
     theme: 'omnitron',

package/src/pages/External.tsx CHANGED Viewed

@@ -2,14 +2,28 @@ import './pages.scss';
 import { AppRenderer } from '@akinon/app-shell';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 export const PageExternal: React.FC<{ id: number; path?: string }> = ({
   id,
   path
 }) => {
+  const location = useLocation();
+  // Compute splat (unmatched) path after the configured base `path`.
+  // Example: base "/keywords" and current pathname "/external/app/keywords/5/edit" -> splat "/5/edit".
+  const basePath = path ?? '';
+  const pathname = location.pathname;
+  const indexOfBase = pathname.indexOf(basePath);
+  const splat =
+    indexOfBase >= 0 ? pathname.slice(indexOfBase + basePath.length) : '';
+  const resolvedPath = `${basePath}${splat}` || undefined;
+  const resolvedPathWithQuery = resolvedPath
+    ? `${resolvedPath}${location.search ?? ''}${location.hash ?? ''}`
+    : undefined;
   return (
     <div className="page-plugin-external">
-      <AppRenderer id={id} path={path} />
+      <AppRenderer id={id} path={resolvedPathWithQuery} />
     </div>
   );
 };

package/src/providers.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
   }));
   const navigation: ShellNavigation = {
-    navigate: ({ id, path, external }: any) => {
+    navigate: ({ id, path, external }) => {
       const app = apps.find(app => app.id === id);
       if (!app) return;
@@ -82,7 +82,9 @@ export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
           'logMessages',
           JSON.stringify([...prevItems, newItem])
         );
-      } catch {}
+      } catch {
+        console.error('Failed to log message');
+      }
     }
   };

package/src/routes.tsx CHANGED Viewed

@@ -16,12 +16,16 @@ export const Routes = () => {
         <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) => {
+          {(
+            configs.get(app.id) as
+              | { menu?: Array<{ path: string }> }
+              | undefined
+          )?.menu?.map((sub: { path: string }) => {
             return (
               sub.path !== '/' && (
                 <Route
                   key={sub.path}
-                  path={`/external/${app.slug}${sub.path}`}
+                  path={`/external/${app.slug}${sub.path}/*`}
                   element={
                     <PageExternal
                       id={app.id}

package/src/server/dev-server.mjs CHANGED Viewed

@@ -143,7 +143,9 @@ export class ShellDevServer {
         if (this.config.apps && this.config.apps.length > 0) {
           console.log(`📱 Applications configured:`);
           this.config.apps.forEach((app, index) => {
-            console.log(`   ${index + 1}. ${app.name} (${app.type}) at ${app.url}`);
+            console.log(
+              `   ${index + 1}. ${app.name} (${app.type}) at ${app.url}`
+            );
           });
         }
         console.log(`🎨 Theme: ${this.config.shell.theme}`);
@@ -193,29 +195,29 @@ export class ShellDevServer {
     // Apps health check endpoint (for development)
     this.app.get('/api/apps/health', async (req, res) => {
       const results = [];
       if (this.config.apps && this.config.apps.length > 0) {
         for (const app of this.config.apps) {
           try {
             const response = await fetch(`${app.url}/api/health`);
             const data = await response.json();
-            results.push({
-              name: app.name,
-              url: app.url,
-              status: 'ok',
-              data
+            results.push({
+              name: app.name,
+              url: app.url,
+              status: 'ok',
+              data
             });
           } catch (error) {
-            results.push({
-              name: app.name,
-              url: app.url,
-              status: 'error',
-              error: error.message
+            results.push({
+              name: app.name,
+              url: app.url,
+              status: 'error',
+              error: error.message
             });
           }
         }
       }
       res.json({ apps: results, shell: { status: 'ok' } });
     });
   }

package/src/server/dev-server.ts CHANGED Viewed

@@ -90,7 +90,9 @@ export class ShellDevServer {
         if (this.config.apps && this.config.apps.length > 0) {
           console.log(`📱 Applications configured:`);
           this.config.apps.forEach((app, index) => {
-            console.log(`   ${index + 1}. ${app.name} (${app.type}) at ${app.url}`);
+            console.log(
+              `   ${index + 1}. ${app.name} (${app.type}) at ${app.url}`
+            );
           });
         }
         console.log(`🎨 Theme: ${this.config.shell.theme}`);
@@ -132,29 +134,29 @@ export class ShellDevServer {
     // Apps health check endpoint (for development)
     this.app.get('/api/apps/health', async (req, res) => {
       const results = [];
       if (this.config.apps && this.config.apps.length > 0) {
         for (const app of this.config.apps) {
           try {
             const response = await fetch(`${app.url}/api/health`);
             const data = await response.json();
-            results.push({
-              name: app.name,
-              url: app.url,
-              status: 'ok',
-              data
+            results.push({
+              name: app.name,
+              url: app.url,
+              status: 'ok',
+              data
             });
           } catch (error) {
-            results.push({
-              name: app.name,
-              url: app.url,
-              status: 'error',
-              error: error.message
+            results.push({
+              name: app.name,
+              url: app.url,
+              status: 'error',
+              error: error.message
             });
           }
         }
       }
       res.json({ apps: results, shell: { status: 'ok' } });
     });
   }

package/src/types.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export interface ShellConfig {
   sidebar?: {
     items: SidebarItem[];
   };
-  data?: Record<string, any>;
+  data?: Record<string, unknown>;
 }
 export interface SidebarItem {

package/src/utils/navigation.tsx CHANGED Viewed

@@ -54,7 +54,7 @@ export const getStaticNavigationItemsBottom = () => {
 export const getFullpageNavigationItems = (
   apps: RegisteredApp[],
-  configs: Map<number, any>
+  configs: Map<number, unknown>
 ): TMenuItemType[] => {
   return apps
     .filter(app => app.type === 'full_page')
@@ -63,18 +63,26 @@ export const getFullpageNavigationItems = (
         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;
+        children: (
+          configs.get(app.id) as {
+            menu: TMenuItemType[];
+          }
+        )?.menu
+          ?.map((sub: unknown): TMenuItemType | false => {
+            const { child, path, label } = sub as {
+              child: unknown;
+              path: string;
+              label: string;
+            };
+            if (child) return false;
             return {
-              key: `/external/${app.slug}${sub.path}`,
-              label: sub.label,
+              key: `/external/${app.slug}${path}`,
+              label: label,
               icon: 'eksi'
             };
           })
-          .filter(Boolean)
+          .filter(Boolean) as TMenuItemType[]
       };
     });
 };