From 03331c44276ec56e9f235e4d5ee75030455a753f Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 19 Sep 2023 15:47:08 +0200 Subject: build(deps): bump all dependencies * MDX type has changed so some components props had to be updated * Since Storybook now supports TS, I renamed the main/preview files --- .storybook/main.js | 40 --------------------------- .storybook/main.ts | 47 ++++++++++++++++++++++++++++++++ .storybook/manager.js | 6 ----- .storybook/manager.ts | 6 +++++ .storybook/preview.js | 56 -------------------------------------- .storybook/preview.tsx | 66 +++++++++++++++++++++++++++++++++++++++++++++ .storybook/themes/common.js | 8 ------ .storybook/themes/common.ts | 8 ++++++ .storybook/themes/dark.js | 37 ------------------------- .storybook/themes/dark.ts | 37 +++++++++++++++++++++++++ .storybook/themes/light.js | 36 ------------------------- .storybook/themes/light.ts | 36 +++++++++++++++++++++++++ 12 files changed, 200 insertions(+), 183 deletions(-) delete mode 100644 .storybook/main.js create mode 100644 .storybook/main.ts delete mode 100644 .storybook/manager.js create mode 100644 .storybook/manager.ts delete mode 100644 .storybook/preview.js create mode 100644 .storybook/preview.tsx delete mode 100644 .storybook/themes/common.js create mode 100644 .storybook/themes/common.ts delete mode 100644 .storybook/themes/dark.js create mode 100644 .storybook/themes/dark.ts delete mode 100644 .storybook/themes/light.js create mode 100644 .storybook/themes/light.ts (limited to '.storybook') diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index ca18e6b..0000000 --- a/.storybook/main.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @typedef {import('webpack').Configuration} WebpackConfig - */ - -const storybookConfig = { - stories: ['../src/**/*.stories.@(md|mdx|js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - 'storybook-addon-next', - 'storybook-dark-mode', - ], - framework: '@storybook/react', - core: { - builder: 'webpack5', - }, - staticDirs: ['../public'], - /** - * @param {WebpackConfig} config - * @return {Promise} - */ - webpackFinal: async (config) => { - // Use SVGR for SVG files. See: https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004 - const rules = config.module.rules; - const fileLoaderRule = rules.find((rule) => rule.test.test('.svg')); - fileLoaderRule.exclude = /\.svg$/; - rules.push({ - test: /\.svg$/, - use: [{ loader: '@svgr/webpack', options: { dimensions: false } }], - }); - - /** @type {import('next').NextConfig} */ - const nextConfig = require('../next.config'); - - return { ...config, ...nextConfig.webpack }; - }, -}; - -module.exports = storybookConfig; diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..8257c59 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,47 @@ +import type { StorybookConfig } from '@storybook/nextjs'; +import { RuleSetRule } from 'webpack'; + +const config: StorybookConfig = { + stories: [ + '../src/**!(content)/*.mdx', + '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-onboarding', + 'storybook-dark-mode', + ], + framework: { + name: '@storybook/nextjs', + options: {}, + }, + docs: { + autodocs: 'tag', + }, + staticDirs: ['../public'], + webpackFinal: async (config) => { + // Use SVGR for SVG files. See: https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004 + const rules = config.module?.rules as RuleSetRule[]; + const fileLoaderRule = rules.find( + (rule) => rule?.test instanceof RegExp && rule.test.test('.svg') + ); + + if (fileLoaderRule) fileLoaderRule.exclude = /\.svg$/; + + rules.push({ + test: /\.svg$/, + use: [{ loader: '@svgr/webpack', options: { dimensions: false } }], + }); + + /** @type {import('next').NextConfig} */ + const nextConfig = require('../next.config'); + + return { + ...config, + ...nextConfig.webpack, + }; + }, +}; +export default config; diff --git a/.storybook/manager.js b/.storybook/manager.js deleted file mode 100644 index 945c246..0000000 --- a/.storybook/manager.js +++ /dev/null @@ -1,6 +0,0 @@ -import { addons } from '@storybook/addons'; -import light from './themes/light'; - -addons.setConfig({ - theme: light, -}); diff --git a/.storybook/manager.ts b/.storybook/manager.ts new file mode 100644 index 0000000..945c246 --- /dev/null +++ b/.storybook/manager.ts @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import light from './themes/light'; + +addons.setConfig({ + theme: light, +}); diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index ce30b56..0000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,56 +0,0 @@ -import { ThemeProvider, useTheme } from 'next-themes'; -import { useEffect } from 'react'; -import { IntlProvider } from 'react-intl'; -import { useDarkMode } from 'storybook-dark-mode'; -import { DocsContainer } from './overrides/docs-container'; -import dark from './themes/dark'; -import light from './themes/light'; -import '../src/styles/globals.scss'; - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - darkMode: { - // Override the default dark theme - dark: { ...dark }, - // Override the default light theme - light: { ...light }, - stylePreview: true, - }, - docs: { - container: DocsContainer, - }, -}; - -// Create a component that listens for theme change. -export const ThemeWrapper = (props) => { - const { setTheme } = useTheme(); - const theme = useDarkMode() ? 'dark' : 'light'; - - useEffect(() => { - setTheme(theme); - }, [theme, setTheme]); - - return <>{props.children}; -}; - -export const decorators = [ - (Story) => ( - - - - - - - - ), -]; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 0000000..2b7a466 --- /dev/null +++ b/.storybook/preview.tsx @@ -0,0 +1,66 @@ +import type { Decorator, Preview } from '@storybook/react'; +import { ThemeProvider, useTheme } from 'next-themes'; +import { FC, ReactNode, useEffect } from 'react'; +import { IntlProvider } from 'react-intl'; +import { useDarkMode } from 'storybook-dark-mode'; +import { DocsContainer } from './overrides/docs-container'; +import dark from './themes/dark'; +import light from './themes/light'; +import '../src/styles/globals.scss'; + +type ThemeWrapperProps = { + children: ReactNode; +}; + +// Create a component that listens for theme change. +export const ThemeWrapper: FC = ({ children }) => { + const { setTheme } = useTheme(); + const theme = useDarkMode() ? 'dark' : 'light'; + + useEffect(() => { + setTheme(theme); + }, [theme, setTheme]); + + return <>{children}; +}; + +const withAllProviders: Decorator = (Story) => { + return ( + + + + + + + + ); +}; + +const preview: Preview = { + decorators: [withAllProviders], + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + darkMode: { + // Override the default dark theme + dark: { ...dark }, + // Override the default light theme + light: { ...light }, + stylePreview: true, + }, + docs: { + container: DocsContainer, + }, + }, +}; + +export default preview; diff --git a/.storybook/themes/common.js b/.storybook/themes/common.js deleted file mode 100644 index 17619c2..0000000 --- a/.storybook/themes/common.js +++ /dev/null @@ -1,8 +0,0 @@ -export const brand = { - title: 'Design system', -}; - -export const fontFamilies = { - mono: '"Cousine", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace', - primary: '"Inter", "Liberation Sans", Arial, sans-serif', -}; diff --git a/.storybook/themes/common.ts b/.storybook/themes/common.ts new file mode 100644 index 0000000..17619c2 --- /dev/null +++ b/.storybook/themes/common.ts @@ -0,0 +1,8 @@ +export const brand = { + title: 'Design system', +}; + +export const fontFamilies = { + mono: '"Cousine", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace', + primary: '"Inter", "Liberation Sans", Arial, sans-serif', +}; diff --git a/.storybook/themes/dark.js b/.storybook/themes/dark.js deleted file mode 100644 index e23703b..0000000 --- a/.storybook/themes/dark.js +++ /dev/null @@ -1,37 +0,0 @@ -import { create } from '@storybook/theming'; -import { brand, fontFamilies } from './common'; - -const colors = { - black: 'hsl(208, 25%, 11%)', - blackBright: 'hsl(208, 21%, 15%)', - blue: 'hsl(200, 50%, 68%)', - blueBright: 'hsl(200, 55%, 70%)', - grey: 'hsl(208, 10%, 70%)', - greyDark: 'hsl(208, 20%, 25%)', - greyDarker: 'hsl(208, 18%, 20%)', - white: 'hsl(208, 25%, 92%)', - whiteDark: 'hsl(206, 20%, 93%)', -}; - -export default create({ - base: 'dark', - brandTitle: brand.title, - colorPrimary: colors.blue, - colorSecondary: colors.blueBright, - appBg: colors.black, - appContentBg: colors.black, - appBorderColor: colors.greyDark, - appBorderRadius: 3, - fontBase: fontFamilies.primary, - fontCode: fontFamilies.mono, - textColor: colors.white, - textInverseColor: colors.black, - textMutedColor: colors.grey, - barTextColor: colors.white, - barSelectedColor: colors.blueBright, - barBg: colors.blackBright, - inputBg: colors.greyDarker, - inputBorder: colors.greyDark, - inputTextColor: colors.white, - inputBorderRadius: 0, -}); diff --git a/.storybook/themes/dark.ts b/.storybook/themes/dark.ts new file mode 100644 index 0000000..e23703b --- /dev/null +++ b/.storybook/themes/dark.ts @@ -0,0 +1,37 @@ +import { create } from '@storybook/theming'; +import { brand, fontFamilies } from './common'; + +const colors = { + black: 'hsl(208, 25%, 11%)', + blackBright: 'hsl(208, 21%, 15%)', + blue: 'hsl(200, 50%, 68%)', + blueBright: 'hsl(200, 55%, 70%)', + grey: 'hsl(208, 10%, 70%)', + greyDark: 'hsl(208, 20%, 25%)', + greyDarker: 'hsl(208, 18%, 20%)', + white: 'hsl(208, 25%, 92%)', + whiteDark: 'hsl(206, 20%, 93%)', +}; + +export default create({ + base: 'dark', + brandTitle: brand.title, + colorPrimary: colors.blue, + colorSecondary: colors.blueBright, + appBg: colors.black, + appContentBg: colors.black, + appBorderColor: colors.greyDark, + appBorderRadius: 3, + fontBase: fontFamilies.primary, + fontCode: fontFamilies.mono, + textColor: colors.white, + textInverseColor: colors.black, + textMutedColor: colors.grey, + barTextColor: colors.white, + barSelectedColor: colors.blueBright, + barBg: colors.blackBright, + inputBg: colors.greyDarker, + inputBorder: colors.greyDark, + inputTextColor: colors.white, + inputBorderRadius: 0, +}); diff --git a/.storybook/themes/light.js b/.storybook/themes/light.js deleted file mode 100644 index d445272..0000000 --- a/.storybook/themes/light.js +++ /dev/null @@ -1,36 +0,0 @@ -import { create } from '@storybook/theming'; -import { brand, fontFamilies } from './common'; - -const colors = { - black: 'hsl(207, 47%, 11%)', - blue: 'hsl(206, 75%, 31%)', - blueBright: 'hsl(206, 77%, 36%)', - grey: 'hsl(206, 15%, 80%)', - greyBright: 'hsl(206, 20%, 86%)', - greyDark: 'hsl(206, 30%, 30%)', - white: 'hsl(206, 15%, 97%)', - whiteDark: 'hsl(206, 20%, 93%)', -}; - -export default create({ - base: 'light', - brandTitle: brand.title, - colorPrimary: colors.blue, - colorSecondary: colors.blueBright, - appBg: colors.white, - appContentBg: colors.white, - appBorderColor: colors.grey, - appBorderRadius: 3, - fontBase: fontFamilies.primary, - fontCode: fontFamilies.mono, - textColor: colors.black, - textInverseColor: colors.white, - textMutedColor: colors.greyDark, - barTextColor: colors.black, - barSelectedColor: colors.blueBright, - barBg: colors.whiteDark, - inputBg: colors.greyBright, - inputBorder: colors.grey, - inputTextColor: colors.black, - inputBorderRadius: 0, -}); diff --git a/.storybook/themes/light.ts b/.storybook/themes/light.ts new file mode 100644 index 0000000..d445272 --- /dev/null +++ b/.storybook/themes/light.ts @@ -0,0 +1,36 @@ +import { create } from '@storybook/theming'; +import { brand, fontFamilies } from './common'; + +const colors = { + black: 'hsl(207, 47%, 11%)', + blue: 'hsl(206, 75%, 31%)', + blueBright: 'hsl(206, 77%, 36%)', + grey: 'hsl(206, 15%, 80%)', + greyBright: 'hsl(206, 20%, 86%)', + greyDark: 'hsl(206, 30%, 30%)', + white: 'hsl(206, 15%, 97%)', + whiteDark: 'hsl(206, 20%, 93%)', +}; + +export default create({ + base: 'light', + brandTitle: brand.title, + colorPrimary: colors.blue, + colorSecondary: colors.blueBright, + appBg: colors.white, + appContentBg: colors.white, + appBorderColor: colors.grey, + appBorderRadius: 3, + fontBase: fontFamilies.primary, + fontCode: fontFamilies.mono, + textColor: colors.black, + textInverseColor: colors.white, + textMutedColor: colors.greyDark, + barTextColor: colors.black, + barSelectedColor: colors.blueBright, + barBg: colors.whiteDark, + inputBg: colors.greyBright, + inputBorder: colors.grey, + inputTextColor: colors.black, + inputBorderRadius: 0, +}); -- cgit v1.2.3