adnbn-ui 0.0.1 → 0.1.0

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

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,63 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import {
+    Corner,
+    Root,
+    ScrollAreaProps as ScrollAreaRootProps,
+    Scrollbar,
+    Thumb,
+    Viewport,
+} from "@radix-ui/react-scroll-area";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./scroll-area.module.scss";
+
+export interface ScrollAreaProps extends ScrollAreaRootProps {
+    xOffset?: number;
+    yOffset?: number;
+    thumbClassName?: string;
+    cornerClassName?: string;
+    viewportClassName?: string;
+    scrollbarClassName?: string;
+}
+
+const ScrollArea: FC<ScrollAreaProps> = props => {
+    const {
+        xOffset,
+        yOffset,
+        children,
+        className,
+        thumbClassName,
+        cornerClassName,
+        viewportClassName,
+        scrollbarClassName,
+        ...other
+    } = {...useComponentProps("scrollArea"), ...props};
+
+    return (
+        <Root className={classnames(styles["scroll-area"], className)} {...other}>
+            <Viewport className={classnames(styles["scroll-area__viewport"], viewportClassName)}>{children}</Viewport>
+
+            <Scrollbar
+                orientation="vertical"
+                style={{padding: `0 ${xOffset}px`}}
+                className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
+            >
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+            </Scrollbar>
+
+            <Scrollbar
+                orientation="horizontal"
+                style={{padding: `${yOffset}px 0`}}
+                className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
+            >
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+            </Scrollbar>
+
+            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)} />
+        </Root>
+    );
+};
+
+export default memo(ScrollArea);

package/src/components/ScrollArea/index.ts

@@ -0,0 +1,2 @@
+export {default as ScrollArea} from "./ScrollArea";
+export type {ScrollAreaProps} from "./ScrollArea";

package/src/components/ScrollArea/scroll-area.module.scss

@@ -0,0 +1,54 @@
+$root: scroll-area;
+
+.#{$root} {
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &__viewport {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__scrollbar {
+    display: flex;
+    user-select: none;
+    touch-action: none;
+    padding: var(--scroll-area-scrollbar-padding, 3px);
+    background: var(--scroll-area-scrollbar-bg-color, transparent);
+    transition: background var(--transition-speed-sm) ease-in-out;
+
+    &:hover {
+      background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--scroll-area-scrollbar-size, 9px);
+      padding: 0 var(--scroll-area-scrollbar-offset, var(--scroll-area-scrollbar-x-offset, 2px));
+    }
+
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+      height: var(--scroll-area-scrollbar-size, 9px);
+      padding: var(--scroll-area-scrollbar-offset, var(--scroll-area-scrollbar-y-offset, 2px)) 0;
+    }
+  }
+
+  &__thumb {
+    flex: 1;
+    position: relative;
+    background: var(--scroll-area-thumb-bg-color);
+    border-radius: var(--scroll-area-thumb-border-radius, 100px);
+
+    &:hover {
+      background: var(--scroll-area-thumb-bg-color-hover, var(--scroll-area-thumb-bg-color));
+    }
+  }
+
+  &__corner {
+    background: var(--scroll-area-scrollbar-bg-color, transparent);
+
+    &:hover {
+      background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
+    }
+  }
+}

package/src/components/SvgSprite/SvgSprite.tsx

@@ -0,0 +1,21 @@
+import React, {ComponentProps, FC, memo} from "react";
+
+export interface SvgSpriteProps {
+    icons: Record<string, FC<ComponentProps<"svg">>>;
+}
+
+const SvgSprite: FC<SvgSpriteProps> = ({icons}) => {
+    return (
+        <svg style={{display: "none"}} aria-hidden="true">
+            <defs>
+                {Object.entries(icons).map(([name, Icon]) => (
+                    <symbol id={name} key={name} viewBox="0 0 24 24">
+                        <Icon />
+                    </symbol>
+                ))}
+            </defs>
+        </svg>
+    );
+};
+
+export default memo(SvgSprite);

package/src/components/SvgSprite/index.ts

@@ -0,0 +1,2 @@
+export {default as SvgSprite} from "./SvgSprite";
+export type {SvgSpriteProps} from "./SvgSprite";

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,25 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import SwitchComponent from "./Switch";
+
+const meta: Meta<typeof SwitchComponent> = {
+    title: "Components/Switch",
+    component: SwitchComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        children: hideInTable,
+        className: hideInTable,
+        thumbClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Switch: StoryObj<typeof SwitchComponent> = {
+    args: {
+        checked: true,
+        disabled: false,
+    },
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,23 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import {Root, SwitchProps as SwitchRootProps, Thumb} from "@radix-ui/react-switch";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./switch.module.scss";
+
+export interface SwitchProps extends SwitchRootProps {
+    thumbClassName?: string;
+}
+
+const Switch: FC<SwitchProps> = props => {
+    const {className, thumbClassName, ...other} = {...useComponentProps("switch"), ...props};
+
+    return (
+        <Root {...other} className={classnames(styles["switch"], className)}>
+            <Thumb className={classnames(styles["switch__thumb"], thumbClassName)} />
+        </Root>
+    );
+};
+
+export default memo(Switch);

package/src/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export {default as Switch} from "./Switch";
+export type {SwitchProps} from "./Switch";

package/src/components/Switch/switch.module.scss

@@ -0,0 +1,65 @@
+@use "../../styles/mixins" as dir;
+
+@function switch-width() {
+  @return var(--switch-width, 36px);
+}
+
+@function switch-height() {
+  @return var(--switch-height, 22px);
+}
+
+@function switch-thumb-width() {
+  @return var(--switch-thumb-width, 18px);
+}
+
+@function switch-thumb-height() {
+  @return var(--switch-thumb-height, 18px);
+}
+
+$root: switch;
+
+.#{$root} {
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  width: switch-width();
+  height: switch-height();
+  border-radius: var(--switch-border-radius, 9999px);
+  background: var(--switch-bg-color, #bbb);
+  will-change: background;
+  transition: background var(--transition-speed-sm);
+
+  &[data-state="checked"] {
+    background-color: var(--switch-cheked-bg-color, var(--primary-color));
+  }
+
+  &:disabled {
+    opacity: var(--switch-disabled-opacity, 0.6);
+    cursor: default;
+  }
+
+  &__thumb {
+    box-sizing: border-box;
+    display: block;
+    width: switch-thumb-width();
+    height: switch-thumb-height();
+    transform: translateX(calc((#{switch-height()} - #{switch-thumb-height()}) / 2));
+    background-color: var(--switch-thumb-bg-color, white);
+    border-radius: var(--switch-border-radius, 9999px);
+    will-change: transform;
+    transition: transform var(--transition-speed-sm) ease-in-out;
+
+    @include dir.rtl {
+      margin-right: calc(#{switch-width()} / 2);
+    }
+
+    &[data-state="checked"] {
+      transform: translateX(
+        calc(#{switch-width()} - #{switch-thumb-width()} - (#{switch-height()} - #{switch-thumb-height()}) / 2)
+      );
+    }
+  }
+}