addon-ui 0.3.0

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "addon-ui",
+  "type": "module",
+  "version": "0.3.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",
+    "browser-extension",
+    "theme",
+    "customizable",
+    "typescript",
+    "design-system"
+  ],
+  "author": "Addon Stack",
+  "contributors": [
+    "Anjey Tsibylskij <addonbonedev@gmail.com> (https://github.com/atldays)"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/addon-stack/addon-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/addon-stack/addon-ui/issues"
+  },
+  "types": "./src/index.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./src/index.ts"
+      ],
+      "config": [
+        "./src/config/index.ts"
+      ],
+      "plugin": [
+        "./src/plugin/index.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": "./src/config/index.ts",
+    "./plugin": "./src/plugin/index.ts",
+    "./theme": "./src/styles/mixins.scss"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "autosize": "^6.0.1",
+    "classnames": "^2.5.1",
+    "odometer": "^0.4.8",
+    "radix-ui": "^1.1.3",
+    "react-highlight-words": "^0.21.0",
+    "sass": "^1.85.1",
+    "storybook-react-rsbuild": "^2.1.0",
+    "ts-deepmerge": "^7.0.3"
+  },
+  "devDependencies": {
+    "adnbn": "^0.2.9",
+    "@eslint/js": "^9.21.0",
+    "@rsbuild/plugin-sass": "^1.4.0",
+    "@storybook/react": "^9.1.3",
+    "@types/autosize": "^4.0.3",
+    "@types/node": "^22.13.10",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-highlight-words": "^0.20.0",
+    "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",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rspack-plugin-virtual-module": "^1.0.0",
+    "storybook": "^9.1.3",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "adnbn": ">=0.2.7",
+    "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"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,56 @@
+import React, {memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {AvatarFallbackProps, AvatarImageProps, Fallback, Image, Root} from "@radix-ui/react-avatar";
+
+import {useComponentProps} from "../../providers";
+
+import {AvatarRadius, AvatarSize} from "./types";
+
+import styles from "./avatar.module.scss";
+
+export interface AvatarProps extends AvatarImageProps, Pick<AvatarFallbackProps, "delayMs"> {
+    imageClassName?: string;
+    size?: AvatarSize;
+    radius?: AvatarRadius;
+    fallback?: ReactNode;
+    fallbackClassName?: string;
+    cursorPointer?: boolean;
+}
+
+const Avatar: ForwardRefRenderFunction<HTMLSpanElement, AvatarProps> = (props, ref) => {
+    const {
+        size,
+        radius,
+        fallback,
+        fallbackClassName,
+        delayMs = 600,
+        cursorPointer,
+        imageClassName,
+        className,
+        ...other
+    } = {...useComponentProps("avatar"), ...props};
+
+    return (
+        <Root
+            ref={ref}
+            className={classnames(
+                styles["avatar"],
+                {
+                    [styles[`avatar--${size}-size`]]: size,
+                    [styles[`avatar--${radius}-radius`]]: radius,
+                    [styles[`avatar--cursor-pointer`]]: cursorPointer,
+                },
+                className
+            )}
+        >
+            <Image className={classnames(styles["avatar-image"], imageClassName)} {...other} />
+            {fallback && (
+                <Fallback className={classnames(styles["avatar-fallback"], fallbackClassName)} delayMs={delayMs}>
+                    {fallback}
+                </Fallback>
+            )}
+        </Root>
+    );
+};
+
+export default memo(forwardRef(Avatar));

package/src/components/Avatar/avatar.module.scss

@@ -0,0 +1,78 @@
+$root: avatar;
+
+.#{$root} {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  cursor: default;
+  width: var(--avatar-size, 45px);
+  height: var(--avatar-size, 45px);
+  background-color: var(--avatar-bg-color, transparent);
+  border-radius: var(--avatar-border-radius, 100%);
+  border-width: var(--avatar-border-width);
+  border-color: var(--avatar-border-color);
+  border-style: var(--avatar-border-style);
+  font-size: var(--avatar-font-size, 18px);
+  font-weight: var(--avatar-font-weight, 500);
+
+  &--cursor-pointer {
+    cursor: pointer;
+  }
+
+  // Size
+  &--small-size {
+    width: var(--avatar-size-sm, 35px);
+    height: var(--avatar-size-sm, 35px);
+    font-size: var(--avatar-font-size-sm, 14px);
+  }
+
+  &--medium-size {
+    width: var(--avatar-size-md, 55px);
+    height: var(--avatar-size-md, 55px);
+    font-size: var(--avatar-font-size-md, 22px);
+  }
+
+  &--large-size {
+    width: var(--avatar-size-lg, 65px);
+    height: var(--avatar-size-lg, 65px);
+    font-size: var(--avatar-font-size-lg, 26px);
+  }
+
+  // Radius
+  &--small-radius {
+    border-radius: var(--avatar-border-radius-sm, 20%);
+  }
+
+  &--medium-radius {
+    border-radius: var(--avatar-border-radius-md, 30%);
+  }
+
+  &--large-radius {
+    border-radius: var(--avatar-border-radius-lg, 40%);
+  }
+
+  &-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  &-fallback {
+    width: 100%;
+    height: 100%;
+    cursor: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--avatar-fallback-color);
+    line-height: var(--fallback-line-height, var(--line-height, 1 rem));
+    background-color: var(--avatar-fallback-bg-color, var(--avatar-bg-color));
+    border-width: var(--avatar-fallback-border-width, var(--avatar-border-width));
+    border-color: var(--avatar-fallback-border-color, var(--avatar-border-color));
+    border-style: var(--avatar-fallback-border-style, var(--avatar-border-style));
+  }
+}

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export {default as Avatar, type AvatarProps} from "./Avatar";

package/src/components/Avatar/types.ts

@@ -0,0 +1,11 @@
+export enum AvatarSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum AvatarRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}

package/src/components/BaseButton/BaseButton.tsx

@@ -0,0 +1,36 @@
+import React, {ComponentProps, memo, ReactNode, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+
+import styles from "./base-button.module.scss";
+
+export interface BaseButtonProps extends ComponentProps<"button"> {
+    after?: ReactNode;
+    before?: ReactNode;
+    afterClassName?: string;
+    beforeClassName?: string;
+    childrenClassName?: string;
+}
+
+const BaseButton: ForwardRefRenderFunction<HTMLButtonElement, BaseButtonProps> = (props, ref) => {
+    const {after, before, children, className, afterClassName, beforeClassName, childrenClassName, ...other} = props;
+
+    return (
+        <button ref={ref} className={classnames(styles["base-button"], className)} {...other}>
+            {cloneOrCreateElement(before, {
+                className: classnames(styles["base-button__before"], beforeClassName),
+            })}
+
+            {cloneOrCreateElement(children, {
+                className: classnames(styles["base-button__children"], childrenClassName),
+            })}
+
+            {cloneOrCreateElement(after, {
+                className: classnames(styles["base-button__after"], afterClassName),
+            })}
+        </button>
+    );
+};
+
+export default memo(forwardRef(BaseButton));

package/src/components/BaseButton/base-button.module.scss

@@ -0,0 +1,24 @@
+.base-button {
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  gap: var(--base-button-gap, 8px);
+  will-change: background, color, transform;
+  transition:
+    background var(--transition-speed-sm),
+    color var(--transition-speed-sm),
+    transform var(--transition-speed-sm);
+
+  &__after,
+  &__before,
+  &__children {
+    position: relative;
+    display: inline;
+  }
+}

package/src/components/BaseButton/index.ts

@@ -0,0 +1 @@
+export {default as BaseButton, type BaseButtonProps} from "./BaseButton";

package/src/components/Button/Button.tsx

@@ -0,0 +1,51 @@
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {BaseButton, BaseButtonProps} from "../BaseButton";
+
+import {useComponentProps} from "../../providers";
+
+import {ButtonColor, ButtonRadius, ButtonSize, ButtonVariant} from "./types";
+
+import styles from "./button.module.scss";
+
+export interface ButtonProps extends BaseButtonProps {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    radius?: ButtonRadius;
+}
+
+const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (props, ref) => {
+    const {
+        variant = ButtonVariant.Contained,
+        color,
+        size,
+        radius,
+        childrenClassName,
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("button"), ...props};
+
+    return (
+        <BaseButton
+            ref={ref}
+            {...other}
+            className={classnames(
+                styles["button"],
+                {
+                    [styles[`button--${variant}`]]: variant,
+                    [styles[`button--${radius}-radius`]]: radius,
+                    [styles[`button--${color}-color`]]: color,
+                    [styles[`button--${size}-size`]]: size,
+                },
+                className
+            )}
+            childrenClassName={classnames(styles["button__text"], childrenClassName)}
+        >
+            {children}
+        </BaseButton>
+    );
+};
+
+export default memo(forwardRef(Button));

package/src/components/Button/button.module.scss

@@ -0,0 +1,140 @@
+$root: button;
+
+.#{$root} {
+  font-family: var(--button-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, var(--font-size, 14px));
+  letter-spacing: var(--button-letter-spacing, 0.5px);
+  line-height: var(--button-line-height, var(--line-height, 1 rem));
+  height: var(--button-height, 34px);
+  border-radius: var(--button-border-radius, 10px);
+  padding: var(--button-padding, 0 16px);
+
+  &:active:not(:disabled) {
+    transform: scale(var(--button-scale, 0.98));
+  }
+
+  &:disabled {
+    opacity: var(--button-disabled-opacity, 0.75);
+    cursor: default;
+  }
+
+  // Variants
+  &--contained {
+    color: var(--button-contained-text-color, var(--bg-primary-color));
+    background: var(--button-contained-bg-color, var(--text-primary-color));
+
+    &.#{$root}--primary-color {
+      color: #fff;
+      background: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: #fff;
+      background: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: #fff;
+      background: var(--accent-color);
+    }
+  }
+
+  &--outlined {
+    color: var(--button-outlined-text-color, var(--text-primary-color));
+    border: 1px solid var(--button-outlined-border-color, var(--button-outlined-text-color, var(--text-primary-color)));
+    background: none;
+
+    &:hover {
+      background-color: var(--button-outlined-bg-color-hover);
+    }
+
+    &:active {
+      background-color: var(--button-outlined-bg-color-active);
+    }
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+      border-color: var(--button-outlined-border-primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+      border-color: var(--button-outlined-border-secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+      border-color: var(--button-outlined-border-accent-color);
+    }
+  }
+
+  &--text {
+    color: var(--button-text-text-color, var(--text-primary-color));
+    background-color: transparent;
+
+    &:hover {
+      color: var(--button-text-text-color-hover, var(--text-secondary-color));
+    }
+
+    &:active {
+      color: var(--button-text-text-color-active, var(--text-secondary-color));
+    }
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    height: var(--button-height-sm, 24px);
+    font-size: var(--button-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    height: var(--button-height-md, 44px);
+    font-size: var(--button-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    height: var(--button-height-lg, 54px);
+    min-width: 95px;
+    font-size: var(--button-font-size-sm, 18px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--button-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--button-border-radius-md, 12px);
+  }
+
+  &--large-radius {
+    border-radius: var(--button-border-radius-lg, 15px);
+  }
+
+  &--full-radius {
+    border-radius: var(--button-height, 999px);
+  }
+
+  &__text {
+    position: relative;
+    z-index: 3;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: var(--button-max-width, 160px);
+    line-height: initial;
+  }
+}

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export {default as Button, type ButtonProps} from "./Button";

package/src/components/Button/types.ts

@@ -0,0 +1,24 @@
+export enum ButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Text = "text",
+}
+
+export enum ButtonColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export enum ButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum ButtonRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    Full = "full",
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,58 @@
+import React, {memo, ReactElement, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+import {CheckboxProps as CheckboxRootProps, Indicator, Root} from "@radix-ui/react-checkbox";
+
+import {useComponentProps} from "../../providers";
+
+import {CheckboxVariant, CheckboxSize, CheckboxRadius} from "./types";
+
+import styles from "./checkbox.module.scss";
+
+export type {CheckedState} from "@radix-ui/react-checkbox";
+
+export interface CheckboxProps extends CheckboxRootProps {
+    indicatorClassName?: string;
+    size?: CheckboxSize;
+    radius?: CheckboxRadius;
+    variant?: CheckboxVariant;
+    checkedIcon?: ReactElement;
+    indeterminateIcon?: ReactElement;
+}
+
+const Checkbox: ForwardRefRenderFunction<HTMLButtonElement, CheckboxProps> = (props, ref) => {
+    const {
+        checked,
+        size,
+        radius,
+        variant,
+        className,
+        indicatorClassName,
+        checkedIcon = "✔",
+        indeterminateIcon = "―",
+        ...other
+    } = {...useComponentProps("checkbox"), ...props};
+
+    return (
+        <Root
+            ref={ref}
+            {...other}
+            checked={checked}
+            className={classnames(
+                styles["checkbox"],
+                {
+                    [styles[`checkbox--${variant}`]]: variant,
+                    [styles[`checkbox--${radius}-radius`]]: radius,
+                    [styles[`checkbox--${size}-size`]]: size,
+                },
+                className
+            )}
+        >
+            <Indicator className={classnames(styles["checkbox__indicator"], indicatorClassName)}>
+                {checked === "indeterminate" && indeterminateIcon}
+                {checked === true && checkedIcon}
+            </Indicator>
+        </Root>
+    );
+};
+
+export default memo(forwardRef(Checkbox));

package/src/components/Checkbox/checkbox.module.scss

@@ -0,0 +1,82 @@
+$root: checkbox;
+
+.#{$root} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 2px;
+  width: var(--checkbox-size, 18px);
+  height: var(--checkbox-size, 18px);
+  border-radius: var(--checkbox-border-radius, 4px);
+  color: var(--checkbox-color, #333);
+  border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color, #999);
+  will-change: background, color;
+  transition:
+    background var(--transition-speed-sm),
+    color var(--transition-speed-sm);
+
+  &:disabled {
+    opacity: var(--checkbox-disabled-opacity, 0.6);
+    cursor: default;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(var(--checkbox-scale, 0.98));
+  }
+
+  //Variants
+  &--classic {
+    color: var(--checkbox-classic-color, white);
+    background: var(--checkbox-classic-bg-color);
+    border: var(--checkbox-classic-border-width, 1px) solid var(--checkbox-classic-border-color, #999);
+
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
+      background: var(--checkbox-checked-bg-color, var(--primary-color));
+      border: none;
+    }
+  }
+
+  &--soft {
+    color: var(--checkbox-soft-color, white);
+    background: var(--checkbox-soft-bg-color, var(--secondary-color));
+    border: none;
+  }
+
+  //sizes
+  &--small-size {
+    width: var(--checkbox-size-sm, 16px);
+    height: var(--checkbox-size-sm, 16px);
+  }
+
+  &--medium-size {
+    width: var(--checkbox-size-md, 20px);
+    height: var(--checkbox-size-md, 20px);
+  }
+
+  &--large-size {
+    width: var(--checkbox-size-lg, 22px);
+    height: var(--checkbox-size-lg, 22px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--checkbox-border-radius-sm, 2px);
+  }
+
+  &--large-radius {
+    border-radius: var(--checkbox-border-radius-lg, 6px);
+  }
+
+  &__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export {default as Checkbox, type CheckboxProps, type CheckedState} from "./Checkbox";