@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/patterns/page/SectionHeader.spec.js

@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import SectionHeader from './SectionHeader.svelte';
+
+describe('SectionHeader Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(SectionHeader);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(SectionHeader, { props: { class: 'custom-section' } });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('custom-section');
+  });
+});
+
+describe('SectionHeader Title', () => {
+  test('no title renders no h2', () => {
+    const { container } = render(SectionHeader);
+    expect(container.querySelector('h2')).not.toBeInTheDocument();
+  });
+
+  test('title prop renders h2', () => {
+    render(SectionHeader, { props: { title: 'Recent Activity' } });
+    expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+  });
+
+  test('title is in h2 element', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Orders' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toBeInTheDocument();
+    expect(h2).toHaveTextContent('Orders');
+  });
+});
+
+describe('SectionHeader Description', () => {
+  test('no description renders no p', () => {
+    const { container } = render(SectionHeader);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description prop renders p', () => {
+    render(SectionHeader, { props: { description: 'View all recent orders' } });
+    expect(screen.getByText('View all recent orders')).toBeInTheDocument();
+  });
+
+  test('description p has mt-1 margin', () => {
+    const { container } = render(SectionHeader, { props: { description: 'Test desc' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('mt-1');
+  });
+});
+
+describe('SectionHeader Count', () => {
+  test('no count by default', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Items' } });
+    const span = container.querySelector('span');
+    expect(span).not.toBeInTheDocument();
+  });
+
+  test('count=null renders no badge', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Items', count: null } });
+    const span = container.querySelector('span');
+    expect(span).not.toBeInTheDocument();
+  });
+
+  test('count prop renders badge', () => {
+    render(SectionHeader, { props: { title: 'Items', count: 42 } });
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  test('count=0 still renders badge', () => {
+    render(SectionHeader, { props: { title: 'Items', count: 0 } });
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  test('count badge has styling classes', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test', count: 5 } });
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('inline-flex');
+    expect(badge).toHaveClass('items-center');
+    expect(badge).toHaveClass('justify-center');
+  });
+
+  test('count badge has bg-gray-100', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test', count: 10 } });
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('bg-gray-100');
+  });
+
+  test('count badge has rounded-full', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test', count: 10 } });
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('rounded-full');
+  });
+
+  test('count badge has dark mode bg', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test', count: 10 } });
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('count badge has padding', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test', count: 10 } });
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('px-2');
+    expect(badge).toHaveClass('py-0.5');
+  });
+});
+
+describe('SectionHeader Divider', () => {
+  test('no divider by default', () => {
+    const { container } = render(SectionHeader);
+    expect(container.querySelector('hr')).not.toBeInTheDocument();
+  });
+
+  test('divider=true shows hr', () => {
+    const { container } = render(SectionHeader, { props: { divider: true } });
+    expect(container.querySelector('hr')).toBeInTheDocument();
+  });
+
+  test('divider=false hides hr', () => {
+    const { container } = render(SectionHeader, { props: { divider: false } });
+    expect(container.querySelector('hr')).not.toBeInTheDocument();
+  });
+
+  test('divider has border-gray-200', () => {
+    const { container } = render(SectionHeader, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('border-gray-200');
+  });
+
+  test('divider has dark mode class', () => {
+    const { container } = render(SectionHeader, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('dark:border-gray-700');
+  });
+
+  test('divider has mb-4 margin', () => {
+    const { container } = render(SectionHeader, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('mb-4');
+  });
+});
+
+describe('SectionHeader Layout', () => {
+  test('has flex container for title and count', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('div.flex.items-center.justify-between');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('flex container has gap-4', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('div.flex.items-center.justify-between');
+    expect(flexDiv).toHaveClass('gap-4');
+  });
+
+  test('title and count are in left flex group', () => {
+    const { container } = render(SectionHeader, { props: { title: 'Items', count: 5 } });
+    const leftGroup = container.querySelector('div.flex.items-center.gap-2');
+    expect(leftGroup).toBeInTheDocument();
+  });
+});
+
+describe('SectionHeader Combinations', () => {
+  test('title and description', () => {
+    render(SectionHeader, { props: { title: 'Products', description: 'All available products' } });
+    expect(screen.getByText('Products')).toBeInTheDocument();
+    expect(screen.getByText('All available products')).toBeInTheDocument();
+  });
+
+  test('title and count', () => {
+    render(SectionHeader, { props: { title: 'Users', count: 150 } });
+    expect(screen.getByText('Users')).toBeInTheDocument();
+    expect(screen.getByText('150')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(SectionHeader, {
+      props: {
+        title: 'Orders',
+        description: 'View all orders',
+        count: 25,
+        divider: true,
+        class: 'mt-6'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('mt-6');
+    expect(container.querySelector('hr')).toBeInTheDocument();
+    expect(screen.getByText('Orders')).toBeInTheDocument();
+    expect(screen.getByText('View all orders')).toBeInTheDocument();
+    expect(screen.getByText('25')).toBeInTheDocument();
+  });
+});

package/dist/patterns/page/SectionHeader.svelte

@@ -20,32 +20,32 @@
     actions,
   }: Props = $props();
 </script>
-
-<div class={className}>
-  {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700 mb-4" />
-  {/if}
-
-  <div class="flex items-center justify-between gap-4">
-    <div class="flex items-center gap-2">
-      {#if title}
-        <h2 class={typography.h3}>{title}</h2>
-      {/if}
-      {#if count !== null}
-        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-gray-100 dark:bg-gray-700 rounded-full`}>
-          {count}
-        </span>
-      {/if}
-    </div>
-
-    {#if actions}
-      <div class="flex items-center gap-2">
-        {@render actions()}
-      </div>
-    {/if}
-  </div>
-
-  {#if description}
-    <p class={`mt-1 ${typography.smMuted}`}>{description}</p>
-  {/if}
-</div>
+
+<div class={className}>
+  {#if divider}
+    <hr class="border-gray-200 dark:border-gray-700 mb-4" />
+  {/if}
+
+  <div class="flex items-center justify-between gap-4">
+    <div class="flex items-center gap-2">
+      {#if title}
+        <h2 class={typography.h3}>{title}</h2>
+      {/if}
+      {#if count !== null}
+        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-gray-100 dark:bg-gray-700 rounded-full`}>
+          {count}
+        </span>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="flex items-center gap-2">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if description}
+    <p class={`mt-1 ${typography.smMuted}`}>{description}</p>
+  {/if}
+</div>

package/dist/presets/badges.js

@@ -1,112 +1,112 @@
-/**
- * Badge Presets - Domain-to-Color Mappings
- *
- * These presets provide a migration path for apps that were using
- * domain-specific badge variants (host, headliner, etc.).
- *
- * Usage:
- *   import { ROLE_BADGE_VARIANTS, ENTITY_BADGE_VARIANTS } from '@getmicdrop/svelte-components/presets/badges';
- *   <Badge variant={ROLE_BADGE_VARIANTS[role]}>{role}</Badge>
- *
- * Note: For app-specific customization, apps should define their own
- * mappings in their constants files (e.g., $lib/constants/position.ts).
- */
-
-/**
- * Role/Position badge color mappings
- * Maps performer roles to Flowbite color variants
- */
-export const ROLE_BADGE_VARIANTS = {
-  Host: 'red',
-  Headliner: 'purple',
-  Feature: 'blue',
-  'Special Guest': 'green',
-  Opener: 'orange',
-  Guest: 'gray',
-  Teacher: 'yellow',
-  Assistant: 'indigo',
-};
-
-/**
- * Entity type badge color mappings
- * Maps entity types to Flowbite color variants
- */
-export const ENTITY_BADGE_VARIANTS = {
-  event: 'blue',
-  venue: 'green',
-  user: 'purple',
-  order: 'orange',
-  performer: 'pink',
-};
-
-/**
- * Status badge semantic mappings
- * Maps status strings to semantic variants
- */
-export const STATUS_BADGE_VARIANTS = {
-  // Success states
-  Completed: 'success',
-  Active: 'success',
-  Confirmed: 'success',
-  'On Sale': 'success',
-  Live: 'success',
-  Enabled: 'success',
-  Yes: 'success',
-  Redeemed: 'success',
-  Online: 'success',
-
-  // Warning states
-  Pending: 'warning',
-  Scheduled: 'warning',
-  Paused: 'warning',
-  Ended: 'warning',
-  Refunded: 'warning',
-  'Partially refunded': 'warning',
-  Pinned: 'warning',
-  'Usage Limit Reached': 'warning',
-
-  // Error states
-  Cancelled: 'error',
-  Canceled: 'error',
-  Declined: 'error',
-  'No show': 'error',
-  Expired: 'error',
-  'Sales closed': 'error',
-
-  // Info states
-  'In Progress': 'info',
-  Invited: 'info',
-
-  // Neutral states
-  Draft: 'neutral',
-  Offline: 'neutral',
-  Disabled: 'neutral',
-  No: 'neutral',
-};
-
-/**
- * Get badge variant for a role
- * @param {string} role - The role name
- * @returns {string} Flowbite color variant
- */
-export function getRoleBadgeVariant(role) {
-  return ROLE_BADGE_VARIANTS[role] || 'gray';
-}
-
-/**
- * Get badge variant for an entity type
- * @param {string} entityType - The entity type
- * @returns {string} Flowbite color variant
- */
-export function getEntityBadgeVariant(entityType) {
-  return ENTITY_BADGE_VARIANTS[entityType] || 'gray';
-}
-
-/**
- * Get badge variant for a status
- * @param {string} status - The status string
- * @returns {string} Semantic variant
- */
-export function getStatusBadgeVariant(status) {
-  return STATUS_BADGE_VARIANTS[status] || 'neutral';
-}
+/**
+ * Badge Presets - Domain-to-Color Mappings
+ *
+ * These presets provide a migration path for apps that were using
+ * domain-specific badge variants (host, headliner, etc.).
+ *
+ * Usage:
+ *   import { ROLE_BADGE_VARIANTS, ENTITY_BADGE_VARIANTS } from '@getmicdrop/svelte-components/presets/badges';
+ *   <Badge variant={ROLE_BADGE_VARIANTS[role]}>{role}</Badge>
+ *
+ * Note: For app-specific customization, apps should define their own
+ * mappings in their constants files (e.g., $lib/constants/position.ts).
+ */
+
+/**
+ * Role/Position badge color mappings
+ * Maps performer roles to Flowbite color variants
+ */
+export const ROLE_BADGE_VARIANTS = {
+  Host: 'red',
+  Headliner: 'purple',
+  Feature: 'blue',
+  'Special Guest': 'green',
+  Opener: 'orange',
+  Guest: 'gray',
+  Teacher: 'yellow',
+  Assistant: 'indigo',
+};
+
+/**
+ * Entity type badge color mappings
+ * Maps entity types to Flowbite color variants
+ */
+export const ENTITY_BADGE_VARIANTS = {
+  event: 'blue',
+  venue: 'green',
+  user: 'purple',
+  order: 'orange',
+  performer: 'pink',
+};
+
+/**
+ * Status badge semantic mappings
+ * Maps status strings to semantic variants
+ */
+export const STATUS_BADGE_VARIANTS = {
+  // Success states
+  Completed: 'success',
+  Active: 'success',
+  Confirmed: 'success',
+  'On Sale': 'success',
+  Live: 'success',
+  Enabled: 'success',
+  Yes: 'success',
+  Redeemed: 'success',
+  Online: 'success',
+
+  // Warning states
+  Pending: 'warning',
+  Scheduled: 'warning',
+  Paused: 'warning',
+  Ended: 'warning',
+  Refunded: 'warning',
+  'Partially refunded': 'warning',
+  Pinned: 'warning',
+  'Usage Limit Reached': 'warning',
+
+  // Error states
+  Cancelled: 'error',
+  Canceled: 'error',
+  Declined: 'error',
+  'No show': 'error',
+  Expired: 'error',
+  'Sales closed': 'error',
+
+  // Info states
+  'In Progress': 'info',
+  Invited: 'info',
+
+  // Neutral states
+  Draft: 'neutral',
+  Offline: 'neutral',
+  Disabled: 'neutral',
+  No: 'neutral',
+};
+
+/**
+ * Get badge variant for a role
+ * @param {string} role - The role name
+ * @returns {string} Flowbite color variant
+ */
+export function getRoleBadgeVariant(role) {
+  return ROLE_BADGE_VARIANTS[role] || 'gray';
+}
+
+/**
+ * Get badge variant for an entity type
+ * @param {string} entityType - The entity type
+ * @returns {string} Flowbite color variant
+ */
+export function getEntityBadgeVariant(entityType) {
+  return ENTITY_BADGE_VARIANTS[entityType] || 'gray';
+}
+
+/**
+ * Get badge variant for a status
+ * @param {string} status - The status string
+ * @returns {string} Semantic variant
+ */
+export function getStatusBadgeVariant(status) {
+  return STATUS_BADGE_VARIANTS[status] || 'neutral';
+}

package/dist/presets/badges.spec.d.ts

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

package/dist/presets/badges.spec.d.ts.map

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

package/dist/presets/badges.spec.js

@@ -0,0 +1,172 @@
+import { describe, it, expect } from 'vitest';
+import {
+  ROLE_BADGE_VARIANTS,
+  ENTITY_BADGE_VARIANTS,
+  STATUS_BADGE_VARIANTS,
+  getRoleBadgeVariant,
+  getEntityBadgeVariant,
+  getStatusBadgeVariant,
+} from './badges.js';
+
+describe('Role Badge Variants', () => {
+  it('maps Host to red', () => {
+    expect(ROLE_BADGE_VARIANTS.Host).toBe('red');
+  });
+
+  it('maps Headliner to purple', () => {
+    expect(ROLE_BADGE_VARIANTS.Headliner).toBe('purple');
+  });
+
+  it('maps Feature to blue', () => {
+    expect(ROLE_BADGE_VARIANTS.Feature).toBe('blue');
+  });
+
+  it('maps Special Guest to green', () => {
+    expect(ROLE_BADGE_VARIANTS['Special Guest']).toBe('green');
+  });
+
+  it('maps Opener to orange', () => {
+    expect(ROLE_BADGE_VARIANTS.Opener).toBe('orange');
+  });
+
+  it('maps Guest to gray', () => {
+    expect(ROLE_BADGE_VARIANTS.Guest).toBe('gray');
+  });
+
+  it('maps Teacher to yellow', () => {
+    expect(ROLE_BADGE_VARIANTS.Teacher).toBe('yellow');
+  });
+
+  it('maps Assistant to indigo', () => {
+    expect(ROLE_BADGE_VARIANTS.Assistant).toBe('indigo');
+  });
+});
+
+describe('Entity Badge Variants', () => {
+  it('maps event to blue', () => {
+    expect(ENTITY_BADGE_VARIANTS.event).toBe('blue');
+  });
+
+  it('maps venue to green', () => {
+    expect(ENTITY_BADGE_VARIANTS.venue).toBe('green');
+  });
+
+  it('maps user to purple', () => {
+    expect(ENTITY_BADGE_VARIANTS.user).toBe('purple');
+  });
+
+  it('maps order to orange', () => {
+    expect(ENTITY_BADGE_VARIANTS.order).toBe('orange');
+  });
+
+  it('maps performer to pink', () => {
+    expect(ENTITY_BADGE_VARIANTS.performer).toBe('pink');
+  });
+});
+
+describe('Status Badge Variants', () => {
+  describe('Success States', () => {
+    const successStatuses = [
+      'Completed', 'Active', 'Confirmed', 'On Sale',
+      'Live', 'Enabled', 'Yes', 'Redeemed', 'Online'
+    ];
+
+    successStatuses.forEach(status => {
+      it(`maps ${status} to success`, () => {
+        expect(STATUS_BADGE_VARIANTS[status]).toBe('success');
+      });
+    });
+  });
+
+  describe('Warning States', () => {
+    const warningStatuses = [
+      'Pending', 'Scheduled', 'Paused', 'Ended',
+      'Refunded', 'Partially refunded', 'Pinned', 'Usage Limit Reached'
+    ];
+
+    warningStatuses.forEach(status => {
+      it(`maps ${status} to warning`, () => {
+        expect(STATUS_BADGE_VARIANTS[status]).toBe('warning');
+      });
+    });
+  });
+
+  describe('Error States', () => {
+    const errorStatuses = [
+      'Cancelled', 'Canceled', 'Declined', 'No show',
+      'Expired', 'Sales closed'
+    ];
+
+    errorStatuses.forEach(status => {
+      it(`maps ${status} to error`, () => {
+        expect(STATUS_BADGE_VARIANTS[status]).toBe('error');
+      });
+    });
+  });
+
+  describe('Info States', () => {
+    it('maps In Progress to info', () => {
+      expect(STATUS_BADGE_VARIANTS['In Progress']).toBe('info');
+    });
+
+    it('maps Invited to info', () => {
+      expect(STATUS_BADGE_VARIANTS.Invited).toBe('info');
+    });
+  });
+
+  describe('Neutral States', () => {
+    const neutralStatuses = ['Draft', 'Offline', 'Disabled', 'No'];
+
+    neutralStatuses.forEach(status => {
+      it(`maps ${status} to neutral`, () => {
+        expect(STATUS_BADGE_VARIANTS[status]).toBe('neutral');
+      });
+    });
+  });
+});
+
+describe('getRoleBadgeVariant', () => {
+  it('returns correct variant for known role', () => {
+    expect(getRoleBadgeVariant('Host')).toBe('red');
+    expect(getRoleBadgeVariant('Headliner')).toBe('purple');
+  });
+
+  it('returns gray for unknown role', () => {
+    expect(getRoleBadgeVariant('Unknown')).toBe('gray');
+  });
+
+  it('returns gray for undefined role', () => {
+    expect(getRoleBadgeVariant(undefined)).toBe('gray');
+  });
+});
+
+describe('getEntityBadgeVariant', () => {
+  it('returns correct variant for known entity', () => {
+    expect(getEntityBadgeVariant('event')).toBe('blue');
+    expect(getEntityBadgeVariant('venue')).toBe('green');
+  });
+
+  it('returns gray for unknown entity', () => {
+    expect(getEntityBadgeVariant('unknown')).toBe('gray');
+  });
+
+  it('returns gray for undefined entity', () => {
+    expect(getEntityBadgeVariant(undefined)).toBe('gray');
+  });
+});
+
+describe('getStatusBadgeVariant', () => {
+  it('returns correct variant for known status', () => {
+    expect(getStatusBadgeVariant('Completed')).toBe('success');
+    expect(getStatusBadgeVariant('Pending')).toBe('warning');
+    expect(getStatusBadgeVariant('Cancelled')).toBe('error');
+  });
+
+  it('returns neutral for unknown status', () => {
+    expect(getStatusBadgeVariant('Unknown')).toBe('neutral');
+  });
+
+  it('returns neutral for undefined status', () => {
+    expect(getStatusBadgeVariant(undefined)).toBe('neutral');
+  });
+});