@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/patterns/forms/FormSection.spec.d.ts.map

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

package/dist/patterns/forms/FormSection.spec.js

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import FormSection from './FormSection.svelte';
+
+describe('FormSection Component', () => {
+  test('renders a section element', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('section')).toBeInTheDocument();
+  });
+
+  test('has space-y-4 class', () => {
+    const { container } = render(FormSection);
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('space-y-4');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(FormSection, { props: { class: 'custom-section' } });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('custom-section');
+  });
+});
+
+describe('FormSection Title', () => {
+  test('no title renders no h3', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('h3')).not.toBeInTheDocument();
+  });
+
+  test('title prop renders h3', () => {
+    render(FormSection, { props: { title: 'Personal Info' } });
+    expect(screen.getByText('Personal Info')).toBeInTheDocument();
+  });
+
+  test('title is in h3 element', () => {
+    const { container } = render(FormSection, { props: { title: 'Contact' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toBeInTheDocument();
+    expect(h3).toHaveTextContent('Contact');
+  });
+});
+
+describe('FormSection Description', () => {
+  test('no description renders no p', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description prop renders p', () => {
+    render(FormSection, { props: { description: 'Enter your details' } });
+    expect(screen.getByText('Enter your details')).toBeInTheDocument();
+  });
+
+  test('description is in p element', () => {
+    const { container } = render(FormSection, { props: { description: 'Fill the form' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Fill the form');
+  });
+});
+
+describe('FormSection Header Area', () => {
+  test('no header when no title or description', () => {
+    const { container } = render(FormSection);
+    const headerDiv = container.querySelector('section > div.space-y-1');
+    expect(headerDiv).not.toBeInTheDocument();
+  });
+
+  test('header appears when title provided', () => {
+    const { container } = render(FormSection, { props: { title: 'Title' } });
+    const headerDiv = container.querySelector('section > div.space-y-1');
+    expect(headerDiv).toBeInTheDocument();
+  });
+
+  test('header appears when description provided', () => {
+    const { container } = render(FormSection, { props: { description: 'Desc' } });
+    const headerDiv = container.querySelector('section > div.space-y-1');
+    expect(headerDiv).toBeInTheDocument();
+  });
+
+  test('header shows both title and description', () => {
+    const { container } = render(FormSection, { props: { title: 'My Title', description: 'My Desc' } });
+    expect(screen.getByText('My Title')).toBeInTheDocument();
+    expect(screen.getByText('My Desc')).toBeInTheDocument();
+  });
+});
+
+describe('FormSection Divider', () => {
+  test('no divider by default', () => {
+    const { container } = render(FormSection);
+    expect(container.querySelector('hr')).not.toBeInTheDocument();
+  });
+
+  test('divider=true shows hr', () => {
+    const { container } = render(FormSection, { props: { divider: true } });
+    expect(container.querySelector('hr')).toBeInTheDocument();
+  });
+
+  test('divider=false hides hr', () => {
+    const { container } = render(FormSection, { props: { divider: false } });
+    expect(container.querySelector('hr')).not.toBeInTheDocument();
+  });
+
+  test('divider has border-gray-200', () => {
+    const { container } = render(FormSection, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('border-gray-200');
+  });
+
+  test('divider has dark mode class', () => {
+    const { container } = render(FormSection, { props: { divider: true } });
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('dark:border-gray-700');
+  });
+});
+
+describe('FormSection Content Area', () => {
+  test('has content div with space-y-4', () => {
+    const { container } = render(FormSection);
+    const contentDiv = container.querySelector('section > div.space-y-4');
+    expect(contentDiv).toBeInTheDocument();
+  });
+});
+
+describe('FormSection Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(FormSection, {
+      props: {
+        title: 'Address',
+        description: 'Your mailing address',
+        divider: true,
+        class: 'mt-6'
+      }
+    });
+    const section = container.querySelector('section');
+    expect(section).toHaveClass('mt-6');
+    expect(container.querySelector('hr')).toBeInTheDocument();
+    expect(screen.getByText('Address')).toBeInTheDocument();
+    expect(screen.getByText('Your mailing address')).toBeInTheDocument();
+  });
+
+  test('title only without description', () => {
+    const { container } = render(FormSection, { props: { title: 'Settings' } });
+    expect(container.querySelector('h3')).toBeInTheDocument();
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description only without title', () => {
+    const { container } = render(FormSection, { props: { description: 'Optional info' } });
+    expect(container.querySelector('h3')).not.toBeInTheDocument();
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+});

package/dist/patterns/forms/FormSection.svelte

@@ -1,32 +1,32 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    title = '',
-    description = '',
-    divider = false,
-    class: className = '',
-    children,
-  } = $props();
-</script>
-
-<section class="space-y-4 {className}">
-  {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700" />
-  {/if}
-
-  {#if title || description}
-    <div class="space-y-1">
-      {#if title}
-        <h3 class={typography.h3}>{title}</h3>
-      {/if}
-      {#if description}
-        <p class={typography.smMuted}>{description}</p>
-      {/if}
-    </div>
-  {/if}
-
-  <div class="space-y-4">
-    {@render children?.()}
-  </div>
-</section>
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    title = '',
+    description = '',
+    divider = false,
+    class: className = '',
+    children,
+  } = $props();
+</script>
+
+<section class="space-y-4 {className}">
+  {#if divider}
+    <hr class="border-gray-200 dark:border-gray-700" />
+  {/if}
+
+  {#if title || description}
+    <div class="space-y-1">
+      {#if title}
+        <h3 class={typography.h3}>{title}</h3>
+      {/if}
+      {#if description}
+        <p class={typography.smMuted}>{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="space-y-4">
+    {@render children?.()}
+  </div>
+</section>

package/dist/patterns/forms/FormValidationSummary.stories.svelte

@@ -1,75 +1,75 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import FormValidationSummary from './FormValidationSummary.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/FormValidationSummary',
-    component: FormValidationSummary,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  
-  const sampleErrors = {
-    firstName: 'First name is required',
-    email: 'Please enter a valid email address',
-    phone: 'Phone number must be 10 digits',
-  };
-
-  const fieldLabels = {
-    firstName: 'First Name',
-    email: 'Email Address',
-    phone: 'Phone Number',
-  };
-</script>
-
-<Story name="Default">
-  <FormValidationSummary
-    errors={sampleErrors}
-    {fieldLabels}
-    show={true}
-  />
-</Story>
-
-<Story name="Single Error">
-  <FormValidationSummary
-    errors={{ email: 'Email is required' }}
-    fieldLabels={{ email: 'Email Address' }}
-    show={true}
-  />
-</Story>
-
-<Story name="Multiple Errors">
-  <FormValidationSummary
-    errors={{
-      firstName: 'First name is required',
-      lastName: 'Last name is required',
-      email: 'Invalid email format',
-      password: 'Password must be at least 8 characters',
-      confirmPassword: 'Passwords do not match',
-    }}
-    fieldLabels={{
-      firstName: 'First Name',
-      lastName: 'Last Name',
-      email: 'Email',
-      password: 'Password',
-      confirmPassword: 'Confirm Password',
-    }}
-    show={true}
-  />
-</Story>
-
-<Story name="With Form">
-  <div class="max-w-md">
-    <FormValidationSummary
-      errors={sampleErrors}
-      {fieldLabels}
-      show={true}
-    />
-
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import FormValidationSummary from './FormValidationSummary.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/FormValidationSummary',
+    component: FormValidationSummary,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  
+  const sampleErrors = {
+    firstName: 'First name is required',
+    email: 'Please enter a valid email address',
+    phone: 'Phone number must be 10 digits',
+  };
+
+  const fieldLabels = {
+    firstName: 'First Name',
+    email: 'Email Address',
+    phone: 'Phone Number',
+  };
+</script>
+
+<Story name="Default">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={true}
+  />
+</Story>
+
+<Story name="Single Error">
+  <FormValidationSummary
+    errors={{ email: 'Email is required' }}
+    fieldLabels={{ email: 'Email Address' }}
+    show={true}
+  />
+</Story>
+
+<Story name="Multiple Errors">
+  <FormValidationSummary
+    errors={{
+      firstName: 'First name is required',
+      lastName: 'Last name is required',
+      email: 'Invalid email format',
+      password: 'Password must be at least 8 characters',
+      confirmPassword: 'Passwords do not match',
+    }}
+    fieldLabels={{
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+    }}
+    show={true}
+  />
+</Story>
+
+<Story name="With Form">
+  <div class="max-w-md">
+    <FormValidationSummary
+      errors={sampleErrors}
+      {fieldLabels}
+      show={true}
+    />
+
     <div class="space-y-4 mt-4">
       <div>
         <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
@@ -84,14 +84,14 @@
         <input id="phone" type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
       </div>
     </div>
-  </div>
-</Story>
-
-<Story name="Hidden State">
-  <FormValidationSummary
-    errors={sampleErrors}
-    {fieldLabels}
-    show={false}
-  />
-  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">The validation summary is hidden</p>
-</Story>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={false}
+  />
+  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">The validation summary is hidden</p>
+</Story>

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { slide } from "svelte/transition";
+  import { safeSlide } from "../../utils/transitions.js";
   import { cubicOut } from "svelte/easing";
   import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
   import Button from "../../primitives/Button/Button.svelte";
@@ -40,35 +40,35 @@
     }
   }
 </script>
-
-{#if show && hasErrors}
-  <div
-    transition:slide={{ duration: 300, easing: cubicOut }}
-    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
-    role="alert"
-    aria-live="polite"
-  >
-    <div class="flex items-start gap-2">
-      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
-      <div class="flex-1">
-        <p class="text-sm font-medium text-red-800 dark:text-red-400">
-          Please fix the following:
-        </p>
-        <ul class="mt-2 space-y-1">
-          {#each errorFields as field}
-            <li>
-              <Button
-                variant="link"
-                size="sm"
-                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
-                onclick={() => scrollToField(field.elementId)}
-              >
-                {field.label}
-              </Button>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    </div>
-  </div>
-{/if}
+
+{#if show && hasErrors}
+  <div
+    transition:safeSlide={{ duration: 300, easing: cubicOut }}
+    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
+    role="alert"
+    aria-live="polite"
+  >
+    <div class="flex items-start gap-2">
+      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-red-800 dark:text-red-400">
+          Please fix the following:
+        </p>
+        <ul class="mt-2 space-y-1">
+          {#each errorFields as field}
+            <li>
+              <Button
+                variant="link"
+                size="sm"
+                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
+                onclick={() => scrollToField(field.elementId)}
+              >
+                {field.label}
+              </Button>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/patterns/layout/Sidebar.spec.d.ts

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

package/dist/patterns/layout/Sidebar.spec.d.ts.map

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

package/dist/patterns/layout/Sidebar.spec.js

@@ -0,0 +1,159 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Sidebar from './Sidebar.svelte';
+
+describe('Sidebar Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(Sidebar);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has flex layout', () => {
+    const { container } = render(Sidebar);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('flex');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Sidebar, { props: { class: 'custom-sidebar' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-sidebar');
+  });
+});
+
+describe('Sidebar Position', () => {
+  test('default position is right', () => {
+    const { container } = render(Sidebar);
+    // When position is right, main comes first then aside
+    const children = container.firstElementChild.children;
+    expect(children[0].tagName).toBe('MAIN');
+    expect(children[1].tagName).toBe('ASIDE');
+  });
+
+  test('position left puts sidebar first', () => {
+    const { container } = render(Sidebar, { props: { sidebarPosition: 'left' } });
+    const children = container.firstElementChild.children;
+    expect(children[0].tagName).toBe('ASIDE');
+    expect(children[1].tagName).toBe('MAIN');
+  });
+
+  test('position right puts main first', () => {
+    const { container } = render(Sidebar, { props: { sidebarPosition: 'right' } });
+    const children = container.firstElementChild.children;
+    expect(children[0].tagName).toBe('MAIN');
+    expect(children[1].tagName).toBe('ASIDE');
+  });
+});
+
+describe('Sidebar Width', () => {
+  test('default width is medium', () => {
+    const { container } = render(Sidebar);
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-80');
+  });
+
+  test('narrow width applies lg:w-72', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'narrow' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-72');
+  });
+
+  test('medium width applies lg:w-80', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'medium' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-80');
+  });
+
+  test('wide width applies lg:w-96', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'wide' } });
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('lg:w-96');
+  });
+});
+
+describe('Sidebar Main Width', () => {
+  test('narrow sidebar gives main lg:w-[calc(100%-18rem)]', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'narrow' } });
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('lg:w-[calc(100%-18rem)]');
+  });
+
+  test('medium sidebar gives main lg:w-[calc(100%-20rem)]', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'medium' } });
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('lg:w-[calc(100%-20rem)]');
+  });
+
+  test('wide sidebar gives main lg:w-[calc(100%-24rem)]', () => {
+    const { container } = render(Sidebar, { props: { sidebarWidth: 'wide' } });
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('lg:w-[calc(100%-24rem)]');
+  });
+});
+
+describe('Sidebar Responsive', () => {
+  test('has responsive flex direction', () => {
+    const { container } = render(Sidebar);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('flex-col');
+    expect(wrapper).toHaveClass('lg:flex-row');
+  });
+
+  test('sidebar is full width on mobile', () => {
+    const { container } = render(Sidebar);
+    const aside = container.querySelector('aside');
+    expect(aside).toHaveClass('w-full');
+  });
+
+  test('main is full width on mobile', () => {
+    const { container } = render(Sidebar);
+    const main = container.querySelector('main');
+    expect(main).toHaveClass('w-full');
+  });
+
+  test('has gap between sidebar and main', () => {
+    const { container } = render(Sidebar);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('gap-6');
+  });
+});
+
+describe('Sidebar Combinations', () => {
+  test('all props together - left narrow', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'narrow',
+        sidebarPosition: 'left',
+        class: 'custom-layout'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-layout');
+
+    const children = wrapper.children;
+    expect(children[0].tagName).toBe('ASIDE');
+    expect(children[0]).toHaveClass('lg:w-72');
+
+    expect(children[1].tagName).toBe('MAIN');
+    expect(children[1]).toHaveClass('lg:w-[calc(100%-18rem)]');
+  });
+
+  test('all props together - right wide', () => {
+    const { container } = render(Sidebar, {
+      props: {
+        sidebarWidth: 'wide',
+        sidebarPosition: 'right',
+        class: 'another-layout'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('another-layout');
+
+    const children = wrapper.children;
+    expect(children[0].tagName).toBe('MAIN');
+    expect(children[0]).toHaveClass('lg:w-[calc(100%-24rem)]');
+
+    expect(children[1].tagName).toBe('ASIDE');
+    expect(children[1]).toHaveClass('lg:w-96');
+  });
+});