[storybook] Update Storybook and add a control for BS3/BS5 (#20948)

* [storybook] Update Storybook to version 8.3.5

* [storybook] Run storybook with `--no-open`. Fixes xdg-utils issue

* [storybook] Create decorator for BS3/BS5

* [storybook] Add `bsVersionDecorator` to stories

* [storybook] Fix bugs in stories

* [storybook] Fixup `useMeta` type. Use `DeepPartial`

* [storybook] Fix types

GitOrigin-RevId: 48c0f0fefb1ab2d4863ab59051b900b1908a613c

services/web/.storybook/main.ts

@@ -77,6 +77,7 @@ const config: StorybookConfig = {
           fs: false,
           os: false,
           module: false,
+          tty: require.resolve('tty-browserify'),
         },
         extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.json'],
         alias: {

services/web/.storybook/preview.tsx

@@ -9,10 +9,14 @@ import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 // @ts-ignore
 import en from '../../../services/web/locales/en.json'
+import { bootstrapVersionArg } from './utils/with-bootstrap-switcher'
 
-function resetMeta() {
+function resetMeta(bootstrapVersion?: 3 | 5) {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-i18n', { currentLangCode: 'en' })
+  if (bootstrapVersion) {
+    window.metaAttributesCache.set('ol-bootstrapVersion', bootstrapVersion)
+  }
   window.metaAttributesCache.set('ol-ExposedSettings', {
     adminEmail: 'placeholder@example.com',
     appName: 'Overleaf',
@@ -161,11 +165,14 @@ const preview: Preview = {
   decorators: [
     (Story, context) => {
       const { bootstrap3Style, bootstrap5Style } = context.loaded
-      const activeStyle = context.parameters.bootstrap5
-        ? bootstrap5Style
-        : bootstrap3Style
+      const bootstrapVersion = Number(
+        context.args[bootstrapVersionArg] ||
+          (context.parameters.bootstrap5 ? 5 : 3)
+      ) as 3 | 5
+      const activeStyle =
+        bootstrapVersion === 5 ? bootstrap5Style : bootstrap3Style
 
-      resetMeta()
+      resetMeta(bootstrapVersion)
 
       return (
         <>

services/web/.storybook/utils/with-bootstrap-switcher.tsx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/react'
+
+export const bootstrapVersionArg = 'bootstrapVersion'
+
+export const bsVersionDecorator: Meta = {
+  argTypes: {
+    [bootstrapVersionArg]: {
+      name: 'Bootstrap Version',
+      description: 'Bootstrap version for components',
+      control: { type: 'inline-radio' },
+      options: ['3', '5'],
+    },
+  },
+}

services/web/.storybook/utils/with-split-tests.tsx

@@ -5,7 +5,7 @@ import { SplitTestContext } from '../../frontend/js/shared/context/split-test-co
 export const splitTestsArgTypes = {
   'local-ccy-format-v2': {
     description: 'Use local currency formatting',
-    control: { type: 'radio' },
+    control: { type: 'radio' as const },
     options: ['default', 'enabled'],
   },
 }

services/web/frontend/stories/chat.stories.jsx

@@ -2,6 +2,7 @@ import ChatPane from '../js/features/chat/components/chat-pane'
 import useFetchMock from './hooks/use-fetch-mock'
 import { generateMessages } from './fixtures/chat-messages'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const Conversation = args => {
   useFetchMock(fetchMock => {
@@ -42,6 +43,7 @@ export default {
   component: ChatPane,
   argTypes: {
     resetUnreadMessages: { action: 'resetUnreadMessages' },
+    ...bsVersionDecorator.argTypes,
   },
   args: {
     resetUnreadMessages: () => {},

services/web/frontend/stories/clone-project-modal.stories.jsx

@@ -1,6 +1,7 @@
 import useFetchMock from './hooks/use-fetch-mock'
 import CloneProjectModal from '../js/features/clone-project-modal/components/clone-project-modal'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const Success = args => {
   useFetchMock(fetchMock => {
@@ -56,6 +57,7 @@ export default {
     handleHide: { action: 'close modal' },
     openProject: { action: 'open project' },
     handleAfterCloned: { action: 'after cloned' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [ScopeDecorator],
 }

services/web/frontend/stories/contact-us-modal.stories.tsx

@@ -5,6 +5,7 @@ import fixedHelpSuggestionSearch from '../../modules/support/test/frontend/util/
 import { ScopeDecorator } from './decorators/scope'
 import { StoryObj } from '@storybook/react'
 import OLButton from '@/features/ui/components/ol/ol-button'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 type Story = StoryObj<typeof ContactUsModal>
 type ContactUsModalProps = ComponentProps<typeof ContactUsModal>
@@ -132,5 +133,6 @@ export default {
   },
   argTypes: {
     handleHide: { action: 'close modal' },
+    ...bsVersionDecorator.argTypes,
   },
 }

services/web/frontend/stories/editor-left-menu/actions-menu.stories.tsx

@@ -4,10 +4,14 @@ import { mockCompile, mockCompileError } from '../fixtures/compile'
 import { document, mockDocument } from '../fixtures/document'
 import useFetchMock from '../hooks/use-fetch-mock'
 import { useScope } from '../hooks/use-scope'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / Left Menu / Actions Menu',
   component: ActionsMenu,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
   decorators: [
     (Story: any) => ScopeDecorator(Story, { mockCompileOnLoad: false }),
   ],

services/web/frontend/stories/editor-navigation-toolbar.stories.jsx

@@ -1,5 +1,6 @@
 import ToolbarHeader from '../js/features/editor-navigation-toolbar/components/toolbar-header'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const UpToThreeConnectedUsers = args => {
   return <ToolbarHeader {...args} />
@@ -32,6 +33,7 @@ export default {
     toggleChatOpen: { action: 'toggleChatOpen' },
     openShareModal: { action: 'openShareModal' },
     onShowLeftMenuClick: { action: 'onShowLeftMenuClick' },
+    ...bsVersionDecorator.argTypes,
   },
   args: {
     projectName: 'Overleaf Project',

services/web/frontend/stories/editor-switch.stories.jsx

@@ -1,10 +1,14 @@
 import EditorSwitch from '../js/features/source-editor/components/editor-switch'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / Switch',
   component: EditorSwitch,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }
 
 export const Switcher = () => {

services/web/frontend/stories/feedback-badge.stories.tsx

@@ -1,5 +1,6 @@
 import { ScopeDecorator } from './decorators/scope'
 import { FeedbackBadge } from '@/shared/components/feedback-badge'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const WithDefaultText = () => {
   return (
@@ -32,4 +33,7 @@ export default {
   title: 'Shared / Components / Feedback Badge',
   component: FeedbackBadge,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/file-tree.stories.jsx

@@ -6,6 +6,7 @@ import useFetchMock from './hooks/use-fetch-mock'
 import { ScopeDecorator } from './decorators/scope'
 import { useScope } from './hooks/use-scope'
 import { useIdeContext } from '@/shared/context/ide-context'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 const MOCK_DELAY = 2000
 
@@ -163,6 +164,7 @@ export default {
   argTypes: {
     onInit: { action: 'onInit' },
     onSelect: { action: 'onSelect' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [
     ScopeDecorator,

services/web/frontend/stories/file-view/file-view.stories.jsx

@@ -1,6 +1,7 @@
 import FileView from '../../js/features/file-view/components/file-view'
 import useFetchMock from '../hooks/use-fetch-mock'
 import { ScopeDecorator } from '../decorators/scope'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const bodies = {
   latex: `\\documentclass{article}
@@ -207,6 +208,7 @@ export default {
   component: FileView,
   argTypes: {
     storeReferencesKeys: { action: 'store references keys' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [ScopeDecorator],
 }

services/web/frontend/stories/history/document-diff-viewer.stories.tsx

@@ -2,6 +2,7 @@ import { ScopeDecorator } from '../decorators/scope'
 import DocumentDiffViewer from '../../js/features/history/components/diff-view/document-diff-viewer'
 import React from 'react'
 import { Highlight } from '../../js/features/history/services/types/doc'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const highlights: Highlight[] = [
   {
@@ -132,6 +133,7 @@ export default {
     highlights: {
       table: { disable: true },
     },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [
     ScopeDecorator,

services/web/frontend/stories/history/history-version.stories.tsx

@@ -2,6 +2,7 @@ import HistoryVersionComponent from '../../js/features/history/components/change
 import { ScopeDecorator } from '../decorators/scope'
 import { HistoryProvider } from '../../js/features/history/context/history-context'
 import { disableControlsOf } from '../utils/arg-types'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const update = {
   fromV: 3,
@@ -67,16 +68,19 @@ export default {
     setActiveDropdownItem: () => {},
     closeDropdownForItem: () => {},
   },
-  argTypes: disableControlsOf(
-    'update',
-    'currentUserId',
-    'projectId',
-    'setSelection',
-    'dropdownOpen',
-    'dropdownActive',
-    'setActiveDropdownItem',
-    'closeDropdownForItem'
-  ),
+  argTypes: {
+    ...disableControlsOf(
+      'update',
+      'currentUserId',
+      'projectId',
+      'setSelection',
+      'dropdownOpen',
+      'dropdownActive',
+      'setActiveDropdownItem',
+      'closeDropdownForItem'
+    ),
+    ...bsVersionDecorator.argTypes,
+  },
   decorators: [
     ScopeDecorator,
     (Story: React.ComponentType) => (

services/web/frontend/stories/history/label-version.stories.tsx

@@ -2,6 +2,7 @@ import LabelListItemComponent from '../../js/features/history/components/change-
 import { ScopeDecorator } from '../decorators/scope'
 import { HistoryProvider } from '../../js/features/history/context/history-context'
 import { disableControlsOf } from '../utils/arg-types'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const labels = [
   {
@@ -49,17 +50,20 @@ export default {
     setActiveDropdownItem: () => {},
     closeDropdownForItem: () => {},
   },
-  argTypes: disableControlsOf(
-    'labels',
-    'version',
-    'currentUserId',
-    'projectId',
-    'setSelection',
-    'dropdownOpen',
-    'dropdownActive',
-    'setActiveDropdownItem',
-    'closeDropdownForItem'
-  ),
+  argTypes: {
+    ...disableControlsOf(
+      'labels',
+      'version',
+      'currentUserId',
+      'projectId',
+      'setSelection',
+      'dropdownOpen',
+      'dropdownActive',
+      'setActiveDropdownItem',
+      'closeDropdownForItem'
+    ),
+    ...bsVersionDecorator.argTypes,
+  },
   decorators: [
     ScopeDecorator,
     (Story: React.ComponentType) => (

services/web/frontend/stories/history/toggle-switch.stories.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import ToggleSwitchComponent from '../../js/features/history/components/change-list/toggle-switch'
 import { ScopeDecorator } from '../decorators/scope'
 import { HistoryProvider } from '../../js/features/history/context/history-context'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const HistoryAndLabelsToggleSwitch = () => {
   const [labelsOnly, setLabelsOnly] = useState(false)
@@ -30,6 +31,7 @@ export default {
         disable: true,
       },
     },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [
     ScopeDecorator,

services/web/frontend/stories/hooks/use-meta.tsx

@@ -1,7 +1,13 @@
+import type { Meta } from '@/utils/meta'
+
+type DeepPartial<T> = T extends object
+  ? { [P in keyof T]?: DeepPartial<T[P]> }
+  : T
+
 /**
  * Set values on window.metaAttributesCache, for use in Storybook stories
  */
-export const useMeta = (meta: Record<string, unknown>) => {
+export const useMeta = (meta: DeepPartial<Meta>) => {
   for (const [key, value] of Object.entries(meta)) {
     window.metaAttributesCache.set(key, value)
   }

services/web/frontend/stories/hotkeys-modal.stories.jsx

@@ -1,4 +1,5 @@
 import HotkeysModal from '../js/features/hotkeys-modal/components/hotkeys-modal'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const ReviewEnabled = args => {
   return <HotkeysModal {...args} />
@@ -23,5 +24,6 @@ export default {
   },
   argTypes: {
     handleHide: { action: 'handleHide' },
+    ...bsVersionDecorator.argTypes,
   },
 }

services/web/frontend/stories/loading/loading.stories.tsx

@@ -1,12 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Loading } from '@/features/ide-react/components/loading'
 import { EditorProviders } from '../../../test/frontend/helpers/editor-providers'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const meta: Meta<typeof Loading> = {
   title: 'Loading Page / Loading',
   component: Loading,
   argTypes: {
     setLoaded: { action: 'setLoaded' },
+    ...bsVersionDecorator.argTypes,
   },
 }
 

services/web/frontend/stories/modals/create-file/create-file-modal-footer.stories.jsx

@@ -3,6 +3,7 @@ import {
   ModalContentDecorator,
 } from '../modal-decorators'
 import { FileTreeModalCreateFileFooterContent } from '../../../js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-footer'
+import { bsVersionDecorator } from '../../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Valid = args => <FileTreeModalCreateFileFooterContent {...args} />
 
@@ -57,6 +58,7 @@ export default {
   },
   argTypes: {
     cancel: { action: 'cancel' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [ModalFooterDecorator, ModalContentDecorator],
 }

services/web/frontend/stories/modals/create-file/create-file-modal.stories.jsx

@@ -7,6 +7,7 @@ import useFetchMock from '../../hooks/use-fetch-mock'
 import { ScopeDecorator } from '../../decorators/scope'
 import { useScope } from '../../hooks/use-scope'
 import getMeta from '@/utils/meta'
+import { bsVersionDecorator } from '../../../../.storybook/utils/with-bootstrap-switcher'
 
 export const MinimalFeatures = args => {
   useFetchMock(mockCreateFileModalFetch)
@@ -90,4 +91,7 @@ export default {
   title: 'Editor / Modals / Create File',
   component: FileTreeModalCreateFile,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/modals/create-file/create-file-name-input.stories.jsx

@@ -5,6 +5,7 @@ import {
   DuplicateFilenameError,
 } from '../../../js/features/file-tree/errors'
 import { ModalBodyDecorator, ModalContentDecorator } from '../modal-decorators'
+import { bsVersionDecorator } from '../../../../.storybook/utils/with-bootstrap-switcher'
 
 export const DefaultLabel = args => (
   <FileTreeCreateNameProvider initialName="example.tex">
@@ -64,4 +65,7 @@ export default {
   args: {
     inFlight: false,
   },
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/modals/create-file/error-message.stories.jsx

@@ -5,6 +5,7 @@ import {
   DuplicateFilenameError,
   InvalidFilenameError,
 } from '../../../js/features/file-tree/errors'
+import { bsVersionDecorator } from '../../../../.storybook/utils/with-bootstrap-switcher'
 
 export const KeyedErrors = () => {
   return (
@@ -103,4 +104,7 @@ export const SpecificClassErrors = () => {
 export default {
   title: 'Editor / Modals / Create File / Error Message',
   component: ErrorMessage,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/outline.stories.jsx

@@ -1,5 +1,6 @@
 import OutlinePane from '../js/features/outline/components/outline-pane'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const Basic = args => <OutlinePane {...args} />
 Basic.args = {
@@ -51,6 +52,7 @@ export default {
     jumpToLine: { action: 'jumpToLine' },
     onToggle: { action: 'onToggle' },
     toggleExpanded: { action: 'toggleExpanded' },
+    ...bsVersionDecorator.argTypes,
   },
   args: {
     isTexFile: true,

services/web/frontend/stories/pdf-preview-error-boundary.stories.jsx

@@ -1,10 +1,14 @@
 import PdfPreviewErrorBoundaryFallback from '../js/features/pdf-preview/components/pdf-preview-error-boundary-fallback'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / PDF Preview / Error Boundary',
   component: PdfPreviewErrorBoundaryFallback,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }
 
 export const PreviewErrorBoundary = () => {

services/web/frontend/stories/pdf-preview-messages.stories.jsx

@@ -3,10 +3,14 @@ import { useLocalCompileContext } from '../js/shared/context/local-compile-conte
 import { useEffect } from 'react'
 import { PdfPreviewMessages } from '../js/features/pdf-preview/components/pdf-preview-messages'
 import CompileTimeWarningUpgradePrompt from '@/features/pdf-preview/components/compile-time-warning-upgrade-prompt'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / PDF Preview / Messages',
   component: PdfPreviewMessages,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
   decorators: [ScopeDecorator],
 }
 

services/web/frontend/stories/pdf-preview-messages.stories.tsx

@@ -1,10 +1,14 @@
 import { ScopeDecorator } from './decorators/scope'
 import { PdfPreviewMessages } from '@/features/pdf-preview/components/pdf-preview-messages'
 import { CompileTimeWarningUpgradePromptInner } from '@/features/pdf-preview/components/compile-time-warning-upgrade-prompt-inner'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / PDF Preview / Messages',
   component: PdfPreviewMessages,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
   decorators: [
     ScopeDecorator,
     (Story: any) => (

services/web/frontend/stories/pdf-preview.stories.jsx

@@ -22,6 +22,7 @@ import {
 import { cloneDeep } from 'lodash'
 import { ScopeDecorator } from './decorators/scope'
 import { PdfPreviewProvider } from '@/features/pdf-preview/components/pdf-preview-provider'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / PDF Preview',
@@ -32,6 +33,9 @@ export default {
     PdfPreviewError,
   },
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }
 
 export const Interactive = () => {

services/web/frontend/stories/pdf-viewer.stories.jsx

@@ -10,11 +10,15 @@ import {
 import { useEffect, Suspense } from 'react'
 import { ScopeDecorator } from './decorators/scope'
 import { PdfPreviewProvider } from '@/features/pdf-preview/components/pdf-preview-provider'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export default {
   title: 'Editor / PDF Viewer',
   component: PdfViewer,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }
 
 export const Interactive = () => {

services/web/frontend/stories/project-list/add-affiliation.stories.tsx

@@ -3,6 +3,7 @@ import { ProjectListProvider } from '../../js/features/project-list/context/proj
 import useFetchMock from '../hooks/use-fetch-mock'
 import { projectsData } from '../../../test/frontend/features/project-list/fixtures/projects-data'
 import getMeta from '@/utils/meta'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Add = (args: any) => {
   Object.assign(getMeta('ol-ExposedSettings'), {
@@ -26,4 +27,7 @@ export const Add = (args: any) => {
 export default {
   title: 'Project List / Affiliation',
   component: AddAffiliation,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/color-picker.stories.tsx

@@ -1,5 +1,6 @@
 import { ColorPicker } from '../../js/features/project-list/components/color-picker/color-picker'
 import { ColorPickerProvider } from '../../js/features/project-list/context/color-picker-context'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Select = (args: any) => {
   return (
@@ -12,4 +13,7 @@ export const Select = (args: any) => {
 export default {
   title: 'Project List / Color Picker',
   component: ColorPicker,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/compile-and-download-project-pdf.stories.tsx

@@ -2,6 +2,7 @@ import ProjectListTable from '../../js/features/project-list/components/table/pr
 import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context'
 import useFetchMock from '../hooks/use-fetch-mock'
 import { projectsData } from '../../../test/frontend/features/project-list/fixtures/projects-data'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Successful = (args: any) => {
   window.metaAttributesCache.set('ol-user_id', '624333f147cfd8002622a1d3')
@@ -62,4 +63,7 @@ export default {
       </div>
     ),
   ],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/current-plan-widget.stories.tsx

@@ -1,4 +1,5 @@
 import CurrentPlanWidget from '../../js/features/project-list/components/current-plan-widget/current-plan-widget'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const FreePlan = (args: any) => {
   window.metaAttributesCache.set('ol-usersBestSubscription', {
@@ -55,4 +56,7 @@ export const PaidPlanActive = (args: any) => {
 export default {
   title: 'Project List / Current Plan Widget',
   component: CurrentPlanWidget,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/inr-banner.stories.tsx

@@ -1,4 +1,5 @@
 import INRBanner from '@/features/project-list/components/notifications/ads/inr-banner'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Default = () => {
   return <INRBanner />
@@ -7,4 +8,7 @@ export const Default = () => {
 export default {
   title: 'Project List / INR Banner',
   component: INRBanner,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/new-project-button.stories.tsx

@@ -2,6 +2,7 @@ import NewProjectButton from '../../js/features/project-list/components/new-proj
 import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context'
 import useFetchMock from '../hooks/use-fetch-mock'
 import getMeta from '@/utils/meta'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const templateLinks = [
   {
@@ -99,4 +100,7 @@ export const Error = () => {
 export default {
   title: 'Project List / New Project Button',
   component: NewProjectButton,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/notifications-new.stories.tsx

@@ -13,6 +13,7 @@ import {
   setReconfirmAffiliationMeta,
   setReconfirmationMeta,
 } from './helpers/emails'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const ProjectInvite = (args: any) => {
   useFetchMock(commonSetupMocks)
@@ -316,4 +317,7 @@ export const ReconfirmedAffiliationSuccess = (args: any) => {
 export default {
   title: 'Project List / Notifications New Style',
   component: UserNotifications,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/notifications.stories.tsx

@@ -13,6 +13,8 @@ import {
   setReconfirmAffiliationMeta,
   setReconfirmationMeta,
 } from './helpers/emails'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
+import { useMeta } from '../hooks/use-meta'
 
 export const ProjectInvite = (args: any) => {
   useFetchMock(commonSetupMocks)
@@ -145,6 +147,10 @@ export const DropBoxUnlinkedDueToLapsedReconfirmation = (args: any) => {
     templateKey: 'notification_dropbox_unlinked_due_to_lapsed_reconfirmation',
   })
 
+  useMeta({
+    'ol-user': { features: {} },
+  })
+
   return (
     <ProjectListProvider>
       <UserNotifications {...args} />
@@ -338,4 +344,7 @@ export const ReconfirmedAffiliationSuccess = (args: any) => {
 export default {
   title: 'Project List / Notifications',
   component: UserNotifications,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/project-list.stories.tsx

@@ -8,6 +8,7 @@ import {
 import { useMeta } from '../hooks/use-meta'
 import { tags } from '../../../test/frontend/features/project-list/fixtures/tags-data'
 import { v4 as uuid } from 'uuid'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const MOCK_DELAY = 500
 
@@ -57,4 +58,7 @@ export default {
       </div>
     ),
   ],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/project-search.stories.tsx

@@ -2,6 +2,7 @@ import SearchForm from '../../js/features/project-list/components/search-form'
 import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context'
 import useFetchMock from '../hooks/use-fetch-mock'
 import { projectsData } from '../../../test/frontend/features/project-list/fixtures/projects-data'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Search = (args: any) => {
   useFetchMock(fetchMock => {
@@ -24,4 +25,7 @@ export default {
   args: {
     inputValue: '',
   },
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/survey-widget.stories.tsx

@@ -1,4 +1,5 @@
 import SurveyWidget from '../../js/features/project-list/components/survey-widget'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Survey = (args: any) => {
   localStorage.clear()
@@ -28,4 +29,7 @@ export const EmptySurvey = (args: any) => {
 export default {
   title: 'Project List / Survey Widget',
   component: SurveyWidget,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/project-list/system-messages.stories.tsx

@@ -1,6 +1,7 @@
 import SystemMessages from '@/shared/components/system-messages'
 import useFetchMock from '../hooks/use-fetch-mock'
 import { FetchMockStatic } from 'fetch-mock'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const SystemMessage = (args: any) => {
   useFetchMock((fetchMock: FetchMockStatic) => {
@@ -39,4 +40,7 @@ export const TranslationMessage = (args: any) => {
 export default {
   title: 'Project List / System Messages',
   component: SystemMessages,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/account-info.stories.jsx

@@ -3,6 +3,7 @@ import AccountInfoSection from '../../js/features/settings/components/account-in
 import { setDefaultMeta, defaultSetupMocks } from './helpers/account-info'
 import { UserProvider } from '../../js/shared/context/user-context'
 import getMeta from '@/utils/meta'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Success = args => {
   setDefaultMeta()
@@ -55,4 +56,7 @@ export const Error = args => {
 export default {
   title: 'Account Settings / Account Info',
   component: AccountInfoSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/add-email-input.stories.tsx

@@ -1,5 +1,6 @@
 import useFetchMock from './../hooks/use-fetch-mock'
 import Input from '../../js/features/settings/components/emails/add-email/input'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const EmailInput = (args: any) => {
   useFetchMock(fetchMock =>
@@ -26,5 +27,6 @@ export default {
   component: Input,
   argTypes: {
     onChange: { action: 'change' },
+    ...bsVersionDecorator.argTypes,
   },
 }

services/web/frontend/stories/settings/beta-program.stories.jsx

@@ -1,5 +1,6 @@
 import BetaProgramSection from '../../js/features/settings/components/beta-program-section'
 import { UserProvider } from '../../js/shared/context/user-context'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const SectionNotEnrolled = args => {
   window.metaAttributesCache.set('ol-user', { betaProgram: false })
@@ -24,4 +25,7 @@ export const SectionEnrolled = args => {
 export default {
   title: 'Account Settings / Beta Program',
   component: BetaProgramSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/emails.stories.jsx

@@ -8,6 +8,7 @@ import {
   errorsMocks,
   emailLimitSetupMocks,
 } from './helpers/emails'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const EmailsList = args => {
   useFetchMock(defaultSetupMocks)
@@ -40,4 +41,7 @@ export const NetworkErrors = args => {
 export default {
   title: 'Account Settings / Emails and Affiliations',
   component: EmailsSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/leave.stories.jsx

@@ -2,6 +2,7 @@ import useFetchMock from '../hooks/use-fetch-mock'
 import LeaveModal from '../../js/features/settings/components/leave/modal'
 import LeaveSection from '../../js/features/settings/components/leave-section'
 import { setDefaultMeta, defaultSetupMocks } from './helpers/leave'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Section = args => {
   useFetchMock(defaultSetupMocks)
@@ -67,5 +68,6 @@ export default {
   },
   argTypes: {
     handleClose: { action: 'handleClose' },
+    ...bsVersionDecorator.argTypes,
   },
 }

services/web/frontend/stories/settings/leavers-survey-alert.stories.tsx

@@ -2,6 +2,7 @@ import EmailsSection from '../../js/features/settings/components/emails-section'
 import { UserEmailsProvider } from '../../js/features/settings/context/user-email-context'
 import { LeaversSurveyAlert } from '../../js/features/settings/components/leavers-survey-alert'
 import localStorage from '../../js/infrastructure/local-storage'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const SurveyAlert = () => {
   localStorage.setItem(
@@ -18,4 +19,7 @@ export const SurveyAlert = () => {
 export default {
   title: 'Account Settings / Survey Alerts',
   component: EmailsSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/linking.stories.jsx

@@ -6,6 +6,7 @@ import { SSOProvider } from '../../js/features/settings/context/sso-context'
 import { ScopeDecorator } from '../decorators/scope'
 import { useEffect } from 'react'
 import { useMeta } from '../hooks/use-meta'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const MOCK_DELAY = 1000
 
@@ -93,4 +94,7 @@ export default {
   title: 'Account Settings / Linking',
   component: LinkingSection,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/newsletter.stories.jsx

@@ -1,4 +1,5 @@
 import NewsletterSection from '../../js/features/settings/components/newsletter-section'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Section = args => {
   return <NewsletterSection {...args} />
@@ -7,4 +8,7 @@ export const Section = args => {
 export default {
   title: 'Account Settings / Newsletter',
   component: NewsletterSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/page.stories.jsx

@@ -24,6 +24,7 @@ import {
 import { UserProvider } from '../../js/shared/context/user-context'
 import { ScopeDecorator } from '../decorators/scope'
 import getMeta from '@/utils/meta'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Overleaf = args => {
   setDefaultLeaveMeta()
@@ -78,4 +79,7 @@ export default {
   title: 'Account Settings / Full Page',
   component: SettingsPageRoot,
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/password.stories.jsx

@@ -2,6 +2,7 @@ import useFetchMock from '../hooks/use-fetch-mock'
 import PasswordSection from '../../js/features/settings/components/password-section'
 import { setDefaultMeta, defaultSetupMocks } from './helpers/password'
 import getMeta from '@/utils/meta'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Success = args => {
   setDefaultMeta()
@@ -46,4 +47,7 @@ export const Error = args => {
 export default {
   title: 'Account Settings / Password',
   component: PasswordSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/sessions.stories.jsx

@@ -1,4 +1,5 @@
 import SessionsSection from '../../js/features/settings/components/sessions-section'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Section = args => {
   return <SessionsSection {...args} />
@@ -7,4 +8,7 @@ export const Section = args => {
 export default {
   title: 'Account Settings / Sessions',
   component: SessionsSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/settings/sso-alert.stories.tsx

@@ -1,5 +1,6 @@
 import EmailsSection from '../../js/features/settings/components/emails-section'
 import { SSOAlert } from '../../js/features/settings/components/emails/sso-alert'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 export const Info = () => {
   window.metaAttributesCache.set('ol-institutionLinked', {
@@ -53,4 +54,7 @@ export const ErrorWithTryAgain = () => {
 export default {
   title: 'Account Settings / SSO Alerts',
   component: EmailsSection,
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/share-project-modal.stories.jsx

@@ -4,6 +4,7 @@ import { useScope } from './hooks/use-scope'
 import { ScopeDecorator } from './decorators/scope'
 import { contacts } from './fixtures/contacts'
 import { project } from './fixtures/project'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const LinkSharingOff = args => {
   useFetchMock(setupFetchMock)
@@ -141,6 +142,7 @@ export default {
   },
   argTypes: {
     handleHide: { action: 'hide' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [ScopeDecorator],
 }

services/web/frontend/stories/source-editor/source-editor.stories.tsx

@@ -5,6 +5,7 @@ import { useMeta } from '../hooks/use-meta'
 import { FC } from 'react'
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import RangesTracker from '@overleaf/ranges-tracker'
+import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
 
 const FileTreePathProvider: FC = ({ children }) => (
   <FileTreePathContext.Provider
@@ -40,6 +41,9 @@ export default {
       </div>
     ),
   ],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }
 
 const settings = {

services/web/frontend/stories/start-free-trial-button.stories.jsx

@@ -1,5 +1,6 @@
 import StartFreeTrialButton from '../js/shared/components/start-free-trial-button'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 export const Default = args => {
   return <StartFreeTrialButton {...args} />
@@ -30,4 +31,7 @@ export default {
     source: 'storybook',
   },
   decorators: [ScopeDecorator],
+  argTypes: {
+    ...bsVersionDecorator.argTypes,
+  },
 }

services/web/frontend/stories/subscription/group-invites/group-invites.stories.tsx

@@ -2,6 +2,7 @@ import GroupInvites from '@/features/subscription/components/group-invites/group
 import type { TeamInvite } from '../../../../types/team-invite'
 import { useMeta } from '../../hooks/use-meta'
 import { ScopeDecorator } from '../../decorators/scope'
+import { bsVersionDecorator } from '../../../../.storybook/utils/with-bootstrap-switcher'
 
 export const GroupInvitesDefault = () => {
   const teamInvites: TeamInvite[] = [
@@ -39,6 +40,7 @@ export default {
   argTypes: {
     handleHide: { action: 'close modal' },
     onDisableSSO: { action: 'callback' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [ScopeDecorator],
 }

services/web/frontend/stories/ui/badge-bs3.stories.tsx

@@ -42,7 +42,7 @@ export const BadgeDefault: Story = {
   },
 }
 BadgeDefault.args = {
-  bsStyle: meta.argTypes!.bsStyle!.options[0],
+  bsStyle: meta.argTypes!.bsStyle!.options![0],
 }
 
 export const BadgePrepend: Story = {
@@ -55,5 +55,5 @@ export const BadgePrepend: Story = {
   },
 }
 BadgePrepend.args = {
-  bsStyle: meta.argTypes!.bsStyle!.options[0],
+  bsStyle: meta.argTypes!.bsStyle!.options![0],
 }

services/web/frontend/stories/ui/badge-bs5.stories.tsx

@@ -44,7 +44,7 @@ export const BadgeDefault: Story = {
   },
 }
 BadgeDefault.args = {
-  bg: meta.argTypes!.bg!.options[0],
+  bg: meta.argTypes!.bg!.options![0],
 }
 
 export const BadgePrepend: Story = {
@@ -59,5 +59,5 @@ export const BadgePrepend: Story = {
   },
 }
 BadgePrepend.args = {
-  bg: meta.argTypes!.bg!.options[0],
+  bg: meta.argTypes!.bg!.options![0],
 }

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

@@ -1,6 +1,7 @@
 import useFetchMock from './hooks/use-fetch-mock'
 import WordCountModal from '../js/features/word-count-modal/components/word-count-modal'
 import { ScopeDecorator } from './decorators/scope'
+import { bsVersionDecorator } from '../../.storybook/utils/with-bootstrap-switcher'
 
 const counts = {
   headers: 4,
@@ -58,6 +59,7 @@ export default {
   },
   argTypes: {
     handleHide: { action: 'close modal' },
+    ...bsVersionDecorator.argTypes,
   },
   decorators: [ScopeDecorator],
 }

services/web/package.json

@@ -42,7 +42,7 @@
     "lezer-latex:benchmark": "node scripts/lezer-latex/benchmark.mjs",
     "lezer-latex:benchmark-incremental": "node scripts/lezer-latex/test-incremental-parser.mjs",
     "routes": "bin/routes",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "precompile-pug": "node app/src/infrastructure/Views",
     "local:nodemon": "set -a;. ../../config/dev-environment.env;. ./docker-compose.common.env;. ../../config/local-dev.env;. ./local-dev.env;. ../../config/local.env; set +a; echo $OVERLEAF_CONFIG; WEB_PORT=13000 LISTEN_ADDRESS=0.0.0.0 npm run nodemon",
@@ -221,15 +221,15 @@
     "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
     "@replit/codemirror-vim": "overleaf/codemirror-vim#51ce0933e95705268256467fbbbcce5999ed3624",
     "@sentry/browser": "7.46.0",
-    "@storybook/addon-a11y": "^8.0.4",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-styling-webpack": "^1.0.0",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.0.4",
-    "@storybook/react-webpack5": "^8.0.4",
-    "@storybook/theming": "^8.0.4",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/theming": "^8.3.5",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/react": "^12.1.5",
@@ -354,12 +354,13 @@
     "sinon": "^7.5.0",
     "sinon-chai": "^3.7.0",
     "sinon-mongoose": "^2.3.0",
-    "storybook": "^8.0.4",
+    "storybook": "^8.3.5",
     "stylelint-config-standard-scss": "^13.1.0",
     "terser-webpack-plugin": "^5.3.9",
     "thread-loader": "^4.0.2",
     "timekeeper": "^2.2.0",
     "to-string-loader": "^1.2.0",
+    "tty-browserify": "^0.0.1",
     "typescript": "^5.0.4",
     "webpack": "^5.93.0",
     "webpack-assets-manifest": "^5.2.1",