adnbn-ui 0.0.1 → 0.0.2

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,75 @@
+import React, {ComponentProps, forwardRef, JSX, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./list-item.module.scss";
+
+type TagType = keyof JSX.IntrinsicElements;
+export type ListItemType = HTMLLIElement;
+
+export interface ListItemProps extends ComponentProps<"li"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    primary?: ReactNode;
+    secondary?: ReactNode;
+    leftTag?: TagType;
+    rightTag?: TagType;
+    primaryTag?: TagType;
+    secondaryTag?: TagType;
+    primaryClassName?: string;
+    secondaryClassName?: string;
+    centerClassName?: string;
+    leftClassName?: string;
+    rightClassName?: string;
+}
+
+const ListItem = forwardRef<ListItemType, ListItemProps>((props, ref) => {
+    const {
+        left,
+        right,
+        primary,
+        secondary,
+        leftTag = "div",
+        rightTag = "div",
+        primaryTag = "div",
+        secondaryTag = "div",
+        children,
+        className,
+        leftClassName,
+        rightClassName,
+        centerClassName,
+        primaryClassName,
+        secondaryClassName,
+        role = "list-item",
+        ...other
+    } = {...useComponentProps("listItem"), ...props};
+
+    return (
+        <li {...other} ref={ref} role={role} className={classnames(styles["list-item"], className)}>
+            {cloneOrCreateElement(left, {className: classnames(styles["list-item__left"], leftClassName)}, leftTag)}
+
+            {(primary || secondary) && (
+                <div className={classnames(styles["list-item__center"], centerClassName)}>
+                    {cloneOrCreateElement(
+                        primary,
+                        {className: classnames(styles["list-item__primary"], primaryClassName)},
+                        primaryTag
+                    )}
+                    {cloneOrCreateElement(
+                        secondary,
+                        {className: classnames(styles["list-item__secondary"], secondaryClassName)},
+                        secondaryTag
+                    )}
+                </div>
+            )}
+
+            {cloneOrCreateElement(right, {className: classnames(styles["list-item__right"], rightClassName)}, rightTag)}
+
+            {children}
+        </li>
+    );
+});
+
+export default memo(ListItem);

package/src/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export {default as ListItem} from "./ListItem";
+export type {ListItemProps, ListItemType} from "./ListItem";

package/src/components/ListItem/list-item.module.scss

@@ -0,0 +1,36 @@
+.list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+
+  &__center {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__primary,
+  &__secondary {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &__primary {
+    color: var(--list-item-primary-color, var(--text-primary-color));
+  }
+  &__secondary {
+    color: var(--list-item-secondary-color, var(--text-secondary-color));
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,95 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import {Button, Header} from "../index";
+
+import ModalComponent, {ModalProps, ModalRadius} from "./Modal";
+
+const radius: (ModalRadius | "default")[] = [
+    ModalRadius.None,
+    ModalRadius.Small,
+    "default",
+    ModalRadius.Medium,
+    ModalRadius.Large,
+];
+
+const meta: Meta<typeof ModalComponent> = {
+    title: "Components/Modal",
+    component: ModalComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+        modal: {
+            description:
+                "The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.",
+            control: {type: "boolean"},
+            type: "boolean",
+        },
+        closeButton: {
+            options: [true, false, {children: "❌"}],
+            control: {type: "select"},
+        },
+        speed: {
+            type: "number",
+        },
+        onClose: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+        description: hideInTable,
+        overlayClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Modal = (props: ModalProps & {label?: string}) => {
+    const [open, setOpen] = useState(false);
+    const {label = "Open Modal", ...other} = props;
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>{label}</Button>
+            <ModalComponent open={open} onOpenChange={setOpen} {...other}>
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        gap: "30px",
+                    }}
+                >
+                    <Header
+                        title="Volume Up Plus"
+                        subtitle="Adjust the current tab's volume with the slider. Switch to any audio tab in one click."
+                        before="❤️"
+                    />
+                    <Button style={{margin: "50px auto", maxWidth: "max-content"}} onClick={() => setOpen(false)}>
+                        Close Modal
+                    </Button>
+                </div>
+            </ModalComponent>
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <Modal
+                        radius={radius !== "default" ? radius : undefined}
+                        fullscreen={false}
+                        label={`${capitalizeFirstLetter(radius)} radius`}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,94 @@
+import React, {FC, isValidElement, memo, ReactElement, useCallback} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
+import {IconButton, IconButtonProps} from "../IconButton";
+
+import styles from "./modal.module.scss";
+
+export enum ModalRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface ModalProps extends DialogProps {
+    radius?: ModalRadius;
+    closeButton?: boolean | IconButtonProps | ReactElement;
+    onClose?: () => void;
+}
+
+export const modalPropsKeys = new Set<keyof ModalProps>(["radius", "closeButton", "onClose", ...dialogPropsKeys]);
+
+const Modal: FC<ModalProps> = props => {
+    const {
+        radius,
+        fullscreen = true,
+        closeButton = true,
+        onClose,
+        onOpenChange,
+        children,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("modal"), ...props};
+
+    const handleClose = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            onClose?.();
+            onOpenChange?.(false);
+            if (typeof closeButton === "object" && !isValidElement(closeButton)) {
+                closeButton?.onClick?.(event);
+            }
+        },
+        [onClose, onOpenChange, closeButton]
+    );
+
+    const renderCloseButton = useCallback(() => {
+        if (!closeButton) return null;
+
+        if (isValidElement(closeButton)) return closeButton;
+
+        const closeButtonProps = typeof closeButton === "object" ? closeButton : {};
+
+        return (
+            <IconButton
+                aria-label="Close"
+                children="✖"
+                {...closeButtonProps}
+                onClick={handleClose}
+                className={classnames(styles["modal-close"], closeButtonProps.className)}
+            />
+        );
+    }, [closeButton, handleClose]);
+
+    return (
+        <Dialog
+            {...other}
+            onOpenChange={onOpenChange}
+            overlayClassName={classnames(styles["modal-overlay"], overlayClassName)}
+            className={classnames(
+                styles["modal-content"],
+                {
+                    [styles["modal-content--fullscreen"]]: fullscreen,
+                    [styles[`modal-content--${radius}-radius`]]: radius,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["modal-children"], childrenClassName)},
+                "div"
+            )}
+            {renderCloseButton()}
+        </Dialog>
+    );
+};
+
+export default memo(Modal);

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export {default as Modal, ModalRadius, modalPropsKeys} from "./Modal";
+export type {ModalProps} from "./Modal";

package/src/components/Modal/modal.module.scss

@@ -0,0 +1,97 @@
+@use "../../styles/mixins" as dir;
+
+$root: modal;
+
+.#{$root} {
+  &-overlay {
+    background-color: var(--modal-overlay-bg-color, var(--dialog-overlay-bg-color, #111));
+  }
+
+  &-content {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--modal-width, 90vw);
+    max-width: var(--modal-max-width, 350px);
+    max-height: var(--modal-max-height, 85vh);
+    padding: var(--modal-padding, 0);
+    border-radius: var(--modal-border-radius, 10px);
+    box-shadow: var(--modal-box-shadow, 0 0 4px rgba(0, 0, 0, 0.5));
+    background-color: var(--modal-bg-color, var(--bg-primary-color));
+    transition:
+      background-color var(--transition-speed-sm),
+      color var(--transition-speed-sm);
+
+    &[data-state="open"] {
+      animation-name: contentShow;
+    }
+
+    &[data-state="closed"] {
+      animation-name: contentHide;
+    }
+
+    &--fullscreen {
+      max-width: 100%;
+      max-height: 100%;
+      width: 100%;
+      height: 100%;
+      border-radius: 0 !important;
+    }
+
+    &--none-radius {
+      border-radius: 0;
+    }
+
+    &--small-radius {
+      border-radius: var(--modal-border-radius-sm, 5px);
+    }
+
+    &--medium-radius {
+      border-radius: var(--modal-border-radius-sm, 15px);
+    }
+
+    &--large-radius {
+      border-radius: var(--modal-border-radius-sm, 20px);
+    }
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-close {
+    position: absolute !important;
+    top: var(--modal-close-offset, 5px);
+
+    @include dir.ltr {
+      right: var(--modal-close-offset, 5px);
+    }
+
+    @include dir.rtl {
+      left: var(--modal-close-offset, 5px);
+    }
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(var(--modal-animation-content-scale, 0.96));
+  }
+}

package/src/components/Odometer/Odometer.stories.tsx

@@ -0,0 +1,66 @@
+import {useEffect, useState} from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import OdometerComponent from "./Odometer";
+
+const meta: Meta<typeof OdometerComponent> = {
+    title: "Components/Odometer",
+    component: OdometerComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        value: {
+            description: "The number to display on the odometer.",
+            control: {type: "number"},
+        },
+        format: {
+            description: "Formatting string for odometer value.",
+            control: {type: "text"},
+        },
+        duration: {
+            description: "Animation duration in milliseconds.",
+            control: {type: "number"},
+        },
+        auto: hideInTable,
+        className: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Odometer: StoryObj<typeof OdometerComponent> = {
+    args: {
+        value: 1234,
+        duration: 500,
+        format: "d",
+    },
+};
+
+export const OdometerCount = () => {
+    const [value, setValue] = useState(100);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setValue(prev => ++prev);
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return <OdometerComponent value={value} />;
+};
+
+export const OdometerRandom = () => {
+    const [value, setValue] = useState(100);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setValue(prev => prev + Math.floor(Math.random() * 10) + 1);
+        }, 3000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return <OdometerComponent value={value} duration={1000} />;
+};

package/src/components/Odometer/Odometer.tsx

@@ -0,0 +1,45 @@
+import React, {FC, memo, useRef} from "react";
+
+import classNames from "classnames";
+
+import {useComponentProps} from "../../providers";
+
+import useOdometer, {OdometerOptions} from "./hooks/useOdometer";
+
+import styles from "./odometer.module.scss";
+
+export interface OdometerProps extends OdometerOptions {
+    value: number;
+    className?: string;
+}
+
+const Odometer: FC<OdometerProps> = props => {
+    const {
+        value,
+        auto = false,
+        format = "d",
+        duration = 250,
+        className,
+        ...other
+    } = {...useComponentProps("odometer"), ...props};
+
+    const targetRef = useRef(null);
+
+    useOdometer(targetRef, value, {
+        ...other,
+        auto,
+        format,
+        duration,
+    });
+
+    return (
+        <span
+            ref={targetRef}
+            dir="ltr"
+            style={{"--speed": `${duration}ms`} as React.CSSProperties}
+            className={classNames(styles["odometer"], className)}
+        />
+    );
+};
+
+export default memo(Odometer);

package/src/components/Odometer/hooks/useOdometer.tsx

@@ -0,0 +1,24 @@
+import {RefObject, useEffect, useRef} from "react";
+import Odometer from "odometer";
+
+export interface OdometerOptions {
+    auto?: boolean;
+    format?: string;
+    duration?: number;
+}
+
+export default (ref: RefObject<HTMLElement | null>, value: number, options: OdometerOptions = {}) => {
+    const od = useRef<Odometer | null>(null);
+
+    useEffect(() => {
+        if (ref.current === null) return;
+
+        od.current = new Odometer({...options, el: ref.current, value});
+    }, [ref, options, value]);
+
+    useEffect(() => {
+        od.current?.update(value);
+    }, [value]);
+
+    return od.current;
+};

package/src/components/Odometer/index.ts

@@ -0,0 +1,3 @@
+export {default as Odometer} from "./Odometer";
+export {default as useOdometer} from "./hooks/useOdometer";
+export type {OdometerProps} from "./Odometer";

package/src/components/Odometer/odometer.module.scss

@@ -0,0 +1,81 @@
+$root: odometer;
+
+.#{$root} {
+  display: inline-block;
+  position: relative;
+  color: var(--odometer-color, var(--text-primary-color));
+  font-family: var(--odometer-font-family, var(--font-family)), sans-serif;
+
+  &-digit {
+    display: inline-block;
+    position: relative;
+
+    &-spacer {
+      display: inline-block;
+      visibility: hidden;
+    }
+
+    &-inner {
+      text-align: left;
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+
+  &-ribbon {
+    display: block;
+
+    &-inner {
+      display: block;
+      -webkit-backface-visibility: hidden;
+
+      .#{$root}-animating-up & {
+        transition: transform var(--speed);
+      }
+
+      .#{$root}-animating-up.#{$root}-animating & {
+        transform: translateY(-100%);
+      }
+
+      .#{$root}-animating-down & {
+        transform: translateY(-100%);
+      }
+
+      .#{$root}-animating-down.#{$root}-animating & {
+        transition: transform var(--speed);
+        transform: translateY(0);
+      }
+    }
+  }
+
+  &-value {
+    display: block;
+    text-align: center;
+    transform: translateZ(0);
+  }
+
+  &-last-value {
+    position: absolute;
+  }
+
+  &-inside {
+    transition:
+      all var(--speed),
+      color var(--transition-speed-sm);
+
+    &:before {
+      content: "";
+      width: 0;
+      display: inline-block;
+      color: inherit;
+      transition:
+        all var(--speed),
+        color var(--transition-speed-sm);
+    }
+  }
+}

package/src/components/Odometer/odometr.d.ts

@@ -0,0 +1,9 @@
+declare module "odometer" {
+    class Odometer {
+        constructor(options: {el: HTMLElement; auto?: boolean; value?: number; format?: string; duration?: number});
+
+        update(value: number): void;
+    }
+
+    export default Odometer;
+}

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,58 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import ScrollAreaComponent from "./ScrollArea";
+
+const meta: Meta<typeof ScrollAreaComponent> = {
+    title: "Components/ScrollArea",
+    component: ScrollAreaComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            description:
+                "Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.",
+            options: ["auto", "always", "scroll", "hover"],
+            control: {type: "select"},
+        },
+        scrollHideDelay: {
+            description:
+                'If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.',
+        },
+        dir: {
+            description:
+                "The reading direction of the scroll area. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.",
+            options: ["ltr", "rtl"],
+            control: {type: "select"},
+        },
+
+        style: hideInTable,
+        className: hideInTable,
+        thumbClassName: hideInTable,
+        cornerClassName: hideInTable,
+        viewportClassName: hideInTable,
+        scrollbarClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const ScrollArea: StoryObj<typeof ScrollAreaComponent> = {
+    args: {
+        type: "hover",
+        dir: "ltr",
+        xOffset: 3,
+        yOffset: 3,
+        scrollHideDelay: 600,
+        style: {
+            padding: "10px",
+            width: "300px",
+            height: "150px",
+            borderRadius: "10px",
+            color: "var(--text-secondary-color)",
+            background: "var(--bg-secondary-color)",
+        },
+        children:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, justo at congue malesuada, arcu elit malesuada eros, ut tempor justo libero a est. Donec sit amet tortor nec justo auctor sagittis. Suspendisse potenti. Fusce gravida, libero vel auctor pretium, odio risus vehicula nunc, et ultricies nunc arcu a neque. Aliquam erat volutpat. Morbi vulputate erat nec lectus vestibulum, at ullamcorper risus aliquet",
+    },
+};