From e3c79db7b98918f70b23796604aa25afcb02af1d Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Tue, 5 Mar 2024 16:23:56 +0000 Subject: [PATCH 1/8] [TS migration] Migrate Storybook files --- .storybook/{main.js => main.ts} | 21 ++++++- .storybook/{manager.js => manager.ts} | 0 .storybook/{preview.js => preview.tsx} | 28 +++++---- .storybook/{theme.js => theme.ts} | 5 +- .storybook/webpack.config.js | 54 ------------------ .storybook/webpack.config.ts | 79 ++++++++++++++++++++++++++ 6 files changed, 120 insertions(+), 67 deletions(-) rename .storybook/{main.js => main.ts} (59%) rename .storybook/{manager.js => manager.ts} (100%) rename .storybook/{preview.js => preview.tsx} (51%) rename .storybook/{theme.js => theme.ts} (86%) delete mode 100644 .storybook/webpack.config.js create mode 100644 .storybook/webpack.config.ts diff --git a/.storybook/main.js b/.storybook/main.ts similarity index 59% rename from .storybook/main.js rename to .storybook/main.ts index 7d063fd6ffe1..0234f18ff488 100644 --- a/.storybook/main.js +++ b/.storybook/main.ts @@ -1,12 +1,29 @@ -module.exports = { +type Dir = { + from: string; + to: string; +}; + +type Main = { + stories: string[]; + addons: string[]; + staticDirs: Array; + core: { + builder: string; + }; + managerHead: (head: string) => string; +}; + +const main: Main = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-react-native-web'], staticDirs: ['./public', {from: '../assets/css', to: 'css'}, {from: '../assets/fonts/web', to: 'fonts'}], core: { builder: 'webpack5', }, - managerHead: (head) => ` + managerHead: (head: string) => ` ${head} ${process.env.ENV === 'staging' ? '' : ''} `, }; + +export default main; diff --git a/.storybook/manager.js b/.storybook/manager.ts similarity index 100% rename from .storybook/manager.js rename to .storybook/manager.ts diff --git a/.storybook/preview.js b/.storybook/preview.tsx similarity index 51% rename from .storybook/preview.js rename to .storybook/preview.tsx index a89c720976c9..5ddb9d04d8ae 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.tsx @@ -2,16 +2,24 @@ import {PortalProvider} from '@gorhom/portal'; import React from 'react'; import Onyx from 'react-native-onyx'; import {SafeAreaProvider} from 'react-native-safe-area-context'; -import ComposeProviders from '../src/components/ComposeProviders'; -import HTMLEngineProvider from '../src/components/HTMLEngineProvider'; -import {LocaleContextProvider} from '../src/components/LocaleContextProvider'; -import OnyxProvider from '../src/components/OnyxProvider'; -import {EnvironmentProvider} from '../src/components/withEnvironment'; -import {KeyboardStateProvider} from '../src/components/withKeyboardState'; -import {WindowDimensionsProvider} from '../src/components/withWindowDimensions'; -import ONYXKEYS from '../src/ONYXKEYS'; +import ComposeProviders from '@src/components/ComposeProviders'; +import HTMLEngineProvider from '@src/components/HTMLEngineProvider'; +import {LocaleContextProvider} from '@src/components/LocaleContextProvider'; +import OnyxProvider from '@src/components/OnyxProvider'; +import {EnvironmentProvider} from '@src/components/withEnvironment'; +import {KeyboardStateProvider} from '@src/components/withKeyboardState'; +import {WindowDimensionsProvider} from '@src/components/withWindowDimensions'; +import ONYXKEYS from '@src/ONYXKEYS'; import './fonts.css'; +type Parameter = { + controls: { + matchers: { + color: RegExp; + }; + }; +}; + Onyx.init({ keys: ONYXKEYS, initialKeyStates: { @@ -20,7 +28,7 @@ Onyx.init({ }); const decorators = [ - (Story) => ( + (Story: React.ElementType) => ( @@ -29,7 +37,7 @@ const decorators = [ ), ]; -const parameters = { +const parameters: Parameter = { controls: { matchers: { color: /(background|color)$/i, diff --git a/.storybook/theme.js b/.storybook/theme.ts similarity index 86% rename from .storybook/theme.js rename to .storybook/theme.ts index 08d8b584d580..f1ace5dd37c0 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.ts @@ -1,7 +1,8 @@ +import type {ThemeVars} from '@storybook/theming'; import {create} from '@storybook/theming'; import colors from '../src/styles/theme/colors'; -export default create({ +const theme: ThemeVars = create({ brandTitle: 'New Expensify UI Docs', brandImage: 'logomark.svg', fontBase: 'ExpensifyNeue-Regular', @@ -21,3 +22,5 @@ export default create({ appBorderRadius: 8, inputBorderRadius: 8, }); + +export default theme; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index 204f70344b18..000000000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,54 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -/* eslint-disable no-param-reassign */ -const path = require('path'); -const dotenv = require('dotenv'); -const _ = require('underscore'); - -let envFile; -switch (process.env.ENV) { - case 'production': - envFile = '.env.production'; - break; - case 'staging': - envFile = '.env.staging'; - break; - default: - envFile = '.env'; -} - -const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)}); -const custom = require('../config/webpack/webpack.common')({ - envFile, -}); - -module.exports = ({config}) => { - config.resolve.alias = { - 'react-native-config': 'react-web-config', - 'react-native$': 'react-native-web', - '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'), - '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'), - - // Module alias support for storybook files, coping from `webpack.common.js` - ...custom.resolve.alias, - }; - - // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values - const definePluginIndex = _.findIndex(config.plugins, (plugin) => plugin.constructor.name === 'DefinePlugin'); - config.plugins[definePluginIndex].definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env); - config.resolve.extensions = custom.resolve.extensions; - - const babelRulesIndex = _.findIndex(custom.module.rules, (rule) => rule.loader === 'babel-loader'); - const babelRule = custom.module.rules[babelRulesIndex]; - config.module.rules.push(babelRule); - - // Allows loading SVG - more context here https://github.com/storybookjs/storybook/issues/6188 - const fileLoaderRule = _.find(config.module.rules, (rule) => rule.test && rule.test.test('.svg')); - fileLoaderRule.exclude = /\.svg$/; - config.module.rules.push({ - test: /\.svg$/, - enforce: 'pre', - loader: require.resolve('@svgr/webpack'), - }); - - return config; -}; diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts new file mode 100644 index 000000000000..0c66e184c18f --- /dev/null +++ b/.storybook/webpack.config.ts @@ -0,0 +1,79 @@ +/* eslint-disable @typescript-eslint/naming-convention */ + +/* eslint-disable no-underscore-dangle */ + +/* eslint-disable no-param-reassign */ +import dotenv from 'dotenv'; +import path from 'path'; +import {DefinePlugin} from 'webpack'; +import type {Configuration, RuleSetRule} from 'webpack'; + +type CustomWebpackConfig = { + resolve: { + alias: Record; + extensions: string[]; + }; + module: { + rules: RuleSetRule[]; + }; +}; + +let envFile; +switch (process.env.ENV) { + case 'production': + envFile = '.env.production'; + break; + case 'staging': + envFile = '.env.staging'; + break; + default: + envFile = '.env'; +} + +const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)}); +const custom: CustomWebpackConfig = require('../config/webpack/webpack.common')({ + envFile, +}); + +module.exports = ({config}: {config: Configuration}) => { + if (config.resolve && config.plugins && config.module) { + config.resolve.alias = { + 'react-native-config': 'react-web-config', + 'react-native$': 'react-native-web', + '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'), + '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'), + ...custom.resolve.alias, + }; + + // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values + const definePluginIndex = config.plugins.findIndex((plugin) => plugin instanceof DefinePlugin); + if (definePluginIndex !== -1 && config.plugins[definePluginIndex] instanceof DefinePlugin) { + const definePlugin = config.plugins[definePluginIndex] as DefinePlugin; + if (definePlugin.definitions) { + definePlugin.definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env); + } + } + config.resolve.extensions = custom.resolve.extensions; + + const babelRulesIndex = custom.module.rules.findIndex((rule) => rule.loader === 'babel-loader'); + const babelRule = custom.module.rules[babelRulesIndex]; + if (babelRule) { + config.module.rules?.push(babelRule); + } + + const fileLoaderRule = config.module.rules?.find( + (rule): rule is RuleSetRule => + typeof rule !== 'boolean' && typeof rule !== 'string' && typeof rule !== 'number' && !!rule?.test && rule.test instanceof RegExp && rule.test.test('.svg'), + ); + if (fileLoaderRule?.exclude) { + fileLoaderRule.exclude = /\.svg$/; + } + config.module.rules?.push({ + test: /\.svg$/, + enforce: 'pre', + loader: require.resolve('@svgr/webpack'), + }); + } + + return config; +}; From d906791422db9dfcc0a3ca4c086dd78095f648b0 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Wed, 6 Mar 2024 14:55:47 +0000 Subject: [PATCH 2/8] [TS migration][Storybook] Feedback --- .storybook/main.ts | 13 ++----------- .storybook/preview.tsx | 11 ++--------- .storybook/webpack.config.ts | 8 +++++--- 3 files changed, 9 insertions(+), 23 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 0234f18ff488..33f4befb0f40 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,17 +1,8 @@ -type Dir = { - from: string; - to: string; -}; +import type {StorybookConfig} from '@storybook/core-common'; type Main = { - stories: string[]; - addons: string[]; - staticDirs: Array; - core: { - builder: string; - }; managerHead: (head: string) => string; -}; +} & StorybookConfig; const main: Main = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 5ddb9d04d8ae..4767c7d81343 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,4 +1,5 @@ import {PortalProvider} from '@gorhom/portal'; +import type {Parameters} from '@storybook/addons'; import React from 'react'; import Onyx from 'react-native-onyx'; import {SafeAreaProvider} from 'react-native-safe-area-context'; @@ -12,14 +13,6 @@ import {WindowDimensionsProvider} from '@src/components/withWindowDimensions'; import ONYXKEYS from '@src/ONYXKEYS'; import './fonts.css'; -type Parameter = { - controls: { - matchers: { - color: RegExp; - }; - }; -}; - Onyx.init({ keys: ONYXKEYS, initialKeyStates: { @@ -37,7 +30,7 @@ const decorators = [ ), ]; -const parameters: Parameter = { +const parameters: Parameters = { controls: { matchers: { color: /(background|color)$/i, diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index 0c66e184c18f..6f7ee023643c 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -1,8 +1,8 @@ -/* eslint-disable @typescript-eslint/naming-convention */ - /* eslint-disable no-underscore-dangle */ /* eslint-disable no-param-reassign */ + +/* eslint-disable @typescript-eslint/naming-convention */ import dotenv from 'dotenv'; import path from 'path'; import {DefinePlugin} from 'webpack'; @@ -35,7 +35,7 @@ const custom: CustomWebpackConfig = require('../config/webpack/webpack.common')( envFile, }); -module.exports = ({config}: {config: Configuration}) => { +const webpackConfig = ({config}: {config: Configuration}) => { if (config.resolve && config.plugins && config.module) { config.resolve.alias = { 'react-native-config': 'react-web-config', @@ -77,3 +77,5 @@ module.exports = ({config}: {config: Configuration}) => { return config; }; + +export default webpackConfig; From 2f5bf904096e487492bd5e4c6f2b66edd70d1d2e Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Wed, 6 Mar 2024 15:09:03 +0000 Subject: [PATCH 3/8] [TS migration][Storybook] Lint --- .storybook/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/theme.ts b/.storybook/theme.ts index f1ace5dd37c0..a28a0f031b0c 100644 --- a/.storybook/theme.ts +++ b/.storybook/theme.ts @@ -1,5 +1,6 @@ import type {ThemeVars} from '@storybook/theming'; import {create} from '@storybook/theming'; +// eslint-disable-next-line @dword-design/import-alias/prefer-alias import colors from '../src/styles/theme/colors'; const theme: ThemeVars = create({ From 1acd6eaca8c525191a4a21f5b75a90132b66326d Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Tue, 12 Mar 2024 10:02:12 +0000 Subject: [PATCH 4/8] [TS migration][storybook] Fixed styling and feedback --- .storybook/webpack.config.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index 6f7ee023643c..bff8c3fa6747 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -1,7 +1,5 @@ /* eslint-disable no-underscore-dangle */ - /* eslint-disable no-param-reassign */ - /* eslint-disable @typescript-eslint/naming-convention */ import dotenv from 'dotenv'; import path from 'path'; @@ -18,7 +16,7 @@ type CustomWebpackConfig = { }; }; -let envFile; +let envFile: string | null; switch (process.env.ENV) { case 'production': envFile = '.env.production'; From 57fe5e77255ef4d05320ac3ee933671012130fc1 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Fri, 22 Mar 2024 09:49:39 +0000 Subject: [PATCH 5/8] [TS migration][Storybook] Feedback --- .storybook/webpack.config.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index bff8c3fa6747..7b16d52ac82c 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -1,5 +1,7 @@ /* eslint-disable no-underscore-dangle */ + /* eslint-disable no-param-reassign */ + /* eslint-disable @typescript-eslint/naming-convention */ import dotenv from 'dotenv'; import path from 'path'; @@ -63,7 +65,7 @@ const webpackConfig = ({config}: {config: Configuration}) => { (rule): rule is RuleSetRule => typeof rule !== 'boolean' && typeof rule !== 'string' && typeof rule !== 'number' && !!rule?.test && rule.test instanceof RegExp && rule.test.test('.svg'), ); - if (fileLoaderRule?.exclude) { + if (fileLoaderRule) { fileLoaderRule.exclude = /\.svg$/; } config.module.rules?.push({ From 58ab1f222847fb58093d68b9f157a946efe1c334 Mon Sep 17 00:00:00 2001 From: Ruben Rebelo <39693995+ruben-rebelo@users.noreply.github.com> Date: Tue, 26 Mar 2024 16:07:18 +0000 Subject: [PATCH 6/8] Update .storybook/webpack.config.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com> --- .storybook/webpack.config.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index 7b16d52ac82c..b1392d8c83ec 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -1,7 +1,5 @@ /* eslint-disable no-underscore-dangle */ - /* eslint-disable no-param-reassign */ - /* eslint-disable @typescript-eslint/naming-convention */ import dotenv from 'dotenv'; import path from 'path'; From 68210c3a65448c52310bea94030d211afd9a2195 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Tue, 26 Mar 2024 16:08:36 +0000 Subject: [PATCH 7/8] [TS migration][Webpack] changed envFile to be only string --- .storybook/webpack.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index 7b16d52ac82c..178295cc5720 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -18,7 +18,7 @@ type CustomWebpackConfig = { }; }; -let envFile: string | null; +let envFile: string switch (process.env.ENV) { case 'production': envFile = '.env.production'; From 4fc0eed5a7fdd26b9a28da7525f581ff1e2d7100 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Tue, 26 Mar 2024 16:16:39 +0000 Subject: [PATCH 8/8] [TS migration][webpack] Prettier --- .storybook/webpack.config.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index 16a8c3bbd42b..2fdae76c1268 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -1,5 +1,7 @@ /* eslint-disable no-underscore-dangle */ + /* eslint-disable no-param-reassign */ + /* eslint-disable @typescript-eslint/naming-convention */ import dotenv from 'dotenv'; import path from 'path'; @@ -16,7 +18,7 @@ type CustomWebpackConfig = { }; }; -let envFile: string +let envFile: string; switch (process.env.ENV) { case 'production': envFile = '.env.production';