@reshape-biotech/design-system 0.0.47 → 0.0.49

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { textColor, backgroundColor } from '../../../tokens';
+	import Chart from '../chart/Chart.svelte';
+	import type { EChartsOption } from 'echarts';
+	import { Duration } from 'luxon';
+
+	interface Groups {
+		key: string;
+		series: (number | null)[];
+	}
+
+	interface Props {
+		data: Groups[];
+		captureInterval?: number;
+		loading?: boolean;
+		xAxis?: string;
+		yAxis?: string;
+		height?: string;
+		width?: string;
+		xAxisOptions?: EChartsOption['xAxis'];
+		yAxisOptions?: EChartsOption['yAxis'];
+		onitemclick?: (params: echarts.ECElementEvent) => void;
+		onmouseover?: (params: echarts.ECElementEvent) => void;
+		onmouseout?: () => void;
+	}
+
+	const toFixedLocaleString = (
+		value?: number | undefined,
+		fractionDigits: number | undefined = 0,
+		locale: string | undefined = undefined
+	): string =>
+		value?.toLocaleString(locale, {
+			minimumFractionDigits: fractionDigits,
+			maximumFractionDigits: fractionDigits
+		}) ?? '';
+
+	let { data, xAxis, xAxisOptions, yAxis, yAxisOptions, captureInterval, ...props }: Props =
+		$props();
+
+	const longestSeries = data.reduce(
+		(acc: (number | null)[], group) => (group.series.length > acc.length ? group.series : acc),
+		[]
+	).length;
+
+	const captureIntervals = captureInterval
+		? Array(longestSeries)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
+	let options: EChartsOption = {
+		color: ['#5750EE', '#FF7100', '#50EEA6', '#E7EE50', '#EE5098'],
+		grid: {
+			top: 10,
+			bottom: 10,
+			left: 10,
+			right: 10,
+			containLabel: true
+		},
+		textStyle: {
+			color: textColor['secondary']
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			axisLine: {
+				onZero: false
+			},
+			name: xAxis,
+			data: captureIntervals,
+			...xAxisOptions
+		},
+		yAxis: {
+			type: 'value',
+			alignTicks: true,
+			axisLabel: {
+				formatter: (value: any) => value.toLocaleString()
+			} as any,
+			axisPointer: {
+				label: {
+					formatter: (value: any) => toFixedLocaleString(value.value, 2)
+				}
+			},
+			name: yAxis,
+			...yAxisOptions
+		},
+		selectedMode: 'multiple',
+		series: data.map((group) => ({
+			animation: false,
+			seriesLayoutBy: 'row',
+			emphasis: {
+				focus: 'series'
+			},
+			tooltip: {
+				show: false
+			},
+			type: 'line',
+			symbol: group.series.length > 1 ? 'none' : 'circle',
+			data: group.series
+		}))
+	};
+</script>
+
+<Chart {options} {...props} />

package/dist/components/graphs/multiline/MultiLineChart.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { EChartsOption } from 'echarts';
+interface Groups {
+    key: string;
+    series: (number | null)[];
+}
+interface Props {
+    data: Groups[];
+    captureInterval?: number;
+    loading?: boolean;
+    xAxis?: string;
+    yAxis?: string;
+    height?: string;
+    width?: string;
+    xAxisOptions?: EChartsOption['xAxis'];
+    yAxisOptions?: EChartsOption['yAxis'];
+    onitemclick?: (params: echarts.ECElementEvent) => void;
+    onmouseover?: (params: echarts.ECElementEvent) => void;
+    onmouseout?: () => void;
+}
+declare const MultiLineChart: import("svelte").Component<Props, {}, "">;
+type MultiLineChart = ReturnType<typeof MultiLineChart>;
+export default MultiLineChart;

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -0,0 +1,78 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Scatterplot from './Scatterplot.svelte';
+
+	const { Story } = defineMeta({
+		component: Scatterplot,
+		title: 'Design System/Graphs/Scatterplot',
+		tags: ['autodocs']
+	});
+
+	const data = [
+		[10.0, 8.04],
+		[8.07, 6.95],
+		[13.0, 7.58],
+		[9.05, 8.81],
+		[11.0, 8.33],
+		[14.0, 7.66],
+		[13.4, 6.81],
+		[10.0, 6.33],
+		[14.0, 8.96],
+		[12.5, 6.82],
+		[9.15, 7.2],
+		[11.5, 7.2],
+		[3.03, 4.23],
+		[12.2, 7.83],
+		[2.02, 4.47],
+		[1.05, 3.33],
+		[4.05, 4.96],
+		[6.03, 7.24],
+		[12.0, 6.26],
+		[12.0, 8.84],
+		[7.08, 5.82],
+		[5.02, 5.68]
+	];
+
+	const lineData = [0, 2, 4, 6, 8, 10, 12, 14];
+
+	function handleItemClick(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOver(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOut() {
+		console.log('mouse out');
+	}
+</script>
+
+<Story name="Base">
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			{data}
+			{lineData}
+			xAxis="Manual count"
+			yAxis="Analysis count"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Loading">
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			{data}
+			{lineData}
+			xAxis="Manual count"
+			yAxis="Analysis count"
+			loading
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte.d.ts

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

package/dist/components/graphs/scatterplot/Scatterplot.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { colors, textColor } from '../../../tokens';
+	import Chart from '../chart/Chart.svelte';
+	import type { EChartsOption } from 'echarts';
+
+	type Props = {
+		data: number[][];
+		lineData?: number[];
+		xAxis: string;
+		yAxis: string;
+		loading?: boolean;
+		xAxisOptions?: EChartsOption['xAxis'];
+		yAxisOptions?: EChartsOption['yAxis'];
+		onitemclick?: (params: echarts.ECElementEvent) => void;
+		onmouseover?: (params: echarts.ECElementEvent) => void;
+		onmouseout?: () => void;
+	};
+
+	const {
+		data,
+		xAxis,
+		yAxis,
+		loading = false,
+		onitemclick,
+		onmouseover,
+		onmouseout,
+		...props
+	}: Props = $props();
+
+	function handleClick(params: echarts.ECElementEvent) {
+		onitemclick?.(params);
+	}
+
+	let options: EChartsOption = {
+		xAxis: {
+			type: 'value',
+			name: xAxis,
+			...props.xAxisOptions
+		},
+		yAxis: {
+			type: 'value',
+			name: yAxis,
+			...props.yAxisOptions
+		},
+		series: [
+			{
+				symbolSize: 8,
+				data,
+				type: 'scatter',
+				itemStyle: {
+					color: colors.blue[5].default
+				}
+			},
+			{
+				type: 'line',
+				data: props.lineData,
+				lineStyle: {
+					type: 'dashed',
+					color: colors.blue[6]
+				},
+				showSymbol: false
+			}
+		]
+	};
+</script>
+
+<Chart {options} onitemclick={handleClick} {onmouseover} {onmouseout} {loading} />

package/dist/components/graphs/scatterplot/Scatterplot.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { EChartsOption } from 'echarts';
+type Props = {
+    data: number[][];
+    lineData?: number[];
+    xAxis: string;
+    yAxis: string;
+    loading?: boolean;
+    xAxisOptions?: EChartsOption['xAxis'];
+    yAxisOptions?: EChartsOption['yAxis'];
+    onitemclick?: (params: echarts.ECElementEvent) => void;
+    onmouseover?: (params: echarts.ECElementEvent) => void;
+    onmouseout?: () => void;
+};
+declare const Scatterplot: import("svelte").Component<Props, {}, "">;
+type Scatterplot = ReturnType<typeof Scatterplot>;
+export default Scatterplot;

package/dist/components/icon-button/IconButton.stories.svelte

@@ -0,0 +1,82 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import IconButton from '../icon-button/IconButton.svelte';
+	import { Icon } from '../icons';
+
+	const { Story } = defineMeta({
+		component: IconButton,
+		title: 'Design System/IconButton',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="primary">
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="secondary">
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="danger">
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="transparent">
+			<Icon iconName="Plus" />
+		</IconButton>
+	</div>
+</Story>
+
+<Story name="Sizes">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="secondary" size="xs">
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="secondary" size="sm">
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="secondary" size="md">
+			<Icon iconName="Plus" />
+		</IconButton>
+	</div>
+</Story>
+<Story name="Not rounded base">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="primary" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="secondary" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="danger" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="transparent" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+	</div>
+</Story>
+
+<Story name="Not rounded sizes">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="secondary" size="xs" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="secondary" size="sm" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+		<IconButton variant="secondary" size="md" rounded={false}>
+			<Icon iconName="Plus" />
+		</IconButton>
+	</div>
+</Story>
+<Story name="Disabled">
+	<IconButton disabled>
+		<Icon iconName="Plus" />
+	</IconButton>
+</Story>
+<Story name="Loading">
+	<IconButton loading>
+		<Icon iconName="Plus" />
+	</IconButton>
+</Story>

package/dist/components/icon-button/IconButton.stories.svelte.d.ts

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

package/dist/components/icon-button/IconButton.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Spinner } from '../spinner/';
+
+	type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
+	interface Props {
+		variant?: Variant;
+		type?: 'button' | 'submit' | 'reset' | null | undefined;
+		loading?: boolean;
+		disabled?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		children?: Snippet;
+		onclick?: (e: MouseEvent) => void;
+		tabindex?: number | undefined;
+		rounded?: boolean;
+	}
+
+	let {
+		variant = 'transparent',
+		type = 'button',
+		loading = false,
+		disabled = false,
+		size = 'sm',
+		children,
+		onclick,
+		tabindex,
+		rounded = true
+	}: Props = $props();
+
+	let sizeClass = $derived(`size-${size}`);
+	let variantClass = $derived(`color-${variant}`);
+</script>
+
+{#if disabled || loading}
+	<button
+		onclick={(e) => {
+			e.preventDefault();
+		}}
+		{type}
+		{disabled}
+		class="{sizeClass} {variantClass} disabled"
+		class:rounded
+	>
+		{#if loading}
+			<Spinner />
+		{:else}
+			{@render children?.()}
+		{/if}
+	</button>
+{:else}
+	<button {onclick} {type} {disabled} {tabindex} class="{sizeClass} {variantClass}" class:rounded>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	button {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.375rem;
+    transition-duration: 150ms
+}
+	.rounded {
+    border-radius: 9999px
+}
+	.disabled {
+    cursor: default
+}
+	.disabled:disabled {
+    background-color: #12192a0d;
+    --tw-text-opacity: 1;
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	.size-xs {
+    height: 1.5rem;
+    width: 1.5rem
+}
+
+	.size-xs :global(svg) {
+    height: 1rem;
+    width: 1rem
+}
+	.size-sm {
+    height: 2rem;
+    width: 2rem
+}
+	.size-sm :global(svg) {
+    height: 1rem;
+    width: 1rem
+}
+	.size-md {
+    height: 2.5rem;
+    width: 2.5rem
+}
+	.size-md :global(svg) {
+    height: 1.25rem;
+    width: 1.25rem
+}
+
+	.size-lg {
+    height: 3rem;
+    width: 3rem
+}
+
+	.size-lg :global(svg) {
+    height: 1.5rem;
+    width: 1.5rem
+}
+
+	.color-primary {
+    --tw-bg-opacity: 1;
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+	.color-primary:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
+}
+	.color-secondary {
+    background-color: #12192a0d;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.color-secondary:hover {
+    background-color: #12192A1A
+}
+	.color-transparent {
+    background-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(89 94 106 / var(--tw-text-opacity, 1))
+}
+	.color-transparent:hover {
+    background-color: #12192a0d;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.color-danger {
+    --tw-bg-opacity: 1;
+    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.color-danger:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+</style>

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
+interface Props {
+    variant?: Variant;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    tabindex?: number | undefined;
+    rounded?: boolean;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/icon-button/index.d.ts

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

package/dist/components/icon-button/index.js

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

package/dist/components/icons/AnalysisIcon.stories.svelte

@@ -0,0 +1,38 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import AnalysisIcon from './AnalysisIcon.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Icons/AnalysisIcon',
+		component: AnalysisIcon,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<AnalysisIcon model="large_colonies" />
+</Story>
+
+<Story name="Sizes">
+	<div class="flex flex-col gap-4">
+		<AnalysisIcon model="large_colonies" size="sm" withBackground />
+		<AnalysisIcon model="large_colonies" size="md" withBackground />
+		<AnalysisIcon model="large_colonies" size="lg" withBackground />
+		<AnalysisIcon model="large_colonies" size="sm" />
+		<AnalysisIcon model="large_colonies" size="md" />
+		<AnalysisIcon model="large_colonies" size="lg" />
+	</div>
+</Story>
+
+<Story name="Halo">
+	<AnalysisIcon model="halos" />
+</Story>
+
+<Story name="Small colonies">
+	<AnalysisIcon model="small_colonies" />
+</Story>
+
+<Story name="With background">
+	<AnalysisIcon model="halos" withBackground />
+</Story>

package/dist/components/icons/AnalysisIcon.stories.svelte.d.ts

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