@herdingbits/trailhead-cloudscape 0.0.1

package/README.md

@@ -0,0 +1,37 @@
+# @herdingbits/trailhead-cloudscape
+
+CloudScape design system adapter for the Trailhead micro-frontend framework.
+
+## Installation
+
+```bash
+npm install @herdingbits/trailhead-core @herdingbits/trailhead-cloudscape @cloudscape-design/components @cloudscape-design/global-styles react react-dom
+```
+
+## Usage
+
+```typescript
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Trailhead } from '@herdingbits/trailhead-core';
+import { CloudScapeAdapter, ShellApp } from '@herdingbits/trailhead-cloudscape';
+import '@cloudscape-design/global-styles/index.css';
+import '@herdingbits/trailhead-cloudscape/shell.css';
+
+const shell = new Trailhead({
+  adapter: new CloudScapeAdapter(),
+  basePath: '/app',
+  apiUrl: 'https://api.example.com'
+});
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<ShellApp shell={shell} />);
+```
+
+## Documentation
+
+See the [main Trailhead documentation](https://github.com/herdingbits/trailhead) for more information.
+
+## License
+
+MIT

package/dist/adapter.d.ts

@@ -0,0 +1,13 @@
+/**
+ * CloudScape Design System Adapter
+ * Uses CloudScape Flashbar, Modal, and Spinner components
+ */
+import type { DesignSystemAdapter, FeedbackAdapter } from '@herdingbits/trailhead-types/adapters';
+export declare class CloudScapeAdapter implements DesignSystemAdapter {
+    name: string;
+    version: string;
+    feedback: FeedbackAdapter;
+    constructor();
+    init(basePath: string): Promise<void>;
+}
+//# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,MAAM,uCAAuC,CAAC;AAyE5I,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;;IAMpB,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAG5C"}

package/dist/adapter.js

@@ -0,0 +1,63 @@
+class CloudScapeFeedbackAdapter {
+    constructor() {
+        this.flashMessages = [];
+        this.busyMessage = '';
+    }
+    setFlashChangeHandler(handler) {
+        this.onFlashChange = handler;
+    }
+    setBusyChangeHandler(handler) {
+        this.onBusyChange = handler;
+    }
+    showBusy(message) {
+        this.busyMessage = message;
+        this.onBusyChange?.(message);
+    }
+    clearBusy() {
+        this.busyMessage = '';
+        this.onBusyChange?.('');
+    }
+    showToast(message, variant, duration = 3000) {
+        const id = `flash-${Date.now()}`;
+        const flash = {
+            id,
+            type: variant,
+            content: message,
+            dismissible: true,
+        };
+        this.flashMessages.push(flash);
+        this.onFlashChange?.([...this.flashMessages]);
+        if (duration > 0) {
+            setTimeout(() => {
+                this.flashMessages = this.flashMessages.filter(f => f.id !== id);
+                this.onFlashChange?.([...this.flashMessages]);
+            }, duration);
+        }
+    }
+    dismissFlash(id) {
+        this.flashMessages = this.flashMessages.filter(f => f.id !== id);
+        this.onFlashChange?.([...this.flashMessages]);
+    }
+    async showDialog(config) {
+        // Modal dialogs handled by React component
+        return new Promise((resolve) => {
+            const event = new CustomEvent('cloudscape-dialog', {
+                detail: { config, resolve }
+            });
+            window.dispatchEvent(event);
+        });
+    }
+    async initAdapter() {
+        // No initialization needed
+    }
+}
+export class CloudScapeAdapter {
+    constructor() {
+        this.name = 'cloudscape';
+        this.version = '3.0.0';
+        this.feedback = new CloudScapeFeedbackAdapter();
+    }
+    async init(basePath) {
+        // CloudScape styles loaded via global-styles package
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @herdingbits/trailhead-cloudscape
+ * CloudScape design system adapter for Trailhead
+ */
+export { CloudScapeAdapter } from './adapter.js';
+export { ShellApp } from './shell-app.js';
+export { ShellLayout } from './shell-layout.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+/**
+ * @herdingbits/trailhead-cloudscape
+ * CloudScape design system adapter for Trailhead
+ */
+export { CloudScapeAdapter } from './adapter.js';
+export { ShellApp } from './shell-app.js';
+export { ShellLayout } from './shell-layout.js';

package/dist/shell-app.d.ts

@@ -0,0 +1,7 @@
+import type { Trailhead } from '@herdingbits/trailhead-core';
+interface ShellAppProps {
+    shell: Trailhead;
+}
+export declare function ShellApp({ shell }: ShellAppProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shell-app.d.ts.map

package/dist/shell-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-app.d.ts","sourceRoot":"","sources":["../src/shell-app.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,UAAU,aAAa;IACrB,KAAK,EAAE,SAAS,CAAC;CAClB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CAyMhD"}

package/dist/shell-app.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import Flashbar from '@cloudscape-design/components/flashbar';
+import Spinner from '@cloudscape-design/components/spinner';
+import Modal from '@cloudscape-design/components/modal';
+import Box from '@cloudscape-design/components/box';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import Button from '@cloudscape-design/components/button';
+import { ShellLayout } from './shell-layout.js';
+export function ShellApp({ shell }) {
+    const [navigation, setNavigation] = useState([]);
+    const [flashMessages, setFlashMessages] = useState([]);
+    const [busyMessage, setBusyMessage] = useState('');
+    const [dialogState, setDialogState] = useState({
+        visible: false,
+        message: '',
+        buttons: []
+    });
+    const contentRef = useRef(null);
+    // Get current path without basePath
+    const getCurrentPath = () => {
+        let path = window.location.pathname;
+        if (shell.basePath && path.startsWith(shell.basePath)) {
+            path = path.substring(shell.basePath.length) || '/';
+        }
+        return path;
+    };
+    const [currentPath, setCurrentPath] = useState(getCurrentPath());
+    useEffect(() => {
+        // Connect adapter to React state
+        const adapter = shell.adapter.feedback;
+        adapter.setFlashChangeHandler(setFlashMessages);
+        adapter.setBusyChangeHandler(setBusyMessage);
+        // Listen for dialog events
+        const handleDialogEvent = (event) => {
+            const { config, resolve } = event.detail;
+            setDialogState({
+                visible: true,
+                title: config.title,
+                message: config.message,
+                buttons: config.buttons,
+                resolve
+            });
+        };
+        window.addEventListener('cloudscape-dialog', handleDialogEvent);
+        // Load navigation
+        fetch(`${shell.basePath}/navigation.json`)
+            .then(res => res.json())
+            .then(data => {
+            setNavigation(data);
+        })
+            .catch(err => console.error('Failed to load navigation:', err));
+        return () => {
+            window.removeEventListener('cloudscape-dialog', handleDialogEvent);
+        };
+    }, []);
+    useEffect(() => {
+        // Handle route when navigation is loaded
+        if (navigation.length > 0) {
+            handleRoute(currentPath);
+        }
+    }, [navigation, currentPath]);
+    const handleRoute = (path) => {
+        // Normalize path by removing trailing slash for matching
+        const normalizedPath = path.endsWith('/') && path !== '/' ? path.slice(0, -1) : path;
+        const route = navigation.find(item => item.path === normalizedPath);
+        if (route && contentRef.current) {
+            loadApp(route.app, route.path);
+        }
+    };
+    const loadApp = async (appName, appPath) => {
+        if (!contentRef.current)
+            return;
+        contentRef.current.innerHTML = '<div>Loading...</div>';
+        try {
+            const pluginUrl = `${shell.basePath}${appPath}/app.js`;
+            const pluginCss = `${shell.basePath}${appPath}/${appName}.css`;
+            // Load CSS
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = pluginCss;
+            document.head.appendChild(link);
+            // Load JS
+            const script = document.createElement("script");
+            script.src = pluginUrl;
+            script.type = "module";
+            script.onload = () => {
+                contentRef.current.innerHTML = "";
+                if (window.AppMount) {
+                    window.AppMount(contentRef.current);
+                }
+            };
+            script.onerror = () => {
+                contentRef.current.innerHTML = `<div>Failed to load application: ${appName}</div>`;
+            };
+            document.body.appendChild(script);
+        }
+        catch (error) {
+            console.error("Failed to load plugin:", error);
+            contentRef.current.innerHTML = '<div>Failed to load application</div>';
+        }
+    };
+    const handleNavigate = (path) => {
+        // Use full page reload for navigation (no server rewrites needed)
+        window.location.href = path;
+    };
+    const handleDialogButton = (value) => {
+        if (dialogState.resolve) {
+            dialogState.resolve({ value });
+        }
+        setDialogState({ ...dialogState, visible: false });
+    };
+    const handleDialogDismiss = () => {
+        if (dialogState.resolve) {
+            dialogState.resolve({ value: null });
+        }
+        setDialogState({ ...dialogState, visible: false });
+    };
+    return (_jsxs(_Fragment, { children: [flashMessages.length > 0 && (_jsx("div", { style: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9999 }, children: _jsx(Flashbar, { items: flashMessages.map(msg => ({
+                        type: msg.type,
+                        content: msg.content,
+                        dismissible: msg.dismissible,
+                        onDismiss: () => shell.adapter.feedback.dismissFlash(msg.id),
+                        id: msg.id,
+                    })) }) })), busyMessage && (_jsx("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: 'rgba(0, 0, 0, 0.5)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 10000,
+                }, children: _jsxs("div", { style: {
+                        background: 'white',
+                        padding: '24px',
+                        borderRadius: '8px',
+                        textAlign: 'center',
+                    }, children: [_jsx(Spinner, { size: "large" }), _jsx("div", { style: { marginTop: '16px' }, children: busyMessage })] }) })), _jsx(Modal, { visible: dialogState.visible, onDismiss: handleDialogDismiss, header: dialogState.title, footer: _jsx(Box, { float: "right", children: _jsx(SpaceBetween, { direction: "horizontal", size: "xs", children: dialogState.buttons.map((btn, idx) => (_jsx(Button, { variant: btn.variant === 'primary' ? 'primary' : 'normal', onClick: () => handleDialogButton(btn.value), children: btn.label }, idx))) }) }), children: dialogState.message }), _jsx(ShellLayout, { navigation: navigation, currentPath: currentPath, basePath: shell.basePath, onNavigate: handleNavigate, children: _jsx("div", { ref: contentRef }) })] }));
+}

package/dist/shell-layout.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface NavigationItem {
+    id: string;
+    label: string;
+    path: string;
+    icon?: string;
+}
+interface ShellLayoutProps {
+    navigation: NavigationItem[];
+    currentPath: string;
+    basePath: string;
+    onNavigate: (path: string) => void;
+    children: React.ReactNode;
+}
+export declare function ShellLayout({ navigation, currentPath, basePath, onNavigate, children }: ShellLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shell-layout.d.ts.map

package/dist/shell-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-layout.d.ts","sourceRoot":"","sources":["../src/shell-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAgB;IACxB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA2BxG"}

package/dist/shell-layout.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import AppLayout from '@cloudscape-design/components/app-layout';
+import SideNavigation from '@cloudscape-design/components/side-navigation';
+export function ShellLayout({ navigation, currentPath, basePath, onNavigate, children }) {
+    const [navigationOpen, setNavigationOpen] = useState(true);
+    const navItems = navigation.map(item => ({
+        type: 'link',
+        text: item.label,
+        href: basePath + item.path + '/', // Add trailing slash for directory routing
+    }));
+    return (_jsx(AppLayout, { navigationOpen: navigationOpen, onNavigationChange: ({ detail }) => setNavigationOpen(detail.open), navigation: _jsx(SideNavigation, { activeHref: currentPath, items: navItems, onFollow: (event) => {
+                event.preventDefault();
+                onNavigate(event.detail.href);
+            } }), content: children, toolsHide: true }));
+}

package/dist/shell.css

@@ -0,0 +1,154 @@
+/**
+ * CloudScape Shell Styles
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
+  background: #f2f3f3;
+  color: #000716;
+}
+
+/* Shell Layout */
+#shell-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 280px;
+  background: #232f3e;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+#shell-header {
+  padding: 20px;
+  border-bottom: 1px solid #414d5c;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#shell-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: white;
+}
+
+#shell-collapse {
+  background: transparent;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+#shell-collapse:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Navigation */
+#shell-navigation {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.shell-nav-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  color: #aab7b8;
+  text-decoration: none;
+  transition: all 0.2s;
+  border-left: 4px solid transparent;
+}
+
+.shell-nav-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: white;
+}
+
+.shell-nav-item-active {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border-left-color: #0972d3;
+}
+
+.shell-icon {
+  margin-right: 12px;
+  font-size: 18px;
+}
+
+.shell-nav-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Main Content */
+#shell-main {
+  margin-left: 280px;
+  min-height: 100vh;
+  background: #f2f3f3;
+}
+
+#shell-content {
+  padding: 24px;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+/* Loading State */
+.shell-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: #545b64;
+  font-size: 16px;
+}
+
+/* Error State */
+.shell-error {
+  background: white;
+  border: 1px solid #e9ebed;
+  border-radius: 8px;
+  padding: 24px;
+  margin: 24px;
+  color: #d13212;
+  font-size: 14px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #shell-sidebar {
+    width: 60px;
+  }
+
+  #shell-title,
+  .shell-nav-label {
+    display: none;
+  }
+
+  #shell-main {
+    margin-left: 60px;
+  }
+
+  .shell-nav-item {
+    justify-content: center;
+    padding: 12px;
+  }
+
+  .shell-icon {
+    margin-right: 0;
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@herdingbits/trailhead-cloudscape",
+  "version": "0.0.1",
+  "description": "CloudScape design system adapter for Trailhead micro-frontend framework",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./shell.css": "./dist/shell.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && cp src/shell.css dist/"
+  },
+  "peerDependencies": {
+    "@herdingbits/trailhead-core": "^0.0.3",
+    "@cloudscape-design/components": "^3.0.0",
+    "@cloudscape-design/global-styles": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@herdingbits/trailhead-types": "^0.0.3",
+    "@cloudscape-design/components": "^3.0.1194",
+    "@cloudscape-design/global-styles": "^1.0.50",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "micro-frontend",
+    "cloudscape",
+    "adapter",
+    "trailhead",
+    "react"
+  ],
+  "author": "HerdingBits",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/herdingbits/trailhead.git",
+    "directory": "packages/cloudscape"
+  }
+}