adnbn-ui 0.0.1 → 0.0.2

package/.prettierignore

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

package/.prettierrc

@@ -0,0 +1,28 @@
+{
+    "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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,59 @@
+@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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -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,82 @@
 {
   "name": "adnbn-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "UI Libs for AddonBone",
   "author": "AddonBone",
-  "license": "MIT"
+  "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",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8",
+    "prettier": "^3.5.3"
+  },
+  "peerDependencies": {
+    "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";