@akinon/ui-shell-dev 1.1.0 → 1.3.0

package/src/components/PluginTestPage.tsx

@@ -1,223 +1,105 @@
-import { Button, Card } from '@akinon/ui-react';
-import React, { useState } from 'react';
+import './PluginTestPage.scss';
 
-import type { ShellConfig } from '../types';
-import { PluginLoader } from './PluginLoader';
+import type {
+  FullpageApplicationConfig,
+  PluginApplicationConfig
+} from '@akinon/app-shell';
+import { PluginRenderer, useAppShell } from '@akinon/app-shell';
+import { Breadcrumb, Col, PageHeading, Row } from '@akinon/ui-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
-interface PluginTestPageProps {
-  config: ShellConfig;
-  onNavigate: (view: 'welcome' | 'app' | 'plugin-test') => void;
-}
+import { PageContent } from './PageContent';
 
-type PlaceholderType = 'sidebar' | 'header' | 'content' | 'modal' | 'drawer';
+export const PluginTestPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { apps, configs } = useAppShell();
 
-const placeholderConfigs = {
-  sidebar: {
-    name: 'Sidebar Plugin',
-    description: 'Plugin rendered in sidebar area',
-    dimensions: '300px × 100%',
-    containerStyle: { 
-      width: '300px', 
-      height: '400px', 
-      border: '2px dashed #1890ff',
-      borderRadius: '4px',
-      backgroundColor: '#f0f8ff'
-    }
-  },
-  header: {
-    name: 'Header Plugin',
-    description: 'Plugin rendered in header area',
-    dimensions: '100% × 60px',
-    containerStyle: { 
-      width: '100%', 
-      height: '60px', 
-      border: '2px dashed #52c41a',
-      borderRadius: '4px',
-      backgroundColor: '#f6ffed'
-    }
-  },
-  content: {
-    name: 'Content Plugin',
-    description: 'Plugin rendered in main content area',
-    dimensions: '100% × 400px',
-    containerStyle: { 
-      width: '100%', 
-      height: '400px', 
-      border: '2px dashed #722ed1',
-      borderRadius: '4px',
-      backgroundColor: '#f9f0ff'
-    }
-  },
-  modal: {
-    name: 'Modal Plugin',
-    description: 'Plugin rendered in modal overlay',
-    dimensions: '600px × 400px',
-    containerStyle: { 
-      width: '600px', 
-      height: '400px', 
-      border: '2px dashed #fa541c',
-      borderRadius: '4px',
-      backgroundColor: '#fff7e6'
-    }
-  },
-  drawer: {
-    name: 'Drawer Plugin',
-    description: 'Plugin rendered in drawer panel',
-    dimensions: '400px × 100%',
-    containerStyle: { 
-      width: '400px', 
-      height: '300px', 
-      border: '2px dashed #eb2f96',
-      borderRadius: '4px',
-      backgroundColor: '#fff0f6'
-    }
-  }
-};
+  const getPluginUrl = (placeholderId: string) => {
+    let appId: null | number = null;
 
-export const PluginTestPage: React.FC<PluginTestPageProps> = ({ config, onNavigate }) => {
-  const [selectedPlaceholder, setSelectedPlaceholder] = useState<PlaceholderType>('content');
-  const [isPluginVisible, setIsPluginVisible] = useState(false);
+    Array.from(configs.entries()).forEach(
+      ([key, value]: [
+        number,
+        FullpageApplicationConfig | PluginApplicationConfig
+      ]) => {
+        if ('placeholderId' in value && value.placeholderId === placeholderId) {
+          appId = key;
+          return;
+        }
+      }
+    );
 
-  const currentConfig = placeholderConfigs[selectedPlaceholder];
+    if (appId === null) return '';
+
+    const { url, subSlug } = apps.find(({ id }) => id === appId) || {};
+    return url ? `[ ${url}${subSlug ?? ''} ]` : '';
+  };
+
+  // Get all plugin placeholders from configs
+  const pluginPlaceholders: string[] = [];
+  Array.from(configs.entries()).forEach(([, config]) => {
+    if ('placeholderId' in config) {
+      pluginPlaceholders.push(
+        (config as PluginApplicationConfig).placeholderId
+      );
+    }
+  });
 
   return (
-    <div style={{ padding: '24px' }}>
-      <div style={{ marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '16px' }}>
-        <Button onClick={() => onNavigate('welcome')}>← Back to Welcome</Button>
-        <h2 style={{ margin: 0 }}>Plugin Integration Test</h2>
+    <div className="page-plugin-basic">
+      <Breadcrumb
+        items={[
+          {
+            onClick: () => navigate('/'),
+            title: 'Dashboard'
+          },
+          {
+            title: 'Plugin Test'
+          }
+        ]}
+      />
+      <div className="page-heading-container">
+        <PageHeading title="Plugin Test" />
       </div>
-
-      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '24px' }}>
-        <Card title="Test Configuration" size="small">
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
-              Placeholder Type:
-            </label>
-            <select
-              value={selectedPlaceholder}
-              onChange={(e) => setSelectedPlaceholder(e.target.value as PlaceholderType)}
+      <div className="page-content-container">
+        <PageContent>
+          {pluginPlaceholders.length > 0 ? (
+            <Row gutter={[20, 20]}>
+              {pluginPlaceholders.map((placeholderId, index) => (
+                <Col span={12} key={placeholderId}>
+                  <div
+                    className="plugin-placeholder"
+                    data-title={`${placeholderId} ${getPluginUrl(placeholderId)}`}
+                  >
+                    <PluginRenderer placeholderId={placeholderId} />
+                  </div>
+                </Col>
+              ))}
+            </Row>
+          ) : (
+            <div
               style={{
-                width: '100%',
-                padding: '8px 12px',
-                border: '1px solid #d9d9d9',
-                borderRadius: '6px',
-                fontSize: '14px',
-                backgroundColor: 'white'
+                textAlign: 'center',
+                padding: '48px',
+                border: '1px dashed #d9d9d9',
+                borderRadius: '8px',
+                backgroundColor: '#fafafa'
               }}
             >
-              {Object.entries(placeholderConfigs).map(([key, config]) => (
-                <option key={key} value={key}>
-                  {config.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
-              Plugin Status:
-            </label>
-            <span style={{
-              padding: '4px 8px',
-              borderRadius: '4px',
-              fontSize: '12px',
-              backgroundColor: isPluginVisible ? '#f6ffed' : '#f5f5f5',
-              color: isPluginVisible ? '#52c41a' : '#666',
-              border: `1px solid ${isPluginVisible ? '#b7eb8f' : '#d9d9d9'}`
-            }}>
-              {isPluginVisible ? 'Visible' : 'Hidden'}
-            </span>
-          </div>
-
-          <div style={{ marginBottom: '16px' }}>
-            <Button 
-              type="primary" 
-              block 
-              onClick={() => setIsPluginVisible(!isPluginVisible)}
-            >
-              {isPluginVisible ? 'Hide Plugin' : 'Show Plugin'}
-            </Button>
-          </div>
-
-          <div style={{ fontSize: '12px', color: '#666' }}>
-            <p><strong>Dimensions:</strong> {currentConfig.dimensions}</p>
-            <p><strong>Description:</strong> {currentConfig.description}</p>
-          </div>
-        </Card>
-
-        <Card title={`${currentConfig.name} Preview`} size="small">
-          <div style={{ 
-            padding: '24px', 
-            backgroundColor: '#fafafa', 
-            borderRadius: '4px',
-            minHeight: '500px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}>
-            <div style={currentConfig.containerStyle}>
-              {isPluginVisible ? (
-                <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-                  <div style={{
-                    position: 'absolute',
-                    top: '8px',
-                    left: '8px',
-                    right: '8px',
-                    backgroundColor: 'rgba(0,0,0,0.7)',
-                    color: 'white',
-                    padding: '4px 8px',
-                    borderRadius: '2px',
-                    fontSize: '10px',
-                    zIndex: 10
-                  }}>
-                    Plugin: {config.plugin.name} ({selectedPlaceholder})
-                  </div>
-                  <PluginLoader config={config} />
-                </div>
-              ) : (
-                <div style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  height: '100%',
-                  color: '#999',
-                  textAlign: 'center'
-                }}>
-                  <div style={{ fontSize: '48px', marginBottom: '8px' }}>📦</div>
-                  <p style={{ margin: 0, fontSize: '14px' }}>
-                    {currentConfig.name} Placeholder
-                  </p>
-                  <p style={{ margin: '4px 0 0 0', fontSize: '12px' }}>
-                    Click "Show Plugin" to load
-                  </p>
-                </div>
-              )}
+              <h3>No Plugin Configurations Found</h3>
+              <p>
+                No plugin applications with placeholder configurations were
+                found.
+              </p>
+              <p>
+                Make sure your shell configuration includes plugin apps with
+                placeholder IDs.
+              </p>
             </div>
-          </div>
-        </Card>
+          )}
+        </PageContent>
       </div>
-
-      <Card 
-        title="Integration Notes" 
-        style={{ marginTop: '24px' }}
-        size="small"
-      >
-        <div style={{ fontSize: '14px', lineHeight: '1.5' }}>
-          <p>
-            This test environment simulates how your plugin will appear in different 
-            placeholder configurations within host applications. Each placeholder type 
-            represents a different integration scenario:
-          </p>
-          <ul>
-            <li><strong>Sidebar:</strong> Narrow vertical space, typically for navigation or quick actions</li>
-            <li><strong>Header:</strong> Horizontal space at top, usually for search or user controls</li>
-            <li><strong>Content:</strong> Main content area with full width and flexible height</li>
-            <li><strong>Modal:</strong> Overlay dialog for focused interactions</li>
-            <li><strong>Drawer:</strong> Slide-out panel for secondary content or forms</li>
-          </ul>
-        </div>
-      </Card>
     </div>
   );
-};
+};

package/src/components/WelcomePage.tsx

@@ -1,114 +1,117 @@
-import { Button, Card } from '@akinon/ui-react';
+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';
 
-import type { ShellConfig } from '../types';
+export const WelcomePage: React.FC = () => {
+  const navigate = useNavigate();
+  const { apps } = useAppShell();
+  const app = apps[0]; // Get the first (and likely only) app
 
-interface WelcomePageProps {
-  config: ShellConfig;
-  onNavigate: (view: 'welcome' | 'app' | 'plugin-test') => void;
-}
-
-export const WelcomePage: React.FC<WelcomePageProps> = ({ config, onNavigate }) => {
   return (
-    <div style={{ padding: '32px', maxWidth: '800px', margin: '0 auto' }}>
-      <div style={{ textAlign: 'center', marginBottom: '32px' }}>
-        <h1 style={{ fontSize: '32px', margin: '0 0 8px 0', color: '#262626' }}>
-          Welcome to Akinon UI Protocol Shell
-        </h1>
-        <p style={{ fontSize: '16px', color: '#666', margin: 0 }}>
-          Development environment for testing and integrating your applications
-        </p>
-      </div>
-
-      <Card 
-        title="Application Configuration" 
-        style={{ marginBottom: '24px' }}
-        styles={{ header: { backgroundColor: '#fafafa' } }}
-      >
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+    <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: '4px 0', color: '#666' }}>{config.plugin.name}</p>
+            <p style={{ margin: '12px 0 4px 0' }}>
+              {app?.name || 'Development App'}
+            </p>
           </div>
           <div>
             <strong>Application Type:</strong>
-            <p style={{ margin: '4px 0', color: '#666' }}>
-              <span style={{
-                padding: '2px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                backgroundColor: config.plugin.type === 'fullpage' ? '#e6f7ff' : '#f6ffed',
-                color: config.plugin.type === 'fullpage' ? '#1890ff' : '#52c41a',
-                border: `1px solid ${config.plugin.type === 'fullpage' ? '#91d5ff' : '#b7eb8f'}`
-              }}>
-                {config.plugin.type}
-              </span>
+            <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: '4px 0', color: '#666', fontFamily: 'monospace' }}>
-              {config.plugin.url}
+            <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: '4px 0', color: '#666' }}>{config.shell.theme}</p>
+            <p style={{ margin: '12px 0 4px 0', color: '#999' }}>omnitron</p>
           </div>
         </div>
       </Card>
 
-      <Card 
-        title="Quick Actions" 
-        style={{ marginBottom: '24px' }}
-        styles={{ header: { backgroundColor: '#fafafa' } }}
-      >
+      <Card title="Quick Actions" style={{ marginBottom: '24px' }}>
         <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
-          <Button type="primary" size="large" onClick={() => onNavigate('app')}>
+          <Button
+            type="primary"
+            onClick={() => navigate(`/external/${app?.slug}`)}
+          >
             Launch Application
           </Button>
-          {config.plugin.type === 'plugin' && (
-            <Button size="large" onClick={() => onNavigate('plugin-test')}>
+          {app?.type === 'plugin' && (
+            <Button onClick={() => navigate('/plugin-test')}>
               Test Plugin Integration
             </Button>
           )}
-          <Button size="large">
-            View Documentation
-          </Button>
         </div>
       </Card>
 
-      <Card 
-        title="Development Instructions" 
-        styles={{ header: { backgroundColor: '#fafafa' } }}
-      >
+      <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>{config.plugin.url}</code></li>
-            <li>Click "Launch Application" to load your app in the shell environment</li>
-            {config.plugin.type === 'plugin' && (
-              <li>Use "Test Plugin Integration" to test your plugin in different placeholder configurations</li>
+            <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>
+            <li>
+              The shell provides a realistic integration environment for testing
+            </li>
           </ol>
-          
-          <hr style={{ margin: '16px 0', border: 'none', borderTop: '1px solid #f0f0f0' }} />
-          
-          <h4 style={{ margin: '16px 0 8px 0' }}>Application Type: {config.plugin.type}</h4>
-          {config.plugin.type === 'fullpage' ? (
+
+          <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.
+              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.
+              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

@@ -1,3 +1,29 @@
+.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;
@@ -20,27 +46,3 @@
     }
   }
 }
-
-/* Utility classes for header */
-.flex {
-  display: flex;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-/* Utility classes for content padding */
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}

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