@pure-ds/storybook 0.1.0

package/stories/utilities/GridSystem.stories.js

@@ -0,0 +1,208 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Utilities/Grid System',
+  tags: ['layout', 'grid', 'spacing', 'utilities', 'gap'],
+  parameters: {
+    pds: {
+      tags: ['grid', 'layout', 'utilities', 'spacing', 'gap']
+    },
+    docs: {
+      description: {
+        component: 'Modern, config-driven grid system with fixed column grids and auto-fit responsive layouts. All utilities are generated from layout.gridSystem configuration.'
+      }
+    }
+  }
+};
+
+const gridSystemStoryStyles = html`
+  <style>
+    .grid-system-card-title {
+      margin-top: var(--spacing-3);
+    }
+  </style>
+`;
+
+export const FixedColumnGrids = () => html`
+  <div class="card">
+    <h3>Two Column Grid (.grid-cols-2)</h3>
+    <div class="grid grid-cols-2 gap-md">
+      <div class="card text-center">
+        <pds-icon icon="square" size="lg" class="icon-primary"></pds-icon>
+        <h4>Column 1</h4>
+        <p>Equal width columns</p>
+      </div>
+      <div class="card text-center">
+        <pds-icon icon="square" size="lg" class="icon-secondary"></pds-icon>
+        <h4>Column 2</h4>
+        <p>Auto responsive</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <h3>Three Column Grid (.grid-cols-3)</h3>
+    <div class="grid grid-cols-3 gap-sm">
+      <div class="card text-center">
+        <pds-icon icon="circle" size="md" class="icon-success"></pds-icon>
+        <p>Column 1</p>
+      </div>
+      <div class="card text-center">
+        <pds-icon icon="circle" size="md" class="icon-warning"></pds-icon>
+        <p>Column 2</p>
+      </div>
+      <div class="card text-center">
+        <pds-icon icon="circle" size="md" class="icon-danger"></pds-icon>
+        <p>Column 3</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <h3>Four Column Grid (.grid-cols-4)</h3>
+    <div class="grid grid-cols-4 gap-xs">
+      ${Array.from({ length: 4 }, (_, i) => html`
+        <div class="card text-center">
+          <strong>${i + 1}</strong>
+        </div>
+      `)}
+    </div>
+  </div>
+`;
+
+FixedColumnGrids.storyName = 'Fixed Column Grids';
+
+export const AutoFitGrids = () => html`
+  <div class="card">
+    <h3>.grid-auto-sm (min 150px)</h3>
+    <p class="text-muted">
+      <em>Resize the window to see columns automatically adjust</em>
+    </p>
+    <div class="grid grid-auto-sm gap-md">
+      <div class="card text-center">
+        <pds-icon icon="desktop" size="lg" class="icon-info"></pds-icon>
+        <h5>Responsive</h5>
+        <p>Automatically wraps</p>
+      </div>
+      <div class="card text-center">
+        <pds-icon icon="device-mobile" size="lg" class="icon-info"></pds-icon>
+        <h5>Adaptive</h5>
+        <p>Based on space</p>
+      </div>
+      <div class="card text-center">
+        <pds-icon icon="globe" size="lg" class="icon-info"></pds-icon>
+        <h5>Flexible</h5>
+        <p>Resize the window</p>
+      </div>
+      <div class="card text-center">
+        <pds-icon icon="feather" size="lg" class="icon-info"></pds-icon>
+        <h5>Dynamic</h5>
+        <p>No breakpoints needed</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <h3>.grid-auto-md (min 250px)</h3>
+    <div class="grid grid-auto-md gap-lg">
+      <div class="card surface-elevated text-center">
+        <pds-icon icon="rocket" size="xl" class="icon-accent"></pds-icon>
+        <h5>Card 1</h5>
+        <p>Larger minimum width means fewer columns on small screens</p>
+      </div>
+      <div class="card surface-elevated text-center">
+        <pds-icon icon="palette" size="xl" class="icon-accent"></pds-icon>
+        <h5>Card 2</h5>
+        <p>Smart surface tokens apply automatically</p>
+      </div>
+      <div class="card surface-elevated text-center">
+        <pds-icon icon="heart" size="xl" class="icon-accent"></pds-icon>
+        <h5>Card 3</h5>
+        <p>Consistent spacing with gap utilities</p>
+      </div>
+    </div>
+  </div>
+`;
+
+AutoFitGrids.storyName = 'Auto-Fit Responsive Grids';
+
+export const GapUtilities = () => html`
+  <div class="card">
+    <h2>Gap Utilities</h2>
+    <p>Control spacing between grid items with <code>.gap-{size}</code> classes</p>
+  </div>
+
+  <h3>.gap-xs (spacing-1)</h3>
+  <div class="card">
+    <div class="grid grid-cols-3 gap-xs">
+      ${Array.from({ length: 3 }, (_, i) => html`
+        <div class="card text-center">
+          <strong>${String.fromCharCode(65 + i)}</strong>
+        </div>
+      `)}
+    </div>
+  </div>
+
+  <h3>.gap-sm (spacing-2)</h3>
+  <div class="card">
+    <div class="grid grid-cols-3 gap-sm">
+      ${Array.from({ length: 3 }, (_, i) => html`
+        <div class="card text-center">
+          <strong>${String.fromCharCode(65 + i)}</strong>
+        </div>
+      `)}
+    </div>
+  </div>
+
+  <h3>.gap-md (spacing-4)</h3>
+  <div class="card">
+    <div class="grid grid-cols-3 gap-md">
+      ${Array.from({ length: 3 }, (_, i) => html`
+        <div class="card text-center">
+          <strong>${String.fromCharCode(65 + i)}</strong>
+        </div>
+      `)}
+    </div>
+  </div>
+
+  <h3>.gap-lg (spacing-6)</h3>
+  <div class="card">
+    <div class="grid grid-cols-3 gap-lg">
+      ${Array.from({ length: 3 }, (_, i) => html`
+        <div class="card text-center">
+          <strong>${String.fromCharCode(65 + i)}</strong>
+        </div>
+      `)}
+    </div>
+  </div>
+`;
+
+GapUtilities.storyName = 'Gap Utilities';
+
+export const CardGridLayouts = () => html`
+  ${gridSystemStoryStyles}
+  <div class="card">
+    <h2>Card Grid Layouts</h2>
+    <p>Practical examples using grid utilities for card-based layouts</p>
+    
+    <div class="grid grid-cols-3 gap-md">
+      <div class="card">
+        <pds-icon icon="palette" size="xl" class="icon-primary"></pds-icon>
+        <h5 class="grid-system-card-title">Design</h5>
+        <p>Smart surfaces handle theming automatically</p>
+      </div>
+      <div class="card">
+        <pds-icon icon="code" size="xl" class="icon-success"></pds-icon>
+        <h5 class="grid-system-card-title">Development</h5>
+        <p>Zero manual color overrides needed</p>
+      </div>
+      <div class="card">
+        <pds-icon icon="rocket" size="xl" class="icon-info"></pds-icon>
+        <h5 class="grid-system-card-title">Performance</h5>
+        <p>CSS custom properties are fast</p>
+      </div>
+    </div>
+  </div>
+`;
+
+CardGridLayouts.storyName = 'Card Grid Layouts';

package/stories/utils/PdsAsk.stories.js

@@ -0,0 +1,420 @@
+import { html } from 'lit';
+import { ask as askFallback } from '../../../../src/js/common/ask.js';
+import { toastFormData } from './toast-utils.js';
+
+const ensureAsk = () => {
+  if (typeof window !== 'undefined' && window.PDS?.ask) {
+    return window.PDS.ask;
+  }
+  return askFallback;
+};
+
+const marketingSchema = {
+  type: 'object',
+  properties: {
+    headline: {
+      type: 'string',
+      title: 'Headline',
+      minLength: 10,
+      examples: ['Supercharge collaboration across your org']
+    },
+    description: {
+      type: 'string',
+      title: 'Supporting copy',
+      minLength: 20,
+      examples: ['Surface key metrics, share insights instantly, and keep every team aligned.']
+    },
+    ctaLabel: {
+      type: 'string',
+      title: 'CTA label',
+      default: 'Schedule a demo'
+    },
+    emphasis: {
+      type: 'string',
+      title: 'Visual style',
+      enum: ['balanced', 'quiet', 'loud'],
+      default: 'balanced'
+    },
+    audiences: {
+      type: 'array',
+      title: 'Target audiences',
+      items: {
+        type: 'string',
+        enum: ['Design Leadership', 'Product Teams', 'Engineering', 'Marketing']
+      },
+      uniqueItems: true
+    }
+  },
+  required: ['headline', 'description', 'ctaLabel']
+};
+
+const marketingUiSchema = {
+  description: {
+    'ui:widget': 'textarea',
+    'ui:options': {
+      rows: 3
+    }
+  },
+  audiences: {
+    'ui:widget': 'checkboxes'
+  }
+};
+
+const marketingInitialValues = {
+  headline: 'Supercharge collaboration across your org',
+  description: 'Surface key metrics, share insights instantly, and keep every team aligned.',
+  ctaLabel: 'Schedule a demo',
+  emphasis: 'balanced',
+  audiences: ['Design Leadership', 'Product Teams']
+};
+
+const formDataToObject = (formData) => {
+  const entries = Object.fromEntries(formData.entries());
+  return entries;
+};
+
+const askStoryStyles = html`
+  <style>
+    .ask-card {
+      padding: var(--spacing-6, 1.5rem);
+      border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.08));
+      border-radius: var(--radius-lg, 16px);
+      background: var(--surface-base, #ffffff);
+    }
+    .ask-card--sm {
+      max-width: 26.25rem;
+    }
+    .ask-card--md {
+      max-width: 30rem;
+    }
+    .ask-card--lg {
+      max-width: 32.5rem;
+    }
+    .ask-card--xl {
+      max-width: 38.75rem;
+    }
+    .ask-card-heading {
+      margin: 0;
+    }
+    .ask-card-status {
+      margin: 0;
+      color: var(--surface-muted-text, rgba(0, 0, 0, 0.6));
+    }
+    .ask-card-list {
+      padding-left: var(--spacing-6, 1.5rem);
+    }
+    .ask-dialog-form {
+      min-width: 22.5rem;
+    }
+    .ask-dialog-form--wide {
+      min-width: 30rem;
+    }
+  </style>
+`;
+
+export default {
+  title: 'Utilities/PDS ask',
+  tags: ['interaction', 'dialogs', 'forms'],
+  parameters: {
+    pds: {
+      tags: ['interaction', 'dialogs', 'forms', 'pds-ask']
+    },
+    docs: {
+      description: {
+        component: `The \`PDS.ask()\` helper wraps the native \`<dialog>\` element with PDS styling and a promise-based API.
+Use it to collect quick confirmations or to stage entire forms before committing data back to the host application.`
+      }
+    }
+  }
+};
+
+export const BareConfirm = {
+  name: 'Are you sure?',
+  render: () => {
+    const handleClick = async (event) => {
+      const ask = ensureAsk();
+      const container = event.currentTarget.closest('[data-ask-example]');
+      const status = container?.querySelector('[data-status]');
+
+      if (status) {
+        status.textContent = 'Asking…';
+      }
+
+      const confirmed = await ask('This uses the default buttons and styling.');
+
+      if (status) {
+        status.textContent = confirmed
+          ? '✅ User confirmed the action.'
+          : '❎ User cancelled.';
+      }
+
+      await toastFormData({ confirmed, scenario: 'bare-confirm' });
+    };
+
+    return html`
+      ${askStoryStyles}
+      <section
+        data-ask-example
+        class="ask-card ask-card--sm flex flex-col gap-md"
+      >
+        <h3 class="ask-card-heading">Default confirm dialog</h3>
+        <p>
+          No custom options supplied—just a message string. The helper wires up buttons, focus, and the promise result for you.
+        </p>
+        <button class="btn" @click=${handleClick}>Ask “Are you sure?”</button>
+        <p data-status class="ask-card-status">Waiting…</p>
+      </section>
+    `;
+  }
+};
+
+export const SimpleForm = {
+  name: 'Mini form submission',
+  render: () => {
+    const handleClick = async (event) => {
+      const ask = ensureAsk();
+      const container = event.currentTarget.closest('[data-ask-example]');
+      const status = container?.querySelector('[data-status]');
+
+      if (status) {
+        status.textContent = 'Opening form…';
+      }
+
+      const result = await ask(
+        html`
+          <form method="dialog" class="ask-dialog-form flex flex-col gap-sm">
+            <label class="flex flex-col gap-xs">
+              <span>Name</span>
+              <input name="name" required placeholder="Alex Rivera" />
+            </label>
+            <label class="flex flex-col gap-xs">
+              <span>Email</span>
+              <input type="email" name="email" required placeholder="alex@example.com" />
+            </label>
+            <label class="flex flex-col gap-xs">
+              <span>Team size</span>
+              <select class="select" name="teamSize">
+                <option value="1-5">1-5</option>
+                <option value="6-20">6-20</option>
+                <option value="21-100">21-100</option>
+                <option value="101+">101+</option>
+              </select>
+            </label>
+          </form>
+        `,
+        {
+          title: 'Share your details',
+          useForm: true,
+          buttons: {
+            ok: { name: 'Submit', primary: true },
+            cancel: { name: 'Cancel', cancel: true }
+          }
+        }
+      );
+
+      if (result instanceof FormData) {
+        if (status) {
+          status.textContent = '✅ Submitted! (check toast for values)';
+        }
+        await toastFormData(result);
+      } else {
+        if (status) {
+          status.textContent = 'Submission cancelled.';
+        }
+        await toastFormData({ cancelled: true, scenario: 'simple-form' });
+      }
+    };
+
+    return html`
+      ${askStoryStyles}
+      <section
+        data-ask-example
+        class="ask-card ask-card--md flex flex-col gap-md"
+      >
+        <h3 class="ask-card-heading">Collect a few fields</h3>
+        <p>
+          A plain HTML form inside the dialog captures values through <code>FormData</code> when the OK button fires.
+        </p>
+        <button class="btn btn-primary" @click=${handleClick}>Open mini form</button>
+        <p data-status class="ask-card-status">No submission yet.</p>
+      </section>
+    `;
+  }
+};
+
+export const QuickConfirm = {
+  name: 'Boolean confirm flow',
+  render: () => {
+    const handleClick = async (event) => {
+      const ask = ensureAsk();
+      const container = event.currentTarget.closest('[data-ask-example]');
+      const status = container?.querySelector('[data-status]');
+
+      if (status) {
+        status.textContent = 'Waiting for a decision…';
+      }
+
+      const decision = await ask(
+        html`
+          <div class="flex flex-col gap-sm">
+            <p>This dialog comes from <code>PDS.ask()</code> and resolves with a simple boolean.</p>
+            <ul class="ask-card-list list-disc">
+              <li>Handles focus trapping and ESC cancel automatically.</li>
+              <li>Resolves to <code>true</code> when the primary button is pressed.</li>
+              <li>Returns <code>false</code> if the user cancels or closes the dialog.</li>
+            </ul>
+          </div>
+        `,
+        {
+          title: 'Archive analytics project?',
+          buttons: {
+            ok: { name: 'Archive project', primary: true },
+            cancel: { name: 'Keep active', cancel: true }
+          }
+        }
+      );
+
+      if (decision) {
+        if (status) {
+          status.textContent = '✅ Archived via PDS.ask()';
+        }
+        await toastFormData({ confirmed: true, action: 'archive-project' });
+      } else {
+        if (status) {
+          status.textContent = '✋ Cancelled — nothing changed';
+        }
+        await toastFormData({ confirmed: false, action: 'archive-project' });
+      }
+    };
+
+    return html`
+      ${askStoryStyles}
+      <section
+        data-ask-example
+        class="ask-card ask-card--lg flex flex-col gap-md"
+      >
+        <h3 class="ask-card-heading">Lightweight confirmations</h3>
+        <p>
+          Click the button to open a fully styled modal dialog. When it resolves, the promise gives you a
+          boolean — ideal for gating destructive actions without wiring any extra event listeners.
+        </p>
+        <button class="btn btn-primary" @click=${handleClick}>Archive project</button>
+        <p data-status class="ask-card-status">No dialog shown yet.</p>
+      </section>
+    `;
+  }
+};
+
+export const JsonformSubdialog = {
+  name: 'Embed a pds-jsonform subform',
+  render: () => {
+    const handleClick = async (event) => {
+      const ask = ensureAsk();
+      const container = event.currentTarget.closest('[data-ask-example]');
+      const status = container?.querySelector('[data-status]');
+
+      if (status) {
+        status.textContent = 'Opening editor…';
+      }
+
+      const dialogResult = await ask(
+        html`
+          <form method="dialog" class="ask-dialog-form ask-dialog-form--wide flex flex-col gap-md">
+            <pds-jsonform
+              id="spotlight-form"
+              .jsonSchema=${marketingSchema}
+              .uiSchema=${marketingUiSchema}
+              .values=${marketingInitialValues}
+              hide-actions
+            ></pds-jsonform>
+            <input type="hidden" name="spotlight" value="" />
+          </form>
+        `,
+        {
+          title: 'Marketing spotlight',
+          useForm: true,
+          buttons: {
+            ok: { name: 'Save changes', primary: true },
+            cancel: { name: 'Cancel', cancel: true }
+          },
+          rendered(dialog) {
+            const form = dialog.querySelector('form');
+            const subform = dialog.querySelector('#spotlight-form');
+            const hidden = dialog.querySelector('input[name="spotlight"]');
+
+            const syncHidden = (payload) => {
+              if (!hidden) return;
+              const nextValue =
+                payload?.json ??
+                payload?.value ??
+                (() => {
+                  if (!subform?.serialize) return undefined;
+                  try {
+                    const { json } = subform.serialize();
+                    return json;
+                  } catch (error) {
+                    return { error: error?.message || 'Failed to serialize' };
+                  }
+                })();
+
+              hidden.value = JSON.stringify(nextValue ?? {});
+            };
+
+            if (subform) {
+              const handleValueChange = (evt) => syncHidden(evt.detail);
+              subform.addEventListener('pw:value-change', handleValueChange);
+              subform.addEventListener('pw:submit', (evt) => {
+                evt.preventDefault();
+                syncHidden(evt.detail);
+                const submitter = form?.querySelector('button[value="ok"]') || undefined;
+                form?.requestSubmit(submitter);
+              });
+
+              if (typeof customElements?.whenDefined === 'function') {
+                customElements.whenDefined('pds-jsonform').then(() => syncHidden());
+              } else {
+                syncHidden();
+              }
+            }
+          }
+        }
+      );
+
+      if (dialogResult instanceof FormData) {
+        await toastFormData(dialogResult);
+        const asObject = formDataToObject(dialogResult);
+        let parsed;
+        try {
+          parsed = asObject.spotlight ? JSON.parse(asObject.spotlight) : null;
+        } catch (error) {
+          parsed = null;
+        }
+
+        if (status) {
+          const headline = parsed?.headline || 'Draft saved';
+          status.textContent = `✅ Saved: ${headline}`;
+        }
+      } else {
+        if (status) {
+          status.textContent = 'Dialog cancelled — existing content preserved';
+        }
+      }
+    };
+
+    return html`
+      ${askStoryStyles}
+      <section
+        data-ask-example
+        class="ask-card ask-card--xl flex flex-col gap-md"
+      >
+        <h3 class="ask-card-heading">Deep editing workflows</h3>
+        <p>
+          Use <code>PDS.ask()</code> with <code>useForm: true</code> to mount an entire <code>&lt;pds-jsonform&gt;</code>
+          inside the dialog. The promise resolves with the form data, letting you merge the changes into the parent flow.
+        </p>
+        <button class="btn btn-outline" @click=${handleClick}>Edit spotlight copy</button>
+        <p data-status class="ask-card-status">No edits made yet.</p>
+      </section>
+    `;
+  }
+};