@pure-ds/storybook 0.1.0

package/stories/primitives/Media.stories.js

@@ -0,0 +1,203 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Primitives/Media Elements',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Responsive images, figures with captions, image galleries, and video elements with proper semantic HTML.'
+      }
+    }
+  }
+};
+
+const mediaStoryStyles = html`
+  <style>
+    .media-story-section {
+      padding: var(--spacing-4);
+    }
+    .media-responsive-grid {
+      display: grid;
+      gap: var(--spacing-6);
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+    .media-gallery-grid {
+      display: grid;
+      gap: var(--spacing-3);
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+    .media-scroll-image,
+    .media-gallery-image {
+      width: 100%;
+      height: auto;
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+    }
+    .media-scroll-image {
+      width: auto;
+    }
+    .media-video-shell {
+      max-width: 56.25rem;
+    }
+    .media-video-figure {
+      margin-top: var(--spacing-4);
+    }
+    .media-video-element {
+      width: 100%;
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-md);
+    }
+    .media-mixed-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-6);
+      margin-top: var(--spacing-4);
+    }
+    .media-thumbnail-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--spacing-2);
+    }
+    .media-thumbnail-image {
+      width: 100%;
+      border-radius: var(--radius-sm);
+      box-shadow: var(--shadow-sm);
+    }
+  </style>
+`;
+
+export const ResponsiveImages = () => html`
+  ${mediaStoryStyles}
+  <div class="media-story-section">
+    <div class="media-responsive-grid">
+      <figure class="media-figure">
+        <img
+          class="media-image"
+          src="https://picsum.photos/800/600?random=1"
+          alt="Random landscape"
+          loading="lazy"
+        />
+        <figcaption class="media-caption">
+          <strong>Figure 1:</strong> A beautiful landscape demonstrating image handling in the design system.
+        </figcaption>
+      </figure>
+
+      <figure class="media-figure">
+        <img
+          class="media-image"
+          src="https://picsum.photos/800/600?random=2"
+          alt="Random architecture"
+          loading="lazy"
+        />
+        <figcaption class="media-caption">
+          <strong>Figure 2:</strong> Architectural photography showcasing the responsive image behavior.
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+`;
+
+ResponsiveImages.storyName = 'Responsive Images';
+
+export const ImageGallery = () => html`
+  ${mediaStoryStyles}
+  <div class="media-story-section">
+    <h3>Image Gallery Grid</h3>
+    <div class="gallery-grid media-gallery-grid">
+      ${Array.from({ length: 8 }, (_, i) => html`
+        <img
+          class="gallery-image media-gallery-image"
+          src="https://picsum.photos/400/400?random=${i + 3}"
+          alt="Gallery image ${i + 1}"
+          loading="lazy"
+        />
+      `)}
+    </div>
+  </div>
+`;
+
+ImageGallery.storyName = 'Image Gallery';
+
+export const ScrollRowGallery = () => html`
+  ${mediaStoryStyles}
+  <div class="media-story-section">
+    <h3>Netflix-Style Horizontal Scroll Row</h3>
+    <pds-scrollrow>
+      ${Array.from({ length: 20 }, (_, i) => html`
+        <img
+          loading="lazy"
+          class="gallery-image media-scroll-image"
+          src="https://picsum.photos/200/200?random=${i + 10}"
+          alt="Gallery image ${i + 1}"
+        />
+      `)}
+    </pds-scrollrow>
+  </div>
+`;
+
+ScrollRowGallery.storyName = 'Horizontal Scroll Row';
+
+export const VideoElement = () => html`
+  ${mediaStoryStyles}
+  <div class="media-story-section media-video-shell">
+    <h3>Video Element with Controls</h3>
+    <figure class="video-container media-video-figure">
+      <video
+        class="video-element media-video-element"
+        controls
+        poster="https://picsum.photos/1200/675?random=7"
+      >
+        <source
+          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          type="video/mp4"
+        />
+        Your browser does not support the video tag.
+      </video>
+      <figcaption class="media-caption">
+        <strong>Video Demo:</strong> Big Buck Bunny sample video demonstrating video element styling.
+      </figcaption>
+    </figure>
+  </div>
+`;
+
+VideoElement.storyName = 'Video Element';
+
+export const MixedMedia = () => html`
+  ${mediaStoryStyles}
+  <div class="media-story-section">
+    <h2>Mixed Media Layout</h2>
+    
+    <div class="media-mixed-layout">
+      <div>
+        <h3>Featured Image</h3>
+        <figure class="media-figure">
+          <img
+            class="media-image"
+            src="https://picsum.photos/600/400?random=20"
+            alt="Featured content"
+            loading="lazy"
+          />
+          <figcaption class="media-caption">
+            High-resolution featured image with caption
+          </figcaption>
+        </figure>
+      </div>
+      
+      <div>
+        <h3>Thumbnail Grid</h3>
+        <div class="media-thumbnail-grid">
+          ${Array.from({ length: 4 }, (_, i) => html`
+            <img
+              src="https://picsum.photos/200/200?random=${i + 30}"
+              alt="Thumbnail ${i + 1}"
+              loading="lazy"
+              class="media-thumbnail-image"
+            />
+          `)}
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+MixedMedia.storyName = 'Mixed Media Layout';

package/stories/primitives/Tables.stories.js

@@ -0,0 +1,232 @@
+import { html } from 'lit';
+
+const tablesStoryStyles = html`
+  <style>
+    .table-story-section {
+      padding: var(--spacing-4);
+    }
+
+    .table-story-description {
+      margin: 0 0 var(--spacing-4);
+      font-style: italic;
+    }
+
+    .table-story-scroll {
+      overflow-x: auto;
+    }
+  </style>
+`;
+
+export default {
+  title: 'Primitives/Tables',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Responsive tables with various styling options including striped, bordered, and compact variants.'
+      }
+    }
+  }
+};
+
+export const DefaultTable = () => html`
+  ${tablesStoryStyles}
+  <section class="table-story-section">
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Role</th>
+          <th>Department</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Alice Johnson</td>
+          <td>Senior Developer</td>
+          <td>Engineering</td>
+          <td><span class="badge badge-success">Active</span></td>
+        </tr>
+        <tr>
+          <td>Bob Smith</td>
+          <td>Product Manager</td>
+          <td>Product</td>
+          <td><span class="badge badge-success">Active</span></td>
+        </tr>
+        <tr>
+          <td>Carol Williams</td>
+          <td>UX Designer</td>
+          <td>Design</td>
+          <td><span class="badge badge-warning">Away</span></td>
+        </tr>
+        <tr>
+          <td>David Brown</td>
+          <td>DevOps Engineer</td>
+          <td>Engineering</td>
+          <td><span class="badge badge-danger">Offline</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+`;
+
+DefaultTable.storyName = 'Default Table';
+
+export const StripedTable = () => html`
+  ${tablesStoryStyles}
+  <section class="table-story-section">
+    <table class="table-striped">
+      <thead>
+        <tr>
+          <th>Product</th>
+          <th>Price</th>
+          <th>Stock</th>
+          <th>Category</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Laptop Pro</td>
+          <td>$1,299</td>
+          <td>45</td>
+          <td>Electronics</td>
+        </tr>
+        <tr>
+          <td>Wireless Mouse</td>
+          <td>$29</td>
+          <td>128</td>
+          <td>Accessories</td>
+        </tr>
+        <tr>
+          <td>USB-C Hub</td>
+          <td>$59</td>
+          <td>76</td>
+          <td>Accessories</td>
+        </tr>
+        <tr>
+          <td>Monitor 27"</td>
+          <td>$449</td>
+          <td>23</td>
+          <td>Electronics</td>
+        </tr>
+        <tr>
+          <td>Mechanical Keyboard</td>
+          <td>$149</td>
+          <td>92</td>
+          <td>Accessories</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+`;
+
+StripedTable.storyName = 'Striped Table';
+
+export const BorderedCompactTable = () => html`
+  ${tablesStoryStyles}
+  <section class="table-story-section">
+    <table class="table-bordered table-compact">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Task</th>
+          <th>Priority</th>
+          <th>Due Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>#101</td>
+          <td>Fix navigation bug</td>
+          <td><span class="badge badge-danger">High</span></td>
+          <td>Nov 15, 2025</td>
+        </tr>
+        <tr>
+          <td>#102</td>
+          <td>Update documentation</td>
+          <td><span class="badge badge-warning">Medium</span></td>
+          <td>Nov 18, 2025</td>
+        </tr>
+        <tr>
+          <td>#103</td>
+          <td>Refactor CSS</td>
+          <td><span class="badge badge-info">Low</span></td>
+          <td>Nov 25, 2025</td>
+        </tr>
+        <tr>
+          <td>#104</td>
+          <td>Add unit tests</td>
+          <td><span class="badge badge-warning">Medium</span></td>
+          <td>Nov 20, 2025</td>
+        </tr>
+        <tr>
+          <td>#105</td>
+          <td>Performance audit</td>
+          <td><span class="badge badge-danger">High</span></td>
+          <td>Nov 17, 2025</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+`;
+
+BorderedCompactTable.storyName = 'Bordered Compact Table';
+
+export const ResponsiveTable = () => html`
+  ${tablesStoryStyles}
+  <section class="table-story-section">
+    <p class="table-story-description">
+      Resize the window to see horizontal scrolling on small screens
+    </p>
+    <div class="table-story-scroll">
+      <table class="table-striped">
+        <thead>
+          <tr>
+            <th>Order ID</th>
+            <th>Customer</th>
+            <th>Product</th>
+            <th>Quantity</th>
+            <th>Price</th>
+            <th>Total</th>
+            <th>Date</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>#ORD-001</td>
+            <td>John Doe</td>
+            <td>Premium Widget</td>
+            <td>3</td>
+            <td>$49.99</td>
+            <td>$149.97</td>
+            <td>Nov 15, 2025</td>
+            <td><span class="badge badge-success">Shipped</span></td>
+          </tr>
+          <tr>
+            <td>#ORD-002</td>
+            <td>Jane Smith</td>
+            <td>Standard Gadget</td>
+            <td>1</td>
+            <td>$29.99</td>
+            <td>$29.99</td>
+            <td>Nov 14, 2025</td>
+            <td><span class="badge badge-warning">Processing</span></td>
+          </tr>
+          <tr>
+            <td>#ORD-003</td>
+            <td>Bob Johnson</td>
+            <td>Deluxe Device</td>
+            <td>2</td>
+            <td>$99.99</td>
+            <td>$199.98</td>
+            <td>Nov 13, 2025</td>
+            <td><span class="badge badge-success">Delivered</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+`;
+
+ResponsiveTable.storyName = 'Responsive Table';

package/stories/reference/ReferenceCatalog.stories.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import referenceData from '../../dist/pds-reference.json';
+import './reference-catalog.js';
+
+export default {
+  title: 'Reference/Developer Catalog',
+  tags: ['reference', 'docs', 'internal'],
+  parameters: {
+    layout: 'fullscreen',
+    pds: {
+      tags: ['reference', 'catalog', 'developer']
+    },
+    docs: {
+      description: {
+        component: `Auto-generated reference that merges:
+- <code>custom-elements.json</code> manifest data
+- <code>src/js/pds-core/pds-ontology.js</code>
+- Storybook metadata (pds tags + docs)
+
+Run <code>npm run build-reference</code> to refresh the JSON pipeline before launching Storybook.`
+      }
+    }
+  }
+};
+
+export const Catalog = {
+  render: () => html`<pds-reference-catalog .data=${referenceData}></pds-reference-catalog>`
+};