[CHORE] Update Storybook 7.5.3 (#79)

* [CHORE] Update Storybook 7.5.2 * [CHORE] Update Storybook 7.5.2 * [CHORE] Update Storybook 7.5.2 * [CHORE] Update Storybook 7.5.2 * [CHORE] Update Storybook 7.5.2 * [CHORE] Update Storybook 7.5.3 * [CHORE] Update Storybook 7.5.3 * [CHORE] Update Storybook 7.5.3 * [CHORE] Update Storybook 7.5.3 * [CHORE] Update Storybook 7.5.3 --------- Co-authored-by: Ahmed Alnaami <ahmedalnaami@airasia.com>
storybookjs · Nov 29, 2023 · 528b5b1 · 528b5b1
1 parent a2cb013
commit 528b5b1
Show file tree

Hide file tree

Showing 38 changed files with 6,505 additions and 6,597 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -32,7 +32,7 @@ executors:
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:10-browsers
+      - image: cimg/node:18.17.1-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=4096
     resource_class: <<parameters.class>>
@@ -45,7 +45,7 @@ executors:
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:12-browsers
+      - image: cimg/node:18.17.1-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=4096
     resource_class: <<parameters.class>>

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,5 +1,91 @@
 # Migration Guide
 
+## Version `2.*` to Version `3.*`
+
+* Update to latest version [![GitHub release (latest by date)](https://img.shields.io/github/v/release/storybookjs/native)](https://github.com/storybookjs/native/releases)
+
+  ```shell
+  yarn add @storybook/native
+  ```
+* Add the following `devDependencies` 
+  ```shell
+  yarn -D add @babel/preset-env @babel/preset-react @babel/preset-typescript @storybook/react-webpack5@7.5.3 storybook@7.5.3
+  ```
+* Add the following to your `resolutions` section in `package.json` due to [this issue](https://github.com/storybookjs/storybook/issues/22431)
+     ```json
+    {
+      "devDependencies": {
+        "@babel/preset-env": "^7.23.2",
+        "@babel/preset-react": "^7.22.15",
+        "@babel/preset-typescript": "^7.23.2",
+        "@storybook/react-webpack5": "^7.5.3",
+        "storybook": "^7.5.3"
+      },
+      "resolutions": {
+        "jackspeak": "2.1.1"
+      }
+    }
+    ```
+
+* Update your `scripts`: `start-storybook` to `storybook dev` and `build-storybook` to `storybook build`
+  ```json
+  {
+    "scripts": {
+    "start": "yarn build:stories && storybook dev -p 53743",
+    "build:storybook": "yarn build:stories && storybook build",
+    "build:stories": "node ./generate.js"
+    }
+  }
+  ```
+
+* Update `.storybook/main.js` by exporting config and adding `framework` section
+  ```javascript
+  const config = {
+      stories: ["../stories/*.stories.jsx"],
+
+      framework: {
+          name: "@storybook/react-webpack5",
+          options: {},
+      },
+
+      addons: [
+          "@storybook/addon-docs",
+          "@storybook/addon-controls",
+          "@storybook/native-addon/dist/register.js"
+      ],
+
+      docs: {
+          autodocs: true
+      }
+  };
+
+  export default config;
+  ```
+
+* create `.babelrc.json` file at project's root dir if your project does not have one already
+```json
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
+```
+
+* If you created your own stories (not generated) make sure to use [new argType structure](https://storybook.js.org/docs/react/api/arg-types) (no more nested control object)
+
 ## Version 1 to Version 2
 
 In version 2, there is no `debounceDelay` prop. If you are passing it to the emulator component, remove it.

diff --git a/examples/android-material-ui/.babelrc.json b/examples/android-material-ui/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/examples/android-material-ui/.storybook/main.js b/examples/android-material-ui/.storybook/main.js
@@ -1,8 +1,17 @@
-module.exports = {
-    stories: ["../stories/*.stories.jsx", "../stories/*.stories.playground.jsx"],
+const  config = {
+    stories: ["../stories/*.stories.jsx"],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
     addons: [
         "@storybook/addon-docs",
         "@storybook/addon-controls",
         "@storybook/native-addon/dist/register.js"
-    ]
+    ],
+    docs: {
+        autodocs: true
+    }
 };
+
+export default config;
diff --git a/examples/android-material-ui/package.json b/examples/android-material-ui/package.json
@@ -10,8 +10,8 @@
     "Vanya Sehgal <vanya_sehgal@intuit.com>"
   ],
   "scripts": {
-    "start": "yarn build:stories && yarn start-storybook -p 53743",
-    "build:storybook": "yarn build:stories && yarn build-storybook",
+    "start": "yarn build:stories && storybook dev -p 53743",
+    "build:storybook": "yarn build:stories && storybook build",
     "build:stories": "node ./generate.js"
   },
   "keywords": [],
@@ -20,5 +20,12 @@
     "@storybook/native-addon": "link:../../packages/addon",
     "axios": "0.20.0",
     "change-case": "4.1.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/react-webpack5": "^7.5.3",
+    "storybook": "^7.5.3"
   }
 }
diff --git a/examples/controls/.babelrc.json b/examples/controls/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/examples/controls/.storybook/main.js b/examples/controls/.storybook/main.js
@@ -1,8 +1,17 @@
-module.exports = {
-    stories: ["../src/*.stories.jsx"],
+const  config = {
+    stories: [{ directory: '../src', files: '**/*.stories.@(mdx|tsx|ts|jsx|js)' }],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
     addons: [
         "@storybook/addon-docs",
         "@storybook/addon-controls",
         "@storybook/native-addon"
-    ]
+    ],
+    docs: {
+        autodocs: true
+    }
 };
+
+export default config;
diff --git a/examples/controls/package.json b/examples/controls/package.json
@@ -10,13 +10,20 @@
     "Adil Malik <adil_malik@intuit.com>"
   ],
   "scripts": {
-    "start": "yarn start-storybook -p 53743",
-    "build:storybook": "yarn build-storybook"
+    "start": "storybook dev -p 53743",
+    "build:storybook": "storybook build"
   },
   "keywords": [],
   "dependencies": {
     "@storybook/native": "link:../../packages/native",
     "@storybook/native-addon": "link:../../packages/addon",
     "rgb-hex": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/react-webpack5": "^7.5.3",
+    "storybook": "^7.5.3"
   }
 }
diff --git a/examples/cross-platform/.babelrc.json b/examples/cross-platform/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/examples/cross-platform/.storybook/main.js b/examples/cross-platform/.storybook/main.js
@@ -1,8 +1,17 @@
-module.exports = {
-    stories: ["../src/*.stories.jsx"],
+const  config = {
+    stories: [{ directory: '../src', files: '**/*.stories.@(mdx|tsx|ts|jsx|js)' }],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
     addons: [
         "@storybook/addon-docs",
         "@storybook/addon-controls",
         "@storybook/native-addon/dist/register.js"
-    ]
+    ],
+    docs: {
+        autodocs: true
+    }
 };
+
+export default config;
diff --git a/examples/cross-platform/package.json b/examples/cross-platform/package.json
@@ -10,8 +10,8 @@
     "Adil Malik <adil_malik@intuit.com>"
   ],
   "scripts": {
-    "start": "yarn start-storybook -p 53743",
-    "build:storybook": "yarn build-storybook"
+    "start": "storybook dev -p 53743",
+    "build:storybook": "storybook build"
   },
   "keywords": [],
   "dependencies": {
@@ -20,5 +20,12 @@
     "@storybook/native-addon": "link:../../packages/addon",
     "@storybook/native-components": "link:../../packages/native-components",
     "@storybook/native-dev-middleware": "link:../../packages/dev-middleware"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/react-webpack5": "^7.5.3",
+    "storybook": "^7.5.3"
   }
 }
diff --git a/examples/flutter/.babelrc.json b/examples/flutter/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/examples/flutter/.storybook/main.js b/examples/flutter/.storybook/main.js
@@ -1,8 +1,17 @@
-module.exports = {
-    stories: ["../src/*.stories.jsx"],
+const  config = {
+    stories: [{ directory: '../src', files: '**/*.stories.@(mdx|tsx|ts|jsx|js)' }],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
     addons: [
         "@storybook/addon-docs",
         "@storybook/addon-controls",
         "@storybook/native-addon/dist/register.js"
-    ]
+    ],
+    docs: {
+        autodocs: true
+    }
 };
+
+export default config;
diff --git a/examples/flutter/package.json b/examples/flutter/package.json
@@ -11,13 +11,20 @@
     "Adil Malik <adil_malik@intuit.com>"
   ],
   "scripts": {
-    "start": "yarn start-storybook",
-    "build:storybook": "yarn build-storybook"
+    "start": "storybook dev",
+    "build:storybook": "storybook build"
   },
   "keywords": [],
   "dependencies": {
     "@storybook/native": "link:../../packages/native",
     "@storybook/native-addon": "link:../../packages/addon",
     "rgb-hex": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@storybook/react-webpack5": "^7.5.3",
+    "storybook": "^7.5.3"
   }
 }
diff --git a/examples/ios-material-ui/.babelrc.json b/examples/ios-material-ui/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}