@reshape-biotech/design-system 0.0.22 → 0.0.24

package/dist/components/datepicker/DatePicker.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { DateTime, type MonthNumbers } from 'luxon';
+	import { CaretLeft, CaretRight } from 'phosphor-svelte';
+
+	interface Props {
+		selectedDate: DateTime | undefined;
+		onClick?: any;
+	}
+
+	let { selectedDate = $bindable(), onClick = (date: DateTime) => {} }: Props = $props();
+
+	const arrDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+	let today = DateTime.local();
+	const currentDay = today.day;
+	const currentMonth = today.month;
+	const currentYear = today.year;
+	let shownMonth = $state(today.month);
+	let shownYear = $state(today.year);
+	let selectedDay: number | undefined = $state();
+	let selectedMonth: number | undefined = $state();
+	let selectedYear: number | undefined = $state();
+	let rows = $state(initRows());
+
+	run(() => {
+		if (selectedDate) {
+			selectedDay = selectedDate.day;
+			selectedMonth = selectedDate.month;
+			selectedYear = selectedDate.year;
+		}
+	});
+
+	affectedRows();
+
+	function initRows() {
+		return [
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0]
+		];
+	}
+
+	function affectedRows() {
+		rows = initRows();
+		const firstDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).weekday - 1; // 0-based index
+		const lastDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).daysInMonth;
+
+		if (lastDayOfCurrentMonth === undefined) {
+			// Handle invalid date
+			return;
+		}
+
+		let iRow = 0;
+		let iCol = firstDayOfCurrentMonth; // Start at the correct weekday
+		let cpt = 1; // Start from day 1
+
+		for (iRow = 0; iRow < 6; iRow++) {
+			while (iCol < 7 && cpt <= lastDayOfCurrentMonth) {
+				rows[iRow][iCol] = cpt++;
+				iCol++;
+			}
+			iCol = 0; // Reset for the next row
+		}
+	}
+
+	function previousMonth() {
+		let dt = DateTime.local(shownYear, shownMonth).minus({ months: 1 });
+		shownMonth = dt.month as MonthNumbers;
+		shownYear = dt.year;
+		affectedRows();
+	}
+
+	function nextMonth() {
+		let dt = DateTime.local(shownYear, shownMonth).plus({ months: 1 });
+		shownMonth = dt.month as MonthNumbers;
+		shownYear = dt.year;
+		affectedRows();
+	}
+
+	function selectDate(y: number, m: number, d: number) {
+		selectedDate = DateTime.local(y, m, d);
+		onClick(selectedDate);
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="calendar-container" onclick={(e) => e.stopPropagation()}>
+	<div class="calendar">
+		<div class="calendar-header">
+			<div class="month-year">
+				<button class="btn-custom p-2" onclick={previousMonth} aria-label="calendar backward">
+					<CaretLeft class="text-secondary" weight="bold" size="0.75rem" />
+				</button>
+				<h4>
+					{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}
+				</h4>
+				<div>
+					<button class="btn-custom p-2" onclick={nextMonth} aria-label="calendar forward">
+						<CaretRight class="text-secondary" weight="bold" size="0.75rem" />
+					</button>
+				</div>
+			</div>
+		</div>
+		<div class="calendar-body">
+			<table>
+				<thead>
+					<tr>
+						{#each arrDays as day}
+							<th>
+								<p>{day}</p>
+							</th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each rows as col}
+						<tr>
+							{#each col as dayOfMonth}
+								<td>
+									{#if dayOfMonth > 0}
+										<div class="date-container">
+											<p
+												class={dayOfMonth === selectedDay &&
+												selectedMonth === shownMonth &&
+												selectedYear === shownYear
+													? 'date selected-date'
+													: 'date'}
+											>
+												<button
+													onclick={() => {
+														selectDate(shownYear, shownMonth, dayOfMonth);
+													}}
+												>
+													{dayOfMonth}
+												</button>
+											</p>
+											{#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
+												<svg
+													class="current-date-indicator text-accent"
+													xmlns="http://www.w3.org/2000/svg"
+													width="4"
+													height="4"
+													viewBox="0 0 4 4"
+												>
+													<circle cx="2" cy="2" r="2" fill="currentColor" />
+												</svg>
+											{/if}
+										</div>
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
+
+<style>
+	.calendar-container {
+		display: flex;
+		width: 312px;
+	}
+
+	.calendar {
+		overflow: hidden;
+		border-radius: 0.5rem;
+		--tw-bg-opacity: 1;
+		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+		padding: 1rem;
+		--tw-shadow: 0px 16px 24px 0px rgba(18, 25, 42, 0.16);
+		--tw-shadow-colored: 0px 16px 24px 0px var(--tw-shadow-color);
+		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+	.month-year {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.month-year .btn-custom {
+		background: none;
+		border: none;
+	}
+
+	.calendar-body {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-top: 22px;
+		overflow-x: auto;
+	}
+
+	table {
+		width: 100%;
+		border-spacing: 0;
+		border-collapse: collapse;
+		margin: 0;
+		padding: 0;
+	}
+
+	table thead th p {
+		text-align: center;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 400;
+		--tw-text-opacity: 1;
+		color: rgb(136 140 148 / var(--tw-text-opacity, 1));
+}
+
+	td {
+		width: 40px;
+		height: 40px;
+	}
+	table th,
+	table td {
+		box-sizing: border-box;
+		padding: 0;
+		margin: 0;
+	}
+
+	.date-container {
+		position: relative;
+	}
+
+	.date-container .current-date-indicator {
+		position: absolute;
+		top: 20px;
+		left: 18px;
+	}
+
+	.date {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 400;
+}
+
+	.date :hover,
+		.date :focus {
+		height: 2.5rem;
+		width: 2.5rem;
+		border-radius: 0.5rem;
+		--tw-bg-opacity: 1;
+		background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+		--tw-text-opacity: 1;
+		color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+			z-index: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+}
+
+	.selected-date {
+		height: 2.5rem;
+		width: 2.5rem;
+		border-radius: 0.5rem;
+		--tw-bg-opacity: 1;
+		background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+		--tw-text-opacity: 1;
+		color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+}
+
+	.date button {
+		border: none;
+		background: none;
+	}
+</style>

package/dist/components/datepicker/DatePicker.svelte.d.ts

@@ -0,0 +1,8 @@
+import { DateTime } from 'luxon';
+interface Props {
+    selectedDate: DateTime | undefined;
+    onClick?: any;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "selectedDate">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/divider/Divider.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+	import Divider from './Divider.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Divider,
+		title: 'Design System/Divider',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<Divider />
+</Story>

package/dist/components/divider/Divider.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Divider;
+type Divider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Divider from './Divider.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;
+}

package/dist/components/divider/Divider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class={`h-[1px] w-full bg-neutral ${className}`}></div>

package/dist/components/divider/Divider.svelte.d.ts

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

package/dist/components/drawer/Drawer.stories.svelte

@@ -0,0 +1,99 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from 'design-system/components/button/Button.svelte';
+	import Drawer from './Drawer.svelte';
+
+	const { Story } = defineMeta({
+		component: Drawer,
+		title: 'Design System/Drawer',
+		tags: ['autodocs']
+	});
+
+	let open = false;
+</script>
+
+<Story name="Base">
+	<div class="py-12">
+		<Drawer id="my-drawer">
+			{#snippet trigger({ C })}
+				<div>
+					<C.DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
+						>Open Drawer
+					</C.DrawerLabel>
+				</div>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>
+
+<Story name="Open">
+	<div class="py-12">
+		<Drawer id="my-drawer" open controlled>
+			{#snippet trigger({ C })}
+				<div>
+					<C.DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
+						>Open Drawer
+					</C.DrawerLabel>
+				</div>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>
+
+<Story name="With Button">
+	<div class="py-12">
+		<Drawer id="my-drawer" controlled bind:open>
+			{#snippet trigger()}
+				<div>
+					<Button
+						onClick={() => {
+							open = !open;
+						}}>Export</Button
+					>
+				</div>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>
+
+<Story name="Open Left">
+	<div class="py-12">
+		<Drawer id="my-drawer" side="left">
+			{#snippet trigger({ C })}
+				<div>
+					<C.DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
+						>Open Drawer
+					</C.DrawerLabel>
+				</div>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>

package/dist/components/drawer/Drawer.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Drawer;
+type Drawer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Drawer from './Drawer.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;
+}

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DrawerLabel from './DrawerLabel.svelte';
+
+	interface Props {
+		id: string;
+		controlled?: boolean;
+		// Open only works when controlled is true
+		open?: boolean;
+		side?: 'left' | 'right';
+		trigger?: Snippet<[any]>;
+		content?: Snippet;
+	}
+
+	let {
+		id,
+		controlled = false,
+		open = $bindable(false),
+		side = 'right',
+		trigger,
+		content
+	}: Props = $props();
+	const C = {
+		DrawerLabel
+	};
+</script>
+
+<div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
+	{#if controlled}
+		<input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
+	{:else}
+		<input {id} type="checkbox" class="drawer-toggle" />
+	{/if}
+
+	<div class="drawer-content">
+		<!-- Page content here -->
+		{@render trigger?.({ C })}
+	</div>
+	<div class="drawer-side" inert={controlled ? !open : false}>
+		<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
+		<div class="h-screen w-full bg-base sm:w-[460px]">
+			{@render content?.()}
+		</div>
+	</div>
+</div>

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id: string;
+    controlled?: boolean;
+    open?: boolean;
+    side?: 'left' | 'right';
+    trigger?: Snippet<[any]>;
+    content?: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/drawer/DrawerLabel.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id: string;
+		classes?: string;
+		children?: Snippet;
+	}
+
+	let { id, classes = '', children }: Props = $props();
+</script>
+
+<label for={id} class={`${classes} drawer-button`}>{@render children?.()}</label>

package/dist/components/drawer/DrawerLabel.svelte.d.ts

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