ci: setup semantic-release and fix cypress tests (#1024)

- update readme to be more clear and concise
- remove publish-on-release.yml, release-drafter.yml, RELEASE.md as these are now redundant
- publish storybook docs on push to main
- fix cypress tests: remove cypress headless false flag

.github/workflows/publish-docs.yml

@@ -1,8 +1,9 @@
 name: Publish docs
 
 on:
-  workflow_call:
-  workflow_dispatch:
+  push:
+    branches:
+      - main
 
 jobs:
   build-docs:

.github/workflows/test.yaml

@@ -16,7 +16,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: "lts/*"
 
       - name: Install dependencies
         run: yarn install
@@ -37,12 +37,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: cypress-io/github-action@v5
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - uses: cypress-io/github-action@v6
         with:
           start: yarn docs
           wait-on: "http://localhost:9009"
           browser: chrome
-          headless: true
           env: port=9009
       - uses: actions/upload-artifact@v3
         if: failure()

.releaserc

@@ -0,0 +1,12 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/github"
+  ]
+}

README.md

@@ -1,13 +1,10 @@
 # React components for Vanilla Framework
+![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main) ![Cypress chrome headless](https://github.com/canonical/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
 
 This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React.
 
-## How to use the components
+ **[Storybook](https://canonical.github.io/react-components/)** contains component docs with usage instructions.
 
-See the [component docs](https://canonical.github.io/react-components/) for usage instructions.
-
-![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
-![Cypress chrome headless](https://github.com/canonical/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
 
 ## Requirements
 

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] };

package.json

@@ -27,6 +27,8 @@
     "@babel/preset-typescript": "7.23.3",
     "@percy/cli": "1.27.6",
     "@percy/storybook": "4.3.7",
+    "@semantic-release/changelog": "6.0.3",
+    "@semantic-release/git": "10.0.1",
     "@storybook/addon-a11y": "7.6.7",
     "@storybook/addon-essentials": "7.6.7",
     "@storybook/addon-interactions": "7.6.7",
@@ -71,6 +73,7 @@
     "react-dom": "18.2.0",
     "sass": "1.69.7",
     "sass-loader": "10.5.1",
+    "semantic-release": "23.0.0",
     "storybook": "7.6.7",
     "style-loader": "3.3.3",
     "stylelint": "15.11.0",
@@ -127,15 +130,16 @@
     "lint-package-json": "npmPkgJsonLint .",
     "lint": "yarn lint-package-json && yarn lint-js && yarn lint-style",
     "percy": "yarn build-docs && percy storybook ./docs",
-    "prepublishOnly": "yarn clean && yarn install && yarn build",
     "serve": "yarn docs",
     "start": "yarn docs",
     "test": "jest",
     "test-cypress": "concurrently 'yarn run docs' 'yarn run cypress:test' -k -s first",
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
     "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
     "cypress:run": "cypress run --env port=${PORT:-9009}",
-    "cypress:open": "cypress open --env port=${PORT:-9009}"
+    "cypress:open": "cypress open --env port=${PORT:-9009}",
+    "semantic-release": "semantic-release",
+    "semantic-release-dry-run": "semantic-release --dry-run --no-ci"
   },
   "eslintConfig": {
     "extends": "react-app"