addon-ui 0.3.1 → 0.4.0

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "addon-ui",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A comprehensive React UI component library designed exclusively for the AddonBone browser extension framework with customizable theming and consistent design patterns",
   "keywords": [
     "react",
     "ui",
     "components",
     "adnbn",
-    "addonbone",
+    "addon-bone",
     "browser-extension",
     "theme",
     "customizable",
     "typescript",
     "design-system"
   ],
-  "author": "Addon Stack",
+  "author": "Addon Stack <addonbonedev@gmail.com>",
   "contributors": [
-    "Anjey Tsibylskij <addonbonedev@gmail.com> (https://github.com/atldays)"
+    "Anjey Tsibylskij (https://github.com/atldays)"
   ],
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/addon-stack/addon-ui.git"
+    "url": "https://github.com/addon-stack/addon-ui"
   },
   "bugs": {
     "url": "https://github.com/addon-stack/addon-ui/issues"
@@ -55,7 +55,13 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "jest",
+    "test:ci": "jest --ci --passWithNoTests --coverage",
+    "test:related": "jest --bail --passWithNoTests",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "release": "release-it",
+    "release:preview": "release-it --no-github.release --no-npm.publish --no-git.tag --ci"
   },
   "dependencies": {
     "autosize": "^6.0.1",
@@ -67,6 +73,11 @@
     "ts-deepmerge": "^7.0.3"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.0.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/chrome": "^0.1.12",
+    "@types/jest": "^30.0.0",
     "@eslint/js": "^9.21.0",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@storybook/react": "^9.1.3",
@@ -75,13 +86,16 @@
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@types/react-highlight-words": "^0.20.0",
-    "adnbn": "^0.2.9",
+    "adnbn": "^0.4.2",
     "depcheck": "^1.4.7",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
     "prettier": "^3.5.3",
+    "husky": "^9.1.7",
+    "jest": "^30.1.3",
+    "release-it": "^19.0.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rspack-plugin-virtual-module": "^1.0.0",
@@ -93,7 +107,7 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "adnbn": ">=0.2.9",
+    "adnbn": ">=0.4.1",
     "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
     "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
   },
@@ -105,6 +119,15 @@
       "optional": true
     }
   },
+  "overrides": {
+    "flat-cache": "^6.1.18",
+    "html-rspack-tags-plugin": {
+      "glob": "^10.4.5"
+    },
+    "test-exclude": {
+      "glob": "^10.4.5"
+    }
+  },
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"

package/src/components/Dialog/dialog.module.scss

@@ -24,11 +24,14 @@ $root: dialog;
     z-index: 9999;
     transition:
       background-color var(--transition-speed-sm),
+      transform var(--transition-speed-sm),
+      opacity var(--transition-speed-sm),
       color var(--transition-speed-sm);
     animation-timing-function: ease-in-out;
   }
 
   &-children {
+    flex: 1;
     display: flex;
     flex-direction: column;
     width: 100%;

package/src/components/Footer/footer.module.scss

@@ -13,12 +13,20 @@ $root: footer;
     background-color var(--transition-speed-sm),
     box-shadow var(--transition-speed-sm);
 
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
+
   &--shadow {
     box-shadow: var(--footer-box-shadow, 0px -4px 4px 0px rgba(0, 0, 0, 0.03));
   }
 
   &--reverse {
     flex-direction: row-reverse;
+
+    [dir="rtl"] & {
+      flex-direction: row;
+    }
   }
 
   &-children {
@@ -26,8 +34,16 @@ $root: footer;
     display: flex;
     justify-content: space-between;
 
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
+
     .#{$root}--reverse & {
       flex-direction: row-reverse;
+
+      [dir="rtl"] & {
+        flex-direction: row;
+      }
     }
   }
 
@@ -35,11 +51,19 @@ $root: footer;
     display: flex;
     align-items: center;
     gap: var(--footer-left-gap, var(--footer-gap, 15px));
+
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
   }
 
   &-right {
     display: flex;
     align-items: center;
     gap: var(--footer-right-gap, var(--footer-gap, 15px));
+
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
   }
 }

package/src/components/ListItem/list-item.module.scss

@@ -7,6 +7,10 @@
   box-sizing: border-box;
   line-height: var(--list-item-line-height, var(--line-height, 1 rem));
 
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
+
   &__center {
     flex-grow: 1;
     display: flex;

package/src/components/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import {cloneOrCreateElement} from "../../utils";
 import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
 import {IconButton, IconButtonProps} from "../IconButton";
 
-import {ModalRadius} from "./types";
+import {ModalRadius, ModalAnimation} from "./types";
 
 import styles from "./modal.module.scss";
 
@@ -15,6 +15,7 @@ export interface ModalProps extends DialogProps {
     radius?: ModalRadius;
     closeButton?: boolean | IconButtonProps | ReactElement;
     onClose?: () => void;
+    animation?: ModalAnimation;
 }
 
 export const modalPropsKeys = new Set<keyof ModalProps>(["radius", "closeButton", "onClose", ...dialogPropsKeys]);
@@ -30,6 +31,7 @@ const Modal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (props, ref)
         className,
         overlayClassName,
         childrenClassName,
+        animation = ModalAnimation.FadeScale,
         ...other
     } = {...useComponentProps("modal"), ...props};
 
@@ -73,6 +75,7 @@ const Modal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (props, ref)
                 {
                     [styles["modal-content--fullscreen"]]: fullscreen,
                     [styles[`modal-content--${radius}-radius`]]: radius,
+                    [styles[`modal-content--${animation}-animation`]]: animation,
                 },
                 className
             )}

package/src/components/Modal/modal.module.scss

@@ -14,20 +14,39 @@ $root: modal;
     width: var(--modal-width, 90vw);
     max-width: var(--modal-max-width, 350px);
     max-height: var(--modal-max-height, 85vh);
+    height: auto;
     padding: var(--modal-padding, 0);
     border-radius: var(--modal-border-radius, 10px);
     box-shadow: var(--modal-box-shadow, 0 0 4px rgba(0, 0, 0, 0.5));
     background-color: var(--modal-bg-color, var(--bg-primary-color));
     transition:
       background-color var(--transition-speed-sm),
-      color var(--transition-speed-sm);
+      transform var(--transition-speed-sm),
+      opacity var(--transition-speed-sm),
+      color var(--transition-speed-sm) !important;
 
     &[data-state="open"] {
-      animation-name: contentShow;
+      &.#{$root}-content {
+        &--fade-animation {
+          animation-name: fadeIn;
+        }
+
+        &--fadeScale-animation {
+          animation-name: fadeScaleIn;
+        }
+      }
     }
 
     &[data-state="closed"] {
-      animation-name: contentHide;
+      &.#{$root}-content {
+        &--fade-animation {
+          animation-name: fadeOut;
+        }
+
+        &--fadeScale-animation {
+          animation-name: fadeScaleIn;
+        }
+      }
     }
 
     &--fullscreen {
@@ -74,7 +93,7 @@ $root: modal;
   }
 }
 
-@keyframes contentShow {
+@keyframes fadeScaleIn {
   from {
     opacity: 0;
     transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
@@ -85,7 +104,7 @@ $root: modal;
   }
 }
 
-@keyframes contentHide {
+@keyframes fadeScaleOut {
   from {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
@@ -95,3 +114,21 @@ $root: modal;
     transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
   }
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/src/components/Modal/types.ts

@@ -4,3 +4,8 @@ export enum ModalRadius {
     Medium = "medium",
     Large = "large",
 }
+
+export enum ModalAnimation {
+    Fade = "fade",
+    FadeScale = "fadeScale",
+}

package/src/components/TextField/text-field.module.scss

@@ -30,6 +30,7 @@ $root: text-field;
     width: 100%;
     color: inherit;
     font-size: inherit;
+    font-weight: inherit;
     font-family: inherit;
     padding: 0;
     border: none;

package/src/components/Viewport/Provider.tsx

@@ -0,0 +1,99 @@
+import React, {
+    ComponentProps,
+    CSSProperties,
+    forwardRef,
+    ForwardRefRenderFunction,
+    PropsWithChildren,
+    useCallback,
+    useMemo,
+    useState,
+} from "react";
+
+import {ViewportContext, ViewportMode, ViewportSizes} from "./context";
+
+import classnames from "classnames";
+
+import styles from "./viewport.module.scss";
+
+export type ViewportProps = ComponentProps<"div"> & {
+    mode?: ViewportMode;
+};
+
+const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<ViewportProps>> = (
+    {children, className, style, mode: viewportMode = ViewportMode.Adaptive, ...props},
+    ref
+) => {
+    const [mode, setModeState] = useState<ViewportMode>(viewportMode);
+    const [sizes, setSizesState] = useState<ViewportSizes | null>(null);
+
+    const setSizes = useCallback((sizes: ViewportSizes) => {
+        setSizesState(prev => ({...prev, ...sizes}));
+    }, []);
+
+    const setMode = useCallback((mode: ViewportMode) => setModeState(mode), []);
+
+    const resetSizes = useCallback(() => setSizesState(null), []);
+
+    const contextValue = useMemo(
+        () => ({
+            mode,
+            setSizes,
+            setMode,
+            resetSizes,
+        }),
+        [mode, setSizes, setMode, resetSizes]
+    );
+
+    const computedStyles: CSSProperties = useMemo(() => {
+        if (!sizes) return {...style};
+
+        const {width, height} = sizes;
+
+        let baseStyles: CSSProperties = {};
+
+        if (mode === ViewportMode.Fixed) {
+            baseStyles = {
+                width,
+                minWidth: width,
+                maxWidth: width,
+
+                height,
+                minHeight: height,
+                maxHeight: height,
+            };
+        }
+
+        if (mode === ViewportMode.Adaptive) {
+            baseStyles = {
+                minWidth: sizes.width,
+                minHeight: sizes.height,
+            };
+        }
+
+        return {...style, ...baseStyles};
+    }, [style, sizes, mode]);
+
+    return (
+        <ViewportContext.Provider value={contextValue}>
+            <div
+                ref={ref}
+                style={computedStyles}
+                className={classnames(
+                    styles["viewport"],
+                    {
+                        [styles["viewport--expanded"]]: mode === ViewportMode.Expanded,
+                        [styles["viewport--fixed"]]: mode === ViewportMode.Fixed,
+                    },
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </ViewportContext.Provider>
+    );
+};
+
+Provider.displayName = "ViewportProvider";
+
+export default forwardRef(Provider);

package/src/components/Viewport/context.ts

@@ -0,0 +1,38 @@
+import {createContext, useContext} from "react";
+
+export enum ViewportMode {
+    Fixed = "fixed",
+    Adaptive = "adaptive",
+    Expanded = "expanded",
+}
+
+export type ViewportSize = number | string;
+
+export type ViewportSizes = {
+    height?: ViewportSize;
+    width?: ViewportSize;
+};
+
+export interface ViewportContract {
+    mode: ViewportMode;
+
+    setMode(mode: ViewportMode): void;
+
+    setSizes(sizes: ViewportSizes): void;
+
+    resetSizes(): void;
+}
+
+export const ViewportContext = createContext<ViewportContract>({
+    mode: ViewportMode.Adaptive,
+
+    setMode() {},
+
+    setSizes() {},
+
+    resetSizes() {},
+});
+
+ViewportContext.displayName = "ViewportContext";
+
+export const useViewport = () => useContext(ViewportContext);

package/src/components/Viewport/index.ts

@@ -0,0 +1,2 @@
+export {default as ViewportProvider, type ViewportProps} from "./Provider";
+export {useViewport, type ViewportSizes, ViewportMode} from "./context";

package/src/components/Viewport/viewport.module.scss

@@ -0,0 +1,31 @@
+.viewport {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: var(--viewport-min-width);
+  max-width: var(--viewport-max-width);
+  min-height: var(--viewport-min-height);
+  max-height: var(--viewport-max-height);
+  transition:
+    height var(--transition-speed-md) ease-in-out,
+    width var(--transition-speed-md) ease-in-out,
+    min-height var(--transition-speed-md) ease-in-out,
+    min-width var(--transition-speed-md) ease-in-out,
+    max-height var(--transition-speed-md) ease-in-out,
+    max-width var(--transition-speed-md) ease-in-out;
+
+  &--expanded {
+    min-height: var(--viewport-max-height);
+    min-width: var(--viewport-max-width);
+  }
+
+  &--fixed {
+    width: var(--viewport-width);
+    min-width: var(--viewport-width);
+    max-width: var(--viewport-width);
+
+    height: var(--viewport-height);
+    min-height: var(--viewport-height);
+    max-height: var(--viewport-height);
+  }
+}

package/src/components/index.ts

@@ -9,7 +9,6 @@ export * from "./Header";
 export * from "./Highlight";
 export * from "./Icon";
 export * from "./IconButton";
-export * from "./Layout";
 export * from "./List";
 export * from "./ListItem";
 export * from "./Modal";
@@ -25,3 +24,4 @@ export * from "./Tooltip";
 export * from "./View";
 export * from "./ViewDrawer";
 export * from "./ViewModal";
+export * from "./Viewport";

package/src/plugin/index.ts

@@ -36,7 +36,7 @@ export default definePlugin((options: PluginOptions = {}) => {
     let styleBuilder: BuilderContract;
 
     return {
-        name: "adnbn-ui",
+        name: "addon-ui",
         startup: ({config}) => {
             const {srcDir, appsDir, sharedDir, app, appSrcDir} = config;
             const normalizeThemeDir = path.normalize(themeDir).split(path.sep);

package/src/providers/theme/ThemeProvider.tsx

@@ -1,10 +1,12 @@
-import React, {FC, PropsWithChildren, useCallback, useEffect, useState} from "react";
+import React, {FC, PropsWithChildren, useCallback, useEffect, useMemo, useState} from "react";
 
 import {ThemeContext} from "./context";
 
 import {Theme, ThemeStorageContract} from "../../types/theme";
 import {Config} from "../../types/config";
 
+import ThemeStorage from "./ThemeStorage";
+
 const isDarkMedia = () => window?.matchMedia("(prefers-color-scheme: dark)")?.matches;
 
 const isValid = (theme: Theme | undefined): theme is Theme => {
@@ -12,21 +14,29 @@ const isValid = (theme: Theme | undefined): theme is Theme => {
 };
 
 export interface ThemeProviderProps extends Pick<Config, "components"> {
-    storage?: ThemeStorageContract;
+    storage?: ThemeStorageContract | true;
 }
 
 const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({children, components, storage}) => {
     const [theme, setTheme] = useState<Theme>(() => (isDarkMedia() ? Theme.Dark : Theme.Light));
 
+    const currentStorage: ThemeStorageContract | undefined = useMemo(() => {
+        if (!storage) return;
+
+        if (storage === true) return new ThemeStorage();
+
+        return storage;
+    }, [storage]);
+
     const changeTheme = useCallback(
         (theme: Theme) => {
-            if (storage) {
-                storage.change(theme).catch(e => console.error("ThemeProvider: set theme to storage error", e));
+            if (currentStorage) {
+                currentStorage.change(theme).catch(e => console.error("ThemeProvider: set theme to storage error", e));
             } else {
                 setTheme(theme);
             }
         },
-        [storage]
+        [currentStorage]
     );
 
     const toggleTheme = useCallback(() => {
@@ -34,17 +44,17 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({children, com
     }, [theme, changeTheme]);
 
     useEffect(() => {
-        if (!storage) return;
+        if (!currentStorage) return;
 
-        storage
+        currentStorage
             .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));
+        const unsubscribe = currentStorage.watch(newTheme => isValid(newTheme) && setTheme(newTheme));
 
         return () => unsubscribe();
-    }, [storage]);
+    }, [currentStorage]);
 
     useEffect(() => {
         document.querySelector("html")?.setAttribute("theme", theme);

package/src/providers/theme/ThemeStorage.tsx

@@ -1,14 +1,21 @@
-import {Storage} from "adnbn/storage";
+import {Storage, StorageProvider} from "@addon-core/storage";
 
 import {Theme, ThemeStorageContract} from "../../types/theme";
 
+export type ThemeStorageState = Record<string, Theme>;
+
 export default class implements ThemeStorageContract {
-    private readonly storage = new Storage<Record<string, Theme>>({
+    protected storage: StorageProvider<ThemeStorageState> = new Storage<ThemeStorageState>({
         area: "local",
-        namespace: "adnbn-ui",
+        namespace: "addon-ui",
     });
 
-    private readonly key = "theme";
+    protected key: string = "theme";
+
+    constructor(storage?: StorageProvider<ThemeStorageState>, key?: string) {
+        this.storage = storage ? storage : this.storage;
+        this.key = key ? key : this.key;
+    }
 
     public async get(): Promise<Theme | undefined> {
         return await this.storage.get(this.key);

package/src/providers/theme/index.ts

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