adnbn-ui 0.0.2 → 0.1.1

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "adnbn-ui",
-  "version": "0.0.2",
-  "description": "UI Libs for AddonBone",
-  "author": "AddonBone",
+  "version": "0.1.1",
+  "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": {
@@ -56,6 +68,8 @@
     "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",
@@ -63,6 +77,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"
   },

package/.prettierignore

@@ -1,3 +0,0 @@
-node_modules/
-dist/
-build/

package/.prettierrc

@@ -1,28 +0,0 @@
-{
-    "semi": true,
-    "trailingComma": "es5",
-    "singleQuote": false,
-    "printWidth": 120,
-    "tabWidth": 4,
-    "useTabs": false,
-    "bracketSpacing": false,
-    "arrowParens": "avoid",
-    "endOfLine": "lf",
-    "overrides": [
-        {
-            "files": "*.json",
-            "options": {
-                "tabWidth": 2,
-                "bracketSpacing": true,
-                "bracketSameLine": false,
-                "printWidth": 40
-            }
-        },
-        {
-            "files": "*.scss",
-            "options": {
-                "tabWidth": 2
-            }
-        }
-    ]
-}

package/.storybook/main.ts

@@ -1,22 +0,0 @@
-import path from "path";
-import {mergeConfig} from "vite";
-import type {StorybookConfig} from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: ["@storybook/addon-essentials"],
-    framework: {
-        name: "@storybook/react-vite",
-        options: {},
-    },
-    viteFinal: config => {
-        return mergeConfig(config, {
-            resolve: {
-                alias: {
-                    "adnbn-ui-config": path.resolve("src", "config", "default.ts"),
-                },
-            },
-        });
-    },
-};
-export default config;

package/.storybook/preview.tsx

@@ -1,100 +0,0 @@
-import React, {useEffect} from "react";
-import type {Preview, StoryContext, StoryFn} from "@storybook/react";
-import {ThemeProvider} from "../src/providers";
-import "./styles/preview.css";
-
-const ThemeDecorator = (Story: StoryFn, context: StoryContext) => {
-    const dir = context.globals.dir || "ltr";
-    const theme = context.globals.theme || "light";
-    const cssVariables = context.globals.cssVariables || "default";
-
-    useEffect(() => {
-        document.documentElement.setAttribute("dir", dir);
-        return () => {
-            document.documentElement.removeAttribute("dir");
-        };
-    }, [dir]);
-
-    useEffect(() => {
-        document.documentElement.setAttribute("theme", theme);
-        return () => {
-            document.documentElement.removeAttribute("theme");
-        };
-    }, [theme]);
-
-    useEffect(() => {
-        if (cssVariables === "default") return;
-
-        const linkElement = document.createElement("link");
-        linkElement.rel = "stylesheet";
-        linkElement.href = "../.storybook/styles/custom.scss";
-        document.head.appendChild(linkElement);
-
-        return () => {
-            document.head.removeChild(linkElement);
-        };
-    }, [cssVariables]);
-
-    return (
-        <ThemeProvider>
-            <div className="story-wrapper">{Story(context.args, context)}</div>
-        </ThemeProvider>
-    );
-};
-
-const globalTypes = {
-    dir: {
-        name: "Direction",
-        description: "Choose direction",
-        defaultValue: "ltr",
-        toolbar: {
-            icon: "transfer",
-            items: [
-                {value: "ltr", title: "Left to right"},
-                {value: "rtl", title: "Right to left"},
-            ],
-            showName: true,
-        },
-    },
-    theme: {
-        name: "Theme",
-        description: "Global theme for components",
-        defaultValue: "light",
-        toolbar: {
-            icon: "star",
-            items: [
-                {value: "light", title: "Light theme"},
-                {value: "dark", title: "Dark theme"},
-            ],
-            showName: true,
-        },
-    },
-    cssVariables: {
-        name: "CSS Variables",
-        description: "Choose CSS variables set",
-        defaultValue: "default",
-        toolbar: {
-            icon: "paintbrush",
-            items: [
-                {value: "default", title: "Default Variables"},
-                {value: "custom", title: "Custom Variables"},
-            ],
-            showName: true,
-        },
-    },
-};
-
-const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-        },
-    },
-    decorators: [ThemeDecorator],
-    globalTypes,
-};
-
-export default preview;

package/.storybook/styles/custom.scss

@@ -1,59 +0,0 @@
-@use "../../src/styles/mixins" as theme;
-
-@include theme.light {
-  --button-height-sm: 20px;
-  --button-height: 25px;
-  --button-height-md: 30px;
-  --button-height-lg: 40px;
-
-  --switch-border-radius: 5px;
-  --switch-width: 40px;
-  --switch-height: 20px;
-  --switch-thumb-width: 20px;
-  --switch-thumb-height: 16px;
-
-  --tooltip-border-radius: 10px;
-  --tooltip-padding: 5px 10px;
-
-  --toast-viewport-padding: 5px;
-
-  /* Common colors */
-  --primary-color: #29a383;
-  --secondary-color: #20573e;
-  --accent-color: #f76b15;
-
-  --bg-primary-color: #f5f6f7;
-
-  --text-primary-color: #111111;
-
-  /* Components colors */
-  --avatar-fallback-bg-color: #ffe7b3;
-  --avatar-fallback-color: #2e2f3b;
-
-  --icon-button-color: #004074;
-  --icon-button-bg-color: #70b8ff;
-  --icon-button-border-color: #c2e6ff;
-  --icon-button-color-hover: #104d87;
-  --icon-button-bg-color-hover: #70b8ff;
-
-  --tooltip-bg-color: #a39073;
-}
-
-@include theme.dark {
-  /* Common colors */
-  --bg-primary-color: #191919;
-
-  --text-primary-color: #b4b4b4;
-
-  /* Components colors */
-  --avatar-fallback-bg-color: #3f2700;
-  --avatar-fallback-color: #f5f6f7;
-
-  --icon-button-color: #0bd8b6;
-  --icon-button-bg-color: #023b37;
-  --icon-button-border-color: #084843;
-  --icon-button-color-hover: #adf0dd;
-  --icon-button-bg-color-hover: #0b3b2c;
-
-  --tooltip-bg-color: #d4b3a5;
-}

package/.storybook/styles/preview.css

@@ -1,58 +0,0 @@
-body {
-    height: 100%;
-    width: 100%;
-    padding: 0 !important;
-}
-
-body.sb-main-padded {
-    height: 100vh;
-}
-
-.docs-story > div {
-    padding: 0;
-    overflow: hidden;
-}
-
-.docs-story .innerZoomElementWrapper > div {
-    width: 100%;
-    border: none !important;
-}
-
-#storybook-root {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/*Custom classes*/
-.story-wrapper {
-    font-family: "Arial", sans-serif;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    padding: 50px 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--bg-primary-color);
-}
-
-.grid-wrapper {
-    display: grid;
-    gap: 25px;
-    justify-content: center;
-    align-items: center;
-}
-
-.item-card {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    justify-content: center;
-    align-items: center;
-}
-
-.item-card__title {
-    color: var(--text-primary-color);
-}

package/.storybook/vitest.setup.ts

@@ -1,9 +0,0 @@
-import {beforeAll} from "vitest";
-import {setProjectAnnotations} from "@storybook/react";
-import * as projectAnnotations from "./preview";
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
-
-beforeAll(project.beforeAll);

package/eslint.config.js

@@ -1,39 +0,0 @@
-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/src/components/Avatar/Avatar.stories.tsx

@@ -1,118 +0,0 @@
-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/Button/Button.stories.tsx

@@ -1,148 +0,0 @@
-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>
-    );
-};