@reshape-biotech/design-system 1.2.7 → 2.0.1

package/README.md

@@ -13,6 +13,8 @@ bun run package
 bun publish
 ```
 
+`bun publish` requires a valid NPM publishing token to be set in your environment.
+
 ## About the Design System
 
 This package contains the core design system for Reshape Biotech frontend projects, providing a consistent and reusable set of components and styles.

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

@@ -1,5 +1,5 @@
 import { Collapsible } from 'bits-ui';
-export declare const Root: import("svelte").Component<Collapsible.RootProps, {}, "open" | "ref">;
+export declare const Root: import("svelte").Component<Collapsible.RootProps, {}, "ref" | "open">;
 export { default as Trigger } from './components/collapsible-trigger.svelte';
 export { default as Content } from './components/collapsible-content.svelte';
 export type { CollapsibleTriggerProps, CollapsibleContentProps } from './types';

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

@@ -1,5 +1,5 @@
 import { Combobox } from 'bits-ui';
-export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
+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">;

package/dist/components/select/Select.stories.svelte

@@ -1,113 +1,219 @@
 <script module lang="ts">
-  import Select from './Select.svelte';
-
   import { defineMeta } from '@storybook/addon-svelte-csf';
+  import * as Select from './index';
+  import { Icon, type IconName } from '../icons';
 
   const { Story } = defineMeta({
-    component: Select,
-    title: 'Design System/Select',
-    tags: ['autodocs'],
+    title: 'Design System/Select(New)',
+
+    argTypes: {
+      placeholder: { control: 'text', defaultValue: 'Select an option...' },
+      disabled: { control: 'boolean', defaultValue: false },
+      multiple: { control: 'boolean', defaultValue: false },
+    },
   });
 
-  const items = [
-    { value: '1', label: 'One', group: 'Group 1', description: 'Description 1' },
-    { value: '2', label: 'Two', group: 'Group 1', description: 'Description 2' },
-    { value: '3', label: 'Three', group: 'Group 2' },
-    { value: '4', label: 'Four', group: 'Group 2' },
+  const foodGroups = [
+    { value: 'fruits', label: 'Fruits' },
+    { value: 'vegetables', label: 'Vegetables' },
+    { value: 'grains', label: 'Grains' },
+    { value: 'protein', label: 'Protein Foods' },
+    { value: 'dairy', label: 'Dairy' },
+  ];
+
+  const moreFruits = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'blueberry', label: 'Blueberry' },
+    { value: 'grapes', label: 'Grapes' },
+    { value: 'mango', label: 'Mango' },
+  ];
+
+  let selectedValueSingle = $state<string | undefined>(undefined);
+  let selectedValueMultiple = $state<string[]>([]);
+  let selectedValueSinglePreselected = $state<string | undefined>('vegetables');
+  let selectedValueMultiplePreselected = $state<string[]>(['fruits', 'grains']);
+
+  const customIconItems = [
+    { value: 'insect_count', label: 'Insect count', iconName: 'Hash' },
+    { value: 'insect_health', label: 'Insect health', iconName: 'Hash' },
+    { value: 'leaf_area', label: 'Leaf area', iconName: 'Ruler' },
+    { value: 'time_spent', label: 'Time spent on leaf', iconName: 'Timer' },
   ];
-  let value: any = $state();
-  let thisChanged = $state(false);
+  let selectedCustomItems = $state<string[]>(['insect_count', 'leaf_area']);
 
-  function handleInput(e: Event) {
-    thisChanged = true;
-  }
+  const handleRemoveCustomItem = (itemValue: string) => {
+    selectedCustomItems = selectedCustomItems.filter((v) => v !== itemValue);
+  };
+  const handleRemoveValueMultiple = (itemValue: string) => {
+    selectedValueMultiple = selectedValueMultiple.filter((v) => v !== itemValue);
+  };
+  const handleRemoveValueMultiplePreselected = (itemValue: string) => {
+    selectedValueMultiplePreselected = selectedValueMultiplePreselected.filter(
+      (v) => v !== itemValue
+    );
+  };
 </script>
 
-<Story name="Default" asChild>
-  <div class="py-12">
-    <Select listOpen {items} />
-  </div>
-</Story>
-<Story name="Grouped" asChild>
-  <div class="py-12">
-    <Select listOpen {items} withGroup />
-  </div>
-</Story>
+<Story name="Default (Single Select)" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedValueSingle} items={foodGroups} type="single" open>
+      <Select.Trigger
+        class="w-[250px]"
+        placeholder={'Select a food group'}
+        displayValue={foodGroups.find((f) => f.value === selectedValueSingle)?.label}
+      />
 
-<Story name="DefaultValue" asChild>
-  <div class="py-12">
-    <Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
+      <Select.Content>
+        {#each foodGroups as item (item.value)}
+          <Select.Item value={item.value} label={item.label} />
+        {/each}
+      </Select.Content>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueSingle ?? 'Nothing'}
+    </div>
   </div>
 </Story>
 
-<Story name="Disabled" asChild>
-  <div class="py-12">
-    <Select listOpen {items} disabled />
-  </div>
-</Story>
-<Story name="Searchable" asChild>
-  <div class="py-12">
-    <Select listOpen {items} searchable />
-  </div>
-</Story>
-<Story name="Open" asChild>
-  <div class="py-12">
-    <Select listOpen {items} />
+<Story name="With Groups (Single Select)" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedValueSingle} items={moreFruits} type="single">
+      <Select.Trigger
+        class="w-[250px]"
+        placeholder={'Select a fruit'}
+        displayValue={moreFruits.find((f) => f.value === selectedValueSingle)?.label}
+      />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Group label="Fruits">
+            {#each moreFruits.slice(0, 2) as item (item.value)}
+              <Select.Item value={item.value} label={item.label} />
+            {/each}
+          </Select.Group>
+          <Select.Group label="More Fruits">
+            {#each moreFruits.slice(2) as item (item.value)}
+              <Select.Item value={item.value} label={item.label} />
+            {/each}
+          </Select.Group>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueSingle ?? 'Nothing'}
+    </div>
   </div>
 </Story>
-<Story name="Error" asChild>
-  <div class="py-12">
-    <Select listOpen {items} hasError />
-  </div>
-</Story>
-<Story name="Placeholder" asChild>
-  <div class="py-12">
-    <Select listOpen {items} placeholder="Select a value" />
+
+<Story name="Multiple Select Example" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedValueMultiple} items={foodGroups} type="multiple">
+      <Select.MultiSelectTrigger
+        selectedValues={selectedValueMultiple}
+        items={foodGroups}
+        onRemoveItem={handleRemoveValueMultiple}
+      />
+      <Select.Portal>
+        <Select.Content>
+          {#each foodGroups as item (item.value)}
+            <Select.Item value={item.value} label={item.label} />
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueMultiple.join(', ') || 'Nothing'}
+    </div>
   </div>
 </Story>
-<Story name="Multiple" asChild>
-  <div class="py-12">
-    <Select listOpen {items} multiple bind:value />
+
+<Story name="Disabled Select" asChild>
+  <div class="p-4">
+    <Select.Root items={foodGroups} type="single" disabled={true}>
+      <Select.Trigger class="w-[250px]" placeholder={'Cannot select (disabled)'} disabled={true} />
+      <Select.Portal>
+        <Select.Content>
+          {#each foodGroups as item (item.value)}
+            <Select.Item value={item.value} label={item.label} disabled={true} />
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">Selected: Nothing (disabled)</div>
   </div>
 </Story>
 
-<Story name="Bind value input changed" asChild>
-  <div class="py-12">
-    <Select listOpen {items} bind:value on:input={handleInput} />
-    {#if thisChanged}
-      <p class="text-secondary">Wow you picked something from the dropdown 💪</p>{/if}
+<Story name="Pre-selected (Single Select)" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedValueSinglePreselected} items={foodGroups} type="single">
+      <Select.Trigger
+        class="w-[250px]"
+        placeholder={'Select a food group'}
+        displayValue={foodGroups.find((f) => f.value === selectedValueSinglePreselected)?.label}
+      />
+      <Select.Portal>
+        <Select.Content>
+          {#each foodGroups as item (item.value)}
+            <Select.Item value={item.value} label={item.label} />
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueSinglePreselected ?? 'Nothing'}
+    </div>
   </div>
 </Story>
 
-<Story name="Custom Item" asChild>
-  <div class="py-12">
-    <Select listOpen {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-      <!-- @migration-task: migrate this slot by hand, `custom-item` is an invalid identifier -->
-      <div
-        slot="custom-item"
-        class="flex h-14 w-full items-center overflow-hidden whitespace-nowrap"
-        let:item
-      >
-        <div class="flex flex-col">
-          <p class="text-sm">
-            {item.label}
-          </p>
-          <p class="max-w-20 text-xs text-secondary">
-            {item.description} very very long long loooooong long description
-          </p>
-        </div>
-      </div>
-    </Select>
+<Story name="Pre-selected (Multiple Select)" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedValueMultiplePreselected} items={foodGroups} type="multiple">
+      <Select.MultiSelectTrigger
+        selectedValues={selectedValueMultiplePreselected}
+        items={foodGroups}
+        onRemoveItem={handleRemoveValueMultiplePreselected}
+      />
+      <Select.Portal>
+        <Select.Content>
+          {#each foodGroups as item (item.value)}
+            <Select.Item value={item.value} label={item.label} />
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueMultiplePreselected.join(', ') || 'Nothing'}
+    </div>
   </div>
 </Story>
 
-<Story name="Custom selection label" asChild>
-  <div class="py-12">
-    <Select {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-      <!-- @migration-task: migrate this slot by hand, `custom-selection` is an invalid identifier -->
-      <div slot="custom-selection" let:selection>
-        <p>💩{selection.label} poopoo💩</p>
-      </div>
-    </Select>
+<Story name="Multiple Select with Custom Icons and Dismissible Tags" asChild>
+  <div class="p-4">
+    <Select.Root bind:value={selectedCustomItems} items={customIconItems} type="multiple">
+      <Select.MultiSelectTrigger
+        class="w-[350px]"
+        selectedValues={selectedCustomItems}
+        items={customIconItems}
+        placeholder="Select metrics..."
+        onRemoveItem={handleRemoveCustomItem}
+      />
+      <Select.Portal>
+        <Select.Content>
+          {#each customIconItems as item (item.value)}
+            <Select.Item value={item.value} label={item.label}>
+              {#snippet children()}
+                <div class="flex items-center gap-2">
+                  <Icon iconName={item.iconName as IconName} class="h-4 w-4" />
+                  <span>{item.label}</span>
+                </div>
+              {/snippet}
+            </Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+    <div class="mt-2 rounded bg-neutral p-2 text-sm">
+      Selected Values: {selectedCustomItems.join(', ') || 'Nothing'}
+    </div>
   </div>
 </Story>

package/dist/components/select/Select.stories.svelte.d.ts

@@ -1,4 +1,4 @@
-import Select from './Select.svelte';
+import * as Select 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;

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

@@ -1,7 +1,10 @@
-export type SelectItemProps = {
-    value: string;
-    label: string;
-    description?: string;
-    group?: string;
-};
-export { default as Select } from './Select.svelte';
+import Content from './components/SelectContent.svelte';
+import Item from './components/SelectItem.svelte';
+import GroupHeading from './components/SelectGroupHeading.svelte';
+import Trigger from './components/SelectTrigger.svelte';
+import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
+import Group from './components/Group.svelte';
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
+export * from './types';

package/dist/components/select/index.js

@@ -1 +1,12 @@
-export { default as Select } from './Select.svelte';
+import { Select as SelectPrimitive } from 'bits-ui';
+// Custom Svelte components
+import Content from './components/SelectContent.svelte';
+import Item from './components/SelectItem.svelte';
+import GroupHeading from './components/SelectGroupHeading.svelte';
+import Trigger from './components/SelectTrigger.svelte';
+import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
+import Group from './components/Group.svelte';
+export const Root = SelectPrimitive.Root;
+export const Portal = SelectPrimitive.Portal;
+export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
+export * from './types';

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -48,7 +48,13 @@
       : undefined
   );
 
+  let displayValue = $state('');
+
   const getStringValue = () => {
+    if (displayValue !== '') {
+      return displayValue;
+    }
+
     if (value === undefined || value === null || isNaN(value)) {
       return '';
     }
@@ -61,6 +67,13 @@
         ? ''
         : String(newValueFromInput);
 
+    const validNumberPattern = /^-?\d*\.?\d*$/;
+    if (stringifiedInput !== '' && !validNumberPattern.test(stringifiedInput)) {
+      return;
+    }
+
+    displayValue = stringifiedInput;
+
     if (stringifiedInput.trim() === '') {
       value = undefined;
     } else {
@@ -73,7 +86,9 @@
 <Input
   bind:value={() => getStringValue(), (v) => setNumericValue(v)}
   placeholder={String(placeholder)}
-  type={'number'}
+  type={'text'}
+  inputmode={'decimal'}
+  pattern={config?.schema?.type === 'integer' ? '-?\\d*' : '-?\\d*\\.?\\d*'}
   {readonly}
   id={String(derivedAttrs.id)}
   name={String(derivedAttrs.name)}

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -10,20 +10,7 @@
 </script>
 
 <Story name="Base" asChild>
-  <div class="flex justify-center">
-    <Tooltip>
-      {#snippet trigger()}
-        <button>Hover me</button>
-      {/snippet}
-      {#snippet content()}
-        <span>Hello World</span>
-      {/snippet}
-    </Tooltip>
-  </div>
-</Story>
-
-<Story name="Force Open" asChild>
-  <div class="flex justify-center">
+  <div class="flex justify-center py-12">
     <Tooltip forceOpen={true}>
       {#snippet trigger()}
         <button>Hover me</button>
@@ -36,8 +23,8 @@
 </Story>
 
 <Story name="No Arrow" asChild>
-  <div class="flex justify-center">
-    <Tooltip showArrow={false}>
+  <div class="flex justify-center py-12">
+    <Tooltip forceOpen={true} showArrow={false}>
       {#snippet trigger()}
         <button>This one has no arrow</button>
       {/snippet}
@@ -49,9 +36,9 @@
 </Story>
 
 <Story name="Different Placements" asChild>
-  <div class="flex justify-center gap-4 py-8">
-    <div>
-      <Tooltip placement="top">
+  <div class="grid grid-cols-3 place-items-center gap-16 px-16 py-24">
+    <div class="col-start-2">
+      <Tooltip forceOpen={true} placement="top">
         {#snippet trigger()}
           <button>Top</button>
         {/snippet}
@@ -60,33 +47,36 @@
         {/snippet}
       </Tooltip>
     </div>
-    <div>
-      <Tooltip placement="right">
+
+    <div class="col-start-1">
+      <Tooltip forceOpen={true} placement="left">
         {#snippet trigger()}
-          <button>Right</button>
+          <button>Left</button>
         {/snippet}
         {#snippet content()}
-          <span>Tooltip on right</span>
+          <span>Tooltip on left</span>
         {/snippet}
       </Tooltip>
     </div>
-    <div>
-      <Tooltip placement="bottom">
+
+    <div class="col-start-3">
+      <Tooltip forceOpen={true} placement="right">
         {#snippet trigger()}
-          <button>Bottom</button>
+          <button>Right</button>
         {/snippet}
         {#snippet content()}
-          <span>Tooltip on bottom</span>
+          <span>Tooltip on right</span>
         {/snippet}
       </Tooltip>
     </div>
-    <div>
-      <Tooltip placement="left">
+
+    <div class="col-start-2">
+      <Tooltip forceOpen={true} placement="bottom">
         {#snippet trigger()}
-          <button>Left</button>
+          <button>Bottom</button>
         {/snippet}
         {#snippet content()}
-          <span>Tooltip on left</span>
+          <span>Tooltip on bottom</span>
         {/snippet}
       </Tooltip>
     </div>
@@ -94,23 +84,7 @@
 </Story>
 
 <Story name="Custom Content" asChild>
-  <div class="flex h-28 items-end justify-center">
-    <Tooltip>
-      {#snippet trigger()}
-        <button>Hover me</button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <h3>Custom Heading</h3>
-          <p>This is some custom content inside the tooltip.</p>
-        </div>
-      {/snippet}
-    </Tooltip>
-  </div>
-</Story>
-
-<Story name="Custom Content Forced Open" asChild>
-  <div class="flex h-28 items-end justify-center">
+  <div class="flex h-28 items-end justify-center py-16">
     <Tooltip forceOpen={true}>
       {#snippet trigger()}
         <button>Hover me</button>

package/dist/components/tooltip/Tooltip.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import Tooltip from 'flowbite-svelte/Tooltip.svelte';
+  import { Tooltip } from 'bits-ui';
   import type { Snippet } from 'svelte';
+  import { backgroundColor } from '../../tokens';
 
   interface Props {
     class?: string;
@@ -20,30 +21,40 @@
     content,
   }: Props = $props();
 
-  let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
+  const sideMap = {
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+  } as const;
+
+  let side = $derived(sideMap[placement]);
+
+  const arrowColor = backgroundColor['base-inverse'];
 </script>
 
-{@render trigger?.()}
-<Tooltip
-  open={forceOpen}
-  arrow={showArrow}
-  {placement}
-  class={`${tooltipClass} max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow`}
->
-  {@render content?.()}
-</Tooltip>
-
-<style>
-  /* Hack to get the arrow styling to work */
-  :global(.tooltip.with-arrow > :last-child) {
-    pointer-events: none;
-    position: absolute;
-    display: block;
-    height: 0.5rem;
-    width: 0.5rem;
-    --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    border-color: inherit;
-    background-color: inherit
-}
-</style>
+<Tooltip.Provider>
+  <Tooltip.Root open={forceOpen} delayDuration={400}>
+    <Tooltip.Trigger>
+      {#if trigger}
+        {@render trigger()}
+      {/if}
+    </Tooltip.Trigger>
+
+    <Tooltip.Portal>
+      <Tooltip.Content
+        {side}
+        sideOffset={8}
+        class={`${className} z-50 max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+      >
+        {#if content}
+          {@render content()}
+        {/if}
+
+        {#if showArrow}
+          <Tooltip.Arrow style="color: {arrowColor}" />
+        {/if}
+      </Tooltip.Content>
+    </Tooltip.Portal>
+  </Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -1,4 +1,4 @@
-import Tooltip from 'flowbite-svelte/Tooltip.svelte';
+import { Tooltip } from 'bits-ui';
 import type { Snippet } from 'svelte';
 interface Props {
     class?: string;

package/dist/components/tooltip/TooltipTest.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Tooltip from './Tooltip.svelte';
+
+  interface Props {
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    triggerText: string;
+    contentText: string;
+  }
+
+  let {
+    forceOpen = false,
+    showArrow = true,
+    placement = 'top',
+    class: className = '',
+    triggerText,
+    contentText,
+  }: Props = $props();
+</script>
+
+<Tooltip {forceOpen} {showArrow} {placement} class={className}>
+  {#snippet trigger()}
+    <button>{triggerText}</button>
+  {/snippet}
+
+  {#snippet content()}
+    {contentText}
+  {/snippet}
+</Tooltip>

package/dist/components/tooltip/TooltipTest.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    triggerText: string;
+    contentText: string;
+}
+declare const TooltipTest: import("svelte").Component<Props, {}, "">;
+type TooltipTest = ReturnType<typeof TooltipTest>;
+export default TooltipTest;