adnbn-ui 0.0.1 → 0.1.0

package/eslint.config.js

@@ -0,0 +1,39 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+import globals from "globals";
+
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default tseslint.config(
+    {
+        ignores: [
+            "dist",
+            "addon",
+            ".adnbn",
+            "build",
+            "node_modules",
+            "coverage",
+            ".storybook",
+            "public",
+            "*.config.js",
+        ],
+    },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": "off",
+        },
+    }
+);

package/package.json

@@ -1,7 +1,98 @@
 {
   "name": "adnbn-ui",
-  "version": "0.0.1",
-  "description": "UI Libs for AddonBone",
-  "author": "AddonBone",
-  "license": "MIT"
+  "version": "0.1.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 Bone",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": "./src/config/index.ts",
+    "./plugin": "./src/plugin/index.ts",
+    "./theme": "./src/styles/mixins.scss"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "adnbn": "^0.0.54",
+    "autosize": "^6.0.1",
+    "classnames": "^2.5.1",
+    "odometer": "^0.4.8",
+    "radix-ui": "^1.1.3",
+    "sass": "^1.85.1",
+    "react-highlight-words": "^0.21.0",
+    "ts-deepmerge": "^7.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@svgr/webpack": "^8.1.0",
+    "@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",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "playwright": "^1.51.0",
+    "rspack-plugin-virtual-module": "^1.0.0",
+    "storybook": "^8.6.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8",
+    "prettier": "^3.5.3"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "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.stories.tsx

@@ -0,0 +1,118 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import AvatarComponent, {AvatarRadius, AvatarSize} from "./Avatar";
+
+const sizes: (AvatarSize | "default")[] = [AvatarSize.Small, "default", AvatarSize.Medium, AvatarSize.Large];
+const radius: (AvatarRadius | "default")[] = [AvatarRadius.Small, AvatarRadius.Medium, AvatarRadius.Large, "default"];
+
+const meta: Meta<typeof AvatarComponent> = {
+    title: "Components/Avatar",
+    component: AvatarComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+        fallbackClassName: hideInTable,
+        imageClassName: hideInTable,
+        children: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Avatar: StoryObj<typeof AvatarComponent> = {
+    args: {
+        src: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80",
+        fallback: "CT",
+    },
+};
+
+export const AvatarRadiusGrid = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(radius)}</span>
+                    <AvatarComponent
+                        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+                        radius={radius !== "default" ? radius : undefined}
+                        fallback="CT"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Size = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size => (
+                <div key={size} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(size)}</span>
+                    <AvatarComponent
+                        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+                        size={size !== "default" ? size : undefined}
+                        fallback="CT"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const SizeWithSVG = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size => (
+                <div key={size} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(size)}</span>
+                    <AvatarComponent
+                        src="https://freesvg.org/img/Female-Avatar-5.png"
+                        size={size !== "default" ? size : undefined}
+                        fallback="CT"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const SizeWithFallback = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size => (
+                <div key={size} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(size)}</span>
+                    <AvatarComponent src="" size={size !== "default" ? size : undefined} fallback="CT" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const SizeRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size =>
+                radius.map(radius => (
+                    <div key={`${radius}-${size}`} className="item-card">
+                        <AvatarComponent
+                            src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+                            radius={radius !== "default" ? radius : undefined}
+                            size={size !== "default" ? size : undefined}
+                        />
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,65 @@
+import React, {FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+import {AvatarFallbackProps, AvatarImageProps, Fallback, Image, Root} from "@radix-ui/react-avatar";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./avatar.module.scss";
+
+export enum AvatarSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum AvatarRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface AvatarProps extends AvatarImageProps, Pick<AvatarFallbackProps, "delayMs"> {
+    imageClassName?: string;
+    size?: AvatarSize;
+    radius?: AvatarRadius;
+    fallback?: ReactNode;
+    fallbackClassName?: string;
+    cursorPointer?: boolean;
+}
+
+const Avatar: FC<AvatarProps> = props => {
+    const {
+        size,
+        radius,
+        fallback,
+        fallbackClassName,
+        delayMs = 600,
+        cursorPointer,
+        imageClassName,
+        className,
+        ...other
+    } = {...useComponentProps("avatar"), ...props};
+
+    return (
+        <Root
+            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(Avatar);

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

@@ -0,0 +1,77 @@
+$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);
+    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 {default as Avatar, AvatarSize, AvatarRadius} from "./Avatar";
+export type {AvatarProps} from "./Avatar";

package/src/components/BaseButton/BaseButton.tsx

@@ -0,0 +1,36 @@
+import React, {ComponentProps, FC, memo, ReactNode} 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: FC<BaseButtonProps> = props => {
+    const {after, before, children, className, afterClassName, beforeClassName, childrenClassName, ...other} = props;
+
+    return (
+        <button 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(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,2 @@
+export {default as BaseButton} from "./BaseButton";
+export type {BaseButtonProps} from "./BaseButton";

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,148 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import ButtonComponent, {ButtonColor, ButtonRadius, ButtonSize, ButtonVariant} from "./Button";
+
+const variants: ButtonVariant[] = [ButtonVariant.Contained, ButtonVariant.Outlined, ButtonVariant.Text];
+const colors: (ButtonColor | "default")[] = ["default", ButtonColor.Primary, ButtonColor.Secondary, ButtonColor.Accent];
+const sizes: (ButtonSize | "default")[] = [ButtonSize.Small, "default", ButtonSize.Medium, ButtonSize.Large];
+const radius: (ButtonRadius | "default")[] = [
+    ButtonRadius.Small,
+    "default",
+    ButtonRadius.Medium,
+    ButtonRadius.Large,
+    ButtonRadius.Full,
+];
+
+const meta: Meta<typeof ButtonComponent> = {
+    title: "Components/Button",
+    component: ButtonComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            options: variants,
+            control: {type: "select"},
+        },
+        color: {
+            options: colors,
+            control: {type: "select"},
+        },
+        size: {
+            options: sizes,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+
+        after: hideInTable,
+        before: hideInTable,
+        afterClassName: hideInTable,
+        beforeClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Button: StoryObj<typeof ButtonComponent> = {
+    args: {
+        children: "Button",
+    },
+};
+
+export const VariantColor = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                colors.map(color => (
+                    <div key={`${variant}-${color}`}>
+                        <ButtonComponent variant={variant} color={color !== "default" ? color : undefined}>
+                            {capitalizeFirstLetter(color)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const VariantColorDisabled = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                colors.map(color => (
+                    <div key={`${variant}-${color}`}>
+                        <ButtonComponent disabled variant={variant} color={color !== "default" ? color : undefined}>
+                            {capitalizeFirstLetter(color)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const VariantSize = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                sizes.map(size => (
+                    <div key={`${variant}-${size}`}>
+                        <ButtonComponent variant={variant} size={size !== "default" ? size : undefined}>
+                            {capitalizeFirstLetter(size)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const VariantRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            {variants.map(variant =>
+                radius.map(radius => (
+                    <div key={`${variant}-${radius}`}>
+                        <ButtonComponent variant={variant} radius={radius !== "default" ? radius : undefined}>
+                            {capitalizeFirstLetter(radius)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const SizeRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            <span className="item-card__title"> Radius \ Size </span>
+            {sizes.map(size => (
+                <span key={size} className="item-card__title">
+                    {capitalizeFirstLetter(size)} size
+                </span>
+            ))}
+            {radius.map(radius => (
+                <>
+                    <span key={radius} className="item-card__title">
+                        {capitalizeFirstLetter(radius)} radius
+                    </span>
+                    {sizes.map(size => (
+                        <div key={`${size}-${radius}`} className="item-card">
+                            <ButtonComponent
+                                size={size !== "default" ? size : undefined}
+                                radius={radius !== "default" ? radius : undefined}
+                            >
+                                Button
+                            </ButtonComponent>
+                        </div>
+                    ))}
+                </>
+            ))}
+        </div>
+    );
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,73 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import {BaseButton, BaseButtonProps} from "../BaseButton";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./button.module.scss";
+
+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",
+}
+
+export interface ButtonProps extends BaseButtonProps {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    radius?: ButtonRadius;
+}
+
+const Button: FC<ButtonProps> = props => {
+    const {
+        variant = ButtonVariant.Contained,
+        color,
+        size,
+        radius,
+        childrenClassName,
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("button"), ...props};
+
+    return (
+        <BaseButton
+            {...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(Button);