Merge branch 'canonical:main' into rsmelo92/migrate

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     sourceType: "module",
   },
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { trailingComma: "es5" }],
     "react/forbid-component-props": [
       "error",
       {
@@ -73,7 +73,7 @@ module.exports = {
       rules: {
         "testing-library/no-node-access": "warn",
         "testing-library/no-container": "warn",
-        "testing-library/no-render-in-setup": "warn",
+        "testing-library/no-render-in-lifecycle": "warn",
       },
     },
   ],

.github/labeler.yml

@@ -1,3 +1,5 @@
 Maintenance 🔨:
-  - package.json
-  - .gitignore
+- changed-files:
+  - any-glob-to-any-file:
+    - package.json
+    - .gitignore

.github/workflows/labeler.yaml → .github/workflows/labeler.yml

@@ -3,9 +3,12 @@ on:
   - pull_request_target
 
 jobs:
-  triage:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/publish-docs.yml

@@ -1,8 +1,9 @@
 name: Publish docs
 
 on:
-  workflow_call:
-  workflow_dispatch:
+  push:
+    branches:
+      - main
 
 jobs:
   build-docs:
@@ -13,13 +14,17 @@ jobs:
         uses: actions/checkout@v4
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
       - name: Install dependencies
         run: yarn install
       - name: Build Storybook
         run: yarn build-docs
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: "./docs"
   publish-docs:
@@ -36,4 +41,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/release.yml

@@ -0,0 +1,33 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/test.yaml

@@ -14,9 +14,9 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: "lts/*"
 
       - name: Install dependencies
         run: yarn install
@@ -37,19 +37,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: cypress-io/github-action@v5
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        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
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-videos

.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"
+  ]
+}

.stylelintrc.json

@@ -21,7 +21,7 @@
     "scss/at-rule-no-unknown": true,
 
     "scss/at-extend-no-missing-placeholder": true,
-    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/load-no-partial-leading-underscore": true,
     "scss/at-import-partial-extension": "never",
 
     "order/properties-alphabetical-order": true,

Dockerfile

@@ -2,7 +2,7 @@
 
 # Build stage: Install yarn dependencies
 # ===
-FROM node:18 AS yarn-dependencies
+FROM node:20 AS yarn-dependencies
 WORKDIR /srv
 ADD package.json .
 ADD yarn.lock .
@@ -19,7 +19,7 @@ RUN yarn run build-docs
 
 # Build the production image
 # ===
-FROM ubuntu:focal
+FROM ubuntu:jammy
 
 # Set up environment
 ENV LANG C.UTF-8

HACKING.md

@@ -6,7 +6,7 @@ Canonical `react-components` is developed with [TypeScript](https://www.typescri
 
 ## Pull Requests
 
-Pull request titles need to follow [conventional commits](https://www.conventionalcommits.org) specification.
+Pull request titles need to follow [conventional commits](https://www.conventionalcommits.org) specification, which will be used by [semantic-release](https://github.com/semantic-release/semantic-release) to determine if a release will be published on merging your pull request into the main branch. You can refer to this [FAQ](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) for details regarding rules for triggering a release.
 
 ## Developing components with Storybook
 

README.md

@@ -1,13 +1,10 @@
 # React components for Vanilla Framework
+![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
 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
-
-See the [component docs](https://canonical.github.io/react-components/) for usage instructions.
+ **[Storybook](https://canonical.github.io/react-components/)** contains component docs with 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"] };

cypress.config.ts

@@ -8,4 +8,5 @@ export default defineConfig({
       return require("./cypress/plugins/index.js")(on, config);
     },
   },
+  experimentalStudio: true,
 });

cypress/e2e/textArea.cy.js

@@ -0,0 +1,24 @@
+context("TextArea", () => {
+  beforeEach(() => {
+    cy.visitPage("TextArea", "Dynamic-Height");
+  });
+
+  it("should adjust height automatically with text content change", () => {
+    let initialHeight = 0;
+    cy.findByRole("textbox").then(($element) => {
+      initialHeight = $element.height();
+    });
+    cy.findByRole("textbox").focus();
+    cy.findByRole("textbox").type("{Enter}{Enter}{Enter}");
+    cy.findByRole("textbox").then(($element) => {
+      const finalHeight = $element.height();
+      expect(finalHeight).to.be.greaterThan(initialHeight);
+      initialHeight = finalHeight;
+    });
+    cy.findByRole("textbox").clear();
+    cy.findByRole("textbox").then(($element) => {
+      const finalHeight = $element.height();
+      expect(finalHeight).to.be.lessThan(initialHeight);
+    });
+  });
+});