@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/logo/Logo.svelte

@@ -1,39 +1,39 @@
 <script lang="ts">
-	type Props = {
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		color?: 'default' | 'white';
-	};
+  type Props = {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'default' | 'white';
+  };
 
-	let { size = 'md', color = 'default' }: Props = $props();
+  let { size = 'md', color = 'default' }: Props = $props();
 
-	const colorMap = {
-		default: '#ff7a00',
-		white: '#ffffff'
-	};
+  const colorMap = {
+    default: '#ff7a00',
+    white: '#ffffff',
+  };
 
-	const sizeMap = {
-		xs: 16,
-		sm: 20,
-		md: 24,
-		lg: 32,
-		xl: 40
-	};
+  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"
+  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"
-	/>
+  <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/manual-cfu-counter/ManualCFUCounter.stories.svelte

@@ -1,125 +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'
-			}
-		}
-	});
+  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';
+  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);
-	}
+  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 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 }
-	];
+  // 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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>