Merge pull request #329 from ably/set-up-14

[WEB-3668] Bump version 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
+/dist
+/preview
+/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,13 @@
+{
+  "jsc": {
+    "target": "es2018",
+    "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.
@@ -231,9 +224,10 @@ All components live in `src` and follow a directory and filename convention:
 - module directory (TitleCase)
   - module asset files: `scripts.js` for JavaScript and `styles.css` for CSS
   - component directory (TitleCase)
-    - `component.js` - this is the entry file for a component and is the only required file
-    - `components.css` - additional CSS
-    - for react, `components.tsx`
+    - `component.js` - supporting/legacy JS script
+    - `component.css` - additional CSS
+    - `[ComponentName].stories.tsx` - if React, a Storybook presentation file
+  - if React, `[ComponentName].tsx` at a sibling level to the component directory
 
 For example:
 
@@ -244,7 +238,8 @@ For example:
   - Accordion
     - component.js
     - component.css
-    - component.tsx
+    - Accordion.stories.tsx
+  - Accordion.tsx
 ```
 
 #### CSS
@@ -261,29 +256,25 @@ 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`
-
-- 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`
+Add a `[ComponentName].tsx` file in `src`, in the module of your choice (most likely `core`). Any supporting files, i.e. stylesheets, should be placed in a directory with the same name of the component.
 
 #### To see this component in Storybook:
 
-Create a `[COMPONENT_NAME].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically.
+Create a `[ComponentName].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically.
 
 ### Publishing
 
 We use [Semantic Versioning 2.0.0](https://semver.org/) to version different library versions.
 
 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 +285,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