@reshape-biotech/design-system 2.4.2 → 2.5.2

package/dist/components/image/Image.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { SkeletonLoader } from '../skeleton-loader/';
+  import Logo from '../logo/Logo.svelte';
+
+  interface Props {
+    src: string;
+    alt: string;
+  }
+
+  let { src, alt }: Props = $props();
+
+  let loaded = $state(false);
+  let failed = $state(false);
+  let loading = $state(false);
+
+  onMount(() => {
+    const img = new Image();
+    img.src = src;
+    loading = true;
+
+    img.onload = () => {
+      loading = false;
+      loaded = true;
+    };
+    img.onerror = () => {
+      loading = false;
+      failed = true;
+    };
+  });
+</script>
+
+<div class="h-full w-full">
+  {#if loaded}
+    <img {src} {alt} class="h-full w-full object-cover" />
+  {:else if failed}
+    <div class="flex h-full w-full items-center justify-center bg-neutral-darker">
+      <Logo color="white" size="lg" />
+    </div>
+  {:else if loading}
+    <div class="flex h-full flex-grow flex-col content-center justify-center">
+      <SkeletonLoader>
+        {#snippet children({ Skeleton, SkeletonImage })}
+          <!-- TODO: BG color is to match design, but we want to change the color, therefore not a token -->
+          <Skeleton class=" h-full w-full rounded-s-lg bg-[#D9E6E9]">
+            <SkeletonImage />
+          </Skeleton>
+        {/snippet}
+      </SkeletonLoader>
+    </div>
+  {/if}
+</div>
+
+<style>
+</style>

package/dist/components/image/Image.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    src: string;
+    alt: string;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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

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

package/dist/components/image/index.js

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

package/dist/components/input/Input.stories.svelte

@@ -0,0 +1,87 @@
+<script module>
+  import Input from './Input.svelte';
+
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    component: Input,
+    title: 'Design System/Input',
+    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-3169&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
+
+  let value = '';
+  let email = 'bob@foo.com';
+  let password = 'wordpass';
+
+  let textareaValue = '';
+</script>
+
+<Story name="Base" args={{ autofocus: true, value: 'Hello' }} />
+
+<Story name="XSmall" args={{ size: 'xs' }} />
+
+<Story name="Small" args={{ size: 'sm' }} />
+
+<Story name="Login" asChild>
+  <div class="flex flex-col gap-2">
+    <Input bind:value={email} label="Email" type="text" required id="email-select" autofocus />
+    <Input bind:value={password} label="Password" id="password-select" type="password" required />
+  </div>
+</Story>
+
+<Story
+  name="Textarea"
+  args={{ label: 'Description', type: 'textarea', placeholder: 'Add a description...' }}
+/>
+
+<Story name="Prefix" asChild>
+  <Input value="Bob">
+    {#snippet prefix()}
+      <div>Mr.</div>
+    {/snippet}
+  </Input>
+</Story>
+
+<Story name="Suffix" asChild>
+  <Input value="30">
+    {#snippet suffix()}
+      <div>± 1°C</div>
+    {/snippet}
+  </Input>
+</Story>
+
+<Story name="Prefix & Suffix" asChild>
+  <Input value="9001">
+    {#snippet prefix()}
+      <div>$</div>
+    {/snippet}
+    {#snippet suffix()}
+      <div>🔥</div>
+    {/snippet}
+  </Input>
+</Story>
+
+<Story name="Validation" asChild>
+  <Input value="Focus me, then click away" validator={(val) => val.toString().length < 10}>
+    {#snippet prefix({ valid })}
+      <div>
+        {#if valid}
+          😊
+        {:else}
+          😔
+        {/if}
+      </div>
+    {/snippet}
+    {#snippet error()}
+      <p class="pt-2 text-error">Oh no! Too many characters!</p>
+    {/snippet}
+  </Input>
+</Story>
+
+<Story name="Clearable" args={{ clearable: true, value: 'Focus me, then click away' }} />

package/dist/components/input/Input.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Input;
+type Input = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Input from './Input.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;
+}

package/dist/components/input/Input.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { IconButton } from '../icon-button';
+  import { Icon } from '../icons';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+    label?: string | null;
+    id?: string | undefined;
+    variant?: 'default' | 'transparent' | 'borderless';
+    validator?: (a: string | number) => boolean;
+    prefix?: Snippet<[any]>;
+    suffix?: Snippet;
+    error?: Snippet;
+    input?: HTMLInputElement;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    clearable?: boolean;
+    onclear?: () => void;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+  }
+
+  let {
+    label = null,
+    variant = 'default',
+    value = $bindable(),
+    type = 'text',
+    validator = (_) => {
+      return true;
+    },
+    prefix,
+    suffix,
+    error,
+    input = $bindable(),
+    size = 'md',
+    clearable = false,
+    onclear = () => {},
+    class: className,
+    oninput,
+    onblur,
+    ...rest
+  }: InputProps = $props();
+
+  export function focus() {
+    input?.focus();
+  }
+
+  let valid = $state(true);
+
+  const inputId = crypto.randomUUID();
+  const id = $derived(rest.id ?? inputId);
+  function handleInput(event: Event) {
+    if (rest.readonly) return;
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+    oninput?.(event);
+  }
+
+  function handleBlur(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+    valid = validator(value);
+    onblur?.(event);
+  }
+</script>
+
+<div class="w-full">
+  {#if label}
+    <label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">
+      {label}
+      {#if rest.required}
+        <span class="ml-0.5 text-danger">*</span>
+      {/if}
+    </label>
+  {/if}
+
+  <div
+    class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
+    class:border-transparent={variant === 'transparent'}
+    class:shadow-input={!(variant === 'transparent')}
+    class:!border-error={!valid}
+    class:borderless={variant === 'borderless'}
+  >
+    <div class="whitespace-nowrap text-secondary">
+      {@render prefix?.({ valid })}
+    </div>
+    <input
+      {id}
+      class="inline leading-none"
+      class:has-text={value}
+      class:has-placeholder={rest.placeholder}
+      aria-label={label}
+      {type}
+      oninput={handleInput}
+      onblur={handleBlur}
+      bind:this={input}
+      bind:value
+      {...rest}
+    />
+    <div class="whitespace-nowrap text-secondary">
+      {@render suffix?.()}
+    </div>
+
+    {#if clearable && value}
+      <IconButton
+        variant="transparent"
+        rounded={false}
+        size="xs"
+        onclick={() => {
+          value = '';
+          input?.focus();
+          onclear();
+        }}
+      >
+        <Icon iconName="X" />
+      </IconButton>
+    {/if}
+  </div>
+
+  {@render error?.()}
+</div>
+
+<style>
+  input {
+
+    width: 100%;
+
+    resize: none;
+
+    padding: 0.25rem;
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+  div:not(:focus-within):hover {
+
+    border-color: #5750ee40
+}
+
+  div:focus-within {
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
+
+  .borderless {
+
+    border-style: none;
+
+    --tw-shadow: 0 0 #0000;
+
+    --tw-shadow-colored: 0 0 #0000;
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+  .borderless input {
+
+    border-style: none;
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px;
+
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
+  .size-xs {
+
+    height: 1.5rem;
+
+    padding: 0.25rem;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem
+}
+
+  .size-sm {
+
+    height: 2rem;
+
+    padding: 0.25rem
+}
+
+  .size-md {
+
+    height: 2.5rem;
+
+    padding: 0.5rem
+}
+
+  .size-lg {
+
+    height: 3rem;
+
+    padding-left: 0.5rem;
+
+    padding-right: 0.5rem;
+
+    padding-top: 0.75rem;
+
+    padding-bottom: 0.75rem;
+
+    font-size: 1rem;
+
+    line-height: 1.5rem
+}
+
+  .size-dynamic {
+
+    height: auto;
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem
+}
+</style>

package/dist/components/input/Input.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+    label?: string | null;
+    id?: string | undefined;
+    variant?: 'default' | 'transparent' | 'borderless';
+    validator?: (a: string | number) => boolean;
+    prefix?: Snippet<[any]>;
+    suffix?: Snippet;
+    error?: Snippet;
+    input?: HTMLInputElement;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    clearable?: boolean;
+    onclear?: () => void;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+}
+declare const Input: import("svelte").Component<InputProps, {
+    focus: () => void;
+}, "value" | "input">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

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

package/dist/components/input/index.js

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

package/dist/components/label/Label.stories.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Label from './Label.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Design System/Label',
+    component: Label,
+    argTypes: {
+      text: { control: 'text' },
+      forId: { control: 'text' },
+      required: { control: 'boolean' },
+      class: { control: 'text' },
+    },
+  });
+</script>
+
+<Story name="Default" args={{ text: 'Email Address', forId: 'email' }} />
+
+<Story name="Required" args={{ text: 'Password', forId: 'password', required: true }} />
+
+<Story
+  name="With Custom Class"
+  args={{
+    text: 'Custom Styled Label',
+    forId: 'custom',
+    class: 'text-lg text-primary font-bold',
+  }}
+/>

package/dist/components/label/Label.stories.svelte.d.ts

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

package/dist/components/label/Label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    forId: string;
+    text: string;
+    required?: boolean;
+    class?: string;
+  }
+
+  const { forId, text, required = false, class: className }: Props = $props();
+</script>
+
+<label for={forId} class="block text-sm text-secondary {className ?? ''}">
+  {text}
+  {#if required}
+    <span class="ml-0.5 text-danger">*</span>
+  {/if}
+</label>

package/dist/components/label/Label.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    forId: string;
+    text: string;
+    required?: boolean;
+    class?: string;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/legend/Legend.stories.svelte

@@ -0,0 +1,108 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import * as Legend from './index';
+  import { tokens } from '../../tokens';
+  import { Tooltip } from '../tooltip';
+  import Icon from '../icons/Icon.svelte';
+  import Tag from '../tag/Tag.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Design System/Legend',
+    tags: ['autodocs'],
+  });
+</script>
+
+{#snippet tooltip(
+  name: string,
+  description: string,
+  parameters: { name: string; gte?: number; lte?: number; eq?: string | number }[]
+)}
+  <div class="min-w-42 flex flex-col gap-3 p-3">
+    <div class="flex flex-row items-center gap-2">
+      <Icon iconName="Hash" class="text-secondary-inverse"></Icon>{name}
+    </div>
+    <div class="flex flex-col gap-1">
+      <p class="text-secondary-inverse">Description</p>
+      <p>{description}</p>
+    </div>
+    {#if parameters.length > 0}
+      <div class="flex flex-col gap-1">
+        <p class="text-secondary-inverse">Parameters</p>
+        <div class="flex flex-row flex-wrap gap-2">
+          {#each parameters as parameter}
+            <Tag variant="default-inverse">
+              <Icon iconName="CraneTower"></Icon>
+              <div class="flex grow flex-row gap-1">
+                {parameter.name}
+                {#if parameter.gte && parameter.lte}{parameter.gte} - {parameter.lte}{/if}
+                {#if parameter.gte && parameter.lte === undefined}{'≥'} {parameter.gte}{/if}
+                {#if parameter.lte && parameter.gte === undefined}{'≤'} {parameter.lte}{/if}
+                {#if parameter.eq}{'='} {parameter.eq}{/if}
+              </div>
+            </Tag>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<Story name="Root">
+  <Legend.Root>
+    <div
+      class="flex h-[200px] w-full bg-gradient-to-tr from-green-500 to-green-100 text-primary-inverse"
+    >
+      <code>I'm a child</code>
+    </div>
+
+    {#snippet items()}
+      <Tooltip placement="bottom">
+        {#snippet trigger()}
+          <Legend.Item color={tokens.colors.red[5].default} name="Green large spots" />
+        {/snippet}
+        {#snippet content()}
+          {@render tooltip(
+            'Green large spots',
+            'Counts yeast really really really super duper well!',
+            [
+              { name: 'Red', gte: 22, lte: 122 },
+              { name: 'Class Name', eq: 'yeast' },
+            ]
+          )}
+        {/snippet}
+      </Tooltip>
+      <Tooltip placement="bottom">
+        {#snippet trigger()}
+          <Legend.Item color={tokens.colors.blue[5].default} name="Red hueish spots" />
+        {/snippet}
+        {#snippet content()}
+          {@render tooltip(
+            'Red hueish spots',
+            'Counts mold really really really super duper well!',
+            [
+              { name: 'Red', gte: 22, lte: 122 },
+              { name: 'Blue', gte: 42 },
+              { name: 'Class Name', eq: 'mold' },
+            ]
+          )}
+        {/snippet}
+      </Tooltip>
+      <Tooltip placement="bottom">
+        {#snippet trigger()}
+          <Legend.Item color={tokens.colors.green[5].default} name="Small halos" />
+        {/snippet}
+        {#snippet content()}
+          {@render tooltip(
+            'Small halos',
+            'Counts bacteria really really really super duper well!',
+            [
+              { name: 'Blue', gte: 42 },
+              { name: 'Green', lte: 142 },
+              { name: 'Class Name', eq: 'bacteria' },
+            ]
+          )}
+        {/snippet}
+      </Tooltip>
+    {/snippet}
+  </Legend.Root>
+</Story>

package/dist/components/legend/Legend.stories.svelte.d.ts

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

package/dist/components/legend/components/legend-item.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+    color: string;
+    selected?: boolean;
+    onclick?: ((name: string) => void) | undefined;
+  }
+
+  const { color, name, selected = $bindable(), onclick }: Props = $props();
+</script>
+
+<button
+  onclick={(e) => {
+    e.preventDefault();
+    onclick?.(name);
+  }}
+  class:bg-neutral={selected}
+  class="group flex flex-row items-center gap-2 rounded-lg px-2 py-1 hover:bg-neutral"
+>
+  <div class="flex h-2 w-2 flex-shrink-0 rounded-sm" style="background-color: {color}"></div>
+  <div
+    class="flex max-w-24 select-none truncate text-xs"
+    class:text-secondary={!selected}
+    class:text-primary={selected}
+  >
+    <div class="truncate">{name}</div>
+  </div>
+</button>

package/dist/components/legend/components/legend-item.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    name: string;
+    color: string;
+    selected?: boolean;
+    onclick?: ((name: string) => void) | undefined;
+}
+declare const LegendItem: import("svelte").Component<Props, {}, "selected">;
+type LegendItem = ReturnType<typeof LegendItem>;
+export default LegendItem;