Move Storybook to tools (#7248)

GitOrigin-RevId: 2dd57d9adda07b01ad3d9aeee7a2e9e8986fae24
This commit is contained in:
Alf Eaton 2022-03-30 12:02:34 +01:00 committed by Copybot
parent 53324b0cd2
commit 99607d4afc
7 changed files with 150 additions and 12866 deletions

12817
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,3 +0,0 @@
.sidebar-container a[title='Overleaf'] {
max-width: 100px;
}

View file

@ -1,36 +0,0 @@
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// NOTE: must be set before webpack config is imported
process.env.SHARELATEX_CONFIG = path.resolve(
__dirname,
'../config/settings.webpack.js'
)
const customConfig = require('../webpack.config.dev')
module.exports = {
staticDirs: ['../public'],
stories: [
'../frontend/stories/**/*.stories.{js,ts,tsx}',
'../modules/**/stories/**/*.stories.{js,ts,tsx}',
],
addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
webpackFinal: storybookConfig => {
const rules = [
...storybookConfig.module.rules,
{
test: /\.worker\.js$/,
use: 'worker-loader',
},
]
return {
...storybookConfig,
module: {
...storybookConfig.module,
rules,
},
}
},
}

View file

@ -1,15 +0,0 @@
import { addons } from '@storybook/addons'
import { create } from '@storybook/theming'
import './global.css'
import brandImage from '../public/img/ol-brand/overleaf.svg'
const theme = create({
base: 'light',
brandTitle: 'Overleaf',
brandUrl: 'https://www.overleaf.com',
brandImage,
})
addons.setConfig({ theme })

View file

@ -1,11 +0,0 @@
.sb-show-main.modal-open {
overflow-y: auto !important;
}
.sb-show-main .modal-backdrop {
display: none;
}
.sb-show-main .modal {
position: relative;
}

View file

@ -1,130 +0,0 @@
import './preview.css'
// Storybook does not (currently) support async loading of "stories". Therefore
// the strategy in frontend/js/i18n.js does not work (because we cannot wait on
// the promise to resolve).
// Therefore we have to use the synchronous method for configuring
// react-i18next. Because this, we can only hard-code a single language.
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import en from '../locales/en.json'
i18n.use(initReactI18next).init({
lng: 'en',
resources: {
en: { translation: en },
},
react: {
useSuspense: false,
},
interpolation: {
prefix: '__',
suffix: '__',
unescapeSuffix: 'HTML',
skipOnVariables: true,
defaultVariables: {
appName: 'Overleaf',
},
},
})
export const 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,
},
}
export const globalTypes = {
theme: {
name: 'Theme',
description: 'Editor theme',
defaultValue: 'default-',
toolbar: {
icon: 'circlehollow',
items: [
{ value: 'default-', title: 'Default' },
{ value: 'light-', title: 'Light' },
{ value: 'ieee-', title: 'IEEE' },
],
},
},
}
export const loaders = [
async ({ globals }) => {
const { theme } = globals
return {
// NOTE: this uses `${theme}style.less` rather than `${theme}.less`
// so that webpack only bundles files ending with "style.less"
activeStyle: await import(
`!!to-string-loader!css-loader!less-loader!../frontend/stylesheets/${
theme === 'default-' ? '' : theme
}style.less`
),
}
},
]
const withTheme = (Story, context) => {
const { activeStyle } = context.loaded
return (
<>
{activeStyle && <style>{activeStyle.default}</style>}
<Story {...context} />
</>
)
}
export const decorators = [withTheme]
window.ExposedSettings = {
maxEntitiesPerProject: 10,
maxUploadSize: 5 * 1024 * 1024,
enableSubscriptions: true,
textExtensions: [
'tex',
'latex',
'sty',
'cls',
'bst',
'bib',
'bibtex',
'txt',
'tikz',
'mtx',
'rtex',
'md',
'asy',
'latexmkrc',
'lbx',
'bbx',
'cbx',
'm',
'lco',
'dtx',
'ins',
'ist',
'def',
'clo',
'ldf',
'rmd',
'lua',
'gv',
'mf',
],
}
window.user = {
id: 'storybook',
}
window.project_id = 'storybook-project'

View file

@ -31,7 +31,6 @@
"type-check": "tsc --noEmit",
"extract-translations": "i18next-scanner",
"migrations": "east",
"storybook": "start-storybook -p 6006",
"convert-themes": "node modules/source-editor/frontend/js/themes/convert.js",
"cypress:open-ct": "SHARELATEX_CONFIG=$PWD/config/settings.webpack.js cypress open-ct",
"cypress:run-ct": "SHARELATEX_CONFIG=$PWD/config/settings.webpack.js cypress run-ct",
@ -214,9 +213,6 @@
"@cypress/webpack-preprocessor": "^5.11.1",
"@cypress/webpack-dev-server": "^1.8.0",
"@juggle/resize-observer": "^3.3.1",
"@storybook/addon-a11y": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/react": "^6.4.19",
"@testing-library/cypress": "^8.0.2",
"@testing-library/dom": "^7.31.2",
"@testing-library/react": "^11.2.7",