@reshape-biotech/design-system 0.0.23 → 0.0.25

package/dist/components/input/Input.stories.svelte

@@ -0,0 +1,81 @@
+<script module>
+	import Input from './Input.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Input,
+		title: 'Design System/Input',
+		tags: ['autodocs']
+	});
+
+	let value = '';
+	let email = 'bob@foo.com';
+	let password = 'wordpass';
+
+	let textareaValue = '';
+</script>
+
+<Story name="Base">
+	<Input bind:value autofocus />
+</Story>
+
+<Story name="Login">
+	<div class="flex flex-col gap-2">
+		<Input bind:value={email} label="Email" type="text" required id="email-select" autofocus />
+		<Input bind:value={password} label="Password" id="password-select" type="password" required />
+	</div>
+</Story>
+
+<Story name="Textarea">
+	<Input
+		bind:value={textareaValue}
+		label="Description"
+		type="textarea"
+		placeholder="Add a description..."
+	/>
+</Story>
+
+<Story name="Prefix">
+	<Input value="Bob">
+		{#snippet prefix()}
+			<div>Mr.</div>
+		{/snippet}
+	</Input>
+</Story>
+
+<Story name="Suffix">
+	<Input value="30">
+		{#snippet suffix()}
+			<div>± 1°C</div>
+		{/snippet}
+	</Input>
+</Story>
+
+<Story name="Prefix & Suffix">
+	<Input value="9001">
+		{#snippet prefix()}
+			<div>$</div>
+		{/snippet}
+		{#snippet suffix()}
+			<div>🔥</div>
+		{/snippet}
+	</Input>
+</Story>
+
+<Story name="Validation">
+	<Input value="Focus me, then click away" validator={(val) => val.toString().length < 10}>
+		{#snippet prefix({ valid })}
+			<div>
+				{#if valid}
+					😊
+				{:else}
+					😔
+				{/if}
+			</div>
+		{/snippet}
+		{#snippet error()}
+			<p class="pt-2 text-error">Oh no! Too many characters!</p>
+		{/snippet}
+	</Input>
+</Story>

package/dist/components/input/Input.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label?: string | null;
+		value: string | number;
+		type?: 'text' | 'password' | 'textarea' | 'number';
+		required?: boolean;
+		autofocus?: boolean;
+		placeholder?: string;
+		id?: string | undefined;
+		validator?: (a: string | number) => boolean;
+		onBlur?: (e: Event) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+		prefix?: Snippet<[any]>;
+		suffix?: Snippet;
+		error?: Snippet;
+		input?: HTMLInputElement | HTMLTextAreaElement;
+		maxlength?: number | null;
+	}
+
+	let {
+		label = null,
+		value = $bindable(),
+		type = 'text',
+		required = false,
+		autofocus = false,
+		placeholder = '',
+		id = undefined,
+		validator = (_) => {
+			return true;
+		},
+		onBlur = () => {},
+		onkeydown = () => {},
+		prefix,
+		suffix,
+		error,
+		input = $bindable(),
+		maxlength = null
+	}: Props = $props();
+
+	let valid = $state(true);
+
+	const inputId = Math.random().toString(36).substring(7); // used for A11y
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLTextAreaElement | HTMLInputElement;
+		value = target.value;
+
+		if (type === 'textarea') {
+			autoResizeTextarea(target as HTMLTextAreaElement);
+		}
+	}
+	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+		textarea.style.height = 'auto';
+		textarea.style.height = `${textarea.scrollHeight}px`;
+	}
+
+	function handleBlur(event: Event) {
+		valid = validator(value);
+		onBlur(event);
+	}
+</script>
+
+<div class="w-full">
+	{#if label}
+		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">{label}</label>
+	{/if}
+	<div
+		class="flex w-full items-center gap-1 rounded-lg border border-transparent bg-surface p-3"
+		class:!border-error={!valid}
+		class:focus-within:border-focus={valid}
+	>
+		{#if type === 'textarea'}
+			<textarea
+				id={id ?? inputId}
+				rows="3"
+				class:has-text={value}
+				class:has-placeholder={placeholder}
+				aria-label={label}
+				oninput={handleInput}
+				onblur={handleBlur}
+				{onkeydown}
+				bind:this={input}
+				{value}
+				{required}
+				{autofocus}
+				{placeholder}
+				{maxlength}
+			></textarea>
+		{:else}
+			<div class="whitespace-nowrap text-secondary">
+				{@render prefix?.({ valid })}
+			</div>
+			<input
+				id={id ?? inputId}
+				class="inline leading-none"
+				class:has-text={value}
+				class:has-placeholder={placeholder}
+				aria-label={label}
+				{type}
+				{required}
+				oninput={handleInput}
+				onblur={handleBlur}
+				{onkeydown}
+				bind:this={input}
+				{value}
+				{autofocus}
+				{placeholder}
+				{maxlength}
+			/>
+			<div class="whitespace-nowrap text-secondary">
+				{@render suffix?.()}
+			</div>
+		{/if}
+	</div>
+	{#if !valid}
+		{@render error?.()}
+	{/if}
+</div>
+
+<style>
+	input,
+	textarea {
+    width: 100%;
+    resize: none;
+    overflow: hidden;
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+</style>

package/dist/components/input/Input.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+declare const Input: import("svelte").Component<{
+    label?: string | null;
+    value: string | number;
+    type?: "text" | "password" | "textarea" | "number";
+    required?: boolean;
+    autofocus?: boolean;
+    placeholder?: string;
+    id?: string | undefined;
+    validator?: (a: string | number) => boolean;
+    onBlur?: (e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    prefix?: Snippet<[any]>;
+    suffix?: Snippet;
+    error?: Snippet;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    maxlength?: number | null;
+}, {}, "input" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

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

package/dist/components/input/index.js

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

package/dist/components/list/List.stories.svelte

@@ -0,0 +1,97 @@
+<script module lang="ts">
+	import List from './List.svelte';
+	import Tag from 'design-system/components/tag/Tag.svelte';
+	import { ArrowUpRight } from 'phosphor-svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: List,
+		title: 'Design System/List',
+		tags: ['autodocs']
+	});
+
+	const items: { name: string; licenses: string; repository: string }[] = [
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' }
+	];
+</script>
+
+<Story name="Default" args={{}}>
+	<List {items}>
+		{#snippet item(item)}
+			<div class="flex min-h-2 flex-row gap-2">
+				<div class="flex flex-row justify-start gap-2">
+					<div class="max-w-56 truncate font-bold">
+						{item.name}
+					</div>
+					{#if item.licenses}
+						<Tag>
+							{item.licenses}
+						</Tag>
+					{/if}
+				</div>
+				<div class="flex grow flex-row justify-end gap-3">
+					{#if item.repository}
+						<div class="flex flex-row items-center gap-1">
+							<a
+								href={item.repository}
+								class="text-secondary"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Repository
+							</a>
+							<ArrowUpRight />
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+	</List>
+</Story>
+
+<Story name="Compact" args={{ variant: 'compact' }}>
+	<List {items} variant="compact">
+		{#snippet item(item)}
+			<div class="flex min-h-2 flex-row gap-2">
+				<div class="flex flex-row justify-start gap-2">
+					<div class="max-w-56 truncate font-bold">
+						{item.name}
+					</div>
+					{#if item.licenses}
+						<Tag>
+							{item.licenses}
+						</Tag>
+					{/if}
+				</div>
+				<div class="flex grow flex-row justify-end gap-3">
+					{#if item.repository}
+						<div class="flex flex-row items-center gap-1">
+							<a
+								href={item.repository}
+								class="text-gray-700"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Repository
+							</a>
+							<ArrowUpRight />
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+	</List>
+</Story>
+
+<Story name="Loading">
+	<List variant="compact" items={[{}, {}, {}]}>
+		{#snippet item({})}
+			<div class="flex h-8 w-full items-center">
+				<div class="skeleton h-6 w-full bg-neutral"></div>
+			</div>
+		{/snippet}
+	</List>
+</Story>

package/dist/components/list/List.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" generics="T">
+	import type { Overflow } from '../../tailwind';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		item: Snippet<[T]>;
+		overflow?: Overflow;
+		variant?: 'compact' | 'default';
+	};
+	let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
+</script>
+
+<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
+	{#each items as currentItem, i}
+		<div class="item">
+			{@render item(currentItem)}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.listStyles {
+
+    display: flex;
+
+    height: 100%;
+
+    flex-direction: column;
+
+    align-items: flex-start;
+
+    align-self: stretch;
+
+    border-radius: 0.25rem
+}
+
+		.listStyles.default {
+
+    gap: 0.5rem
+}
+
+		.listStyles.compact {
+
+    gap: 0px;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding-bottom: 0.5rem;
+
+    padding-left: 1.5rem;
+
+    padding-right: 1.5rem;
+
+    padding-top: 0.5rem
+}
+
+		.listStyles.compact :global(> .item:not(:last-child)) {
+
+    border-bottom-width: 1px;
+
+    border-style: solid;
+
+    --tw-border-opacity: 1;
+
+    border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity, 1)))
+}
+
+		.listStyles :global(.item) {
+
+    align-self: stretch
+}
+</style>

package/dist/components/list/List.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Overflow } from '../../tailwind';
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: T[];
+        item: Snippet<[T]>;
+        overflow?: Overflow;
+        variant?: "compact" | "default";
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<T> = InstanceType<typeof List<T>>;
+export default List;

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

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

package/dist/components/list/index.js

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

package/dist/components/markdown/Markdown.stories.svelte

@@ -0,0 +1,41 @@
+<script module>
+	import Markdown from './Markdown.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Markdown,
+		title: 'Design System/Markdown',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<Markdown
+		markdown={`# Welcome to My Markdown Story
+
+## Features
+
+- **Bold** and *italic* text
+- Lists (ordered and unordered)
+- [Links](https://example.com)
+- Code blocks
+
+### Example Code
+
+\`\`\`javascript
+function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+}
+greet('Storybook');
+\`\`\`
+
+> This is a blockquote. It's great for highlighting important information.
+
+![Storybook Logo](https://storybook.js.org/images/logos/icon-storybook.svg)
+
+---
+
+Happy storytelling with Markdown!`}
+	/>
+</Story>

package/dist/components/markdown/Markdown.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	interface Props {
+		markdown: string;
+	}
+
+	let { markdown }: Props = $props();
+</script>
+
+<div class="prose text-sm text-tertiary dark:prose-invert">
+	{@html marked.parse(markdown ?? '')}
+</div>

package/dist/components/markdown/Markdown.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    markdown: string;
+}
+declare const Markdown: import("svelte").Component<Props, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

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

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

package/dist/components/markdown/index.js

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

package/dist/components/modal/Modal.stories.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+	import Button from 'design-system/components/button/Button.svelte';
+	import Modal from 'design-system/components/modal/Modal.svelte';
+	import ContactSupportModal from './ContactSupportModal.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Modal,
+		title: 'Design System/Modal',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default">
+	<Modal>
+		{#snippet Trigger({ openModal })}
+			<Button onClick={openModal}>Open Modal</Button>
+		{/snippet}
+		{#snippet Content()}
+			<div>
+				<p>Modal Content</p>
+			</div>
+		{/snippet}
+	</Modal>
+</Story>
+
+<Story name="Default open">
+	<Modal defaultOpen>
+		{#snippet Trigger({ openModal })}
+			<Button onClick={openModal}>Open Modal</Button>
+		{/snippet}
+		{#snippet Content()}
+			<div>
+				<p>Modal Content</p>
+			</div>
+		{/snippet}
+	</Modal>
+</Story>
+
+<Story name="Contact support">
+	<ContactSupportModal />
+</Story>

package/dist/components/modal/Modal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { v4 as uuidv4 } from 'uuid';
+	import IconButton from '../icon-button/IconButton.svelte';
+	import { X } from 'phosphor-svelte';
+
+	type ModalProps = {
+		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
+		Content: Snippet;
+		defaultOpen?: boolean;
+		id?: string;
+		withClose?: boolean;
+		closeOnClickOutside?: boolean;
+		class?: string;
+	};
+	let {
+		Trigger,
+		Content,
+		defaultOpen = false,
+		id = 'modal-' + uuidv4(),
+		withClose = true,
+		closeOnClickOutside = true,
+		class: modalClass
+	}: ModalProps = $props();
+
+	const openModal = () => {
+		const dialog = document.getElementById(id) as HTMLDialogElement | null;
+		dialog?.showModal();
+	};
+
+	const closeModal = () => {
+		const dialog = document.getElementById(id) as HTMLDialogElement | null;
+		dialog?.close();
+	};
+</script>
+
+{#if Trigger}
+	{@render Trigger({ openModal, closeModal })}
+{/if}
+<dialog {id} class="modal {modalClass}" class:modal-open={defaultOpen}>
+	<div class="modal-box relative w-fit max-w-full rounded-xl bg-base p-6">
+		{#if withClose}
+			<div class="absolute right-0 top-0 p-6">
+				<IconButton onclick={closeModal} size="md" color="secondary">
+					<X />
+				</IconButton>
+			</div>
+		{/if}
+		{@render Content()}
+	</div>
+	{#if closeOnClickOutside}
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	{/if}
+</dialog>

package/dist/components/modal/Modal.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type ModalProps = {
+    Trigger?: Snippet<[{
+        openModal: () => void;
+        closeModal: () => void;
+    }]>;
+    Content: Snippet;
+    defaultOpen?: boolean;
+    id?: string;
+    withClose?: boolean;
+    closeOnClickOutside?: boolean;
+    class?: string;
+};
+declare const Modal: import("svelte").Component<ModalProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

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

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

package/dist/components/modal/index.js

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

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -0,0 +1,27 @@
+<script module>
+	import NotificationPopup from './NotificationPopup.svelte';
+	import { Sparkle } from 'phosphor-svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: NotificationPopup,
+		title: 'Design System/NotificationPopup',
+		tags: ['autodocs']
+	});
+
+	let visible = true;
+
+	function handleClick() {
+		visible = !visible;
+	}
+</script>
+
+<Story name="Primary">
+	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
+		<a href="_blank" color="transparent" class="flex items-center gap-1 font-sans">
+			<Sparkle />
+			<p>Product updates</p>
+		</a>
+	</NotificationPopup>
+</Story>