adnbn-ui 0.0.1 → 0.0.2

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";

package/src/components/TextArea/text-area.module.scss

@@ -0,0 +1,88 @@
+$root: text-area;
+
+.#{$root} {
+  outline: none;
+  box-sizing: border-box;
+  font-family: var(--text-area-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--text-area-font-weight, 400);
+  font-size: var(--text-area-font-size, 14px);
+  letter-spacing: var(--text-area-letter-spacing, 0.5px);
+  line-height: var(--text-area-line-height, 18px);
+  padding: var(--text-area-padding, 8px 12px);
+  border-radius: var(--text-area-border-radius, 8px);
+  min-width: var(--text-area-min-width, 200px);
+  transition:
+    border-color var(--transition-speed-sm),
+    box-shadow var(--transition-speed-sm),
+    background var(--transition-speed-sm);
+
+  &:focus {
+    border-color: var(--text-area-focus-border-color, color-mix(in srgb, white 40%, var(--primary-color)));
+    box-shadow: var(--text-area-focus-shadow, 0 0 4px var(--primary-color));
+  }
+
+  &:disabled {
+    opacity: var(--text-area-disabled-opacity, 0.7);
+    cursor: not-allowed;
+  }
+
+  &--full-width {
+    width: 100% !important;
+  }
+
+  // Variants
+  &--regular {
+    color: var(--text-area-regular-color, var(--text-area-color, var(--text-primary-color)));
+    background: var(--text-area-regular-bg-color, var(--text-area-bg-color, var(--bg-secondary-color)));
+    border-style: solid;
+    border-width: var(--text-area-regular-border-width, var(--text-area-border-width, 1px));
+    border-color: var(--text-area-regular-border-color, var(--border-color));
+  }
+
+  &--outlined {
+    color: var(--text-area-outlined-color, var(--text-area-color, var(--text-primary-color)));
+    background: transparent;
+    border-style: solid;
+    border-width: var(--text-area-outlined-border-width, var(--text-area-border-width, 1px));
+    border-color: var(--text-area-outlined-border-color, var(--border-color));
+  }
+
+  &--filled {
+    color: var(--text-area-filled-color, var(--text-area-color, var(--text-primary-color)));
+    background: var(--text-area-filled-bg-color, var(--text-area-bg-color, var(--bg-secondary-color)));
+    border: none;
+  }
+
+  // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
+  &--small-radius {
+    border-radius: var(--text-area-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--text-area-border-radius-md, 10px);
+  }
+
+  &--large-radius {
+    border-radius: var(--text-area-border-radius-lg, 15px);
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--text-area-padding-sm, 6px 10px);
+    font-size: var(--text-area-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--text-area-padding-md, 10px 14px);
+    font-size: var(--text-area-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    padding: var(--text-area-padding-lg, 12px 16px);
+    font-size: var(--text-area-font-size-sm, 18px);
+  }
+}

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,177 @@
+import {Fragment} from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import TextFieldComponent, {TextFieldAccent, TextFieldRadius, TextFieldSize, TextFieldVariant} from "./TextField";
+
+const variants: TextFieldVariant[] = [TextFieldVariant.Regular, TextFieldVariant.Outlined, TextFieldVariant.Filled];
+const sizes: (TextFieldSize | "default")[] = [
+    TextFieldSize.Small,
+    "default",
+    TextFieldSize.Medium,
+    TextFieldSize.Large,
+];
+const radius: (TextFieldRadius | "default")[] = [
+    TextFieldRadius.None,
+    TextFieldRadius.Small,
+    "default",
+    TextFieldRadius.Medium,
+    TextFieldRadius.Large,
+    TextFieldRadius.Full,
+];
+const accents: (TextFieldAccent | "default")[] = ["default", TextFieldAccent.Success, TextFieldAccent.Error];
+
+const meta: Meta<typeof TextFieldComponent> = {
+    title: "Components/TextField",
+    component: TextFieldComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            options: variants,
+            control: {type: "select"},
+        },
+        customSize: {
+            options: sizes,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+        accent: {
+            options: accents,
+            control: {type: "select"},
+        },
+
+        label: hideInTable,
+        value: hideInTable,
+        defaultValue: hideInTable,
+        inputClassName: hideInTable,
+        afterClassName: hideInTable,
+        beforeClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const TextField: StoryObj<typeof TextFieldComponent> = {
+    args: {
+        placeholder: "Enter text",
+        disabled: false,
+        fullWidth: false,
+        before: "🔍",
+        after: "🔑",
+    },
+};
+
+export const Variant = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {variants.map(variant => (
+                <div key={variant}>
+                    <TextFieldComponent 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}>
+                    <TextFieldComponent
+                        customSize={size !== "default" ? size : undefined}
+                        placeholder={capitalizeFirstLetter(size)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Accent = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {accents.map(accent => (
+                <div key={accent}>
+                    <TextFieldComponent
+                        accent={accent !== "default" ? accent : undefined}
+                        placeholder={capitalizeFirstLetter(accent)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(6, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius}>
+                    <TextFieldComponent
+                        radius={radius !== "default" ? radius : undefined}
+                        placeholder={capitalizeFirstLetter(radius)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(7, auto)"}}>
+            <span className="item-card__title"> Variant \ Radius</span>
+            {radius.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.map(radius => (
+                        <div key={`${radius}-${variant}`} className="item-card">
+                            <TextFieldComponent
+                                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">
+                            <TextFieldComponent
+                                variant={variant}
+                                customSize={size !== "default" ? size : undefined}
+                                placeholder="Enter value"
+                            />
+                        </div>
+                    ))}
+                </Fragment>
+            ))}
+        </div>
+    );
+};