adnbn-ui 0.0.1 → 0.0.2

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

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,209 @@
+import {FC, useState} from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Button, ButtonColor, ButtonVariant} from "../index";
+
+import ToastComponent, {ToastColor, ToastProps, ToastRadius, ToastSide} from "./Toast";
+
+const sides: ToastSide[] = [
+    ToastSide.TopLeft,
+    ToastSide.TopCenter,
+    ToastSide.TopRight,
+    ToastSide.BottomRight,
+    ToastSide.BottomCenter,
+    ToastSide.BottomLeft,
+];
+const colors: (ToastColor | "default")[] = ["default", ToastColor.Success, ToastColor.Error];
+const radius: (ToastRadius | "default")[] = [
+    ToastRadius.None,
+    ToastRadius.Small,
+    "default",
+    ToastRadius.Medium,
+    ToastRadius.Large,
+];
+
+const meta: Meta<typeof ToastComponent> = {
+    title: "Components/Toast",
+    component: ToastComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        duration: {
+            description: "The time in milliseconds that should elapse before automatically closing each toast.",
+        },
+        swipeDirection: {
+            options: ["right", "left", "up", "down"],
+            control: {type: "select"},
+            description: "The direction of the pointer swipe that should close the toast.",
+        },
+        swipeThreshold: {
+            description: "The distance in pixels that the swipe gesture must travel before a close is triggered.",
+            control: {type: "number"},
+        },
+        side: {
+            options: sides,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+        color: {
+            options: colors,
+            control: {type: "select"},
+        },
+
+        action: hideInTable,
+        closeIcon: hideInTable,
+        closeProps: hideInTable,
+        onClose: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+        titleClassName: hideInTable,
+        actionClassName: hideInTable,
+        viewportClassName: hideInTable,
+        descriptionClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Toast: StoryObj<typeof ToastComponent> = {
+    args: {
+        open: true,
+        sticky: false,
+        fullWidth: false,
+        children: (
+            <Button variant={ButtonVariant.Contained} color={ButtonColor.Primary}>
+                Show toast
+            </Button>
+        ),
+        title: "New notification",
+        description: "Description",
+        side: ToastSide.BottomRight,
+        duration: 5000,
+        onClose: () => undefined,
+    },
+};
+
+const ToastClickable: FC<ToastProps> = ({children, ...props}) => {
+    const [open, setOpen] = useState(false);
+    const handleClick = () => setOpen(prev => !prev);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <ToastComponent
+            open={open}
+            title="New notification"
+            description="Description"
+            onOpenChange={setOpen}
+            onClose={handleClose}
+            {...props}
+        >
+            <Button variant={ButtonVariant.Contained} color={ButtonColor.Primary} onClick={handleClick}>
+                {children}
+            </Button>
+        </ToastComponent>
+    );
+};
+
+export const Side = () => {
+    return (
+        <div style={{display: "grid", gridTemplateColumns: "repeat(6, auto)", gap: "10px"}}>
+            <ToastClickable side={ToastSide.TopLeft} description="Top Left">
+                Top Left
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.TopCenter} description="Top Center">
+                Top Center
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.TopRight} description="Top Right">
+                Top Right
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.BottomLeft} description="Bottom Left">
+                Bottom Left
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.BottomCenter} description="Bottom Center">
+                Bottom Center
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.BottomRight} description="Bottom Right">
+                Bottom Right
+            </ToastClickable>
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div style={{display: "flex", gap: "10px"}}>
+            <ToastClickable side={ToastSide.TopLeft} radius={ToastRadius.None} description="None Radius">
+                None
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.TopCenter} radius={ToastRadius.Small} description="Small Radius">
+                Small
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.TopRight} description="Default Radius">
+                Default
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.BottomLeft} radius={ToastRadius.Medium} description="Medium Radius">
+                Medium
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.BottomRight} radius={ToastRadius.Large} description="Large Radius">
+                Large
+            </ToastClickable>
+        </div>
+    );
+};
+
+export const FullWidth = () => {
+    return (
+        <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
+            <ToastClickable
+                side={ToastSide.TopCenter}
+                radius={ToastRadius.None}
+                fullWidth
+                sticky
+                description="Top full width without padding"
+            >
+                Top
+            </ToastClickable>
+
+            <ToastClickable
+                side={ToastSide.BottomCenter}
+                radius={ToastRadius.None}
+                fullWidth
+                sticky
+                description="Bottom full width without padding"
+            >
+                Bottom
+            </ToastClickable>
+        </div>
+    );
+};
+
+export const Color = () => {
+    return (
+        <div style={{display: "flex", gap: "10px"}}>
+            <ToastClickable side={ToastSide.TopLeft} color={ToastColor.Error} description="Error color">
+                Error
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.TopCenter} description="Default color">
+                Default
+            </ToastClickable>
+
+            <ToastClickable side={ToastSide.TopRight} color={ToastColor.Success} description="Success color">
+                Success
+            </ToastClickable>
+        </div>
+    );
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,142 @@
+import React, {FC, memo, ReactElement, ReactNode} from "react";
+import classnames from "classnames";
+import {
+    Description,
+    Provider,
+    Root,
+    Title,
+    ToastProps as ToastRootProps,
+    ToastProviderProps,
+    Viewport,
+} from "@radix-ui/react-toast";
+
+import {IconButton, IconButtonProps} from "../IconButton";
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./toast.module.scss";
+
+export enum ToastSide {
+    TopCenter = "top-center",
+    TopLeft = "top-left",
+    TopRight = "top-right",
+    BottomRight = "bottom-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+}
+
+export enum ToastRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum ToastColor {
+    Error = "error",
+    Success = "success",
+}
+
+const toastSideBySwipeDirectionMap = {
+    [ToastSide.TopLeft]: "left",
+    [ToastSide.TopCenter]: "up",
+    [ToastSide.TopRight]: "right",
+    [ToastSide.BottomRight]: "right",
+    [ToastSide.BottomCenter]: "down",
+    [ToastSide.BottomLeft]: "left",
+} as Record<ToastSide, ToastProviderProps["swipeDirection"]>;
+
+export interface ToastProps extends Omit<ToastRootProps, "title">, Omit<ToastProviderProps, "children"> {
+    side?: ToastSide;
+    color?: ToastColor;
+    radius?: ToastRadius;
+    title?: ReactNode;
+    action?: ReactNode;
+    description?: ReactNode;
+    closeIcon?: ReactElement;
+    closeProps?: IconButtonProps;
+    titleClassName?: string;
+    actionClassName?: string;
+    viewportClassName?: string;
+    descriptionClassName?: string;
+    onClose?: () => void;
+    fullWidth?: boolean;
+    sticky?: boolean;
+}
+
+const Toast: FC<ToastProps> = props => {
+    const defaultProps = useComponentProps("toast");
+    const mergedProps = {...defaultProps, ...props};
+    const {
+        side = ToastSide.BottomRight,
+        color,
+        radius,
+        title,
+        action,
+        description,
+        fullWidth,
+        sticky,
+        closeIcon = "✖",
+        closeProps,
+
+        label,
+        duration,
+        swipeDirection = toastSideBySwipeDirectionMap[side],
+        swipeThreshold = ["up", "down"].includes(swipeDirection || "") ? 15 : 50,
+
+        className,
+        titleClassName,
+        actionClassName,
+        viewportClassName,
+        descriptionClassName,
+        children,
+        onClose,
+        ...other
+    } = mergedProps;
+
+    const {className: closeClassName, ...otherCloseProps} = closeProps || {};
+    return (
+        <Provider label={label} duration={duration} swipeDirection={swipeDirection} swipeThreshold={swipeThreshold}>
+            {children}
+            <Root
+                className={classnames(
+                    styles["toast"],
+                    {
+                        [styles[`toast--${side}`]]: side,
+                        [styles[`toast--${color}-color`]]: color,
+                        [styles[`toast--${radius}-radius`]]: radius,
+                        [styles["toast--sticky"]]: sticky,
+                        [styles["toast--full-width"]]: fullWidth,
+                    },
+                    className
+                )}
+                {...other}
+            >
+                {title && <Title className={classnames(styles["toast__title"], titleClassName)}>{title}</Title>}
+
+                {description && (
+                    <Description className={classnames(styles["toast__description"], descriptionClassName)}>
+                        {description}
+                    </Description>
+                )}
+
+                {cloneOrCreateElement(action, {className: classnames(styles["toast__action"], actionClassName)})}
+
+                {onClose && (
+                    <IconButton
+                        aria-label="Close"
+                        onClick={onClose}
+                        className={classnames(styles["toast__close"], closeClassName)}
+                        {...otherCloseProps}
+                    >
+                        {closeIcon}
+                    </IconButton>
+                )}
+            </Root>
+
+            <Viewport className={classnames(styles["toast__viewport"], viewportClassName)} />
+        </Provider>
+    );
+};
+
+export default memo(Toast);

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export {default as Toast, ToastSide, ToastRadius, ToastColor} from "./Toast";
+export type {ToastProps} from "./Toast";