@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/components/graphs/utils/duration.js

@@ -0,0 +1,33 @@
+import { Duration } from 'luxon';
+function secondsToDHM(seconds, roundnearest10 = true, formatDays = true) {
+    // Using Luxon
+    let minutes = Math.floor(seconds / 60);
+    if (roundnearest10) {
+        minutes = Math.ceil(minutes / 10) * 10;
+    }
+    let duration = Duration.fromObject({ minutes: minutes });
+    const units = ['hours', 'minutes'];
+    if (formatDays) {
+        units.unshift('days');
+    }
+    // @ts-ignore
+    duration = duration.shiftTo(...units);
+    return {
+        days: duration.days,
+        hours: duration.hours,
+        minutes: duration.minutes,
+    };
+}
+export function formattedDurationCompact(seconds) {
+    // Format duration to show in the compact format: 1d 2h 30m
+    // Hide days if duration is less than 24 hours
+    const totalHours = seconds / 3600;
+    const showDays = totalHours >= 24;
+    const { days, hours, minutes } = secondsToDHM(seconds, false, showDays);
+    if (showDays) {
+        return `${days}d ${hours}h ${minutes}m`;
+    }
+    else {
+        return `${hours}h ${minutes}m`;
+    }
+}

package/dist/components/graphs/utils/tooltipFormatter.js

@@ -1,7 +1,7 @@
 import { textColor } from '../../../tokens';
 const toFixedLocaleString = (value, fractionDigits = 0, locale = undefined) => value?.toLocaleString(locale, {
     minimumFractionDigits: fractionDigits,
-    maximumFractionDigits: fractionDigits
+    maximumFractionDigits: fractionDigits,
 }) ?? '';
 export const createTooltipFormatter = (config) => {
     const { maxSeriesToShow = 10 } = config;

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

@@ -1,82 +1,82 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Icon } from '../icons';
+  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']
-	});
+  const { Story } = defineMeta({
+    component: IconButton,
+    title: 'Design System/IconButton',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" asChild>
-	<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>
+  <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" asChild>
-	<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>
+  <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" asChild>
-	<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>
+  <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" asChild>
-	<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>
+  <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" asChild>
-	<IconButton disabled>
-		<Icon iconName="Plus" />
-	</IconButton>
+  <IconButton disabled>
+    <Icon iconName="Plus" />
+  </IconButton>
 </Story>
 <Story name="Loading" asChild>
-	<IconButton loading>
-		<Icon iconName="Plus" />
-	</IconButton>
+  <IconButton loading>
+    <Icon iconName="Plus" />
+  </IconButton>
 </Story>

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

@@ -1,79 +1,79 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { Spinner } from '../spinner/';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+  import { Spinner } from '../spinner/';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	type Variant =
-		| 'primary'
-		| 'secondary'
-		| 'transparent'
-		| 'danger'
-		| 'secondary-inverse'
-		| 'transparent-inverse';
+  type Variant =
+    | 'primary'
+    | 'secondary'
+    | 'transparent'
+    | 'danger'
+    | 'secondary-inverse'
+    | 'transparent-inverse';
 
-	// Combine custom props with standard HTML button attributes,
-	// omitting ones we handle explicitly (like 'class', 'onclick')
-	interface Props extends HTMLButtonAttributes {
-		variant?: Variant;
-		type?: 'button' | 'submit' | 'reset' | null | undefined;
-		loading?: boolean;
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		children?: Snippet;
-		rounded?: boolean;
-	}
+  // Combine custom props with standard HTML button attributes,
+  // omitting ones we handle explicitly (like 'class', 'onclick')
+  interface Props extends HTMLButtonAttributes {
+    variant?: Variant;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    rounded?: boolean;
+  }
 
-	// Destructure only the component's specific props
-	let {
-		variant = 'transparent',
-		type = 'button',
-		loading = false,
-		disabled = false,
-		size = 'sm',
-		children,
-		onclick,
-		tabindex,
-		rounded = true,
-		class: className,
-		...rest
-	}: Props = $props();
+  // Destructure only the component's specific props
+  let {
+    variant = 'transparent',
+    type = 'button',
+    loading = false,
+    disabled = false,
+    size = 'sm',
+    children,
+    onclick,
+    tabindex,
+    rounded = true,
+    class: className,
+    ...rest
+  }: Props = $props();
 
-	let sizeClass = $derived(`size-${size}`);
-	let variantClass = $derived(`color-${variant}`);
+  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 {className}"
-		class:rounded
-		{...rest}
-	>
-		{#if loading}
-			<Spinner />
-		{:else}
-			{@render children?.()}
-		{/if}
-	</button>
+  <button
+    onclick={(e) => {
+      e.preventDefault();
+    }}
+    {type}
+    {disabled}
+    class="{sizeClass} {variantClass} disabled {className}"
+    class:rounded
+    {...rest}
+  >
+    {#if loading}
+      <Spinner />
+    {:else}
+      {@render children?.()}
+    {/if}
+  </button>
 {:else}
-	<button
-		{onclick}
-		{type}
-		{disabled}
-		{tabindex}
-		class="{sizeClass} {variantClass} {className}"
-		class:rounded
-		{...rest}
-	>
-		{@render children?.()}
-	</button>
+  <button
+    {onclick}
+    {type}
+    {disabled}
+    {tabindex}
+    class="{sizeClass} {variantClass} {className}"
+    class:rounded
+    {...rest}
+  >
+    {@render children?.()}
+  </button>
 {/if}
 
 <style>
-	button {
+  button {
     display: flex;
     cursor: pointer;
     align-items: center;
@@ -81,113 +81,113 @@
     border-radius: 0.375rem;
     transition-duration: 150ms
 }
-	.rounded {
+  .rounded {
     border-radius: 9999px
 }
-	.disabled {
+  .disabled {
     cursor: not-allowed
 }
-	.disabled:disabled {
+  .disabled:disabled {
     background-color: #12192a0A;
     --tw-text-opacity: 1;
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
 
-	.size-xs {
+  .size-xs {
     height: 1.5rem;
     width: 1.5rem
 }
 
-	.size-xs :global(svg) {
+  .size-xs :global(svg) {
     height: 1rem;
     width: 1rem
 }
-	.size-sm {
+  .size-sm {
     height: 2rem;
     width: 2rem
 }
-	.size-sm :global(svg) {
+  .size-sm :global(svg) {
     height: 1rem;
     width: 1rem
 }
-	.size-md {
+  .size-md {
     height: 2.5rem;
     width: 2.5rem
 }
-	.size-md :global(svg) {
+  .size-md :global(svg) {
     height: 1.25rem;
     width: 1.25rem
 }
 
-	.size-lg {
+  .size-lg {
     height: 3rem;
     width: 3rem
 }
 
-	.size-lg :global(svg) {
+  .size-lg :global(svg) {
     height: 1.5rem;
     width: 1.5rem
 }
 
-	.color-primary {
+  .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 {
+  .color-primary:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
-	.color-secondary {
+  .color-secondary {
     background-color: #12192a0A;
     --tw-text-opacity: 1;
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
-	.color-secondary:hover {
+  .color-secondary:hover {
     background-color: #12192A1A
 }
-	.color-transparent {
+  .color-transparent {
     background-color: transparent;
     --tw-text-opacity: 1;
     color: rgb(89 94 106 / var(--tw-text-opacity, 1))
 }
-	.color-transparent:hover {
+  .color-transparent:hover {
     background-color: #12192a0A;
     --tw-text-opacity: 1;
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
-	.color-danger {
+  .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 {
+  .color-danger:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
 }
-	.color-secondary-inverse {
+  .color-secondary-inverse {
     background-color: #FFFFFF0D;
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
-	.color-secondary-inverse:hover {
+  .color-secondary-inverse:hover {
     background-color: #FFFFFF26
 }
 
-	.color-transparent-inverse {
+  .color-transparent-inverse {
     background-color: transparent;
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
-	.color-transparent-inverse:hover {
+  .color-transparent-inverse:hover {
     background-color: #FFFFFF26
 }
 
-	.color-transparent-inverse:hover:disabled {
+  .color-transparent-inverse:hover:disabled {
     background-color: transparent
 }
 </style>

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

@@ -1,28 +1,28 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import AnalysisIcon from './AnalysisIcon.svelte';
+  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']
-	});
+  // 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" args={{ model: 'pipeline_large_colonies' }} />
 
 <Story name="Sizes" args={{ model: 'pipeline_large_colonies' }}>
-	{#snippet template(args)}
-		<div class="flex flex-col gap-4">
-			<AnalysisIcon model={args.model} size="sm" withBackground />
-			<AnalysisIcon model={args.model} size="md" withBackground />
-			<AnalysisIcon model={args.model} size="lg" withBackground />
-			<AnalysisIcon model={args.model} size="sm" />
-			<AnalysisIcon model={args.model} size="md" />
-			<AnalysisIcon model={args.model} size="lg" />
-		</div>
-	{/snippet}
+  {#snippet template(args)}
+    <div class="flex flex-col gap-4">
+      <AnalysisIcon model={args.model} size="sm" withBackground />
+      <AnalysisIcon model={args.model} size="md" withBackground />
+      <AnalysisIcon model={args.model} size="lg" withBackground />
+      <AnalysisIcon model={args.model} size="sm" />
+      <AnalysisIcon model={args.model} size="md" />
+      <AnalysisIcon model={args.model} size="lg" />
+    </div>
+  {/snippet}
 </Story>
 
 <Story name="Halo" args={{ model: 'pipeline_halos' }} />