@akinon/ui-shell-dev 1.0.0 → 1.1.0

package/src/components/WelcomePage.tsx

@@ -0,0 +1,114 @@
+import { Button, Card } from '@akinon/ui-react';
+import React from 'react';
+
+import type { ShellConfig } from '../types';
+
+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>
+            <strong>Application Name:</strong>
+            <p style={{ margin: '4px 0', color: '#666' }}>{config.plugin.name}</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>
+          </div>
+          <div>
+            <strong>Development URL:</strong>
+            <p style={{ margin: '4px 0', color: '#666', fontFamily: 'monospace' }}>
+              {config.plugin.url}
+            </p>
+          </div>
+          <div>
+            <strong>Shell Theme:</strong>
+            <p style={{ margin: '4px 0', color: '#666' }}>{config.shell.theme}</p>
+          </div>
+        </div>
+      </Card>
+
+      <Card 
+        title="Quick Actions" 
+        style={{ marginBottom: '24px' }}
+        styles={{ header: { backgroundColor: '#fafafa' } }}
+      >
+        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+          <Button type="primary" size="large" onClick={() => onNavigate('app')}>
+            Launch Application
+          </Button>
+          {config.plugin.type === 'plugin' && (
+            <Button size="large" onClick={() => onNavigate('plugin-test')}>
+              Test Plugin Integration
+            </Button>
+          )}
+          <Button size="large">
+            View Documentation
+          </Button>
+        </div>
+      </Card>
+
+      <Card 
+        title="Development Instructions" 
+        styles={{ header: { backgroundColor: '#fafafa' } }}
+      >
+        <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>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' ? (
+            <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,46 @@
+.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%;
+    }
+  }
+}
+
+/* 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/shell-app.tsx

@@ -1,4 +1,4 @@
-import { AkinonUiProvider } from '@akinon/ui-system';
+import { AkinonUiProvider } from '@akinon/ui-react';
 import React from 'react';
 
 import { AppLayout } from './components/AppLayout';

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