@reshape-biotech/design-system 2.4.2 → 2.5.2

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    items?: Snippet;
+  }
+
+  let { children, items }: Props = $props();
+</script>
+
+<div class="inline-flex w-full flex-col items-center rounded-[10px] bg-neutral">
+  <div
+    class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-lg [&>*]:border [&>*]:border-static [&>*]:p-1"
+  >
+    {@render children()}
+  </div>
+
+  <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 overflow-clip py-1">
+    {#if items}
+      {@render items()}
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    items?: Snippet;
+}
+declare const LegendRoot: import("svelte").Component<Props, {}, "">;
+type LegendRoot = ReturnType<typeof LegendRoot>;
+export default LegendRoot;

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export { default as Root } from './components/legend-root.svelte';
+export { default as Item } from './components/legend-item.svelte';
+export interface LegendRootProps {
+    children: Snippet;
+    items?: Snippet;
+}
+export interface LegendItemProps {
+    color: string;
+    name: string;
+}

package/dist/components/legend/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './components/legend-root.svelte';
+export { default as Item } from './components/legend-item.svelte';

package/dist/components/list/List.stories.svelte

@@ -0,0 +1,97 @@
+<script module lang="ts">
+  import List from './List.svelte';
+  import Tag from '../tag/Tag.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon } from '../icons';
+
+  const { Story } = defineMeta({
+    component: List,
+    title: 'Design System/List',
+    tags: ['autodocs'],
+  });
+
+  const items: { name: string; licenses: string; repository: string }[] = [
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+  ];
+</script>
+
+<Story name="Default" args={{}} asChild>
+  <List {items}>
+    {#snippet item(item)}
+      <div class="flex min-h-2 flex-row gap-2">
+        <div class="flex flex-row justify-start gap-2">
+          <div class="max-w-56 truncate font-bold">
+            {item.name}
+          </div>
+          {#if item.licenses}
+            <Tag>
+              {item.licenses}
+            </Tag>
+          {/if}
+        </div>
+        <div class="flex grow flex-row justify-end gap-3">
+          {#if item.repository}
+            <div class="flex flex-row items-center gap-1">
+              <a
+                href={item.repository}
+                class="text-secondary"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Repository
+              </a>
+              <Icon iconName="ArrowUpRight" />
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/snippet}
+  </List>
+</Story>
+
+<Story name="Compact" args={{ variant: 'compact' }} asChild>
+  <List {items} variant="compact">
+    {#snippet item(item)}
+      <div class="flex min-h-2 flex-row gap-2">
+        <div class="flex flex-row justify-start gap-2">
+          <div class="max-w-56 truncate font-bold">
+            {item.name}
+          </div>
+          {#if item.licenses}
+            <Tag>
+              {item.licenses}
+            </Tag>
+          {/if}
+        </div>
+        <div class="flex grow flex-row justify-end gap-3">
+          {#if item.repository}
+            <div class="flex flex-row items-center gap-1">
+              <a
+                href={item.repository}
+                class="text-gray-700"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Repository
+              </a>
+              <Icon iconName="ArrowUpRight" />
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/snippet}
+  </List>
+</Story>
+
+<Story name="Loading" asChild>
+  <List variant="compact" items={[{}, {}, {}]}>
+    {#snippet item({})}
+      <div class="flex h-8 w-full items-center">
+        <div class="skeleton h-6 w-full bg-neutral"></div>
+      </div>
+    {/snippet}
+  </List>
+</Story>

package/dist/components/list/List.stories.svelte.d.ts

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

package/dist/components/list/List.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" generics="T">
+  import type { Overflow } from '../../tailwind';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    items: T[];
+    item: Snippet<[T]>;
+    overflow?: Overflow;
+    variant?: 'compact' | 'default';
+  };
+  let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
+</script>
+
+<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
+  {#each items as currentItem, i}
+    <div class="item">
+      {@render item(currentItem)}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .listStyles {
+
+    display: flex;
+
+    height: 100%;
+
+    flex-direction: column;
+
+    align-items: flex-start;
+
+    align-self: stretch;
+
+    border-radius: 0.25rem
+}
+
+    .listStyles.default {
+
+    gap: 1rem
+}
+
+    .listStyles.compact {
+
+    gap: 0px;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding-left: 1rem;
+
+    padding-right: 1rem
+}
+
+    .listStyles.compact :global(> .item:not(:last-child)) {
+
+    border-bottom-width: 1px;
+
+    border-style: solid;
+
+    border-color: #12192a14
+}
+
+    .listStyles :global(.item) {
+
+    align-self: stretch
+}
+</style>

package/dist/components/list/List.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Overflow } from '../../tailwind';
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: T[];
+        item: Snippet<[T]>;
+        overflow?: Overflow;
+        variant?: "compact" | "default";
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<T> = InstanceType<typeof List<T>>;
+export default List;

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

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

package/dist/components/list/index.js

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

package/dist/components/logo/Logo.stories.svelte

@@ -0,0 +1,21 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Logo from './Logo.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/Logo',
+    component: Logo,
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Base" asChild>
+  <div class="flex flex-col gap-4">
+    <Logo size="xs" />
+    <Logo size="sm" />
+    <Logo size="md" />
+    <Logo size="lg" />
+    <Logo size="xl" />
+  </div>
+</Story>

package/dist/components/logo/Logo.stories.svelte.d.ts

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  type Props = {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'default' | 'white';
+  };
+
+  let { size = 'md', color = 'default' }: Props = $props();
+
+  const colorMap = {
+    default: '#ff7a00',
+    white: '#ffffff',
+  };
+
+  const sizeMap = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+  };
+</script>
+
+<svg
+  width={sizeMap[size]}
+  height={sizeMap[size]}
+  viewBox={`0 0 24 24`}
+  fill={colorMap[color]}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
+  />
+  <path
+    d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
+  />
+  <path
+    d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
+  />
+</svg>

package/dist/components/logo/Logo.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'default' | 'white';
+};
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

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

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

package/dist/components/logo/index.js

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

package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ManualCFUCounter from './ManualCFUCounter.svelte';
+  const { Story } = defineMeta({
+    component: ManualCFUCounter,
+    title: 'Design System/ManualCFUCounter',
+    tags: ['autodocs'],
+    args: {
+      imageUrl: '/imgs/ris.jpg',
+      marks: [],
+      disabled: false,
+      hideMarkers: false,
+    },
+    argTypes: {
+      imageUrl: {
+        control: 'text',
+        description: 'URL of the image to display',
+      },
+      marks: {
+        control: 'object',
+        description: 'Array of marker coordinates. Bindable for two-way data flow.',
+      },
+      onclick: {
+        action: 'clicked',
+        description: 'Event handler for when a marker is added',
+      },
+      disabled: {
+        control: 'boolean',
+        description: 'Disables interaction with the counter',
+      },
+      hideMarkers: {
+        control: 'boolean',
+        description: 'Hides the markers and prevents new ones from being added',
+      },
+    },
+  });
+
+  const largeImage = '/imgs/ris.jpg';
+
+  function handleUpdate(event: MouseEvent, marks: Array<{ x: number; y: number }>) {
+    console.log('Marker count:', marks.length);
+    console.log('Marker positions:', marks);
+  }
+</script>
+
+<script lang="ts">
+  // For two-way binding examples
+  let boundMarksArray = $state<Array<{ x: number; y: number }>>([]);
+
+  // For initial markers example
+  let presetMarks = [
+    { x: 100, y: 100 },
+    { x: 200, y: 200 },
+    { x: 300, y: 300 },
+  ];
+</script>
+
+<Story name="Default" asChild>
+  <div class="p-4">
+    <h3 class="mb-4 text-lg font-semibold">Manual CFU Counter</h3>
+    <p class="mb-4 text-sm text-secondary">
+      Click to add markers. Pan by clicking and dragging. Zoom with the mouse wheel.
+    </p>
+    <div class="h-[600px] rounded-lg border border-static p-4">
+      <ManualCFUCounter imageUrl={largeImage} onclick={handleUpdate} />
+    </div>
+  </div>
+</Story>
+
+<Story name="With Initial Data (marks prop)" asChild>
+  <div class="p-4">
+    <h3 class="mb-4 text-lg font-semibold">Pre-populated Markers (via marks prop)</h3>
+    <p class="mb-4 text-sm text-secondary">
+      This example starts with 3 pre-defined markers passed via the `marks` prop.
+    </p>
+    <div class="h-[600px] rounded-lg border border-static p-4">
+      <ManualCFUCounter imageUrl={largeImage} marks={presetMarks} onclick={handleUpdate} />
+    </div>
+  </div>
+</Story>
+
+<Story name="Two-way Binding (bind:marks)" asChild>
+  <div class="p-4">
+    <h3 class="mb-4 text-lg font-semibold">Two-way Binding</h3>
+    <p class="mb-4 text-sm text-secondary">
+      This example uses `bind:marks` to synchronize state between the story and the component. Click
+      inside the counter, then check the count below.
+    </p>
+    <p class="mb-2 text-sm">Marks count in story state: {boundMarksArray.length}</p>
+    <div class="h-[600px] rounded-lg border border-static p-4">
+      <ManualCFUCounter imageUrl={largeImage} bind:marks={boundMarksArray} onclick={handleUpdate} />
+    </div>
+    <details class="mt-2 text-sm">
+      <summary>Current boundMarksArray:</summary>
+      <pre>{JSON.stringify(boundMarksArray, null, 2)}</pre>
+    </details>
+  </div>
+</Story>
+
+<Story name="Hide Markers" asChild>
+  <div class="p-4">
+    <h3 class="mb-4 text-lg font-semibold">Without Markers</h3>
+    <p class="mb-4 text-sm text-secondary">
+      In this mode, markers are hidden and you cannot add new ones.
+    </p>
+    <div class="h-[600px] rounded-lg border border-static p-4">
+      <ManualCFUCounter
+        imageUrl={largeImage}
+        onclick={handleUpdate}
+        hideMarkers
+        marks={presetMarks}
+      />
+    </div>
+  </div>
+</Story>
+
+<Story name="Disabled" asChild>
+  <div class="p-4">
+    <h3 class="mb-4 text-lg font-semibold">Disabled Counter</h3>
+    <p class="mb-4 text-sm text-secondary">No interactions are possible in disabled mode.</p>
+    <div class="h-[600px] rounded-lg border border-static p-4">
+      <ManualCFUCounter imageUrl={largeImage} onclick={handleUpdate} disabled />
+    </div>
+  </div>
+</Story>

package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ManualCfuCounter: import("svelte").Component<Record<string, never>, {}, "">;
+type ManualCfuCounter = ReturnType<typeof ManualCfuCounter>;
+export default ManualCfuCounter;