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/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+	framework: '@storybook/vue3-vite',
+	core: {
+		builder: '@storybook/builder-vite',
+	},
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		'@storybook/addon-themes',
+		'@storybook/addon-vitest',
+		'@storybook/addon-a11y',
+		'@storybook/addon-docs',
+		'@storybook/addon-onboarding',
+	],
+}
+export default config

packages/ui/.storybook/preview.ts

@@ -0,0 +1,80 @@
+import '@modrinth/assets/omorphia.scss'
+import 'floating-vue/dist/style.css'
+import '../src/styles/tailwind.css'
+
+import { withThemeByClassName } from '@storybook/addon-themes'
+import type { Preview } from '@storybook/vue3-vite'
+import { setup } from '@storybook/vue3-vite'
+import FloatingVue from 'floating-vue'
+import { createI18n } from 'vue-i18n'
+
+import {
+	buildLocaleMessages,
+	createMessageCompiler,
+	type CrowdinMessages,
+} from '../src/composables/i18n'
+
+// Load locale messages from the UI package's locales
+// @ts-ignore
+const localeModules = import.meta.glob('../src/locales/*/index.json', {
+	eager: true,
+}) as Record<string, { default: CrowdinMessages }>
+
+// Set up vue-i18n for Storybook - provides useVIntl() context for components
+const i18n = createI18n({
+	legacy: false,
+	locale: 'en-US',
+	fallbackLocale: 'en-US',
+	messageCompiler: createMessageCompiler(),
+	missingWarn: false,
+	fallbackWarn: false,
+	messages: buildLocaleMessages(localeModules),
+})
+
+setup((app) => {
+	app.use(i18n)
+	app.use(FloatingVue, {
+		themes: {
+			'ribbit-popout': {
+				$extend: 'dropdown',
+				placement: 'bottom-end',
+				instantMove: true,
+				distance: 8,
+			},
+			'dismissable-prompt': {
+				$extend: 'dropdown',
+				placement: 'bottom-start',
+			},
+		},
+	})
+
+	// Create teleport target for components that use <Teleport to="#teleports">
+	if (typeof document !== 'undefined' && !document.getElementById('teleports')) {
+		const teleportTarget = document.createElement('div')
+		teleportTarget.id = 'teleports'
+		document.body.appendChild(teleportTarget)
+	}
+})
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+	decorators: [
+		withThemeByClassName({
+			themes: {
+				light: 'light-mode',
+				dark: 'dark-mode',
+				oled: 'oled-mode',
+			},
+			defaultTheme: 'dark',
+		}),
+	],
+}
+
+export default preview