@reshape-biotech/design-system 1.2.6 → 2.0.0

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

@@ -1,215 +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);
-	}
+  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 }))
-	);
+  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>
+  <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>
+  <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>
+  <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>