@reshape-biotech/design-system 0.0.54 → 1.1.2

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

@@ -18,7 +18,7 @@
 	];
 </script>
 
-<Story name="Default" args={{}}>
+<Story name="Default" args={{}} asChild>
 	<List {items}>
 		{#snippet item(item)}
 			<div class="flex min-h-2 flex-row gap-2">
@@ -52,7 +52,7 @@
 	</List>
 </Story>
 
-<Story name="Compact" args={{ variant: 'compact' }}>
+<Story name="Compact" args={{ variant: 'compact' }} asChild>
 	<List {items} variant="compact">
 		{#snippet item(item)}
 			<div class="flex min-h-2 flex-row gap-2">
@@ -86,7 +86,7 @@
 	</List>
 </Story>
 
-<Story name="Loading">
+<Story name="Loading" asChild>
 	<List variant="compact" items={[{}, {}, {}]}>
 		{#snippet item({})}
 			<div class="flex h-8 w-full items-center">

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

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="flex flex-col gap-4">
 		<Logo size="xs" />
 		<Logo size="sm" />

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;