@reshape-biotech/design-system 0.0.47 → 0.0.49

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -0,0 +1,393 @@
+<script module lang="ts">
+	import StatusBadge from '../status-badge/StatusBadge.svelte';
+	import Tooltip from '../tooltip/Tooltip.svelte';
+	import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Icon } from '../icons';
+
+	const { Story } = defineMeta({
+		component: StatusBadge,
+		title: 'Design System/StatusBadge',
+		tags: ['autodocs']
+	});
+
+	let calculated_progress = 32;
+</script>
+
+<Story name="Neutral">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-4">
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<Icon iconName="SpinnerGap" />
+				{/snippet}
+				{#snippet content()}
+					<div>Pending</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<Icon iconName="SpinnerGap" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<Icon iconName="Moon" />
+				{/snippet}
+				{#snippet content()}
+					<div>Idle</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral">
+				{#snippet icon()}
+					<Icon iconName="Moon" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-10">
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<Icon iconName="SpinnerGap" />
+				{/snippet}
+				{#snippet content()}
+					<div>Pending</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<Icon iconName="SpinnerGap" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<Icon iconName="Moon" />
+				{/snippet}
+				{#snippet content()}
+					<div>Idle</div>
+				{/snippet}
+			</StatusBadge>
+			<StatusBadge type="neutral" size="sm">
+				{#snippet icon()}
+					<Icon iconName="Moon" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+</Story>
+
+<Story name="Success">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-4">
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<div>
+						<StatusBadge type="success">
+							{#snippet icon()}
+								<Icon iconName="CheckCircle" />
+							{/snippet}
+							{#snippet content()}
+								<div>Completed</div>
+							{/snippet}
+						</StatusBadge>
+					</div>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job completed</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success">
+				{#snippet icon()}
+					<Icon iconName="CheckCircle" weight="fill" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<div>
+						<StatusBadge type="success">
+							{#snippet icon()}
+								<Icon iconName="StopCircle" />
+							{/snippet}
+							{#snippet content()}
+								<div>Stopped</div>
+							{/snippet}
+						</StatusBadge>
+					</div>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job stopped</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success">
+				{#snippet icon()}
+					<Icon iconName="StopCircle" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-10">
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<StatusBadge type="success" size="sm">
+						{#snippet icon()}
+							<Icon iconName="CheckCircle" weight="fill" />
+						{/snippet}
+						{#snippet content()}
+							<div>Completed</div>
+						{/snippet}
+					</StatusBadge>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job completed</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success" size="sm">
+				{#snippet icon()}
+					<Icon iconName="CheckCircle" weight="fill" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+		<div class="flex flex-row gap-1">
+			<Tooltip>
+				{#snippet trigger()}
+					<StatusBadge type="success" size="sm">
+						{#snippet icon()}
+							<Icon iconName="StopCircle" />
+						{/snippet}
+						{#snippet content()}
+							<div>Stopped</div>
+						{/snippet}
+					</StatusBadge>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col text-left">
+						<p class="font-bold">Job stopped</p>
+						<p class="text-xs">8/30/2024, 11:07 AM</p>
+					</div>
+				{/snippet}
+			</Tooltip>
+			<StatusBadge type="success" size="sm">
+				{#snippet icon()}
+					<Icon iconName="StopCircle" />
+				{/snippet}
+			</StatusBadge>
+		</div>
+	</div>
+</Story>
+
+<Story name="Progress">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="progress">
+					{#snippet icon()}
+						<ProgressCircle progress={calculated_progress} size="md" />
+					{/snippet}
+					{#snippet content()}
+						<div>Running</div>
+					{/snippet}
+					{#snippet progress()}
+						<div>{calculated_progress}%</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job running</p>
+					<p class="text-xs">1d 3h 2m left</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="progress">
+			{#snippet icon()}
+				<ProgressCircle progress={calculated_progress} size="md" />
+			{/snippet}
+			{#snippet progress()}
+				<div>{calculated_progress}%</div>
+			{/snippet}
+		</StatusBadge>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="progress" size="sm">
+					{#snippet icon()}
+						<ProgressCircle progress={calculated_progress} size="sm" />
+					{/snippet}
+					{#snippet content()}
+						<div>Running</div>
+					{/snippet}
+					{#snippet progress()}
+						<div>{calculated_progress}%</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job running</p>
+					<p class="text-xs">1d 3h 2m left</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="progress" size="sm">
+			{#snippet icon()}
+				<ProgressCircle progress={calculated_progress} size="sm" />
+			{/snippet}
+			{#snippet progress()}
+				<div>{calculated_progress}%</div>
+			{/snippet}
+		</StatusBadge>
+	</div>
+</Story>
+
+<Story name="Warning">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="warning">
+					{#snippet icon()}
+						<Icon iconName="WifiSlash" />
+					{/snippet}
+					{#snippet content()}
+						<div>Offline</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Device is offline</p>
+					<p class="text-xs">Connect to the internet to start a Job</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="warning">
+			{#snippet icon()}
+				<Icon iconName="WifiSlash" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="warning" size="sm">
+					{#snippet icon()}
+						<Icon iconName="WifiSlash" />
+					{/snippet}
+					{#snippet content()}
+						<div>Offline</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Device is offline</p>
+					<p class="text-xs">Connect to the internet to start a Job</p>
+				</div>
+			{/snippet}
+		</Tooltip>
+
+		<StatusBadge type="warning" size="sm">
+			{#snippet icon()}
+				<Icon iconName="WifiSlash" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+</Story>
+
+<Story name="Error">
+	<p class="font-mono text-xs">Medium:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="error">
+					{#snippet icon()}
+						<Icon iconName="WarningCircle" weight="fill" />
+					{/snippet}
+					{#snippet content()}
+						<div>Failed</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job failed</p>
+					<p class="text-xs">8/30/2024, 11:07 AM</p>
+				</div>
+			{/snippet}</Tooltip
+		>
+
+		<StatusBadge type="error">
+			{#snippet icon()}
+				<Icon iconName="WarningCircle" weight="fill" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+	<br />
+	<p class="font-mono text-xs">Small:</p>
+	<div class="flex flex-row gap-1">
+		<Tooltip>
+			{#snippet trigger()}
+				<StatusBadge type="error" size="sm">
+					{#snippet icon()}
+						<Icon iconName="WarningCircle" weight="fill" />
+					{/snippet}
+					{#snippet content()}
+						<div>Failed</div>
+					{/snippet}
+				</StatusBadge>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col text-left">
+					<p class="font-bold">Job failed</p>
+					<p class="text-xs">8/30/2024, 11:07 AM</p>
+				</div>
+			{/snippet}</Tooltip
+		>
+
+		<StatusBadge type="error" size="sm">
+			{#snippet icon()}
+				<Icon iconName="WarningCircle" weight="fill" />
+			{/snippet}
+		</StatusBadge>
+	</div>
+</Story>
+
+<Story name="Icon only">
+	<StatusBadge type="neutral" iconOnly>
+		{#snippet icon()}
+			<Icon iconName="SpinnerGap" />
+		{/snippet}
+	</StatusBadge>
+</Story>

package/dist/components/status-badge/StatusBadge.stories.svelte.d.ts

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

package/dist/components/status-badge/StatusBadge.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		// we can add dynamic classes because they are safelisted in tailwind-safelist.txt
+		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+		size?: 'md' | 'sm';
+		content?: Snippet;
+		progress?: Snippet;
+		icon?: Snippet;
+		iconOnly?: boolean;
+	}
+
+	let {
+		type = 'neutral',
+		size = 'md',
+		content,
+		progress,
+		icon,
+		iconOnly: propIconOnly = false
+	}: Props = $props();
+
+	let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
+</script>
+
+<div
+	class={`badge badge-${type} badge-${size}`}
+	class:badge-icon-only={iconOnly}
+	data-testid="status-badge"
+>
+	<div class={`icon`}>
+		{@render icon?.()}
+	</div>
+	<div class="gap-2">
+		{@render content?.()}
+		{@render progress?.()}
+	</div>
+</div>
+
+<style>
+	.badge {
+    gap: 0.5rem;
+    border-style: none;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.badge-md {
+    height: 2rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.75rem
+}
+	.badge-md .icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+
+	.badge-sm {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.5rem
+}
+
+	.badge-sm .icon {
+    width: 1rem;
+    height: 1rem
+}
+	.badge-icon-only {
+    width: 2rem;
+    height: 2rem;
+    gap: 0px;
+    padding: 0px
+}
+
+	.badge-sm.badge-icon-only {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0px
+}
+
+	.badge-neutral {
+    background-color: #12192a0d
+}
+
+	.badge-neutral:hover {
+    background-color: #12192A1A
+}
+
+	.badge-neutral .icon {
+    --tw-text-opacity: 1;
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	.badge-success {
+    background-color: #0aad6e1A
+}
+
+	.badge-success:hover {
+    background-color: #0aad6e40
+}
+
+	.badge-success .icon {
+    --tw-text-opacity: 1;
+    color: rgb(10 173 110 / var(--tw-text-opacity, 1))
+}
+	.badge-progress {
+    background-color: #5750ee1A
+}
+	.badge-progress:hover {
+    background-color: #5750ee40
+}
+	.badge-progress .icon {
+    --tw-text-opacity: 1;
+    color: rgb(71 65 193 / var(--tw-text-opacity, 1))
+}
+	.badge-warning {
+    background-color: #f1b1231A
+}
+	.badge-warning:hover {
+    background-color: #f1b12340
+}
+	.badge-warning .icon {
+    --tw-text-opacity: 1;
+    color: rgb(241 177 35 / var(--tw-text-opacity, 1))
+}
+	.badge-error {
+    background-color: #eb46471A
+}
+	.badge-error:hover {
+    background-color: #eb464740
+}
+	.badge-error .icon {
+    --tw-text-opacity: 1;
+    color: rgb(235 70 71 / var(--tw-text-opacity, 1))
+}
+
+	:global(.badge > div) {
+    display: flex;
+    height: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap
+}
+</style>

package/dist/components/status-badge/StatusBadge.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    size?: 'md' | 'sm';
+    content?: Snippet;
+    progress?: Snippet;
+    icon?: Snippet;
+    iconOnly?: boolean;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;

package/dist/components/status-badge/index.d.ts

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

package/dist/components/status-badge/index.js

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

package/dist/components/table/Table.stories.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import Table from './Table.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Table,
+		title: 'Design System/Table',
+		tags: ['autodocs']
+	});
+	import IconButton from '../icon-button/IconButton.svelte';
+	import { Icon } from '../icons';
+
+	export const users = [
+		{
+			name: 'John Doe',
+			age: 25,
+			role: 'admin'
+		},
+		{
+			name: 'Jane Smith',
+			age: 32,
+			role: 'member'
+		},
+		{
+			name: 'Michael Johnson',
+			age: 41,
+			role: 'deactivated'
+		},
+		{
+			name: 'Emily Brown',
+			age: 28,
+			role: 'member'
+		},
+		{
+			name: 'David Lee',
+			age: 37,
+			role: 'admin'
+		},
+		{
+			name: 'Sarah Wilson',
+			age: 29,
+			role: 'member'
+		},
+		{
+			name: 'Robert Taylor',
+			age: 45,
+			role: 'deactivated'
+		},
+		{
+			name: 'Lisa Anderson',
+			age: 33,
+			role: 'member'
+		},
+		{
+			name: 'James Martinez',
+			age: 39,
+			role: 'admin'
+		},
+		{
+			name: 'Jennifer Garcia',
+			age: 31,
+			role: 'deactivated'
+		}
+	];
+</script>
+
+<Story name="Base">
+	<Table>
+		{#snippet children({ THead, TBody, Tr, Th, Td })}
+			<THead>
+				<Tr>
+					<Th>Name</Th>
+					<Th>Age</Th>
+					<Th class="w-[100px]">Role</Th>
+					<Th class="w-6"></Th>
+				</Tr>
+			</THead>
+			<TBody>
+				{#each users as user}
+					<Tr disabled={user.role === 'deactivated'}>
+						<Td>{user.name}</Td>
+						<Td>{user.age}</Td>
+						<Td>{user.role}</Td>
+						<Td>
+							<IconButton disabled={user.role === 'deactivated'}>
+								<Icon iconName="Phone" />
+							</IconButton>
+						</Td>
+					</Tr>
+				{/each}
+			</TBody>
+		{/snippet}
+	</Table>
+</Story>

package/dist/components/table/Table.stories.svelte.d.ts

@@ -0,0 +1,24 @@
+import Table from './Table.svelte';
+export declare const users: {
+    name: string;
+    age: number;
+    role: 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;
+}
+declare const Table: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Table = InstanceType<typeof Table>;
+export default Table;