feat(theme-switcher): add new component to apply dark and light theme and switch between them easily (#1230)

Signed-off-by: David Edler <[email protected]>

Author: edlerd

src/components/ThemeSwitcher/ThemeSwitcher.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import ThemeSwitcher from "./ThemeSwitcher";
+
+const meta: Meta<typeof ThemeSwitcher> = {
+  component: ThemeSwitcher,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ThemeSwitcher>;
+
+export const Default: Story = {
+  name: "Default",
+};

src/components/ThemeSwitcher/ThemeSwitcher.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import ThemeSwitcher from "./ThemeSwitcher";
+import userEvent from "@testing-library/user-event";
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe("ThemeSwitcher", () => {
+  it("renders", () => {
+    const { container } = render(<ThemeSwitcher />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("applies theme on interaction", async () => {
+    render(<ThemeSwitcher />);
+    const localStorage = window.localStorage.__proto__;
+    const localstorageSpy = jest.spyOn(localStorage, "setItem");
+    const bodyClassAddSpy = jest.spyOn(document.body.classList, "add");
+    const bodyClassRemoveSpy = jest.spyOn(document.body.classList, "remove");
+
+    // apply dark theme
+    const darkBtn = screen.getByRole("button", { name: "dark" });
+    await userEvent.click(darkBtn);
+    expect(localstorageSpy).toHaveBeenCalledWith("theme", "dark");
+    expect(bodyClassAddSpy).toHaveBeenCalledWith("is-dark");
+
+    // apply light theme
+    const lightBtn = screen.getByRole("button", { name: "light" });
+    await userEvent.click(lightBtn);
+    expect(localstorageSpy).toHaveBeenCalledWith("theme", "light");
+    expect(bodyClassRemoveSpy).toHaveBeenCalledWith("is-dark");
+  });
+});

src/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import type { FC } from "react";
+import { useState } from "react";
+
+const LOCAL_STORAGE_KEY = "theme";
+const THEME_SYSTEM = "system";
+const THEME_DARK = "dark";
+const THEME_LIGHT = "light";
+
+export const loadTheme = (): string => {
+  const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+
+const saveTheme = (theme: string): void => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+
+export const isDarkTheme = (theme: string) => {
+  if (theme === THEME_SYSTEM) {
+    return (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+  }
+  return theme === THEME_DARK;
+};
+
+export const applyTheme = (theme: string): void => {
+  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);
+ * }, []);
+ * ```
+ */
+const ThemeSwitcher: FC = () => {
+  const [activeTheme, setActiveTheme] = useState(loadTheme());
+
+  const themeButton = (theme: string) => {
+    return (
+      <button
+        className="p-segmented-control__button"
+        type="button"
+        aria-selected={activeTheme === theme ? "true" : "false"}
+        onClick={() => {
+          saveTheme(theme);
+          setActiveTheme(theme);
+          applyTheme(theme);
+        }}
+      >
+        {theme}
+      </button>
+    );
+  };
+
+  return (
+    <div className="p-segmented-control">
+      <div className="p-segmented-control__list" aria-label="Theme switcher">
+        {themeButton(THEME_DARK)}
+        {themeButton(THEME_LIGHT)}
+        {themeButton(THEME_SYSTEM)}
+      </div>
+    </div>
+  );
+};
+
+export default ThemeSwitcher;

src/components/ThemeSwitcher/__snapshots__/ThemeSwitcher.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThemeSwitcher renders 1`] = `
+<div
+  class="p-segmented-control"
+>
+  <div
+    aria-label="Theme switcher"
+    class="p-segmented-control__list"
+  >
+    <button
+      aria-selected="false"
+      class="p-segmented-control__button"
+      type="button"
+    >
+      dark
+    </button>
+    <button
+      aria-selected="false"
+      class="p-segmented-control__button"
+      type="button"
+    >
+      light
+    </button>
+    <button
+      aria-selected="true"
+      class="p-segmented-control__button"
+      type="button"
+    >
+      system
+    </button>
+  </div>
+</div>
+`;

src/components/ThemeSwitcher/index.ts

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

src/index.ts

@@ -83,6 +83,12 @@ 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,