@reshape-biotech/design-system 0.0.52 → 1.1.1

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, inputAttributes } from '@sjsf/form';
+	import Input from '../input/Input.svelte';
+	import type { FocusEventHandler } from 'svelte/elements';
+
+	type Props = ComponentProps['numberWidget'];
+
+	let { value = $bindable(), config, handlers, errors }: Props = $props();
+
+	const ctx = getFormContext();
+
+	const derivedAttrs = $derived(
+		inputAttributes(ctx, config, 'number', handlers, {
+			type: 'number'
+		})
+	);
+	const placeholder = $derived(
+		config?.uiSchema?.['ui:placeholder'] ||
+			config?.schema?.description ||
+			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+				? String(config.schema.examples[0]) // Ensure the example is also a string
+				: '') ||
+			''
+	);
+
+	const readonly = $derived(config?.schema?.readOnly ?? false);
+	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+
+	const onBlurHandler = $derived(
+		derivedAttrs.onblur
+			? (event: FocusEvent) =>
+					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+
+	const onChangeHandler = $derived(
+		derivedAttrs.onchange
+			? (event: Event) =>
+					(derivedAttrs.onchange as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+
+	const onInputHandler = $derived(
+		derivedAttrs.oninput
+			? (event: Event) =>
+					(derivedAttrs.oninput as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+
+	const getStringValue = () => {
+		if (value === undefined || value === null || isNaN(value)) {
+			return '';
+		}
+		return String(value);
+	};
+
+	const setNumericValue = (newValueFromInput: unknown) => {
+		const stringifiedInput =
+			newValueFromInput === null || newValueFromInput === undefined
+				? ''
+				: String(newValueFromInput);
+
+		if (stringifiedInput.trim() === '') {
+			value = undefined;
+		} else {
+			const num = parseFloat(stringifiedInput);
+			value = isNaN(num) ? undefined : num;
+		}
+	};
+</script>
+
+<Input
+	bind:value={() => getStringValue(), (v) => setNumericValue(v)}
+	placeholder={String(placeholder)}
+	type={'number'}
+	{readonly}
+	id={String(derivedAttrs.id)}
+	name={String(derivedAttrs.name)}
+	disabled={derivedAttrs.disabled}
+	required={derivedAttrs.required}
+	step={config?.schema?.multipleOf ?? (config?.schema?.type === 'integer' ? 1 : 'any')}
+	min={config?.schema?.minimum ?? config?.schema?.exclusiveMinimum}
+	max={config?.schema?.maximum ?? config?.schema?.exclusiveMaximum}
+	aria-invalid={errors && errors.length > 0 ? true : undefined}
+	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+	class={String(currentClass)}
+	autocomplete="off"
+	oninput={onInputHandler}
+	onchange={onChangeHandler}
+	onblur={onBlurHandler}
+/>

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts

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

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, inputAttributes } from '@sjsf/form';
+	import Input from '../input/Input.svelte';
+	import type { FormEventHandler, FocusEventHandler } from 'svelte/elements';
+
+	type Props = ComponentProps['textWidget'];
+
+	let { value = $bindable(), config, handlers, errors }: Props = $props();
+
+	const ctx = getFormContext();
+
+	const derivedAttrs = $derived(
+		inputAttributes(ctx, config, 'text', handlers, {
+			type: 'text'
+		})
+	);
+
+	const placeholder = $derived(
+		config?.uiSchema?.['ui:placeholder'] ||
+			config?.schema?.description ||
+			(Array.isArray(config?.schema?.examples) && config.schema.examples.length > 0
+				? String(config.schema.examples[0])
+				: '') ||
+			''
+	);
+
+	const readonly = $derived(config?.schema?.readOnly ?? false);
+	const currentClass = $derived(derivedAttrs?.class ?? 'w-full');
+
+	const onInput = $derived(
+		derivedAttrs.oninput
+			? (event: Event) => (derivedAttrs.oninput as FormEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+	const onChange = $derived(
+		derivedAttrs.onchange
+			? (event: Event) =>
+					(derivedAttrs.onchange as FormEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+	const onBlur = $derived(
+		derivedAttrs.onblur
+			? (event: FocusEvent) =>
+					(derivedAttrs.onblur as FocusEventHandler<HTMLInputElement>)(event as any)
+			: undefined
+	);
+</script>
+
+<Input
+	bind:value
+	placeholder={String(placeholder)}
+	type="text"
+	{readonly}
+	id={String(derivedAttrs.id)}
+	name={String(derivedAttrs.name)}
+	disabled={derivedAttrs.disabled}
+	required={derivedAttrs.required}
+	oninput={onInput}
+	onchange={onChange}
+	onblur={onBlur}
+	aria-invalid={errors && errors.length > 0 ? true : undefined}
+	aria-describedby={errors && errors.length > 0 ? `${String(derivedAttrs.id)}-errors` : undefined}
+	class={String(currentClass)}
+/>

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts

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

package/dist/components/sjsf-wrappers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SjsfTextInputWrapper } from './SjsfTextInputWrapper.svelte';
+export { default as SjsfNumberInputWrapper } from './SjsfNumberInputWrapper.svelte';

package/dist/components/sjsf-wrappers/index.js

@@ -0,0 +1,2 @@
+export { default as SjsfTextInputWrapper } from './SjsfTextInputWrapper.svelte';
+export { default as SjsfNumberInputWrapper } from './SjsfNumberInputWrapper.svelte';

package/dist/components/sjsf-wrappers/sjsfCustomTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '@sjsf/form';
+export declare const sjsfCustomTheme: Theme;

package/dist/components/sjsf-wrappers/sjsfCustomTheme.js

@@ -0,0 +1,8 @@
+import { theme as BasicTheme } from '@sjsf/basic-theme';
+import { overrideByRecord } from '@sjsf/form/lib/resolver';
+import SjsfNumberInputWrapper from './SjsfNumberInputWrapper.svelte';
+import SjsfTextInputWrapper from './SjsfTextInputWrapper.svelte';
+export const sjsfCustomTheme = overrideByRecord(BasicTheme, {
+    numberWidget: SjsfNumberInputWrapper,
+    textWidget: SjsfTextInputWrapper
+});

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte

@@ -10,15 +10,15 @@
 	});
 </script>
 
-<Story name="Primary">
-	<SkeletonLoader class="h-[20px] w-[200px]">
+<Story name="Primary" asChild>
+	<SkeletonLoader class="h-[50px] w-[200px]">
 		{#snippet children({ Skeleton })}
 			<Skeleton class="h-full w-full" />
 		{/snippet}
 	</SkeletonLoader>
 </Story>
 
-<Story name="ImagePlaceholder">
+<Story name="ImagePlaceholder" asChild>
 	<SkeletonLoader class="h-[100px] w-[500px]">
 		{#snippet children({ Skeleton, SkeletonImage })}
 			<div class="flex h-full gap-2">
@@ -36,7 +36,7 @@
 	</SkeletonLoader>
 </Story>
 
-<Story name="StatCard">
+<Story name="StatCard" asChild>
 	<div class="flex w-[900px] gap-4">
 		<StatcardSkeleton />
 		<StatcardSkeleton />

package/dist/components/slider/Slider.stories.svelte

@@ -12,19 +12,19 @@
 	let value = 3;
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	Value: {value + 1}
 	<Slider bind:value bind:buffer={value} max={4}></Slider>
 </Story>
-<Story name="Playback Controls Running Job">
+<Story name="Playback Controls Running Job" asChild>
 	Value: {value + 1}
 	<Slider bind:value buffer={35} max={49} bufferColorClass="bg-warning-inverse"></Slider>
 </Story>
-<Story name="Modern stepStyle">
+<Story name="Modern stepStyle" asChild>
 	Value: {value + 1}
 	<Slider bind:value bind:buffer={value} max={4} showSteps={true}></Slider>
 </Story>
-<Story name="Create Job Capture Interval">
+<Story name="Create Job Capture Interval" asChild>
 	Value: {value + 1}
 	<Slider
 		bind:value

package/dist/components/spinner/Spinner.stories.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Spinner from './Spinner.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Spinner',
+		component: Spinner,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base" />

package/dist/components/spinner/Spinner.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Spinner from './Spinner.svelte';
+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 Spinner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;

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/table/Table.stories.svelte

@@ -64,7 +64,7 @@
 	];
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<Table>
 		{#snippet children({ THead, TBody, Tr, Th, Td })}
 			<THead>

package/dist/components/table/components/Td.svelte

@@ -3,12 +3,13 @@
 
 	interface Props {
 		dataTestId?: string;
+		align?: 'left' | 'right';
 		children?: Snippet;
 	}
 
-	let { dataTestId = '', children }: Props = $props();
+	let { dataTestId = '', align = 'left', children }: Props = $props();
 </script>
 
-<td data-testid={dataTestId} class={`text-left text-sm font-normal`}>
+<td data-testid={dataTestId} class={`text-${align} text-sm font-normal`}>
 	{@render children?.()}
 </td>

package/dist/components/table/components/Td.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     dataTestId?: string;
+    align?: 'left' | 'right';
     children?: Snippet;
 }
 declare const Td: import("svelte").Component<Props, {}, "">;

package/dist/components/table/components/Tr.svelte

@@ -4,12 +4,13 @@
 	interface Props {
 		disabled?: boolean;
 		children?: Snippet;
+		class?: string;
 	}
 
-	let { disabled = false, children }: Props = $props();
+	let { disabled = false, children, class: className = '' }: Props = $props();
 </script>
 
-<tr class="my-2 border-static [&.disabled]:text-tertiary" class:disabled>
+<tr class={`border-static py-2 [&.disabled]:text-tertiary ${className}`} class:disabled>
 	{@render children?.()}
 </tr>
 

package/dist/components/table/components/Tr.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     disabled?: boolean;
     children?: Snippet;
+    class?: string;
 }
 declare const Tr: import("svelte").Component<Props, {}, "">;
 type Tr = ReturnType<typeof Tr>;

package/dist/components/tabs/Tabs.stories.svelte

@@ -11,7 +11,7 @@
 	let activeTab = 'tab-1';
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<Tabs>
 		{#snippet children({ Tabs, Tab, Content })}
 			<Tabs>