chore: Add Storybook to e2e test playground

Author: franky47

.gitignore

@@ -10,3 +10,5 @@ package-lock.json
 .turbo/
 .vercel
 .tsbuildinfo
+
+*storybook.log

packages/e2e/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+import { join, dirname } from 'path'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions')
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {}
+  }
+}
+export default config

packages/e2e/package.json

@@ -17,7 +17,9 @@
     "pretest": "cypress install",
     "test": "start-server-and-test start http://localhost:3001${BASE_PATH} cypress:run",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run --headless"
+    "cypress:run": "cypress run --headless",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "next": "14.2.15",
@@ -26,6 +28,14 @@
     "react-dom": "catalog:react19rc"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/nextjs": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
@@ -36,6 +46,7 @@
     "cypress-terminal-report": "^7.0.3",
     "semver": "^7.6.3",
     "start-server-and-test": "^2.0.8",
+    "storybook": "^8.4.2",
     "typescript": "^5.6.3"
   }
 }

packages/e2e/src/stories/Page.stories.tsx

@@ -0,0 +1,24 @@
+import { NuqsAdapter } from 'nuqs/adapters/next'
+import { Page as PageComponent } from './Page'
+
+export default {
+  title: 'Pages/Cache',
+  component: PageComponent,
+  parameters: {
+    layout: 'fullscreen',
+    nextjs: {
+      appDirectory: true
+    }
+  },
+  features: {
+    experimentalRSC: true
+  }
+}
+
+export const Page = async () => {
+  return (
+    <NuqsAdapter>
+      <PageComponent searchParams={Promise.resolve({ query: 'search term' })} />
+    </NuqsAdapter>
+  )
+}

packages/e2e/src/stories/Page.tsx

@@ -0,0 +1,13 @@
+import type { SearchParams } from 'nuqs/server'
+import { NestedComponent } from './nested-component'
+import { searchParamsCache } from './search-params'
+
+export async function Page({
+  searchParams
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const parsed = await searchParamsCache.parse(searchParams)
+  console.dir(parsed)
+  return <NestedComponent />
+}

packages/e2e/src/stories/nested-component.tsx

@@ -0,0 +1,6 @@
+import { searchParamsCache } from './search-params'
+
+export const NestedComponent = () => {
+  const all = searchParamsCache.all()
+  return <pre>{JSON.stringify(all)}</pre>
+}

packages/e2e/src/stories/search-params.ts

@@ -0,0 +1,10 @@
+import {
+  createSearchParamsCache,
+  parseAsInteger,
+  parseAsString
+} from 'nuqs/server'
+
+export const searchParamsCache = createSearchParamsCache({
+  foo: parseAsString,
+  bar: parseAsInteger.withDefault(0)
+})