@reshape-biotech/design-system 0.0.47 → 0.0.49

package/dist/app.css

@@ -0,0 +1,115 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@layer base {
+	@font-face {
+		font-family: 'MD System Mono';
+		font-style: normal;
+		font-weight: 400;
+		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
+	}
+	@font-face {
+		font-family: 'af Another Sans';
+		font-style: normal;
+		font-weight: 400;
+		src: url('/fonts/afAnotherSans-Regular.woff2') format('woff2');
+	}
+	@font-face {
+		font-family: 'af Another Sans';
+		font-style: normal;
+		font-weight: 500;
+		src: url('/fonts/afAnotherSans-Medium.woff2') format('woff2');
+	}
+	@font-face {
+		font-family: 'af Another Sans';
+		font-style: normal;
+		font-weight: 600;
+		src: url('/fonts/afAnotherSans-SemiBold.woff2') format('woff2');
+	}
+
+	body {
+		background-color: theme('backgroundColor.surface');
+		color: theme('textColor.primary');
+		font-family: 'af Another Sans', sans-serif;
+		font-style: normal;
+		font-feature-settings: 'ss01' on;
+		font-variant-numeric: lining-nums tabular-nums;
+		font-weight: 400;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		letter-spacing: 0.01em;
+	}
+
+	a {
+		color: theme('textColor.accent');
+		font-style: normal;
+	}
+	a:hover {
+		text-decoration: underline;
+	}
+
+	strong {
+		font-weight: 600;
+	}
+
+	h1 {
+		/* text-7xl */
+		font-size: 4.5rem;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 4.5rem;
+		letter-spacing: -0.1em;
+	}
+
+	h2 {
+		/* text-5xl */
+		font-size: 3rem;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 3rem;
+		letter-spacing: -0.05em;
+	}
+
+	h3 {
+		/* text-2xl */
+		font-size: 1.5rem;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 1.75rem;
+		letter-spacing: -0.025em;
+	}
+
+	h4 {
+		/* text-xl */
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		font-style: normal;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	h5 {
+		/* text-base */
+		font-size: 1rem;
+		line-height: 1.5rem;
+		font-style: normal;
+		font-weight: 600;
+		letter-spacing: 0;
+	}
+
+	h6 {
+		/* text-sm */
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-style: normal;
+		font-weight: 600;
+		letter-spacing: 0;
+	}
+}
+
+@layer components {
+	html:has(.drawer-auto-gutter .drawer-toggle:checked) {
+		scrollbar-gutter: auto;
+	}
+}

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

@@ -0,0 +1,106 @@
+<script module lang="ts">
+	import Button from '../button/Button.svelte';
+	import Activity from './Activity.svelte';
+	import * as Collapsible from '../collapsible/index';
+	import { Icon } from '../icons';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Activity,
+		title: 'Design System/Activity',
+		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([
+		{
+			icon: 'add' as const,
+			label: 'Job created',
+			timestamp: '12 Sep 2025, 9:59',
+			author: 'Ella Roth'
+		},
+		{
+			icon: 'edit' as const,
+			label: 'Sample ID edited',
+			from: 'Sample123',
+			to: 'Sample456',
+			timestamp: '5 Sep 2025, 12:05',
+			author: 'Ella Roth'
+		},
+		{
+			icon: 'success' as const,
+			label: 'Job finished',
+			timestamp: '14 Aug 2025, 13:05'
+		},
+		{
+			icon: 'pause' as const,
+			label: 'Job paused',
+			timestamp: '4 Aug 2025, 13:05',
+			author: 'Bob Vance'
+		},
+		{
+			icon: 'stop' as const,
+			label: 'Some label that just happened to be very long so it will probably wrap in most cases',
+			timestamp: '4 Aug 2025, 13:05',
+			author: 'Michael Scott'
+		}
+	]);
+
+	const fetchedMoreActivities = () => {
+		const index = Math.floor(Math.random() * (activities.length - 1));
+		activities = [...activities, activities[index]];
+	};
+</script>
+
+<Story name="Collapsible activity">
+	<Collapsible.Root open>
+		<Collapsible.Trigger class="w-full pb-4">
+			<h6>Activity</h6>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content class="flex flex-col items-center gap-3">
+			<div class="flex flex-col text-sm">
+				{#each activities as activity}
+					<Activity {activity} />
+				{/each}
+			</div>
+			<Button
+				onClick={fetchedMoreActivities}
+				variant="outline"
+				size="sm"
+				class="icon-secondary w-36 rounded-full"
+			>
+				<Icon iconName="Eye" />
+				<p>Show more</p>
+			</Button>
+		</Collapsible.Content>
+	</Collapsible.Root>
+</Story>
+
+<Story name="Single activity">
+	<Activity activity={{ icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' }} />
+</Story>
+
+<Story name="Few activities">
+	<Activity
+		activity={{
+			icon: 'pause',
+			label: 'Project paused',
+			timestamp: '2 Oct, 1999',
+			author: 'Dwight'
+		}}
+	/>
+	<Activity
+		activity={{
+			icon: 'add',
+			label: 'Project created',
+			timestamp: '2 Oct, 1999',
+			author: 'Dwight'
+		}}
+	/>
+</Story>

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

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

package/dist/components/activity/Activity.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { Icon, type IconName } from '../icons';
+	import { DateTime } from 'luxon';
+
+	type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
+
+	type Activity = {
+		activity_type?: string;
+		icon: ActivityIcon;
+		label: string;
+		timestamp: string;
+		author?: string | null;
+		field?: string | null;
+		previous_value?: string | null;
+		value?: string | null;
+	};
+
+	type Props = {
+		activity: Activity;
+		class?: string;
+	};
+
+	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 {
+		try {
+			const dateTime = DateTime.fromISO(timestamp);
+
+			if (dateTime.isValid) {
+				return dateTime.toLocaleString(DateTime.DATETIME_MED, {
+					locale: navigator.language ?? 'en-US'
+				});
+			}
+
+			return timestamp;
+		} catch (err) {
+			return timestamp;
+		}
+	}
+
+	let { class: className = '', activity }: Props = $props();
+</script>
+
+<div class={`group flex items-stretch gap-3 ${className}`}>
+	<div class="flex min-h-12 flex-col items-center gap-1.5">
+		<div class="w-0.5 grow bg-neutral group-first:invisible"></div>
+		<div
+			class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-neutral p-0.5 text-secondary"
+		>
+			<Icon iconName={ACTIVITY_ICONS[activity.icon]} />
+		</div>
+		<div class="w-0.5 grow bg-neutral group-last:invisible"></div>
+	</div>
+	<div class="flex items-center py-4">
+		<div class="text-secondary">
+			<span class="text-primary">{activity.label}</span>
+			{#if activity.previous_value}
+				<span> from <span class="text-primary">{activity.previous_value}</span></span>
+			{/if}
+			{#if activity.value}
+				<span> to <span class="text-primary">{activity.value}</span></span>
+			{/if}
+			<span class="px-0.5">⸱</span>
+			<span>{formatDateTime(activity.timestamp)}</span>
+			{#if activity.author}
+				<span> by <span class="text-primary">{activity.author}</span></span>
+			{/if}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,17 @@
+type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
+type Activity = {
+    activity_type?: string;
+    icon: ActivityIcon;
+    label: string;
+    timestamp: string;
+    author?: string | null;
+    field?: string | null;
+    previous_value?: string | null;
+    value?: string | null;
+};
+type Props = {
+    activity: Activity;
+    class?: string;
+};
+declare const Activity: import("svelte").Component<Props, {}, "">;
+export default Activity;

package/dist/components/activity/index.d.ts

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

package/dist/components/activity/index.js

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

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/avatar/Avatar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import Tooltip from '../tooltip/Tooltip.svelte';
+	interface Props {
+		name: string | null | undefined;
+		size?: 'sm' | 'md';
+		showTooltip?: boolean;
+	}
+
+	let { name, size = 'md', showTooltip = true }: Props = $props();
+	const sizes = {
+		sm: 'h-6 w-6 min-w-6 text-xxs font-semibold tracking-wide',
+		md: 'h-8 w-8 min-w-8 text-xs font-semibold tracking-wide'
+	};
+
+	let sizeClassName = $derived(sizes[size]);
+
+	const getInitials = (name: string | null | undefined) => {
+		if (!name) {
+			return '?'; // You can use any default value here
+		}
+		// Check if the name is an email
+		const isEmail = name.includes('@');
+		if (isEmail) {
+			return name.slice(0, 2).toUpperCase();
+		}
+
+		// Split the name by space
+		const splitName = name.split(' ');
+
+		// Check if the name is a single word or already initials
+		if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
+			return name.slice(0, 2).toUpperCase();
+		}
+
+		// If the name is multiple words, use the first letter of the first and last word
+		const firstInitial = splitName[0][0];
+		const lastInitial = splitName[splitName.length - 1][0];
+
+		return (firstInitial + lastInitial).toUpperCase();
+	};
+	let initials = $derived(getInitials(name));
+</script>
+
+{#snippet avatar()}
+	<div
+		class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
+	>
+		{initials}
+	</div>
+{/snippet}
+
+{#if showTooltip}
+	<Tooltip>
+		{#snippet trigger()}
+			{@render avatar()}
+		{/snippet}
+		{#snippet content()}
+			<span>{name ? name : 'Unknown'}</span>
+		{/snippet}
+	</Tooltip>
+{:else}
+	{@render avatar()}
+{/if}

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

@@ -0,0 +1,8 @@
+interface Props {
+    name: string | null | undefined;
+    size?: 'sm' | 'md';
+    showTooltip?: boolean;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/avatar/index.d.ts

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

package/dist/components/avatar/index.js

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

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

@@ -0,0 +1,129 @@
+<script module lang="ts">
+	import { Icon } from '../icons';
+	import Banner from './Banner.svelte';
+	import Button from '../button/Button.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Banner,
+		title: 'Design System/Banner',
+		tags: ['autodocs']
+	});
+
+	let showBanner = $state(true);
+</script>
+
+<Story name="Well finding warning">
+	<Banner type="warning" closable={false}>
+		{#snippet icon()}
+			<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
+				href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
+				>check our documentation</a
+			>
+			or <a href="mailto:support@reshapebiotech.com">contact us</a>.
+		{/snippet}
+	</Banner>
+</Story>
+
+<Story name="No icon">
+	<Banner type="success">
+		{#snippet content()}
+			This banner has no icon.
+		{/snippet}
+	</Banner>
+</Story>
+
+<Story name="No toggle">
+	<Banner type="progress" closable={false}>
+		{#snippet icon()}
+			<Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
+		{/snippet}
+		{#snippet content()}
+			This banner has no toggle.
+		{/snippet}
+	</Banner>
+</Story>
+
+<Story name="Toggle back on">
+	<div class="h-28">
+		<Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
+		<br />
+		<br />
+
+		<Banner type="error" bind:show={showBanner}>
+			{#snippet icon()}
+				<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.
+			{/snippet}
+		</Banner>
+	</div>
+</Story>
+
+<Story name="Type variations">
+	<div class="space-y-4">
+		<div class="space-y-2">
+			<h4>Neutral</h4>
+			<Banner type="neutral">
+				{#snippet icon()}
+					<Icon size={20} iconName="Info" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "neutral" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Success</h4>
+			<Banner type="success">
+				{#snippet icon()}
+					<Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "success" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Progress</h4>
+			<Banner type="progress">
+				{#snippet icon()}
+					<Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "progress" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Warning</h4>
+			<Banner type="warning">
+				{#snippet icon()}
+					<Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "warning" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Error</h4>
+			<Banner type="error">
+				{#snippet icon()}
+					<Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is an "error" banner.
+				{/snippet}
+			</Banner>
+		</div>
+	</div>
+</Story>

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

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