@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Input/Textarea.spec.js

@@ -0,0 +1,255 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Textarea from './Textarea.svelte';
+
+describe('Textarea Component', () => {
+  test('renders a textarea element', () => {
+    const { container } = render(Textarea);
+    expect(container.querySelector('textarea')).toBeInTheDocument();
+  });
+
+  test('renders inside a wrapper div', () => {
+    const { container } = render(Textarea);
+    expect(container.querySelector('div.flex.flex-col')).toBeInTheDocument();
+  });
+
+  test('applies custom className to textarea', () => {
+    const { container } = render(Textarea, { props: { class: 'custom-textarea' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('custom-textarea');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Textarea, { props: { 'data-testid': 'my-textarea' } });
+    const textarea = container.querySelector('[data-testid="my-textarea"]');
+    expect(textarea).toBeInTheDocument();
+  });
+});
+
+describe('Textarea Props', () => {
+  test('value defaults to empty string', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('');
+  });
+
+  test('value can be set', () => {
+    const { container } = render(Textarea, { props: { value: 'Hello world' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('Hello world');
+  });
+
+  test('placeholder prop is applied', () => {
+    const { container } = render(Textarea, { props: { placeholder: 'Enter text...' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('placeholder', 'Enter text...');
+  });
+
+  test('rows defaults to 4', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('rows', '4');
+  });
+
+  test('rows can be customized', () => {
+    const { container } = render(Textarea, { props: { rows: 8 } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('rows', '8');
+  });
+
+  test('disabled prop disables textarea', () => {
+    const { container } = render(Textarea, { props: { disabled: true } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toBeDisabled();
+  });
+
+  test('readonly prop makes textarea readonly', () => {
+    const { container } = render(Textarea, { props: { readonly: true } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('readonly');
+  });
+
+  test('id prop is applied', () => {
+    const { container } = render(Textarea, { props: { id: 'description' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('id', 'description');
+  });
+
+  test('name prop is applied', () => {
+    const { container } = render(Textarea, { props: { name: 'bio' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('name', 'bio');
+  });
+
+  test('maxlength prop is applied', () => {
+    const { container } = render(Textarea, { props: { maxlength: 500 } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('maxlength', '500');
+  });
+
+  test('minlength prop is applied', () => {
+    const { container } = render(Textarea, { props: { minlength: 10 } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('minlength', '10');
+  });
+});
+
+describe('Textarea Label', () => {
+  test('renders label when provided', () => {
+    render(Textarea, { props: { label: 'Description' } });
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  test('label is associated with textarea via id', () => {
+    const { container } = render(Textarea, { props: { label: 'Bio', id: 'bio-field' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveAttribute('for', 'bio-field');
+  });
+
+  test('label shows asterisk when required', () => {
+    const { container } = render(Textarea, { props: { label: 'Description', required: true } });
+    expect(container.querySelector('.text-red-500')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('no label element when label prop is empty', () => {
+    const { container } = render(Textarea, { props: { label: '' } });
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+});
+
+describe('Textarea Error State', () => {
+  test('shows error message when error prop is set', () => {
+    render(Textarea, { props: { error: 'This field is required' } });
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+
+  test('has border-red-500 when error is present', () => {
+    const { container } = render(Textarea, { props: { error: 'Error' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('border-red-500');
+  });
+
+  test('aria-invalid is true when error is present', () => {
+    const { container } = render(Textarea, { props: { error: 'Error' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  test('aria-invalid is false when no error', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('aria-invalid', 'false');
+  });
+});
+
+describe('Textarea Accessibility', () => {
+  test('aria-required is true when required', () => {
+    const { container } = render(Textarea, { props: { required: true } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('aria-required', 'true');
+  });
+
+  test('aria-required is false when not required', () => {
+    const { container } = render(Textarea, { props: { required: false } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('aria-required', 'false');
+  });
+});
+
+describe('Textarea Styling', () => {
+  test('has w-full class', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('w-full');
+  });
+
+  test('has proper padding', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('p-2.5');
+  });
+
+  test('has bg-gray-50 background', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('bg-gray-50');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('dark:bg-gray-800');
+  });
+
+  test('has rounded-lg border radius', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('rounded-lg');
+  });
+
+  test('has resize-y for vertical resizing', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('resize-y');
+  });
+
+  test('has focus ring classes', () => {
+    const { container } = render(Textarea);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('focus:ring-4');
+    expect(textarea).toHaveClass('focus:ring-blue-300');
+  });
+
+  test('has opacity-50 and cursor-not-allowed when disabled', () => {
+    const { container } = render(Textarea, { props: { disabled: true } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('opacity-50');
+    expect(textarea).toHaveClass('cursor-not-allowed');
+  });
+});
+
+describe('Textarea Events', () => {
+  test('calls oninput when user types', async () => {
+    const user = userEvent.setup();
+    const oninput = vi.fn();
+    const { container } = render(Textarea, { props: { oninput } });
+
+    const textarea = container.querySelector('textarea');
+    await user.type(textarea, 'Hello');
+    expect(oninput).toHaveBeenCalled();
+  });
+
+  test('calls onchange when textarea loses focus after change', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Textarea, { props: { onchange } });
+
+    const textarea = container.querySelector('textarea');
+    await user.type(textarea, 'Hello');
+    await user.tab(); // Blur the textarea
+    expect(onchange).toHaveBeenCalled();
+  });
+
+  test('calls onblur when textarea loses focus', async () => {
+    const user = userEvent.setup();
+    const onblur = vi.fn();
+    const { container } = render(Textarea, { props: { onblur } });
+
+    const textarea = container.querySelector('textarea');
+    await user.click(textarea);
+    await user.tab();
+    expect(onblur).toHaveBeenCalled();
+  });
+
+  test('calls onfocus when textarea receives focus', async () => {
+    const user = userEvent.setup();
+    const onfocus = vi.fn();
+    const { container } = render(Textarea, { props: { onfocus } });
+
+    const textarea = container.querySelector('textarea');
+    await user.click(textarea);
+    expect(onfocus).toHaveBeenCalled();
+  });
+});

package/dist/primitives/Input/Textarea.stories.svelte

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Textarea from './Textarea.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Textarea',
-    component: Textarea,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      placeholder: { control: 'text' },
-      rows: { control: 'number' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      maxlength: { control: 'number' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Multi-line text input component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Description"
-        placeholder="Enter your description..."
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Bio"
-        placeholder="Tell us about yourself..."
-        bind:value={value}
-      />
-      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Max Length">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Short Bio"
-        placeholder="Keep it brief..."
-        maxlength={200}
-        helperText="Maximum 200 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Comments"
-        placeholder="Enter your comments..."
-        errorText="Please provide at least 10 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Custom Rows">
-  {#snippet template()}
-    <div class="space-y-6 max-w-md">
-      <Textarea
-        label="Small (2 rows)"
-        placeholder="Two rows..."
-        rows={2}
-      />
-      <Textarea
-        label="Medium (4 rows)"
-        placeholder="Four rows..."
-        rows={4}
-      />
-      <Textarea
-        label="Large (8 rows)"
-        placeholder="Eight rows..."
-        rows={8}
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Disabled Textarea"
-        placeholder="Cannot edit this..."
-        disabled
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-2xl">
-      <Textarea
-        label="Default"
-        placeholder="Enter text..."
-      />
-      <Textarea
-        label="With Error"
-        placeholder="Enter text..."
-        errorText="This field is required"
-      />
-      <Textarea
-        label="Disabled"
-        placeholder="Cannot edit..."
-        disabled
-      />
-      <Textarea
-        label="With Helper"
-        placeholder="Enter text..."
-        helperText="Optional additional information"
-      />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Textarea',
+    component: Textarea,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      placeholder: { control: 'text' },
+      rows: { control: 'number' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      maxlength: { control: 'number' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Multi-line text input component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Description"
+        placeholder="Enter your description..."
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        bind:value={value}
+      />
+      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Max Length">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Short Bio"
+        placeholder="Keep it brief..."
+        maxlength={200}
+        helperText="Maximum 200 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Comments"
+        placeholder="Enter your comments..."
+        errorText="Please provide at least 10 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Custom Rows">
+  {#snippet template()}
+    <div class="space-y-6 max-w-md">
+      <Textarea
+        label="Small (2 rows)"
+        placeholder="Two rows..."
+        rows={2}
+      />
+      <Textarea
+        label="Medium (4 rows)"
+        placeholder="Four rows..."
+        rows={4}
+      />
+      <Textarea
+        label="Large (8 rows)"
+        placeholder="Eight rows..."
+        rows={8}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Disabled Textarea"
+        placeholder="Cannot edit this..."
+        disabled
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-2xl">
+      <Textarea
+        label="Default"
+        placeholder="Enter text..."
+      />
+      <Textarea
+        label="With Error"
+        placeholder="Enter text..."
+        errorText="This field is required"
+      />
+      <Textarea
+        label="Disabled"
+        placeholder="Cannot edit..."
+        disabled
+      />
+      <Textarea
+        label="With Helper"
+        placeholder="Enter text..."
+        helperText="Optional additional information"
+      />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Input/Textarea.svelte

@@ -68,38 +68,38 @@
     onfocus?.(event);
   }
 </script>
-
-<div class="flex flex-col gap-2 w-full">
-  {#if label}
-    <label for={id || name} class={`${typography.label} leading-tight`}>
-      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-    </label>
-  {/if}
-
-  <textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {maxlength}
-    {minlength}
-    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onblur={handleBlur}
-    onfocus={handleFocus}
-    {onkeydown}
-    {onkeyup}
-    {onkeypress}
-    aria-required={required}
-    aria-invalid={!!error}
-    {...restProps}
-  ></textarea>
-
-  {#if error}
-    <p class={typography.error}>{error}</p>
-  {/if}
-</div>
+
+<div class="flex flex-col gap-2 w-full">
+  {#if label}
+    <label for={id || name} class={`${typography.label} leading-tight`}>
+      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={handleFocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
+    aria-required={required}
+    aria-invalid={!!error}
+    {...restProps}
+  ></textarea>
+
+  {#if error}
+    <p class={typography.error}>{error}</p>
+  {/if}
+</div>

package/dist/primitives/Label/Label.spec.d.ts

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

package/dist/primitives/Label/Label.spec.d.ts.map

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