adnbn-ui 0.0.1 → 0.1.0

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>
+    );
+};

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,162 @@
+import React, {
+    ChangeEventHandler,
+    ComponentProps,
+    forwardRef,
+    memo,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react";
+
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./text-field.module.scss";
+
+export enum TextFieldVariant {
+    Regular = "regular",
+    Outlined = "outlined",
+    Filled = "filled",
+}
+
+export enum TextFieldSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TextFieldRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    Full = "full",
+}
+
+export enum TextFieldAccent {
+    Success = "success",
+    Error = "error",
+}
+
+export interface TextFieldActions {
+    select(): void;
+
+    focus(): void;
+
+    getValue(): string | undefined;
+
+    setValue(value: string | number | undefined): void;
+}
+
+export interface TextFieldProps extends ComponentProps<"input"> {
+    variant?: TextFieldVariant;
+    accent?: TextFieldAccent;
+    radius?: TextFieldRadius;
+    customSize?: TextFieldSize;
+    value?: string | number | undefined;
+    defaultValue?: string | number | undefined;
+    label?: string;
+    fullWidth?: boolean;
+    before?: ReactNode;
+    after?: ReactNode;
+    inputClassName?: string;
+    afterClassName?: string;
+    beforeClassName?: string;
+}
+
+const TextField = forwardRef<TextFieldActions, TextFieldProps>((props, ref) => {
+    const {
+        variant = TextFieldVariant.Regular,
+        accent,
+        radius,
+        customSize,
+        label,
+        fullWidth,
+        type = "text",
+        value: propValue = "",
+        defaultValue,
+        before,
+        after,
+        className,
+        inputClassName,
+        afterClassName,
+        beforeClassName,
+        onChange,
+        ...other
+    } = {...useComponentProps("textField"), ...props};
+
+    const [value, setValue] = useState<string | number | undefined>(defaultValue || propValue);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            select() {
+                inputRef.current?.select();
+            },
+            focus() {
+                inputRef.current?.focus();
+            },
+            getValue(): string | undefined {
+                return inputRef.current?.value;
+            },
+            setValue(value: string | number | undefined) {
+                setValue(value);
+            },
+        }),
+        []
+    );
+
+    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        event => {
+            onChange?.(event);
+            setValue(event.currentTarget.value);
+        },
+        [onChange]
+    );
+
+    useEffect(() => {
+        setValue(propValue);
+    }, [propValue]);
+
+    return (
+        <div
+            aria-label={label}
+            className={classnames(
+                styles["text-field"],
+                {
+                    [styles[`text-field--${variant}`]]: variant,
+                    [styles[`text-field--${accent}`]]: accent,
+                    [styles[`text-field--${radius}-radius`]]: radius,
+                    [styles[`text-field--${customSize}-size`]]: customSize,
+                    [styles["text-field--full-width"]]: fullWidth,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                before,
+                {className: classnames(styles["text-field__before"], beforeClassName)},
+                "span"
+            )}
+            <input
+                {...other}
+                ref={inputRef}
+                type={type}
+                value={value}
+                defaultValue={defaultValue}
+                aria-label={label}
+                className={classnames(styles["text-field__input"], inputClassName)}
+                onChange={handleChange}
+            />
+            {cloneOrCreateElement(after, {className: classnames(styles["text-field__after"], afterClassName)}, "span")}
+        </div>
+    );
+});
+
+export default memo(TextField);

package/src/components/TextField/index.ts

@@ -0,0 +1,2 @@
+export {default as TextField, TextFieldVariant, TextFieldSize, TextFieldAccent} from "./TextField";
+export type {TextFieldProps, TextFieldActions} from "./TextField";

package/src/components/TextField/text-field.module.scss

@@ -0,0 +1,129 @@
+$root: text-field;
+
+.#{$root} {
+  display: flex;
+  align-items: center;
+  gap: var(--text-field-gap, 0.3em);
+  font-family: var(--text-field-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--text-field-font-weight, 400);
+  font-size: var(--text-field-font-size, 14px);
+  letter-spacing: var(--text-field-letter-spacing, 0.5px);
+  line-height: var(--text-field-line-height, 18px);
+  padding: var(--text-field-padding, 8px 12px);
+  border-radius: var(--text-field-border-radius, 8px);
+  transition:
+    border-color var(--transition-speed-sm),
+    box-shadow var(--transition-speed-sm),
+    background var(--transition-speed-sm);
+
+  &:has(&__input:focus) {
+    border-color: var(--text-field-focus-border-color, color-mix(in srgb, white 40%, var(--primary-color)));
+    box-shadow: var(--text-field-focus-shadow, 0 0 4px var(--primary-color));
+  }
+
+  &:has(&__input:disabled) {
+    opacity: var(--text-field-disabled-opacity, 0.7);
+    cursor: not-allowed;
+  }
+
+  &__input {
+    width: 100%;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+
+    &:focus {
+      outline: none;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__before,
+  &__after {
+    display: inline;
+    cursor: default;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  // Variants
+  &--regular {
+    color: var(--text-field-regular-color, var(--text-field-color, var(--text-primary-color)));
+    background: var(--text-field-regular-bg-color, var(--text-field-bg-color, var(--bg-secondary-color)));
+    border-style: solid;
+    border-width: var(--text-field-regular-border-width, var(--text-field-border-width, 1px));
+    border-color: var(--text-field-regular-border-color, var(--border-color));
+  }
+
+  &--outlined {
+    color: var(--text-field-outlined-color, var(--text-field-color, var(--text-primary-color)));
+    background: transparent;
+    border-style: solid;
+    border-width: var(--text-field-outlined-border-width, var(--text-field-border-width, 1px));
+    border-color: var(--text-field-outlined-border-color, var(--border-color));
+  }
+
+  &--filled {
+    color: var(--text-field-filled-color, var(--text-field-color, var(--text-primary-color)));
+    background: var(--text-field-filled-bg-color, var(--text-field-bg-color, var(--bg-secondary-color)));
+    border: none;
+  }
+
+  // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
+  &--small-radius {
+    border-radius: var(--text-field-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--text-field-border-radius-md, 10px);
+  }
+
+  &--large-radius {
+    border-radius: var(--text-field-border-radius-lg, 15px);
+  }
+
+  &--full-radius {
+    border-radius: var(--text-field-border-radius-full, 999px);
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--text-field-padding-sm, 6px 10px);
+    font-size: var(--text-field-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--text-field-padding-md, 10px 14px);
+    font-size: var(--text-field-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    padding: var(--text-field-padding-lg, 12px 16px);
+    font-size: var(--text-field-font-size-sm, 18px);
+  }
+
+  // Accents
+  &--success {
+    border-color: var(--text-field-success-color, var(--success-color)) !important;
+    border-width: var(--text-field-accent-border-width, 2px) !important;
+    box-shadow: var(--text-field-success-color, 0 0 4px var(--success-color)) !important;
+  }
+
+  &--error {
+    border-color: var(--text-field-error-color, var(--error-color)) !important;
+    border-width: var(--text-field-accent-border-width, 2px) !important;
+    box-shadow: var(--text-field-error-color, 0 0 4px var(--error-color)) !important;
+  }
+}