feat: add react-cosmos

.github/actions/setup/action.yml

@@ -23,6 +23,10 @@ runs:
       shell: bash
       run: pnpm build:mdx
 
+    - name: Build Cosmos
+      shell: bash
+      run: pnpm cosmos:export
+
     - name: Generate Next.js route types
       shell: bash
       run: pnpm typegen

.gitignore

@@ -26,3 +26,7 @@ src/tests/e2e/.auth/
 # TypeScript
 *.tsbuildinfo
 next-env.d.ts
+
+# Cosmos
+cosmos.imports.ts
+cosmos-export

cosmos.config.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/react-cosmos/config.schema.json",
+  "rendererUrl": {
+    "dev": "http://localhost:3000/cosmos/<fixture>",
+    "export": "/cosmos/<fixture>.html"
+  },
+  "port": 3002
+}

eslint.config.ts

@@ -20,7 +20,7 @@ export default defineConfig(
     },
     importX: {
       noNamespace: {
-        ignore: ['./schemas'],
+        ignore: ['./schemas', '../../../../cosmos.imports'],
       },
     },
   },
@@ -52,4 +52,10 @@ export default defineConfig(
       ],
     },
   },
+  {
+    files: ['src/components/ui/*.fixture.tsx'],
+    rules: {
+      '@next/next/no-html-link-for-pages': 'off',
+    },
+  },
 )

knip.config.ts

@@ -6,6 +6,8 @@ const config: KnipConfig = {
     'postcss',
     // Required by react-email
     '@react-email/preview-server',
+    // Required by react-cosmos
+    'react-cosmos-core',
   ],
   ignore: ['src/components/ui/*.tsx'],
   entry: ['content-collections.ts', 'src/db/reset.ts', 'src/db/seed.ts'],

next.config.ts

@@ -113,22 +113,10 @@ const config: NextConfig = {
             key: 'Strict-Transport-Security',
             value: 'max-age=31536000; includeSubDomains; preload',
           },
-          {
-            key: 'X-Frame-Options',
-            value: 'SAMEORIGIN',
-          },
           {
             key: 'X-Content-Type-Options',
             value: 'nosniff',
           },
-          {
-            key: 'X-DNS-Prefetch-Control',
-            value: 'on',
-          },
-          {
-            key: 'X-XSS-Protection',
-            value: '1; mode=block',
-          },
         ],
       },
     ]

package.json

@@ -6,11 +6,13 @@
   "type": "module",
   "scripts": {
     "analyze": "next experimental-analyze",
-    "build": "pnpm with-env next build",
+    "build": "pnpm cosmos:export && pnpm with-env next build",
     "build:mdx": "content-collections build",
     "check": "pnpm lint && pnpm typecheck && pnpm format:check && pnpm knip && pnpm check:i18n && pnpm lint:spell",
     "check:i18n": "i18n-check -s en -l ./src/i18n/messages -u ./src -f next-intl",
     "clean": "rm -rf coverage .content-collections test-results playwright-report tsconfig.tsbuildinfo .next next-env.d.ts node_modules",
+    "cosmos": "cosmos --expose-imports",
+    "cosmos:export": "cosmos-export --expose-imports",
     "db:check": "pnpm with-env drizzle-kit check",
     "db:generate": "pnpm with-env drizzle-kit generate",
     "db:migrate": "pnpm with-env drizzle-kit migrate",
@@ -156,6 +158,9 @@
     "postgres": "3.4.8",
     "prettier": "3.8.1",
     "prettier-plugin-packagejson": "3.0.0",
+    "react-cosmos": "7.1.1",
+    "react-cosmos-core": "7.1.1",
+    "react-cosmos-next": "7.1.1",
     "schema-dts": "1.1.5",
     "tailwindcss": "4.2.1",
     "tsx": "4.21.0",