mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
4a8b79080b
* [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
102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import type { StorybookConfig } from '@storybook/react-webpack5'
|
|
import path from 'node:path'
|
|
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
|
|
|
|
const rootDir = path.resolve(__dirname, '..')
|
|
|
|
// NOTE: must be set before webpack config is imported
|
|
process.env.OVERLEAF_CONFIG = path.join(rootDir, 'config/settings.webpack.js')
|
|
|
|
function getAbsolutePath(value: string): any {
|
|
return path.dirname(require.resolve(path.join(value, 'package.json')))
|
|
}
|
|
|
|
const config: StorybookConfig = {
|
|
core: {
|
|
disableTelemetry: true,
|
|
},
|
|
staticDirs: [path.join(rootDir, 'public')],
|
|
stories: [
|
|
path.join(rootDir, 'frontend/stories/**/*.stories.{js,jsx,ts,tsx}'),
|
|
path.join(rootDir, 'modules/**/stories/**/*.stories.{js,jsx,ts,tsx}'),
|
|
],
|
|
addons: [
|
|
getAbsolutePath('@storybook/addon-links'),
|
|
getAbsolutePath('@storybook/addon-essentials'),
|
|
getAbsolutePath('@storybook/addon-interactions'),
|
|
getAbsolutePath('@storybook/addon-a11y'),
|
|
getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
|
|
{
|
|
name: getAbsolutePath('@storybook/addon-styling-webpack'),
|
|
options: {
|
|
rules: [
|
|
{
|
|
test: /\.css$/,
|
|
use: [
|
|
{ loader: MiniCssExtractPlugin.loader },
|
|
{ loader: 'css-loader' },
|
|
],
|
|
},
|
|
{
|
|
test: /\.less$/,
|
|
use: [
|
|
{ loader: MiniCssExtractPlugin.loader },
|
|
{ loader: 'css-loader' },
|
|
{ loader: 'less-loader' },
|
|
],
|
|
},
|
|
],
|
|
plugins: [new MiniCssExtractPlugin()],
|
|
},
|
|
},
|
|
],
|
|
framework: {
|
|
name: getAbsolutePath('@storybook/react-webpack5'),
|
|
options: {},
|
|
},
|
|
docs: {
|
|
autodocs: 'tag',
|
|
},
|
|
babel: (options: Record<string, any>) => {
|
|
return {
|
|
...options,
|
|
plugins: [
|
|
// ensure that TSX files are transformed before other plugins run
|
|
['@babel/plugin-transform-typescript', { isTSX: true }],
|
|
...(options.plugins ?? []),
|
|
],
|
|
}
|
|
},
|
|
webpackFinal: storybookConfig => {
|
|
return {
|
|
...storybookConfig,
|
|
resolve: {
|
|
...storybookConfig.resolve,
|
|
fallback: {
|
|
...storybookConfig.resolve?.fallback,
|
|
fs: false,
|
|
os: false,
|
|
module: false,
|
|
tty: require.resolve('tty-browserify'),
|
|
},
|
|
extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.json'],
|
|
alias: {
|
|
...storybookConfig.resolve?.alias,
|
|
// custom prefixes for import paths
|
|
'@': path.join(rootDir, 'frontend/js/'),
|
|
},
|
|
},
|
|
module: {
|
|
...storybookConfig.module,
|
|
rules: (storybookConfig.module?.rules ?? []).concat({
|
|
test: /\.wasm$/,
|
|
type: 'asset/resource',
|
|
generator: {
|
|
filename: 'js/[name]-[contenthash][ext]',
|
|
},
|
|
}),
|
|
},
|
|
}
|
|
},
|
|
}
|
|
export default config
|