adnbn-ui 0.0.1 → 0.1.0

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,157 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter} from "../../utils";
+
+import TagComponent, {TagColor, TagRadius, TagSize, TagVariant} from "./Tag";
+
+const variants: TagVariant[] = [TagVariant.Contained, TagVariant.Outlined, TagVariant.Soft];
+const colors: (TagColor | "default")[] = ["default", TagColor.Primary, TagColor.Secondary, TagColor.Accent];
+const sizes: (TagSize | "default")[] = [TagSize.Small, "default", TagSize.Medium, TagSize.Large];
+const radius: (TagRadius | "default")[] = [TagRadius.Small, TagRadius.Medium, TagRadius.Large, "default"];
+
+const meta: Meta<typeof TagComponent> = {
+    title: "Components/Tag",
+    component: TagComponent,
+    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"},
+        },
+    },
+};
+
+export default meta;
+
+export const Tag: StoryObj<typeof TagComponent> = {
+    args: {
+        children: "Test",
+        variant: TagVariant.Contained,
+        color: TagColor.Primary,
+        clickable: false,
+    },
+};
+
+export const Variant = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <TagComponent variant={variant} color={TagColor.Primary}>
+                        {capitalizeFirstLetter(variant)}
+                    </TagComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantDisabled = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <TagComponent variant={variant} color={TagColor.Primary}>
+                        {capitalizeFirstLetter(variant)}
+                    </TagComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Size = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size => (
+                <div key={size} className="item-card">
+                    <TagComponent size={size !== "default" ? size : undefined} color={TagColor.Primary}>
+                        {capitalizeFirstLetter(size)}
+                    </TagComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <TagComponent radius={radius !== "default" ? radius : undefined} color={TagColor.Primary}>
+                        {capitalizeFirstLetter(radius)}
+                    </TagComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantColor = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                colors.map(color => (
+                    <div key={`${variant}-${color}`}>
+                        <TagComponent variant={variant} color={color !== "default" ? color : undefined}>
+                            {capitalizeFirstLetter(color)}
+                        </TagComponent>
+                    </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}`}>
+                        <TagComponent
+                            variant={variant}
+                            size={size !== "default" ? size : undefined}
+                            color={TagColor.Primary}
+                        >
+                            {capitalizeFirstLetter(size)}
+                        </TagComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const VariantRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                radius.map(radius => (
+                    <div key={`${variant}-${radius}`}>
+                        <TagComponent
+                            variant={variant}
+                            radius={radius !== "default" ? radius : undefined}
+                            color={TagColor.Primary}
+                        >
+                            {capitalizeFirstLetter(radius)}
+                        </TagComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,71 @@
+import React, {ComponentProps, FC, memo} from "react";
+import classnames from "classnames";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tag.module.scss";
+
+export enum TagVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Soft = "soft",
+}
+
+export enum TagColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export enum TagSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TagRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface TagProps extends ComponentProps<"span"> {
+    size?: TagSize;
+    color?: TagColor;
+    radius?: TagRadius;
+    variant?: TagVariant;
+    clickable?: boolean;
+}
+
+const Tag: FC<TagProps> = props => {
+    const {
+        size,
+        color,
+        radius,
+        variant = TagVariant.Contained,
+        clickable,
+        children,
+        className,
+        ...other
+    } = {...useComponentProps("tag"), ...props};
+
+    return (
+        <span
+            {...other}
+            className={classnames(
+                styles["tag"],
+                {
+                    [styles[`tag--${variant}`]]: variant,
+                    [styles[`tag--${radius}-radius`]]: radius,
+                    [styles[`tag--${color}-color`]]: color,
+                    [styles[`tag--${size}-size`]]: size,
+                    [styles["tag--clickable"]]: clickable,
+                },
+                className
+            )}
+        >
+            {children}
+        </span>
+    );
+};
+
+export default memo(Tag);

package/src/components/Tag/index.ts

@@ -0,0 +1,2 @@
+export {default as Tag, TagVariant, TagRadius, TagColor, TagSize} from "./Tag";
+export type {TagProps} from "./Tag";

package/src/components/Tag/tag.module.scss

@@ -0,0 +1,118 @@
+$root: tag;
+
+.#{$root} {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tag-font-size, 13px);
+  font-weight: var(--tag-font-weight, 500);
+  line-height: var(--tag-line-height, 1rem);
+  letter-spacing: var(--tag-letter-spacing, 0.5px);
+  padding: var(--tag-padding, 4px 8px);
+  border-radius: var(--tag-border-radius, 999px);
+  color: var(--tag-color, var(--text-secondary-color));
+  background: var(--tag-bg-color, var(--bg-secondary-color));
+
+  &--clickable {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(var(--tag-scale, 0.98));
+      user-select: none;
+    }
+  }
+
+  // Variants
+  &--contained {
+    color: var(--tag-contained-color, var(--tag-color, var(--text-secondary-color)));
+    background: var(--tag-contained-bg-color, var(--tag-bg-color, var(--bg-secondary-color)));
+    border: none;
+
+    &.#{$root}--primary-color {
+      color: var(--tag-contained-primary-color, #fff);
+      background: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--tag-contained-secondary-color, #fff);
+      background: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--tag-contained-accent-color, #fff);
+      background: var(--accent-color);
+    }
+  }
+
+  &--outlined {
+    color: var(--tag-outlined-color, var(--tag-color, var(--text-secondary-color)));
+    border: var(--tag-border-width, 1px) solid
+      var(--tag-outlined-border-color, var(--tag-outlined-color, var(--text-secondary-color)));
+    background: none;
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+      border-color: var(--tag-outlined-border-primary-color, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+      border-color: var(--tag-outlined-border-secondary-color, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+      border-color: var(--tag-outlined-border-accent-color, var(--accent-color));
+    }
+  }
+
+  &--soft {
+    color: var(--tag-soft-color, var(--tag-color, var(--text-secondary-color)));
+    background-color: color-mix(in srgb, white 30%, var(--tag-bg-color, var(--bg-secondary-color)));
+
+    &.#{$root}--primary-color {
+      color: var(--tag-soft-primary-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--tag-soft-secondary-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--tag-soft-accent-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--accent-color));
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--tag-padding, 3px 6px);
+    font-size: var(--tag-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--tag-padding, 5px 10px);
+    font-size: var(--tag-font-size-sm, 14px);
+  }
+
+  &--large-size {
+    padding: var(--tag-padding, 6px 12px);
+    font-size: var(--tag-font-size-sm, 16px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--tag-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--tag-border-radius-md, 8px);
+  }
+
+  &--large-radius {
+    border-radius: var(--tag-border-radius-lg, 10px);
+  }
+}

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,145 @@
+import {Fragment} from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import TextAreaComponent, {TextAreaRadius, TextAreaSize, TextAreaVariant} from "./TextArea";
+
+const variants: TextAreaVariant[] = [TextAreaVariant.Regular, TextAreaVariant.Outlined, TextAreaVariant.Filled];
+const sizes: (TextAreaSize | "default")[] = [TextAreaSize.Small, "default", TextAreaSize.Medium, TextAreaSize.Large];
+const radius: (TextAreaRadius | "default")[] = [
+    TextAreaRadius.None,
+    TextAreaRadius.Small,
+    "default",
+    TextAreaRadius.Medium,
+    TextAreaRadius.Large,
+];
+
+const meta: Meta<typeof TextAreaComponent> = {
+    title: "Components/TextArea",
+    component: TextAreaComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            options: variants,
+            control: {type: "select"},
+        },
+        size: {
+            options: sizes,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+
+        label: hideInTable,
+        children: hideInTable,
+    },
+};
+
+export default meta;
+
+export const TextArea: StoryObj<typeof TextAreaComponent> = {
+    args: {
+        placeholder: "Enter text",
+        disabled: false,
+        fullWidth: false,
+    },
+};
+
+export const Variant = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {variants.map(variant => (
+                <div key={variant}>
+                    <TextAreaComponent variant={variant} placeholder={capitalizeFirstLetter(variant)} />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Size = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size => (
+                <div key={size}>
+                    <TextAreaComponent
+                        size={size !== "default" ? size : undefined}
+                        placeholder={capitalizeFirstLetter(size)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius}>
+                    <TextAreaComponent
+                        radius={radius !== "default" ? radius : undefined}
+                        placeholder={capitalizeFirstLetter(radius)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            <span className="item-card__title"> Variant \ Radius</span>
+            {radius.slice(1).map(radius => (
+                <span key={radius} className="item-card__title">
+                    {capitalizeFirstLetter(radius)} radius
+                </span>
+            ))}
+            {variants.map(variant => (
+                <Fragment key={variant}>
+                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
+                    {radius.slice(1).map(radius => (
+                        <div key={`${radius}-${variant}`} className="item-card">
+                            <TextAreaComponent
+                                variant={variant}
+                                radius={radius !== "default" ? radius : undefined}
+                                placeholder="Enter value"
+                            />
+                        </div>
+                    ))}
+                </Fragment>
+            ))}
+        </div>
+    );
+};
+
+export const VariantSize = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            <span className="item-card__title"> Variant \ Size</span>
+            {sizes.map(size => (
+                <span key={size} className="item-card__title">
+                    {capitalizeFirstLetter(size)} size
+                </span>
+            ))}
+            {variants.map(variant => (
+                <Fragment key={variant}>
+                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
+                    {sizes.map(size => (
+                        <div key={`${size}-${variant}`} className="item-card">
+                            <TextAreaComponent
+                                variant={variant}
+                                size={size !== "default" ? size : undefined}
+                                placeholder="Enter value"
+                            />
+                        </div>
+                    ))}
+                </Fragment>
+            ))}
+        </div>
+    );
+};

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,143 @@
+import React, {
+    ChangeEventHandler,
+    ComponentProps,
+    forwardRef,
+    memo,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react";
+
+import classnames from "classnames";
+import autosize from "autosize";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./text-area.module.scss";
+
+export enum TextAreaVariant {
+    Regular = "regular",
+    Outlined = "outlined",
+    Filled = "filled",
+}
+
+export enum TextAreaSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TextAreaRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface TextAreaActions {
+    select(): void;
+
+    focus(): void;
+
+    setValue(value: string): void;
+}
+
+export interface TextAreaProps extends ComponentProps<"textarea"> {
+    variant?: TextAreaVariant;
+    radius?: TextAreaRadius;
+    size?: TextAreaSize;
+    fullWidth?: boolean;
+    label?: string;
+    children?: string | ReadonlyArray<string> | number | undefined;
+}
+
+const TextArea = forwardRef<TextAreaActions, TextAreaProps>((props, ref) => {
+    const {
+        variant = TextAreaVariant.Regular,
+        radius,
+        size,
+        fullWidth,
+        label,
+        id,
+        name,
+        rows = 4,
+        value: propValue = "",
+        children,
+        onChange,
+        className,
+        ...other
+    } = {...useComponentProps("textArea"), ...props};
+
+    const [value, setValue] = useState(propValue || children);
+
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const handleChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
+        event => {
+            onChange?.(event);
+            setValue(event.currentTarget.value);
+        },
+        [onChange]
+    );
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            select() {
+                textareaRef.current?.select();
+            },
+            focus() {
+                textareaRef.current?.focus();
+            },
+            setValue(value: string) {
+                setValue(value);
+            },
+        }),
+        []
+    );
+
+    useEffect(() => {
+        const textarea = textareaRef.current;
+
+        if (textarea) {
+            autosize(textarea);
+        }
+
+        return () => {
+            if (textarea) {
+                autosize.destroy(textarea);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        setValue(propValue || children);
+    }, [propValue, children]);
+
+    return (
+        <textarea
+            {...other}
+            ref={textareaRef}
+            id={id}
+            name={name || id}
+            value={value}
+            rows={rows}
+            aria-label={label}
+            onChange={handleChange}
+            className={classnames(
+                styles["text-area"],
+                {
+                    [styles[`text-area--${variant}`]]: variant,
+                    [styles[`text-area--${size}-size`]]: size,
+                    [styles[`text-area--${radius}-radius`]]: radius,
+                    [styles["text-area--full-width"]]: fullWidth,
+                },
+                className
+            )}
+        />
+    );
+});
+
+export default memo(TextArea);

package/src/components/TextArea/index.ts

@@ -0,0 +1,2 @@
+export {default as TextArea, TextAreaVariant, TextAreaSize} from "./TextArea";
+export type {TextAreaProps, TextAreaActions} from "./TextArea";