@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte

@@ -1,20 +1,20 @@
 <!-- src/lib/design-system/src/lib/components/manual-cfu-counter/ManualCFUCounterTestWrapper.svelte -->
 <script lang="ts">
-	import ManualCFUCounter from '../ManualCFUCounter.svelte';
+  import ManualCFUCounter from '../ManualCFUCounter.svelte';
 
-	interface Props {
-		initialTestMarks?: Array<{ x: number; y: number }>;
-		imageUrl?: string;
-		onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
-	}
+  interface Props {
+    initialTestMarks?: Array<{ x: number; y: number }>;
+    imageUrl?: string;
+    onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+  }
 
-	let { initialTestMarks = [], imageUrl = 'test-image.jpg', onclick }: Props = $props();
+  let { initialTestMarks = [], imageUrl = 'test-image.jpg', onclick }: Props = $props();
 
-	let marks = $state([...initialTestMarks]);
+  let marks = $state([...initialTestMarks]);
 
-	export function getCurrentMarks() {
-		return marks;
-	}
+  export function getCurrentMarks() {
+    return marks;
+  }
 </script>
 
 <ManualCFUCounter bind:marks {imageUrl} {onclick} />

package/dist/components/markdown/Markdown.stories.svelte

@@ -1,18 +1,18 @@
 <script module>
-	import Markdown from './Markdown.svelte';
+  import Markdown from './Markdown.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Markdown,
-		title: 'Design System/Markdown',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Markdown,
+    title: 'Design System/Markdown',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<Markdown
-		markdown={`# Welcome to My Markdown Story
+  <Markdown
+    markdown={`# Welcome to My Markdown Story
 
 ## Features
 
@@ -37,5 +37,5 @@ greet('Storybook');
 ---
 
 Happy storytelling with Markdown!`}
-	/>
+  />
 </Story>

package/dist/components/markdown/Markdown.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { marked } from 'marked';
-	interface Props {
-		markdown: string;
-	}
+  import { marked } from 'marked';
+  interface Props {
+    markdown: string;
+  }
 
-	let { markdown }: Props = $props();
+  let { markdown }: Props = $props();
 </script>
 
 <div class="prose text-sm text-secondary dark:prose-invert">
-	{@html marked.parse(markdown ?? '')}
+  {@html marked.parse(markdown ?? '')}
 </div>

package/dist/components/modal/Modal.stories.svelte

@@ -1,39 +1,39 @@
 <script module lang="ts">
-	import Button from '../button/Button.svelte';
-	import Modal from '../modal/Modal.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../button/Button.svelte';
+  import Modal from '../modal/Modal.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Modal,
-		title: 'Design System/Modal',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Modal,
+    title: 'Design System/Modal',
+    tags: ['autodocs'],
+  });
 
-	let defaultOpen = $state(true);
+  let defaultOpen = $state(true);
 </script>
 
 <Story name="Default" asChild>
-	<Modal>
-		{#snippet Trigger({ openModal })}
-			<Button onClick={openModal}>Open Modal</Button>
-		{/snippet}
-		{#snippet Content()}
-			<div>
-				<p>Modal Content</p>
-			</div>
-		{/snippet}
-	</Modal>
+  <Modal>
+    {#snippet Trigger({ openModal })}
+      <Button onClick={openModal}>Open Modal</Button>
+    {/snippet}
+    {#snippet Content()}
+      <div>
+        <p>Modal Content</p>
+      </div>
+    {/snippet}
+  </Modal>
 </Story>
 
 <Story name="Default open" asChild>
-	<Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
-		{#snippet Trigger({ openModal })}
-			<Button onClick={openModal}>Open Modal</Button>
-		{/snippet}
-		{#snippet Content()}
-			<div>
-				<p>Modal Content</p>
-			</div>
-		{/snippet}
-	</Modal>
+  <Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
+    {#snippet Trigger({ openModal })}
+      <Button onClick={openModal}>Open Modal</Button>
+    {/snippet}
+    {#snippet Content()}
+      <div>
+        <p>Modal Content</p>
+      </div>
+    {/snippet}
+  </Modal>
 </Story>

package/dist/components/modal/Modal.svelte

@@ -1,81 +1,81 @@
 <script lang="ts">
-	import { type Snippet } from 'svelte';
-	import { v4 as uuidv4 } from 'uuid';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Icon } from '../icons';
-	import Divider from '../divider/Divider.svelte';
+  import { type Snippet } from 'svelte';
+  import { v4 as uuidv4 } from 'uuid';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
+  import Divider from '../divider/Divider.svelte';
 
-	type ModalProps = {
-		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
-		Header?: Snippet;
-		Content: Snippet;
-		Footer?: Snippet;
-		onclose?: () => void;
-		defaultOpen?: boolean;
-		id?: string;
-		withClose?: boolean;
-		closeOnClickOutside?: boolean;
-		class?: string;
-		contentClass?: string;
-	};
-	let {
-		Trigger,
-		Header,
-		Content,
-		Footer,
-		onclose,
-		defaultOpen = false,
-		id = 'modal-' + uuidv4(),
-		withClose = true,
-		closeOnClickOutside = true,
-		class: modalClass,
-		contentClass = 'p-4'
-	}: ModalProps = $props();
+  type ModalProps = {
+    Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
+    Header?: Snippet;
+    Content: Snippet;
+    Footer?: Snippet;
+    onclose?: () => void;
+    defaultOpen?: boolean;
+    id?: string;
+    withClose?: boolean;
+    closeOnClickOutside?: boolean;
+    class?: string;
+    contentClass?: string;
+  };
+  let {
+    Trigger,
+    Header,
+    Content,
+    Footer,
+    onclose,
+    defaultOpen = false,
+    id = 'modal-' + uuidv4(),
+    withClose = true,
+    closeOnClickOutside = true,
+    class: modalClass,
+    contentClass = 'p-4',
+  }: ModalProps = $props();
 
-	const modalOpen = $state(defaultOpen);
-	const openModal = () => {
-		const dialog = document.getElementById(id) as HTMLDialogElement | null;
-		dialog?.showModal();
-	};
+  const modalOpen = $state(defaultOpen);
+  const openModal = () => {
+    const dialog = document.getElementById(id) as HTMLDialogElement | null;
+    dialog?.showModal();
+  };
 
-	const closeModal = () => {
-		const dialog = document.getElementById(id) as HTMLDialogElement | null;
-		dialog?.close();
-		onclose?.();
-	};
+  const closeModal = () => {
+    const dialog = document.getElementById(id) as HTMLDialogElement | null;
+    dialog?.close();
+    onclose?.();
+  };
 </script>
 
 {#if Trigger}
-	{@render Trigger({ openModal, closeModal })}
+  {@render Trigger({ openModal, closeModal })}
 {/if}
 <dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
-	<div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
-		{#if Header}
-			<div class="flex h-12 items-center px-4">
-				{@render Header()}
-			</div>
-			<Divider />
-		{/if}
-		{#if withClose}
-			<div class="absolute right-0 top-0 z-10 p-2">
-				<IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
-					<Icon iconName="X" />
-				</IconButton>
-			</div>
-		{/if}
-		<div class="flex-1 {contentClass}">
-			{@render Content()}
-		</div>
-		{#if Footer}
-			<Divider />
-			<div class="px-4 py-2">
-				{@render Footer()}
-			</div>
-		{/if}
-	</div>
-	{#if closeOnClickOutside}
-		<form method="dialog" class="modal-backdrop">
-			<button onclick={closeModal}>close</button>
-		</form>
-	{/if}
+  <div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
+    {#if Header}
+      <div class="flex h-12 items-center px-4">
+        {@render Header()}
+      </div>
+      <Divider />
+    {/if}
+    {#if withClose}
+      <div class="absolute right-0 top-0 z-10 p-2">
+        <IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
+          <Icon iconName="X" />
+        </IconButton>
+      </div>
+    {/if}
+    <div class="flex-1 {contentClass}">
+      {@render Content()}
+    </div>
+    {#if Footer}
+      <Divider />
+      <div class="px-4 py-2">
+        {@render Footer()}
+      </div>
+    {/if}
+  </div>
+  {#if closeOnClickOutside}
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={closeModal}>close</button>
+    </form>
+  {/if}
 </dialog>

package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte

@@ -0,0 +1,215 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import MultiCFUCounter from './MultiCFUCounter.svelte';
+  const { Story } = defineMeta({
+    component: MultiCFUCounter,
+    title: 'Design System/MultiCFUCounter',
+    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">
+  let activeConfigIndex = $state(0);
+  let allMarksMultiConfig = $state([
+    // Yeast Count (config 0) - blue markers
+    { x: 120, y: 150, configIndex: 0, color: 'icon-blue', id: 'yeast-1' },
+    { x: 180, y: 220, configIndex: 0, color: 'icon-blue', id: 'yeast-2' },
+    { x: 250, y: 180, configIndex: 0, color: 'icon-blue', id: 'yeast-3' },
+
+    // Mold Count (config 1) - orange markers
+    { x: 320, y: 160, configIndex: 1, color: 'icon-orange', id: 'mold-1' },
+    { x: 380, y: 240, configIndex: 1, color: 'icon-orange', id: 'mold-2' },
+
+    // Colony Type (config 2) - lime markers
+    { x: 400, y: 120, configIndex: 2, color: 'icon-lime', id: 'type-1' },
+  ]);
+
+  const configurations = [
+    { name: 'Yeast Count', color: 'icon-blue', configIndex: 0 },
+    { name: 'Mold Count', color: 'icon-orange', configIndex: 1 },
+    { name: 'Colony Type', color: 'icon-lime', configIndex: 2 },
+  ];
+
+  function handleMultiConfigUpdate(event: MouseEvent, marks: Array<{ x: number; y: number }>) {
+    console.log(`Configuration ${activeConfigIndex} updated:`, marks.length, 'marks');
+
+    allMarksMultiConfig = allMarksMultiConfig.filter(
+      (mark) => mark.configIndex !== activeConfigIndex
+    );
+
+    const newMarks = marks.map((mark, index) => ({
+      x: mark.x,
+      y: mark.y,
+      configIndex: activeConfigIndex,
+      color: configurations[activeConfigIndex].color,
+      id: `config-${activeConfigIndex}-${index + 1}`,
+    }));
+
+    allMarksMultiConfig = [...allMarksMultiConfig, ...newMarks];
+  }
+
+  function switchConfiguration(configIndex: number) {
+    activeConfigIndex = configIndex;
+  }
+
+  const activeConfigMarks = $derived(
+    allMarksMultiConfig
+      .filter((mark) => mark.configIndex === activeConfigIndex)
+      .map((mark) => ({ x: mark.x, y: mark.y }))
+  );
+</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">
+      <MultiCFUCounter imageUrl={largeImage} onclick={handleUpdate} activeMarkerName="Yeast" />
+    </div>
+  </div>
+</Story>
+
+<Story name="Multi-Configuration Mode" asChild>
+  <div class="p-4">
+    <h3 class="mb-4 text-lg font-semibold">Multi-Configuration CFU Counter</h3>
+    <p class="mb-4 text-sm text-secondary">
+      This example demonstrates the multi-configuration mode used in assay analysis validation.
+      Switch between different configurations to count different types of objects with color-coded
+      markers.
+    </p>
+
+    <div class="mb-4 flex gap-2">
+      {#each configurations as config, index}
+        <button
+          class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
+          class:border-interactive={activeConfigIndex === index}
+          class:bg-surface-secondary={activeConfigIndex === index}
+          class:border-neutral={activeConfigIndex !== index}
+          onclick={() => switchConfiguration(index)}
+        >
+          <div
+            class="h-3 w-3 rounded-full"
+            style="background-color: var(--text-{config.color})"
+          ></div>
+          {config.name}
+          <span class="text-xs text-tertiary">
+            ({allMarksMultiConfig.filter((m) => m.configIndex === index).length})
+          </span>
+        </button>
+      {/each}
+    </div>
+
+    <div class="mb-4 rounded-lg border border-neutral bg-surface-secondary p-3">
+      <div class="mb-2 flex items-center gap-2">
+        <div
+          class="h-4 w-4 rounded-full"
+          style="background-color: var(--text-{configurations[activeConfigIndex].color})"
+        ></div>
+        <span class="font-medium">Active: {configurations[activeConfigIndex].name}</span>
+      </div>
+      <p class="text-sm text-secondary">
+        Click on the image to add markers for {configurations[
+          activeConfigIndex
+        ].name.toLowerCase()}. Each configuration maintains its own set of markers with distinct
+        colors.
+      </p>
+    </div>
+
+    <div class="h-[600px] rounded-lg border border-static p-4">
+      <MultiCFUCounter
+        imageUrl={largeImage}
+        marks={activeConfigMarks}
+        allMarks={allMarksMultiConfig}
+        showMultiConfig={true}
+        activeMarkerColor={configurations[activeConfigIndex].color}
+        activeMarkerName={configurations[activeConfigIndex].name}
+        editableConfigIndex={activeConfigIndex}
+        onclick={handleMultiConfigUpdate}
+      />
+    </div>
+
+    <div class="mt-4 grid grid-cols-3 gap-4">
+      {#each configurations as config, index}
+        <div class="rounded-lg border border-neutral bg-surface p-3">
+          <div class="mb-1 flex items-center gap-2">
+            <div
+              class="h-3 w-3 rounded-full"
+              style="background-color: var(--text-{config.color})"
+            ></div>
+            <span class="text-sm font-medium">{config.name}</span>
+          </div>
+          <p class="text-lg font-bold">
+            {allMarksMultiConfig.filter((m) => m.configIndex === index).length}
+          </p>
+          <p class="text-xs text-tertiary">objects counted</p>
+        </div>
+      {/each}
+    </div>
+
+    <details class="mt-4 text-sm">
+      <summary>All Marks Data:</summary>
+      <pre class="mt-2 rounded bg-surface-secondary p-2 text-xs">{JSON.stringify(
+          allMarksMultiConfig,
+          null,
+          2
+        )}</pre>
+    </details>
+  </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">
+      <MultiCFUCounter
+        imageUrl={largeImage}
+        marks={activeConfigMarks}
+        allMarks={allMarksMultiConfig}
+        showMultiConfig={true}
+        activeMarkerColor={configurations[activeConfigIndex].color}
+        activeMarkerName={configurations[activeConfigIndex].name}
+        editableConfigIndex={activeConfigIndex}
+        onclick={handleMultiConfigUpdate}
+        disabled
+      />
+    </div>
+  </div>
+</Story>

package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte.d.ts

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