update: Refactor Storybook configuration and dependencies

.storybook/main.ts

@@ -9,12 +9,20 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    'storybook-addon-intl'
+    '@bumped-inc/storybook-addon-lingui-v3',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls'
   ],
+  docs: {
+    autodocs: true
+  },
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
   stories: ['../app/components/**/stories/**/*.mdx', '../app/components/**/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)']
 };
 export default config;

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import enMessages from '../app/translations/en.json';
+import { I18nProvider } from '@lingui/react';
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+i18n.load('en', enMessages);
+i18n.activate('en');
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};
+
+export const decorators = [
+  (Story: React.FC) => {
+    return (
+      <I18nProvider i18n={i18n}>
+        <Story />
+      </I18nProvider>
+    );
+  }
+];

.storybook/webpack.config.js

@@ -32,6 +32,6 @@ module.exports = ({ config }) => {
     include: path.resolve(__dirname, '../')
   });
   config.resolve.modules.push('app');
-  config.resolve.extensions.push('.js', '.jsx', '.react.js');
+  config.resolve.extensions.push('.js', '.jsx', '.react.js', '.ts', '.tsx');
   return config;
 };

app/containers/LanguageProvider/index.tsx

@@ -21,7 +21,6 @@ export interface LanguageProviderProps {
 
 export function LanguageProvider({ locale, messages, children }: PropsWithChildren<LanguageProviderProps>) {
   const localizedMessages = messages[locale];
-
   i18n.load(locale, localizedMessages);
   i18n.activate(locale);
 

app/tsconfig.json

@@ -16,6 +16,8 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": ".",
+    "typeRoots": ["node_modules/@types"],
+
     "paths": {
       "@app/*": ["./*"],
       "@components/*": ["components/*"],

package.json

@@ -78,10 +78,14 @@
   "pre-commit": "lint:staged",
   "dependencies": {
     "@babel/helper-regex": "^7.10.5",
+    "@bumped-inc/storybook-addon-lingui-v3": "^0.0.4",
     "@lingui/react": "^4.11.2",
     "@redux-devtools/extension": "^3.2.2",
     "@reduxjs/toolkit": "^1.8.0",
     "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-controls": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "antd": "^4.9.3",
@@ -113,6 +117,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
+    "react-intl": "^6.6.8",
     "react-redux": "7.0.2",
     "react-router-dom": "^5.1.2",
     "react-screentype-hook": "^1.0.18",
@@ -228,7 +233,6 @@
     "rimraf": "2.6.3",
     "shelljs": "0.8.3",
     "storybook": "^8.2.9",
-    "storybook-addon-intl": "^4.0.0",
     "storybook-router": "^0.3.4",
     "style-loader": "2.0.0",
     "stylelint": "10.0.1",