feat: shared components for worlds + p2p instances (#5135)

* feat: base content card component

* fix: tooltips + colors

* feat: fix orgs

* feat: add ContentModpackCard

* fix: extract types

* feat: selection v-model

* add show icon in selected for combobox with stories

* feat: add project combobox

* clean up project combobox

* feat: start install to play modal

* fix: events

* feat: figma alignments

* feat: migrate toggle to tailwind

* fix: row borders

* feat: disabled state

* feat: virtual list impl for card table based on window scroll

* fix: lint

* feat: virtualization + smaller contentcard items

* feat: fix gap + border issues on last elm

* fix: use TeleportOverflowMenu

* fix: hasUpdate type

* fix: fallback to svg if src is invalid on avatar component

* fix: storybook

* feat: start on updater modal

* feat: finish content updater modal

* feat: i18n pass

* remove install to play modal from ui package

* pnpm prepr

* feat: reusable table component

* feat: add column width prop for table and fix stories

* feat: add table overflow menu story example

* feat: add surface-1.5 and use in table

* chore: export table in index

* fix: allow more loose typing on columns

* feat: update table component to derive key from column instead of data

* feat: surface 1.5 for oled + refactor story for contentcardtable + yeet sorting funcs

* fix: lint

* feat: add no padding story for new modal

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: tdgao <mr.trumgao@gmail.com>

packages/ui/.storybook/main.ts

@@ -1,17 +1,13 @@
 import type { StorybookConfig } from '@storybook/vue3-vite'
 
 const config: StorybookConfig = {
-	framework: '@storybook/vue3-vite',
-	core: {
-		builder: '@storybook/builder-vite',
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {
+			docgen: false,
+		},
 	},
-	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',
-	],
+	stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: ['@storybook/addon-themes', '@storybook/addon-a11y'],
 }
 export default config

packages/ui/.storybook/preview.ts

@@ -2,6 +2,7 @@ import '@modrinth/assets/omorphia.scss'
 import 'floating-vue/dist/style.css'
 import '../src/styles/tailwind.css'
 
+import { GenericModrinthClient } from '@modrinth/api-client'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
@@ -17,7 +18,10 @@ import {
 } from '../src/composables/i18n'
 import {
 	AbstractWebNotificationManager,
+	I18N_INJECTION_KEY,
+	type I18nContext,
 	type NotificationPanelLocation,
+	provideModrinthClient,
 	provideNotificationManager,
 	type WebNotification,
 } from '../src/providers'
@@ -77,6 +81,17 @@ class StorybookNotificationManager extends AbstractWebNotificationManager {
 
 setup((app) => {
 	app.use(i18n)
+
+	// Provide the custom I18nContext for components using injectI18n()
+	const i18nContext: I18nContext = {
+		locale: i18n.global.locale,
+		t: (key, values) => i18n.global.t(key, values ?? {}) as string,
+		setLocale: (newLocale) => {
+			i18n.global.locale.value = newLocale
+		},
+	}
+	app.provide(I18N_INJECTION_KEY, i18nContext)
+
 	app.use(FloatingVue, {
 		themes: {
 			'ribbit-popout': {
@@ -100,10 +115,15 @@ setup((app) => {
 	}
 })
 
-// Wrapper component that provides notification manager context
-const NotificationManagerProvider = defineComponent({
+const StorybookProvider = defineComponent({
 	setup(_, { slots }) {
 		provideNotificationManager(new StorybookNotificationManager())
+
+		const modrinthClient = new GenericModrinthClient({
+			userAgent: 'modrinth-storybook/1.0.0',
+		})
+		provideModrinthClient(modrinthClient)
+
 		return () => slots.default?.()
 	},
 })
@@ -126,14 +146,13 @@ const preview: Preview = {
 			},
 			defaultTheme: 'dark',
 		}),
-		// Wrap stories with notification manager provider
 		(story) => ({
-			components: { story, NotificationManagerProvider, NotificationPanel },
+			components: { story, StorybookProvider, NotificationPanel },
 			template: /*html*/ `
-				<NotificationManagerProvider>
+				<StorybookProvider>
 					<NotificationPanel />
 					<story />
-				</NotificationManagerProvider>
+				</StorybookProvider>
 			`,
 		}),
 	],