mirror of
https://github.com/grafana/grafana.git
synced 2025-01-26 08:16:59 -06:00
Update Storybook updates to v6.5.10 (#49793)
* Update Storybook updates to v6.5.6 * refactor(storybook): fix up dependencies and webpack configs * chore(storybook): bump to 6.5.7 * chore(yarn): refresh lock file * chore(storybook): bump storybook to 6.5.10 * refactor(storybook): update configuration to use babel, tidy webpack config, clean dependencies * chore(storybook): bump to 6.5.12 * chore(storybook): bump storybook-dark-mode to 1.1.2 * chore(storybook): workaround resolving storybook-docs addon for yarn pnp * refactor(storybook): remove preview-head.html in favour of global theme styles * chore(storybook): patch storybook-dark-mode to work with SB 6.5.x and yarn PnP * feat(storybook): move to using MDXv2 * fix(icon): make sure icon story doesn't disappear offscreen and is scrollable * chore(grafana-ui): clean up dependencies related to storybook * feat(storybook): enable webpack5 filesystem cache * feat(storybook): replace babel with esbuild * fix(emotionperftest): fix jsx pragma for esbuild * fix(emotionperftest): force jsxRuntime to classic so esbuild and babel compile without error Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
This commit is contained in:
renovate[bot]
GitHub
parent
29ca8de6c0
commit
6856784134
1
.gitignore
vendored
1
.gitignore
vendored
@ -125,6 +125,7 @@ pkg/cmd/grafana-server/__debug_bin
|
||||
!.yarn/patches/*.patch
|
||||
|
||||
# Ignoring frontend packages specifics
|
||||
/packages/grafana-ui/.yarn/.cache
|
||||
/packages/**/dist
|
||||
/packages/**/compiled
|
||||
/packages/**/.rpt2_cache
|
||||
|
||||
BIN
.yarn/patches/storybook-dark-mode-npm-1.1.2-ecc4605688.patch
Normal file
BIN
.yarn/patches/storybook-dark-mode-npm-1.1.2-ecc4605688.patch
Normal file
Binary file not shown.
75
.yarnrc.yml
75
.yarnrc.yml
@ -3,41 +3,39 @@ enableTelemetry: false
|
||||
nodeLinker: pnp
|
||||
|
||||
packageExtensions:
|
||||
"@mdx-js/loader@1.6.22":
|
||||
'@storybook/addon-docs@6.5.12':
|
||||
peerDependencies:
|
||||
react: 17.0.1
|
||||
"@npmcli/run-script@4.1.3":
|
||||
'@babel/core': ^7.0.0
|
||||
'@storybook/manager-webpack5': 6.5.12
|
||||
'webpack': 5.74.0
|
||||
'@storybook/addon-essentials@6.5.12':
|
||||
peerDependencies:
|
||||
'@storybook/components': 6.5.12
|
||||
'@storybook/core-events': 6.5.12
|
||||
'@storybook/manager-webpack5': 6.5.12
|
||||
'@storybook/theming': 6.5.12
|
||||
'@storybook/core-server@6.5.12':
|
||||
peerDependencies:
|
||||
'@babel/core': ^7.0.0
|
||||
'@storybook/core@6.5.12':
|
||||
peerDependencies:
|
||||
'@babel/core': ^7.0.0
|
||||
'@storybook/manager-webpack5': 6.5.12
|
||||
'@storybook/csf-tools@6.5.12':
|
||||
peerDependencies:
|
||||
'@babel/core': ^7.0.0
|
||||
'@storybook/mdx2-csf@0.0.3':
|
||||
dependencies:
|
||||
which: ^2.0.2
|
||||
"@storybook/addon-docs@6.4.21":
|
||||
'@babel/types': ^7.14.8
|
||||
'@storybook/react@6.5.12':
|
||||
peerDependencies:
|
||||
"@storybook/manager-webpack5": 6.4.21
|
||||
"@storybook/addon-essentials@6.4.21":
|
||||
peerDependencies:
|
||||
"@storybook/components": 6.4.21
|
||||
"@storybook/core-events": 6.4.21
|
||||
"@storybook/manager-webpack5": 6.4.21
|
||||
"@storybook/theming": 6.4.21
|
||||
"@storybook/core-server@6.4.21":
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0
|
||||
"@storybook/core@6.4.21":
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0
|
||||
"@storybook/manager-webpack5": 6.4.21
|
||||
"@storybook/csf-tools@6.4.21":
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0
|
||||
"@storybook/react@6.4.21":
|
||||
peerDependencies:
|
||||
"@storybook/manager-webpack5": 6.4.21
|
||||
'@storybook/manager-webpack5': 6.5.12
|
||||
'@storybook/addon-knobs@6.4.0':
|
||||
dependencies:
|
||||
'@storybook/client-api': '*'
|
||||
doctrine@3.0.0:
|
||||
dependencies:
|
||||
assert: 2.0.0
|
||||
moveable@0.30.0:
|
||||
dependencies:
|
||||
"@daybrush/utils": 1.7.0
|
||||
framework-utils: ^1.1.0
|
||||
rc-time-picker@3.7.3:
|
||||
peerDependencies:
|
||||
react: 17.0.1
|
||||
@ -49,33 +47,22 @@ packageExtensions:
|
||||
react-compat-css-styled@1.0.8:
|
||||
dependencies:
|
||||
react-simple-compat: 1.2.2
|
||||
react-compat-moveable@0.18.0:
|
||||
dependencies:
|
||||
"@egjs/agent": ^2.2.1
|
||||
"@egjs/children-differ": ^1.0.1
|
||||
"@scena/matrix": 1.1.1
|
||||
css-to-mat: ^1.0.3
|
||||
gesto: ^1.9.0
|
||||
overlap-area: ^1.0.0
|
||||
react-simple-compat: 1.2.2
|
||||
peerDependencies:
|
||||
framework-utils: ^1.1.0
|
||||
react-docgen-typescript-loader@3.7.2:
|
||||
peerDependencies:
|
||||
webpack: 4.41.5
|
||||
react-icons@2.2.7:
|
||||
peerDependencies:
|
||||
prop-types: "*"
|
||||
prop-types: '*'
|
||||
react-resizable@3.0.4:
|
||||
peerDependencies:
|
||||
react-dom: 17.0.1
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
|
||||
spec: "@yarnpkg/plugin-typescript"
|
||||
spec: '@yarnpkg/plugin-typescript'
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
spec: '@yarnpkg/plugin-interactive-tools'
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
|
||||
spec: "https://mskelton.dev/yarn-outdated/v2"
|
||||
spec: 'https://mskelton.dev/yarn-outdated/v2'
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.2.3.cjs
|
||||
|
||||
@ -411,9 +411,11 @@
|
||||
"@rushstack/node-core-library": "3.53.0",
|
||||
"@rushstack/rig-package": "0.3.13",
|
||||
"@rushstack/ts-command-line": "4.12.1",
|
||||
"@storybook/react/webpack": "5.74.0",
|
||||
"@storybook/builder-webpack5/webpack": "5.74.0",
|
||||
"@storybook/manager-webpack5/webpack": "5.74.0",
|
||||
"node-fetch": "2.6.7",
|
||||
"slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch"
|
||||
"slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch",
|
||||
"storybook-dark-mode@1.1.2": "patch:storybook-dark-mode@npm%3A1.1.2#./.yarn/patches/storybook-dark-mode-npm-1.1.2-ecc4605688.patch"
|
||||
},
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
|
||||
@ -1,40 +1,76 @@
|
||||
const path = require('path');
|
||||
const { ProvidePlugin } = require('webpack');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
||||
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
|
||||
|
||||
const stories = ['../src/**/*.story.{js,jsx,ts,tsx,mdx}'];
|
||||
const stories = ['../src/**/*.story.@(tsx|mdx)'];
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
stories.push('../src/**/*.story.internal.{js,jsx,ts,tsx,mdx}');
|
||||
stories.push('../src/**/*.story.internal.@(tsx|mdx)');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
stories: stories,
|
||||
const mainConfig = {
|
||||
stories,
|
||||
addons: [
|
||||
{
|
||||
// work around docs 6.5.x not resolving correctly with yarn PnP
|
||||
name: path.dirname(require.resolve('@storybook/addon-docs/package.json')),
|
||||
options: {
|
||||
configureJSX: true,
|
||||
babelOptions: {},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '@storybook/addon-essentials',
|
||||
options: {
|
||||
backgrounds: false,
|
||||
// work around docs 6.5.x not resolving correctly with yarn PnP
|
||||
docs: false,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-knobs',
|
||||
{
|
||||
name: '@storybook/preset-scss',
|
||||
options: {
|
||||
styleLoaderOptions: {
|
||||
// this is required for theme switching .use() and .unuse()
|
||||
injectType: 'lazyStyleTag',
|
||||
},
|
||||
cssLoaderOptions: {
|
||||
url: false,
|
||||
importLoaders: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
'@storybook/addon-storysource',
|
||||
'storybook-dark-mode',
|
||||
{
|
||||
// replace babel-loader in manager and preview with esbuild-loader
|
||||
name: 'storybook-addon-turbo-build',
|
||||
options: {
|
||||
optimizationLevel: 3,
|
||||
},
|
||||
},
|
||||
],
|
||||
core: {
|
||||
builder: {
|
||||
name: 'webpack5',
|
||||
options: {
|
||||
fsCache: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
features: {
|
||||
previewMdx2: true,
|
||||
},
|
||||
framework: '@storybook/react',
|
||||
logLevel: 'debug',
|
||||
reactOptions: {
|
||||
fastRefresh: true,
|
||||
},
|
||||
staticDirs: [
|
||||
{ from: '../../../public/fonts', to: '/fonts' },
|
||||
{ from: '../../../public/img', to: '/public/img' },
|
||||
{ from: '../../../public/lib', to: '/public/lib' },
|
||||
],
|
||||
reactOptions: {
|
||||
fastRefresh: true,
|
||||
},
|
||||
core: {
|
||||
builder: 'webpack5',
|
||||
},
|
||||
typescript: {
|
||||
check: true,
|
||||
reactDocgen: 'react-docgen-typescript',
|
||||
@ -46,126 +82,24 @@ module.exports = {
|
||||
savePropValueAsString: true,
|
||||
},
|
||||
},
|
||||
webpackFinal: async (config: any, { configType }: any) => {
|
||||
const isProductionBuild = configType === 'PRODUCTION';
|
||||
|
||||
// remove svg from default storybook webpack 5 config so we can use `raw-loader`
|
||||
config.module.rules = config.module.rules.map((rule: any) => {
|
||||
if (
|
||||
String(rule.test) ===
|
||||
String(/\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/)
|
||||
) {
|
||||
return {
|
||||
...rule,
|
||||
test: /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
|
||||
};
|
||||
}
|
||||
|
||||
return rule;
|
||||
webpackFinal: async (config: any) => {
|
||||
// expose jquery as a global so jquery plugins don't break at runtime.
|
||||
config.module.rules.push({
|
||||
test: require.resolve('jquery'),
|
||||
loader: 'expose-loader',
|
||||
options: {
|
||||
exposes: ['$', 'jQuery'],
|
||||
},
|
||||
});
|
||||
|
||||
config.module.rules = [
|
||||
...(config.module.rules || []),
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('ts-loader'),
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
configFile: path.resolve(__dirname, 'tsconfig.json'),
|
||||
},
|
||||
},
|
||||
],
|
||||
exclude: /node_modules/,
|
||||
include: [path.resolve(__dirname, '../../../public/'), path.resolve(__dirname, '../../../packages/')],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: { injectType: 'lazyStyleTag' },
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
url: false,
|
||||
importLoaders: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
postcssOptions: {
|
||||
config: path.resolve(__dirname + '../../../../scripts/webpack/postcss.config.js'),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// for pre-caching SVGs as part of the JS bundles
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: 'raw-loader',
|
||||
},
|
||||
{
|
||||
test: require.resolve('jquery'),
|
||||
loader: 'expose-loader',
|
||||
options: {
|
||||
exposes: ['$', 'jQuery'],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (isProductionBuild) {
|
||||
config.optimization = {
|
||||
nodeEnv: 'production',
|
||||
moduleIds: 'deterministic',
|
||||
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({ parallel: false, exclude: /monaco/ }), new CssMinimizerPlugin()]
|
||||
: [],
|
||||
};
|
||||
}
|
||||
|
||||
config.resolve.alias['@grafana/ui'] = path.resolve(__dirname, '..');
|
||||
|
||||
// Silence "export not found" webpack warnings with transpileOnly
|
||||
// https://github.com/TypeStrong/ts-loader#transpileonly
|
||||
config.plugins.push(
|
||||
new FilterWarningsPlugin({
|
||||
exclude: /export .* was not found in/,
|
||||
})
|
||||
);
|
||||
// use the raw-loader for SVGS for compatibility with grafana/ui Icon component.
|
||||
config.module.rules.push({
|
||||
test: /(unicons|mono|custom)[\\/].*\.svg$/,
|
||||
type: 'asset/source',
|
||||
});
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = mainConfig;
|
||||
|
||||
9
packages/grafana-ui/.storybook/manager.ts
Normal file
9
packages/grafana-ui/.storybook/manager.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
import { GrafanaDark } from './storybookTheme';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
showRoots: false,
|
||||
},
|
||||
theme: GrafanaDark,
|
||||
});
|
||||
@ -1,6 +0,0 @@
|
||||
<!-- Make sure iframe dom elements fill all available space for background consistency -->
|
||||
<style>
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -9,13 +9,12 @@ import '../../../public/vendor/flot/jquery.flot.crosshair';
|
||||
import '../../../public/vendor/flot/jquery.flot.dashes';
|
||||
import '../../../public/vendor/flot/jquery.flot.gauge';
|
||||
import { withTheme } from '../src/utils/storybook/withTheme';
|
||||
import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
|
||||
// @ts-ignore
|
||||
import lightTheme from '../../../public/sass/grafana.light.scss';
|
||||
// @ts-ignore
|
||||
import darkTheme from '../../../public/sass/grafana.dark.scss';
|
||||
import { GrafanaLight, GrafanaDark } from './storybookTheme';
|
||||
import addons from '@storybook/addons';
|
||||
import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
|
||||
|
||||
const handleThemeChange = (theme: any) => {
|
||||
if (theme !== 'light') {
|
||||
@ -27,23 +26,21 @@ const handleThemeChange = (theme: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
addons.setConfig({
|
||||
showRoots: false,
|
||||
theme: GrafanaDark,
|
||||
});
|
||||
|
||||
export const decorators = [withTheme(handleThemeChange)];
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
container: ThemedDocsContainer,
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
darkMode: {
|
||||
dark: GrafanaDark,
|
||||
light: GrafanaLight,
|
||||
},
|
||||
docs: {
|
||||
container: ThemedDocsContainer,
|
||||
},
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
layout: 'fullscreen',
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
options: {
|
||||
showPanel: true,
|
||||
panelPosition: 'right',
|
||||
@ -56,7 +53,4 @@ export const parameters = {
|
||||
order: ['Docs Overview', ['Intro']],
|
||||
},
|
||||
},
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
"noUnusedLocals": false,
|
||||
"outDir": "compiled"
|
||||
},
|
||||
"exclude": ["../dist/**/*"],
|
||||
"extends": "../tsconfig.json",
|
||||
"include": ["../src/**/*.ts", "../src/**/*.tsx", "../../../public/app/types/svg.d.ts"]
|
||||
"include": ["../src/**/*.ts*", "../../../public/app/types/svg.d.ts"]
|
||||
}
|
||||
|
||||
@ -110,21 +110,23 @@
|
||||
"@grafana/tsconfig": "^1.2.0-rc1",
|
||||
"@mdx-js/react": "1.6.22",
|
||||
"@rollup/plugin-node-resolve": "13.3.0",
|
||||
"@storybook/addon-a11y": "6.4.21",
|
||||
"@storybook/addon-actions": "6.4.21",
|
||||
"@storybook/addon-docs": "6.4.21",
|
||||
"@storybook/addon-essentials": "6.4.21",
|
||||
"@storybook/addon-a11y": "6.5.12",
|
||||
"@storybook/addon-actions": "6.5.12",
|
||||
"@storybook/addon-docs": "6.5.12",
|
||||
"@storybook/addon-essentials": "6.5.12",
|
||||
"@storybook/addon-knobs": "6.4.0",
|
||||
"@storybook/addon-storysource": "6.4.21",
|
||||
"@storybook/addons": "6.4.21",
|
||||
"@storybook/api": "6.4.21",
|
||||
"@storybook/builder-webpack5": "6.4.21",
|
||||
"@storybook/client-api": "6.4.21",
|
||||
"@storybook/components": "6.4.21",
|
||||
"@storybook/core-events": "6.4.21",
|
||||
"@storybook/manager-webpack5": "6.4.21",
|
||||
"@storybook/react": "6.4.21",
|
||||
"@storybook/theming": "6.4.21",
|
||||
"@storybook/addon-storysource": "6.5.12",
|
||||
"@storybook/addons": "6.5.12",
|
||||
"@storybook/api": "6.5.12",
|
||||
"@storybook/builder-webpack5": "6.5.12",
|
||||
"@storybook/client-api": "6.5.12",
|
||||
"@storybook/components": "6.5.12",
|
||||
"@storybook/core-events": "6.5.12",
|
||||
"@storybook/manager-webpack5": "6.5.12",
|
||||
"@storybook/mdx2-csf": "0.0.3",
|
||||
"@storybook/preset-scss": "1.0.3",
|
||||
"@storybook/react": "6.5.12",
|
||||
"@storybook/theming": "6.5.12",
|
||||
"@swc/helpers": "0.4.3",
|
||||
"@testing-library/dom": "8.13.0",
|
||||
"@testing-library/jest-dom": "5.16.4",
|
||||
@ -163,19 +165,14 @@
|
||||
"@types/tinycolor2": "1.4.3",
|
||||
"@types/uuid": "8.3.4",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
|
||||
"babel-loader": "8.2.5",
|
||||
"common-tags": "1.8.2",
|
||||
"css-loader": "6.7.1",
|
||||
"css-minimizer-webpack-plugin": "4.1.0",
|
||||
"csstype": "3.1.0",
|
||||
"enzyme": "3.11.0",
|
||||
"esbuild": "0.15.7",
|
||||
"expose-loader": "4.0.0",
|
||||
"mock-raf": "1.0.1",
|
||||
"postcss": "8.4.14",
|
||||
"postcss-loader": "7.0.1",
|
||||
"process": "^0.11.10",
|
||||
"raw-loader": "4.0.2",
|
||||
"react": "17.0.2",
|
||||
"react-docgen-typescript-loader": "3.7.2",
|
||||
"react-dom": "17.0.2",
|
||||
@ -187,13 +184,11 @@
|
||||
"rollup-plugin-node-externals": "^4.1.0",
|
||||
"rollup-plugin-svg-import": "^1.6.0",
|
||||
"sass-loader": "13.0.2",
|
||||
"storybook-dark-mode": "1.1.0",
|
||||
"storybook-addon-turbo-build": "1.1.0",
|
||||
"storybook-dark-mode": "1.1.2",
|
||||
"style-loader": "3.3.1",
|
||||
"terser-webpack-plugin": "5.3.3",
|
||||
"ts-loader": "8.4.0",
|
||||
"typescript": "4.8.2",
|
||||
"webpack": "5.74.0",
|
||||
"webpack-filter-warnings-plugin": "1.2.1"
|
||||
"webpack": "5.74.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
|
||||
@ -72,6 +72,8 @@ export const IconsOverview = () => {
|
||||
className={css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
`}
|
||||
>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/** @jsxImportSource @emotion/react */
|
||||
|
||||
/** @jsxRuntime classic */
|
||||
/** @jsx jsx */
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { jsx } from '@emotion/react';
|
||||
import classnames from 'classnames';
|
||||
import { Profiler, ProfilerOnRenderCallback, useState, FC } from 'react';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// This is a temporary workaround to allow theme switching storybook docs
|
||||
// see https://github.com/storybookjs/storybook/issues/10523 for further details
|
||||
import { DocsContainer } from '@storybook/addon-docs/blocks';
|
||||
import { DocsContainer } from '@storybook/addon-docs';
|
||||
import React from 'react';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: ${theme.colors.background.primary};
|
||||
}`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user