chore: update storybook to v7.5.3

Author: jamaljsr

app/.storybook/main.js

@@ -4,6 +4,7 @@ module.exports = {
     '../src/__stories__/LoopPage.stories.tsx',
     '../src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
   ],
+
   addons: [
     '@storybook/preset-create-react-app',
     '@storybook/addon-actions',
@@ -15,12 +16,19 @@ module.exports = {
       },
     },
   ],
-  core: {
-    builder: 'webpack5'
-  },
+
   features: {
     // Emotion11 quasi compatibility issue with storybook. Disabling feature flag to support emotion11.
     // https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility
     emotionAlias: false,
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 };

app/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addDecorator } from '@storybook/react';
+import { Preview } from '@storybook/react';
 import '../src/App.scss';
 import '../src/i18n';
 import StoryWrapper from '../src/__stories__/StoryWrapper';
@@ -10,8 +10,18 @@ import StoryWrapper from '../src/__stories__/StoryWrapper';
  *  - include the theme & store providers
  *  - use Storybook parameters to customize the width of the wrapper
  */
-addDecorator((StoryFn, ctx) => (
-  <StoryWrapper centered={ctx.parameters.centered} contained={ctx.parameters.contained}>
-    <StoryFn {...ctx} />
-  </StoryWrapper>
-));
+
+const preview: Preview = {
+  decorators: [
+    (StoryFn, ctx) => (
+      <StoryWrapper
+        centered={ctx.parameters.centered}
+        contained={ctx.parameters.contained}
+      >
+        <StoryFn {...ctx} />
+      </StoryWrapper>
+    ),
+  ],
+};
+
+export default preview;

app/package.json

@@ -15,8 +15,8 @@
     "lint": "eslint --ext .ts,.tsx --ignore-path .eslintignore .",
     "tsc": "tsc --noEmit",
     "protos": "node ./scripts/build-protos.js",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "storybook": "storybook dev -p 9009 -s public",
+    "build-storybook": "storybook build -s public"
   },
   "dependencies": {
     "@emotion/react": "11.4.0",
@@ -57,14 +57,13 @@
     "styled-components": "5.1.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-docs": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/preset-create-react-app": "4.1.2",
-    "@storybook/react": "6.5.9",
+    "@storybook/addon-actions": "7.5.3",
+    "@storybook/addon-docs": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addons": "7.5.3",
+    "@storybook/preset-create-react-app": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "11.1.1",
     "@testing-library/user-event": "12.2.0",
@@ -94,6 +93,7 @@
     "jest-environment-jsdom": "27.5.1",
     "prettier": "2.1.2",
     "sass": "1.43.4",
+    "storybook": "7.5.3",
     "ts-protoc-gen": "0.12.0",
     "typescript": "4.1.6",
     "webpack": "5.89.0"