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,7 +21,8 @@
 		"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",
-    "icons:add": "pnpm --filter @modrinth/assets icons:add"
+		"storybook": "pnpm --filter @modrinth/ui storybook",
+		"icons:add": "pnpm --filter @modrinth/assets icons:add"
 	},
 	"devDependencies": {
 		"@modrinth/tooling-config": "workspace:*",

packages/ui/.storybook/main.ts

@@ -0,0 +1,18 @@
+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',
+		'@chromatic-com/storybook',
+		'@storybook/addon-vitest',
+		'@storybook/addon-a11y',
+		'@storybook/addon-docs',
+		'@storybook/addon-onboarding',
+	],
+}
+export default config

packages/ui/.storybook/preview.ts

@@ -0,0 +1,49 @@
+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 { createPlugin } from '@vintl/vintl/plugin'
+
+// Set up VIntl for Storybook - provides useVIntl() context for components
+const vintlPlugin = createPlugin({
+	controllerOpts: {
+		defaultLocale: 'en-US',
+		locale: 'en-US',
+	},
+	globalMixin: false,
+})
+
+setup((app) => {
+	app.use(vintlPlugin)
+
+	// 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<Renderer>({
+			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,68 +1,89 @@
 {
-	"name": "@modrinth/ui",
-	"version": "0.0.0",
-	"private": true,
-	"main": "./index.ts",
-	"types": "./index.ts",
-	"exports": {
-		".": {
-			"types": "./index.ts",
-			"default": "./index.ts"
-		},
-		"./pages": {
-			"types": "./src/pages/index.ts",
-			"default": "./src/pages/index.ts"
-		},
-		"./src/*": "./src/*"
-	},
-	"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"
-	},
-	"devDependencies": {
-		"@formatjs/cli": "^6.2.12",
-		"@modrinth/tooling-config": "workspace:*",
-		"@stripe/stripe-js": "^7.3.1",
-		"@vintl/unplugin": "^1.5.1",
-		"@vintl/vintl": "^4.4.1",
-		"stripe": "^18.1.1",
-		"typescript": "^5.4.5",
-		"vue": "^3.5.13",
-		"vue-component-type-helpers": "^3.1.8",
-		"vue-router": "4.3.0"
-	},
-	"dependencies": {
-		"@codemirror/commands": "^6.3.2",
-		"@codemirror/lang-markdown": "^6.2.3",
-		"@codemirror/language": "^6.9.3",
-		"@codemirror/state": "^6.3.2",
-		"@codemirror/view": "^6.22.1",
-		"@modrinth/api-client": "workspace:*",
-		"@modrinth/assets": "workspace:*",
-		"@modrinth/utils": "workspace:*",
-		"@tanstack/vue-query": "^5.90.7",
-		"@tresjs/cientos": "^4.3.0",
-		"@tresjs/core": "^4.3.4",
-		"@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": "^3.44.0",
-		"dayjs": "^1.11.10",
-		"floating-vue": "^5.2.2",
-		"fuse.js": "^6.6.2",
-		"highlight.js": "^11.9.0",
-		"markdown-it": "^13.0.2",
-		"postprocessing": "^6.37.6",
-		"qrcode.vue": "^3.4.1",
-		"three": "^0.172.0",
-		"vue-multiselect": "3.0.0",
-		"vue-select": "4.0.0-beta.6",
-		"vue-typed-virtual-list": "^1.0.10",
-		"vue3-apexcharts": "^1.4.4",
-		"xss": "^1.0.14"
-	},
-	"web-types": "../../web-types.json"
+  "name": "@modrinth/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./pages": {
+      "types": "./src/pages/index.ts",
+      "default": "./src/pages/index.ts"
+    },
+    "./src/*": "./src/*"
+  },
+  "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",
+    "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",
+    "@vintl/unplugin": "^1.5.1",
+    "@vintl/vintl": "^4.4.1",
+    "@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.3.0"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/language": "^6.9.3",
+    "@codemirror/state": "^6.3.2",
+    "@codemirror/view": "^6.22.1",
+    "@modrinth/api-client": "workspace:*",
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/utils": "workspace:*",
+    "@tanstack/vue-query": "^5.90.7",
+    "@tresjs/cientos": "^4.3.0",
+    "@tresjs/core": "^4.3.4",
+    "@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": "^3.44.0",
+    "dayjs": "^1.11.10",
+    "floating-vue": "^5.2.2",
+    "fuse.js": "^6.6.2",
+    "highlight.js": "^11.9.0",
+    "markdown-it": "^13.0.2",
+    "postprocessing": "^6.37.6",
+    "qrcode.vue": "^3.4.1",
+    "three": "^0.172.0",
+    "vue-multiselect": "3.0.0",
+    "vue-select": "4.0.0-beta.6",
+    "vue-typed-virtual-list": "^1.0.10",
+    "vue3-apexcharts": "^1.4.4",
+    "xss": "^1.0.14"
+  },
+  "web-types": "../../web-types.json"
 }

packages/ui/postcss.config.js

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