devex: storybook for UI Package (#4984)

* add storybook

* clean up stories

* small fix

* add stories for all components

* add vintl

* default to dark mode

* fix  teleport

* add theme addon

* add new modal story

* delete broken stories

* move all stories to central stories folder

* fix paths

* add pnpm run storybook

* remove chromatic

* add add-stories.md

* fix types

* fix unncessary args field

* cover more addordion states

* pt2

* remove old vintl

* fix: missing style + ctx

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

packages/ui/src/stories/base/PreviewSelectButton.stories.ts

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import PreviewSelectButton from '../../components/base/PreviewSelectButton.vue'
+
+const meta = {
+	title: 'Base/PreviewSelectButton',
+	component: PreviewSelectButton,
+} satisfies Meta<typeof PreviewSelectButton>
+
+export default meta
+
+export const Default: StoryObj = {
+	render: () => ({
+		components: { PreviewSelectButton },
+		template: `
+			<PreviewSelectButton :checked="false">
+				<template #preview>
+					<div class="w-16 h-16 bg-brand-highlight rounded-lg" />
+				</template>
+				Option Label
+			</PreviewSelectButton>
+		`,
+	}),
+}
+
+export const AllStates: StoryObj = {
+	render: () => ({
+		components: { PreviewSelectButton },
+		template: `
+			<div class="flex gap-4">
+				<PreviewSelectButton :checked="false">
+					<template #preview>
+						<div class="w-16 h-16 bg-bg-raised rounded-lg flex items-center justify-center border border-divider">
+							<span class="text-secondary">A</span>
+						</div>
+					</template>
+					Unchecked
+				</PreviewSelectButton>
+				<PreviewSelectButton :checked="true">
+					<template #preview>
+						<div class="w-16 h-16 bg-brand-highlight rounded-lg flex items-center justify-center border border-brand">
+							<span class="text-brand">B</span>
+						</div>
+					</template>
+					Checked
+				</PreviewSelectButton>
+			</div>
+		`,
+	}),
+}
+
+export const InteractiveSelection: StoryObj = {
+	render: () => ({
+		components: { PreviewSelectButton },
+		setup() {
+			const selected = ref('dark')
+			return { selected }
+		},
+		template: `
+			<div>
+				<p class="text-sm text-secondary mb-4">Selected: {{ selected }}</p>
+				<div class="grid grid-cols-3 gap-4">
+					<PreviewSelectButton
+						:checked="selected === 'light'"
+						@click="selected = 'light'"
+					>
+						<template #preview>
+							<div class="w-16 h-16 bg-white rounded-lg border border-divider" />
+						</template>
+						Light
+					</PreviewSelectButton>
+					<PreviewSelectButton
+						:checked="selected === 'dark'"
+						@click="selected = 'dark'"
+					>
+						<template #preview>
+							<div class="w-16 h-16 bg-gray-900 rounded-lg border border-divider" />
+						</template>
+						Dark
+					</PreviewSelectButton>
+					<PreviewSelectButton
+						:checked="selected === 'oled'"
+						@click="selected = 'oled'"
+					>
+						<template #preview>
+							<div class="w-16 h-16 bg-black rounded-lg border border-divider" />
+						</template>
+						OLED
+					</PreviewSelectButton>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const ColorSelection: StoryObj = {
+	render: () => ({
+		components: { PreviewSelectButton },
+		setup() {
+			const selected = ref('brand')
+			return { selected }
+		},
+		template: `
+			<div>
+				<p class="text-sm text-secondary mb-4">Accent color: {{ selected }}</p>
+				<div class="grid grid-cols-4 gap-3">
+					<PreviewSelectButton
+						v-for="color in ['brand', 'red', 'orange', 'green', 'blue', 'purple']"
+						:key="color"
+						:checked="selected === color"
+						@click="selected = color"
+					>
+						<template #preview>
+							<div
+								class="w-12 h-12 rounded-lg"
+								:class="{
+									'bg-brand': color === 'brand',
+									'bg-red': color === 'red',
+									'bg-orange': color === 'orange',
+									'bg-green': color === 'green',
+									'bg-blue': color === 'blue',
+									'bg-purple': color === 'purple',
+								}"
+							/>
+						</template>
+						{{ color.charAt(0).toUpperCase() + color.slice(1) }}
+					</PreviewSelectButton>
+				</div>
+			</div>
+		`,
+	}),
+}