mirror of https://github.com/grafana/grafana
Chore: Bump storybook to v6 (#28926)
* Wip * feat: get storybook and app building locally * docs: comment webpack react alias * build(grafana-ui): put back ts-loader * build: prefer storybook essentials over actions and docs. bump dark-mode * chore(storybook): migrate to latest config * build: prevent test env throwing Invalid hook call errors * chore: lodash resolves to package dependency rather than project * use decorators as variable instead of function * perf(storybook): reduce bundling time by splitting type check and compilation * refactor(storybook): use sortOrder.order param to sort intro story first * build: use yarn workspace command * refactor(storybook): use previous knobs addon registration * migrate button story to controls * build(storybook): silence warnings in console * build: bump storybook related ts packages * style: remove trailing whitespace * refactor(graphng): export interface for storybook * controls migration guide * fix typo * docs(storybook): default docs to use dark theme as per current implementation * revert(grafana-ui): put back react-is namedExport this was changed for react 17 bump but causes rollup to fail during bundling * chore: bump storybook to 6.1, enable fastRefresh, silence eslint prop-types * docs(grafana-ui): move knobs -> controls migration guide to storybook style-guide * chore(storybook): silence terminal warning about order of docs addon * Update contribute/style-guides/storybook.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Apply documentation suggestions Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * chore(storybook): bump to 6.1.2 Co-authored-by: Peter Holmberg <peter.hlmbrg@gmail.com> Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>pull/29292/head^2
parent
ce39e12e00
commit
0fc8426bf1
@ -1,121 +0,0 @@ |
||||
const path = require('path'); |
||||
const TerserPlugin = require('terser-webpack-plugin'); |
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); |
||||
module.exports = ({ config, mode }) => { |
||||
const isProductionBuild = mode === 'PRODUCTION'; |
||||
config.module.rules = [ |
||||
...(config.module.rules || []), |
||||
{ |
||||
test: /\.tsx?$/, |
||||
use: [ |
||||
{ |
||||
loader: require.resolve('ts-loader'), |
||||
options: { |
||||
// transpileOnly: true,
|
||||
configFile: path.resolve(__dirname, 'tsconfig.json'), |
||||
}, |
||||
}, |
||||
{ |
||||
loader: require.resolve('react-docgen-typescript-loader'), |
||||
options: { |
||||
tsconfigPath: path.resolve(__dirname, 'tsconfig.json'), |
||||
// https://github.com/styleguidist/react-docgen-typescript#parseroptions
|
||||
// @ts-ignore
|
||||
propFilter: prop => { |
||||
if (prop.parent) { |
||||
return !prop.parent.fileName.includes('node_modules/@types/react/'); |
||||
} |
||||
|
||||
return true; |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
config.module.rules.push({ |
||||
test: /\.scss$/, |
||||
use: [ |
||||
{ |
||||
loader: 'style-loader', |
||||
options: { injectType: 'lazyStyleTag' }, |
||||
}, |
||||
{ |
||||
loader: 'css-loader', |
||||
options: { |
||||
importLoaders: 2, |
||||
}, |
||||
}, |
||||
{ |
||||
loader: 'postcss-loader', |
||||
options: { |
||||
sourceMap: false, |
||||
config: { path: __dirname + '../../../../scripts/webpack/postcss.config.js' }, |
||||
}, |
||||
}, |
||||
{ |
||||
loader: 'sass-loader', |
||||
options: { |
||||
sourceMap: false, |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
config.module.rules.push({ |
||||
test: require.resolve('jquery'), |
||||
use: [ |
||||
{ |
||||
loader: 'expose-loader', |
||||
query: 'jQuery', |
||||
}, |
||||
{ |
||||
loader: 'expose-loader', |
||||
query: '$', |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
config.optimization = { |
||||
nodeEnv: 'production', |
||||
moduleIds: 'hashed', |
||||
runtimeChunk: 'single', |
||||
splitChunks: { |
||||
chunks: 'all', |
||||
minChunks: 1, |
||||
cacheGroups: { |
||||
vendors: { |
||||
test: /[\\/]node_modules[\\/].*[jt]sx?$/, |
||||
chunks: 'initial', |
||||
priority: -10, |
||||
reuseExistingChunk: true, |
||||
enforce: true, |
||||
}, |
||||
default: { |
||||
priority: -20, |
||||
chunks: 'all', |
||||
test: /.*[jt]sx?$/, |
||||
reuseExistingChunk: true, |
||||
}, |
||||
}, |
||||
}, |
||||
minimize: isProductionBuild, |
||||
minimizer: isProductionBuild |
||||
? [ |
||||
new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco|bizcharts/ }), |
||||
new OptimizeCSSAssetsPlugin({}), |
||||
] |
||||
: [], |
||||
}; |
||||
|
||||
config.resolve.extensions.push('.ts', '.tsx', '.mdx'); |
||||
config.resolve.alias = config.resolve.alias || {}; |
||||
config.resolve.alias['@grafana/ui'] = path.resolve(__dirname, '..'); |
||||
|
||||
config.stats = { |
||||
warningsFilter: /export .* was not found in/, |
||||
}; |
||||
|
||||
return config; |
||||
}; |
Loading…
Reference in new issue