@reshape-biotech/design-system 0.0.48 → 0.0.49

package/dist/components/activity/Activity.stories.svelte

@@ -2,13 +2,19 @@
 	import Button from '../button/Button.svelte';
 	import Activity from './Activity.svelte';
 	import * as Collapsible from '../collapsible/index';
-	import { Eye } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	const { Story } = defineMeta({
 		component: Activity,
 		title: 'Design System/Activity',
-		tags: ['autodocs']
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=2248-7688&t=sCuBI8dX6K6NjNR6-0'
+			}
+		}
 	});
 
 	let activities = $state([
@@ -52,7 +58,7 @@
 </script>
 
 <Story name="Collapsible activity">
-	<Collapsible.Root>
+	<Collapsible.Root open>
 		<Collapsible.Trigger class="w-full pb-4">
 			<h6>Activity</h6>
 		</Collapsible.Trigger>
@@ -69,7 +75,7 @@
 				size="sm"
 				class="icon-secondary w-36 rounded-full"
 			>
-				<Eye />
+				<Icon iconName="Eye" />
 				<p>Show more</p>
 			</Button>
 		</Collapsible.Content>

package/dist/components/activity/Activity.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { Icon, type IconName } from '../icons';
 	import { DateTime } from 'luxon';
-	import { Plus, CheckFat, Pencil, Play, Pause, Stop, Trash, WarningCircle } from 'phosphor-svelte';
-	import type { Component } from 'svelte';
 
 	type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
 
@@ -21,15 +20,15 @@
 		class?: string;
 	};
 
-	const ACTIVITY_ICONS: Record<ActivityIcon, Component> = {
-		add: Plus,
-		edit: Pencil,
-		success: CheckFat,
-		start: Play,
-		pause: Pause,
-		stop: Stop,
-		delete: Trash,
-		failed: WarningCircle
+	const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
+		add: 'Plus',
+		edit: 'Pencil',
+		success: 'CheckFat',
+		start: 'Play',
+		pause: 'Pause',
+		stop: 'Stop',
+		delete: 'Trash',
+		failed: 'WarningCircle'
 	};
 
 	function formatDateTime(timestamp: string): string {
@@ -57,7 +56,7 @@
 		<div
 			class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-neutral p-0.5 text-secondary"
 		>
-			<svelte:component this={ACTIVITY_ICONS[activity.icon]} />
+			<Icon iconName={ACTIVITY_ICONS[activity.icon]} />
 		</div>
 		<div class="w-0.5 grow bg-neutral group-last:invisible"></div>
 	</div>

package/dist/components/activity/Activity.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Component } from 'svelte';
 type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
 type Activity = {
     activity_type?: string;
@@ -14,5 +13,5 @@ type Props = {
     activity: Activity;
     class?: string;
 };
-declare const Activity: Component<Props, {}, "">;
+declare const Activity: import("svelte").Component<Props, {}, "">;
 export default Activity;

package/dist/components/avatar/Avatar.stories.svelte

@@ -0,0 +1,51 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Avatar from './Avatar.svelte';
+
+	const { Story } = defineMeta({
+		component: Avatar,
+		title: 'Design System/Avatar',
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-9253&t=sCuBI8dX6K6NjNR6-0'
+			}
+		}
+	});
+</script>
+
+<Story name="Default">
+	<Avatar name="John Doe" />
+</Story>
+
+<Story name="Sizes">
+	<div class="flex gap-2">
+		<Avatar name="John Doe" size="sm" />
+		<Avatar name="John Doe" size="md" />
+	</div>
+</Story>
+
+<Story name="Email">
+	<Avatar name="john.doe@example.com" />
+</Story>
+
+<Story name="Single Name">
+	<Avatar name="John" />
+</Story>
+
+<Story name="No Name">
+	<Avatar name={null} />
+</Story>
+
+<Story name="Without Tooltip">
+	<Avatar name="John Doe" showTooltip={false} />
+</Story>
+
+<Story name="Multiple Avatars">
+	<div class="flex gap-2">
+		<Avatar name="John Doe" />
+		<Avatar name="Jane Smith" />
+		<Avatar name="Alex Johnson" />
+	</div>
+</Story>

package/dist/components/avatar/Avatar.stories.svelte.d.ts

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

package/dist/components/banner/Banner.stories.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { Info, Warning as WarningIcon } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 	import Banner from './Banner.svelte';
 	import Button from '../button/Button.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -16,7 +16,7 @@
 <Story name="Well finding warning">
 	<Banner type="warning" closable={false}>
 		{#snippet icon()}
-			<WarningIcon size="100%" weight="bold" />
+			<Icon size={20} iconName="Warning" color="warning" weight="bold" />
 		{/snippet}
 		{#snippet content()}
 			Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
@@ -39,7 +39,7 @@
 <Story name="No toggle">
 	<Banner type="progress" closable={false}>
 		{#snippet icon()}
-			<Info size="100%" weight="bold" />
+			<Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
 		{/snippet}
 		{#snippet content()}
 			This banner has no toggle.
@@ -55,7 +55,7 @@
 
 		<Banner type="error" bind:show={showBanner}>
 			{#snippet icon()}
-				<Info size="100%" weight="bold" />
+				<Icon size={20} iconName="Info" color="danger" weight="bold" />
 			{/snippet}
 			{#snippet content()}
 				This banner can be toggled off with the "x" to the right and back on with the button above.
@@ -70,7 +70,7 @@
 			<h4>Neutral</h4>
 			<Banner type="neutral">
 				{#snippet icon()}
-					<Info size="100%" weight="bold" />
+					<Icon size={20} iconName="Info" weight="bold" />
 				{/snippet}
 				{#snippet content()}
 					This is a "neutral" banner.
@@ -82,7 +82,7 @@
 			<h4>Success</h4>
 			<Banner type="success">
 				{#snippet icon()}
-					<Info size="100%" weight="bold" />
+					<Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
 				{/snippet}
 				{#snippet content()}
 					This is a "success" banner.
@@ -94,7 +94,7 @@
 			<h4>Progress</h4>
 			<Banner type="progress">
 				{#snippet icon()}
-					<Info size="100%" weight="bold" />
+					<Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
 				{/snippet}
 				{#snippet content()}
 					This is a "progress" banner.
@@ -106,7 +106,7 @@
 			<h4>Warning</h4>
 			<Banner type="warning">
 				{#snippet icon()}
-					<Info size="100%" weight="bold" />
+					<Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
 				{/snippet}
 				{#snippet content()}
 					This is a "warning" banner.
@@ -118,7 +118,7 @@
 			<h4>Error</h4>
 			<Banner type="error">
 				{#snippet icon()}
-					<Info size="100%" weight="bold" />
+					<Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
 				{/snippet}
 				{#snippet content()}
 					This is an "error" banner.

package/dist/components/banner/Banner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { X } from 'phosphor-svelte';
 	import type { Snippet } from 'svelte';
 	import { IconButton } from '../icon-button/';
+	import Icon from '../icons/Icon.svelte';
 
 	interface Props {
 		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
@@ -32,7 +32,7 @@
 	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
 		<div class="inline-flex w-full items-center justify-start gap-3">
 			{#if icon}
-				<div class="size-5 text-icon-{color} ">
+				<div class="flex size-5 items-center justify-center text-icon-{color} ">
 					{@render icon?.()}
 				</div>
 			{/if}
@@ -42,7 +42,7 @@
 		</div>
 		{#if closable}
 			<IconButton size="sm" onclick={() => (show = false)}>
-				<X class="text-icon-secondary" weight="bold" />
+				<Icon iconName="X" color="icon-secondary" weight="bold" />
 			</IconButton>
 		{/if}
 	</div>

package/dist/components/button/Button.stories.svelte

@@ -5,7 +5,13 @@
 	const { Story } = defineMeta({
 		component: Button,
 		title: 'Design System/Button',
-		tags: ['autodocs']
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3068&t=sCuBI8dX6K6NjNR6-0'
+			}
+		}
 	});
 </script>
 

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Collapsible } from 'bits-ui';
-	import { CaretDown } from 'phosphor-svelte';
+	import { Icon } from '../../icons';
 	import type { CollapsibleTriggerProps } from '../types';
 
 	let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
@@ -10,7 +10,7 @@
 	<div class="container">
 		{@render children()}
 		{#if withIcon}
-			<CaretDown class="icon" />
+			<Icon iconName="CaretDown" class="icon" />
 		{/if}
 	</div>
 </Collapsible.Trigger>

package/dist/components/combobox/Combobox.stories.svelte

@@ -1,15 +1,23 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect, userEvent, within } from '@storybook/test';
 	import * as Combobox from './index';
-	import { Plus } from 'phosphor-svelte';
+	import { Icon } from '../icons';
 	import IconButton from '../icon-button/IconButton.svelte';
 	import Divider from '../divider/Divider.svelte';
 	import Tag from '../tag/Tag.svelte';
+	import Button from '../button/Button.svelte';
 
 	const { Story } = defineMeta({
 		component: Combobox.Root,
 		title: 'Design System/Combobox',
-		tags: ['autodocs']
+		tags: ['autodocs'],
+		parameters: {
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3294&t=sCuBI8dX6K6NjNR6-0'
+			}
+		}
 	});
 
 	const fruits = [
@@ -33,22 +41,76 @@
 		{ value: 'grapefruit', label: 'Grapefruit' }
 	];
 
+	const categories = [
+		{ value: 'citrus', label: 'Citrus', items: ['orange', 'grapefruit', 'lemon'] },
+		{
+			value: 'berries',
+			label: 'Berries',
+			items: ['strawberry', 'blueberry', 'raspberry', 'blackberry']
+		},
+		{ value: 'tropical', label: 'Tropical', items: ['mango', 'pineapple', 'banana', 'kiwi'] },
+		{ value: 'stone', label: 'Stone Fruits', items: ['peach', 'cherry', 'plum', 'apricot'] },
+		{ value: 'other', label: 'Other', items: ['apple', 'pear', 'watermelon', 'grape'] }
+	];
+
 	let searchValue = $state('');
+	let searchValueSingle = $state('');
+	let searchValueGrouped = $state('');
+	let searchValueCustom = $state('');
 
 	let selected = $state<string[]>([]);
+	let selectedSingle = $state<string>('');
+	let selectedGrouped = $state<string[]>([]);
+	let selectedCustom = $state<string[]>([]);
 
 	const filteredFruits = $derived(
 		searchValue === ''
 			? fruits
 			: fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
 	);
+
+	const filteredFruitsSingle = $derived(
+		searchValueSingle === ''
+			? fruits
+			: fruits.filter((fruit) =>
+					fruit.label.toLowerCase().includes(searchValueSingle.toLowerCase())
+				)
+	);
+
+	const filteredFruitsGrouped = $derived(
+		searchValueGrouped === ''
+			? fruits
+			: fruits.filter((fruit) =>
+					fruit.label.toLowerCase().includes(searchValueGrouped.toLowerCase())
+				)
+	);
+
+	const filteredFruitsCustom = $derived(
+		searchValueCustom === ''
+			? fruits
+			: fruits.filter((fruit) =>
+					fruit.label.toLowerCase().includes(searchValueCustom.toLowerCase())
+				)
+	);
+
 	const exactMatch = $derived(
 		filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
 	);
+
+	const exactMatchCustom = $derived(
+		filteredFruitsCustom.find(
+			(fruit) => fruit.value.toLowerCase() === searchValueCustom.toLowerCase()
+		)
+	);
+
 	let customAnchor = $state<HTMLElement>(null!);
+	let customAnchorButton = $state<HTMLElement>(null!);
+	let customAnchorSingle = $state<HTMLElement>(null!);
+	let customAnchorGrouped = $state<HTMLElement>(null!);
+	let customAnchorCustom = $state<HTMLElement>(null!);
 </script>
 
-<Story name="Base">
+<Story name="Multiple Selection">
 	<Combobox.Root
 		onOpenChange={(o) => {
 			if (!o) searchValue = '';
@@ -68,7 +130,7 @@
 		<Combobox.Trigger>
 			<div bind:this={customAnchor}>
 				<IconButton rounded={false}>
-					<Plus size={16} />
+					<Icon iconName="Plus" />
 				</IconButton>
 			</div>
 		</Combobox.Trigger>
@@ -104,7 +166,6 @@
 				<Divider />
 
 				<Combobox.Add
-					class=""
 					onclick={() => {
 						selected.push(searchValue);
 						fruits.push({ value: searchValue, label: searchValue });
@@ -117,3 +178,263 @@
 		</Combobox.Content>
 	</Combobox.Root>
 </Story>
+
+<Story name="Single Selection">
+	<Combobox.Root
+		onOpenChange={(o) => {
+			if (!o) searchValueSingle = '';
+		}}
+		type="single"
+		name="singleFruit"
+		items={filteredFruitsSingle}
+		bind:value={selectedSingle}
+	>
+		<Combobox.Trigger>
+			<div bind:this={customAnchorSingle}>
+				<Button variant="secondary" size="sm">
+					{selectedSingle ? selectedSingle : 'Select a fruit'}
+				</Button>
+			</div>
+		</Combobox.Trigger>
+		<Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorSingle}>
+			<div class="flex flex-grow flex-col">
+				{#if filteredFruitsSingle.length > 0}
+					<Combobox.Group>
+						<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+						{#each filteredFruitsSingle as fruit (fruit.value)}
+							<Combobox.Item value={fruit.value} label={fruit.label}>
+								{#snippet children({ selected })}
+									{fruit.label}
+									{#if selected}
+										<Combobox.Indicator />
+									{/if}
+								{/snippet}
+							</Combobox.Item>
+						{:else}
+							<span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+						{/each}
+					</Combobox.Group>
+				{/if}
+			</div>
+		</Combobox.Content>
+	</Combobox.Root>
+</Story>
+
+<Story name="Grouped Items">
+	<Combobox.Root
+		onOpenChange={(o) => {
+			if (!o) searchValueGrouped = '';
+		}}
+		type="multiple"
+		name="groupedFruits"
+		items={filteredFruitsGrouped}
+		bind:value={selectedGrouped}
+	>
+		<div class="flex flex-wrap gap-2">
+			{#each selectedGrouped as fruit}
+				<Tag>
+					{fruit}
+				</Tag>
+			{/each}
+		</div>
+		<Combobox.Trigger>
+			<div bind:this={customAnchorGrouped}>
+				<Button variant="primary" size="sm">
+					<Icon iconName="List" />
+					Select fruits by category
+				</Button>
+			</div>
+		</Combobox.Trigger>
+		<Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped}>
+			<div>
+				<Combobox.Input
+					placeholder="Search across categories"
+					oninput={(e: Event) => (searchValueGrouped = (e.target as HTMLInputElement).value)}
+					autofocus
+				/>
+				<Divider />
+			</div>
+			<div class="flex max-h-80 flex-grow flex-col overflow-y-auto">
+				{#if searchValueGrouped === ''}
+					{#each categories as category}
+						<Combobox.Group>
+							<Combobox.GroupHeading>{category.label}</Combobox.GroupHeading>
+							{#each category.items as item}
+								{@const fruit = fruits.find((f) => f.value === item)}
+								{#if fruit}
+									<Combobox.Item value={fruit.value} label={fruit.label}>
+										{#snippet children({ selected })}
+											{fruit.label}
+											{#if selected}
+												<Combobox.Indicator />
+											{/if}
+										{/snippet}
+									</Combobox.Item>
+								{/if}
+							{/each}
+						</Combobox.Group>
+					{/each}
+				{:else if filteredFruitsGrouped.length > 0}
+					<Combobox.Group>
+						<Combobox.GroupHeading>Search Results</Combobox.GroupHeading>
+						{#each filteredFruitsGrouped as fruit (fruit.value)}
+							<Combobox.Item value={fruit.value} label={fruit.label}>
+								{#snippet children({ selected })}
+									{fruit.label}
+									{#if selected}
+										<Combobox.Indicator />
+									{/if}
+								{/snippet}
+							</Combobox.Item>
+						{/each}
+					</Combobox.Group>
+				{:else}
+					<span class="text-muted-foreground block px-5 py-2 text-sm"> No results found </span>
+				{/if}
+			</div>
+		</Combobox.Content>
+	</Combobox.Root>
+</Story>
+
+<Story
+	name="Interaction Test"
+	play={async ({ canvasElement }) => {
+		// Get the canvas element
+		const canvas = within(canvasElement);
+
+		// Find and click the trigger button to open the combobox
+		const triggerButton = canvas.getByTestId('combobox-trigger');
+		await userEvent.click(triggerButton);
+
+		// Wait for the combobox content to appear in the document
+		await new Promise((resolve) => setTimeout(resolve, 300));
+
+		// Find the combobox content in the document
+		const comboboxContent = document.querySelector(
+			'[data-testid="combobox-content"]'
+		) as HTMLElement;
+		if (!comboboxContent) {
+			console.log('Combobox content not found');
+			return;
+		}
+
+		// Use within to scope queries to the combobox content
+		const contentScope = within(comboboxContent);
+		const searchInput = contentScope.getByTestId('combobox-input');
+
+		// Type "berry" in the search input
+		await userEvent.type(searchInput, 'berry');
+
+		// Wait for the filtering to complete
+		await new Promise((resolve) => setTimeout(resolve, 300));
+
+		// Find and click on the Strawberry option
+		const strawberryOption = contentScope.getByText('Strawberry');
+		await userEvent.click(strawberryOption);
+
+		// Wait for selection to be processed
+
+		// Open the combobox again
+
+		// Get the search input again
+
+		// Clear the previous search and type "mango"
+		await userEvent.clear(searchInput);
+		await userEvent.type(searchInput, 'mango');
+
+		// Wait for filtering to complete
+		await new Promise((resolve) => setTimeout(resolve, 300));
+
+		// Find and click on the Mango option
+		const mangoOption = contentScope.getByText('Mango');
+		await userEvent.click(mangoOption);
+
+		await userEvent.keyboard('{Escape}');
+
+		// Test complete
+		console.log('Successfully selected Strawberry and Mango');
+	}}
+>
+	<div data-testid="combobox-container">
+		<Combobox.Root
+			onOpenChange={(o) => {
+				if (!o) searchValue = '';
+			}}
+			type="multiple"
+			name="favoriteFruit"
+			items={filteredFruits}
+			bind:value={selected}
+		>
+			<div class="flex gap-2" data-testid="selected-tags">
+				{#each selected as fruit}
+					<Tag>
+						<div data-value={fruit}>
+							{fruit}
+						</div>
+					</Tag>
+				{/each}
+			</div>
+			<Combobox.Trigger data-testid="combobox-trigger">
+				<div bind:this={customAnchor}>
+					<IconButton rounded={false}>
+						<Icon iconName="Plus" />
+					</IconButton>
+				</div>
+			</Combobox.Trigger>
+			<Combobox.Content
+				{customAnchor}
+				class="flex flex-col justify-between"
+				data-testid="combobox-content"
+			>
+				<div>
+					<Combobox.Input
+						placeholder="Search a fruit"
+						oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+						autofocus
+						data-testid="combobox-input"
+					/>
+					<Divider />
+				</div>
+				<div class="flex flex-grow flex-col">
+					{#if filteredFruits.length > 0}
+						<Combobox.Group>
+							<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+							{#each filteredFruits as fruit (fruit.value)}
+								<Combobox.Item
+									value={fruit.value}
+									label={fruit.label}
+									data-testid={`fruit-option-${fruit.value}`}
+								>
+									{#snippet children({ selected })}
+										{fruit.label}
+										{#if selected}
+											<Combobox.Indicator />
+										{/if}
+									{/snippet}
+								</Combobox.Item>
+							{:else}
+								<span class="block px-5 py-2 text-sm text-muted-foreground">
+									No results found
+								</span>
+							{/each}
+						</Combobox.Group>
+					{/if}
+				</div>
+				{#if !exactMatch && searchValue !== ''}
+					<Divider />
+
+					<Combobox.Add
+						data-testid="add-new-fruit"
+						onclick={() => {
+							selected.push(searchValue);
+							fruits.push({ value: searchValue, label: searchValue });
+							searchValue = '';
+						}}
+					>
+						<p>Add new fruit</p>
+					</Combobox.Add>
+				{/if}
+			</Combobox.Content>
+		</Combobox.Root>
+	</div>
+</Story>