Merge branch 'main' into dependabot/npm_and_yarn/npm_and_yarn-f062349243

.storybook/addons/withTheme.css

@@ -0,0 +1,3 @@
+.docs-story {
+    background: var(--vf-color-background-default);
+}

.storybook/addons/withTheme.jsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from "react";
+
+import "./withTheme.css";
+
+const THEMES = [
+  {
+    value: "is-light",
+    title: "Theme: Light",
+  },
+  {
+    value: "is-dark",
+    title: "Theme: Dark",
+  },
+  {
+    value: "is-paper",
+    title: "Theme: Paper",
+  },
+];
+
+export const themeType = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: THEMES[0].value,
+    toolbar: {
+      items: THEMES,
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+export const WithThemeProvider = (Story, context) => {
+  const theme = context.globals.theme;
+  const themeRef = useRef(null);
+
+  useEffect(() => {
+    if (themeRef.current !== theme) {
+      if (themeRef.current) {
+        document.body.classList.remove(themeRef.current);
+      }
+
+      document.body.classList.add(theme);
+      themeRef.current = theme;
+    }
+  }, [theme]);
+
+  return <Story {...context} />;
+};

.storybook/main.js

@@ -7,9 +7,10 @@ const config = {
     "@storybook/addon-docs",
     "@storybook/addon-controls",
     "@storybook/addon-a11y",
-    "@storybook/addon-webpack5-compiler-babel"
+    "@storybook/addon-webpack5-compiler-babel",
   ],
   webpackFinal: async (config) => {
+    process.env.BABEL_ENV = "cjs";
     config.module.rules.push({
       test: /\.scss$/,
       use: ["style-loader", "css-loader", "sass-loader"],

.storybook/preview.js

@@ -1,8 +1,16 @@
 import { themes } from "@storybook/theming";
 import "vanilla-framework/scss/build.scss";
+import { themeType, WithThemeProvider } from "./addons/withTheme";
 
 export const parameters = {
   docs: {
     theme: themes.vanillaish,
   },
+  backgrounds: {
+    disable: true,
+  },
 };
+
+export const decorators = [WithThemeProvider];
+
+export const globalTypes = themeType;

README.md

@@ -1,14 +1,14 @@
 # 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.
+This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React. The library exposes both a CJS and an ESM build.
 
  **[Storybook](https://canonical.github.io/react-components/)** contains component docs with usage instructions.
 
 
 ## Requirements
 
-Canonical react components currently require that your build is configured with [sass-loader](https://github.com/webpack-contrib/sass-loader) (or equivalent), to compile sass.
+Canonical react components currently require that your build is configured with [sass-loader](https://github.com/webpack-contrib/sass-loader) (or equivalent), to compile Sass.
 
 ## Install
 

babel.config.js

@@ -0,0 +1,65 @@
+const commonJs = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-typescript-to-proptypes",
+    [
+      "module-resolver",
+      {
+        root: ["./src"],
+        alias: {
+          enums: "./src/enums",
+          components: "./src/components",
+          hooks: "./src/hooks",
+          types: "./src/types",
+          utils: "./src/utils",
+        },
+      },
+    ],
+  ],
+};
+const esm = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: false,
+        targets: {
+          esmodules: true,
+          chrome: "120",
+        },
+      },
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-typescript-to-proptypes",
+    [
+      "module-resolver",
+      {
+        root: ["./src"],
+        alias: {
+          enums: "./src/enums",
+          components: "./src/components",
+          hooks: "./src/hooks",
+          types: "./src/types",
+          utils: "./src/utils",
+        },
+      },
+    ],
+  ],
+};
+
+module.exports = {
+  env: {
+    cjs: commonJs,
+    test: commonJs,
+    esm,
+  },
+};

package.json

@@ -78,7 +78,7 @@
     "react": "18.3.1",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.3.1",
-    "sass": "1.77.8",
+    "sass": "1.79.4",
     "sass-loader": "16.0.1",
     "semantic-release": "24.1.0",
     "storybook": "8.2.9",
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",
-    "vanilla-framework": "4.15.0",
+    "vanilla-framework": "4.18.0",
     "wait-on": "8.0.0",
     "webpack": "5.94.0"
   },
@@ -126,10 +126,12 @@
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
-    "build": "rm -rf dist && yarn build-local; yarn build-declaration",
-    "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap' --ignore '**/*.test.ts','**/*.test.tsx','**/*.stories.tsx','**/__snapshots__','src/setupTests.js','src/testing'",
-    "build-declaration": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build-watch": "yarn run build-local --watch",
+    "build": "rm -rf dist && yarn build-cjs && yarn build-declaration && yarn build-esm && yarn build-declaration-esm",
+    "build-cjs": "NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
+    "build-esm": "NODE_ENV=production BABEL_ENV=esm babel src --out-dir dist/esm --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration-esm": "tsc --project tsconfig.json --outDir dist/esm && tsc-alias -p tsconfig.json --outDir dist/esm",
+    "build-watch": "yarn run build-cjs --watch",
     "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
     "docs": "storybook dev -p ${PORT:-9009} --no-open",

src/components/ApplicationLayout/ApplicationLayout.tsx

@@ -20,6 +20,7 @@ import AppStatus from "./AppStatus";
 import Application from "./Application";
 import Button from "components/Button";
 import Icon from "components/Icon";
+import SkipLink from "components/SkipLink";
 
 export type BaseProps<
   NI = SideNavigationLinkDefaultElement,
@@ -86,6 +87,10 @@ export type BaseProps<
      * Classes to apply to the status area.
      */
     statusClassName?: string;
+    /**
+     * Id to apply to the main area. Used for the "Skip to main content" link.
+     */
+    mainId?: string;
   },
   HTMLProps<HTMLDivElement>
 >;
@@ -134,6 +139,7 @@ const ApplicationLayout = <
   sideNavigation,
   status,
   statusClassName,
+  mainId = "main-content",
   ...props
 }: Props<NI, PL>) => {
   const [internalMenuPinned, setInternalMenuPinned] = useState(false);
@@ -145,6 +151,7 @@ const ApplicationLayout = <
 
   return (
     <Application {...props}>
+      <SkipLink mainId={mainId} />
       {(navItems || sideNavigation) && (
         <>
           <AppNavigationBar className={navigationBarClassName}>
@@ -222,7 +229,9 @@ const ApplicationLayout = <
           </AppNavigation>
         </>
       )}
-      <AppMain className={mainClassName}>{children}</AppMain>
+      <AppMain id={mainId} className={mainClassName}>
+        {children}
+      </AppMain>
       {aside}
       {status && <AppStatus className={statusClassName}>{status}</AppStatus>}
     </Application>

src/components/CodeSnippet/CodeSnippet.stories.tsx

@@ -4,6 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import CodeSnippet from "./CodeSnippet";
 import { CodeSnippetBlockAppearance } from "./CodeSnippetBlock";
+import Button from "components/Button";
 
 const meta: Meta<typeof CodeSnippet> = {
   component: CodeSnippet,
@@ -351,13 +352,12 @@ export const Content: Story = {
     <CodeSnippet
       blocks={[
         {
-          title: "With embedded iframe",
-          code: "<iframe src='./iframe.html?viewMode=story&id=components-button--default&args='></iframe>",
+          title: "A button example",
+          code: "<Button>Button</Button>",
           content: (
-            <iframe
-              title="iframe"
-              src="./iframe.html?viewMode=story&id=components-button--default&args="
-            ></iframe>
+            <div style={{ margin: "0.5rem" }}>
+              <Button>Button</Button>
+            </div>
           ),
         },
       ]}
@@ -377,9 +377,9 @@ export const JsxCodeElements: Story = {
         {
           code: (
             <>
-              <strong>snap</strong>install<a href="#test">toto</a>
+              <strong>snap</strong> install <a href="#test">toto</a>
               <br />
-              <strong>apt</strong>install<a href="#test">toto</a>
+              <strong>apt</strong> install <a href="#test">toto</a>
             </>
           ),
         },

src/components/DoughnutChart/DoughnutChart.scss

@@ -0,0 +1,30 @@
+@import "vanilla-framework";
+
+.doughnut-chart {
+  width: 6.5rem;
+
+  .doughnut-chart__tooltip {
+    display: block;
+  }
+
+  .doughnut-chart__tooltip > :only-child {
+    // Override the tooltip wrapper.
+    display: block !important;
+  }
+
+  .doughnut-chart__chart {
+    // Restrict hover areas to the strokes.
+    pointer-events: stroke;
+  }
+
+  .doughnut-chart__segment {
+    fill: transparent;
+
+    // Animate stroke size changes on hover.
+    transition: stroke-width 0.3s ease;
+  }
+}
+
+.doughnut-chart__legend {
+  list-style-type: none;
+}