Use CSF Next (#32998)

GitOrigin-RevId: 498e15e3ae44f0a7b85e889e199d71607c420e12

services/web/.storybook/main.ts

@@ -1,7 +1,7 @@
 // This file has been automatically migrated to valid ESM format by Storybook.
 import { fileURLToPath } from 'node:url'
 import { createRequire } from 'node:module'
-import type { StorybookConfig } from '@storybook/react-webpack5'
+import { defineMain } from '@storybook/react-webpack5/node'
 import path, { dirname } from 'node:path'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
@@ -23,7 +23,7 @@ function getAbsolutePath(value: string): any {
 const invalidateBabelCacheIfNeeded = require('../frontend/macros/invalidate-babel-cache-if-needed')
 invalidateBabelCacheIfNeeded()
 
-const config: StorybookConfig = {
+export default defineMain({
   core: {
     disableTelemetry: true,
   },
@@ -122,6 +122,7 @@ const config: StorybookConfig = {
           // custom prefixes for import paths
           '@': path.join(rootDir, 'frontend/js/'),
           '@ol-types': path.join(rootDir, 'types/'),
+          '@ol-storybook': path.join(rootDir, '.storybook/'),
           '@wf': path.join(
             rootDir,
             'modules/writefull/frontend/js/integration/src/'
@@ -154,5 +155,4 @@ const config: StorybookConfig = {
       },
     }
   },
-}
-export default config
+})

services/web/.storybook/preview.tsx

@@ -1,4 +1,8 @@
-import type { Preview } from '@storybook/react-webpack5'
+import { definePreview } from '@storybook/react-webpack5'
+import addonA11y from '@storybook/addon-a11y'
+import addonDesigns from '@storybook/addon-designs'
+import addonDocs from '@storybook/addon-docs'
+import addonLinks from '@storybook/addon-links'
 
 // Storybook does not (currently) support async loading of "stories". Therefore
 // the strategy in frontend/js/i18n.ts does not work (because we cannot wait on
@@ -119,15 +123,18 @@ i18n.use(initReactI18next).init({
   },
 })
 
-const preview: Preview = {
+export default definePreview({
+  addons: [addonA11y(), addonDesigns(), addonDocs(), addonLinks()],
   parameters: {
     // Automatically mark prop-types like onClick, onToggle, etc as Storybook
     // "actions", so that they are logged in the Actions pane at the bottom of the
     // viewer
     actions: { argTypesRegex: '^on.*' },
     docs: {
-      // render stories in iframes, to isolate modals
-      inlineStories: false,
+      story: {
+        // render stories in iframes, to isolate modals
+        inline: false,
+      },
     },
     options: {
       storySort: {
@@ -182,9 +189,7 @@ const preview: Preview = {
       )
     },
   ],
-}
-
-export default preview
+})
 
 // Populate meta for top-level access in modules on import
 resetMeta()

services/web/frontend/stories/word-count-modal.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5'
 import WordCountModal from '@/features/word-count-modal/components/word-count-modal'
 import { ScopeDecorator } from './decorators/scope'
 import useFetchMock from './hooks/use-fetch-mock'
+import preview from '@ol-storybook/preview'
 
-export default {
+const meta = preview.meta({
   title: 'Editor / Modals / Word Count',
   component: WordCountModal,
   args: {
@@ -15,9 +15,7 @@ export default {
     },
   },
   decorators: [Story => ScopeDecorator(Story)],
-} satisfies Meta
-
-type Story = StoryObj<typeof WordCountModal>
+})
 
 const counts = {
   headers: 4,
@@ -31,7 +29,7 @@ const messages = [
   'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 ].join('\n')
 
-export const WordCount: Story = {
+export const WordCount = meta.story({
   decorators: [
     Story => {
       useFetchMock(fetchMock => {
@@ -45,9 +43,9 @@ export const WordCount: Story = {
       return <Story />
     },
   ],
-}
+})
 
-export const WordCountWithMessages: Story = {
+export const WordCountWithMessages = meta.story({
   decorators: [
     Story => {
       useFetchMock(fetchMock => {
@@ -61,9 +59,9 @@ export const WordCountWithMessages: Story = {
       return <Story />
     },
   ],
-}
+})
 
-export const ErrorResponse: Story = {
+export const ErrorResponse = meta.story({
   decorators: [
     Story => {
       useFetchMock(fetchMock => {
@@ -77,4 +75,4 @@ export const ErrorResponse: Story = {
       return <Story />
     },
   ],
-}
+})

services/web/tsconfig.json

@@ -22,6 +22,7 @@
       "@overleaf/ranges-tracker": ["../../libraries/ranges-tracker"],
       /* can't make this entry @types because that conflicts with the "types" entry below */
       "@ol-types/*": ["./types/*"],
+      "@ol-storybook/*": ["./.storybook/*"],
       "@wf/*": ["./modules/writefull/frontend/js/integration/src/*"],
       "@wf-tests/*": ["./modules/writefull/frontend/js/integration/tests/*"]
     },