@reshape-biotech/design-system 0.0.23 → 0.0.25

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -0,0 +1,214 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Dropdown from './Dropdown.svelte';
+
+	const { Story } = defineMeta({
+		component: Dropdown,
+		title: 'Design System/Dropdown',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger>Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ C })}
+				<div>
+					<C.DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</C.DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="Secondary">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger variant="secondary">Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ C })}
+				<div>
+					<C.DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</C.DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+<Story name="Transparent">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger variant="transparent">Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ C })}
+				<div>
+					<C.DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</C.DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+<Story name="Danger">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger variant="danger">Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ C })}
+				<div>
+					<C.DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</C.DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="Sides">
+	<div class="flex h-screen w-full items-center justify-center">
+		<div class="flex flex-1 justify-between">
+			<Dropdown open side="dropdown-bottom">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Bottom</Trigger>
+				{/snippet}
+
+				{#snippet content({ C })}
+					<div>
+						<C.DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</C.DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+			<Dropdown open side="dropdown-top">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Top</Trigger>
+				{/snippet}
+				{#snippet content({ C })}
+					<div>
+						<C.DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</C.DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+			<Dropdown open side="dropdown-right">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Right</Trigger>
+				{/snippet}
+				{#snippet content({ C })}
+					<div>
+						<C.DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</C.DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+			<Dropdown open side="dropdown-left">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Left</Trigger>
+				{/snippet}
+				{#snippet content({ C })}
+					<div>
+						<C.DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</C.DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+		</div>
+	</div>
+</Story>
+
+<Story name="End align">
+	<div class="py-12">
+		<Dropdown alignEnd open>
+			{#snippet trigger({ Trigger })}
+				<Trigger>Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ C })}
+				<div>
+					<C.DropdownMenu>
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</C.DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="Other content">
+	<div class="py-12">
+		<Dropdown alignEnd open>
+			{#snippet trigger({ Trigger })}
+				<Trigger>Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ C })}
+				<div>
+					<C.DropdownContent>
+						<div>
+							<p>This is a dropdown with other content</p>
+							<p>It doesn't have to be list items</p>
+						</div>
+					</C.DropdownContent>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>

package/dist/components/dropdown/Dropdown.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DropdownContent from './components/DropdownContent.svelte';
+	import DropdownMenu from './components/DropdownMenu.svelte';
+	import DropdownTrigger from './components/DropdownTrigger.svelte';
+
+	interface Props {
+		side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
+		open?: boolean;
+		alignEnd?: boolean;
+		openOnHover?: boolean;
+		closeOnItemClick?: boolean;
+		class?: string;
+		trigger?: Snippet<[any]>;
+		content?: Snippet<[any]>;
+	}
+
+	let {
+		side = 'dropdown-bottom',
+		open = $bindable(false),
+		alignEnd = false,
+		openOnHover = false,
+		closeOnItemClick = false,
+		class: className = '',
+		trigger,
+		content
+	}: Props = $props();
+
+	let C = {
+		DropdownMenu,
+		DropdownContent
+	};
+
+	const closeDropdown = () => {
+		open = false;
+		// https://medium.com/@malikhamzav/how-to-close-daisyui-dropdown-on-click-ea65c5749410
+		document.activeElement instanceof HTMLElement && document.activeElement.blur();
+	};
+
+	function handleItemClick() {
+		if (closeOnItemClick) {
+			closeDropdown();
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			closeDropdown();
+		}
+	}
+</script>
+
+<div
+	class="dropdown {side} {className}"
+	class:dropdown-end={alignEnd}
+	class:dropdown-open={open}
+	class:dropdown-hover={openOnHover}
+>
+	{@render trigger?.({ Trigger: DropdownTrigger })}
+	<div
+		class="dropdown-content z-10 w-full"
+		role="menu"
+		tabindex="-1"
+		onkeydown={handleKeyDown}
+		onclick={handleItemClick}
+	>
+		{@render content?.({ C })}
+	</div>
+</div>

package/dist/components/dropdown/Dropdown.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
+    open?: boolean;
+    alignEnd?: boolean;
+    openOnHover?: boolean;
+    closeOnItemClick?: boolean;
+    class?: string;
+    trigger?: Snippet<[any]>;
+    content?: Snippet<[any]>;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/dropdown/components/DropdownContent.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Variant = 'primary' | 'secondary';
+
+	interface Props {
+		class?: string;
+		variant?: Variant;
+		children?: Snippet;
+	}
+
+	const Variants: Record<Variant, string> = {
+		primary: 'bg-surface text-primary',
+		secondary: 'bg-base-inverse text-primary-inverse'
+	};
+
+	let { class: className = '', variant = 'primary', children }: Props = $props();
+
+	let variantClass = $derived(Variants[variant]);
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- DaisyUI have a bug wit safari dropdown. Requires tabindex=0-->
+<div
+	class={`dropdown-content z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`}
+	tabindex="0"
+>
+	{@render children?.()}
+</div>

package/dist/components/dropdown/components/DropdownContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary';
+interface Props {
+    class?: string;
+    variant?: Variant;
+    children?: Snippet;
+}
+declare const DropdownContent: import("svelte").Component<Props, {}, "">;
+type DropdownContent = ReturnType<typeof DropdownContent>;
+export default DropdownContent;

package/dist/components/dropdown/components/DropdownMenu.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<ul
+	tabIndex="0"
+	class={`menu dropdown-content menu-md z-[1] rounded-md bg-surface p-1 shadow-2xl ${className}`}
+>
+	{@render children?.()}
+</ul>
+
+<style>
+	:global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
+    background-color: #12192A1A
+}
+</style>

package/dist/components/dropdown/components/DropdownMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/dropdown/components/DropdownTrigger.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	interface Props {
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		variant?: Color;
+		children?: Snippet;
+		noPadding?: boolean;
+	}
+	let {
+		size = 'md',
+		class: className = '',
+		variant = 'primary',
+		children,
+		noPadding = false
+	}: Props = $props();
+
+	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+
+	const sizes = $derived({
+		sm: `h-8 ${noPadding ? 'px-0' : 'px-3'} ${noPadding ? 'py-0' : 'py-2'}`,
+		md: 'h-10 px-5 py-3',
+		lg: 'h-12 px-6 py-4'
+	});
+
+	const colors: Record<Color, string> = {
+		primary:
+			'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover disabled:bg-neutral disabled:text-tertiary',
+		secondary:
+			'bg-neutral text-primary hover:bg-neutral-hover disabled:bg-neutral disabled:text-tertiary',
+		transparent:
+			'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
+		danger:
+			'bg-danger text-primary-inverse hover:bg-danger-hover disabled:bg-neutral disabled:text-tertiary'
+	};
+</script>
+
+<div
+	role="button"
+	tabindex="0"
+	class={`inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 ${colors[variant]} ${sizes[size]} ${className}`}
+>
+	{@render children?.()}
+</div>

package/dist/components/dropdown/components/DropdownTrigger.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    variant?: Color;
+    children?: Snippet;
+    noPadding?: boolean;
+}
+declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
+type DropdownTrigger = ReturnType<typeof DropdownTrigger>;
+export default DropdownTrigger;

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

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

package/dist/components/dropdown/index.js

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

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

@@ -0,0 +1,52 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import { Plus } from 'phosphor-svelte';
+
+	const { Story } = defineMeta({
+		component: IconButton,
+		title: 'Design System/IconButton',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<IconButton color="primary">
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Danger">
+	<IconButton color="danger">
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Transparent">
+	<IconButton color="transparent">
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Secondary">
+	<IconButton color="secondary">
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Medium">
+	<IconButton color="secondary" size="md">
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Extra Small">
+	<IconButton color="secondary" size="xs">
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Disabled">
+	<IconButton disabled>
+		<Plus />
+	</IconButton>
+</Story>
+<Story name="Loading">
+	<IconButton loading>
+		<Plus />
+	</IconButton>
+</Story>

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Spinner from '../spinner/';
+
+	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+	interface Props {
+		color?: 'primary' | 'transparent' | 'secondary' | 'danger';
+		type?: 'button' | 'submit' | 'reset' | null | undefined;
+		loading?: boolean;
+		disabled?: boolean;
+		size?: 'xs' | 'sm' | 'md';
+		children?: Snippet;
+		onclick?: () => void;
+		tabindex?: number | undefined;
+	}
+
+	let {
+		color = 'transparent',
+		type = 'button',
+		loading = false,
+		disabled = false,
+		size = 'sm',
+		children,
+		onclick,
+		tabindex
+	}: Props = $props();
+
+	const sizeClass = {
+		xs: 'h-6 w-6 [&>svg]:w-4 [&>svg]:h-4',
+		sm: 'h-8 w-8 [&>svg]:w-4 [&>svg]:h-4',
+		md: 'h-10 w-10 [&>svg]:w-5 [&>svg]:h-5',
+		lg: 'h-8 w-8 '
+	};
+
+	const colors: Record<Color, string> = {
+		primary: 'bg-accent-inverse text-icon-primary-inverse hover:bg-accent-inverse-hover ',
+		secondary: 'bg-neutral text-icon-primary hover:bg-neutral-hover ',
+		transparent: 'bg-transparent text-icon-primary hover:bg-neutral-hover ',
+		danger: 'bg-danger-inverse text-icon-primary-inverse hover:bg-danger-inverse-hover '
+	};
+
+	const baseStyle = 'flex justify-center items-center rounded-full';
+</script>
+
+{#if disabled || loading}
+	<button
+		onclick={(e) => {
+			e.preventDefault();
+		}}
+		{type}
+		{disabled}
+		class="disabled:bg-neutral disabled:text-tertiary {baseStyle} {sizeClass[
+			size
+		]} cursor-default {colors['secondary']}"
+	>
+		{#if loading}
+			<Spinner />
+		{:else}
+			{@render children?.()}
+		{/if}
+	</button>
+{:else}
+	<button
+		{onclick}
+		{type}
+		{disabled}
+		{tabindex}
+		class="{colors[color]} {sizeClass[size]} {baseStyle} cursor-pointer"
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    color?: 'primary' | 'transparent' | 'secondary' | 'danger';
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    children?: Snippet;
+    onclick?: () => void;
+    tabindex?: number | undefined;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/icon-button/index.d.ts

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

package/dist/components/icon-button/index.js

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

package/dist/components/image/Image.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import SkeletonLoader from '../skeleton-loader/';
+
+	interface Props {
+		src: string;
+		alt: string;
+	}
+
+	let { src, alt }: Props = $props();
+
+	let loaded = $state(false);
+	let failed = $state(false);
+	let loading = $state(false);
+
+	onMount(() => {
+		const img = new Image();
+		img.src = src;
+		loading = true;
+
+		img.onload = () => {
+			loading = false;
+			loaded = true;
+		};
+		img.onerror = () => {
+			loading = false;
+			failed = true;
+		};
+	});
+</script>
+
+<div class="h-full w-full">
+	{#if loaded}
+		<img {src} {alt} class="image h-full w-full object-cover" />
+	{:else if failed}
+		<img src="/imgs/MissingImageListRectangle.png" {alt} class="image" />
+	{:else if loading}
+		<div class="flex h-full flex-grow flex-col content-center justify-center">
+			<SkeletonLoader>
+				{#snippet children({ Skeleton, SkeletonImage })}
+					<!-- TODO: BG color is to match design, but we want to change the color, therefore not a token -->
+					<Skeleton class=" h-full w-full rounded-s-lg bg-[#D9E6E9]">
+						<SkeletonImage />
+					</Skeleton>
+				{/snippet}
+			</SkeletonLoader>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.image {
+    border-start-start-radius: 0.5rem;
+    border-end-start-radius: 0.5rem
+}
+</style>

package/dist/components/image/Image.svelte.d.ts

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

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

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

package/dist/components/image/index.js

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