perf!: monorepo setup + fully static + webp images

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

apps/storybook/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@repo/eslint-config"]
+}

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

apps/storybook/chromatic.config.json

@@ -0,0 +1,7 @@
+{
+  "projectId": "Project:66a7a85ea85df74afbec7682",
+  "buildScriptName": "build",
+  "storybookBaseDir": "apps/storybook",
+  "onlyChanged": true,
+  "zip": true
+}

apps/storybook/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@repo/storybook",
+  "version": "3.3.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "storybook build",
+    "dev": "storybook dev --port 6006 --no-open",
+    "start": "http-server \"storybook-static\" --port 6006 --silent",
+    "test": "start-server-and-test \"dev\" http://127.0.0.1:6006 \"test:storybook\"",
+    "test:storybook": "test-storybook",
+    "test:storybook-coverage": "test-storybook --coverage",
+    "chromatic": "chromatic"
+  },
+  "dependencies": {
+    "@repo/config-tailwind": "workspace:*",
+    "@repo/i18n": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "@repo/blog": "workspace:*",
+    "next": "catalog:",
+    "next-intl": "catalog:",
+    "next-themes": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@chromatic-com/storybook": "catalog:",
+    "@playwright/test": "catalog:",
+    "@storybook/addon-a11y": "catalog:",
+    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-interactions": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/addon-storysource": "catalog:",
+    "@storybook/addon-themes": "catalog:",
+    "@storybook/blocks": "catalog:",
+    "@storybook/nextjs": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/test": "catalog:",
+    "@storybook/test-runner": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "axe-playwright": "catalog:",
+    "chromatic": "catalog:",
+    "eslint": "catalog:",
+    "http-server": "catalog:",
+    "start-server-and-test": "catalog:",
+    "storybook": "catalog:",
+    "storybook-dark-mode": "catalog:",
+    "postcss": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  }
+}

apps/storybook/postcss.config.js

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+}
+
+export default config

apps/storybook/stories/Colors.mdx

@@ -0,0 +1,31 @@
+import { Meta, Title, ColorPalette, ColorItem } from "@storybook/blocks"
+import tailwindConfig from "@repo/config-tailwind"
+
+<Meta title="Design System/Colors" />
+
+<Title>Colors</Title>
+
+<ColorPalette>
+  {Object.entries(tailwindConfig.theme.colors).map(
+    ([colorName, colorValue]) => {
+      const colors = {}
+
+      if (typeof colorValue === "string") {
+        colors[colorName] = colorValue
+      } else {
+        colors.light = colorValue.DEFAULT
+        colors.dark = colorValue.dark
+      }
+
+      return (
+        <ColorItem
+          key={colorName}
+          title={colorName}
+          colors={colors}
+        />
+      )
+    }
+
+)}
+
+</ColorPalette>

apps/storybook/tailwind.config.js

@@ -0,0 +1,9 @@
+import sharedConfig from "@repo/config-tailwind"
+
+/** @type {Pick<import('tailwindcss').Config, "presets" | "content">} */
+const config = {
+  content: [".storybook/preview.tsx", "../../packages/**/*.tsx"],
+  presets: [sharedConfig],
+}
+
+export default config