overleaf/services/web/frontend/stories/loading/loading.stories.tsx
Antoine Clausse 2e080a3a34 [web] Migrate IDE page loading screen to BS5 (#20896)
* [web] Add `.loading-screen` style

* [web] Add `.loading-screen-error` style

* [web] Nest styles in `.loading-screen`

* [web] Simplify code, make a more valuable Storybook

* [web] Add a reusable bootstrap-switcher argument to loading.stories.tsx

* [web] Make `isBootstrap5()` work in storybook

* [web] Revert unrelated changes around `ConnectionError` type

* [web] Remove comment about unhandled error codes

https://github.com/overleaf/internal/pull/20896/files#r1790572314

* [web] Don't repeat the `errorCode` prop type

* [web] Remove unused CSS and magic padding

* [web] Fixup SCSS division

* [storybook] Revert Storybook changes (moved to another branch)

* [web] Fixup SCSS division again (lint)

* [web] Render with `Boolean(errorCode) && ...` instead of `errorCode && ...`

* [web] Remove importants; use spacing var

Addresses Tim's comments

GitOrigin-RevId: e8b5623f4bb9aa72a255851f46b45b652a0dbb16
2024-10-14 11:07:50 +00:00

46 lines
1.3 KiB
TypeScript

import type { Meta, StoryObj } from '@storybook/react'
import { LoadingUI } 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 LoadingUI> = {
title: 'Loading Page / Loading',
component: LoadingUI,
argTypes: {
errorCode: {
control: 'select',
options: [
'',
'io-not-loaded',
'unable-to-join',
'i18n-error',
'unhandled-error-code',
],
},
progress: { control: { type: 'range', min: 0, max: 100 } },
...bsVersionDecorator.argTypes,
},
}
export default meta
type Story = StoryObj<typeof LoadingUI>
const errorMessages = {
translationIoNotLoaded: 'Could not connect to the WebSocket server',
translationLoadErrorMessage: 'Could not load translations',
translationUnableToJoin: 'Could not connect to collaboration server',
}
export const LoadingPage: Story = {
render: args => {
for (const [key, value] of Object.entries(errorMessages)) {
window.metaAttributesCache.set(`ol-${key}`, value)
}
return (
<EditorProviders>
<LoadingUI {...args} />
</EditorProviders>
)
},
}