Upgrade storybook to v7 (#13165)

* storybook 7 initial config

* [storybook] integrate storybook into npm-workspace (#13248)

* [WIP] integrate storybook into npm-workspace

* Move git bridge stories into the module

* Wrap in ProjectListProvider

---------

Co-authored-by: Alf Eaton <alf.eaton@overleaf.com>

* fesh npm install

---------

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>
Co-authored-by: Alf Eaton <alf.eaton@overleaf.com>
GitOrigin-RevId: 64e0fd86ff45409239a4b16cbd56815407398922

package.json

@@ -50,6 +50,7 @@
     "services/third-party-references",
     "services/tpdsworker",
     "services/track-changes",
-    "services/web"
+    "services/web",
+    "tools/storybook"
   ]
 }

services/web/frontend/stories/git-bridge-modal.stories.js

@@ -1,97 +0,0 @@
-import importOverleafModules from '../macros/import-overleaf-module.macro'
-import { ScopeDecorator } from './decorators/scope'
-import GitBridgeModalTokens from '../../modules/git-bridge/frontend/js/components/git-bridge-modal-tokens'
-import useFetchMock from './hooks/use-fetch-mock'
-
-const [
-  {
-    import: { default: GitBridgeModal },
-  },
-] = importOverleafModules('gitBridge')
-
-function renderModal(args, newModal = false) {
-  window.metaAttributesCache = new Map()
-  window.metaAttributesCache.set('ol-showPersonalAccessToken', newModal)
-  window.metaAttributesCache.set('ol-personalAccessTokens', [])
-  return <GitBridgeModal {...args} />
-}
-
-export const GitBridgeUrlModal = args => renderModal(args)
-GitBridgeUrlModal.args = {
-  type: 'show_url',
-}
-
-export const CollaboratorModal = args => renderModal(args)
-CollaboratorModal.args = {
-  type: 'collaborator',
-}
-
-export const TeaserModal = args => {
-  // TODO: mock navigator.sendBeacon?
-  // useFetchMock(fetchMock => {
-  //   fetchMock.post('express:/event/:key', 202)
-  // })
-
-  return renderModal(args)
-}
-TeaserModal.args = {
-  type: 'teaser',
-}
-
-export const AccessTokensWithNoTokens = args => {
-  useFetchMock(fetchMock =>
-    fetchMock.get('/oauth/personal-access-tokens', [], { delay: 500 })
-  )
-  useFetchMock(fetchMock =>
-    fetchMock.post(
-      '/oauth/personal-access-tokens',
-      {
-        accessToken: 'olp_2fvP3amgiJRJk2JWP6nxZqGHKRVwMvcgo9mk',
-      },
-      { delay: 1000 }
-    )
-  )
-  return renderModal(args, true)
-}
-
-export const AccessTokensWithTokens = args => {
-  useFetchMock(fetchMock =>
-    fetchMock.get('/oauth/personal-access-tokens', [{}], { delay: 500 })
-  )
-  return <GitBridgeModalTokens {...args} />
-}
-
-export const AccessTokensGetTokensError = args => {
-  useFetchMock(fetchMock =>
-    fetchMock.get(
-      '/oauth/personal-access-tokens',
-      { status: 403 },
-      { delay: 1000 }
-    )
-  )
-  return <GitBridgeModalTokens {...args} />
-}
-
-export const AccessTokensCreateTokensError = args => {
-  useFetchMock(fetchMock => fetchMock.get('/oauth/personal-access-tokens', []))
-  useFetchMock(fetchMock =>
-    fetchMock.post(
-      '/oauth/personal-access-tokens',
-      { status: 403 },
-      { delay: 1000 }
-    )
-  )
-  return <GitBridgeModalTokens {...args} />
-}
-
-export default {
-  title: 'Editor / Modals / Git Bridge',
-  component: GitBridgeModal,
-  args: {
-    show: true,
-  },
-  argTypes: {
-    handleHide: { action: 'handleHide' },
-  },
-  decorators: [ScopeDecorator],
-}

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

@@ -1,4 +1,5 @@
 import NewProjectButton from '../../js/features/project-list/components/new-project-button'
+import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context'
 import useFetchMock from '../hooks/use-fetch-mock'
 
 const templateLinks = [
@@ -62,7 +63,11 @@ export const Success = () => {
     )
   })
 
-  return <NewProjectButton id="new-project-button-story" />
+  return (
+    <ProjectListProvider>
+      <NewProjectButton id="new-project-button-story" />
+    </ProjectListProvider>
+  )
 }
 
 export const Error = () => {
@@ -83,7 +88,11 @@ export const Error = () => {
     )
   })
 
-  return <NewProjectButton id="new-project-button-story" />
+  return (
+    <ProjectListProvider>
+      <NewProjectButton id="new-project-button-story" />
+    </ProjectListProvider>
+  )
 }
 
 export default {