*/}
-
-
- );
+ const isDark = useDarkMode();
+ return wrapWithTheme(, { theme: isDark ? 'dark' : 'light' });
},
];
@@ -45,17 +37,21 @@ MINIMAL_VIEWPORTS.mobile1.styles = {
export const parameters = {
controls: { expanded: true },
+ darkMode: {
+ dark: { ...themes.dark },
+ light: { ...themes.normal },
+ },
options: {
storySort: {
method: 'alphabetical',
order: ['Intro', 'Features', 'Components', 'Elements', 'Core Styles'],
},
},
- previewTabs: {
- 'storybook/docs/panel': { index: -1 },
- },
viewMode: 'docs',
viewport: {
viewports: MINIMAL_VIEWPORTS,
},
+ docs: {
+ container: DocsContainer,
+ },
};
diff --git a/packages/manager/.storybook/storybook.css b/packages/manager/.storybook/storybook.css
deleted file mode 100644
index 9c64f58a220..00000000000
--- a/packages/manager/.storybook/storybook.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.caret {
- position: 'relative';
- top: 2;
- left: 2;
- margin-left: 8px;
-}
diff --git a/packages/manager/.storybook/webpack.config.js b/packages/manager/.storybook/webpack.config.js
deleted file mode 100644
index bdfec4e90fd..00000000000
--- a/packages/manager/.storybook/webpack.config.js
+++ /dev/null
@@ -1,82 +0,0 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const path = require('path');
-// include path of webpack needs to include the node modules folder at root of project
-const includePath = path.resolve(__dirname, '../../..');
-
-const paths = require('../config/paths');
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
-
-module.exports = {
- resolve: {
- extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
- alias: {
- 'src/': paths.appSrc,
- },
- plugins: [new TsconfigPathsPlugin({ configFile: paths.appTsConfig })],
- },
- module: {
- rules: [
- {
- test: /\.css$/,
- include: includePath,
- use: [
- {
- loader: 'style-loader',
- },
- {
- loader: 'css-loader',
- options: {
- sourceMap: false,
- },
- },
- ],
- },
- {
- test: /(font-logos.svg)|(\.(woff|woff2|eot|ttf))$/,
- include: includePath,
- use: 'url-loader',
- },
- {
- test: /\.svg$/,
- exclude: [/font-logos.svg$/],
- use: {
- loader: '@svgr/webpack',
- options: {
- svgoConfig: {
- plugins: [
- {
- name: 'preset-default',
- params: {
- overrides: { removeViewBox: false },
- },
- },
- ],
- },
- },
- },
- },
- {
- test: /\.tsx?$/,
- include: [paths.appSrc, __dirname],
- exclude: [
- path.resolve(__dirname, 'src/components/__image_snapshots__'),
- path.resolve(__dirname, 'src/components/__snapshots__'),
- ],
- use: [
- {
- loader: require.resolve('esbuild-loader'),
- options: {
- loader: 'tsx',
- },
- },
- ],
- },
- ],
- },
-};
diff --git a/packages/manager/config/webpack.config.dev.js b/packages/manager/config/webpack.config.dev.js
deleted file mode 100644
index d6686970150..00000000000
--- a/packages/manager/config/webpack.config.dev.js
+++ /dev/null
@@ -1,230 +0,0 @@
-'use strict';
-
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const CircularDependencyPlugin = require('circular-dependency-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const getClientEnvironment = require('./env');
-const paths = require('./paths');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// In development, we always serve from the root. This makes config easier.
-const publicPath = '/';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = '';
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// This is the development configuration.
-// It is focused on developer experience and fast rebuilds.
-// The production configuration is different and lives in a separate file.
-
-/* eslint-disable sort-keys */
-module.exports = {
- mode: 'development',
- // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
- // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
- devtool: 'cheap-module-source-map',
- // These are the "entry points" to our application.
- // This means they will be the "root" imports that are included in JS bundle.
- // The first two entry points enable "hot" CSS and auto-refreshes for JS.
- entry: [
- // If we're in development, load our browser mocks. These will
- // only be active if REACT_APP_MOCK_SERVICE_WORKER is present
- // in the .env file, but including this through Webpack prevents
- // the production bundle from bloating.
- paths.browserMocks,
- // Finally, this is Cloud Manager's code:
- paths.appIndexJs,
- // We include the app code last so that if there is a runtime error during
- // initialization, it doesn't blow up the WebpackDevServer client, and
- // changing JS code would still trigger a refresh.
- ],
- output: {
- // This does not produce a real file. It's just the virtual path that is
- // served by WebpackDevServer in development. This is the JS bundle
- // containing code from all our entry points, and the Webpack runtime.
- filename: 'static/js/bundle.js',
- // There are also additional JS chunk files if you use code splitting.
- chunkFilename: 'static/js/[name].chunk.js',
- // This is the URL that app is served from. We use "/" in development.
- publicPath,
- // Point sourcemap entries to original disk location (format as URL on Windows)
- devtoolModuleFilenameTemplate: (info) => {
- return path
- .relative(paths.appSrc, info.absoluteResourcePath)
- .replace(/\\/g, '/');
- },
- // Use a faster hash function
- hashFunction: 'xxhash64',
- },
- resolve: {
- // This allows you to set a fallback for where Webpack should look for modules.
- // We placed these paths second because we want `node_modules` to "win"
- // if there are any conflicts. This matches Node resolution mechanism.
- // https://github.com/facebookincubator/create-react-app/issues/253
- modules: ['node_modules', paths.appNodeModules].concat(
- // It is guaranteed to exist because we tweak it in `env.js`
- process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
- ),
- // These are the reasonable defaults supported by the Node ecosystem.
- // We also include JSX as a common component filename extension to support
- // some tools, although we do not recommend using it, see:
- // https://github.com/facebookincubator/create-react-app/issues/290
- extensions: ['.mjs', '.ts', '.tsx', '.js', '.json', '.jsx'],
- alias: {
- 'src/': paths.appSrc,
- },
- plugins: [
- // Prevents users from importing files from outside of src/ (or node_modules/).
- // This often causes confusion because we only process files within src/ with babel.
- // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
- // please link the files into your node_modules/ and let module-resolution kick in.
- // Make sure your source files are compiled, as they will not be processed in any way.
- new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
- new TsconfigPathsPlugin({ configFile: paths.appTsConfig }),
- ],
- fallback: {
- // Provide any Node.js polyfills here.
- stream: 'stream-browserify',
- crypto: 'crypto-browserify',
- Buffer: 'buffer/',
- },
- },
- module: {
- strictExportPresence: true,
- unsafeCache: true,
- rules: [
- // @TODO what benefit does the source-map-loader provide?
- // {
- // test: /\.(js|jsx|mjs)$/,
- // loader: require.resolve('source-map-loader'),
- // enforce: 'pre',
- // include: paths.appSrc,
- // },
- {
- // "oneOf" will traverse all following loaders until one will
- // match the requirements. When no loader matches it will fall
- // back to the "file" loader at the end of the loader list.
- oneOf: [
- {
- test: /\.svg$/,
- exclude: [/font-logos.svg$/],
- use: {
- loader: '@svgr/webpack',
- options: {
- svgoConfig: {
- plugins: [
- {
- name: 'preset-default',
- params: {
- overrides: { removeViewBox: false },
- },
- },
- ],
- },
- },
- },
- },
- {
- test: [/\.tsx$/, /\.ts$/],
- include: paths.appSrc,
- exclude: [/(stories|test)\.(ts|tsx)$/, /__data__/],
- use: [
- {
- loader: require.resolve('esbuild-loader'),
- options: {
- loader: 'tsx',
- },
- },
- ],
- },
- {
- test: /\.css$/,
- use: [
- 'style-loader',
- 'css-loader',
- {
- loader: 'esbuild-loader',
- options: {
- loader: 'css',
- minify: false,
- },
- },
- ],
- },
- {
- test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
- type: 'asset/resource',
- },
- ],
- },
- // ** STOP ** Are you adding a new loader?
- // Make sure to add the new loader(s) before the "file" loader.
- ],
- },
- plugins: [
- // Makes some environment variables available in index.html.
- // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
- //
- // In development, this will be an empty string.
- // Generates an `index.html` file with the
+