@reshape-biotech/design-system 2.4.2 → 2.5.1

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,14 @@
+import { Combobox } from 'bits-ui';
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+export declare const Item: import("svelte").Component<Combobox.ItemProps, {}, "ref">;
+export declare const Group: import("svelte").Component<Combobox.GroupProps, {}, "ref">;
+export declare const GroupHeading: import("svelte").Component<Combobox.GroupHeadingProps, {}, "ref">;
+export declare const Separator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+export declare const Trigger: import("svelte").Component<Combobox.TriggerProps, {}, "ref">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export declare const Input: import("svelte").Component<Combobox.InputProps, {}, "ref">;
+export declare const Arrow: import("svelte").Component<import("bits-ui/dist/bits/utilities/arrow").ArrowProps, {}, "">;
+export { default as Add } from './components/combobox-add.svelte';
+export { default as Content } from './components/combobox-content.svelte';
+export { default as Indicator } from './components/combobox-indicator.svelte';
+export * from './types';

package/dist/components/combobox/index.js

@@ -0,0 +1,15 @@
+import { Combobox } from 'bits-ui';
+// Non-modified components
+export const Root = Combobox.Root;
+export const Item = Combobox.Item;
+export const Group = Combobox.Group;
+export const GroupHeading = Combobox.GroupHeading;
+export const Separator = Combobox.Separator;
+export const Trigger = Combobox.Trigger;
+export const Portal = Combobox.Portal;
+export const Input = Combobox.Input;
+export const Arrow = Combobox.Arrow;
+export { default as Add } from './components/combobox-add.svelte';
+export { default as Content } from './components/combobox-content.svelte';
+export { default as Indicator } from './components/combobox-indicator.svelte';
+export * from './types';

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,24 @@
+import { type ComboboxContentProps as BitsComboboxContentProps, type ComboboxRootProps as BitsComboboxRootProps, type ComboboxItemProps as BitsComboboxItemProps, type ComboboxInputProps as BitsComboboxInputProps, type ComboboxTriggerProps as BitsComboboxTriggerProps, type ComboboxArrowProps as BitsComboboxArrowProps, type ComboboxContentStaticProps as BitsComboboxContentStaticProps, type ComboboxGroupHeadingProps as BitsComboboxGroupHeadingProps, type SelectItemSnippetProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type ComboboxRootProps = BitsComboboxRootProps;
+export type ComboboxContentProps = {
+    children: Snippet;
+    showScroll?: boolean;
+    portalled?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    paddedContent?: boolean;
+    fadeDuration?: number;
+} & BitsComboboxContentProps;
+export type ComboboxTriggerProps = {
+    children: Snippet;
+} & BitsComboboxTriggerProps;
+export type ComboboxItemProps = {
+    children?: Snippet<[SelectItemSnippetProps]>;
+} & BitsComboboxItemProps;
+export type ComboboxGroupHeadingProps = {
+    children: Snippet;
+} & BitsComboboxGroupHeadingProps;
+export type ComboboxInputProps = BitsComboboxInputProps;
+export type ComboboxContentStatic = BitsComboboxContentStaticProps;
+export type ComboboxArrowProps = BitsComboboxArrowProps;

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -0,0 +1,222 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { userEvent, within } from '@storybook/test';
+  import { DateTime } from 'luxon';
+  import DatePicker from './DatePicker.svelte';
+  import Dropdown from '../dropdown/Dropdown.svelte';
+  import { Icon } from '../icons';
+
+  const { Story } = defineMeta({
+    component: DatePicker,
+    title: 'Design System/DatePicker',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System%3A-V1?node-id=4381-32638&t=Epi2Ul7Cw7sCJpGy-0',
+      },
+    },
+  });
+
+  const staticDate = DateTime.local(2023, 10, 15);
+
+  let selectedDate = $state<DateTime | undefined>(undefined);
+  let loggedDate = $state<string | undefined>(undefined);
+
+  function handleDateSelection(date: DateTime) {
+    loggedDate = date.toFormat('yyyy-MM-dd');
+  }
+
+  // States for the dropdown story
+  let dropdownDate = $state<DateTime | undefined>(undefined);
+  let displayText = $state('Select a date');
+  let isOpen = $state(false);
+
+  // States for the form test
+  let formDropdownDate = $state<DateTime | undefined>(undefined);
+  let formDisplayText = $state('Select a date');
+  let formIsOpen = $state(false);
+
+  function handleDropdownSelection(date: DateTime) {
+    dropdownDate = date;
+    displayText = date.toFormat('MMM dd, yyyy');
+    isOpen = false;
+  }
+
+  function handleFormDateSelection(date: DateTime) {
+    formDropdownDate = date;
+    formDisplayText = date.toFormat('MMM dd, yyyy');
+    formIsOpen = false;
+  }
+</script>
+
+<Story name="Default" args={{ selectedDate: undefined }} />
+
+<Story name="With Selected Date" args={{ selectedDate: staticDate }} />
+
+<Story name="With Date Change Handler" asChild>
+  <div class="p-4">
+    <div class="mb-4">
+      <DatePicker {selectedDate} onClick={handleDateSelection} />
+    </div>
+    {#if loggedDate}
+      <div class="mt-4 rounded bg-neutral p-2">
+        <p>Selected date: <strong>{loggedDate}</strong></p>
+      </div>
+    {/if}
+  </div>
+</Story>
+
+<Story name="Month Navigation" asChild>
+  <div class="p-4">
+    <DatePicker selectedDate={staticDate} />
+    <div class="mt-4 text-sm text-tertiary">
+      <p>Click the arrow buttons to navigate between months</p>
+    </div>
+  </div>
+</Story>
+
+<Story
+  name="Interaction Test"
+  asChild
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Click next month button
+    const nextMonthButton = canvas.getAllByRole('button')[1]; // Second button is next month
+    await userEvent.click(nextMonthButton);
+
+    // Wait a moment
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // Click a date (the 15th of the month)
+    const dateButtons = canvas.getAllByRole('button').filter((button) => {
+      // Find buttons with just numbers as their text content
+      const text = button.textContent?.trim();
+      return text && !isNaN(Number(text));
+    });
+
+    // Find the button with text "15" if it exists
+    const date15Button = dateButtons.find((button) => button.textContent?.trim() === '15');
+
+    if (date15Button) {
+      await userEvent.click(date15Button);
+    }
+  }}
+>
+  <div class="p-4">
+    <DatePicker bind:selectedDate />
+    {#if selectedDate}
+      <div class="mt-4 rounded bg-neutral p-2">
+        <p>Selected date: <strong>{selectedDate.toFormat('yyyy-MM-dd')}</strong></p>
+      </div>
+    {/if}
+  </div>
+</Story>
+
+<Story name="Multiple DatePickers" asChild>
+  <div class="flex flex-col gap-4 p-4 md:flex-row">
+    <div>
+      <h3 class="mb-2 text-sm font-medium">Start Date</h3>
+      <DatePicker selectedDate={staticDate.minus({ days: 7 })} />
+    </div>
+    <div>
+      <h3 class="mb-2 text-sm font-medium">End Date</h3>
+      <DatePicker selectedDate={staticDate} />
+    </div>
+  </div>
+</Story>
+
+<Story name="In Dropdown" asChild>
+  <div class="p-4">
+    <Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
+      {#snippet trigger({ Trigger })}
+        <Trigger>
+          <Icon iconName="CalendarBlank" class="mr-2" size={16} />
+          {displayText}
+        </Trigger>
+      {/snippet}
+
+      {#snippet content()}
+        <DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
+      {/snippet}
+    </Dropdown>
+
+    {#if dropdownDate}
+      <div class="mt-4 rounded bg-neutral p-2">
+        <p>You selected: <strong>{dropdownDate.toFormat('MMMM dd, yyyy')}</strong></p>
+      </div>
+    {/if}
+  </div>
+</Story>
+
+<Story
+  name="Form Submit Prevention Test"
+  asChild
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Setup spy on form submission
+    const form = canvas.getByTestId('test-form');
+    let submissionCount = 0;
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      submissionCount++;
+      console.log('Form was submitted!');
+    });
+
+    // First open the dropdown
+    const dropdownTrigger = canvas.getByTestId('form-date-trigger');
+    await userEvent.click(dropdownTrigger);
+
+    // Click prev/next month and verify no submission
+    const buttons = document.querySelectorAll('button');
+    const prevMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretLeft'));
+    const nextMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretRight'));
+
+    if (prevMonthButton) {
+      await userEvent.click(prevMonthButton);
+      console.log('Clicked prev month, submission count:', submissionCount);
+    }
+
+    if (nextMonthButton) {
+      await userEvent.click(nextMonthButton);
+      console.log('Clicked next month, submission count:', submissionCount);
+    }
+
+    // Success message if no form submission occurred
+    if (submissionCount === 0) {
+      console.log('TEST PASSED: Month navigation did not trigger form submission');
+    } else {
+      console.error('TEST FAILED: Month navigation triggered form submission');
+    }
+  }}
+>
+  <div class="p-4">
+    <form data-testid="test-form" onsubmit={(e) => e.preventDefault()}>
+      <div class="mb-4">
+        <label for="name" class="mb-1 block text-sm font-medium">Name</label>
+        <input id="name" type="text" class="input input-bordered w-full" />
+      </div>
+
+      <div class="mb-4">
+        <Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
+          {#snippet trigger({ Trigger })}
+            <Trigger>
+              <div data-testid="form-date-trigger" class="flex items-center gap-2">
+                <Icon iconName="CalendarBlank" class="mr-2" size={16} />
+                {formDisplayText}
+              </div>
+            </Trigger>
+          {/snippet}
+
+          {#snippet content()}
+            <DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
+          {/snippet}
+        </Dropdown>
+      </div>
+
+      <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
+    </form>
+  </div>
+</Story>

package/dist/components/datepicker/DatePicker.stories.svelte.d.ts

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

package/dist/components/datepicker/DatePicker.svelte

@@ -0,0 +1,346 @@
+<script lang="ts">
+  import { run } from 'svelte/legacy';
+
+  import { DateTime, type MonthNumbers } from 'luxon';
+
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
+
+  interface Props {
+    selectedDate: DateTime | undefined;
+    onClick?: any;
+  }
+
+  let { selectedDate = $bindable(), onClick = (date: DateTime) => {} }: Props = $props();
+
+  const arrDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+  let today = DateTime.local();
+  const currentDay = today.day;
+  const currentMonth = today.month;
+  const currentYear = today.year;
+  let shownMonth = $state(today.month);
+  let shownYear = $state(today.year);
+  let selectedDay: number | undefined = $state();
+  let selectedMonth: number | undefined = $state();
+  let selectedYear: number | undefined = $state();
+  let rows = $state(initRows());
+
+  run(() => {
+    if (selectedDate) {
+      selectedDay = selectedDate.day;
+      selectedMonth = selectedDate.month;
+      selectedYear = selectedDate.year;
+    }
+  });
+
+  affectedRows();
+
+  function initRows() {
+    return [
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+    ];
+  }
+
+  function affectedRows() {
+    rows = initRows();
+    const firstDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).weekday - 1; // 0-based index
+    const lastDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).daysInMonth;
+
+    if (lastDayOfCurrentMonth === undefined) {
+      // Handle invalid date
+      return;
+    }
+
+    let iRow = 0;
+    let iCol = firstDayOfCurrentMonth; // Start at the correct weekday
+    let cpt = 1; // Start from day 1
+
+    for (iRow = 0; iRow < 6; iRow++) {
+      while (iCol < 7 && cpt <= lastDayOfCurrentMonth) {
+        rows[iRow][iCol] = cpt++;
+        iCol++;
+      }
+      iCol = 0; // Reset for the next row
+    }
+  }
+
+  function previousMonth() {
+    let dt = DateTime.local(shownYear, shownMonth).minus({ months: 1 });
+    shownMonth = dt.month as MonthNumbers;
+    shownYear = dt.year;
+    affectedRows();
+  }
+
+  function nextMonth() {
+    let dt = DateTime.local(shownYear, shownMonth).plus({ months: 1 });
+    shownMonth = dt.month as MonthNumbers;
+    shownYear = dt.year;
+    affectedRows();
+  }
+
+  function selectDate(y: number, m: number, d: number) {
+    selectedDate = DateTime.local(y, m, d);
+    onClick(selectedDate);
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="calendar-container" onclick={(e) => e.stopPropagation()}>
+  <div class="calendar">
+    <div class="calendar-header">
+      <div class="month-year">
+        <IconButton onclick={previousMonth} type="button">
+          <Icon iconName="CaretLeft" color="secondary" size="0.75rem" />
+        </IconButton>
+        <h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
+        <IconButton onclick={nextMonth} type="button">
+          <Icon iconName="CaretRight" color="secondary" size="0.75rem" />
+        </IconButton>
+      </div>
+    </div>
+    <div class="calendar-body">
+      <table>
+        <thead>
+          <tr>
+            {#each arrDays as day}
+              <th>
+                <p>{day}</p>
+              </th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody>
+          {#each rows as col}
+            <tr>
+              {#each col as dayOfMonth}
+                <td>
+                  {#if dayOfMonth > 0}
+                    <div class="date-container">
+                      <p
+                        class={dayOfMonth === selectedDay &&
+                        selectedMonth === shownMonth &&
+                        selectedYear === shownYear
+                          ? 'date selected-date'
+                          : 'date'}
+                      >
+                        <button
+                          onclick={() => {
+                            selectDate(shownYear, shownMonth, dayOfMonth);
+                          }}
+                        >
+                          {dayOfMonth}
+                        </button>
+                      </p>
+                      {#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
+                        <svg
+                          class="current-date-indicator text-accent"
+                          data-chromatic="ignore"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="4"
+                          height="4"
+                          viewBox="0 0 4 4"
+                        >
+                          <circle cx="2" cy="2" r="2" fill="currentColor" />
+                        </svg>
+                      {/if}
+                    </div>
+                  {/if}
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<style>
+  .calendar-container {
+
+    display: flex;
+
+    width: 312px
+}
+
+  .calendar {
+
+    overflow: hidden;
+
+    border-radius: 0.5rem;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding: 1rem;
+
+    --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)
+}
+
+  .month-year {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between
+}
+
+  .month-year .btn-custom {
+
+    border-style: none;
+
+    background-image: none
+}
+
+  .calendar-body {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    overflow-x: auto;
+
+    padding-top: 22px
+}
+
+  table {
+
+    margin: 0px;
+
+    width: 100%;
+
+    border-collapse: collapse;
+
+    --tw-border-spacing-x: 0px;
+
+    --tw-border-spacing-y: 0px;
+
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+
+    padding: 0px
+}
+
+  table thead th p {
+
+    text-align: center;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem;
+
+    font-weight: 500;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+  tr {
+
+    height: 2.5rem;
+
+    border-style: none
+}
+
+  table th,
+  table td {
+
+    margin: 0px;
+
+    border-style: none;
+
+    padding: 0px
+}
+
+  .date-container {
+
+    position: relative
+}
+
+  .date {
+
+    display: flex;
+
+    height: 2.5rem;
+
+    width: 2.5rem;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    transition-duration: 150ms
+}
+
+  .date:hover {
+
+    background-color: #5750ee1A
+}
+
+  .date:focus {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+  .selected-date {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+  .selected-date:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1))
+}
+
+  .current-date-indicator {
+
+    position: absolute;
+
+    left: 18px;
+
+    top: 2rem
+}
+
+  .date button {
+
+    border-style: none;
+
+    background-image: none
+}
+</style>

package/dist/components/datepicker/DatePicker.svelte.d.ts

@@ -0,0 +1,8 @@
+import { DateTime } from 'luxon';
+interface Props {
+    selectedDate: DateTime | undefined;
+    onClick?: any;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "selectedDate">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/datepicker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/datepicker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/divider/Divider.stories.svelte

@@ -0,0 +1,12 @@
+<script module>
+  import Divider from './Divider.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    component: Divider,
+    title: 'Design System/Divider',
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Primary" />