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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import EnvironmentIndicator from '../../components/base/EnvironmentIndicator.vue'
+
+const meta = {
+	title: 'Base/EnvironmentIndicator',
+	component: EnvironmentIndicator,
+} satisfies Meta<typeof EnvironmentIndicator>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		type: 'mod',
+		clientSide: 'required',
+		serverSide: 'optional',
+	},
+}
+
+export const AllEnvironments: StoryObj = {
+	render: () => ({
+		components: { EnvironmentIndicator },
+		template: `
+			<div class="flex flex-col gap-4">
+				<div class="flex items-center gap-2">
+					<EnvironmentIndicator type="mod" clientSide="required" serverSide="optional" />
+					<span class="text-secondary text-sm">Client (required client, optional server)</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<EnvironmentIndicator type="mod" clientSide="optional" serverSide="required" />
+					<span class="text-secondary text-sm">Server (optional client, required server)</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<EnvironmentIndicator type="mod" clientSide="required" serverSide="required" />
+					<span class="text-secondary text-sm">Client and server (both required)</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<EnvironmentIndicator type="mod" clientSide="optional" serverSide="optional" />
+					<span class="text-secondary text-sm">Client or server (both optional)</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<EnvironmentIndicator type="mod" clientSide="unsupported" serverSide="unsupported" />
+					<span class="text-secondary text-sm">Unsupported</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<EnvironmentIndicator type="mod" typeOnly />
+					<span class="text-secondary text-sm">Type only</span>
+				</div>
+			</div>
+		`,
+	}),
+}