@herdingbits/trailhead-webawesome 0.1.0

package/README.md

@@ -0,0 +1,65 @@
+# @herdingbits/trailhead-shoelace
+
+Shoelace web components adapter for Trailhead. Vanilla TypeScript, no React required.
+
+## What is this?
+
+This package provides a Trailhead adapter for the [Shoelace](https://shoelace.style/) web component library. It handles:
+- Loading and configuring Shoelace components
+- Rendering toasts, dialogs, and busy overlays
+- Integrating Shoelace with the Trailhead shell
+- **Vanilla TypeScript implementation** - no framework required
+
+**Perfect for teams that want to stay close to HTML/CSS/JavaScript** without React complexity.
+
+## Key Features
+
+- **Framework Agnostic**: Works with any SPA framework (or no framework)
+- **Web Components**: Shoelace components work everywhere
+- **Lightweight**: No React, no virtual DOM, just the browser
+- **Simple**: Straightforward DOM manipulation and event handling
+
+## Installation
+
+```bash
+npm install @herdingbits/trailhead-core @herdingbits/trailhead-shoelace @shoelace-style/shoelace
+```
+
+## Usage
+
+```typescript
+import { Trailhead } from '@herdingbits/trailhead-core';
+import { ShoelaceAdapter, ShellApp } from '@herdingbits/trailhead-shoelace';
+import '@herdingbits/trailhead-shoelace/shell.css';
+
+const shell = new Trailhead({
+  adapter: new ShoelaceAdapter(),
+  appBasePath: '/app',
+  apiUrl: 'https://api.example.com'
+});
+
+ShellApp.mount(shell);
+```
+
+By default, Shoelace is served from `${shellUrl}/shoelace`. To load from a CDN instead:
+
+```typescript
+const shell = new Trailhead({
+  adapter: new ShoelaceAdapter({ shoelaceUrl: 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn' }),
+  appBasePath: '/app',
+});
+```
+
+## What's Included
+
+- **ShoelaceAdapter** - Implements the Trailhead adapter interface
+- **ShellApp** - Minimal mounting wrapper for API consistency
+- **shell.css** - Base styles for the shell UI
+
+## Documentation
+
+See the [main Trailhead documentation](https://github.com/quicken/trailhead) for more information.
+
+## License
+
+MIT

package/dist/adapter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Web Awesome Design System Adapter
+ */
+import type { DesignSystemAdapter, FeedbackAdapter } from '@herdingbits/trailhead-types/adapters';
+export interface WebAwesomeAdapterConfig {
+    /** URL where Web Awesome is hosted (CDN or local path). Defaults to `${shellUrl}/webawesome`. */
+    webAwesomeUrl?: string;
+}
+export declare class WebAwesomeAdapter implements DesignSystemAdapter {
+    name: string;
+    version: string;
+    feedback: FeedbackAdapter;
+    private readonly config?;
+    constructor(config?: WebAwesomeAdapterConfig);
+    init(shellUrl: 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.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,MAAM,uCAAuC,CAAC;AA2F5I,MAAM,WAAW,uBAAuB;IACtC,iGAAiG;IACjG,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;CAkB5C"}

package/dist/adapter.js

@@ -0,0 +1,102 @@
+class WebAwesomeFeedbackAdapter {
+    constructor() {
+        this.busyOverlay = null;
+        this.toastContainer = null;
+    }
+    showBusy(message) {
+        if (!this.busyOverlay) {
+            this.busyOverlay = document.createElement("div");
+            this.busyOverlay.id = "shell-busy-overlay";
+            this.busyOverlay.innerHTML = `
+        <div class="shell-busy-content">
+          <div class="shell-spinner"></div>
+          <div class="shell-busy-message"></div>
+        </div>
+      `;
+            document.body.appendChild(this.busyOverlay);
+        }
+        const messageEl = this.busyOverlay.querySelector(".shell-busy-message");
+        if (messageEl) {
+            messageEl.textContent = message;
+        }
+        this.busyOverlay.style.display = "flex";
+    }
+    clearBusy() {
+        if (this.busyOverlay) {
+            this.busyOverlay.style.display = "none";
+        }
+    }
+    showToast(message, variant, duration = 3000) {
+        if (!this.toastContainer) {
+            this.toastContainer = document.createElement("div");
+            this.toastContainer.id = "shell-toast-container";
+            document.body.appendChild(this.toastContainer);
+        }
+        const toast = document.createElement("div");
+        toast.className = `shell-toast shell-toast-${variant}`;
+        toast.textContent = message;
+        this.toastContainer.appendChild(toast);
+        setTimeout(() => toast.classList.add("shell-toast-show"), 10);
+        setTimeout(() => {
+            toast.classList.remove("shell-toast-show");
+            setTimeout(() => toast.remove(), 300);
+        }, duration);
+    }
+    showDialog(config) {
+        return new Promise((resolve) => {
+            const dialog = document.createElement("div");
+            dialog.className = "shell-dialog-overlay";
+            dialog.innerHTML = `
+        <div class="shell-dialog">
+          ${config.title ? `<div class="shell-dialog-title">${config.title}</div>` : ''}
+          <div class="shell-dialog-message">${config.message}</div>
+          <div class="shell-dialog-buttons">
+            ${config.buttons
+                .map((btn) => `<button class="shell-btn shell-btn-${btn.variant || "default"}" data-value="${btn.value}">${btn.label}</button>`)
+                .join("")}
+          </div>
+        </div>
+      `;
+            dialog.querySelectorAll("button").forEach((btn) => {
+                btn.onclick = () => {
+                    const value = btn.getAttribute("data-value");
+                    dialog.remove();
+                    resolve({ value });
+                };
+            });
+            // Click outside to cancel
+            dialog.onclick = (e) => {
+                if (e.target === dialog) {
+                    dialog.remove();
+                    resolve({ value: null });
+                }
+            };
+            document.body.appendChild(dialog);
+        });
+    }
+}
+export class WebAwesomeAdapter {
+    constructor(config) {
+        this.name = "webawesome";
+        this.version = "1.0.0";
+        this.config = config;
+        this.feedback = new WebAwesomeFeedbackAdapter();
+    }
+    async init(shellUrl) {
+        try {
+            const waPath = this.config?.webAwesomeUrl ?? `${shellUrl}/webawesome`;
+            // Inject theme CSS dynamically so it resolves correctly regardless of where the page is served from
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = `${waPath}/styles/themes/default.css`;
+            document.head.appendChild(link);
+            const { setBasePath } = await import(/* @vite-ignore */ `${waPath}/webawesome.js`);
+            setBasePath(waPath);
+            await import(/* @vite-ignore */ `${waPath}/webawesome.loader.js`);
+        }
+        catch (error) {
+            console.error("Failed to initialize Web Awesome:", error);
+            throw error;
+        }
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @herdingbits/trailhead-webawesome
+ * Web Awesome design system adapter for Trailhead
+ */
+export { WebAwesomeAdapter } from './adapter.js';
+export type { WebAwesomeAdapterConfig } from './adapter.js';
+export { ShellApp } from './shell-app.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,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+/**
+ * @herdingbits/trailhead-webawesome
+ * Web Awesome design system adapter for Trailhead
+ */
+export { WebAwesomeAdapter } from './adapter.js';
+export { ShellApp } from './shell-app.js';

package/dist/shell-app.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shoelace Shell App
+ * Minimal wrapper for consistency with other adapters
+ */
+import type { Trailhead } from '@herdingbits/trailhead-core';
+export declare class ShellApp {
+    /**
+     * Mount the shell (no-op for Shoelace since adapter handles everything)
+     */
+    static mount(shell: Trailhead): void;
+}
+//# 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.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,qBAAa,QAAQ;IACnB;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;CAKrC"}

package/dist/shell-app.js

@@ -0,0 +1,10 @@
+export class ShellApp {
+    /**
+     * Mount the shell (no-op for Shoelace since adapter handles everything)
+     */
+    static mount(shell) {
+        // Shoelace adapter handles all UI via web components
+        // This is just a consistent API surface
+        console.log('[Trailhead] Shoelace shell mounted');
+    }
+}

package/dist/shell.css

@@ -0,0 +1,287 @@
+/**
+ * Shell Styles
+ */
+
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Sidebar */
+#shell-sidebar {
+  width: 240px;
+  background-color: #1e293b;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s;
+}
+
+#shell-sidebar.collapsed {
+  width: 60px;
+}
+
+#shell-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#shell-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+#shell-sidebar.collapsed #shell-title {
+  display: none;
+}
+
+#shell-collapse {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+/* Navigation */
+#shell-navigation {
+  flex: 1;
+  padding: 1rem 0;
+  overflow-y: auto;
+}
+
+.shell-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: white;
+  text-decoration: none;
+  transition: background-color 0.2s;
+  border-left: 3px solid transparent;
+}
+
+.shell-nav-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.shell-nav-item-active {
+  background-color: rgba(59, 130, 246, 0.2);
+  border-left-color: #3b82f6;
+}
+
+#shell-sidebar.collapsed .shell-nav-label {
+  display: none;
+}
+
+.shell-icon {
+  font-size: 1.25rem;
+}
+
+/* Main content */
+#shell-main {
+  flex: 1;
+  background-color: #f8fafc;
+  overflow: auto;
+}
+
+#shell-content {
+  height: 100%;
+}
+
+/* Loading state */
+.shell-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 1.25rem;
+  color: #64748b;
+}
+
+.shell-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 1.25rem;
+  color: #ef4444;
+}
+
+/* Busy overlay */
+#shell-busy-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.shell-busy-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  text-align: center;
+  min-width: 200px;
+}
+
+.shell-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: shell-spin 0.8s linear infinite;
+  margin: 0 auto 1rem;
+}
+
+@keyframes shell-spin {
+  to { transform: rotate(360deg); }
+}
+
+.shell-busy-message {
+  color: #1e293b;
+  font-size: 1rem;
+}
+
+/* Toast notifications */
+#shell-toast-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.shell-toast {
+  padding: 1rem 1.5rem;
+  border-radius: 6px;
+  color: white;
+  font-size: 0.875rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.3s;
+  max-width: 400px;
+}
+
+.shell-toast-show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.shell-toast-success {
+  background-color: #10b981;
+}
+
+.shell-toast-error {
+  background-color: #ef4444;
+}
+
+.shell-toast-warning {
+  background-color: #f59e0b;
+}
+
+.shell-toast-info {
+  background-color: #3b82f6;
+}
+
+/* Dialog */
+.shell-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10001;
+}
+
+.shell-dialog {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  min-width: 400px;
+  max-width: 600px;
+  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
+}
+
+.shell-dialog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 1rem;
+}
+
+.shell-dialog-message {
+  color: #64748b;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+
+.shell-dialog-buttons {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.shell-btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.shell-btn-primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.shell-btn-primary:hover {
+  background-color: #2563eb;
+}
+
+.shell-btn-secondary {
+  background-color: #e5e7eb;
+  color: #1e293b;
+}
+
+.shell-btn-secondary:hover {
+  background-color: #d1d5db;
+}
+
+.shell-btn-default {
+  background-color: #f3f4f6;
+  color: #1e293b;
+}
+
+.shell-btn-default:hover {
+  background-color: #e5e7eb;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@herdingbits/trailhead-webawesome",
+  "version": "0.1.0",
+  "description": "Web Awesome web components adapter for Trailhead. Vanilla TypeScript, no React required.",
+  "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.18",
+    "@awesome.me/webawesome": "^3.6.0"
+  },
+  "devDependencies": {
+    "@herdingbits/trailhead-types": "^0.0.14",
+    "@awesome.me/webawesome": "^3.6.0",
+    "typescript": "^6.0.3"
+  },
+  "keywords": [
+    "micro-frontend",
+    "webawesome",
+    "web-awesome",
+    "adapter",
+    "trailhead"
+  ],
+  "author": "HerdingBits",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/quicken/trailhead.git",
+    "directory": "packages/webawesome"
+  }
+}