Upgrade to `Wingsuit 2`

Upgrading Wingsuit 1 to Wingsuit 2 also upgrades Storybook 6 to Storybook 8 and Webpack 4 to Webpack 5.

To make this easy and smooth follow theses steps to manage the upgrade:

Upgrade node to version 20 or higher
Update wingsuit.config.js to support new presets.
Upgrade package.json, delete yarn.lock and run yarn install
Run Wingsuit upgrade script
Upgrade Drupal namespace configuration

1. Upgrade to Node 20 or higher

The easiest way to upgrade to node 20 or higher is nvm. Install nvm and run nvm install 20 and nvm use 20

2. Update `wingsuit.config.js`

To be more flexible Wingsuit 2 moves most of the webpack configuration to presets. In Wingsuit 1 these presets where part of Wingsuit core. Add following presets to your Wingsuit configuration:

  presets: [
    '@wingsuit-designsystem/preset-tailwind', // If you use tailwind
    //'@wingsuit-designsystem/preset-scss', // If you use SCSS
    '@wingsuit-designsystem/preset-lint',
    '@wingsuit-designsystem/preset-twing',
    '@wingsuit-designsystem/preset-placeholder',
    '@wingsuit-designsystem/preset-storybook',
    '@wingsuit-designsystem/preset-drupal',
    '@wingsuit-designsystem/preset-icon',
    '@wingsuit-designsystem/preset-icon-spritemap',
    '@wingsuit-designsystem/preset-imagemin',
  ]

Your wingsuit.config.js should look like:

module.exports = {
  presets: [
    '@wingsuit-designsystem/preset-tailwind',
    '@wingsuit-designsystem/preset-lint',
    '@wingsuit-designsystem/preset-twing',
    '@wingsuit-designsystem/preset-placeholder',
    '@wingsuit-designsystem/preset-storybook',
    '@wingsuit-designsystem/preset-drupal',
    '@wingsuit-designsystem/preset-icon',
    '@wingsuit-designsystem/preset-icon-spritemap',
    '@wingsuit-designsystem/preset-imagemin',
  ],
  designSystems: {
    default: {
      namespaces,
    },
  },
};

3. Upgrade package.json

Replace your devDependencies and scripts in your package.json:

devDependencies

  "devDependencies": {
    "@storybook/addon-essentials": "^8.1.0",
    "@storybook/addon-links": "^8.1.0",
    "@storybook/builder-webpack5": "^8.1.0",
    "@storybook/linter-config": "^4.0.0",
    "@storybook/react": "^8.1.0",
    "@storybook/react-webpack5": "^8.1.0",
    "storybook": "^8.1.0",
    "@wingsuit-designsystem/cli": "^2.0.0-beta.1",
    "@wingsuit-designsystem/core": "^2.0.0-beta.1",
    "@wingsuit-designsystem/pattern-react": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-drupal": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-icon": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-icon-spritemap": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-imagemin": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-lint": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-placeholder": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-storybook": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-tailwind": "^2.0.0-beta.1",
    "@wingsuit-designsystem/preset-twing": "^2.0.0-beta.1",
    "@wingsuit-designsystem/storybook": "^2.0.0-beta.1",
    "autoprefixer": "^9.7.4",
    "postcss": "^8.4.23",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "core-js": "^3.32.1",
    "storybook-addon-theme-provider": "^0.2.1",
    "cross-env": "^7.0.3"
  }

Run scripts:

"scripts": {
    "dev:storybook": "yarn ws dev storybook",
    "build:storybook": "yarn ws build storybook",
    "docs:storybook": "yarn ws build storybook --docs",
    "dev:drupal": "yarn ws dev drupal",
    "build:drupal": "yarn ws build drupal",
    "lint:js": "eslint --ext .js ./",
    "lint:css": "stylelint '**/*.css'",
    "lint": "npm run lint:js; npm run lint:css;",
    "fmt:js": "eslint --fix --ext .js,.vue ./",
    "fmt:css": "npm run lint:css --fix && prettier --loglevel warn --write '**/*.{css}'",
    "fmt": "npm run fmt:js; npm run fmt:css"
  },

Your package.json should look like:

{
    "name": "@wingsuit-designsystem/starter-kit-tailwind",
    "version": "1.2.7",
    "description": "A design system with Storybook, Tailwind and Drupal",
    "main": "",
    "private": true,
    "license": "GPL-2.0",
    "author": {
        "name": "KEY-TEC",
        "url": "https://github.com/wingsuit-designsystem/"
    },
    "engines": {
        "node": ">=18.13.0",
        "yarn": ">=1.3.2"
    },
    "repository": {
        "type": "git",
        "url": "git@github.com:wingsuit-designsystem/wingsuit.git"
    },
    "keywords": [
        "storybook",
        "ui_patterns",
        "prototyping"
    ],
    "scripts": {
      "dev:storybook": "yarn ws dev storybook",
      "build:storybook": "yarn ws build storybook",
      "dev:drupal": "yarn ws dev drupal",
      "build:drupal": "yarn ws build drupal",
      "docs:storybook": "yarn ws build storybook --docs",
      "lint:js": "eslint --ext .js ./",
      "lint:css": "stylelint '**/*.css'",
      "lint": "npm run lint:js; npm run lint:css;",
      "fmt:js": "eslint --fix --ext .js,.vue ./",
      "fmt:css": "npm run lint:css --fix && prettier --loglevel warn --write '**/*.{css}'",
      "fmt": "npm run fmt:js; npm run fmt:css"
    },
    "devDependencies": {
      "@storybook/addon-essentials": "^7.0.2",
      "@storybook/addon-links": "^7.0.2",
      "@storybook/addon-styling": "^1.3.6",
      "@storybook/addons": "^7.0.2",
      "@storybook/builder-webpack5": "^7.0.2",
      "@storybook/linter-config": "^3.1.2",
      "@storybook/react": "^7.0.2",
      "@storybook/react-webpack5": "^7.0.2",
      "@wingsuit-designsystem/cli": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/core": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/pattern-react": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-drupal": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-icon": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-icon-spritemap": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-imagemin": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-lint": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-placeholder": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-storybook": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-tailwind": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/preset-twing": "^2.0.0-alpha.11",
      "@wingsuit-designsystem/storybook": "^2.0.0-alpha.11",
      "autoprefixer": "^9.7.4",
      "postcss": "^8.4.23",
      "react": "^16.14.0",
      "react-dom": "^16.14.0",
      "storybook": "^7.0.2",
      "core-js": "^3.32.1",
      "storybook-addon-theme-provider": "^0.1.10"
    },
    "dependencies": {
        "@drupal/once": "^1.0.1",
        "@splidejs/splide": "^4.1.4",
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/typography": "^0.5.0",
        "@tarekraafat/autocomplete.js": "^9.1.1",
        "@videojs/themes": "^1.0.1",
        "alpinejs": "^3.0.9"
    }
}

Remove `yarn.lock` and run `yarn install`

4. Upgrade Wingsuit

Wingsuit 2 and Storybook 7 uses different configuration files than Wingsuit 1. Also Wingsuit 2 uses own stories pattern.stories.wingsuit.jsx files.

To replace Run:

yarn ws upgrade

Congratulation!

Start now storybook and check if everything works:

yarn dev:storybook

5. Upgrade Drupal

TBD.

Problems

TBD.

Read further

Configure Wingsuit?
Check the wingsuit.config.js

Details

Upgrade to Wingsuit 2