@reshape-biotech/design-system 0.0.22 → 0.0.24

package/dist/components/slider/Slider.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { CaretLeft, CaretRight } from 'phosphor-svelte';
+	let className = '';
+	export { className as class };
+	export let value = 0;
+	export let max: number;
+	export let buffer = 0;
+	export let bufferMin = 0;
+	export let bufferColorClass = 'bg-accent-inverse';
+	export let showSteps = false;
+	export let onMousedown: () => void = () => {};
+	export let onMouseup: () => void = () => {};
+	export let id: string | undefined = undefined;
+
+	$: if (value > max) {
+		value = max;
+	} else if (value < 0) {
+		value = 0;
+	}
+
+	$: visualMax = Math.max(max, 1);
+	$: buffer = Math.min(buffer, visualMax);
+
+	function calculatePosition(positionFactor: number): string {
+		return `calc((${positionFactor / visualMax} * (100% - 2.5rem))`;
+	}
+</script>
+
+<div class={`relative flex h-10 items-center ${className}`}>
+	<div class="track-overlay"></div>
+	<div
+		class="pointer-events-none absolute h-2 rounded-full {bufferColorClass}"
+		style="
+      width: {calculatePosition(buffer - bufferMin)} + 0.5rem);
+      left: {calculatePosition(bufferMin)} + 1rem)
+    "
+	></div>
+	{#if showSteps}
+		<div class="h-2">
+			{#each Array(visualMax + 1) as _, index}
+				<div
+					class="absolute h-1 w-1 translate-y-1/2 rounded-full bg-surface"
+					style="left: {calculatePosition(index)} + 1.125rem"
+				></div>
+			{/each}
+		</div>
+	{/if}
+	<input
+		{id}
+		data-testid={id}
+		type="range"
+		max={visualMax}
+		bind:value
+		on:mousedown={onMousedown}
+		on:mouseup={onMouseup}
+	/>
+	<div class="thumb-overlay" style="left: {calculatePosition(value)} + 1.25rem)">
+		<CaretLeft class="text-primary" size="0.75rem" weight="bold" />
+		<CaretRight class="text-primary" size="0.75rem" weight="bold" />
+	</div>
+</div>
+
+<style>
+	.track-overlay {
+		width: calc(100% - 2rem);
+		cursor: pointer;
+		pointer-events: none;
+		position: absolute;
+		margin-left: 1rem;
+		margin-right: 1rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background-color: #12192A26;
+	}
+
+	.thumb-overlay {
+		transform: translate(-50%, 50%);
+		pointer-events: none;
+		position: absolute;
+		bottom: 1.25rem;
+		display: inline-flex;
+		height: 2.5rem;
+		width: 2.5rem;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		--tw-bg-opacity: 1;
+		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+		--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+		--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+	}
+
+	input[type='range'] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		     appearance: none;
+		position: relative;
+		cursor: pointer;
+		height: 2.5rem;
+		width: 100%;
+		background-color: transparent;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			width: 0;
+			height: 0;
+		}
+
+	input[type='range']::-moz-range-thumb {
+			width: 0;
+			height: 0;
+			border: none;
+		}
+</style>

package/dist/components/slider/Slider.svelte.d.ts

@@ -0,0 +1,29 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Slider: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    value?: number;
+    max: number;
+    buffer?: number;
+    bufferMin?: number;
+    bufferColorClass?: string;
+    showSteps?: boolean;
+    onMousedown?: () => void;
+    onMouseup?: () => void;
+    id?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Slider = InstanceType<typeof Slider>;
+export default Slider;

package/dist/components/spinner/Spinner.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface Props {
+		testID?: string;
+	}
+
+	let { testID = '' }: Props = $props();
+</script>
+
+<div data-testid={testID} class="spinner"></div>
+
+<style>
+	.spinner {
+		background: conic-gradient(#0000 10%, currentColor);
+		mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
+		-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
+		animation: spinner 1s infinite linear;
+		height: 0.75rem;
+		width: 0.75rem;
+		border-radius: 9999px;
+	}
+
+	@keyframes spinner {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+</style>

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

@@ -0,0 +1,6 @@
+interface Props {
+    testID?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

@@ -0,0 +1,31 @@
+<script module>
+	import StatCard from './StatCard.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: StatCard,
+		title: 'Design System/StatCard',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default">
+	<StatCard title="Title" value="Value" unit="unit" titleTooltip="Title tooltip" />
+</Story>
+
+<Story name="Germination Rate">
+	<StatCard
+		title="Germination Rate"
+		value="2"
+		unit="%"
+		titleTooltip="Something that explains what this is..."
+	/>
+</Story>
+
+<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>

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

@@ -0,0 +1,27 @@
+export default StatCard;
+type StatCard = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const StatCard: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import StatCard from './StatCard.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;
+}

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Info } from 'phosphor-svelte';
+	import Spinner from 'design-system/components/spinner/Spinner.svelte';
+	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
+	import { featureFlags } from '../../stores';
+
+	interface Props {
+		title: string;
+		value?: string | number | null;
+		unit?: string | null;
+		titleTooltip?: string;
+	}
+
+	let { title, value = null, unit = '', titleTooltip = '' }: Props = $props();
+	const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
+</script>
+
+<div
+	class="flex h-24 min-w-[130px] flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 rounded-lg bg-surface p-4 shadow-field"
+>
+	<h5 class="flex items-center justify-start gap-1 text-secondary">
+		{title}
+		{#if titleTooltip && $featureFlags.analTooltip}
+			<Tooltip>
+				{#snippet trigger()}
+					<Info class="icon" size="1rem" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					<span>
+						{titleTooltip}
+					</span>
+				{/snippet}
+			</Tooltip>
+		{/if}
+	</h5>
+	<div class="flex items-baseline gap-1">
+		{#if value !== null}
+			<h3>{formattedValue}</h3>
+			{#if unit}
+				<h5>{unit}</h5>
+			{/if}
+		{:else}
+			<Spinner />
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    title: string;
+    value?: string | number | null;
+    unit?: string | null;
+    titleTooltip?: string;
+}
+declare const StatCard: import("svelte").Component<Props, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

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

@@ -0,0 +1,401 @@
+<script module lang="ts">
+	import StatusBadge from 'design-system/components/status-badge/StatusBadge.svelte';
+	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
+	import ProgressCircle from 'design-system/components/progress-circle/ProgressCircle.svelte';
+
+	import {
+		SpinnerGap,
+		CheckCircle,
+		Moon,
+		StopCircle,
+		WifiSlash,
+		WarningCircle
+	} from 'phosphor-svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: StatusBadge,
+		title: 'Design System/StatusBadge',
+		tags: ['autodocs']
+	});
+
+	let calculated_progress = 32;
+</script>
+
+<Story name="Neutral">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-4">
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<SpinnerGap size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					<div>Pending</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<SpinnerGap size="100%" weight="bold" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<Moon size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					<div>Idle</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<Moon size="100%" weight="bold" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-10">
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<SpinnerGap size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					<div>Pending</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<SpinnerGap size="100%" weight="bold" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<Moon size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					<div>Idle</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<Moon size="100%" weight="bold" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+</Story>
+
+<Story name="Success">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-4">
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<div>
+						<StatusBadge type="success">
+							{#snippet icon()}
+								<CheckCircle size="100%" weight="fill" />
+							{/snippet}
+							{#snippet content()}
+								<div>Completed</div>
+							{/snippet}
+						</StatusBadge>
+					</div>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job completed</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success">
+				{#snippet icon()}
+					<CheckCircle size="100%" weight="fill" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<div>
+						<StatusBadge type="success">
+							{#snippet icon()}
+								<StopCircle size="100%" weight="bold" />
+							{/snippet}
+							{#snippet content()}
+								<div>Stopped</div>
+							{/snippet}
+						</StatusBadge>
+					</div>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job stopped</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success">
+				{#snippet icon()}
+					<StopCircle size="100%" weight="bold" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-10">
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<StatusBadge type="success" size="sm">
+						{#snippet icon()}
+							<CheckCircle size="100%" weight="fill" />
+						{/snippet}
+						{#snippet content()}
+							<div>Completed</div>
+						{/snippet}
+					</StatusBadge>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job completed</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success" size="sm">
+				{#snippet icon()}
+					<CheckCircle size="100%" weight="fill" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<StatusBadge type="success" size="sm">
+						{#snippet icon()}
+							<StopCircle size="100%" weight="bold" />
+						{/snippet}
+						{#snippet content()}
+							<div>Stopped</div>
+						{/snippet}
+					</StatusBadge>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job stopped</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success" size="sm">
+				{#snippet icon()}
+					<StopCircle size="100%" weight="bold" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+</Story>
+
+<Story name="Progress">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="progress">
+					{#snippet icon()}
+						<ProgressCircle progress={calculated_progress} size="md" />
+					{/snippet}
+					{#snippet content()}
+						<div>Running</div>
+					{/snippet}
+					{#snippet progress()}
+						<div>{calculated_progress}%</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job running</p>
+					<p class="text-xs">1d 3h 2m left</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="progress">
+			{#snippet icon()}
+				<ProgressCircle progress={calculated_progress} size="md" />
+			{/snippet}
+			{#snippet progress()}
+				<div>{calculated_progress}%</div>
+			{/snippet}
+		</StatusBadge>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="progress" size="sm">
+					{#snippet icon()}
+						<ProgressCircle progress={calculated_progress} size="sm" />
+					{/snippet}
+					{#snippet content()}
+						<div>Running</div>
+					{/snippet}
+					{#snippet progress()}
+						<div>{calculated_progress}%</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job running</p>
+					<p class="text-xs">1d 3h 2m left</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="progress" size="sm">
+			{#snippet icon()}
+				<ProgressCircle progress={calculated_progress} size="sm" />
+			{/snippet}
+			{#snippet progress()}
+				<div>{calculated_progress}%</div>
+			{/snippet}
+		</StatusBadge>
+	</div>
+</Story>
+
+<Story name="Warning">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="warning">
+					{#snippet icon()}
+						<WifiSlash size="100%" weight="bold" />
+					{/snippet}
+					{#snippet content()}
+						<div>Offline</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Device is offline</p>
+					<p class="text-xs">Connect to the internet to start a Job</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="warning">
+			{#snippet icon()}
+				<WifiSlash size="100%" weight="bold" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="warning" size="sm">
+					{#snippet icon()}
+						<WifiSlash size="100%" weight="bold" />
+					{/snippet}
+					{#snippet content()}
+						<div>Offline</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Device is offline</p>
+					<p class="text-xs">Connect to the internet to start a Job</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="warning" size="sm">
+			{#snippet icon()}
+				<WifiSlash size="100%" weight="bold" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+</Story>
+
+<Story name="Error">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="error">
+					{#snippet icon()}
+						<WarningCircle size="100%" weight="fill" />
+					{/snippet}
+					{#snippet content()}
+						<div>Failed</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job failed</p>
+					<p class="text-xs">8/30/2024, 11:07 AM</p>
+				</div>
+			{/snippet}</Tooltip
+		>
+
+		<StatusBadge type="error">
+			{#snippet icon()}
+				<WarningCircle size="100%" weight="fill" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="error" size="sm">
+					{#snippet icon()}
+						<WarningCircle size="100%" weight="fill" />
+					{/snippet}
+					{#snippet content()}
+						<div>Failed</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job failed</p>
+					<p class="text-xs">8/30/2024, 11:07 AM</p>
+				</div>
+			{/snippet}</Tooltip
+		>
+
+		<StatusBadge type="error" size="sm">
+			{#snippet icon()}
+				<WarningCircle size="100%" weight="fill" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+</Story>
+
+<Story name="Icon only">
+	<StatusBadge type="neutral" iconOnly>
+		{#snippet icon()}
+			<SpinnerGap size="100%" weight="bold" />
+		{/snippet}
+	</StatusBadge>
+</Story>