@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/stories/ButtonGridView.spec.js

@@ -0,0 +1,667 @@
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import ButtonGridView from './ButtonGridView.svelte';
+
+// Mock manifest data
+vi.mock('./button-audit-manifest.json', () => ({
+  default: {
+    generated: '2025-01-06T00:00:00.000Z',
+    totalButtons: 10,
+    categories: {
+      'Test Category': [
+        {
+          route: 'test-route',
+          file: 'components/TestComponent/TestComponent.svelte',
+          fullPath: '/Users/test/repos/micdrop-frontend/src/components/TestComponent/TestComponent.svelte',
+          buttons: [
+            {
+              line: 10,
+              variant: 'blue-solid',
+              size: 'md',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: 'Test Button 1'
+            },
+            {
+              line: 20,
+              variant: 'gray-outline',
+              size: 'lg',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: 'Test Button 2'
+            },
+            {
+              line: 30,
+              variant: 'blue-outline',
+              size: 'sm',
+              loading: true,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: 'Loading Button'
+            },
+            {
+              line: 40,
+              variant: 'red-solid',
+              size: 'xs',
+              loading: false,
+              disabled: true,
+              danger: false,
+              deemphasized: false,
+              text: 'Disabled Button'
+            },
+            {
+              line: 50,
+              variant: 'red-outline',
+              size: 'md',
+              loading: false,
+              disabled: false,
+              danger: true,
+              deemphasized: false,
+              text: 'Danger Button'
+            }
+          ]
+        },
+        {
+          route: 'another-route',
+          file: 'components/AnotherComponent/Another.svelte',
+          fullPath: '/Users/test/repos/micdrop-frontend/src/components/AnotherComponent/Another.svelte',
+          buttons: [
+            {
+              line: 15,
+              variant: 'green-solid',
+              size: 'md',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: true,
+              text: 'Green Button'
+            },
+            {
+              line: 25,
+              variant: 'icon',
+              size: 'xs',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: '...'
+            },
+            {
+              line: 35,
+              variant: 'ghost',
+              size: 'md',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: 'Ghost Button'
+            },
+            {
+              line: 45,
+              variant: 'gray-text',
+              size: 'sm',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: 'This is a very long button text that should be truncated'
+            },
+            {
+              line: 55,
+              variant: 'blue-solid',
+              size: 'md',
+              loading: false,
+              disabled: false,
+              danger: false,
+              deemphasized: false,
+              text: '(no text)'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}));
+
+describe('ButtonGridView Component', () => {
+  let classListToggleSpy;
+
+  beforeEach(() => {
+    // Mock classList.toggle on document.documentElement
+    classListToggleSpy = vi.spyOn(document.documentElement.classList, 'toggle');
+  });
+
+  afterEach(() => {
+    // Restore spy
+    classListToggleSpy?.mockRestore();
+  });
+
+  describe('Initial Render', () => {
+    it('renders the component', () => {
+      render(ButtonGridView);
+      expect(screen.getByText('Button Grid View')).toBeInTheDocument();
+    });
+
+    it('displays correct button count', () => {
+      render(ButtonGridView);
+      expect(screen.getByText(/Showing 10 of 10 buttons/i)).toBeInTheDocument();
+    });
+
+    it('renders all buttons from manifest', () => {
+      const { container } = render(ButtonGridView);
+      // Each button is in a card with specific structure
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(10);
+    });
+
+    it('renders header with sticky positioning', () => {
+      const { container } = render(ButtonGridView);
+      const header = container.querySelector('.sticky');
+      expect(header).toBeInTheDocument();
+      expect(header).toHaveClass('top-0', 'z-50');
+    });
+
+    it('renders grid with responsive columns', () => {
+      const { container } = render(ButtonGridView);
+      const grid = container.querySelector('.grid');
+      expect(grid).toHaveClass(
+        'grid-cols-2',
+        'sm:grid-cols-3',
+        'md:grid-cols-4',
+        'lg:grid-cols-5',
+        'xl:grid-cols-6',
+        '2xl:grid-cols-8'
+      );
+    });
+  });
+
+  describe('Dark Mode Toggle', () => {
+    it('renders dark mode toggle button', () => {
+      render(ButtonGridView);
+      const toggleButton = screen.getByRole('button', { name: /☀️/i });
+      expect(toggleButton).toBeInTheDocument();
+    });
+
+    it('toggles dark mode when clicked', async () => {
+      render(ButtonGridView);
+      const toggleButton = screen.getByRole('button', { name: /☀️/i });
+
+      await fireEvent.click(toggleButton);
+
+      expect(classListToggleSpy).toHaveBeenCalledWith('dark', true);
+    });
+
+    it('changes icon after toggle', async () => {
+      render(ButtonGridView);
+      let toggleButton = screen.getByRole('button', { name: /☀️/i });
+
+      await fireEvent.click(toggleButton);
+
+      toggleButton = screen.getByRole('button', { name: /🌙/i });
+      expect(toggleButton).toBeInTheDocument();
+    });
+
+    it('applies correct background class when dark', async () => {
+      render(ButtonGridView);
+      const toggleButton = screen.getByRole('button', { name: /☀️/i });
+
+      await fireEvent.click(toggleButton);
+
+      const darkButton = screen.getByRole('button', { name: /🌙/i });
+      expect(darkButton).toHaveClass('bg-gray-800', 'text-white');
+    });
+  });
+
+  describe('Search Functionality', () => {
+    it('renders search input', () => {
+      render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+      expect(searchInput).toBeInTheDocument();
+    });
+
+    it('filters buttons by text', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'Green' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(1);
+    });
+
+    it('filters buttons by file name', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'AnotherComponent' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(5);
+    });
+
+    it('filters buttons by variant', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'ghost' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(1);
+    });
+
+    it('is case insensitive', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'GREEN' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(1);
+    });
+
+    it('updates button count when filtering', async () => {
+      render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'Green' } });
+
+      expect(screen.getByText(/Showing 1 of 10 buttons/i)).toBeInTheDocument();
+    });
+
+    it('shows all buttons when search is cleared', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'Green' } });
+      await fireEvent.input(searchInput, { target: { value: '' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(10);
+    });
+  });
+
+  describe('Variant Filter', () => {
+    it('renders variant filter dropdown', () => {
+      const { container } = render(ButtonGridView);
+      const selects = container.querySelectorAll('select');
+      expect(selects.length).toBe(2);
+      expect(selects[0]).toBeInTheDocument();
+    });
+
+    it('shows all unique variants as options', () => {
+      const { container } = render(ButtonGridView);
+      const variantSelect = container.querySelectorAll('select')[0];
+      const options = variantSelect.querySelectorAll('option');
+
+      // Should have "All Variants" plus unique variants
+      expect(options.length).toBeGreaterThan(1);
+      expect(options[0]).toHaveTextContent('All Variants');
+    });
+
+    it('filters buttons by selected variant', async () => {
+      const { container } = render(ButtonGridView);
+      const variantSelect = container.querySelectorAll('select')[0];
+
+      await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(2);
+    });
+
+    it('updates button count when filtering by variant', async () => {
+      const { container } = render(ButtonGridView);
+      const variantSelect = container.querySelectorAll('select')[0];
+
+      await fireEvent.change(variantSelect, { target: { value: 'icon' } });
+
+      expect(screen.getByText(/Showing 1 of 10 buttons/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Size Filter', () => {
+    it('renders size filter dropdown', () => {
+      const { container } = render(ButtonGridView);
+      const sizeSelects = container.querySelectorAll('select');
+      expect(sizeSelects.length).toBe(2); // variant and size dropdowns
+    });
+
+    it('shows all unique sizes as options', () => {
+      const { container } = render(ButtonGridView);
+      const selects = container.querySelectorAll('select');
+      const sizeSelect = selects[1];
+      const options = sizeSelect.querySelectorAll('option');
+
+      // Should have "All Sizes" plus unique sizes
+      expect(options.length).toBeGreaterThan(1);
+      expect(options[0]).toHaveTextContent('All Sizes');
+    });
+
+    it('filters buttons by selected size', async () => {
+      const { container } = render(ButtonGridView);
+      const selects = container.querySelectorAll('select');
+      const sizeSelect = selects[1];
+
+      await fireEvent.change(sizeSelect, { target: { value: 'xs' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(2);
+    });
+
+    it('updates button count when filtering by size', async () => {
+      const { container } = render(ButtonGridView);
+      const selects = container.querySelectorAll('select');
+      const sizeSelect = selects[1];
+
+      await fireEvent.change(sizeSelect, { target: { value: 'lg' } });
+
+      expect(screen.getByText(/Showing 1 of 10 buttons/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Combined Filters', () => {
+    it('applies variant and size filters together', async () => {
+      const { container } = render(ButtonGridView);
+      const selects = container.querySelectorAll('select');
+      const variantSelect = selects[0];
+      const sizeSelect = selects[1];
+
+      await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
+      await fireEvent.change(sizeSelect, { target: { value: 'md' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(2);
+    });
+
+    it('applies search and variant filter together', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+      const variantSelect = container.querySelectorAll('select')[0];
+
+      await fireEvent.input(searchInput, { target: { value: 'Button' } });
+      await fireEvent.change(variantSelect, { target: { value: 'red-solid' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(1);
+    });
+
+    it('applies all three filters together', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+      const selects = container.querySelectorAll('select');
+      const variantSelect = selects[0];
+      const sizeSelect = selects[1];
+
+      await fireEvent.input(searchInput, { target: { value: 'Test' } });
+      await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
+      await fireEvent.change(sizeSelect, { target: { value: 'md' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(1);
+    });
+  });
+
+  describe('Button Rendering', () => {
+    it('renders buttons with correct variants', () => {
+      const { container } = render(ButtonGridView);
+      const variantBadges = container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded');
+
+      // Check that variant badges are rendered
+      expect(variantBadges.length).toBeGreaterThan(0);
+    });
+
+    it('renders buttons with correct sizes', () => {
+      const { container } = render(ButtonGridView);
+
+      // Check that size badges exist in the metadata sections
+      const sizeBadges = container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded.bg-gray-100');
+      expect(sizeBadges.length).toBeGreaterThan(0);
+
+      // Check for specific size values
+      const sizeTexts = Array.from(sizeBadges).map(el => el.textContent);
+      expect(sizeTexts).toContain('md');
+      expect(sizeTexts).toContain('lg');
+    });
+
+    it('renders loading state buttons', () => {
+      const { container } = render(ButtonGridView);
+
+      // Should have buttons with loading prop
+      const buttons = container.querySelectorAll('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('renders disabled state buttons', () => {
+      const { container } = render(ButtonGridView);
+
+      // Should have buttons with disabled prop
+      const buttons = container.querySelectorAll('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('truncates long button text', () => {
+      render(ButtonGridView);
+
+      // Button with long text should be truncated
+      const truncatedText = screen.getByText(/This is a very long/i);
+      expect(truncatedText.textContent).toContain('…');
+    });
+
+    it('handles buttons with no text', () => {
+      const { container } = render(ButtonGridView);
+
+      // Should render all button cards including those with (no text)
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(10);
+
+      // Check that we have actual button elements inside
+      const actualButtons = container.querySelectorAll('button[type="button"]');
+      expect(actualButtons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Button Metadata', () => {
+    it('displays file name and line number', () => {
+      render(ButtonGridView);
+
+      expect(screen.getByText(/TestComponent.svelte:10/i)).toBeInTheDocument();
+    });
+
+    it('generates correct VS Code links', () => {
+      const { container } = render(ButtonGridView);
+      const links = container.querySelectorAll('a[href^="vscode://"]');
+
+      expect(links.length).toBe(10);
+      expect(links[0]).toHaveAttribute('href', 'vscode://file/Users/test/repos/micdrop-frontend/src/components/TestComponent/TestComponent.svelte:10');
+    });
+
+    it('shows short file path in metadata', () => {
+      const { container } = render(ButtonGridView);
+
+      // Should show last two parts of path in the links
+      const links = container.querySelectorAll('a[href^="vscode://"]');
+      const linkTexts = Array.from(links).map(link => link.textContent);
+
+      // Check that at least one link contains the expected format
+      const hasExpectedFormat = linkTexts.some(text =>
+        text.includes('TestComponent/TestComponent.svelte') || text.includes('AnotherComponent/Another.svelte')
+      );
+      expect(hasExpectedFormat).toBe(true);
+    });
+
+    it('includes full path in link title', () => {
+      const { container } = render(ButtonGridView);
+      const links = container.querySelectorAll('a[href^="vscode://"]');
+
+      expect(links[0]).toHaveAttribute('title', 'components/TestComponent/TestComponent.svelte');
+    });
+  });
+
+  describe('Variant Color Function', () => {
+    it('applies correct color for blue-solid variant', () => {
+      const { container } = render(ButtonGridView);
+      const blueSolidBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
+        .find(el => el.textContent === 'blue-solid');
+
+      expect(blueSolidBadge).toHaveClass('bg-blue-100', 'text-blue-700');
+    });
+
+    it('applies correct color for gray-outline variant', () => {
+      const { container } = render(ButtonGridView);
+      const grayOutlineBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
+        .find(el => el.textContent === 'gray-outline');
+
+      expect(grayOutlineBadge).toHaveClass('bg-gray-100', 'text-gray-700');
+    });
+
+    it('applies correct color for red-solid variant', () => {
+      const { container } = render(ButtonGridView);
+      const redSolidBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
+        .find(el => el.textContent === 'red-solid');
+
+      expect(redSolidBadge).toHaveClass('bg-red-100', 'text-red-700');
+    });
+
+    it('applies correct color for green-solid variant', () => {
+      const { container } = render(ButtonGridView);
+      const greenSolidBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
+        .find(el => el.textContent === 'green-solid');
+
+      expect(greenSolidBadge).toHaveClass('bg-green-100', 'text-green-700');
+    });
+
+    it('applies correct color for icon variant', () => {
+      const { container } = render(ButtonGridView);
+      const iconBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
+        .find(el => el.textContent === 'icon');
+
+      expect(iconBadge).toHaveClass('bg-purple-100', 'text-purple-700');
+    });
+
+    it('applies correct color for ghost variant', () => {
+      const { container } = render(ButtonGridView);
+      const ghostBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
+        .find(el => el.textContent === 'ghost');
+
+      expect(ghostBadge).toHaveClass('bg-yellow-100', 'text-yellow-700');
+    });
+  });
+
+  describe('ShortFile Function', () => {
+    it('returns last two parts of file path', () => {
+      const { container } = render(ButtonGridView);
+
+      // Check that short paths are displayed in links
+      const links = container.querySelectorAll('a[href^="vscode://"]');
+      const linkTexts = Array.from(links).map(link => link.textContent);
+
+      // At least one link should contain the short path format
+      const hasShortPath = linkTexts.some(text => text.includes('/'));
+      expect(hasShortPath).toBe(true);
+    });
+
+    it('handles different path depths', () => {
+      const { container } = render(ButtonGridView);
+
+      // Check that multiple file paths are displayed
+      const links = container.querySelectorAll('a[href^="vscode://"]');
+      expect(links.length).toBe(10);
+
+      // Each link should have some path information
+      links.forEach(link => {
+        expect(link.textContent).toBeTruthy();
+      });
+    });
+  });
+
+  describe('Responsive Design', () => {
+    it('applies responsive grid classes', () => {
+      const { container } = render(ButtonGridView);
+      const grid = container.querySelector('.grid');
+
+      expect(grid).toHaveClass(
+        'grid-cols-2',      // mobile
+        'sm:grid-cols-3',   // small
+        'md:grid-cols-4',   // medium
+        'lg:grid-cols-5',   // large
+        'xl:grid-cols-6',   // extra large
+        '2xl:grid-cols-8'   // 2x extra large
+      );
+    });
+
+    it('applies dark mode classes throughout', () => {
+      const { container } = render(ButtonGridView);
+
+      // Check various elements have dark mode classes
+      const darkElements = container.querySelectorAll('[class*="dark:"]');
+      expect(darkElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty search result', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+
+      await fireEvent.input(searchInput, { target: { value: 'nonexistent' } });
+
+      expect(screen.getByText(/Showing 0 of 10 buttons/i)).toBeInTheDocument();
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(0);
+    });
+
+    it('handles reset filters to show all buttons', async () => {
+      const { container } = render(ButtonGridView);
+      const searchInput = screen.getByPlaceholderText('Search...');
+      const selects = container.querySelectorAll('select');
+      const variantSelect = selects[0];
+      const sizeSelect = selects[1];
+
+      // Apply filters
+      await fireEvent.input(searchInput, { target: { value: 'Test' } });
+      await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
+      await fireEvent.change(sizeSelect, { target: { value: 'md' } });
+
+      // Reset filters
+      await fireEvent.input(searchInput, { target: { value: '' } });
+      await fireEvent.change(variantSelect, { target: { value: 'all' } });
+      await fireEvent.change(sizeSelect, { target: { value: 'all' } });
+
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(10);
+    });
+  });
+
+  describe('Data Processing', () => {
+    it('flattens manifest categories correctly', () => {
+      const { container } = render(ButtonGridView);
+
+      // Should have 10 buttons total from 2 routes
+      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      expect(buttonCards.length).toBe(10);
+    });
+
+    it('preserves button properties from manifest', () => {
+      const { container } = render(ButtonGridView);
+
+      // Check that various properties are rendered in badges
+      const badges = container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded');
+      const badgeTexts = Array.from(badges).map(el => el.textContent);
+
+      // Should include variant and size values from manifest
+      expect(badgeTexts).toContain('blue-solid');
+      expect(badgeTexts.some(text => text === 'md')).toBe(true);
+    });
+
+    it('includes source information with each button', () => {
+      render(ButtonGridView);
+
+      // Check that file info is included
+      expect(screen.getByText(/TestComponent.svelte:10/i)).toBeInTheDocument();
+    });
+  });
+});

package/dist/stories/ButtonShowcase.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonShowcase.spec.d.ts.map

package/dist/stories/ButtonShowcase.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonShowcase.spec.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonShowcase.spec.js"],"names":[],"mappings":""}