@herdingbits/trailhead-shoelace 0.0.1

package/README.md

@@ -0,0 +1,33 @@
+# @herdingbits/trailhead-shoelace
+
+Shoelace design system adapter for the Trailhead micro-frontend framework.
+
+## 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(),
+  basePath: '/app',
+  apiUrl: 'https://api.example.com'
+});
+
+ShellApp.mount(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,12 @@
+/**
+ * Shoelace Design System Adapter
+ */
+import type { DesignSystemAdapter, FeedbackAdapter } from '@herdingbits/trailhead-types/adapters';
+export declare class ShoelaceAdapter 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.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,MAAM,uCAAuC,CAAC;AA2F5I,qBAAa,eAAgB,YAAW,mBAAmB;IACzD,IAAI,SAAc;IAClB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;;IAMpB,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAW5C"}

package/dist/adapter.js

@@ -0,0 +1,96 @@
+class ShoelaceFeedbackAdapter {
+    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 ShoelaceAdapter {
+    constructor() {
+        this.name = "shoelace";
+        this.version = "1.0.0";
+        this.feedback = new ShoelaceFeedbackAdapter();
+    }
+    async init(basePath) {
+        try {
+            const shoelacePath = `${basePath}/shoelace`;
+            const { setBasePath } = await import(/* @vite-ignore */ `${shoelacePath}/utilities/base-path.js`);
+            setBasePath(shoelacePath);
+            await import(/* @vite-ignore */ `${shoelacePath}/shoelace-autoloader.js`);
+        }
+        catch (error) {
+            console.error("Failed to initialize Shoelace:", error);
+            throw error;
+        }
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @herdingbits/trailhead-shoelace
+ * Shoelace design system adapter for Trailhead
+ */
+export { ShoelaceAdapter } 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,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+/**
+ * @herdingbits/trailhead-shoelace
+ * Shoelace design system adapter for Trailhead
+ */
+export { ShoelaceAdapter } 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,48 @@
+{
+  "name": "@herdingbits/trailhead-shoelace",
+  "version": "0.0.1",
+  "description": "Shoelace 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",
+    "@shoelace-style/shoelace": "^2.20.0"
+  },
+  "devDependencies": {
+    "@herdingbits/trailhead-types": "^0.0.3",
+    "@shoelace-style/shoelace": "^2.20.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "micro-frontend",
+    "shoelace",
+    "adapter",
+    "trailhead"
+  ],
+  "author": "HerdingBits",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/herdingbits/trailhead.git",
+    "directory": "packages/shoelace"
+  }
+}