github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade storybook to v7 (#13165)

Browse source 
* 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
This commit is contained in:
Domagoj Kriskovic 2023-06-07 10:14:48 +02:00 committed by Copybot
parent b70d5faca5
commit 0b864be76f
4 changed files with 8516 additions and 954 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9357
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

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

97
services/web/frontend/stories/git-bridge-modal.stories.js
View file

@ -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],
}

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

@ -1,4 +1,5 @@
import NewProjectButton from '../../js/features/project-list/components/new-project-button' 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' import useFetchMock from '../hooks/use-fetch-mock'
const templateLinks = [ 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 = () => { 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 { export default {