@reshape-biotech/design-system 2.4.2 → 2.5.1

package/dist/components/combobox/Combobox.stories.svelte

@@ -0,0 +1,442 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { userEvent, within } from '@storybook/test';
+  import { Root as ComboboxRootForMeta } from './index';
+  import * as Combobox from './index';
+  import { Icon } from '../icons';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import Divider from '../divider/Divider.svelte';
+  import Tag from '../tag/Tag.svelte';
+  import Button from '../button/Button.svelte';
+
+  const { Story } = defineMeta({
+    component: ComboboxRootForMeta,
+    title: 'Design System/Combobox',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3294&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
+
+  const fruits = [
+    { value: 'mango', label: 'Mango' },
+    { value: 'watermelon', label: 'Watermelon' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'pineapple', label: 'Pineapple' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'kiwi', label: 'Kiwi' },
+    { value: 'peach', label: 'Peach' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'blueberry', label: 'Blueberry' },
+    { value: 'raspberry', label: 'Raspberry' },
+    { value: 'blackberry', label: 'Blackberry' },
+    { value: 'plum', label: 'Plum' },
+    { value: 'apricot', label: 'Apricot' },
+    { value: 'pear', label: 'Pear' },
+    { value: 'grapefruit', label: 'Grapefruit' },
+  ];
+
+  const categories = [
+    { value: 'citrus', label: 'Citrus', items: ['orange', 'grapefruit', 'lemon'] },
+    {
+      value: 'berries',
+      label: 'Berries',
+      items: ['strawberry', 'blueberry', 'raspberry', 'blackberry'],
+    },
+    { value: 'tropical', label: 'Tropical', items: ['mango', 'pineapple', 'banana', 'kiwi'] },
+    { value: 'stone', label: 'Stone Fruits', items: ['peach', 'cherry', 'plum', 'apricot'] },
+    { value: 'other', label: 'Other', items: ['apple', 'pear', 'watermelon', 'grape'] },
+  ];
+
+  let searchValue = $state('');
+  let searchValueSingle = $state('');
+  let searchValueGrouped = $state('');
+  let searchValueCustom = $state('');
+
+  let selected = $state<string[]>([]);
+  let selectedSingle = $state<string>('');
+  let selectedGrouped = $state<string[]>([]);
+  let selectedCustom = $state<string[]>([]);
+
+  const filteredFruits = $derived(
+    searchValue === ''
+      ? fruits
+      : fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
+  );
+
+  const filteredFruitsSingle = $derived(
+    searchValueSingle === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueSingle.toLowerCase())
+        )
+  );
+
+  const filteredFruitsGrouped = $derived(
+    searchValueGrouped === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueGrouped.toLowerCase())
+        )
+  );
+
+  const filteredFruitsCustom = $derived(
+    searchValueCustom === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueCustom.toLowerCase())
+        )
+  );
+
+  const exactMatch = $derived(
+    filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
+  );
+
+  const exactMatchCustom = $derived(
+    filteredFruitsCustom.find(
+      (fruit) => fruit.value.toLowerCase() === searchValueCustom.toLowerCase()
+    )
+  );
+
+  let customAnchor = $state<HTMLElement>(null!);
+  let customAnchorButton = $state<HTMLElement>(null!);
+  let customAnchorSingle = $state<HTMLElement>(null!);
+  let customAnchorGrouped = $state<HTMLElement>(null!);
+  let customAnchorCustom = $state<HTMLElement>(null!);
+</script>
+
+<Story name="Multiple Selection" asChild>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValue = '';
+    }}
+    type="multiple"
+    name="favoriteFruit"
+    items={filteredFruits}
+    bind:value={selected}
+  >
+    <div class="flex gap-2">
+      {#each selected as fruit}
+        <Tag>
+          {fruit}
+        </Tag>
+      {/each}
+    </div>
+    <Combobox.Trigger>
+      <div bind:this={customAnchor}>
+        <IconButton rounded={false}>
+          <Icon iconName="Plus" />
+        </IconButton>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content {customAnchor} class="flex flex-col justify-between">
+      <div>
+        <Combobox.Input
+          placeholder="Search a fruit"
+          oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+          autofocus
+        />
+        <Divider />
+      </div>
+      <div class="flex flex-grow flex-col">
+        {#if filteredFruits.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+            {#each filteredFruits as fruit (fruit.value)}
+              <Combobox.Item value={fruit.value} label={fruit.label}>
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {:else}
+              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+            {/each}
+          </Combobox.Group>
+        {/if}
+      </div>
+      {#if !exactMatch && searchValue !== ''}
+        <Divider />
+
+        <Combobox.Add
+          onclick={() => {
+            selected.push(searchValue);
+            fruits.push({ value: searchValue, label: searchValue });
+            searchValue = '';
+          }}
+        >
+          <p>Add new fruit</p>
+        </Combobox.Add>
+      {/if}
+    </Combobox.Content>
+  </Combobox.Root>
+</Story>
+
+<Story name="Single Selection" asChild>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValueSingle = '';
+    }}
+    type="single"
+    name="singleFruit"
+    items={filteredFruitsSingle}
+    bind:value={selectedSingle}
+  >
+    <Combobox.Trigger>
+      <div bind:this={customAnchorSingle}>
+        <Button variant="secondary" size="sm">
+          {selectedSingle ? selectedSingle : 'Select a fruit'}
+        </Button>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorSingle}>
+      <div class="flex flex-grow flex-col">
+        {#if filteredFruitsSingle.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+            {#each filteredFruitsSingle as fruit (fruit.value)}
+              <Combobox.Item value={fruit.value} label={fruit.label}>
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {:else}
+              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+            {/each}
+          </Combobox.Group>
+        {/if}
+      </div>
+    </Combobox.Content>
+  </Combobox.Root>
+</Story>
+
+<Story name="Grouped Items" asChild>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValueGrouped = '';
+    }}
+    type="multiple"
+    name="groupedFruits"
+    items={filteredFruitsGrouped}
+    bind:value={selectedGrouped}
+  >
+    <div class="flex flex-wrap gap-2">
+      {#each selectedGrouped as fruit}
+        <Tag>
+          {fruit}
+        </Tag>
+      {/each}
+    </div>
+    <Combobox.Trigger>
+      <div bind:this={customAnchorGrouped}>
+        <Button variant="primary" size="sm">
+          <Icon iconName="List" />
+          Select fruits by category
+        </Button>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped}>
+      <div>
+        <Combobox.Input
+          placeholder="Search across categories"
+          oninput={(e: Event) => (searchValueGrouped = (e.target as HTMLInputElement).value)}
+          autofocus
+        />
+        <Divider />
+      </div>
+      <div class="flex max-h-80 flex-grow flex-col overflow-y-auto">
+        {#if searchValueGrouped === ''}
+          {#each categories as category}
+            <Combobox.Group>
+              <Combobox.GroupHeading>{category.label}</Combobox.GroupHeading>
+              {#each category.items as item}
+                {@const fruit = fruits.find((f) => f.value === item)}
+                {#if fruit}
+                  <Combobox.Item value={fruit.value} label={fruit.label}>
+                    {#snippet children({ selected })}
+                      {fruit.label}
+                      {#if selected}
+                        <Combobox.Indicator />
+                      {/if}
+                    {/snippet}
+                  </Combobox.Item>
+                {/if}
+              {/each}
+            </Combobox.Group>
+          {/each}
+        {:else if filteredFruitsGrouped.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Search Results</Combobox.GroupHeading>
+            {#each filteredFruitsGrouped as fruit (fruit.value)}
+              <Combobox.Item value={fruit.value} label={fruit.label}>
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {/each}
+          </Combobox.Group>
+        {:else}
+          <span class="text-muted-foreground block px-5 py-2 text-sm"> No results found </span>
+        {/if}
+      </div>
+    </Combobox.Content>
+  </Combobox.Root>
+</Story>
+
+<Story
+  name="Interaction Test"
+  asChild
+  play={async ({ canvasElement }) => {
+    // Get the canvas element
+    const canvas = within(canvasElement);
+
+    // Find and click the trigger button to open the combobox
+    const triggerButton = canvas.getByTestId('combobox-trigger');
+    await userEvent.click(triggerButton);
+
+    // Wait for the combobox content to appear in the document
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // Find the combobox content in the document
+    const comboboxContent = document.querySelector(
+      '[data-testid="combobox-content"]'
+    ) as HTMLElement;
+    if (!comboboxContent) {
+      console.log('Combobox content not found');
+      return;
+    }
+
+    // Use within to scope queries to the combobox content
+    const contentScope = within(comboboxContent);
+    const searchInput = contentScope.getByTestId('combobox-input');
+
+    // Type "berry" in the search input
+    await userEvent.type(searchInput, 'berry');
+
+    // Wait for the filtering to complete
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // Find and click on the Strawberry option
+    const strawberryOption = contentScope.getByText('Strawberry');
+    await userEvent.click(strawberryOption);
+
+    // Wait for selection to be processed
+
+    // Open the combobox again
+
+    // Get the search input again
+
+    // Clear the previous search and type "mango"
+    await userEvent.clear(searchInput);
+    await userEvent.type(searchInput, 'mango');
+
+    // Wait for filtering to complete
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // Find and click on the Mango option
+    const mangoOption = contentScope.getByText('Mango');
+    await userEvent.click(mangoOption);
+
+    await userEvent.keyboard('{Escape}');
+
+    // Test complete
+    console.log('Successfully selected Strawberry and Mango');
+  }}
+>
+  <div data-testid="combobox-container">
+    <Combobox.Root
+      onOpenChange={(o) => {
+        if (!o) searchValue = '';
+      }}
+      type="multiple"
+      name="favoriteFruit"
+      items={filteredFruits}
+      bind:value={selected}
+    >
+      <div class="flex gap-2" data-testid="selected-tags">
+        {#each selected as fruit}
+          <Tag>
+            <div data-value={fruit}>
+              {fruit}
+            </div>
+          </Tag>
+        {/each}
+      </div>
+      <Combobox.Trigger data-testid="combobox-trigger">
+        <div bind:this={customAnchor}>
+          <IconButton rounded={false}>
+            <Icon iconName="Plus" />
+          </IconButton>
+        </div>
+      </Combobox.Trigger>
+      <Combobox.Content
+        {customAnchor}
+        class="flex flex-col justify-between"
+        data-testid="combobox-content"
+      >
+        <div>
+          <Combobox.Input
+            placeholder="Search a fruit"
+            oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+            autofocus
+            data-testid="combobox-input"
+          />
+          <Divider />
+        </div>
+        <div class="flex flex-grow flex-col">
+          {#if filteredFruits.length > 0}
+            <Combobox.Group>
+              <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+              {#each filteredFruits as fruit (fruit.value)}
+                <Combobox.Item
+                  value={fruit.value}
+                  label={fruit.label}
+                  data-testid={`fruit-option-${fruit.value}`}
+                >
+                  {#snippet children({ selected })}
+                    {fruit.label}
+                    {#if selected}
+                      <Combobox.Indicator />
+                    {/if}
+                  {/snippet}
+                </Combobox.Item>
+              {:else}
+                <span class="block px-5 py-2 text-sm text-muted-foreground">
+                  No results found
+                </span>
+              {/each}
+            </Combobox.Group>
+          {/if}
+        </div>
+        {#if !exactMatch && searchValue !== ''}
+          <Divider />
+
+          <Combobox.Add
+            data-testid="add-new-fruit"
+            onclick={() => {
+              selected.push(searchValue);
+              fruits.push({ value: searchValue, label: searchValue });
+              searchValue = '';
+            }}
+          >
+            <p>Add new fruit</p>
+          </Combobox.Add>
+        {/if}
+      </Combobox.Content>
+    </Combobox.Root>
+  </div>
+</Story>

package/dist/components/combobox/Combobox.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import * as Combobox from './index';
+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;
+}
+declare const Combobox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Combobox = InstanceType<typeof Combobox>;
+export default Combobox;

package/dist/components/combobox/components/combobox-add.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Icon } from '../../icons';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  type Props = { children: Snippet } & HTMLButtonAttributes;
+
+  let { children, ...props }: Props = $props();
+</script>
+
+<button {...props}>
+  <Icon iconName="Plus" class="text-icon-secondary" />
+  {@render children()}
+</button>
+
+<style>
+  button {
+    margin-left: 0.5rem;
+    display: flex;
+    height: 2.5rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+</style>

package/dist/components/combobox/components/combobox-add.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = {
+    children: Snippet;
+} & HTMLButtonAttributes;
+declare const ComboboxAdd: import("svelte").Component<Props, {}, "">;
+type ComboboxAdd = ReturnType<typeof ComboboxAdd>;
+export default ComboboxAdd;

package/dist/components/combobox/components/combobox-content.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { Combobox } from 'bits-ui';
+  import type { ComboboxContentProps } from '../types';
+  import { Icon } from '../../icons';
+  import { fade } from 'svelte/transition';
+
+  let {
+    children,
+    class: className,
+    showScroll = true,
+    portalled = true,
+    header,
+    footer,
+    paddedContent = true,
+    fadeDuration = 0,
+    ...props
+  }: ComboboxContentProps = $props();
+</script>
+
+{#snippet content()}
+  <Combobox.Content {...props} class={className} forceMount>
+    {#snippet child({ wrapperProps, props, open })}
+      {#snippet content()}
+        {@render header?.()}
+        {#if showScroll}
+          <Combobox.ScrollUpButton class="flex justify-center">
+            <Icon iconName="CaretUp" />
+          </Combobox.ScrollUpButton>
+          <Combobox.Viewport class={paddedContent ? 'p-1' : ''}>
+            {@render children()}
+          </Combobox.Viewport>
+          <Combobox.ScrollDownButton class="flex justify-center">
+            <Icon iconName="CaretDown" />
+          </Combobox.ScrollDownButton>
+        {:else}
+          {@render children()}
+        {/if}
+        {@render footer?.()}
+      {/snippet}
+
+      {#if open}
+        <div {...wrapperProps}>
+          <div {...props} transition:fade={{ duration: fadeDuration }}>
+            {@render content()}
+          </div>
+        </div>
+      {/if}
+    {/snippet}
+  </Combobox.Content>
+{/snippet}
+
+{#if portalled}
+  <Combobox.Portal>
+    {@render content()}
+  </Combobox.Portal>
+{:else}
+  {@render content()}
+{/if}
+
+<style>
+  :global([data-combobox-content]) {
+
+    z-index: 1;
+
+    width: 100%;
+
+    border-radius: 0.75rem;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
+
+    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+  :global([data-combobox-input]) {
+
+    width: 100%;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+  :global([data-combobox-item]) {
+
+    display: flex;
+
+    height: 2.5rem;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    border-radius: 0.375rem;
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem
+}
+  :global([data-combobox-item][data-highlighted]) {
+
+    background-color: #12192a0A
+}
+
+  :global([data-combobox-group-label]) {
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+</style>

package/dist/components/combobox/components/combobox-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxContentProps } from '../types';
+declare const ComboboxContent: import("svelte").Component<ComboboxContentProps, {}, "">;
+type ComboboxContent = ReturnType<typeof ComboboxContent>;
+export default ComboboxContent;

package/dist/components/combobox/components/combobox-indicator.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Icon } from '../../icons';
+</script>
+
+<Icon iconName="Check" />

package/dist/components/combobox/components/combobox-indicator.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const ComboboxIndicator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ComboboxIndicator = InstanceType<typeof ComboboxIndicator>;
+export default ComboboxIndicator;