From 527a86ae4e36288be92df6d5d5bf2ca2e167a51f Mon Sep 17 00:00:00 2001
From: hbseo <gusqja8753@gmail.com>
Date: Wed, 14 Jun 2023 14:37:10 +0900
Subject: [PATCH] update react-with-storybook template for Storybook v7

- add '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript', '@storybook/react-webpack5' and 'storybook'

- add '.babelrc.json' to launch storybook
- update 'main.js' to launch storybook

- update scripts code for Storybook v7
- update file structure in README
---
 src/templates/react-with-storybook.ts            |  9 +++++++--
 templates/react-with-storybook/.babelrc.json     | 16 ++++++++++++++++
 .../react-with-storybook/.storybook/main.js      |  7 +++++++
 templates/react-with-storybook/README.md         |  1 +
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 templates/react-with-storybook/.babelrc.json

diff --git a/src/templates/react-with-storybook.ts b/src/templates/react-with-storybook.ts
index 70263d540..9344528b2 100644
--- a/src/templates/react-with-storybook.ts
+++ b/src/templates/react-with-storybook.ts
@@ -6,21 +6,26 @@ const storybookTemplate: Template = {
   dependencies: [
     ...reactTemplate.dependencies,
     '@babel/core',
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-info',
     '@storybook/addons',
     '@storybook/react',
+    '@storybook/react-webpack5',
     'react-is',
     'babel-loader',
+    'storybook',
   ],
   name: 'react-with-storybook',
   packageJson: {
     ...reactTemplate.packageJson,
     scripts: {
       ...reactTemplate.packageJson.scripts,
-      storybook: 'start-storybook -p 6006',
-      'build-storybook': 'build-storybook',
+      storybook: 'storybook dev -p 6006',
+      'build-storybook': 'storybook build',
     } as PackageJson['scripts'],
   },
 };
diff --git a/templates/react-with-storybook/.babelrc.json b/templates/react-with-storybook/.babelrc.json
new file mode 100644
index 000000000..00ca841a4
--- /dev/null
+++ b/templates/react-with-storybook/.babelrc.json
@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/templates/react-with-storybook/.storybook/main.js b/templates/react-with-storybook/.storybook/main.js
index cf1ac4a9f..e4c8b7bc3 100644
--- a/templates/react-with-storybook/.storybook/main.js
+++ b/templates/react-with-storybook/.storybook/main.js
@@ -4,5 +4,12 @@ module.exports = {
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
+  },
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: true
   }
 };
diff --git a/templates/react-with-storybook/README.md b/templates/react-with-storybook/README.md
index 8a2476efd..cf20b71e2 100644
--- a/templates/react-with-storybook/README.md
+++ b/templates/react-with-storybook/README.md
@@ -80,6 +80,7 @@ This is the folder structure we set up for you:
   main.js
   preview.js
 .gitignore
+.babelrc.json
 package.json
 README.md         # EDIT THIS
 tsconfig.json