chore: storybook 10 by mikeallisonJS · Pull Request #9053 · JesusFilm/core

mikeallisonJS · 2026-04-21T20:47:45Z

Summary by CodeRabbit

Chores
- Migrated Storybook configuration from webpack to Vite-based integration across all story files.
- Standardized TypeScript module resolution settings across APIs and applications.
- Updated Storybook preview configuration from CommonJS to ES module syntax.
- Added storybook-static/ to .gitignore.

coderabbitai · 2026-04-21T20:48:21Z

Warning

Rate limit exceeded

@mikeallisonJS has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 17 minutes and 40 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 17 minutes and 40 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5ee1fb54-19eb-4862-a9c3-3e64cd813c37

📥 Commits

Reviewing files that changed from the base of the PR and between 25856a8 and 77bcd3f.

📒 Files selected for processing (1)

.storybook/preview.js

Walkthrough

Storybook configuration is migrated from webpack-based Next.js integration to Vite-based integration. TypeScript configurations across APIs are updated to explicitly set moduleResolution: "node", some test configs remove explicit CommonJS module settings, and story files across multiple packages update their Storybook type imports accordingly.

Changes

Cohort / File(s)	Summary
Storybook Core Configuration `.storybook/main.ts`, `.storybook/manager.js`, `.storybook/preview.js`, `.gitignore`	Migration from webpack-based Next.js Storybook to Vite-based setup: framework switched to `@storybook/nextjs-vite`, `webpackFinal` replaced with `viteFinal` for Emotion aliases, Apollo addon removed, experimental RSC flag removed, preview migrated to ES modules with named exports, and `storybook-static/` added to gitignore.
TypeScript App Module Resolution `apis/api-analytics/tsconfig.app.json`, `apis/api-gateway/tsconfig.app.json`, `apis/api-journeys/tsconfig.app.json`, `apis/api-languages/tsconfig.app.json`, `apis/api-media/tsconfig.app.json`, `apis/api-users/tsconfig.app.json`	Explicit `moduleResolution: "node"` added to compiler options; `apis/api-users` also expands `exclude` to omit Storybook files and `src/lib/apiUsersConfig/**`.
TypeScript Spec Module Resolution `apis/api-analytics/tsconfig.spec.json`, `apis/api-journeys/tsconfig.spec.json`, `apis/api-languages/tsconfig.spec.json`, `apis/api-media/tsconfig.spec.json`, `apis/api-users/tsconfig.spec.json`	Explicit `moduleResolution: "node"` added to compiler options.
TypeScript Spec Module Output `apps/arclight/tsconfig.spec.json`, `apps/journeys-admin/tsconfig.spec.json`, `apps/journeys/tsconfig.spec.json`, `apps/resources/tsconfig.spec.json`	Removes explicit `module: "commonjs"` override, allowing module output to inherit from base `tsconfig.json`.
API Users Stories Configuration `apis/api-users/tsconfig.json`, `apis/api-users/tsconfig.stories.json`, `apis/api-users/src/lib/apiUsersConfig/apiUsersConfig.tsx`	New `tsconfig.stories.json` created for Storybook compilation with JSX, Node/Nx typings, and story file inclusion; `tsconfig.json` references added; decorator type import switched to `storybook/internal/csf`.
Story Files: Storybook Integration Update `apis/api-journeys-modern/src/emails/stories/.stories.tsx`, `apis/api-users/src/emails/stories/.stories.tsx`, `apps/journeys-admin/src/components/*/.stories.tsx`	Meta/StoryObj imports updated from `@storybook/nextjs` to `@storybook/nextjs-vite` across 50+ story files; decorator type imports in config files also switched to `storybook/internal/csf`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'chore: storybook 10' accurately reflects the main objective of the pull request, which is a Storybook upgrade (from version 9 to 10) affecting configuration, integrations, and story files throughout the codebase.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch 26-00-MA-chore-storybook-10

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (3)

apps/watch/src/components/DialogShare/DialogShare.stories.tsx (1)
1-4: Move the renamed test import back into alphabetical order.

storybook/test is now an unscoped package import, so it should follow the react import here.
Suggested import ordering
 import { Meta, StoryObj } from '@storybook/nextjs'
-import { expect, screen, userEvent, waitFor } from 'storybook/test'
 import noop from 'lodash/noop'
 import { ComponentProps } from 'react'
+import { expect, screen, userEvent, waitFor } from 'storybook/test'
As per coding guidelines, "Use alphabetical order for imports and exports."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/watch/src/components/DialogShare/DialogShare.stories.tsx` around lines 1
- 4, The import order in DialogShare.stories.tsx is out of alphabetical order:
move the unscoped "storybook/test" import so it comes after the "react" import
(i.e., reorder the import statements so "import { ComponentProps } from 'react'"
appears before "import { expect, screen, userEvent, waitFor } from
'storybook/test'"), preserving the other imports (Meta, StoryObj from
'@storybook/nextjs' and noop from 'lodash/noop').
apps/watch/src/components/DialogDownload/DialogDownload.stories.tsx (1)
1-4: Move the renamed test import back into alphabetical order.

Now that this source is storybook/test, it should sit after the react import in this apps/watch file.
Suggested import ordering
 import { Meta, StoryObj } from '@storybook/nextjs'
-import { screen, userEvent } from 'storybook/test'
 import noop from 'lodash/noop'
 import { ComponentProps } from 'react'
+import { screen, userEvent } from 'storybook/test'
As per coding guidelines, "Use alphabetical order for imports and exports."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/watch/src/components/DialogDownload/DialogDownload.stories.tsx` around
lines 1 - 4, Reorder the imports to follow alphabetical order: move the
`storybook/test` import (symbols: `screen`, `userEvent`) so it comes after the
`react` import (symbol: `ComponentProps`) and before `@storybook/nextjs`; update
the import block in DialogDownload.stories.tsx to place `ComponentProps` before
`screen`/`userEvent` to satisfy the project's import ordering rule.
apps/watch/src/components/PageVideos/FilterList/LanguagesFilter/LanguagesFilter.stories.tsx (1)
1-3: Move the renamed test import back into alphabetical order.

storybook/test should now come after lodash/noop in this import block.
Suggested import ordering
 import { Meta, StoryObj } from '@storybook/nextjs'
-import { screen, userEvent } from 'storybook/test'
 import noop from 'lodash/noop'
+import { screen, userEvent } from 'storybook/test'
As per coding guidelines, "Use alphabetical order for imports and exports."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/watch/src/components/PageVideos/FilterList/LanguagesFilter/LanguagesFilter.stories.tsx`
around lines 1 - 3, The import statements are out of alphabetical order: move
the import that brings in screen and userEvent from 'storybook/test' so it comes
after the import of noop from 'lodash/noop' in the top of the
LanguagesFilter.stories.tsx file; ensure the import order among the symbols
Meta, StoryObj, noop, screen, and userEvent is alphabetical to follow the
project's import ordering guideline.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/arclight/next-env.d.ts`:
- Line 3: Update the triple-slash reference in next-env.d.ts: replace the
incorrect path string "./../../dist/apps/arclight/.next/types/routes.d.ts" with
the local Next build path "./.next/types/routes.d.ts" so the file references the
app's own .next types (look for the existing /// <reference
path="...routes.d.ts" /> line in next-env.d.ts and change the path portion
accordingly).

---

Nitpick comments:
In `@apps/watch/src/components/DialogDownload/DialogDownload.stories.tsx`:
- Around line 1-4: Reorder the imports to follow alphabetical order: move the
`storybook/test` import (symbols: `screen`, `userEvent`) so it comes after the
`react` import (symbol: `ComponentProps`) and before `@storybook/nextjs`; update
the import block in DialogDownload.stories.tsx to place `ComponentProps` before
`screen`/`userEvent` to satisfy the project's import ordering rule.

In `@apps/watch/src/components/DialogShare/DialogShare.stories.tsx`:
- Around line 1-4: The import order in DialogShare.stories.tsx is out of
alphabetical order: move the unscoped "storybook/test" import so it comes after
the "react" import (i.e., reorder the import statements so "import {
ComponentProps } from 'react'" appears before "import { expect, screen,
userEvent, waitFor } from 'storybook/test'"), preserving the other imports
(Meta, StoryObj from '@storybook/nextjs' and noop from 'lodash/noop').

In
`@apps/watch/src/components/PageVideos/FilterList/LanguagesFilter/LanguagesFilter.stories.tsx`:
- Around line 1-3: The import statements are out of alphabetical order: move the
import that brings in screen and userEvent from 'storybook/test' so it comes
after the import of noop from 'lodash/noop' in the top of the
LanguagesFilter.stories.tsx file; ensure the import order among the symbols
Meta, StoryObj, noop, screen, and userEvent is alphabetical to follow the
project's import ordering guideline.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 95129fbe-17e4-4a2c-96cf-87b10f03e0be

📥 Commits

Reviewing files that changed from the base of the PR and between 5d2c164 and dcd6511.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (36)

.storybook/main.ts
.storybook/manager.js
.storybook/preview.js
apis/api-analytics/tsconfig.app.json
apis/api-analytics/tsconfig.spec.json
apis/api-gateway/tsconfig.app.json
apis/api-journeys/tsconfig.app.json
apis/api-journeys/tsconfig.spec.json
apis/api-languages/tsconfig.app.json
apis/api-languages/tsconfig.spec.json
apis/api-media/tsconfig.app.json
apis/api-media/tsconfig.spec.json
apis/api-users/tsconfig.app.json
apis/api-users/tsconfig.spec.json
apps/arclight/next-env.d.ts
apps/arclight/tsconfig.spec.json
apps/journeys-admin/tsconfig.spec.json
apps/journeys/tsconfig.spec.json
apps/resources/tsconfig.spec.json
apps/short-links/tsconfig.spec.json
apps/videos-admin/src/theme/themePrimitives.ts
apps/videos-admin/tsconfig.spec.json
apps/watch/src/components/DialogDownload/DialogDownload.stories.tsx
apps/watch/src/components/DialogShare/DialogShare.stories.tsx
apps/watch/src/components/PageVideos/FilterList/LanguagesFilter/LanguagesFilter.stories.tsx
apps/watch/tsconfig.spec.json
libs/journeys/ui/src/components/ContentCarousel/ContentCarousel.tsx
libs/journeys/ui/tsconfig.spec.json
libs/shared/ai/tsconfig.spec.json
libs/shared/gql/tsconfig.spec.json
libs/shared/ui-dynamic/tsconfig.spec.json
libs/shared/ui/tsconfig.spec.json
libs/yoga/tsconfig.spec.json
package.json
tools/tsconfig.tools.json
tsconfig.base.json

💤 Files with no reviewable changes (13)

.storybook/main.ts
libs/journeys/ui/tsconfig.spec.json
libs/shared/gql/tsconfig.spec.json
apps/resources/tsconfig.spec.json
apps/watch/tsconfig.spec.json
apps/videos-admin/tsconfig.spec.json
libs/shared/ui-dynamic/tsconfig.spec.json
apps/journeys-admin/tsconfig.spec.json
libs/shared/ai/tsconfig.spec.json
apps/journeys/tsconfig.spec.json
libs/shared/ui/tsconfig.spec.json
apps/arclight/tsconfig.spec.json
apps/short-links/tsconfig.spec.json

nx-cloud · 2026-04-21T21:02:02Z

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

View your CI Pipeline Execution ↗ for commit 77bcd3f

Command	Status	Duration	Result
`nx affected --target=test --base=762cfe0c6c1b04...`	❌ Failed	48s	View ↗
`nx affected --target=test --base=762cfe0c6c1b04...`	❌ Failed	42s	View ↗
`nx affected --target=test --base=762cfe0c6c1b04...`	❌ Failed	39s	View ↗
`nx affected --target=build --base=762cfe0c6c1b0...`	✅ Succeeded	50s	View ↗
`nx affected --target=fetch-secrets --base=762cf...`	✅ Succeeded	2s	View ↗
`nx run-many --target=prisma-generate --all --pa...`	✅ Succeeded	3s	View ↗

☁️ Nx Cloud last updated this comment at 2026-04-24 00:30:23 UTC

github-actions · 2026-04-21T21:02:09Z

	Warnings
⚠️	❗ Big PR (13945 changes)

(change count - 13945): Pull Request size seems relatively large. If Pull Request contains multiple changes, split each into separate PR will helps faster, easier review.

Generated by 🚫 dangerJS against 77bcd3f

github-actions · 2026-04-21T21:04:59Z