feat: bump to v14, replace Webpack with Vite+SWC+svg-sprite

.github/workflows/update-versions.yml

@@ -24,7 +24,7 @@ jobs:
         with:
           node-version: 16.17.0
       - run: npm install -g yarn
-      - name: Update preview app
+      - name: Update versions
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |

.gitignore

@@ -5,4 +5,7 @@ cypress/screenshots
 cypress/videos
 server_killer.rb
 yarn-error.log
-preview
+preview
+dist
+core
+reset

.npmignore

@@ -1,15 +1,14 @@
-.babelrc
 .bundle
 .DS_Store
 .editorconfig
 .eslintrc.js
 .pretterrc.json
 .prettierignore
 lib
-modules-config.js
 node_modules
 preview
-release-canditate.sh
 release.sh
 scripts
-webpack.config.js
+dist
+.swcrc
+.svgrc

.storybook/main.ts

@@ -1,16 +1,10 @@
-const path = require("path");
+import type { StorybookConfig } from "@storybook/react-vite";
 
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
-const config = {
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  staticDirs: ["../public"],
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
+    name: "@storybook/react-vite",
+    options: {},
   },
   core: {
     disableTelemetry: true,
@@ -19,39 +13,6 @@ const config = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/addon-styling-webpack",
-    {
-      name: "@storybook/addon-styling-webpack",
-
-      options: {
-        rules: [
-          {
-            test: /\.css$/,
-            sideEffects: true,
-            use: [
-              require.resolve("style-loader"),
-              {
-                loader: require.resolve("css-loader"),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve("postcss-loader"),
-                options: {
-                  postcssOptions: {
-                    config: path.resolve(
-                      __dirname,
-                      "postcss.storybook.config.js"
-                    ),
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      },
-    },
   ],
   docs: {
     autodocs: "tag",

.svgrc

@@ -0,0 +1,14 @@
+{
+  "dest": "dist/core",
+  "mode": {
+    "symbol": {
+      "inline": true,
+      "sprite": "../sprites"
+    }
+  },
+  "shape": {
+    "id": {
+      "generator": "sprite-%s"
+    }
+  }
+}

.swcrc

@@ -0,0 +1,12 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    }
+  },
+  "exclude": [".stories.tsx"],
+  "minify": true
+}

README.md

@@ -127,16 +127,10 @@ Putting SVG files inside a`src/MODULE_NAME/icons` folder will add them to a per-
 
 Usage with the `Icon` React component:
 
-```jsx
+```tsx
 <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
 ```
 
-Usage with `Icon` VW component:
-
-```rb
-<%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1rem", additional_css: "align-middle transform rotate-180 mr-4")) %>
-```
-
 Usage without a component:
 
 ```html
@@ -148,7 +142,7 @@ Usage without a component:
 
 Usage without a component, in React, with hover states. Note the [group](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) class:
 
-```jsx
+```tsx
 <a
   href="{url}"
   className="text-gui-default hover:text-gui-hover focus:text-gui-focus group"
@@ -189,7 +183,7 @@ To build Storybook as if it was a statically built site (i.e. what it looks like
 
 #### Publishing pre-release packages for review apps
 
-Make sure you commit & push your work and remove the [development-specific config](#using-the-development-build-of-ably-ui-in-the-preview-app) before doing this.
+Make sure you commit & push your work before doing this.
 
 You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) to publish.
 
@@ -213,11 +207,10 @@ This script is a combination of two scripts:
 1. Pre-Release:
 
 - update your local dependencies for ably-ui and run a production build
-- release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+- release an NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
 
 2. Update Pre-Release Version:
 
-- update the preview app
 - commit all the above and push to origin
 
 This will trigger a build of the review app.
@@ -262,10 +255,10 @@ By default, [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/) wil
 #### To add a new component:
 
 1. Create a folder in `src`, in the module of your choice (i.e. `core`). The folder name should be TitleCase.
-2. Add a `component.js`
+2. Add a `component.tsx`
 
-- if the component has custom CSS, add a `component.css` file as well. Import the CSS file in `component.js`
-- if you need a VW component, add `component.rb` and `component.html.erb`
+- also add an empty `component.js` file (current legacy requirement)
+- if the component has custom CSS, add a `component.css` file as well.
 
 #### To see this component in Storybook:
 
@@ -277,13 +270,13 @@ We use [Semantic Versioning 2.0.0](https://semver.org/) to version different lib
 
 Packages are published to the [GitHub private registry](https://github.com/features/packages).
 
-Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM and gem registries as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release. ⚠️
+Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM registry as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release.
 
 This will trigger GitHub actions in supported apps (currently [Voltaire](http://github.com/ably/voltaire) & [Website](http://github.com/ably/website)) to create a PR with an ably-ui version update.
 
 **To trigger a release:**
 
-- Make sure you have run pre-release script `./pre-release.sh` (This updates the npm package version for ably-ui in the following files `Gemfile`, `package.json`).
+- Make sure you have run pre-release script `./pre-release.sh` (This updates the npm package version for ably-ui in `package.json`).
 - Merge your PR into `main` after it has been approved.
 - On the Github [Ably-UI](http://github.com/ably/ably-ui) repo, [create a new release](https://github.com/ably/ably-ui/releases/new) tag.
 - Create a new tag with the new version number for the release.
@@ -294,9 +287,7 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http://
 - Check the Github `Actions` tab in the repo to make sure the release is green.
 - Upon successful release, a compiled version of the Storybook site will be deployed to Github Pages.
 
-This will release the packages, update library & preview app and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website.
-
-_Note: If the version number of the gem has been yanked you will need to increment the version number._
+This will release the packages and update library and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website. It will also deploy a new Storybook site to [https://ably.github.io/ably-ui/](https://ably.github.io/ably-ui/).
 
 ### Running tests
 

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ably/ui",
-  "version": "13.2.2-dev.78815ed",
+  "version": "14.0.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+ssh://[email protected]/ably/ably-ui.git"
@@ -15,66 +16,54 @@
     "tailwind.extend.js"
   ],
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-transform-regenerator": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-webpack5": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/test": "^7.6.4",
+    "@swc/cli": "^0.3.10",
+    "@swc/core": "^1.4.11",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.2",
-    "babel-loader": "^8.2.0",
-    "blink-diff": "^1.0.13",
-    "commander": "^7.2.0",
-    "css-loader": "^5.0.0",
     "cypress": "^13.3.1",
     "eslint": "^7.12.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "extra-watch-webpack-plugin": "^1.0.3",
-    "find-imports": "^1.1.0",
-    "mini-css-extract-plugin": "^1.2.1",
     "msw": "1.3.2",
     "msw-storybook-addon": "^1.10.0",
-    "null-loader": "^4.0.1",
-    "postcss": "^8.1.10",
-    "postcss-calc": "^7.0.5",
-    "postcss-custom-properties": "^10.0.0",
+    "postcss": "^8.4.35",
     "postcss-import": "^13.0.0",
-    "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
     "storybook": "^7.6.4",
-    "style-loader": "^3.3.3",
-    "svg-spritemap-webpack-plugin": "^3.7.1",
+    "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
+    "tsx": "^3.14.0",
     "typescript": "5.3.3",
-    "webpack": "^5.3.2",
-    "webpack-cli": "^4.2.0",
-    "yargs": "^16.2.0"
+    "vite": "^4.5.2"
   },
   "scripts": {
-    "build": "node scripts/build.js",
-    "build:verbose": "node scripts/build.js -v",
-    "watch": "node scripts/build.js -w",
-    "format:check": "yarn prettier -c *.{js,ts} src/**/*.{js,ts,tsx} cypress",
-    "format:write": "yarn prettier -w *.{js,ts} src/**/*.{js,ts,tsx} cypress",
+    "build:prebuild": "rm -r core reset",
+    "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths",
+    "build:sprites": "svg-sprite -C .svgrc src/core/icons/*.svg",
+    "build:cleanup": "mv dist/* . && rm -r dist",
+    "build": "yarn build:prebuild && yarn build:swc && yarn build:sprites && yarn build:cleanup",
+    "watch": "yarn build:swc -w",
+    "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx} cypress",
+    "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx} cypress",
     "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx} cypress",
     "cy:open": "cypress open",
     "cy:headless": "cypress run --quiet",
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",
-    "storybook": "storybook dev -p 6006 --no-version-updates",
+    "start": "vite --port 5000",
+    "storybook": "yarn build && storybook dev -p 6006 --no-version-updates",
     "build-storybook": "storybook build -o preview"
   },
   "dependencies": {