@reshape-biotech/design-system 2.4.1 → 2.4.2

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

@@ -1,215 +0,0 @@
-<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

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