devex: storybook for UI Package

.gitignore

@@ -68,3 +68,6 @@ app-playground-data/*
 
 # labrinth demo fixtures
 apps/labrinth/fixtures/demo
+
+*storybook.log
+storybook-static

package.json

@@ -21,6 +21,7 @@
 		"prepr:frontend:lib": "turbo run prepr --filter=@modrinth/ui --filter=@modrinth/moderation --filter=@modrinth/assets --filter=@modrinth/blog --filter=@modrinth/api-client --filter=@modrinth/utils --filter=@modrinth/tooling-config",
 		"prepr:frontend:web": "turbo run prepr --filter=@modrinth/frontend",
 		"prepr:frontend:app": "turbo run prepr --filter=@modrinth/app-frontend",
+		"storybook": "pnpm --filter @modrinth/ui storybook",
 		"icons:add": "pnpm --filter @modrinth/assets icons:add",
 		"scripts": "node scripts/run.mjs"
 	},

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

packages/ui/eslint.config.mjs

@@ -1,2 +1,15 @@
-import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
-export default config
+import baseConfig from '@modrinth/tooling-config/eslint/nuxt.mjs'
+import storybook from 'eslint-plugin-storybook'
+
+export default baseConfig.append([
+	{
+		name: 'storybook',
+		files: ['**/*.stories.@(js|jsx|ts|tsx)', '**/.storybook/**/*.@(js|ts)'],
+		plugins: {
+			storybook,
+		},
+		rules: {
+			...storybook.configs.recommended.rules,
+		},
+	},
+])

packages/ui/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@modrinth/ui",
 	"version": "0.0.0",
+	"type": "module",
 	"private": true,
 	"main": "./index.ts",
 	"types": "./index.ts",
@@ -18,14 +19,34 @@
 	"scripts": {
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
-		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"src/**/*.d.ts\" --out-file src/locales/en-US/index.json --preserve-whitespace"
+		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"src/**/*.d.ts\" --out-file src/locales/en-US/index.json --preserve-whitespace",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
 		"@formatjs/cli": "^6.2.12",
 		"@modrinth/tooling-config": "workspace:*",
+		"@storybook/addon-a11y": "^10.1.10",
+		"@storybook/addon-docs": "^10.1.10",
+		"@storybook/addon-onboarding": "^10.1.10",
+		"@storybook/addon-themes": "^10.1.10",
+		"@storybook/addon-vitest": "^10.1.10",
+		"@storybook/builder-vite": "^10.1.10",
+		"@storybook/vue3-vite": "^10.1.10",
 		"@stripe/stripe-js": "^7.3.1",
+		"@tailwindcss/vite": "^4.1.18",
+		"@vitejs/plugin-vue": "^5.2.1",
+		"@vitest/browser-playwright": "^4.0.16",
+		"@vitest/coverage-v8": "^4.0.16",
+		"eslint-plugin-storybook": "^10.1.10",
+		"playwright": "^1.57.0",
+		"storybook": "^10.1.10",
 		"stripe": "^18.1.1",
+		"tailwindcss": "^3.4.4",
 		"typescript": "^5.4.5",
+		"vite": "^5.4.6",
+		"vite-svg-loader": "^5.1.0",
+		"vitest": "^4.0.16",
 		"vue": "^3.5.13",
 		"vue-component-type-helpers": "^3.1.8",
 		"vue-router": "^4.6.0"
@@ -47,6 +68,7 @@
 		"@tresjs/post-processing": "^2.4.0",
 		"@types/markdown-it": "^14.1.1",
 		"@types/three": "^0.172.0",
+		"@vintl/how-ago": "^3.0.1",
 		"@vueuse/core": "^11.1.0",
 		"apexcharts": "^4.0.0",
 		"dayjs": "^1.11.10",

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}