@herdingbits/trailhead-cloudscape 0.0.13 → 0.0.16

package/README.md

@@ -37,7 +37,7 @@ import '@herdingbits/trailhead-cloudscape/shell.css';
 
 const shell = new Trailhead({
   adapter: new CloudScapeAdapter(),
-  basePath: '/app',
+  appBasePath: '/app',
   apiUrl: 'https://api.example.com'
 });
 
@@ -45,6 +45,15 @@ const root = createRoot(document.getElementById('app')!);
 root.render(<ShellApp shell={shell} />);
 ```
 
+To load the CloudScape global styles from a CDN instead of bundling via npm import, pass `cloudscapeUrl` to the adapter (and remove the `@cloudscape-design/global-styles/index.css` import from your entry point):
+
+```typescript
+const shell = new Trailhead({
+  adapter: new CloudScapeAdapter({ cloudscapeUrl: 'https://unpkg.com/@cloudscape-design/global-styles@1.0.0/index.css' }),
+  appBasePath: '/app',
+});
+```
+
 ## What's Included
 
 - **CloudScapeAdapter** - Implements the Trailhead adapter interface

package/dist/adapter.d.ts

@@ -3,11 +3,16 @@
  * Uses CloudScape Flashbar, Modal, and Spinner components
  */
 import type { DesignSystemAdapter, FeedbackAdapter } from '@herdingbits/trailhead-types/adapters';
+export interface CloudScapeAdapterConfig {
+    /** URL for the CloudScape global-styles CSS. If provided, injected dynamically instead of requiring a hardcoded HTML link tag. */
+    cloudscapeUrl?: string;
+}
 export declare class CloudScapeAdapter implements DesignSystemAdapter {
     name: string;
     version: string;
     feedback: FeedbackAdapter;
-    constructor();
-    init(basePath: string): Promise<void>;
+    private readonly config?;
+    constructor(config?: CloudScapeAdapterConfig);
+    init(shellUrl: string): Promise<void>;
 }
 //# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -1 +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"}
+{"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,MAAM,WAAW,uBAAuB;IACtC,kIAAkI;IAClI,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAA0B;gBAEtC,MAAM,CAAC,EAAE,uBAAuB;IAKtC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAQ5C"}

package/dist/adapter.js

@@ -52,12 +52,18 @@ class CloudScapeFeedbackAdapter {
     }
 }
 export class CloudScapeAdapter {
-    constructor() {
+    constructor(config) {
         this.name = 'cloudscape';
         this.version = '3.0.0';
+        this.config = config;
         this.feedback = new CloudScapeFeedbackAdapter();
     }
-    async init(basePath) {
-        // CloudScape styles loaded via global-styles package
+    async init(shellUrl) {
+        if (this.config?.cloudscapeUrl) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = this.config.cloudscapeUrl;
+            document.head.appendChild(link);
+        }
     }
 }

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

@@ -1 +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,2CAmNhD"}
+{"version":3,"file":"shell-app.d.ts","sourceRoot":"","sources":["../src/shell-app.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAW,MAAM,6BAA6B,CAAC;AAEtE,UAAU,aAAa;IACrB,KAAK,EAAE,SAAS,CAAC;CAClB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CAkNhD"}

package/dist/shell-app.js

@@ -21,8 +21,8 @@ export function ShellApp({ shell }) {
     // 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) || '/';
+        if (shell.appBasePath && path.startsWith(shell.appBasePath)) {
+            path = path.substring(shell.appBasePath.length) || '/';
         }
         return path;
     };
@@ -70,21 +70,20 @@ export function ShellApp({ shell }) {
         }
     }, [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 app = shell.getApps().find(entry => normalizedPath.startsWith(entry.basePath));
+        if (app && contentRef.current) {
+            loadApp(app.src, app.basePath);
         }
     };
     const loadApp = async (appName, appPath) => {
         if (!contentRef.current)
             return;
         contentRef.current.innerHTML = '<div>Loading...</div>';
-        const appBasePath = shell.basePath + appPath;
+        const appBasePath = shell.appBasePath + appPath;
         try {
-            const pluginUrl = `${shell.basePath}${appPath}/app.js`;
-            const pluginCss = `${shell.basePath}${appPath}/${appName}.css`;
+            const pluginUrl = `${shell.appBasePath}${appPath}/app.js`;
+            const pluginCss = `${shell.appBasePath}${appPath}/${appName}.css`;
             // Load CSS
             const link = document.createElement("link");
             link.rel = "stylesheet";
@@ -148,5 +147,5 @@ export function ShellApp({ shell }) {
                         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", { id: "shell-content", ref: contentRef }) })] }));
+                    }, 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.appBasePath, onNavigate: handleNavigate, children: _jsx("div", { id: "shell-content", ref: contentRef }) })] }));
 }

package/dist/shell-layout.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
-interface NavigationItem {
-    id: string;
-    label: string;
-    path: string;
-    icon?: string;
-}
+import type { NavItem } from '@herdingbits/trailhead-core';
 interface ShellLayoutProps {
-    navigation: NavigationItem[];
+    navigation: NavItem[];
     currentPath: string;
     basePath: string;
     onNavigate: (path: string) => void;

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

@@ -1 +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"}
+{"version":3,"file":"shell-layout.d.ts","sourceRoot":"","sources":["../src/shell-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,OAAO,EAAW,MAAM,6BAA6B,CAAC;AAEpE,UAAU,gBAAgB;IACxB,UAAU,EAAE,OAAO,EAAE,CAAC;IACtB,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,2CA+CxG"}

package/dist/shell-layout.js

@@ -4,12 +4,30 @@ 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 => ({
+    const isExternal = (href) => /^https?:\/\/|^\/\//.test(href);
+    const resolveHref = (href) => isExternal(href) ? href : basePath + href + '/';
+    const mapLink = (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) => {
+        href: resolveHref(item.href),
+    });
+    const navItems = [...navigation]
+        .sort((a, b) => a.order - b.order)
+        .map((item) => {
+        switch (item.type) {
+            case 'link':
+                return mapLink(item);
+            case 'section':
+                return {
+                    type: 'section',
+                    text: item.label,
+                    items: [...item.children].sort((a, b) => a.order - b.order).map(mapLink),
+                };
+            case 'divider':
+                return { type: 'divider' };
+        }
+    });
+    return (_jsx(AppLayout, { navigationOpen: navigationOpen, onNavigationChange: ({ detail }) => setNavigationOpen(detail.open), navigation: _jsx(SideNavigation, { activeHref: basePath + currentPath + (currentPath.endsWith('/') ? '' : '/'), items: navItems, onFollow: (event) => {
                 event.preventDefault();
                 onNavigate(event.detail.href);
             } }), content: children, toolsHide: true }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herdingbits/trailhead-cloudscape",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "description": "AWS CloudScape adapter for Trailhead. React-based shell with CloudScape components. Supports React 19.",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,16 +21,16 @@
     "build": "npm run clean && tsc && cp src/shell.css dist/"
   },
   "peerDependencies": {
-    "@herdingbits/trailhead-core": "^0.0.15",
     "@cloudscape-design/components": "^3.0.0",
     "@cloudscape-design/global-styles": "^1.0.0",
+    "@herdingbits/trailhead-core": "^0.0.16",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@herdingbits/trailhead-types": "^0.0.12",
     "@cloudscape-design/components": "^3.0.1297",
     "@cloudscape-design/global-styles": "^1.0.59",
+    "@herdingbits/trailhead-types": "^0.0.14",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.6",