@canonical/react-components 2.8.1 → 2.9.0

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export declare const loadTheme: () => string;
+export declare const isDarkTheme: (theme: string) => boolean;
+export declare const applyTheme: (theme: string) => void;
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+declare const ThemeSwitcher: FC;
+export default ThemeSwitcher;

package/dist/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadTheme = exports.isDarkTheme = exports.default = exports.applyTheme = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const LOCAL_STORAGE_KEY = "theme";
+const THEME_SYSTEM = "system";
+const THEME_DARK = "dark";
+const THEME_LIGHT = "light";
+const loadTheme = () => {
+  const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+exports.loadTheme = loadTheme;
+const saveTheme = theme => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+const isDarkTheme = theme => {
+  if (theme === THEME_SYSTEM) {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return theme === THEME_DARK;
+};
+exports.isDarkTheme = isDarkTheme;
+const applyTheme = theme => {
+  if (isDarkTheme(theme)) {
+    document.body.classList.add("is-dark");
+  } else {
+    document.body.classList.remove("is-dark");
+  }
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+exports.applyTheme = applyTheme;
+const ThemeSwitcher = () => {
+  const [activeTheme, setActiveTheme] = (0, _react.useState)(loadTheme());
+  const themeButton = theme => {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-segmented-control__button",
+      type: "button",
+      "aria-selected": activeTheme === theme ? "true" : "false",
+      onClick: () => {
+        saveTheme(theme);
+        setActiveTheme(theme);
+        applyTheme(theme);
+      }
+    }, theme);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-segmented-control"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-segmented-control__list",
+    "aria-label": "Theme switcher"
+  }, themeButton(THEME_DARK), themeButton(THEME_LIGHT), themeButton(THEME_SYSTEM)));
+};
+var _default = exports.default = ThemeSwitcher;

package/dist/components/ThemeSwitcher/ThemeSwitcher.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ThemeSwitcher from "./ThemeSwitcher";
+declare const meta: Meta<typeof ThemeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+export declare const Default: Story;

package/dist/components/ThemeSwitcher/ThemeSwitcher.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ThemeSwitcher = _interopRequireDefault(require("./ThemeSwitcher"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ThemeSwitcher.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};

package/dist/components/ThemeSwitcher/ThemeSwitcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ThemeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/components/ThemeSwitcher/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "applyTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.applyTheme;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.default;
+  }
+});
+Object.defineProperty(exports, "isDarkTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.isDarkTheme;
+  }
+});
+Object.defineProperty(exports, "loadTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.loadTheme;
+  }
+});
+var _ThemeSwitcher = _interopRequireWildcard(require("./ThemeSwitcher"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export declare const loadTheme: () => string;
+export declare const isDarkTheme: (theme: string) => boolean;
+export declare const applyTheme: (theme: string) => void;
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+declare const ThemeSwitcher: FC;
+export default ThemeSwitcher;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { useState } from "react";
+var LOCAL_STORAGE_KEY = "theme";
+var THEME_SYSTEM = "system";
+var THEME_DARK = "dark";
+var THEME_LIGHT = "light";
+export var loadTheme = () => {
+  var saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+var saveTheme = theme => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+export var isDarkTheme = theme => {
+  if (theme === THEME_SYSTEM) {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return theme === THEME_DARK;
+};
+export var applyTheme = theme => {
+  if (isDarkTheme(theme)) {
+    document.body.classList.add("is-dark");
+  } else {
+    document.body.classList.remove("is-dark");
+  }
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+var ThemeSwitcher = () => {
+  var [activeTheme, setActiveTheme] = useState(loadTheme());
+  var themeButton = theme => {
+    return /*#__PURE__*/React.createElement("button", {
+      className: "p-segmented-control__button",
+      type: "button",
+      "aria-selected": activeTheme === theme ? "true" : "false",
+      onClick: () => {
+        saveTheme(theme);
+        setActiveTheme(theme);
+        applyTheme(theme);
+      }
+    }, theme);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-segmented-control"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-segmented-control__list",
+    "aria-label": "Theme switcher"
+  }, themeButton(THEME_DARK), themeButton(THEME_LIGHT), themeButton(THEME_SYSTEM)));
+};
+export default ThemeSwitcher;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ThemeSwitcher from "./ThemeSwitcher";
+declare const meta: Meta<typeof ThemeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+export declare const Default: Story;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.stories.js

@@ -0,0 +1,9 @@
+import ThemeSwitcher from "./ThemeSwitcher";
+var meta = {
+  component: ThemeSwitcher,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ThemeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/esm/components/ThemeSwitcher/index.js

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/esm/index.d.ts

@@ -66,6 +66,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme, } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";

package/dist/esm/index.js

@@ -66,6 +66,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme, } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";

package/dist/index.js

@@ -87,6 +87,10 @@ var _exportNames = {
   TableRow: true,
   Tabs: true,
   Textarea: true,
+  ThemeSwitcher: true,
+  loadTheme: true,
+  isDarkTheme: true,
+  applyTheme: true,
   Tooltip: true,
   TablePagination: true,
   TablePaginationControls: true,
@@ -568,6 +572,12 @@ Object.defineProperty(exports, "Theme", {
     return _enums.Theme;
   }
 });
+Object.defineProperty(exports, "ThemeSwitcher", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.default;
+  }
+});
 Object.defineProperty(exports, "ToastNotification", {
   enumerable: true,
   get: function () {
@@ -592,6 +602,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "applyTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.applyTheme;
+  }
+});
 Object.defineProperty(exports, "createEventQueue", {
   enumerable: true,
   get: function () {
@@ -610,6 +626,12 @@ Object.defineProperty(exports, "info", {
     return _NotificationProvider.info;
   }
 });
+Object.defineProperty(exports, "isDarkTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.isDarkTheme;
+  }
+});
 Object.defineProperty(exports, "isNavigationAnchor", {
   enumerable: true,
   get: function () {
@@ -622,6 +644,12 @@ Object.defineProperty(exports, "isNavigationButton", {
     return _utils.isNavigationButton;
   }
 });
+Object.defineProperty(exports, "loadTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.loadTheme;
+  }
+});
 Object.defineProperty(exports, "queue", {
   enumerable: true,
   get: function () {
@@ -791,6 +819,7 @@ var _TableHeader = _interopRequireDefault(require("./components/TableHeader"));
 var _TableRow = _interopRequireDefault(require("./components/TableRow"));
 var _Tabs = _interopRequireDefault(require("./components/Tabs"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
+var _ThemeSwitcher = _interopRequireWildcard(require("./components/ThemeSwitcher"));
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
 var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.25.0",
+    "vanilla-framework": "4.26.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },