@getmicdrop/svelte-components 5.0.0 → 5.1.1

package/dist/stories/ButtonAuditDashboard.svelte

@@ -0,0 +1,444 @@
+<script>
+  import Button from '../primitives/Button/Button.svelte';
+  import manifest from './button-audit-manifest.json';
+
+  // Config - adjust these for your setup
+  const FRONTEND_DEV_URL = 'http://localhost:5173';
+
+  // Dark mode toggle
+  let isDark = $state(false);
+
+  function toggleDarkMode() {
+    isDark = !isDark;
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  // Preview modal state
+  let previewModal = $state({ open: false, url: '', title: '', file: '' });
+
+  function openPreview(route, file) {
+    // Convert file path to URL route
+    // routes/admin/venues/+page.svelte -> /admin/venues
+    // routes/login/+page.svelte -> /login
+    let urlPath = file
+      .replace(/^routes/, '')
+      .replace(/\/?\+[^/]+\.svelte$/, '')
+      .replace(/\[([^\]]+)\]/g, ':$1'); // Convert [param] to :param for display
+
+    if (!urlPath || urlPath === '/') urlPath = '/';
+
+    previewModal = {
+      open: true,
+      url: `${FRONTEND_DEV_URL}${urlPath}`,
+      title: route,
+      file: file
+    };
+  }
+
+  function closePreview() {
+    previewModal = { open: false, url: '', title: '', file: '' };
+  }
+
+  // Check if a file is previewable (only route pages, not components)
+  function isPreviewable(file) {
+    return file.startsWith('routes/') && file.includes('+page');
+  }
+
+  // Collapsible state for categories
+  let expandedCategories = $state(new Set());
+  let expandedFiles = $state(new Set());
+
+  function toggleCategory(category) {
+    const newSet = new Set(expandedCategories);
+    if (newSet.has(category)) {
+      newSet.delete(category);
+    } else {
+      newSet.add(category);
+    }
+    expandedCategories = newSet;
+  }
+
+  function toggleFile(fileKey) {
+    const newSet = new Set(expandedFiles);
+    if (newSet.has(fileKey)) {
+      newSet.delete(fileKey);
+    } else {
+      newSet.add(fileKey);
+    }
+    expandedFiles = newSet;
+  }
+
+  function expandAll() {
+    expandedCategories = new Set(Object.keys(manifest.categories));
+    const allFiles = Object.values(manifest.categories).flatMap(routes =>
+      routes.map(r => r.fullPath)
+    );
+    expandedFiles = new Set(allFiles);
+  }
+
+  function collapseAll() {
+    expandedCategories = new Set();
+    expandedFiles = new Set();
+  }
+
+  // Generate VS Code link
+  function getVSCodeLink(fullPath, line) {
+    return `vscode://file${fullPath}:${line}`;
+  }
+
+  // Get variant badge color
+  function getVariantColor(variant) {
+    switch (variant) {
+      case 'blue-solid': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+      case 'gray-outline': return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+      case 'blue-outline': return 'bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300';
+      case 'gray-text': return 'bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
+      case 'red-solid': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+      case 'red-outline': return 'bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-300';
+      case 'green-solid': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+      case 'icon': return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+      case 'ghost': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+    }
+  }
+
+  // Filter state
+  let variantFilter = $state('all');
+  let sizeFilter = $state('all');
+  let searchQuery = $state('');
+
+  // Get all unique variants and sizes
+  const allVariants = [...new Set(
+    Object.values(manifest.categories)
+      .flatMap(routes => routes.flatMap(r => r.buttons.map(b => b.variant)))
+  )].sort();
+
+  const allSizes = [...new Set(
+    Object.values(manifest.categories)
+      .flatMap(routes => routes.flatMap(r => r.buttons.map(b => b.size)))
+  )].sort();
+
+  // Filter function
+  function shouldShowButton(button) {
+    if (variantFilter !== 'all' && button.variant !== variantFilter) return false;
+    if (sizeFilter !== 'all' && button.size !== sizeFilter) return false;
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      return button.text.toLowerCase().includes(query) ||
+             button.variant.toLowerCase().includes(query);
+    }
+    return true;
+  }
+
+  // Computed filtered stats
+  let filteredStats = $derived.by(() => {
+    let total = 0;
+    let shown = 0;
+    for (const routes of Object.values(manifest.categories)) {
+      for (const route of routes) {
+        for (const button of route.buttons) {
+          total++;
+          if (shouldShowButton(button)) shown++;
+        }
+      }
+    }
+    return { total, shown };
+  });
+
+  // Sort categories by button count
+  const sortedCategories = Object.entries(manifest.categories)
+    .map(([name, routes]) => ({
+      name,
+      routes,
+      buttonCount: routes.reduce((sum, r) => sum + r.buttons.length, 0)
+    }))
+    .sort((a, b) => b.buttonCount - a.buttonCount);
+</script>
+
+<div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+  <!-- Sticky Header -->
+  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
+    <div class="max-w-7xl mx-auto px-4 py-4">
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Button Audit Dashboard</h1>
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            {filteredStats.shown} of {filteredStats.total} buttons from micdrop-frontend
+            <span class="text-xs ml-2">Generated: {new Date(manifest.generated).toLocaleString()}</span>
+          </p>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <!-- Expand/Collapse All -->
+          <button
+            onclick={expandAll}
+            class="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+          >
+            Expand All
+          </button>
+          <button
+            onclick={collapseAll}
+            class="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+          >
+            Collapse All
+          </button>
+
+          <!-- Dark mode toggle -->
+          <button
+            onclick={toggleDarkMode}
+            class="px-4 py-2 rounded-lg font-medium transition-all {isDark
+              ? 'bg-yellow-500 text-black hover:bg-yellow-400'
+              : 'bg-gray-800 text-white hover:bg-gray-700'}"
+          >
+            {#if isDark}
+              ☀️ Light
+            {:else}
+              🌙 Dark
+            {/if}
+          </button>
+        </div>
+      </div>
+
+      <!-- Filters Row -->
+      <div class="flex flex-wrap items-center gap-4 mt-4">
+        <!-- Search -->
+        <div class="flex-1 min-w-48">
+          <input
+            type="text"
+            bind:value={searchQuery}
+            placeholder="Search button text..."
+            class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400"
+          />
+        </div>
+
+        <!-- Variant Filter -->
+        <select
+          bind:value={variantFilter}
+          class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+        >
+          <option value="all">All Variants</option>
+          {#each allVariants as variant}
+            <option value={variant}>{variant}</option>
+          {/each}
+        </select>
+
+        <!-- Size Filter -->
+        <select
+          bind:value={sizeFilter}
+          class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+        >
+          <option value="all">All Sizes</option>
+          {#each allSizes as size}
+            <option value={size}>{size}</option>
+          {/each}
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  <div class="max-w-7xl mx-auto px-4 py-6 space-y-4">
+    {#each sortedCategories as category}
+      {@const visibleButtons = category.routes
+        .flatMap(r => r.buttons)
+        .filter(shouldShowButton)}
+
+      {#if visibleButtons.length > 0}
+        <!-- Category Section -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <!-- Category Header -->
+          <button
+            onclick={() => toggleCategory(category.name)}
+            class="w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+          >
+            <div class="flex items-center gap-3">
+              <span class="text-xl">{expandedCategories.has(category.name) ? '▼' : '▶'}</span>
+              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{category.name}</h2>
+              <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                {visibleButtons.length} buttons
+              </span>
+              <span class="text-sm text-gray-500 dark:text-gray-400">
+                in {category.routes.length} files
+              </span>
+            </div>
+          </button>
+
+          <!-- Category Content -->
+          {#if expandedCategories.has(category.name)}
+            <div class="border-t border-gray-200 dark:border-gray-700">
+              {#each category.routes as route}
+                {@const routeVisibleButtons = route.buttons.filter(shouldShowButton)}
+
+                {#if routeVisibleButtons.length > 0}
+                  <!-- File Section -->
+                  <div class="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0">
+                    <button
+                      onclick={() => toggleFile(route.fullPath)}
+                      class="w-full flex items-center justify-between px-6 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors text-left"
+                    >
+                      <div class="flex items-center gap-2 min-w-0">
+                        <span class="text-gray-400">{expandedFiles.has(route.fullPath) ? '▾' : '▸'}</span>
+                        <code class="text-sm text-gray-600 dark:text-gray-300 truncate">{route.file}</code>
+                        <a
+                          href={getVSCodeLink(route.fullPath, 1)}
+                          onclick={(e) => e.stopPropagation()}
+                          class="text-xs text-blue-500 hover:text-blue-700 dark:text-blue-400 hover:underline"
+                          title="Open in VS Code"
+                        >
+                          📂 Open
+                        </a>
+                      </div>
+                      <div class="flex items-center gap-2 flex-shrink-0 ml-2">
+                        {#if isPreviewable(route.file)}
+                          <button
+                            onclick={(e) => { e.stopPropagation(); openPreview(route.route, route.file); }}
+                            class="px-2 py-0.5 text-xs rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800"
+                            title="Preview this page"
+                          >
+                            👁️ Preview
+                          </button>
+                        {/if}
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
+                          {routeVisibleButtons.length} buttons
+                        </span>
+                      </div>
+                    </button>
+
+                    <!-- Buttons Grid -->
+                    {#if expandedFiles.has(route.fullPath)}
+                      <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900/50">
+                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                          {#each routeVisibleButtons as button, idx}
+                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600 space-y-3">
+                              <!-- Button Preview -->
+                              <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg min-h-[60px]">
+                                <Button
+                                  variant={button.variant}
+                                  size={button.size}
+                                  loading={button.loading}
+                                  disabled={button.disabled}
+                                  danger={button.danger}
+                                  deemphasized={button.deemphasized}
+                                >
+                                  {button.text === '(no text)' ? 'Button' : button.text.slice(0, 30)}{button.text.length > 30 ? '...' : ''}
+                                </Button>
+                              </div>
+
+                              <!-- Metadata -->
+                              <div class="space-y-2">
+                                <div class="flex flex-wrap gap-1">
+                                  <span class="px-2 py-0.5 text-xs font-medium rounded {getVariantColor(button.variant)}">
+                                    {button.variant}
+                                  </span>
+                                  <span class="px-2 py-0.5 text-xs font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+                                    {button.size}
+                                  </span>
+                                  {#if button.loading}
+                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200">loading</span>
+                                  {/if}
+                                  {#if button.disabled}
+                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-300">disabled</span>
+                                  {/if}
+                                  {#if button.danger}
+                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200">danger</span>
+                                  {/if}
+                                </div>
+
+                                <div class="flex items-center justify-between text-xs">
+                                  <span class="text-gray-500 dark:text-gray-400">Line {button.line}</span>
+                                  <a
+                                    href={getVSCodeLink(route.fullPath, button.line)}
+                                    class="text-blue-500 hover:text-blue-700 dark:text-blue-400 hover:underline"
+                                  >
+                                    Open in Code →
+                                  </a>
+                                </div>
+
+                                {#if button.text !== '(no text)' && button.text.length > 0}
+                                  <p class="text-xs text-gray-600 dark:text-gray-400 truncate" title={button.text}>
+                                    "{button.text}"
+                                  </p>
+                                {/if}
+                              </div>
+                            </div>
+                          {/each}
+                        </div>
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  <!-- Footer Stats -->
+  <div class="max-w-7xl mx-auto px-4 py-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Variant Distribution</h3>
+      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        {#each allVariants as variant}
+          {@const count = Object.values(manifest.categories)
+            .flatMap(routes => routes.flatMap(r => r.buttons))
+            .filter(b => b.variant === variant).length}
+          <div class="flex items-center gap-2">
+            <span class="px-2 py-1 text-xs font-medium rounded {getVariantColor(variant)}">{variant}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{count}</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+
+  <!-- Preview Modal -->
+  {#if previewModal.open}
+    <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+      <div class="relative w-full max-w-6xl h-[85vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden flex flex-col">
+        <!-- Modal Header -->
+        <div class="flex items-center justify-between px-4 py-3 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <div class="flex items-center gap-3">
+            <span class="text-lg font-semibold text-gray-900 dark:text-white">{previewModal.title}</span>
+            <code class="text-sm text-gray-500 dark:text-gray-400">{previewModal.file}</code>
+          </div>
+          <div class="flex items-center gap-2">
+            <a
+              href={previewModal.url}
+              target="_blank"
+              rel="noopener"
+              class="px-3 py-1.5 text-sm rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300"
+            >
+              Open in new tab ↗
+            </a>
+            <button
+              onclick={closePreview}
+              class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-400"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+
+        <!-- Iframe Content -->
+        <div class="flex-1 relative">
+          <iframe
+            src={previewModal.url}
+            class="absolute inset-0 w-full h-full border-0"
+            title="Page preview"
+          />
+        </div>
+
+        <!-- Modal Footer -->
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400">
+          ⚠️ Preview requires micdrop-frontend dev server running at {FRONTEND_DEV_URL}
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/stories/ButtonAuditDashboard.svelte.d.ts

@@ -0,0 +1,7 @@
+export default ButtonAuditDashboard;
+type ButtonAuditDashboard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const ButtonAuditDashboard: import("svelte").Component<Record<string, never>, {}, "">;
+//# sourceMappingURL=ButtonAuditDashboard.svelte.d.ts.map

package/dist/stories/ButtonAuditDashboard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAuditDashboard.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditDashboard.svelte.js"],"names":[],"mappings":";;;;;AAwYA,8FAAmE"}

package/dist/stories/ButtonAuditReview.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonAuditReview from "./ButtonAuditReview.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Audit Review",
+    component: ButtonAuditReview,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="All Issues" />

package/dist/stories/ButtonAuditReview.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default ButtonAuditReview;
+type ButtonAuditReview = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ButtonAuditReview: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ButtonAuditReview from "./ButtonAuditReview.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=ButtonAuditReview.stories.svelte.d.ts.map

package/dist/stories/ButtonAuditReview.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAuditReview.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditReview.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4BA;;;;mBAA6H;8BAxB7F,4BAA4B;6CAef,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}