@pure-ds/storybook 0.4.23 → 0.4.24

package/public/assets/pds/components/pds-form.js

@@ -11,7 +11,7 @@ function getStep(value) {
 // Default options for pds-form
 const DEFAULT_OPTIONS = {
   widgets: {
-    booleans: "toggle", // 'toggle' | 'checkbox'
+    booleans: "toggle", // 'toggle' | 'toggle-with-icons' | 'checkbox'
     numbers: "input", // 'input' | 'range'
     selects: "standard", // 'standard' | 'dropdown'
   },
@@ -669,10 +669,9 @@ export class SchemaForm extends LitElement {
       return useRange ? "input-range" : "input-number";
     }
     if (schema.type === "boolean") {
-      // Check if toggle should be used
-      const useToggle =
-        this.#getOption("widgets.booleans", "toggle") === "toggle";
-      return useToggle ? "toggle" : "checkbox";
+      // Return the actual boolean widget type
+      const booleanWidget = this.#getOption("widgets.booleans", "toggle");
+      return booleanWidget === "checkbox" ? "checkbox" : booleanWidget;
     }
     return "input-text";
   }
@@ -1489,14 +1488,20 @@ export class SchemaForm extends LitElement {
       this.#emit("pw:after-render-field", { path, schema: node.schema })
     );
 
-    // Add data-toggle for toggle switches
-    const isToggle = node.widgetKey === "toggle";
+    // Add data-toggle for toggle switches (both toggle and toggle-with-icons)
+    const isToggle = node.widgetKey === "toggle" || node.widgetKey === "toggle-with-icons";
+    const useIconToggle = node.widgetKey === "toggle-with-icons";
 
     // Add range-output class for range inputs if enabled
     const isRange = node.widgetKey === "input-range";
     const useRangeOutput =
       isRange && this.#getOption("enhancements.rangeOutput", true);
-    const labelClass = useRangeOutput ? "range-output" : undefined;
+    
+    // Build class list for label
+    const labelClasses = [];
+    if (useRangeOutput) labelClasses.push("range-output");
+    if (useIconToggle) labelClasses.push("with-icons");
+    const labelClass = labelClasses.length > 0 ? labelClasses.join(" ") : undefined;
 
     const renderControlAndLabel = (isToggle) => {
       if (isToggle) return html`${controlTpl} <span data-label>${label}</span>`;
@@ -1855,6 +1860,22 @@ export class SchemaForm extends LitElement {
       `
     );
 
+    // Toggle switch with icons (same as toggle, styling comes from .with-icons class on label)
+    this.defineRenderer(
+      "toggle-with-icons",
+      ({ id, path, value, attrs, set }) => html`
+        <input
+          id=${id}
+          name=${path}
+          type="checkbox"
+          .checked=${!!value}
+          ?disabled=${!!attrs.disabled}
+          ?required=${!!attrs.required}
+          @change=${(e) => set(!!e.target.checked)}
+        />
+      `
+    );
+
     this.defineRenderer(
       "select",
       ({ id, path, value, attrs, set, schema, ui, host }) => {

package/src/js/pds-core/pds-config.js

@@ -737,7 +737,6 @@ export const presets = {
       "Data-dense business intelligence app interface with organized hierarchy and professional polish",
     options: {
       liquidGlassEffects: false,
-      backgroundMesh: 2,
     },
     colors: {
       primary: "#0066cc", // corporate blue for primary actions
@@ -815,7 +814,7 @@ presets.default = {
   form: {
     options: {
       widgets: {
-        booleans: "toggle",      // 'toggle' | 'checkbox'
+        booleans: "toggle",      // 'toggle' | 'toggle-with-icons' | 'checkbox'
         numbers: "input",        // 'input' | 'range'
         selects: "standard",     // 'standard' | 'dropdown'
       },

package/src/js/pds.js

@@ -961,10 +961,27 @@ async function __setupAutoDefinerAndEnhancers(options) {
       enhancers: mergedEnhancers,
       onError: (tag, err) => {
         if (typeof tag === "string" && tag.startsWith("pds-")) {
-          // No config available in this context, using console
-          console.warn(
-            `⚠️ PDS component <${tag}> not found. Assets may not be installed.`
-          );
+          // Check if this is a Lit-dependent component with missing #pds/lit import map
+          const litDependentComponents = ['pds-form', 'pds-drawer'];
+          const isLitComponent = litDependentComponents.includes(tag);
+          const isMissingLitError = err?.message?.includes('#pds/lit') || 
+                                     err?.message?.includes('Failed to resolve module specifier');
+          
+          if (isLitComponent && isMissingLitError) {
+            console.error(
+              `❌ PDS component <${tag}> requires Lit but #pds/lit is not in import map.\n` +
+              `Add this to your HTML <head>:\n` +
+              `<script type="importmap">\n` +
+              `  { "imports": { "#pds/lit": "./path/to/lit.js" } }\n` +
+              `</script>\n` +
+              `See: https://github.com/pure-ds/core#lit-components`
+            );
+          } else {
+            // Generic component not found warning
+            console.warn(
+              `⚠️ PDS component <${tag}> not found. Assets may not be installed.`
+            );
+          }
         } else {
           console.error(`❌ Auto-define error for <${tag}>:`, err);
         }

package/stories/GettingStarted.md

@@ -10,12 +10,26 @@ From zero to hero with PDS.
 npm install @pure-ds/core
 ```
 
-Create `pds.config.js`: 
+**What happens during install:**
+
+PDS automatically sets up your project:
+- ✅ Creates `pds.config.js` with commented examples (if it doesn't exist)
+- ✅ Exports static assets to your web root (components, icons, styles)
+- ✅ Copies AI/Copilot instructions to `.github/copilot-instructions.md`
+- ✅ Adds helper scripts to your `package.json` (`pds:export`, `pds:build-icons`)
+
+The generated `pds.config.js` includes:
 
 ```javascript
+// pds.config.js (auto-generated)
 export const config = {
   mode: "live",
-  preset: "default"
+  preset: "default",
+
+  // Uncomment and customize as needed:
+  // design: { colors: { primary: '#007acc' } },
+  // enhancers: [ /* custom enhancements */ ],
+  // autoDefine: { predefine: ['pds-icon'] }
 }
 ```
 
@@ -23,11 +37,21 @@ Then initialize in your app:
 
 ```javascript
 import { PDS } from '@pure-ds/core';
-import { config } from "../../pds.config.js"; // change to match location (project root)
+import { config } from "./pds.config.js"; // project root
 
 await PDS.start(config); // That's it! Start writing semantic HTML.
 ```
 
+**Manual config generation:**
+
+```bash
+# Create or regenerate config with examples
+npx pds-init-config
+
+# Force overwrite existing config
+npx pds-init-config --force
+```
+
 ### Option B: CDN (Zero Install)
 
 Perfect for quick prototypes and learning: