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/UnsavedChangesPopup.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import UnsavedChangesPopup from '../../components/base/UnsavedChangesPopup.vue'
+
+const meta = {
+	title: 'Base/UnsavedChangesPopup',
+	// @ts-ignore
+	component: UnsavedChangesPopup,
+} satisfies Meta<typeof UnsavedChangesPopup>
+
+export default meta
+
+export const Default: StoryObj = {
+	render: () => ({
+		components: { UnsavedChangesPopup },
+		template: `
+			<div class="relative h-32">
+				<UnsavedChangesPopup
+					:original="{ name: 'Original Name' }"
+					:modified="{ name: 'Modified Name' }"
+					@save="() => console.log('Save clicked')"
+					@reset="() => console.log('Reset clicked')"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const Saving: StoryObj = {
+	render: () => ({
+		components: { UnsavedChangesPopup },
+		template: `
+			<div class="relative h-32">
+				<UnsavedChangesPopup
+					:original="{ name: 'Original' }"
+					:modified="{ name: 'Changed' }"
+					:saving="true"
+					@save="() => console.log('Save clicked')"
+					@reset="() => console.log('Reset clicked')"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const NoResetButton: StoryObj = {
+	render: () => ({
+		components: { UnsavedChangesPopup },
+		template: `
+			<div class="relative h-32">
+				<UnsavedChangesPopup
+					:original="{ name: 'Original' }"
+					:modified="{ name: 'Changed' }"
+					:canReset="false"
+					@save="() => console.log('Save clicked')"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const Hidden: StoryObj = {
+	render: () => ({
+		components: { UnsavedChangesPopup },
+		template: `
+			<div class="relative h-32">
+				<p class="text-secondary mb-4">No changes detected - popup is hidden</p>
+				<UnsavedChangesPopup
+					:original="{ name: 'Same Value' }"
+					:modified="{ name: 'Same Value' }"
+					@save="() => console.log('Save clicked')"
+					@reset="() => console.log('Reset clicked')"
+				/>
+			</div>
+		`,
+	}),
+}