perf!: monorepo setup + fully static + webp images

BREAKING CHANGE: minimum supported Node.js >= 22.0.0 and pnpm >= 9.5.0

apps/storybook/.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from "@storybook/nextjs"
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    defaultName: "Documentation",
+  },
+  stories: ["../../../packages/**/*.stories.tsx", "../stories/*.mdx"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-storysource",
+    "@storybook/addon-a11y",
+    "@storybook/addon-links",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  features: {
+    experimentalRSC: true,
+  },
+  typescript: {
+    check: false,
+    reactDocgen: "react-docgen-typescript",
+  },
+  staticDirs: ["../../website/public"],
+}
+
+export default config

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,52 @@
+import "@repo/config-tailwind/styles.css"
+import { defaultTranslationValues, Locale } from "@repo/i18n/config"
+import i18nMessagesEnglish from "@repo/i18n/translations/en-US.json"
+import type { Preview } from "@storybook/react"
+import { NextIntlClientProvider } from "next-intl"
+import { ThemeProvider as NextThemeProvider } from "next-themes"
+import React from "react"
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    options: {
+      storySort: {
+        order: ["Design System", "User Interface", "Errors", "Feature"],
+      },
+    },
+    backgrounds: { disable: true },
+    darkMode: {
+      darkClass: "dark",
+      lightClass: "light",
+      classTarget: "html",
+      stylePreview: true,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      const locale = "en-US" satisfies Locale
+
+      return (
+        <NextThemeProvider enableColorScheme={false}>
+          <NextIntlClientProvider
+            messages={i18nMessagesEnglish}
+            locale={locale}
+            defaultTranslationValues={defaultTranslationValues}
+          >
+            <Story />
+          </NextIntlClientProvider>
+        </NextThemeProvider>
+      )
+    },
+  ],
+}
+
+export default preview

apps/storybook/.storybook/test-runner.ts

@@ -0,0 +1,35 @@
+import type { TestRunnerConfig } from "@storybook/test-runner"
+import { getStoryContext } from "@storybook/test-runner"
+
+import { checkA11y, configureAxe, injectAxe } from "axe-playwright"
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page)
+  },
+  async postVisit(page, context) {
+    const storyContext = await getStoryContext(page, context)
+
+    if (storyContext.parameters?.a11y?.disable) {
+      return
+    }
+
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    })
+
+    await checkA11y(page, "#storybook-root", {
+      verbose: false,
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    })
+  },
+}
+
+export default config