@reshape-biotech/design-system 2.4.2 → 2.5.2

package/README.md

@@ -22,16 +22,19 @@ This package contains the core design system for Reshape Biotech frontend projec
 ### Contents
 
 1. **Component Library**
+
    - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 
 2. **Tailwind Configuration**
+
    - Pre-configured Tailwind CSS setup
    - Custom theme extensions
    - Shared utility classes
 
 3. **DaisyUI**
+
    - Pre-configured DaisyUI setup
    - Custom theme extensions
    - Shared utility classes

package/dist/app.css

@@ -0,0 +1,115 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@layer base {
+  @font-face {
+    font-family: 'Geist Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/GeistMono-VariableFont_wght.ttf') format('ttf');
+  }
+  @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;
+  }
+
+  a {
+    color: theme('textColor.accent');
+    font-style: normal;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+}

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

@@ -0,0 +1,127 @@
+<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';
+
+  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',
+    },
+  ]);
+
+  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.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' } }}
+/>
+
+<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: 'add',
+      label: 'Project exploded',
+      timestamp: '2 Oct, 1999',
+      author: 'Dwight',
+    }}
+  />
+</Story>

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

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

package/dist/components/activity/Activity.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { Icon, type IconName, type IconColor, type BackgroundClass } from '../icons';
+  import { DateTime } from 'luxon';
+
+  type ActivityIcon =
+    | 'add'
+    | 'capture'
+    | 'delete'
+    | 'edit'
+    | 'failed'
+    | 'pause'
+    | 'start'
+    | 'stop'
+    | 'warning'
+    | 'success'
+    | 'export-succeeded'
+    | 'export-failed';
+
+  type Activity = {
+    activity_type?: string;
+    icon: ActivityIcon;
+    label: string;
+    timestamp: string;
+    author?: string | null;
+    field?: string | null;
+    previous_value?: string | null;
+    value?: string | null;
+  };
+
+  type Props = {
+    activity: Activity;
+    class?: string;
+  };
+
+  const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
+    add: 'Plus',
+    capture: 'Aperture',
+    delete: 'Trash',
+    edit: 'PencilSimple',
+    failed: 'WarningCircle',
+    pause: 'Pause',
+    start: 'Play',
+    stop: 'Stop',
+    warning: 'Warning',
+    success: 'Check',
+    'export-succeeded': 'DownloadSimple',
+    'export-failed': 'DownloadSimple',
+  };
+
+  const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
+    add: 'icon-secondary',
+    capture: 'icon-secondary',
+    delete: 'icon-danger',
+    edit: 'icon-secondary',
+    failed: 'icon-danger',
+    pause: 'icon-secondary',
+    start: 'icon-secondary',
+    stop: 'icon-secondary',
+    warning: 'icon-warning',
+    success: 'icon-secondary',
+    'export-succeeded': 'icon-secondary',
+    'export-failed': 'icon-danger',
+  };
+
+  const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
+    add: 'bg-neutral',
+    capture: 'bg-neutral',
+    delete: 'bg-neutral',
+    edit: 'bg-neutral',
+    failed: 'bg-danger',
+    pause: 'bg-neutral',
+    start: 'bg-neutral',
+    stop: 'bg-neutral',
+    warning: 'bg-warning',
+    success: 'bg-neutral',
+    'export-succeeded': 'bg-neutral',
+    'export-failed': 'bg-danger',
+  };
+
+  function formatDateTime(timestamp: string): string {
+    try {
+      const dateTime = DateTime.fromISO(timestamp);
+
+      if (dateTime.isValid) {
+        return dateTime.toLocaleString(DateTime.DATETIME_MED, {
+          locale: navigator.language === 'en-US' ? 'en-US' : 'en-GB',
+        });
+      }
+
+      return timestamp;
+    } catch (err) {
+      return timestamp;
+    }
+  }
+
+  let { class: className = '', activity }: Props = $props();
+</script>
+
+<div class={`group flex items-stretch gap-3 ${className}`}>
+  <div class="flex min-h-12 flex-col items-center gap-1.5">
+    <div class="w-0.5 grow bg-neutral group-first:invisible"></div>
+    <div
+      class="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
+        activity.icon
+      ]}"
+    >
+      <Icon iconName={ACTIVITY_ICONS[activity.icon]} color={ACTIVITY_COLOR[activity.icon]} />
+    </div>
+    <div class="w-0.5 grow bg-neutral group-last:invisible"></div>
+  </div>
+  <div class="flex items-center py-4">
+    <div class="text-secondary">
+      <span class="text-primary">{activity.label}</span>
+      {#if activity.previous_value}
+        <span> from <span class="text-primary">{activity.previous_value}</span></span>
+      {/if}
+      {#if activity.value}
+        <span> to <span class="text-primary">{activity.value}</span></span>
+      {/if}
+      <span class="px-0.5">⸱</span>
+      <span>{formatDateTime(activity.timestamp)}</span>
+      {#if activity.author}
+        <span> by <span class="text-primary">{activity.author}</span></span>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/components/activity/Activity.svelte.d.ts

@@ -0,0 +1,17 @@
+type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
+type Activity = {
+    activity_type?: string;
+    icon: ActivityIcon;
+    label: string;
+    timestamp: string;
+    author?: string | null;
+    field?: string | null;
+    previous_value?: string | null;
+    value?: string | null;
+};
+type Props = {
+    activity: Activity;
+    class?: string;
+};
+declare const Activity: import("svelte").Component<Props, {}, "">;
+export default Activity;

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

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

package/dist/components/activity/index.js

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

package/dist/components/avatar/Avatar.stories.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    component: Avatar,
+    title: 'Design System/Avatar',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-9253&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
+</script>
+
+<Story name="Default" args={{ name: 'John Doe' }} />
+
+<Story name="Sizes" asChild>
+  <div class="flex gap-2">
+    <Avatar name="John Doe" size="sm" />
+    <Avatar name="John Doe" size="md" />
+  </div>
+</Story>
+
+<Story name="Email" args={{ name: 'john.doe@example.com' }} />
+
+<Story name="Single Name" args={{ name: 'John' }} />
+
+<Story name="No Name" args={{ name: null }} />
+
+<Story name="Without Tooltip" args={{ showTooltip: false }} />
+
+<Story name="Multiple Avatars" asChild>
+  <div class="flex gap-2">
+    <Avatar name="John Doe" />
+    <Avatar name="Jane Smith" />
+    <Avatar name="Alex Johnson" />
+  </div>
+</Story>

package/dist/components/avatar/Avatar.stories.svelte.d.ts

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

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Tooltip from '../tooltip/Tooltip.svelte';
+  export interface AvatarProps {
+    name: string | null | undefined;
+    size?: 'sm' | 'md';
+    showTooltip?: boolean;
+  }
+
+  let { name, size = 'md', showTooltip = true }: AvatarProps = $props();
+  const sizes = {
+    sm: 'h-6 w-6 min-w-6 text-xxs font-semibold tracking-wide',
+    md: 'h-8 w-8 min-w-8 text-xs font-semibold tracking-wide',
+  };
+
+  let sizeClassName = $derived(sizes[size]);
+
+  const getInitials = (name: string | null | undefined) => {
+    if (!name) {
+      return '?'; // You can use any default value here
+    }
+    // Check if the name is an email
+    const isEmail = name.includes('@');
+    if (isEmail) {
+      return name.slice(0, 2).toUpperCase();
+    }
+
+    // Split the name by space
+    const splitName = name.split(' ');
+
+    // Check if the name is a single word or already initials
+    if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
+      return name.slice(0, 2).toUpperCase();
+    }
+
+    // If the name is multiple words, use the first letter of the first and last word
+    const firstInitial = splitName[0][0];
+    const lastInitial = splitName[splitName.length - 1][0];
+
+    return (firstInitial + lastInitial).toUpperCase();
+  };
+  let initials = $derived(getInitials(name));
+</script>
+
+{#snippet avatar()}
+  <div
+    class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
+  >
+    {initials}
+  </div>
+{/snippet}
+
+{#if showTooltip}
+  <Tooltip>
+    {#snippet trigger()}
+      {@render avatar()}
+    {/snippet}
+    {#snippet content()}
+      <span>{name ? name : 'Unknown'}</span>
+    {/snippet}
+  </Tooltip>
+{:else}
+  {@render avatar()}
+{/if}

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface AvatarProps {
+    name: string | null | undefined;
+    size?: 'sm' | 'md';
+    showTooltip?: boolean;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

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

package/dist/components/avatar/index.js

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