@pure-ds/storybook 0.1.2 → 0.1.4

package/stories/primitives/Cards.stories.js

@@ -2,352 +2,75 @@ import { html } from 'lit';
 
 export default {
   title: 'Primitives/Cards',
-  tags: ['cards', 'layout', 'spacing', 'surface', 'colors'],
   parameters: {
-    pds: {
-      tags: ['cards', 'layout', 'spacing', 'surface', 'colors']
-    },
     docs: {
       description: {
-        component: 'Versatile content containers with multiple surface variants. Cards automatically adapt to your theme and support nesting for complex layouts.'
+        component: 'Basic UI elements - buttons, forms, cards, badges'
       }
     }
+  },
+  argTypes: {
+  preset: {
+    control: 'select',
+    options: ['default', 'ocean-breeze', 'midnight-steel', 'sunset-vibes', 'forest-calm', 'lavender-dream'],
+    description: 'Choose a design preset'
+  },
+  primaryColor: {
+    control: 'color',
+    description: 'Override primary color'
+  },
+  secondaryColor: {
+    control: 'color',
+    description: 'Override secondary color'
+  }
   }
 };
 
-const cardsStoryStyles = html`
-  <style>
-    .cards-story-section {
-      padding: var(--spacing-4);
-    }
-    .cards-basic-grid {
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    }
-    .cards-surface-grid {
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    }
-    .cards-helper {
-      margin-bottom: var(--spacing-4);
-      opacity: 0.8;
-    }
-    .cards-inline-actions {
-      margin-top: var(--spacing-3);
-    }
-    .cards-nested-shell {
-      max-width: 37.5rem;
-    }
-    .cards-nested-spacing {
-      margin-top: var(--spacing-4);
-    }
-    .cards-nested-deep {
-      margin-top: var(--spacing-3);
-    }
-    .cards-parent-action {
-      margin-top: var(--spacing-4);
-    }
-    .cards-horizontal-card {
-      max-width: 37.5rem;
-      margin-bottom: var(--spacing-6);
-    }
-    .cards-horizontal-media {
-      flex-shrink: 0;
-      width: 7.5rem;
-      height: 7.5rem;
-      background: var(--color-primary);
-      border-radius: var(--radius-md);
-    }
-    .cards-horizontal-icon {
-      color: white;
-      opacity: 0.6;
-    }
-    .cards-horizontal-body {
-      flex: 1;
-    }
-    .cards-grid-visuals {
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    }
-    .cards-visual-block {
-      height: 100px;
-      border-radius: var(--radius-sm);
-      margin-bottom: var(--spacing-3);
-    }
-    .cards-gradient-one {
-      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
-    }
-    .cards-gradient-two {
-      background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
-    }
-    .cards-gradient-three {
-      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-    }
-    .cards-small-copy {
-      font-size: 0.9rem;
-    }
-    .cards-complex-grid {
-      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+export const Default = {
+  render: (args) => {
+    // Apply preset if changed
+    if (args.preset) {
+      import('../../../src/js/pds.js').then(({ PDS }) => {
+        PDS.applyDesign({ preset: args.preset });
+      });
     }
-    .cards-profile-header {
-      margin-bottom: var(--spacing-4);
-    }
-    .cards-profile-avatar {
-      width: 48px;
-      height: 48px;
-      background: var(--color-primary);
-      border-radius: 50%;
-    }
-    .cards-profile-avatar pds-icon {
-      color: white;
-    }
-    .cards-profile-title {
-      margin: 0;
-    }
-    .cards-profile-meta {
-      margin: 0;
-      font-size: 0.85rem;
-      opacity: 0.7;
-    }
-    .cards-profile-actions {
-      margin-top: var(--spacing-4);
-    }
-    .cards-premium-header {
-      margin-bottom: var(--spacing-3);
-    }
-    .cards-pro-badge {
-      padding: var(--spacing-1) var(--spacing-2);
-      background: var(--color-primary);
-      color: white;
-      border-radius: var(--radius-full);
-      font-size: 0.75rem;
-      font-weight: 600;
-    }
-    .cards-premium-list {
-      margin: var(--spacing-3) 0;
-    }
-    .cards-stats-grid {
-      margin: var(--spacing-4) 0;
-    }
-    .cards-stat-value {
-      font-size: 2rem;
-      font-weight: 700;
-    }
-    .cards-stat-value.primary {
-      color: var(--color-primary);
-    }
-    .cards-stat-value.secondary {
-      color: var(--color-secondary);
-    }
-    .cards-stat-label {
-      font-size: 0.85rem;
-      opacity: 0.7;
+    
+    // Apply color overrides
+    if (args.primaryColor || args.secondaryColor) {
+      import('../../../src/js/pds.js').then(({ PDS }) => {
+        PDS.applyDesign({
+          design: {
+            colors: {
+              primary: args.primaryColor,
+              secondary: args.secondaryColor
+            }
+          }
+        });
+      });
     }
-  </style>
-`;
+    
+    
 
-export const BasicCards = () => html`
-  ${cardsStoryStyles}
-  <div class="cards-story-section">
-    <h3>Basic Cards</h3>
-    <div class="grid gap-md cards-basic-grid">
+    return html`
+      <div class="story-container" style="padding: 2rem;">
+        
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;">
       <article class="card">
-        <h3>Default Card</h3>
-        <p>Card content goes here. This is a basic card primitive with automatic theming.</p>
+        <h3>Card Title</h3>
+        <p>Card content goes here. This is a basic card primitive.</p>
         <button class="btn-primary">Action</button>
       </article>
-      
       <article class="card">
-        <h3>With Icon</h3>
-        <div class="flex items-start gap-sm">
-          <pds-icon icon="star" size="lg" class="icon-primary"></pds-icon>
-          <div>
-            <p>Cards can contain icons, buttons, forms, and any other content.</p>
-          </div>
-        </div>
+        <h3>Another Card</h3>
+        <p>Cards are versatile containers for content.</p>
         <button class="btn-outline">Learn More</button>
       </article>
-
-      <article class="card">
-        <h3>Interactive Card</h3>
-        <p>With multiple actions and rich content.</p>
-        <div class="flex gap-sm cards-inline-actions">
-          <button class="btn-primary btn-sm">
-            <pds-icon icon="heart" size="sm"></pds-icon>
-            Like
-          </button>
-          <button class="btn-secondary btn-sm">
-            <pds-icon icon="share" size="sm"></pds-icon>
-            Share
-          </button>
-          <button class="icon-only btn-outline btn-sm">
-            <pds-icon icon="bookmark" size="sm" label="Bookmark"></pds-icon>
-          </button>
-        </div>
-      </article>
-    </div>
-  </div>
-`;
-
-BasicCards.storyName = 'Basic Cards';
-
-export const SurfaceVariants = () => html`
-  ${cardsStoryStyles}
-  <div class="cards-story-section">
-    <h3>Surface Variants</h3>
-    <p class="cards-helper">
-      Different surface levels create visual hierarchy
-    </p>
-    
-    <div class="grid gap-md cards-surface-grid">
-      <article class="card">
-        <h4>Default Surface</h4>
-        <p>Standard card surface level. Use for most content containers.</p>
-        <code>.card</code>
-      </article>
-
-      <article class="card surface-elevated">
-        <h4>Elevated Surface</h4>
-        <p>Appears raised above the default surface. Great for important content or hover states.</p>
-        <code>.surface-elevated</code>
-      </article>
-
-      <article class="card surface-overlay">
-        <h4>Overlay Surface</h4>
-        <p>Highest surface level. Perfect for modal dialogs and floating panels.</p>
-        <code>.surface-overlay</code>
-      </article>
     </div>
-  </div>
-`;
-
-SurfaceVariants.storyName = 'Surface Variants';
-
-export const NestedCards = () => html`
-  ${cardsStoryStyles}
-  <div class="cards-story-section">
-    <h3>Nested Cards</h3>
-    <p class="cards-helper">
-      Surface variants enable natural nesting without visual confusion
-    </p>
-    
-    <article class="card cards-nested-shell">
-      <h3>Parent Card (Default Surface)</h3>
-      <p>This is the outer container using the default card surface.</p>
-
-      <div class="cards-nested-spacing">
-        <article class="card surface-elevated">
-          <h4>Nested Card (Elevated)</h4>
-          <p>This card is nested inside the parent and uses the elevated surface for clear visual separation.</p>
-          
-          <div class="cards-nested-deep">
-            <article class="card surface-overlay">
-              <h5>Deeply Nested (Overlay)</h5>
-              <p class="cards-small-copy">Even deeper nesting maintains readability with the overlay surface.</p>
-            </article>
-          </div>
-        </article>
-      </div>
-
-      <button class="btn-primary cards-parent-action">Parent Action</button>
-    </article>
-  </div>
-`;
-
-NestedCards.storyName = 'Nested Cards';
-
-export const CardLayouts = () => html`
-  ${cardsStoryStyles}
-  <div class="cards-story-section">
-    <h3>Horizontal Card</h3>
-    <article class="card flex gap-md cards-horizontal-card">
-      <div class="flex items-center justify-center cards-horizontal-media">
-        <pds-icon icon="image" size="xl" class="cards-horizontal-icon"></pds-icon>
-      </div>
-      <div class="cards-horizontal-body">
-        <h4>Horizontal Layout</h4>
-        <p>Cards work great with flexbox for horizontal layouts.</p>
-        <button class="btn-outline btn-sm">View Details</button>
+  
       </div>
-    </article>
-
-    <h3>Card Grid</h3>
-    <div class="grid gap-sm cards-grid-visuals">
-      <article class="card">
-        <div class="cards-visual-block cards-gradient-one"></div>
-        <h4>Card 1</h4>
-        <p class="cards-small-copy">Grid layout with cards.</p>
-      </article>
-      <article class="card">
-        <div class="cards-visual-block cards-gradient-two"></div>
-        <h4>Card 2</h4>
-        <p class="cards-small-copy">Responsive and flexible.</p>
-      </article>
-      <article class="card">
-        <div class="cards-visual-block cards-gradient-three"></div>
-        <h4>Card 3</h4>
-        <p class="cards-small-copy">Auto-fits to space.</p>
-      </article>
-    </div>
-  </div>
-`;
-
-CardLayouts.storyName = 'Card Layouts';
-
-export const ComplexCards = () => html`
-  ${cardsStoryStyles}
-  <div class="cards-story-section">
-    <h3>Complex Card Examples</h3>
-    <div class="grid gap-md cards-complex-grid">
-      
-      <article class="card">
-        <div class="flex items-center gap-sm cards-profile-header">
-          <div class="flex items-center justify-center cards-profile-avatar">
-            <pds-icon icon="user"></pds-icon>
-          </div>
-          <div>
-            <h4 class="cards-profile-title">User Profile</h4>
-            <p class="cards-profile-meta">@username</p>
-          </div>
-        </div>
-        <p>Profile description goes here with some interesting details about the user.</p>
-        <div class="flex gap-sm cards-profile-actions">
-          <button class="btn-primary btn-sm">Follow</button>
-          <button class="btn-outline btn-sm">Message</button>
-        </div>
-      </article>
-
-      <article class="card surface-elevated">
-        <div class="flex justify-between items-start cards-premium-header">
-          <h4>Premium Feature</h4>
-          <span class="cards-pro-badge">PRO</span>
-        </div>
-        <p>This elevated card highlights a premium feature with a badge and special styling.</p>
-        <ul class="cards-premium-list">
-          <li>Feature benefit one</li>
-          <li>Feature benefit two</li>
-          <li>Feature benefit three</li>
-        </ul>
-        <button class="btn-primary">
-          <pds-icon icon="star"></pds-icon>
-          Upgrade Now
-        </button>
-      </article>
-
-      <article class="card">
-        <h4>Stats Card</h4>
-        <div class="grid grid-cols-2 gap-md cards-stats-grid">
-          <div>
-            <div class="cards-stat-value primary">1.2K</div>
-            <div class="cards-stat-label">Followers</div>
-          </div>
-          <div>
-            <div class="cards-stat-value secondary">847</div>
-            <div class="cards-stat-label">Following</div>
-          </div>
-        </div>
-        <button class="btn-outline btn-sm">View All</button>
-      </article>
-
-    </div>
-  </div>
-`;
-
-ComplexCards.storyName = 'Complex Cards';
+    `;
+  },
+  args: {
+    preset: 'default'
+  }
+};

package/stories/primitives/Forms.stories.js

@@ -1,20 +1,11 @@
 import { html } from 'lit';
-import { toastFormData } from '../utils/toast-utils.js';
 
 export default {
   title: 'Primitives/Forms',
-  tags: ['buttons', 'forms'],
   parameters: {
-    pds: {
-      tags: ['buttons', 'forms']
-    },
     docs: {
       description: {
-        component: `Standard HTML form controls styled by PDS. 
-
-**💡 For modern apps, consider using [pds-jsonform](/story/components-pds-jsonform--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.
-
-These primitive form controls provide the foundation for manual form building when you need full control over the markup.`
+        component: 'Basic UI elements - buttons, forms, cards, badges'
       }
     }
   },
@@ -37,95 +28,173 @@ These primitive form controls provide the foundation for manual form building wh
 
 export const Default = {
   render: (args) => {
-    // Preset changes are handled by toolbar in preview.js
-    const handleSubmit = (event) => {
-      event.preventDefault();
-      toastFormData(new FormData(event.target));
-    };
+    // Apply preset if changed
+    if (args.preset) {
+      import('../../../src/js/pds.js').then(({ PDS }) => {
+        PDS.applyDesign({ preset: args.preset });
+      });
+    }
+    
+    // Apply color overrides
+    if (args.primaryColor || args.secondaryColor) {
+      import('../../../src/js/pds.js').then(({ PDS }) => {
+        PDS.applyDesign({
+          design: {
+            colors: {
+              primary: args.primaryColor,
+              secondary: args.secondaryColor
+            }
+          }
+        });
+      });
+    }
+    
     
-    return html`
-      <style>
-        .forms-default-form {
-          max-width: 25rem;
-        }
-      </style>
-      <div class="card">
-        
-    <form class="forms-default-form" @submit=${handleSubmit}>
-      <label>
-        <span>Text Input</span>
-        <input type="text" name="text" placeholder="Enter text...">
-      </label>
-      <label>
-        <span>Email</span>
-        <div class="input-icon">
-          <pds-icon icon="envelope"></pds-icon>
-          <input type="email" name="email" required placeholder="email@example.com">
-        </div>
-      </label>
-      <label>
-        <span>Select</span>
-        <select name="select">
-          <option>Option 1</option>
-          <option>Option 2</option>
-          <option>Option 3</option>
-        </select>
-      </label>
-      <label>
-        <span>Textarea</span>
-        <textarea name="textarea" rows="4" placeholder="Enter longer text..."></textarea>
-      </label>
-      <button type="submit" class="btn-primary">Submit</button>
-    </form>
-  
-      </div>
-    `;
-  },
-  args: {
-    preset: 'default'
-  }
-};
 
-export const InputsWithIcons = {
-  render: (args) => {
     return html`
-      <style>
-        .forms-inputs-demo {
-          max-width: 25rem;
-        }
-      </style>
-      <div class="card">
-        <h3>Inputs with Icons</h3>
-        <p>Enhance inputs with icons for better UX. Icons can be positioned at the start or end of the input.</p>
-        
-        <div class="flex flex-col gap-lg forms-inputs-demo">
-          <label>
-            <span>Search (Icon Start)</span>
-            <div class="input-icon">
-              <pds-icon icon="magnifying-glass"></pds-icon>
-              <input type="search" placeholder="Search..." />
-            </div>
-          </label>
-          
-          <label>
-            <span>Username (Icon End)</span>
-            <div class="input-icon input-icon-end">
-              <input type="text" placeholder="Username" />
-              <pds-icon icon="user"></pds-icon>
-            </div>
-          </label>
-        </div>
+      <div class="story-container" style="padding: 2rem;">
+        <h2>
+              <pds-icon
+                icon="note-pencil"
+                size="lg"
+                class="icon-primary"
+              ></pds-icon>
+              Form Controls
+            </h2>
+
+            <form
+              class="form-demo"
+              onsubmit="event.preventDefault(); console.log('Form submitted (prevented)'); return false;"
+            >
+              <fieldset>
+                <legend>Personal Information</legend>
+
+                <label>
+                  <span>Full Name</span>
+                  <input type="text" placeholder="Enter your name" required />
+                </label>
+
+                <label>
+                  <span>Email</span>
+                  <input
+                    type="email"
+                    placeholder="you@example.com"
+                    autocomplete="username"
+                    required
+                  />
+                </label>
+
+                <label>
+                  <span>Phone</span>
+                  <input type="tel" placeholder="+1 (555) 000-0000" />
+                </label>
+
+                <label>
+                  <span>Date of Birth</span>
+                  <input type="date" />
+                </label>
+
+                <label>
+                  <span>Rich Text</span>
+                  <pds-richtext
+                    name="richtext"
+                    placeholder="Enter rich text"
+                  ></pds-richtext>
+                </label>
+
+                <label>
+                  <span>Password</span>
+                  <input
+                    type="password"
+                    placeholder="Enter password"
+                    autocomplete="current-password"
+                  />
+                </label>
+
+                <label>
+                  <span>Country</span>
+                  <select>
+                    <option>United States</option>
+                    <option>Canada</option>
+                    <option>United Kingdom</option>
+                    <option>Germany</option>
+                    <option>France</option>
+                    <option>Other</option>
+                  </select>
+                </label>
+
+                <label>
+                  <span>Number</span>
+                  <input type="number" min="0" max="100" value="50" />
+                </label>
+
+                <label>
+                  <span>Range</span>
+                  <input type="range" min="0" max="100" value="50" />
+                </label>
+
+                <label>
+                  <span>URL</span>
+                  <input type="url" placeholder="https://example.com" />
+                </label>
+
+                <label>
+                  <span>File Upload</span>
+                  <pds-upload name="file"></pds-upload>
+                </label>
+
+                <label>
+                  <span>Message</span>
+                  <textarea
+                    rows="4"
+                    placeholder="Your message here..."
+                  ></textarea>
+                </label>
+              </fieldset>
+
+              <fieldset>
+                <legend>Preferences</legend>
+
+                <label data-toggle>
+                  <input type="checkbox" checked />
+                  Subscribe to newsletter
+                </label>
+
+                <label data-toggle>
+                  <input type="checkbox" />
+                  Receive marketing emails
+                </label>
+              </fieldset>
+
+              <fieldset>
+                <legend>Toggle Switches (Progressive Enhancement)</legend>
+
+                <label data-toggle>
+                  <input type="checkbox" checked />
+                  Enable notifications
+                </label>
+
+                <label data-toggle>
+                  <input type="checkbox" />
+                  Dark mode
+                </label>
+
+                <label data-toggle>
+                  <input type="checkbox" checked />
+                  Auto-save
+                </label>
+              </fieldset>
+
+              <div class="form-demo-actions">
+                <button type="submit" class="btn-primary">Submit Form</button>
+                <button type="reset" class="btn-secondary">Reset</button>
+                <button type="button" class="btn-outline">Cancel</button>
+              </div>
+            </form>
       </div>
     `;
   },
   args: {
     preset: 'default'
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Input fields can be enhanced with icons to provide visual context. Use the `input-icon` class wrapper and position icons at the start (default) or end (`input-icon-end`) of the input.'
-      }
-    }
   }
 };