@reshape-biotech/design-system 0.0.47 → 0.0.48

package/dist/components/dropdown/components/DropdownTrigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	interface Props {
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		variant?: Color;
+		children?: Snippet;
+		noPadding?: boolean;
+		iconButton?: boolean;
+	}
+	let {
+		size = 'md',
+		class: className = '',
+		variant = 'primary',
+		children,
+		noPadding = false,
+		iconButton = false
+	}: Props = $props();
+
+	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+
+	const sizes = $derived({
+		sm: `h-8 ${noPadding ? 'px-0' : iconButton ? 'px-2' : 'px-3'} ${noPadding ? 'py-0' : iconButton ? 'py-2' : 'py-3'}`,
+		md: 'h-10 px-5 py-3',
+		lg: 'h-12 px-6 py-4'
+	});
+
+	const colors: Record<Color, string> = {
+		primary:
+			'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover disabled:bg-neutral disabled:text-tertiary',
+		secondary:
+			'bg-neutral text-primary hover:bg-neutral-hover disabled:bg-neutral disabled:text-tertiary',
+		transparent:
+			'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
+		danger:
+			'bg-danger text-primary-inverse hover:bg-danger-hover disabled:bg-neutral disabled:text-tertiary'
+	};
+</script>
+
+<div
+	role="button"
+	tabindex="0"
+	class={`inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 ${colors[variant]} ${sizes[size]} ${className}`}
+>
+	{@render children?.()}
+</div>

package/dist/components/dropdown/components/DropdownTrigger.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    variant?: Color;
+    children?: Snippet;
+    noPadding?: boolean;
+    iconButton?: boolean;
+}
+declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
+type DropdownTrigger = ReturnType<typeof DropdownTrigger>;
+export default DropdownTrigger;

package/dist/components/dropdown/components/OutlinedButton.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div role="button" tabindex="0" class={`${className}`}>{@render children()}</div>
+
+<style>
+	div {
+
+    display: flex;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    gap: 0.25rem;
+
+    border-radius: 0.5rem;
+
+    border-width: 1px;
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding: 0.75rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
+
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+	div:not(:focus-within):hover {
+
+    border-color: #5750ee40
+}
+
+	div:focus-within {
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
+</style>

package/dist/components/dropdown/components/OutlinedButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children: Snippet;
+}
+declare const OutlinedButton: import("svelte").Component<Props, {}, "">;
+type OutlinedButton = ReturnType<typeof OutlinedButton>;
+export default OutlinedButton;

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

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

package/dist/components/dropdown/index.js

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

package/dist/components/empty-content/EmptyContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		icon: Snippet;
+		children: Snippet;
+	};
+
+	const { icon, children }: Props = $props();
+</script>
+
+<div class="flex w-full justify-center">
+	<div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
+		{@render icon()}
+		<div class="flex w-full flex-col items-center justify-center gap-2">
+			{@render children()}
+		</div>
+	</div>
+</div>

package/dist/components/empty-content/EmptyContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    icon: Snippet;
+    children: Snippet;
+};
+declare const EmptyContent: import("svelte").Component<Props, {}, "">;
+type EmptyContent = ReturnType<typeof EmptyContent>;
+export default EmptyContent;

package/dist/components/graphs/chart/Chart.stories.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Chart from './Chart.svelte';
+	import { colors } from '../../../tokens';
+
+	const { Story } = defineMeta({
+		component: Chart,
+		title: 'Design System/Graphs/Chart',
+		tags: ['autodocs']
+	});
+</script>
+
+<script lang="ts">
+	const baseOptions = {
+		xAxis: { type: 'value' as const },
+		yAxis: { type: 'value' as const },
+		series: [
+			{
+				type: 'scatter' as const,
+				data: [
+					[10, 8.04],
+					[8.07, 6.95],
+					[13.0, 7.58]
+				]
+			}
+		]
+	};
+
+	const lineOptions = {
+		xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
+		yAxis: { type: 'value' as const },
+		series: [
+			{
+				type: 'line' as const,
+				data: [150, 230, 224, 218, 135]
+			}
+		]
+	};
+
+	function handleClick(params: any) {
+		console.log('Clicked:', params);
+	}
+</script>
+
+<!-- Basic Usage -->
+<Story name="Default">
+	<Chart options={baseOptions} />
+</Story>
+
+<!-- Custom Size -->
+<Story name="Custom Size">
+	<Chart options={baseOptions} width="600px" height="400px" />
+</Story>
+
+<!-- Loading State -->
+<Story name="Loading State">
+	<Chart options={baseOptions} loading={true} />
+</Story>
+
+<!-- With Events -->
+<Story name="With Click Events">
+	<Chart
+		options={baseOptions}
+		onitemclick={handleClick}
+		onmouseover={(params) => console.log('Hover:', params)}
+	/>
+</Story>
+
+<!-- Different Chart Types -->
+<Story name="Line Chart">
+	<Chart options={lineOptions} />
+</Story>
+
+<!-- Theme Example -->
+<Story name="Dark Theme">
+	<div style="background: #333; padding: 20px;">
+		<Chart
+			options={{
+				...baseOptions,
+				backgroundColor: '#333',
+				textStyle: { color: '#fff' }
+			}}
+			theme={{
+				textStyle: { color: '#fff' },
+				color: [colors.blue[5].default]
+			}}
+		/>
+	</div>
+</Story>
+
+<!-- Responsive Example -->
+<Story name="Responsive">
+	<div
+		style="resize: both; overflow: auto; min-width: 300px; min-height: 200px; border: 1px solid #ccc;"
+	>
+		<Chart options={baseOptions} autoResize={true} />
+	</div>
+</Story>
+
+<!-- Multiple Series -->
+<Story name="Multiple Series">
+	<Chart
+		options={{
+			...baseOptions,
+			series: [
+				{
+					type: 'scatter' as const,
+					data: [
+						[10, 8.04],
+						[8.07, 6.95],
+						[13.0, 7.58]
+					],
+					name: 'Series 1'
+				},
+				{
+					type: 'scatter' as const,
+					data: [
+						[9, 7.5],
+						[7.5, 6.3],
+						[12.5, 7.0]
+					],
+					name: 'Series 2'
+				}
+			],
+			legend: { data: ['Series 1', 'Series 2'] }
+		}}
+	/>
+</Story>

package/dist/components/graphs/chart/Chart.stories.svelte.d.ts

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

package/dist/components/graphs/chart/Chart.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import * as echarts from 'echarts';
+	import type { ECElementEvent } from 'echarts';
+	import { onMount } from 'svelte';
+	import { colors, textColor } from '../../../tokens';
+	type Props = {
+		options: echarts.EChartsOption;
+		theme?: string | object;
+		renderer?: 'canvas' | 'svg';
+		height?: string;
+		width?: string;
+		// Common event handlers
+		onitemclick?: (params: ECElementEvent) => void;
+		onmouseover?: (params: ECElementEvent) => void;
+		onmouseout?: () => void;
+		// Additional options
+		autoResize?: boolean;
+		loading?: boolean;
+	};
+
+	const {
+		options,
+		theme,
+		renderer = 'svg',
+		height = '100%',
+		width = '100%',
+		onitemclick,
+		onmouseover,
+		onmouseout,
+		autoResize = true,
+		loading = false
+	}: Props = $props();
+
+	let chart = $state<echarts.ECharts | null>(null);
+	let container: HTMLElement;
+
+	function deepMerge(target: any, source: any) {
+		for (const key in source) {
+			if (source[key] instanceof Object && key in target) {
+				deepMerge(target[key], source[key]);
+			} else {
+				target[key] = source[key];
+			}
+		}
+		return target;
+	}
+
+	const defaultOptions = {
+		grid: {
+			left: '48px',
+			right: '16px',
+			top: '16px',
+			bottom: '48px'
+		},
+		xAxis: {
+			nameLocation: 'middle',
+			nameGap: 32,
+			axisLabel: {
+				fontSize: 10,
+				lineHeight: 14,
+				align: 'center',
+				fontWeight: 450,
+				color: textColor.secondary,
+				margin: 16,
+				fontFamily: 'monospace'
+			},
+			axisLine: {
+				lineStyle: {
+					color: colors.gray[2]
+				}
+			},
+			nameTextStyle: {
+				fontSize: 12,
+				color: textColor.secondary
+			}
+		},
+		yAxis: {
+			nameLocation: 'middle',
+			nameGap: 32,
+			nameRotate: 90,
+			axisLabel: {
+				fontSize: 10,
+				lineHeight: 14,
+				align: 'center',
+				fontWeight: 450,
+				color: textColor.secondary,
+				margin: 16,
+				fontFamily: 'monospace'
+			},
+			axisLine: {
+				lineStyle: {
+					color: colors.gray[2]
+				}
+			},
+			nameTextStyle: {
+				fontSize: 12,
+				color: textColor.secondary
+			}
+		}
+	} as const;
+
+	const finalOptions = deepMerge(structuredClone(defaultOptions), options);
+
+	function initChart() {
+		if (container) {
+			chart = echarts.init(container, theme, { renderer });
+			chart.setOption(finalOptions);
+
+			if (onitemclick) chart.on('click', onitemclick);
+			if (onmouseover) chart.on('mouseover', onmouseover);
+			if (onmouseout) chart.on('mouseout', onmouseout);
+
+			if (loading) chart.showLoading();
+		}
+	}
+
+	$effect(() => {
+		if (loading) {
+			chart?.showLoading();
+		} else {
+			chart?.hideLoading();
+		}
+	});
+
+	onMount(() => {
+		initChart();
+
+		if (autoResize) {
+			const resizeObserver = new ResizeObserver(() => chart?.resize());
+			resizeObserver.observe(container);
+			return () => {
+				resizeObserver.disconnect();
+				chart?.dispose();
+			};
+		}
+	});
+</script>
+
+<div bind:this={container} style="width: {width}; height: {height};" class="chart-container"></div>
+
+<style>
+	.chart-container {
+		position: relative;
+	}
+</style>

package/dist/components/graphs/chart/Chart.svelte.d.ts

@@ -0,0 +1,17 @@
+import * as echarts from 'echarts';
+import type { ECElementEvent } from 'echarts';
+type Props = {
+    options: echarts.EChartsOption;
+    theme?: string | object;
+    renderer?: 'canvas' | 'svg';
+    height?: string;
+    width?: string;
+    onitemclick?: (params: ECElementEvent) => void;
+    onmouseover?: (params: ECElementEvent) => void;
+    onmouseout?: () => void;
+    autoResize?: boolean;
+    loading?: boolean;
+};
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

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

@@ -0,0 +1,4 @@
+export { default as Scatterplot } from './scatterplot/Scatterplot.svelte';
+export { default as Chart } from './chart/Chart.svelte';
+export { default as LineChart } from './line/LineChart.svelte';
+export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';

package/dist/components/graphs/index.js

@@ -0,0 +1,4 @@
+export { default as Scatterplot } from './scatterplot/Scatterplot.svelte';
+export { default as Chart } from './chart/Chart.svelte';
+export { default as LineChart } from './line/LineChart.svelte';
+export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -0,0 +1,73 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import LineChart from './LineChart.svelte';
+
+	const { Story } = defineMeta({
+		component: LineChart,
+		title: 'Design System/Graphs/LineChart',
+		tags: ['autodocs']
+	});
+
+	const xAxis = '€€€';
+	const yAxis = '$$$';
+
+	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.6
+	];
+
+	const bigData = Array.from({ length: 1000 }, (_, i) => i);
+
+	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">
+		<LineChart
+			{xAxis}
+			{yAxis}
+			{data}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Loading">
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxis}
+			{yAxis}
+			{data}
+			loading
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Large datasets with capture intervals">
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxis}
+			{yAxis}
+			data={bigData}
+			captureInterval={1000}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>

package/dist/components/graphs/line/LineChart.stories.svelte.d.ts

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

package/dist/components/graphs/line/LineChart.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { textColor, backgroundColor } from '../../../tokens';
+	import Chart from '../chart/Chart.svelte';
+	import type { EChartsOption } from 'echarts';
+	import { Duration } from 'luxon';
+
+	interface Props {
+		data: (number | null)[];
+		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 captureIntervals = captureInterval
+		? Array(data.length)
+				.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;
+
+	$effect(() => {
+		console.log(captureIntervals);
+	});
+
+	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: {
+			animation: false,
+			seriesLayoutBy: 'row',
+			emphasis: {
+				focus: 'series'
+			},
+			tooltip: {
+				show: false
+			},
+			type: 'line',
+			symbol: data.length > 1 ? 'none' : 'circle',
+			data
+		}
+	};
+</script>
+
+<Chart {options} {...props} />