@reshape-biotech/design-system 0.0.54 → 1.1.2

package/dist/components/stat-card/StatCard.stories.svelte

@@ -9,24 +9,32 @@
 	});
 </script>
 
-<Story name="Default">
-	<StatCard title="Title" value="Value" unit="unit" titleTooltip="Title tooltip" />
-</Story>
+<Story
+	name="Default"
+	args={{ title: 'Title', value: 'Value', unit: 'unit', titleTooltip: 'Title tooltip' }}
+/>
 
-<Story name="Germination Rate">
-	<StatCard
-		title="Germination Rate"
-		value="2"
-		unit="%"
-		titleTooltip="Something that explains what this is..."
-		showTitleTooltip={true}
-	/>
-</Story>
+<Story
+	name="Germination Rate"
+	args={{
+		title: 'Germination Rate',
+		value: '2',
+		unit: '%',
+		titleTooltip: 'Something that explains what this is...',
+		showTitleTooltip: true
+	}}
+/>
 
-<Story name="Home Page">
-	<div class="flex w-full gap-4">
-		<StatCard title="Current jobs" value="3" unit="of 5" />
-		<StatCard title="Run time" value="5.4" unit="hours" />
-		<StatCard title="Images taken" value="1366" />
-	</div>
-</Story>
+<Story name="Home Page" args={{ title: 'Current jobs', value: '3', unit: 'of 5' }} />
+
+<Story
+	name="Editable"
+	args={{
+		title: 'Germination Rate',
+		value: '2',
+		unit: '%',
+		titleTooltip: 'Something that explains what this is...',
+		showTitleTooltip: true,
+		editable: true
+	}}
+/>

package/dist/components/stat-card/StatCard.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+	import IconButton from '../icon-button/IconButton.svelte';
 	import { Icon } from '../icons';
 	import Spinner from '../spinner/Spinner.svelte';
 	import Tooltip from '../tooltip/Tooltip.svelte';
+	import { Input } from '../input';
+	import { tick } from 'svelte';
 
 	interface Props {
 		title: string;
@@ -9,6 +12,9 @@
 		unit?: string | null;
 		titleTooltip?: string;
 		showTitleTooltip?: boolean;
+		editable?: boolean;
+		onsubmit?: (value: string | number) => void;
+		inputType?: 'text' | 'number';
 	}
 
 	let {
@@ -16,13 +22,82 @@
 		value = null,
 		unit = '',
 		titleTooltip = '',
-		showTitleTooltip = false
+		showTitleTooltip = false,
+		editable = false,
+		inputType = 'text',
+		onsubmit
 	}: Props = $props();
 	const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
+	let isEditing = $state(false);
+	let inputValue = $state('');
+	let inputComponent = $state<Input | null>(null);
+
+	function startEditing(event?: MouseEvent) {
+		if (event) {
+			event.stopPropagation();
+		}
+		isEditing = true;
+		inputValue = value !== null ? value.toString() : '';
+	}
+
+	function handleCardClick() {
+		if (editable && !isEditing && value !== null) {
+			startEditing();
+		}
+	}
+
+	function handleInputBlur(event: Event) {
+		const target = event.target as HTMLInputElement;
+		inputValue = target.value;
+		submitValue();
+	}
+
+	function handleInputKeydown(event: KeyboardEvent) {
+		const target = event.target as HTMLInputElement;
+		inputValue = target.value;
+		if (event.key === 'Escape') {
+			isEditing = false;
+		}
+		if (event.key === 'Enter') {
+			submitValue();
+		}
+	}
+
+	function submitValue() {
+		if (inputValue.trim() === '') {
+			isEditing = false;
+			return;
+		}
+
+		// Try to parse as number if possible
+		const numValue = parseFloat(inputValue);
+		const newValue = isNaN(numValue) ? inputValue : numValue;
+
+		if (onsubmit) {
+			onsubmit(newValue);
+		}
+
+		isEditing = false;
+	}
+
+	$effect(() => {
+		if (isEditing && inputComponent) {
+			tick().then(() => {
+				inputComponent?.focus();
+			});
+		}
+	});
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4"
+	data-testid="stat-card-body"
+	class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4 text-left transition-colors"
+	class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
+	class:cursor-pointer={editable && !isEditing && value !== null}
+	onclick={editable && !isEditing && value !== null ? handleCardClick : undefined}
+	onkeydown={editable && !isEditing && value !== null ? handleInputKeydown : undefined}
+	aria-label={editable && !isEditing && value !== null ? `Edit ${title}` : undefined}
 >
 	<p class="flex items-center justify-start gap-2 truncate font-medium text-secondary">
 		{title}
@@ -39,11 +114,30 @@
 			</Tooltip>
 		{/if}
 	</p>
-	<div class="flex items-baseline gap-1">
+	<div class="flex h-10 w-full items-center gap-1">
 		{#if value !== null}
-			<p class="text-2xl font-medium">{formattedValue}</p>
-			{#if unit}
-				<p class="truncate text-2xl font-medium text-tertiary">{unit}</p>
+			{#if isEditing}
+				<div class="flex-1">
+					<Input
+						bind:this={inputComponent}
+						type={inputType}
+						value={inputValue}
+						onblur={handleInputBlur}
+						onkeydown={handleInputKeydown}
+					/>
+				</div>
+			{:else}
+				<div class="flex flex-1 flex-nowrap items-baseline gap-1">
+					<p class="text-2xl font-medium">{formattedValue}</p>
+					{#if unit}
+						<p class="flex-1 truncate text-2xl font-medium text-tertiary">{unit}</p>
+					{/if}
+				</div>
+				{#if editable}
+					<IconButton onclick={(e) => startEditing(e)}>
+						<Icon iconName="PencilSimple" />
+					</IconButton>
+				{/if}
 			{/if}
 		{:else}
 			<Spinner />

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -4,6 +4,9 @@ interface Props {
     unit?: string | null;
     titleTooltip?: string;
     showTitleTooltip?: boolean;
+    editable?: boolean;
+    onsubmit?: (value: string | number) => void;
+    inputType?: 'text' | 'number';
 }
 declare const StatCard: import("svelte").Component<Props, {}, "">;
 type StatCard = ReturnType<typeof StatCard>;

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -14,7 +14,7 @@
 	let calculated_progress = 32;
 </script>
 
-<Story name="Neutral">
+<Story name="Neutral" asChild>
 	<p class="font-mono text-xs">Medium:</p>
 	<div class="flex flex-row gap-4">
 		<div class="flex flex-row gap-1">
@@ -84,7 +84,7 @@
 	</div>
 </Story>
 
-<Story name="Success">
+<Story name="Success" asChild>
 	<p class="font-mono text-xs">Medium:</p>
 	<div class="flex flex-row gap-4">
 		<div class="flex flex-row gap-1">
@@ -198,7 +198,7 @@
 	</div>
 </Story>
 
-<Story name="Progress">
+<Story name="Progress" asChild>
 	<p class="font-mono text-xs">Medium:</p>
 	<div class="flex flex-row gap-1">
 		<Tooltip>
@@ -268,7 +268,7 @@
 	</div>
 </Story>
 
-<Story name="Warning">
+<Story name="Warning" asChild>
 	<p class="font-mono text-xs">Medium:</p>
 	<div class="flex flex-row gap-1">
 		<Tooltip>
@@ -326,7 +326,7 @@
 	</div>
 </Story>
 
-<Story name="Error">
+<Story name="Error" asChild>
 	<p class="font-mono text-xs">Medium:</p>
 	<div class="flex flex-row gap-1">
 		<Tooltip>
@@ -384,7 +384,7 @@
 	</div>
 </Story>
 
-<Story name="Icon only">
+<Story name="Icon only" asChild>
 	<StatusBadge type="neutral" iconOnly>
 		{#snippet icon()}
 			<Icon iconName="SpinnerGap" />

package/dist/components/status-badge/StatusBadge.svelte

@@ -28,9 +28,11 @@
 	class:badge-icon-only={iconOnly}
 	data-testid="status-badge"
 >
-	<div class={`icon`}>
-		{@render icon?.()}
-	</div>
+	{#if icon}
+		<div class={`icon`}>
+			{@render icon?.()}
+		</div>
+	{/if}
 	<div class="gap-2">
 		{@render content?.()}
 		{@render progress?.()}

package/dist/components/stepper/Stepper.stories.svelte

@@ -0,0 +1,243 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Stepper from './index';
+	import StepperComponent from './components/stepper-root.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Stepper',
+		component: StepperComponent,
+		tags: ['autodocs'],
+		argTypes: {
+			class: { control: 'text', description: 'Additional CSS classes' },
+			currentStep: { control: 'text', description: 'The currently active step identifier' }
+		}
+	});
+</script>
+
+<Story name="Controlled by Root">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Stepper controlled by currentStep prop</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="2">
+					<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+					<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+					<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+					<Stepper.Step stepNumber="4">Review</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Non-Numeric Steps">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Stepper with Letter-based Steps</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="B">
+					<Stepper.Step stepNumber="A">Configure</Stepper.Step>
+					<Stepper.Step stepNumber="B">Process</Stepper.Step>
+					<Stepper.Step stepNumber="C">Complete</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="All States (Individually set)">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Individual Step States</h3>
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Completed State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="completed" stepNumber="1">Configure experiment</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Active State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="active" stepNumber="2">Set run conditions</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Future State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="future" stepNumber="3">Approve plate maps</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Progress Examples">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Progress States</h3>
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Start State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Mid Progress</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="3">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Almost Complete</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="4">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">All Complete</h4>
+					<div class="max-w-sm">
+						<!-- To show all as complete, set currentStep to a non-existent step after the last one -->
+						<Stepper.Root currentStep="5">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Different Step Counts">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Various Step Configurations</h3>
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Two Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Setup</Stepper.Step>
+							<Stepper.Step stepNumber="2">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Three Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure</Stepper.Step>
+							<Stepper.Step stepNumber="2">Process</Stepper.Step>
+							<Stepper.Step stepNumber="3">Complete</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Five Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="3">
+							<Stepper.Step stepNumber="1">Initialize</Stepper.Step>
+							<Stepper.Step stepNumber="2">Configure</Stepper.Step>
+							<Stepper.Step stepNumber="3">Process</Stepper.Step>
+							<Stepper.Step stepNumber="4">Validate</Stepper.Step>
+							<Stepper.Step stepNumber="5">Complete</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Single Step</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Single action step</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Custom Styling">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Custom Classes</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="2" class="rounded-lg border bg-surface p-4">
+					<Stepper.Step stepNumber="1" class="font-bold">Configure experiment</Stepper.Step>
+					<Stepper.Step stepNumber="2" class="font-bold">Set run conditions</Stepper.Step>
+					<Stepper.Step stepNumber="3" class="font-bold">Approve plate maps</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Responsive Behavior">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Text Truncation</h3>
+			<div class="space-y-6">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Normal Width (224px - Figma spec)</h4>
+					<div class="w-56">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Narrow Width (160px)</h4>
+					<div class="w-40">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure experiment parameters</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions and parameters</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve all plate maps and configurations</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Very Narrow Width (120px)</h4>
+					<div class="w-30">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1"
+								>Configure experiment parameters and settings</Stepper.Step
+							>
+							<Stepper.Step stepNumber="2">Set detailed run conditions and parameters</Stepper.Step>
+							<Stepper.Step stepNumber="3"
+								>Approve all plate maps and final configurations</Stepper.Step
+							>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/stepper/Stepper.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import * as Stepper from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Stepper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Stepper = InstanceType<typeof Stepper>;
+export default Stepper;

package/dist/components/stepper/components/stepper-root.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class?: string;
+		currentStep?: string;
+	}
+
+	let { children, class: className = '', currentStep }: Props = $props();
+
+	setContext('STEPPER_CONTEXT', {
+		currentStep
+	});
+</script>
+
+<div class="flex w-full flex-col gap-3 {className}" role="progressbar">
+	{@render children()}
+</div>

package/dist/components/stepper/components/stepper-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    class?: string;
+    currentStep?: string;
+}
+declare const StepperRoot: import("svelte").Component<Props, {}, "">;
+type StepperRoot = ReturnType<typeof StepperRoot>;
+export default StepperRoot;

package/dist/components/stepper/components/stepper-step.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getContext } from 'svelte';
+	import { Icon } from '../../icons/';
+	import type { StepState } from '../';
+
+	interface Props {
+		children: Snippet;
+		state?: StepState;
+		stepNumber: string;
+		class?: string;
+	}
+
+	let { children, state: stateProp, stepNumber, class: className = '' }: Props = $props();
+	const id = $props.id();
+
+	type StepperContext = {
+		currentStep: string;
+	};
+
+	const context = getContext<StepperContext | undefined>('STEPPER_CONTEXT');
+
+	const currentState = $derived.by(() => {
+		if (context && context.currentStep !== undefined) {
+			if (context.currentStep > stepNumber) {
+				return 'completed';
+			} else if (context.currentStep === stepNumber) {
+				return 'active';
+			} else {
+				return 'future';
+			}
+		}
+		return stateProp ?? 'future';
+	});
+
+	const stateVariants = {
+		completed: {
+			container: 'bg-transparent text-primary-inverse',
+			iconContainer: 'bg-primary ',
+			iconColor: 'text-surface',
+			labelColor: 'text-primary',
+			showIcon: true
+		},
+		active: {
+			container: 'bg-accent text-primary-inverse',
+			iconContainer: 'bg-primary ',
+			iconColor: 'text-surface',
+			labelColor: 'text-primary',
+			showIcon: false
+		},
+		future: {
+			container: 'bg-transparent',
+			iconContainer: 'bg-transparent border border-interactive',
+			iconColor: 'text-secondary',
+			labelColor: 'text-secondary',
+			showIcon: false
+		}
+	};
+
+	const variant = $derived(stateVariants[currentState]);
+</script>
+
+<div
+	{id}
+	class="relative flex items-center gap-3 rounded-lg px-2 py-3 {variant.container} {className}"
+	role="progressbar"
+	aria-valuenow={currentState === 'completed' ? 100 : currentState === 'active' ? 50 : 0}
+	aria-valuemin="0"
+	aria-valuemax="100"
+	aria-label="Step {stepNumber}"
+>
+	<div
+		class="flex h-6 w-6 items-center justify-center rounded-md {variant.iconContainer}"
+		aria-hidden="true"
+	>
+		{#if variant.showIcon}
+			<Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
+		{:else}
+			<span class="text-xs font-medium leading-none {variant.iconColor}">
+				{stepNumber}
+			</span>
+		{/if}
+	</div>
+
+	<span class="text-sm font-medium leading-tight {variant.labelColor} flex-1 truncate">
+		{@render children()}
+	</span>
+</div>
+
+<style>
+	div[role='progressbar']:not(:last-child)::after {
+		content: '';
+		position: absolute;
+		width: 1px;
+		background-color: #12192a0d;
+		left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
+		top: 2.25rem;
+		height: 2.25rem;
+	}
+</style>

package/dist/components/stepper/components/stepper-step.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { StepState } from '../';
+interface Props {
+    children: Snippet;
+    state?: StepState;
+    stepNumber: string;
+    class?: string;
+}
+declare const StepperStep: import("svelte").Component<Props, {}, "">;
+type StepperStep = ReturnType<typeof StepperStep>;
+export default StepperStep;