MIGRATION.md

Migration Guide

Version 2.* to Version 3.*

• Update to latest version

  yarn add @storybook/native

• Add the following devDependencies

  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

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

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

  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

{
  "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 (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.

The knobs prop has been renamed to extraParams.