@reshape-biotech/design-system 0.0.22 → 0.0.24

package/dist/components/select/Select.svelte

@@ -0,0 +1,137 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot overwrite a zero-length range – use appendLeft or prependRight instead -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<script lang="ts">
+	import { backgroundColor, textColor } from 'design-system/tokens';
+	import { CaretDown, X } from 'phosphor-svelte';
+	import { createEventDispatcher } from 'svelte';
+	let className = '';
+	export { className as class };
+	import SvelteSelect from 'svelte-select';
+	import type { ItemProps } from '.';
+
+	// Docs: https://github.com/rob-balfre/svelte-select
+
+	const dispatch = createEventDispatcher();
+
+	export let items: ItemProps[] = [];
+	export let id: string | undefined = undefined;
+	export let value: ItemProps | ItemProps[] | null = null;
+	export let searchable = false;
+	export let listOpen = false;
+	export let placeholder: string | undefined = undefined;
+	export let disabled = false;
+	export let hasError = false;
+	export let withGroup = false;
+	export let multiple = false;
+	export let clearable = true;
+	export let required = false;
+	export let onChange: (value: ItemProps | ItemProps[]) => void = () => {};
+
+	const groupBy = withGroup ? (item: ItemProps) => item.group : undefined;
+</script>
+
+<SvelteSelect
+	{items}
+	{searchable}
+	{placeholder}
+	{disabled}
+	{id}
+	{hasError}
+	{multiple}
+	{clearable}
+	{groupBy}
+	on:select={(e) => dispatch('change', e.detail)}
+	on:input={(e) => dispatch('input', e.detail)}
+	on:change={(e) => {
+		dispatch('change', e.detail);
+		onChange(e.detail);
+	}}
+	class={`select ${className}`}
+	{required}
+	bind:value
+	bind:listOpen
+	showChevron={true}
+	floatingConfig={{
+		placement: 'bottom'
+	}}
+	createGroupHeaderItem={(groupValue) => {
+		return {
+			value: groupValue,
+			label: groupValue
+		};
+	}}
+	--group-title-border-style="1px solid black"
+	--group-item-padding-left="1rem"
+	--item-height="100%"
+	--group-title-color={textColor['secondary']}
+	--group-title-font-size="0.75rem"
+	--group-title-font-weight="400"
+	--group-title-text-transform="none"
+	--placeholder-color={textColor['secondary']}
+	--item-is-active-bg={backgroundColor['accent']}
+	--item-is-active-color={textColor['primary']}
+	--item-hover-bg={backgroundColor['neutral']}
+	--border="0"
+	--border-hover="0"
+	--border-focused="0"
+>
+	<div slot="chevron-icon" class="">
+		<CaretDown weight="bold" size="1rem" />
+	</div>
+
+	<div slot="selection" let:selection>
+		{#if $$slots['custom-selection']}
+			<slot name="custom-selection" {selection} />
+		{:else}
+			{selection.label}
+		{/if}
+	</div>
+
+	<div slot="clear-icon">
+		<X weight="bold" size="1rem" />
+	</div>
+
+	<div slot="item" let:item let:index class="flex">
+		<div class="relative flex flex-1 justify-between">
+			{#if $$slots['custom-item']}
+				<slot name="custom-item" {item} {index} />
+			{:else}
+				<div class="flex h-full flex-1 items-center text-ellipsis whitespace-nowrap">
+					<p>{item.label}</p>
+				</div>
+			{/if}
+		</div>
+		<slot />
+	</div></SvelteSelect
+>
+
+<style>
+	:global(.svelte-select.focused) {
+		outline: 1px solid var(--colors-gray-1) !important;
+	}
+
+	:global(.svelte-select) {
+		box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.02);
+		width: 100%;
+	}
+
+	:global(.svelte-select .item.active) {
+		background-color: #5750ee1A;
+}
+
+	:global(.svelte-select .list-item:not(:first-of-type) > .list-group-title) {
+		padding-top: 0.5rem;
+}
+
+	:global(.svelte-select .list-item:not(:first-of-type) > .list-group-title)::before {
+		position: relative;
+		bottom: 0px;
+		left: 0px;
+		clear: both;
+		display: block;
+		border-top-width: 1px;
+		border-color: #12192A26;
+		--tw-content: '';
+		content: var(--tw-content);
+}
+</style>

package/dist/components/select/Select.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { ItemProps } from '.';
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    items?: ItemProps[];
+    id?: string | undefined;
+    value?: ItemProps | ItemProps[] | null;
+    searchable?: boolean;
+    listOpen?: boolean;
+    placeholder?: string | undefined;
+    disabled?: boolean;
+    hasError?: boolean;
+    withGroup?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    required?: boolean;
+    onChange?: (value: ItemProps | ItemProps[]) => void;
+}, {
+    'custom-selection': {
+        selection: any;
+    };
+    'custom-item': {
+        item: any;
+        index: any;
+    };
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+    input: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'custom-selection': {
+        selection: any;
+    };
+    'custom-item': {
+        item: any;
+        index: any;
+    };
+    default: {};
+}, {}, string>;
+type Select = InstanceType<typeof Select>;
+export default Select;

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

@@ -0,0 +1,6 @@
+export type ItemProps = {
+    value: string;
+    label: string;
+    description?: string;
+    group?: string;
+};

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export {};

package/dist/components/skeleton-loader/HorizontalCardSkeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import SkeletonLoader from './SkeletonLoader.svelte';
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [withImage]
+	 */
+
+	/** @type {Props} */
+	let { withImage = true } = $props();
+</script>
+
+<SkeletonLoader class="h-full w-full rounded-lg bg-surface shadow-field">
+	{#snippet children({ Skeleton, SkeletonImage })}
+		<div class="flex h-full gap-4" class:px-4={!withImage}>
+			{#if withImage}
+				<!-- TODO: BG color is to match design, but we want to change the color, therefore not a token -->
+				<Skeleton class="h-full w-[160px] rounded-e-none rounded-s-lg bg-[#D9E6E9]">
+					<SkeletonImage />
+				</Skeleton>
+			{/if}
+			<div class="flex flex-1 flex-col justify-between py-3">
+				<Skeleton class="h-6 w-2/5" />
+				<Skeleton class="h-[1px] w-full" />
+				<div class="flex gap-2">
+					<Skeleton class="h-4 w-2/5" />
+					<Skeleton class="h-4 w-2/5" />
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</SkeletonLoader>

package/dist/components/skeleton-loader/HorizontalCardSkeleton.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const HorizontalCardSkeleton: import("svelte").Component<{
+    withImage?: boolean;
+}, {}, "">;
+type HorizontalCardSkeleton = ReturnType<typeof HorizontalCardSkeleton>;
+export default HorizontalCardSkeleton;

package/dist/components/skeleton-loader/ProjectCardSkeleton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import SkeletonLoader from './SkeletonLoader.svelte';
+</script>
+
+<SkeletonLoader>
+	{#snippet children({ Skeleton })}
+		<div class="flex h-44 flex-1 flex-col gap-4 rounded-lg bg-surface p-4 shadow-field">
+			<Skeleton class="h-4 w-1/2 " />
+			<Skeleton class="h-20 w-full" />
+		</div>
+	{/snippet}
+</SkeletonLoader>

package/dist/components/skeleton-loader/ProjectCardSkeleton.svelte.d.ts

@@ -0,0 +1,18 @@
+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 ProjectCardSkeleton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProjectCardSkeleton = InstanceType<typeof ProjectCardSkeleton>;
+export default ProjectCardSkeleton;

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte

@@ -0,0 +1,71 @@
+<script module>
+	import SkeletonLoader from './index';
+	import { HorizontalCardSkeleton, StatcardSkeleton, ProjectCardSkeleton } from './index';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: SkeletonLoader,
+		title: 'Design System/SkeletonLoader'
+	});
+</script>
+
+<Story name="Primary">
+	<SkeletonLoader class="h-[20px] w-[200px]">
+		{#snippet children({ Skeleton })}
+			<Skeleton class="h-full w-full" />
+		{/snippet}
+	</SkeletonLoader>
+</Story>
+
+<Story name="ImagePlaceholder">
+	<SkeletonLoader class="h-[100px] w-[500px]">
+		{#snippet children({ Skeleton, SkeletonImage })}
+			<div class="flex h-full gap-2">
+				<Skeleton class="flex h-full w-[160px] items-center justify-center">
+					<SkeletonImage />
+				</Skeleton>
+				<div class="flex flex-1 flex-col gap-2">
+					<Skeleton class="flex h-[20px] w-full" />
+					<Skeleton class="flex h-[20px] w-full" />
+					<Skeleton class="flex h-[20px] w-full" />
+					<Skeleton class="flex h-[20px] w-full" />
+				</div>
+			</div>
+		{/snippet}
+	</SkeletonLoader>
+</Story>
+
+<Story name="HorizontalCardWithIcon">
+	<div class="flex w-[900px] flex-col gap-4">
+		<HorizontalCardSkeleton />
+		<HorizontalCardSkeleton />
+		<HorizontalCardSkeleton />
+		<HorizontalCardSkeleton />
+	</div>
+</Story>
+<Story name="HorizontalCardWithoutIcon">
+	<div class="flex w-[900px] flex-col gap-4">
+		<HorizontalCardSkeleton withImage={false} />
+		<HorizontalCardSkeleton withImage={false} />
+		<HorizontalCardSkeleton withImage={false} />
+		<HorizontalCardSkeleton withImage={false} />
+	</div>
+</Story>
+<Story name="StatCard">
+	<div class="flex w-[900px] gap-4">
+		<StatcardSkeleton />
+		<StatcardSkeleton />
+		<StatcardSkeleton />
+	</div>
+</Story>
+
+<Story name="ProjectCard">
+	<div class="grid grid-cols-2 justify-start gap-2">
+		<ProjectCardSkeleton />
+		<ProjectCardSkeleton />
+		<ProjectCardSkeleton />
+		<ProjectCardSkeleton />
+		<ProjectCardSkeleton />
+		<ProjectCardSkeleton />
+	</div>
+</Story>

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte.d.ts

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Skeleton from './components/Skeleton.svelte';
+	import SkeletonImage from './components/SkeletonImage.svelte';
+
+	interface Props {
+		class?: string;
+		dataTestId?: string;
+		children?: Snippet<[any]>;
+	}
+
+	let { class: className = '', dataTestId = '', children }: Props = $props();
+</script>
+
+<div role="status" class={`h-full w-full animate-pulse ${className}`} data-testid={dataTestId}>
+	{@render children?.({ Skeleton, SkeletonImage })}
+</div>

package/dist/components/skeleton-loader/SkeletonLoader.svelte.d.ts

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

package/dist/components/skeleton-loader/StatcardSkeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import SkeletonLoader from './SkeletonLoader.svelte';
+</script>
+
+<SkeletonLoader>
+	{#snippet children({ Skeleton })}
+		<div
+			class="flex h-24 flex-1 flex-col justify-between gap-2 rounded-lg bg-surface p-4 shadow-field"
+		>
+			<Skeleton class="h-4 w-1/2 "></Skeleton>
+			<div class="flex items-baseline gap-2">
+				<Skeleton class="h-8 w-8 " />
+				<Skeleton class="h-4 w-16 " />
+			</div>
+		</div>
+	{/snippet}
+</SkeletonLoader>

package/dist/components/skeleton-loader/StatcardSkeleton.svelte.d.ts

@@ -0,0 +1,18 @@
+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 StatcardSkeleton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type StatcardSkeleton = InstanceType<typeof StatcardSkeleton>;
+export default StatcardSkeleton;

package/dist/components/skeleton-loader/components/Skeleton.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class={`bg-neutral ${className}`}>
+	{@render children?.()}
+</div>

package/dist/components/skeleton-loader/components/Skeleton.svelte.d.ts

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

package/dist/components/skeleton-loader/components/SkeletonImage.svelte

@@ -0,0 +1,14 @@
+<svg width="100%" height="100%" viewBox="0 0 160 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M71 46.4792C67.1348 46.4792 64 43.3117 64 39.4062C64 35.5008 67.1348 32.3333 71 32.3333C74.8652 32.3333 78 35.5008 78 39.4062C78.0045 43.3117 74.8697 46.4792 71 46.4792Z"
+		fill="#FFFFFF"
+	/>
+	<path
+		d="M89 46.4792C85.1348 46.4792 82 43.3117 82 39.4062C82 35.5008 85.1348 32.3333 89 32.3333C92.8652 32.3333 96 35.5008 96 39.4062C96.0045 43.3117 92.8697 46.4792 89 46.4792Z"
+		fill="#FFFFFF"
+	/>
+	<path
+		d="M64 57.5937C64 53.6883 67.1348 50.5208 71 50.5208C74.8652 50.5208 78 53.6883 78 57.5937C78 61.4992 74.8652 64.6667 71 64.6667C67.1348 64.6667 64 61.4992 64 57.5937Z"
+		fill="#FFFFFF"
+	/>
+</svg>

package/dist/components/skeleton-loader/components/SkeletonImage.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SkeletonImage;
+type SkeletonImage = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SkeletonImage: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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/skeleton-loader/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './SkeletonLoader.svelte';
+export { default as HorizontalCardSkeleton } from './HorizontalCardSkeleton.svelte';
+export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
+export { default as ProjectCardSkeleton } from './ProjectCardSkeleton.svelte';
+export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/skeleton-loader/index.js

@@ -0,0 +1,5 @@
+export { default } from './SkeletonLoader.svelte';
+export { default as HorizontalCardSkeleton } from './HorizontalCardSkeleton.svelte';
+export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
+export { default as ProjectCardSkeleton } from './ProjectCardSkeleton.svelte';
+export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/slider/Slider.stories.svelte

@@ -0,0 +1,37 @@
+<script module>
+	import Slider from './Slider.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Slider,
+		title: 'Design System/Slider',
+		tags: ['autodocs']
+	});
+
+	let value = 3;
+</script>
+
+<Story name="Default">
+	Value: {value + 1}
+	<Slider bind:value bind:buffer={value} max={4}></Slider>
+</Story>
+<Story name="Playback Controls Running Job">
+	Value: {value + 1}
+	<Slider bind:value buffer={35} max={49} bufferColorClass="bg-warning-inverse"></Slider>
+</Story>
+<Story name="Modern stepStyle">
+	Value: {value + 1}
+	<Slider bind:value bind:buffer={value} max={4} showSteps={true}></Slider>
+</Story>
+<Story name="Create Job Capture Interval">
+	Value: {value + 1}
+	<Slider
+		bind:value
+		max={6}
+		showSteps={true}
+		buffer={2}
+		bufferMin={1}
+		bufferColorClass="bg-danger-inverse"
+	></Slider>
+</Story>

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

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