From 682d277213b3ae9e2349413a7ccaa20df1e09d89 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Mon, 23 Dec 2024 10:46:47 -0500
Subject: [PATCH] feat: switch

---
 src/docs/components/ExampleLayout.svelte      | 12 ++-
 src/docs/components/Lorem.svelte              | 21 ++--
 src/docs/constants.ts                         |  4 +
 .../AppShell/AppShellSidebar.svelte           |  2 +-
 .../components/Scrollable/Scrollable.svelte   |  3 +-
 src/lib/components/Switch/Switch.svelte       | 99 +++++++++++++++++++
 src/lib/index.ts                              |  1 +
 src/routes/components/button/+page.svelte     |  5 +-
 src/routes/components/field/+page.svelte      |  5 +-
 src/routes/components/navbar/+page.svelte     |  2 +-
 .../components/navbar/BasicExample.svelte     |  2 +-
 .../components/navbar/GroupExample.svelte     |  3 +-
 src/routes/components/scrollable/+page.svelte |  9 ++
 .../components/scrollable/BasicExample.svelte | 22 +++++
 src/routes/components/switch/+page.svelte     | 20 ++++
 .../components/switch/BasicExample.svelte     | 11 +++
 .../components/switch/ColorExample.svelte     | 12 +++
 .../components/switch/FormExample.svelte      | 17 ++++
 18 files changed, 231 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/components/Switch/Switch.svelte
 create mode 100644 src/routes/components/scrollable/+page.svelte
 create mode 100644 src/routes/components/scrollable/BasicExample.svelte
 create mode 100644 src/routes/components/switch/+page.svelte
 create mode 100644 src/routes/components/switch/BasicExample.svelte
 create mode 100644 src/routes/components/switch/ColorExample.svelte
 create mode 100644 src/routes/components/switch/FormExample.svelte

diff --git a/src/docs/components/ExampleLayout.svelte b/src/docs/components/ExampleLayout.svelte
index ed63c6d..1b58b52 100644
--- a/src/docs/components/ExampleLayout.svelte
+++ b/src/docs/components/ExampleLayout.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
 	import Examples from '$docs/components/Examples.svelte';
 	import { Theme, type ExampleItem } from '$docs/constants.js';
-	import { Scrollable, Stack } from '@immich/ui';
+	import { Heading, Scrollable, Stack } from '@immich/ui';
+	import type { Snippet } from 'svelte';
 
 	type Props = {
 		name: string;
 		examples: ExampleItem[];
+		children?: Snippet;
 	};
 
-	const { name, examples }: Props = $props();
+	const { name, examples, children }: Props = $props();
 </script>
 
 <div class="flex h-full flex-col">
@@ -25,8 +27,10 @@
 		</div>
 	</nav>
 
-	<Scrollable>
-		<Stack gap={4} class="max-w-screen-lg p-4">
+	<Scrollable class="p-4">
+		<Heading size="large">{name}</Heading>
+		{@render children?.()}
+		<Stack gap={4} class="mt-4 max-w-screen-md">
 			<Examples theme={Theme.Dark} {examples} />
 		</Stack>
 	</Scrollable>
diff --git a/src/docs/components/Lorem.svelte b/src/docs/components/Lorem.svelte
index ead253f..ace3f67 100644
--- a/src/docs/components/Lorem.svelte
+++ b/src/docs/components/Lorem.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
 	type Props = { count?: number };
 	const { count = 1 }: Props = $props();
+
+	const lorem =
+		'Lorem ipsum dolor sit amet consectetur adipisicing elit. A ipsam tenetur accusantium impedit beatae omnis necessitatibus. Voluptatum blanditiis libero impedit, harum eius inventore nihil, officia voluptate dolorum error consequatur animi.';
+
+	const make = (value: number) => {
+		let content = '';
+		for (let i = 0; i < value; i++) {
+			content += lorem;
+		}
+		return content;
+	};
+
+	const text = $derived(make(count));
 </script>
 
-{#each Array(count) as i}
-	<p data-index={i}>
-		Lorem ipsum dolor sit amet consectetur adipisicing elit. A ipsam tenetur accusantium impedit
-		beatae omnis necessitatibus. Voluptatum blanditiis libero impedit, harum eius inventore nihil,
-		officia voluptate dolorum error consequatur animi.
-	</p>
-{/each}
+{text}
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
index 4af3afb..010d852 100644
--- a/src/docs/constants.ts
+++ b/src/docs/constants.ts
@@ -15,7 +15,9 @@ import {
 	mdiListBoxOutline,
 	mdiMenu,
 	mdiNumeric,
+	mdiPanVertical,
 	mdiPartyPopper,
+	mdiToggleSwitch,
 	mdiViewSequential,
 } from '@mdi/js';
 import type { Component } from 'svelte';
@@ -47,6 +49,7 @@ export const componentGroups = [
 			{ name: 'AppShell', icon: mdiApplicationOutline },
 			{ name: 'Card', icon: mdiCardOutline },
 			{ name: 'Navbar', icon: mdiMenu },
+			{ name: 'Scrollable', icon: mdiPanVertical },
 			{ name: 'Stack', icon: mdiViewSequential },
 		],
 	},
@@ -61,6 +64,7 @@ export const componentGroups = [
 			{ name: 'Input', icon: mdiFormTextbox },
 			{ name: 'LoadingSpinner', icon: mdiDotsCircle },
 			{ name: 'PasswordInput', icon: mdiFormTextboxPassword },
+			{ name: 'Switch', icon: mdiToggleSwitch },
 		],
 	},
 	{
diff --git a/src/lib/components/AppShell/AppShellSidebar.svelte b/src/lib/components/AppShell/AppShellSidebar.svelte
index 0978ffd..2cb64ee 100644
--- a/src/lib/components/AppShell/AppShellSidebar.svelte
+++ b/src/lib/components/AppShell/AppShellSidebar.svelte
@@ -17,7 +17,7 @@
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
 	<Scrollable
 		class={cleanClass(
-			'hidden h-full shrink-0 border-gray-200 dark:border-gray-700 lg:block',
+			'hidden h-full w-min shrink-0 border-gray-200 dark:border-gray-700 lg:block',
 			className,
 			noBorder || 'border-r',
 		)}
diff --git a/src/lib/components/Scrollable/Scrollable.svelte b/src/lib/components/Scrollable/Scrollable.svelte
index 5f4ee29..240577c 100644
--- a/src/lib/components/Scrollable/Scrollable.svelte
+++ b/src/lib/components/Scrollable/Scrollable.svelte
@@ -10,7 +10,7 @@
 	const { class: className, children }: Props = $props();
 </script>
 
-<div class={cleanClass('immich-scrollbar overflow-y-auto', className)}>
+<div class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
 	{@render children?.()}
 </div>
 
@@ -18,6 +18,7 @@
 	/* width */
 	.immich-scrollbar::-webkit-scrollbar {
 		width: 8px;
+		height: 8px;
 	}
 
 	/* Track */
diff --git a/src/lib/components/Switch/Switch.svelte b/src/lib/components/Switch/Switch.svelte
new file mode 100644
index 0000000..8017786
--- /dev/null
+++ b/src/lib/components/Switch/Switch.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { getFieldContext } from '$lib/common/context.svelte.js';
+	import type { Color } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		checked?: boolean;
+		color?: Color;
+		disabled?: boolean;
+		class?: string;
+		onToggle?: ((checked: boolean) => void) | undefined;
+	} & HTMLInputAttributes;
+
+	let {
+		checked = $bindable(false),
+		class: className,
+		color = 'primary',
+		onToggle = undefined,
+		...restProps
+	}: Props = $props();
+
+	const {
+		label,
+		readOnly = false,
+		required = false,
+		disabled = false,
+	} = $derived(getFieldContext());
+
+	const enabled = $derived(checked && !disabled);
+
+	const handleToggle = (event: Event) => onToggle?.((event.target as HTMLInputElement).checked);
+
+	const wrapper = tv({
+		base: 'relative flex flex-col justify-center',
+		variants: {
+			disabled: {
+				true: 'cursor-not-allowed',
+				false: 'cursor-pointer',
+			},
+		},
+	});
+
+	const bar = tv({
+		base: 'w-12 h-3 my-2 rounded-full border border-transparent',
+		variants: {
+			fillColor: {
+				default: 'bg-gray-400',
+				primary: 'bg-primary/50',
+				secondary: 'bg-dark/50',
+				success: 'bg-success/50',
+				danger: 'bg-danger/50',
+				warning: 'bg-warning/50',
+				info: 'bg-info/50',
+			},
+		},
+	});
+
+	const dot = tv({
+		base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		variants: {
+			checked: {
+				true: 'translate-x-6',
+				false: '',
+			},
+			fillColor: {
+				default: 'bg-gray-600',
+				primary: 'bg-primary',
+				secondary: 'bg-dark',
+				success: 'bg-success',
+				danger: 'bg-danger',
+				warning: 'bg-warning',
+				info: 'bg-info',
+			},
+		},
+	});
+</script>
+
+<label class={cleanClass(className)}>
+	{label}
+	<span class={wrapper({ disabled })}>
+		<input
+			class="hidden"
+			type="checkbox"
+			bind:checked
+			onclick={handleToggle}
+			{required}
+			aria-required={required}
+			{disabled}
+			aria-disabled={disabled}
+			readonly={readOnly}
+			aria-readonly={readOnly}
+			{...restProps}
+		/>
+		<span class={bar({ fillColor: enabled ? color : 'default' })}> </span>
+		<span class={dot({ checked: enabled, fillColor: enabled ? color : 'default' })}></span>
+	</span>
+</label>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index b8a40f7..d9eefae 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -30,6 +30,7 @@ export { default as HStack } from '$lib/components/Stack/HStack.svelte';
 export { default as Stack } from '$lib/components/Stack/Stack.svelte';
 export { default as VStack } from '$lib/components/Stack/VStack.svelte';
 export { default as SupporterBadge } from '$lib/components/SupporterBadge/SupporterBadge.svelte';
+export { default as Switch } from '$lib/components/Switch/Switch.svelte';
 export { default as Text } from '$lib/components/Text/Text.svelte';
 export * from '$lib/types.js';
 export * from '$lib/utilities/byte-units.js';
diff --git a/src/routes/components/button/+page.svelte b/src/routes/components/button/+page.svelte
index aad2f85..3fce7ad 100644
--- a/src/routes/components/button/+page.svelte
+++ b/src/routes/components/button/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import { Text } from '@immich/ui';
 	import BasicExample from './BasicExample.svelte';
 	import basicExample from './BasicExample.svelte?raw';
 	import ColorExample from './ColorExample.svelte';
@@ -35,4 +36,6 @@
 	];
 </script>
 
-<ExampleLayout name="Button" {examples} />
+<ExampleLayout name="Button" {examples}>
+	<Text>A button component, which can also be used to render links</Text>
+</ExampleLayout>
diff --git a/src/routes/components/field/+page.svelte b/src/routes/components/field/+page.svelte
index 4344461..8691cdf 100644
--- a/src/routes/components/field/+page.svelte
+++ b/src/routes/components/field/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import { Text } from '@immich/ui';
 	import BasicExample from './BasicExample.svelte';
 	import basicExample from './BasicExample.svelte?raw';
 
 	const examples = [{ title: 'Basic', code: basicExample, component: BasicExample }];
 </script>
 
-<ExampleLayout name="Field" {examples} />
+<ExampleLayout name="Field" {examples}>
+	<Text>A metadata component for tracking common form field information</Text>
+</ExampleLayout>
diff --git a/src/routes/components/navbar/+page.svelte b/src/routes/components/navbar/+page.svelte
index d824b4f..fda8938 100644
--- a/src/routes/components/navbar/+page.svelte
+++ b/src/routes/components/navbar/+page.svelte
@@ -11,4 +11,4 @@
 	];
 </script>
 
-<ExampleLayout name="Basic" {examples} />
+<ExampleLayout name="Navbar" {examples} />
diff --git a/src/routes/components/navbar/BasicExample.svelte b/src/routes/components/navbar/BasicExample.svelte
index bdaca84..71b9378 100644
--- a/src/routes/components/navbar/BasicExample.svelte
+++ b/src/routes/components/navbar/BasicExample.svelte
@@ -3,6 +3,6 @@
 	import { mdiHome } from '@mdi/js';
 </script>
 
-<div class="w-[200px]">
+<div class="max-w-[200px]">
 	<NavbarItem icon={mdiHome} title="Home" href="#" active />
 </div>
diff --git a/src/routes/components/navbar/GroupExample.svelte b/src/routes/components/navbar/GroupExample.svelte
index 953b0b8..df0dbab 100644
--- a/src/routes/components/navbar/GroupExample.svelte
+++ b/src/routes/components/navbar/GroupExample.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import NavbarGroup from '$lib/components/Navbar/NavbarGroup.svelte';
-	import { NavbarItem } from '@immich/ui';
+	import { NavbarGroup, NavbarItem } from '@immich/ui';
 	import { mdiButtonPointer, mdiCardOutline, mdiHome } from '@mdi/js';
 </script>
 
diff --git a/src/routes/components/scrollable/+page.svelte b/src/routes/components/scrollable/+page.svelte
new file mode 100644
index 0000000..327dfff
--- /dev/null
+++ b/src/routes/components/scrollable/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import BasicExample from './BasicExample.svelte';
+	import basicExample from './BasicExample.svelte?raw';
+
+	const examples = [{ title: 'Basic', code: basicExample, component: BasicExample }];
+</script>
+
+<ExampleLayout name="Scrollable" {examples} />
diff --git a/src/routes/components/scrollable/BasicExample.svelte b/src/routes/components/scrollable/BasicExample.svelte
new file mode 100644
index 0000000..0eaf5e9
--- /dev/null
+++ b/src/routes/components/scrollable/BasicExample.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Lorem from '$docs/components/Lorem.svelte';
+	import { Heading, Scrollable, Stack, Text } from '@immich/ui';
+</script>
+
+<Stack gap={4}>
+	<Heading size="tiny">Vertical</Heading>
+	<div class="h-64 w-32">
+		<Scrollable>
+			<Text>
+				<Lorem count={5} />
+			</Text>
+		</Scrollable>
+	</div>
+
+	<Heading size="tiny">Horizontal</Heading>
+	<Scrollable>
+		<Text class="h-8 w-[2000px]">
+			<Lorem />
+		</Text>
+	</Scrollable>
+</Stack>
diff --git a/src/routes/components/switch/+page.svelte b/src/routes/components/switch/+page.svelte
new file mode 100644
index 0000000..814de4e
--- /dev/null
+++ b/src/routes/components/switch/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import { Text } from '@immich/ui';
+	import BasicExample from './BasicExample.svelte';
+	import basicExample from './BasicExample.svelte?raw';
+	import ColorExample from './ColorExample.svelte';
+	import colorExample from './ColorExample.svelte?raw';
+	import FormExample from './FormExample.svelte';
+	import formExample from './FormExample.svelte?raw';
+
+	const examples = [
+		{ title: 'Basic', code: basicExample, component: BasicExample },
+		{ title: 'Colors', code: colorExample, component: ColorExample },
+		{ title: 'Form', code: formExample, component: FormExample },
+	];
+</script>
+
+<ExampleLayout name="Switch" {examples}>
+	<Text>A boolean input element</Text>
+</ExampleLayout>
diff --git a/src/routes/components/switch/BasicExample.svelte b/src/routes/components/switch/BasicExample.svelte
new file mode 100644
index 0000000..2cbc2f1
--- /dev/null
+++ b/src/routes/components/switch/BasicExample.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Field, Stack, Switch } from '@immich/ui';
+</script>
+
+<Stack>
+	<Switch />
+	<Switch checked />
+	<Field disabled>
+		<Switch />
+	</Field>
+</Stack>
diff --git a/src/routes/components/switch/ColorExample.svelte b/src/routes/components/switch/ColorExample.svelte
new file mode 100644
index 0000000..76f2279
--- /dev/null
+++ b/src/routes/components/switch/ColorExample.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Stack, Switch } from '@immich/ui';
+</script>
+
+<Stack>
+	<Switch color="primary" checked />
+	<Switch color="secondary" checked />
+	<Switch color="success" checked />
+	<Switch color="info" checked />
+	<Switch color="warning" checked />
+	<Switch color="danger" checked />
+</Stack>
diff --git a/src/routes/components/switch/FormExample.svelte b/src/routes/components/switch/FormExample.svelte
new file mode 100644
index 0000000..93c7638
--- /dev/null
+++ b/src/routes/components/switch/FormExample.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { Field, Stack, Switch, Text } from '@immich/ui';
+</script>
+
+<Stack>
+	<Field label="Support Immich">
+		<Switch class="flex justify-between" checked />
+	</Field>
+	<Field label="Advanced features">
+		<Switch class="flex justify-between" />
+	</Field>
+	<Field label="Sell my privacy" disabled>
+		<Switch class="flex justify-between">
+			<Text>Disabled</Text>
+		</Switch>
+	</Field>
+</Stack>