[CHORE] Update Storybook 7.5.3

.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>>

MIGRATION.md

@@ -1,5 +1,90 @@
 # Migration Guide
 
+## Version `6.*` to Version `7.*`
+
+* Add the following to your `devDependencies` and `resolutions` in package.json
+
+    The `resolution` is needed 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"
+      }
+    }
+    ```
+
+then run 
+
+```shell
+yarn 
+```
+
+* 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 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.

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": []
+}

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;

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"
   }
 }

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": []
+}

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;

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"
   }
 }

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": []
+}

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;

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"
   }
 }

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": []
+}

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;

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"
   }
 }

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": []
+}