@akinon/ui-shell-dev 1.3.5 → 1.4.0

package/src/components/WelcomePage.tsx

@@ -1,86 +1,145 @@
 import { useAppShell } from '@akinon/app-shell';
-import { Button, Card, Divider, Tag } from '@akinon/ui-react';
+import { Card, Divider, Tag } from '@akinon/ui-react';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+
+import { ShellConfig } from '@/types';
+
+// Component to display shared data from shell config
+const SharedDataDisplay: React.FC<{ data: Record<string, unknown> }> = ({
+  data
+}) => {
+  // Filter out default fields to show only custom data from config
+  const customData = { ...data };
+  delete customData.lng;
+  delete customData.username;
+  delete customData.searchParams;
+
+  return (
+    <pre
+      style={{
+        backgroundColor: '#1e1e1e',
+        color: '#d4d4d4',
+        padding: '16px',
+        borderRadius: '6px',
+        border: '1px solid #424b6b',
+        fontSize: '13px',
+        fontFamily:
+          '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace',
+        lineHeight: '1.5',
+        overflow: 'auto',
+        margin: 0,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word'
+      }}
+    >
+      {Object.keys(customData).length > 0
+        ? JSON.stringify(customData, null, 2)
+        : '// No custom data configured in shell.config.js\n// Add data to the "data" field to share it with your application'}
+    </pre>
+  );
+};
 
 export const WelcomePage: React.FC = () => {
-  const navigate = useNavigate();
   const { apps } = useAppShell();
-  const app = apps[0]; // Get the first (and likely only) app
+
+  const config: ShellConfig =
+    ((window as unknown as { __SHELL_CONFIG__?: ShellConfig })
+      .__SHELL_CONFIG__ as ShellConfig) || {};
+  const data = config.data;
 
   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>
+      <Card title="Applications Configuration" className="mb-8">
+        {apps.length === 0 ? (
+          <p style={{ color: '#999' }}>No applications configured</p>
+        ) : (
+          <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'
+                }}
+              >
+                <h4 style={{ margin: '0 0 16px 0' }}>
+                  {app.name} {apps.length > 1 && `(App ${index + 1})`}
+                </h4>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: '16px'
+                  }}
+                >
+                  <div>
+                    <strong>Application Type:</strong>
+                    <p style={{ margin: '12px 0 4px 0' }}>
+                      <Tag color={app.type === 'full_page' ? 'blue' : 'green'}>
+                        {app.type === 'full_page' ? 'Full Page' : 'Plugin'}
+                      </Tag>
+                    </p>
+                  </div>
+                  <div>
+                    <strong>Development URL:</strong>
+                    <p
+                      style={{
+                        margin: '12px 0 4px 0',
+                        color: '#999',
+                        fontFamily: 'monospace',
+                        fontSize: '13px'
+                      }}
+                    >
+                      {app.url}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+            <div style={{ marginTop: '10px' }}>
+              <strong>Shell Theme:</strong>
+              <p style={{ margin: '12px 0 4px 0', color: '#999' }}>
+                {config?.shell?.theme}
+              </p>
+            </div>
           </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 title="Shared Data" className="mb-8">
+        {data && <SharedDataDisplay data={data} />}
       </Card>
 
-      <Card title="Development Instructions">
+      <Card title="Development Instructions" className="mb-8">
         <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>
+              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 '}
+                  {apps.slice(1).map((a, i) => (
+                    <span key={a.id}>
+                      {i > 0 && ', '}
+                      <code>{a.url}</code>
+                    </span>
+                  ))}
+                </>
+              )}
             </li>
             <li>
               Click &quot;Launch Application&quot; to load your app in the shell
               environment
             </li>
-            {app?.type === 'plugin' && (
+            {apps.some(a => a.type === 'plugin') && (
               <li>
                 Use &quot;Test Plugin Integration&quot; to test your plugin in
                 different placeholder configurations
@@ -94,24 +153,309 @@ export const WelcomePage: React.FC = () => {
           <Divider />
 
           <h4 style={{ margin: '16px 0 8px 0' }}>
-            Application Type:{' '}
-            {app?.type === 'full_page' ? 'fullpage' : 'plugin'}
+            Application Types:{' '}
+            {apps.map((a, i) => (
+              <span key={a.id}>
+                {i > 0 && ', '}
+                {a.type === 'full_page' ? 'Full Page' : 'Plugin'}
+              </span>
+            ))}
           </h4>
-          {app?.type === 'full_page' ? (
+          {apps.some(a => a.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.
+              Full page applications 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
+          )}
+          {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
               capabilities.
             </p>
           )}
         </div>
       </Card>
+
+      <Card title="Component Usage">
+        <div style={{ lineHeight: '1.6' }}>
+          <h4 style={{ margin: '0 0 8px 0' }}>@akinon/ui-* Components:</h4>
+          <p style={{ margin: '0 0 16px 0', color: '#999' }}>
+            This shell environment includes all Akinon UI components. You can
+            use them in your application by importing from the respective
+            packages.
+          </p>
+
+          <pre
+            style={{
+              backgroundColor: '#1e1e1e',
+              color: '#d4d4d4',
+              padding: '16px',
+              borderRadius: '6px',
+              border: '1px solid #424b6b',
+              fontSize: '13px',
+              fontFamily:
+                '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace',
+              lineHeight: '1.5',
+              overflow: 'auto',
+              margin: 0,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word'
+            }}
+          >
+            {`// Import components from @akinon/ui-react (main package)
+import { Button, Card, Input, Modal } from '@akinon/ui-react';
+
+// Or import from specific packages
+import { Button } from '@akinon/ui-button';
+import { Card } from '@akinon/ui-card';
+import { Input } from '@akinon/ui-input';
+import { Modal } from '@akinon/ui-modal';
+
+// Usage in your component
+function MyComponent() {
+  return (
+    <Card title="Example Card">
+      <Input placeholder="Enter text here" />
+      <Button type="primary">Submit</Button>
+    </Card>
+  );
+}`}
+          </pre>
+
+          <h3 style={{ margin: '16px 0 8px 0' }}>Available Components:</h3>
+
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>
+            Data Display
+          </h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Avatar', pkg: '@akinon/ui-avatar' },
+              { name: 'Badge', pkg: '@akinon/ui-badge' },
+              { name: 'Carousel', pkg: '@akinon/ui-carousel' },
+              { name: 'Image', pkg: '@akinon/ui-image' },
+              { name: 'List', pkg: '@akinon/ui-list' },
+              { name: 'Popover', pkg: '@akinon/ui-popover' },
+              { name: 'Table', pkg: '@akinon/ui-table' },
+              { name: 'Tag', pkg: '@akinon/ui-tag' },
+              { name: 'Tooltip', pkg: '@akinon/ui-tooltip' },
+              { name: 'Tree', pkg: '@akinon/ui-tree' },
+              { name: 'Typography', pkg: '@akinon/ui-typography' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>
+            Feedback
+          </h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Alert', pkg: '@akinon/ui-alert' },
+              { name: 'Drawer', pkg: '@akinon/ui-drawer' },
+              { name: 'Message', pkg: '@akinon/ui-message' },
+              { name: 'Modal', pkg: '@akinon/ui-modal' },
+              { name: 'Notification', pkg: '@akinon/ui-notification' },
+              { name: 'Progress', pkg: '@akinon/ui-progress' },
+              { name: 'Result', pkg: '@akinon/ui-result' },
+              { name: 'Skeleton', pkg: '@akinon/ui-skeleton' },
+              { name: 'Spin', pkg: '@akinon/ui-spin' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>Form</h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'AutoComplete', pkg: '@akinon/ui-auto-complete' },
+              { name: 'Button', pkg: '@akinon/ui-button' },
+              { name: 'Checkbox', pkg: '@akinon/ui-checkbox' },
+              { name: 'ColorPicker', pkg: '@akinon/ui-color-picker' },
+              { name: 'DatePicker', pkg: '@akinon/ui-date-picker' },
+              { name: 'Input', pkg: '@akinon/ui-input' },
+              { name: 'InputNumber', pkg: '@akinon/ui-input-number' },
+              { name: 'Radio', pkg: '@akinon/ui-radio' },
+              { name: 'Select', pkg: '@akinon/ui-select' },
+              { name: 'Slider', pkg: '@akinon/ui-slider' },
+              { name: 'Switch', pkg: '@akinon/ui-switch' },
+              { name: 'TimePicker', pkg: '@akinon/ui-time-picker' },
+              { name: 'Transfer', pkg: '@akinon/ui-transfer' },
+              { name: 'TreeSelect', pkg: '@akinon/ui-tree-select' },
+              { name: 'Upload', pkg: '@akinon/ui-upload' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>Layout</h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Card', pkg: '@akinon/ui-card' },
+              { name: 'Collapse', pkg: '@akinon/ui-collapse' },
+              { name: 'Divider', pkg: '@akinon/ui-divider' },
+              { name: 'Layout', pkg: '@akinon/ui-layout' },
+              { name: 'Space', pkg: '@akinon/ui-space' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>
+            Navigation
+          </h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Breadcrumb', pkg: '@akinon/ui-breadcrumb' },
+              { name: 'Dropdown', pkg: '@akinon/ui-dropdown' },
+              { name: 'Menu', pkg: '@akinon/ui-menu' },
+              { name: 'Pagination', pkg: '@akinon/ui-pagination' },
+              { name: 'Segmented', pkg: '@akinon/ui-segmented' },
+              { name: 'Steps', pkg: '@akinon/ui-steps' },
+              { name: 'Tour', pkg: '@akinon/ui-tour' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+
+          <p style={{ margin: '0', color: '#999', fontSize: '14px' }}>
+            <strong>Note:</strong> All components follow Ant Design API
+            conventions with Akinon-specific styling and theming. Check the
+            Storybook documentation for detailed usage examples and props.
+          </p>
+        </div>
+      </Card>
     </div>
   );
 };

package/src/main.tsx

@@ -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/providers.tsx

@@ -17,19 +17,17 @@ export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
   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 apps: RegisteredApp[] = config.apps.map((app, index) => ({
+    id: index + 1,
+    url: app.url,
+    slug: app.name.toLowerCase().replace(/\s+/g, '-'),
+    path: '', // Empty path for development like playground
+    type: app.type,
+    name: app.navTitle || app.name // Use navTitle if provided, otherwise use name
+  }));
 
   const navigation: ShellNavigation = {
-    navigate: ({ id, path, external }: any) => {
+    navigate: ({ id, path, external }) => {
       const app = apps.find(app => app.id === id);
       if (!app) return;
 
@@ -41,7 +39,8 @@ export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
   const data = {
     lng: 'en',
     username: 'Developer',
-    searchParams: Object.fromEntries([...searchParams])
+    searchParams: Object.fromEntries([...searchParams]),
+    ...(config.data || {})
   };
 
   const defaultActions = {
@@ -83,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

@@ -16,24 +16,25 @@ 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) => {
-            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
-                      }
-                    />
-                  }
-                />
-              )
-            );
-          })}
+          {(configs.get(app.id) as unknown as { menu: unknown[] })?.menu?.map(
+            sub => {
+              const { path } = sub as { path: string };
+              return (
+                path !== '/' && (
+                  <Route
+                    key={path}
+                    path={`/external/${app.slug}${path}`}
+                    element={
+                      <PageExternal
+                        id={app.id}
+                        path={app.subSlug ? `${app.subSlug}${path}` : path}
+                      />
+                    }
+                  />
+                )
+              );
+            }
+          )}
         </Route>
       ))}