@reshape-biotech/design-system 0.0.22 → 0.0.24

package/README.md

@@ -1,58 +1,50 @@
-# create-svelte
-
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
+## Publishing
 
-If you're seeing this, you've probably already done this step. Congrats!
+Set the package version in the `package.json` file.
+To build your library:
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+bun run package
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+bun publish
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+## About the Design System
 
-## Building
+This package contains the core design system for Reshape Biotech frontend projects, providing a consistent and reusable set of components and styles.
 
-To build your library:
+### Contents
 
-```bash
-npm run package
-```
+1. **Component Library**
 
-To create a production version of your showcase app:
+   - A collection of shared, reusable React components
+   - Standardized UI elements following Reshape Biotech's design guidelines
+   - Fully typed components with TypeScript support
 
-```bash
-npm run build
-```
+2. **Tailwind Configuration**
 
-You can preview the production build with `npm run preview`.
+   - Pre-configured Tailwind CSS setup
+   - Custom theme extensions
+   - Shared utility classes
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+3. **DaisyUI**
 
-## Publishing
+   - Pre-configured DaisyUI setup
+   - Custom theme extensions
+   - Shared utility classes
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+4. **Design Tokens**
+   - Color palette
+   - Typography
+   - Shadow definitions
 
-To publish your library to [npm](https://www.npmjs.com):
+### Usage
 
-```bash
-npm publish
+Import components and styles from the design system:
+
+```typescript
+import { Button, Card } from '@reshape/design-system';
+import '@reshape/design-system/styles.css';
 ```

package/dist/components/banner/Banner.stories.svelte

@@ -0,0 +1,129 @@
+<script module lang="ts">
+	import { Info, Warning as WarningIcon } from 'phosphor-svelte';
+	import Banner from './Banner.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from 'design-system/components/button/Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Banner,
+		title: 'Design System/Banner',
+		tags: ['autodocs']
+	});
+
+	let showBanner = $state(true);
+</script>
+
+<Story name="Well finding warning">
+	<Banner type="warning" closable={false}>
+		{#snippet icon()}
+			<WarningIcon size="100%" weight="bold" />
+		{/snippet}
+		{#snippet content()}
+			Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
+				href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
+				>check our documentation</a
+			>
+			or <a href="mailto:support@reshapebiotech.com">contact us</a>.
+		{/snippet}
+	</Banner>
+</Story>
+
+<Story name="No icon">
+	<Banner type="success">
+		{#snippet content()}
+			This banner has no icon.
+		{/snippet}
+	</Banner>
+</Story>
+
+<Story name="No toggle">
+	<Banner type="progress" closable={false}>
+		{#snippet icon()}
+			<Info size="100%" weight="bold" />
+		{/snippet}
+		{#snippet content()}
+			This banner has no toggle.
+		{/snippet}
+	</Banner>
+</Story>
+
+<Story name="Toggle back on">
+	<div class="h-28">
+		<Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
+		<br />
+		<br />
+
+		<Banner type="error" bind:show={showBanner}>
+			{#snippet icon()}
+				<Info size="100%" weight="bold" />
+			{/snippet}
+			{#snippet content()}
+				This banner can be toggled off with the "x" to the right and back on with the button above.
+			{/snippet}
+		</Banner>
+	</div>
+</Story>
+
+<Story name="Type variations">
+	<div class="space-y-4">
+		<div class="space-y-2">
+			<h4>Neutral</h4>
+			<Banner type="neutral">
+				{#snippet icon()}
+					<Info size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "neutral" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Success</h4>
+			<Banner type="success">
+				{#snippet icon()}
+					<Info size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "success" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Progress</h4>
+			<Banner type="progress">
+				{#snippet icon()}
+					<Info size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "progress" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Warning</h4>
+			<Banner type="warning">
+				{#snippet icon()}
+					<Info size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is a "warning" banner.
+				{/snippet}
+			</Banner>
+		</div>
+
+		<div class="space-y-2">
+			<h4>Error</h4>
+			<Banner type="error">
+				{#snippet icon()}
+					<Info size="100%" weight="bold" />
+				{/snippet}
+				{#snippet content()}
+					This is an "error" banner.
+				{/snippet}
+			</Banner>
+		</div>
+	</div>
+</Story>

package/dist/components/banner/Banner.stories.svelte.d.ts

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

package/dist/components/banner/Banner.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { X } from 'phosphor-svelte';
+	import type { Snippet } from 'svelte';
+	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+
+	interface Props {
+		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+		show?: boolean;
+		closable?: boolean;
+		icon?: Snippet;
+		content: Snippet;
+	}
+
+	let {
+		type = 'neutral',
+		show = $bindable(true),
+		closable = true,
+		icon,
+		content
+	}: Props = $props();
+
+	const color = {
+		neutral: 'neutral',
+		success: 'success',
+		progress: 'blue',
+		warning: 'warning',
+		error: 'danger'
+	}[type];
+</script>
+
+{#if show}
+	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
+		<div class="inline-flex items-center justify-start gap-3">
+			{#if icon}
+				<div class="size-5 text-icon-{color} ">
+					{@render icon?.()}
+				</div>
+			{/if}
+			<div class="content text-sm">
+				{@render content?.()}
+			</div>
+		</div>
+		{#if closable}
+			<IconButton size="sm" onclick={() => (show = false)}>
+				<X class="text-icon-secondary" weight="bold" />
+			</IconButton>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.content :global(a) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+    text-decoration-line: underline
+}
+</style>

package/dist/components/banner/Banner.svelte.d.ts

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

package/dist/components/button/Button.stories.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+		title: 'Design System/Button',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<Button variant="primary">Button</Button>
+</Story>
+<Story name="Medium">
+	<Button variant="primary" size="md">Button</Button>
+</Story>
+<Story name="Small">
+	<Button variant="primary" size="sm">Button</Button>
+</Story>
+
+<Story name="Secondary">
+	<Button variant="secondary">Button</Button>
+</Story>
+
+<Story name="Danger">
+	<Button variant="danger">Button</Button>
+</Story>
+<Story name="Transparent">
+	<Button variant="transparent">Button</Button>
+</Story>
+<Story name="Disabled">
+	<Button disabled>Button</Button>
+</Story>
+<Story name="Loading">
+	<Button loading>Button</Button>
+</Story>

package/dist/components/button/Button.stories.svelte.d.ts

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

package/dist/components/button/Button.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import Spinner from 'design-system/components/spinner/Spinner.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		onClick?: (event?: MouseEvent) => void;
+		type?: 'button' | 'submit' | 'reset' | null | undefined;
+		loading?: boolean;
+		disabled?: boolean;
+		accessibilityLabel?: string;
+		size?: 'sm' | 'md' | 'lg';
+		id?: string | undefined;
+		tabindex?: number | undefined;
+		variant?: Variant;
+		children?: Snippet;
+		dataTestId?: string;
+	}
+
+	let {
+		class: className = '',
+		onClick = () => {},
+		type = 'button',
+		loading = false,
+		disabled = false,
+		accessibilityLabel = '',
+		size = 'lg',
+		id = undefined,
+		tabindex = undefined,
+		variant = 'primary',
+		children,
+		dataTestId = undefined
+	}: Props = $props();
+
+	type Variant =
+		| 'primary'
+		| 'secondary'
+		| 'transparent'
+		| 'danger'
+		| 'outline'
+		| 'secondary-inverse';
+
+	const Variants: Record<Variant, string> = {
+		primary: 'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover ',
+		secondary: 'bg-neutral text-primary hover:bg-neutral-hover active:bg-neutral',
+		transparent: 'bg-transparent text-primary hover:bg-neutral active:red',
+		danger: 'bg-danger-inverse text-primary-inverse hover:bg-danger-inverse-hover ',
+		outline:
+			'bg-transparent text-primary border border-interactive hover:bg-neutral-hover disabled:border-none',
+		'secondary-inverse':
+			'bg-neutral-inverse text-primary-inverse hover:bg-neutral-inverse-hover active:bg-neutral-inverse'
+	};
+
+	const sizes = {
+		sm: 'h-8 px-3 py-2',
+		md: 'h-10 px-5 py-3',
+		lg: 'h-12 px-6 py-4'
+	};
+	let sizeClassName = $derived(sizes[size]);
+	let colorClassName = $derived(Variants[variant]);
+</script>
+
+<button
+	aria-label={accessibilityLabel}
+	onclick={(e) => {
+		if (!loading) {
+			onClick(e);
+		} else {
+			e.preventDefault();
+		}
+	}}
+	{type}
+	{disabled}
+	{id}
+	{tabindex}
+	class:cursor-wait={loading}
+	class="inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 duration-150 disabled:bg-neutral disabled:text-tertiary {colorClassName} {sizeClassName} {className}"
+	data-testid={dataTestId}
+>
+	{#if loading}
+		<Spinner />
+	{:else}
+		{@render children?.()}
+	{/if}
+</button>

package/dist/components/button/Button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+declare const Button: import("svelte").Component<{
+    class?: string;
+    onClick?: (event?: MouseEvent) => void;
+    type?: "button" | "submit" | "reset" | null | undefined;
+    loading?: boolean;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    size?: "sm" | "md" | "lg";
+    id?: string | undefined;
+    tabindex?: number | undefined;
+    variant?: "primary" | "secondary" | "transparent" | "danger" | "outline" | "secondary-inverse";
+    children?: Snippet;
+    dataTestId?: string;
+}, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;