@reshape-biotech/design-system 1.2.6 → 2.0.0

package/README.md

@@ -1,7 +1,9 @@
 ## Publishing
 
 Set the package version in the `package.json` file.
-To build your library:
+Publish and versioning is automatically handled through GitHub actions.
+
+To build and publish manually:
 
 ```bash
 bun run package
@@ -11,6 +13,8 @@ bun run package
 bun publish
 ```
 
+`bun publish` requires a valid NPM publishing token to be set in your environment.
+
 ## About the Design System
 
 This package contains the core design system for Reshape Biotech frontend projects, providing a consistent and reusable set of components and styles.

package/dist/app.css

@@ -3,113 +3,113 @@
 @import 'tailwindcss/utilities';
 
 @layer base {
-	@font-face {
-		font-family: 'MD System Mono';
-		font-style: normal;
-		font-weight: 400;
-		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
-	}
-	@font-face {
-		font-family: 'af Another Sans';
-		font-style: normal;
-		font-weight: 400;
-		src: url('/fonts/afAnotherSans-Regular.woff2') format('woff2');
-	}
-	@font-face {
-		font-family: 'af Another Sans';
-		font-style: normal;
-		font-weight: 500;
-		src: url('/fonts/afAnotherSans-Medium.woff2') format('woff2');
-	}
-	@font-face {
-		font-family: 'af Another Sans';
-		font-style: normal;
-		font-weight: 600;
-		src: url('/fonts/afAnotherSans-SemiBold.woff2') format('woff2');
-	}
+  @font-face {
+    font-family: 'MD System Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'af Another Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/afAnotherSans-Regular.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'af Another Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/afAnotherSans-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'af Another Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/afAnotherSans-SemiBold.woff2') format('woff2');
+  }
 
-	body {
-		background-color: theme('backgroundColor.surface');
-		color: theme('textColor.primary');
-		font-family: 'af Another Sans', sans-serif;
-		font-style: normal;
-		font-feature-settings: 'ss01' on;
-		font-variant-numeric: lining-nums tabular-nums;
-		font-weight: 400;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		letter-spacing: 0.01em;
-	}
+  body {
+    background-color: theme('backgroundColor.surface');
+    color: theme('textColor.primary');
+    font-family: 'af Another Sans', sans-serif;
+    font-style: normal;
+    font-feature-settings: 'ss01' on;
+    font-variant-numeric: lining-nums tabular-nums;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: 0.01em;
+  }
 
-	a {
-		color: theme('textColor.accent');
-		font-style: normal;
-	}
-	a:hover {
-		text-decoration: underline;
-	}
+  a {
+    color: theme('textColor.accent');
+    font-style: normal;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
 
-	strong {
-		font-weight: 600;
-	}
+  strong {
+    font-weight: 600;
+  }
 
-	h1 {
-		/* text-7xl */
-		font-size: 4.5rem;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 4.5rem;
-		letter-spacing: -0.1em;
-	}
+  h1 {
+    /* text-7xl */
+    font-size: 4.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 4.5rem;
+    letter-spacing: -0.1em;
+  }
 
-	h2 {
-		/* text-5xl */
-		font-size: 3rem;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 3rem;
-		letter-spacing: -0.05em;
-	}
+  h2 {
+    /* text-5xl */
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 3rem;
+    letter-spacing: -0.05em;
+  }
 
-	h3 {
-		/* text-2xl */
-		font-size: 1.5rem;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 1.75rem;
-		letter-spacing: -0.025em;
-	}
+  h3 {
+    /* text-2xl */
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.75rem;
+    letter-spacing: -0.025em;
+  }
 
-	h4 {
-		/* text-xl */
-		font-size: 1.25rem;
-		line-height: 1.75rem;
-		font-style: normal;
-		font-weight: 600;
-		letter-spacing: -0.01em;
-	}
+  h4 {
+    /* text-xl */
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
 
-	h5 {
-		/* text-base */
-		font-size: 1rem;
-		line-height: 1.5rem;
-		font-style: normal;
-		font-weight: 600;
-		letter-spacing: 0;
-	}
+  h5 {
+    /* text-base */
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
 
-	h6 {
-		/* text-sm */
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		font-style: normal;
-		font-weight: 600;
-		letter-spacing: 0;
-	}
+  h6 {
+    /* text-sm */
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
 }
 
 @layer components {
-	html:has(.drawer-auto-gutter .drawer-toggle:checked) {
-		scrollbar-gutter: auto;
-	}
+  html:has(.drawer-auto-gutter .drawer-toggle:checked) {
+    scrollbar-gutter: auto;
+  }
 }

package/dist/components/activity/Activity.stories.svelte

@@ -1,119 +1,119 @@
 <script module lang="ts">
-	import Button from '../button/Button.svelte';
-	import Activity from './Activity.svelte';
-	import * as Collapsible from '../collapsible/index';
-	import { Icon } from '../icons';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../button/Button.svelte';
+  import Activity from './Activity.svelte';
+  import * as Collapsible from '../collapsible/index';
+  import { Icon } from '../icons';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Activity,
-		title: 'Design System/Activity',
-		tags: ['autodocs'],
-		parameters: {
-			design: {
-				type: 'figma',
-				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=2248-7688&t=sCuBI8dX6K6NjNR6-0'
-			}
-		}
-	});
+  const { Story } = defineMeta({
+    component: Activity,
+    title: 'Design System/Activity',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=2248-7688&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
 
-	let activities = $state([
-		{
-			icon: 'add' as const,
-			label: 'Job created',
-			timestamp: '12 Sep 2025, 9:59',
-			author: 'Ella Roth'
-		},
-		{
-			icon: 'edit' as const,
-			label: 'Sample ID edited',
-			previous_value: 'Sample123',
-			value: 'Sample456',
-			timestamp: '5 Sep 2025, 12:05',
-			author: 'Ella Roth'
-		},
-		{
-			icon: 'success' as const,
-			label: 'Job finished',
-			timestamp: '14 Aug 2025, 13:05'
-		},
-		{
-			icon: 'pause' as const,
-			label: 'Job paused',
-			timestamp: '4 Aug 2025, 13:05',
-			author: 'Bob Vance'
-		},
-		{
-			icon: 'stop' as const,
-			label: 'Some label that just happened to be very long so it will probably wrap in most cases',
-			timestamp: '4 Aug 2025, 13:05',
-			author: 'Michael Scott'
-		},
-		{
-			icon: 'warning' as const,
-			label: 'Job recovered after interruption, some data may be lost',
-			timestamp: '3 Aug 2025, 10:30',
-			author: 'Jim Halpert'
-		},
-		{
-			icon: 'failed' as const,
-			label: 'Job failed',
-			timestamp: '2 Aug 2025, 14:22',
-			author: 'System'
-		}
-	]);
+  let activities = $state([
+    {
+      icon: 'add' as const,
+      label: 'Job created',
+      timestamp: '12 Sep 2025, 9:59',
+      author: 'Ella Roth',
+    },
+    {
+      icon: 'edit' as const,
+      label: 'Sample ID edited',
+      previous_value: 'Sample123',
+      value: 'Sample456',
+      timestamp: '5 Sep 2025, 12:05',
+      author: 'Ella Roth',
+    },
+    {
+      icon: 'success' as const,
+      label: 'Job finished',
+      timestamp: '14 Aug 2025, 13:05',
+    },
+    {
+      icon: 'pause' as const,
+      label: 'Job paused',
+      timestamp: '4 Aug 2025, 13:05',
+      author: 'Bob Vance',
+    },
+    {
+      icon: 'stop' as const,
+      label: 'Some label that just happened to be very long so it will probably wrap in most cases',
+      timestamp: '4 Aug 2025, 13:05',
+      author: 'Michael Scott',
+    },
+    {
+      icon: 'warning' as const,
+      label: 'Job recovered after interruption, some data may be lost',
+      timestamp: '3 Aug 2025, 10:30',
+      author: 'Jim Halpert',
+    },
+    {
+      icon: 'failed' as const,
+      label: 'Job failed',
+      timestamp: '2 Aug 2025, 14:22',
+      author: 'System',
+    },
+  ]);
 
-	const fetchedMoreActivities = () => {
-		const index = Math.floor(Math.random() * (activities.length - 1));
-		activities = [...activities, activities[index]];
-	};
+  const fetchedMoreActivities = () => {
+    const index = Math.floor(Math.random() * (activities.length - 1));
+    activities = [...activities, activities[index]];
+  };
 </script>
 
 <Story name="Collapsible activity" asChild>
-	<Collapsible.Root open>
-		<Collapsible.Trigger class="w-full pb-4">
-			<h6>Activity</h6>
-		</Collapsible.Trigger>
+  <Collapsible.Root open>
+    <Collapsible.Trigger class="w-full pb-4">
+      <h6>Activity</h6>
+    </Collapsible.Trigger>
 
-		<Collapsible.Content class="flex flex-col items-center gap-3">
-			<div class="flex flex-col text-sm">
-				{#each activities as activity}
-					<Activity {activity} />
-				{/each}
-			</div>
-			<Button
-				onClick={fetchedMoreActivities}
-				variant="outline"
-				size="sm"
-				class="icon-secondary w-36 rounded-full"
-			>
-				<Icon iconName="Eye" />
-				<p>Show more</p>
-			</Button>
-		</Collapsible.Content>
-	</Collapsible.Root>
+    <Collapsible.Content class="flex flex-col items-center gap-3">
+      <div class="flex flex-col text-sm">
+        {#each activities as activity}
+          <Activity {activity} />
+        {/each}
+      </div>
+      <Button
+        onClick={fetchedMoreActivities}
+        variant="outline"
+        size="sm"
+        class="icon-secondary w-36 rounded-full"
+      >
+        <Icon iconName="Eye" />
+        <p>Show more</p>
+      </Button>
+    </Collapsible.Content>
+  </Collapsible.Root>
 </Story>
 
 <Story
-	name="Single activity"
-	args={{ activity: { icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' } }}
+  name="Single activity"
+  args={{ activity: { icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' } }}
 />
 
 <Story name="Few activities" asChild>
-	<Activity
-		activity={{
-			icon: 'pause',
-			label: 'Project paused',
-			timestamp: '2 Oct, 1999',
-			author: 'Dwight'
-		}}
-	/>
-	<Activity
-		activity={{
-			icon: 'add',
-			label: 'Project created',
-			timestamp: '2 Oct, 1999',
-			author: 'Dwight'
-		}}
-	/>
+  <Activity
+    activity={{
+      icon: 'pause',
+      label: 'Project paused',
+      timestamp: '2 Oct, 1999',
+      author: 'Dwight',
+    }}
+  />
+  <Activity
+    activity={{
+      icon: 'add',
+      label: 'Project created',
+      timestamp: '2 Oct, 1999',
+      author: 'Dwight',
+    }}
+  />
 </Story>