adnbn-ui 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adnbn-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",
@@ -41,10 +41,7 @@
     "./plugin": "./src/plugin/index.ts",
     "./theme": "./src/styles/mixins.scss"
   },
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
+  "sideEffects": false,
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -55,7 +52,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "adnbn": "^0.1.3",
+    "adnbn": "^0.2.1",
     "autosize": "^6.0.1",
     "classnames": "^2.5.1",
     "odometer": "^0.4.8",

package/src/index.ts

@@ -1,3 +1,3 @@
 export * from "./components";
 export * from "./providers";
-export {Theme} from "./types/theme";
+export {Theme, type ThemeStorageContract} from "./types/theme";

package/src/providers/theme/ThemeProvider.tsx

@@ -2,24 +2,47 @@ import React, {FC, PropsWithChildren, useCallback, useEffect, useState} from "re
 
 import {ThemeContext} from "./context";
 
-import {Theme} from "../../types/theme";
+import {Theme, ThemeStorageContract} from "../../types/theme";
 import {Config} from "../../types/config";
 
 const isDarkMedia = () => window?.matchMedia("(prefers-color-scheme: dark)")?.matches;
 
-const ThemeProvider: FC<PropsWithChildren<Pick<Config, "components">>> = ({children, components}) => {
-    const [theme, setTheme] = useState<Theme>(() => {
-        return isDarkMedia() ? Theme.Dark : Theme.Light;
-    });
+const isValid = (theme: Theme | undefined): theme is Theme => {
+    return !!theme && [Theme.Light, Theme.Dark].includes(theme);
+};
+
+export interface ThemeProviderProps extends Pick<Config, "components"> {
+    storage?: ThemeStorageContract;
+}
+
+const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({children, components, storage}) => {
+    const [theme, setTheme] = useState<Theme>(() => (isDarkMedia() ? Theme.Dark : Theme.Light));
 
     const changeTheme = useCallback((theme: Theme) => {
-        setTheme(theme);
+        if (storage) {
+            storage.change(theme).catch(e => console.error("ThemeProvider: set theme to storage error", e));
+        } else {
+            setTheme(theme);
+        }
     }, []);
 
     const toggleTheme = useCallback(() => {
         changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark);
     }, [theme, changeTheme]);
 
+    useEffect(() => {
+        if (!storage) return;
+
+        storage
+            .get()
+            .then(newTheme => isValid(newTheme) && setTheme(newTheme))
+            .catch(e => console.error("ThemeProvider: get theme from storage error", e));
+
+        const unsubscribe = storage.watch(newTheme => isValid(newTheme) && setTheme(newTheme));
+
+        return () => unsubscribe();
+    }, [storage]);
+
     useEffect(() => {
         document.querySelector("html")?.setAttribute("theme", theme);
     }, [theme]);

package/src/providers/theme/ThemeStorage.tsx

@@ -0,0 +1,36 @@
+import {Storage} from "adnbn/storage";
+
+import {Theme, ThemeStorageContract} from "../../types/theme";
+
+export default class implements ThemeStorageContract {
+    private readonly storage = new Storage<Record<string, Theme>>({
+        area: "local",
+        namespace: "adnbn-ui",
+    });
+
+    private readonly key = "theme";
+
+    public async get(): Promise<Theme | undefined> {
+        return await this.storage.get(this.key);
+    }
+
+    public async change(theme: Theme): Promise<void> {
+        return this.storage.set(this.key, theme);
+    }
+
+    public async toggle(): Promise<void> {
+        let theme = await this.get();
+
+        if (!theme) {
+            theme = Theme.Dark;
+        }
+
+        await this.change(theme === Theme.Dark ? Theme.Light : Theme.Dark);
+    }
+
+    public watch(callback: (theme: Theme) => void): () => void {
+        return this.storage.watch({
+            [this.key]: newValue => newValue && callback(newValue),
+        });
+    }
+}

package/src/providers/theme/index.ts

@@ -1,2 +1,3 @@
 export {default as ThemeProvider} from "./ThemeProvider";
+export {default as ThemeStorage} from "./ThemeStorage";
 export {useTheme, useComponentProps} from "./context";

package/src/providers/ui/UIProvider.tsx

@@ -1,8 +1,9 @@
-import React, {FC, PropsWithChildren} from "react";
+import React, {FC, PropsWithChildren, useRef} from "react";
 import {merge} from "ts-deepmerge";
 
-import {ExtraProvider, IconsProvider, ThemeProvider} from "../index";
+import {ExtraProvider, IconsProvider, ThemeProvider, ThemeStorage} from "../index";
 
+import {ThemeStorageContract} from "../../types/theme";
 import {ComponentsProps, Config, ExtraProps, Icons} from "../../types/config";
 
 import "./styles/default.scss";
@@ -14,6 +15,8 @@ import config from "adnbn-ui-config";
 export type UIProviderProps = Partial<Config>;
 
 const UIProvider: FC<PropsWithChildren<UIProviderProps>> = ({children, components = {}, extra = {}, icons = {}}) => {
+    const storage = useRef<ThemeStorageContract>(new ThemeStorage());
+
     const componentsProps: ComponentsProps = merge(config.components || {}, components);
 
     const extraProps: ExtraProps = merge(config.extra || {}, extra);
@@ -21,7 +24,7 @@ const UIProvider: FC<PropsWithChildren<UIProviderProps>> = ({children, component
     const svgIcons: Icons = merge(config.icons || {}, icons);
 
     return (
-        <ThemeProvider components={componentsProps}>
+        <ThemeProvider components={componentsProps} storage={storage.current}>
             <ExtraProvider extra={extraProps}>
                 <IconsProvider icons={svgIcons}>{children}</IconsProvider>
             </ExtraProvider>

package/src/providers/ui/styles/reset.scss

@@ -120,7 +120,6 @@ body {
   letter-spacing: var(--letter-spacing);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overflow: hidden;
   will-change: background-color, color;
   transition:
     background-color var(--transition-speed-md),

package/src/types/theme.ts

@@ -2,3 +2,10 @@ export enum Theme {
     Light = "light",
     Dark = "dark",
 }
+
+export interface ThemeStorageContract {
+    get: () => Promise<Theme | undefined>;
+    change: (theme: Theme) => Promise<void>;
+    toggle: () => Promise<void>;
+    watch: (callback: (theme: Theme) => void) => () => void;
+}

package/src/providers/theme/styles/reset.scss

@@ -1,128 +0,0 @@
-a,
-abbr,
-acronym,
-address,
-applet,
-article,
-aside,
-audio,
-b,
-big,
-blockquote,
-body,
-canvas,
-caption,
-center,
-cite,
-code,
-dd,
-del,
-details,
-dfn,
-div,
-dl,
-dt,
-em,
-embed,
-fieldset,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-main,
-mark,
-menu,
-nav,
-object,
-ol,
-output,
-p,
-pre,
-q,
-ruby,
-s,
-samp,
-section,
-small,
-span,
-strike,
-strong,
-sub,
-summary,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-tt,
-u,
-ul,
-var,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  vertical-align: baseline;
-  outline: none !important;
-  box-sizing: border-box;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section {
-  display: block;
-}
-
-input:focus,
-select:focus,
-textarea:focus,
-button:focus {
-  outline: none;
-}
-
-body {
-  background-color: var(--bg-primary-color);
-  color: var(--text-primary-color);
-  font-family: var(--font-family), "sans-serif";
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  letter-spacing: var(--letter-spacing);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow: hidden;
-  will-change: background-color, color;
-  transition:
-    background-color var(--transition-speed-md),
-    color var(--transition-speed-md);
-}