adnbn-ui 0.0.1 → 0.1.0

package/src/components/Button/button.module.scss

@@ -0,0 +1,140 @@
+$root: button;
+
+.#{$root} {
+  font-family: var(--button-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, var(--font-size, 14px));
+  letter-spacing: var(--button-letter-spacing, 0.5px);
+  line-height: var(--button-line-height, var(--line-height, 14px));
+  height: var(--button-height, 34px);
+  border-radius: var(--button-border-radius, 10px);
+  padding: var(--button-padding, 0 16px);
+
+  &:active:not(:disabled) {
+    transform: scale(var(--button-scale, 0.98));
+  }
+
+  &:disabled {
+    opacity: var(--button-disabled-opacity, 0.75);
+    cursor: default;
+  }
+
+  // Variants
+  &--contained {
+    color: var(--button-contained-text-color, var(--bg-primary-color));
+    background: var(--button-contained-bg-color, var(--text-primary-color));
+
+    &.#{$root}--primary-color {
+      color: #fff;
+      background: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: #fff;
+      background: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: #fff;
+      background: var(--accent-color);
+    }
+  }
+
+  &--outlined {
+    color: var(--button-outlined-text-color, var(--text-primary-color));
+    border: 1px solid var(--button-outlined-border-color, var(--button-outlined-text-color, var(--text-primary-color)));
+    background: none;
+
+    &:hover {
+      background-color: var(--button-outlined-bg-color-hover);
+    }
+
+    &:active {
+      background-color: var(--button-outlined-bg-color-active);
+    }
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+      border-color: var(--button-outlined-border-primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+      border-color: var(--button-outlined-border-secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+      border-color: var(--button-outlined-border-accent-color);
+    }
+  }
+
+  &--text {
+    color: var(--button-text-text-color, var(--text-primary-color));
+    background-color: transparent;
+
+    &:hover {
+      color: var(--button-text-text-color-hover, var(--text-secondary-color));
+    }
+
+    &:active {
+      color: var(--button-text-text-color-active, var(--text-secondary-color));
+    }
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    height: var(--button-height-sm, 24px);
+    font-size: var(--button-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    height: var(--button-height-md, 44px);
+    font-size: var(--button-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    height: var(--button-height-lg, 54px);
+    min-width: 95px;
+    font-size: var(--button-font-size-sm, 18px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--button-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--button-border-radius-md, 12px);
+  }
+
+  &--large-radius {
+    border-radius: var(--button-border-radius-lg, 15px);
+  }
+
+  &--full-radius {
+    border-radius: var(--button-height, 999px);
+  }
+
+  &__text {
+    position: relative;
+    z-index: 3;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: var(--button-max-width, 160px);
+    line-height: initial;
+  }
+}

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export {default as Button, ButtonVariant, ButtonRadius, ButtonColor, ButtonSize} from "./Button";
+export type {ButtonProps} from "./Button";

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,180 @@
+import {useState} from "react";
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import CheckboxComponent, {CheckboxRadius, CheckboxSize, CheckboxVariant, CheckedState} from "./Checkbox";
+
+const variants: (CheckboxVariant | "default")[] = ["default", CheckboxVariant.Classic, CheckboxVariant.Soft];
+const size: (CheckboxSize | "default")[] = [CheckboxSize.Small, "default", CheckboxSize.Medium, CheckboxSize.Large];
+const radius: (CheckboxRadius | "default")[] = [CheckboxRadius.Small, "default", CheckboxRadius.Large];
+
+const meta: Meta<typeof CheckboxComponent> = {
+    title: "Components/Checkbox",
+    component: CheckboxComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        checked: {
+            options: [true, false, "indeterminate"],
+            control: {type: "select"},
+        },
+        variant: {
+            options: variants,
+            control: {type: "select"},
+        },
+        size: {
+            options: size,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+
+        checkedIcon: hideInTable,
+        indeterminateIcon: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+        indicatorClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Checkbox: StoryObj<typeof CheckboxComponent> = {
+    args: {
+        checked: true,
+        disabled: false,
+        variant: CheckboxVariant.Classic,
+    },
+};
+
+export const CheckboxClickable = () => {
+    const [checked, setChecked] = useState<CheckedState>("indeterminate");
+
+    return <CheckboxComponent variant={CheckboxVariant.Classic} checked={checked} onCheckedChange={setChecked} />;
+};
+
+export const Variant = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {variants.map(variant => (
+                <span key={variant} className="item-card__title">
+                    {capitalizeFirstLetter(variant)}
+                </span>
+            ))}
+
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <CheckboxComponent variant={variant !== "default" ? variant : undefined} checked={false} />
+                </div>
+            ))}
+
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <CheckboxComponent variant={variant !== "default" ? variant : undefined} checked={true} />
+                </div>
+            ))}
+
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <CheckboxComponent variant={variant !== "default" ? variant : undefined} checked="indeterminate" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantDisabled = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {variants.map(variant => (
+                <span key={variant} className="item-card__title">
+                    {capitalizeFirstLetter(variant)}
+                </span>
+            ))}
+
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <CheckboxComponent disabled variant={variant !== "default" ? variant : undefined} checked={false} />
+                </div>
+            ))}
+
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <CheckboxComponent disabled variant={variant !== "default" ? variant : undefined} checked={true} />
+                </div>
+            ))}
+
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <CheckboxComponent
+                        disabled
+                        variant={variant !== "default" ? variant : undefined}
+                        checked="indeterminate"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Size = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {size.map(size => (
+                <span key={size} className="item-card__title">
+                    {capitalizeFirstLetter(size)}
+                </span>
+            ))}
+
+            {size.map(size => (
+                <div key={size} className="item-card">
+                    <CheckboxComponent size={size !== "default" ? size : undefined} checked={false} />
+                </div>
+            ))}
+
+            {size.map(size => (
+                <div key={size} className="item-card">
+                    <CheckboxComponent size={size !== "default" ? size : undefined} checked={true} />
+                </div>
+            ))}
+
+            {size.map(size => (
+                <div key={size} className="item-card">
+                    <CheckboxComponent size={size !== "default" ? size : undefined} checked="indeterminate" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
+            {radius.map(radius => (
+                <span key={radius} className="item-card__title">
+                    {capitalizeFirstLetter(radius)}
+                </span>
+            ))}
+
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <CheckboxComponent radius={radius !== "default" ? radius : undefined} checked={false} />
+                </div>
+            ))}
+
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <CheckboxComponent radius={radius !== "default" ? radius : undefined} checked={true} />
+                </div>
+            ))}
+
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <CheckboxComponent radius={radius !== "default" ? radius : undefined} checked="indeterminate" />
+                </div>
+            ))}
+        </div>
+    );
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,71 @@
+import React, {FC, memo, ReactElement} from "react";
+import classnames from "classnames";
+import {CheckboxProps as CheckboxRootProps, Indicator, Root} from "@radix-ui/react-checkbox";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./checkbox.module.scss";
+
+export type {CheckedState} from "@radix-ui/react-checkbox";
+
+export enum CheckboxVariant {
+    Classic = "classic",
+    Soft = "soft",
+}
+
+export enum CheckboxSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum CheckboxRadius {
+    Small = "small",
+    Large = "large",
+}
+
+export interface CheckboxProps extends CheckboxRootProps {
+    indicatorClassName?: string;
+    size?: CheckboxSize;
+    radius?: CheckboxRadius;
+    variant?: CheckboxVariant;
+    checkedIcon?: ReactElement;
+    indeterminateIcon?: ReactElement;
+}
+
+const Checkbox: FC<CheckboxProps> = props => {
+    const {
+        checked,
+        size,
+        radius,
+        variant,
+        className,
+        indicatorClassName,
+        checkedIcon = "✔",
+        indeterminateIcon = "―",
+        ...other
+    } = {...useComponentProps("checkbox"), ...props};
+
+    return (
+        <Root
+            {...other}
+            checked={checked}
+            className={classnames(
+                styles["checkbox"],
+                {
+                    [styles[`checkbox--${variant}`]]: variant,
+                    [styles[`checkbox--${radius}-radius`]]: radius,
+                    [styles[`checkbox--${size}-size`]]: size,
+                },
+                className
+            )}
+        >
+            <Indicator className={classnames(styles["checkbox__indicator"], indicatorClassName)}>
+                {checked === "indeterminate" && indeterminateIcon}
+                {checked === true && checkedIcon}
+            </Indicator>
+        </Root>
+    );
+};
+
+export default memo(Checkbox);

package/src/components/Checkbox/checkbox.module.scss

@@ -0,0 +1,82 @@
+$root: checkbox;
+
+.#{$root} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 2px;
+  width: var(--checkbox-size, 18px);
+  height: var(--checkbox-size, 18px);
+  border-radius: var(--checkbox-border-radius, 4px);
+  color: var(--checkbox-color, #333);
+  border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color, #999);
+  will-change: background, color;
+  transition:
+    background var(--transition-speed-sm),
+    color var(--transition-speed-sm);
+
+  &:disabled {
+    opacity: var(--checkbox-disabled-opacity, 0.6);
+    cursor: default;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(var(--checkbox-scale, 0.98));
+  }
+
+  //Variants
+  &--classic {
+    color: var(--checkbox-classic-color, white);
+    background: var(--checkbox-classic-bg-color);
+    border: var(--checkbox-classic-border-width, 1px) solid var(--checkbox-classic-border-color, #999);
+
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
+      background: var(--checkbox-checked-bg-color, var(--primary-color));
+      border: none;
+    }
+  }
+
+  &--soft {
+    color: var(--checkbox-soft-color, white);
+    background: var(--checkbox-soft-bg-color, var(--secondary-color));
+    border: none;
+  }
+
+  //sizes
+  &--small-size {
+    width: var(--checkbox-size-sm, 16px);
+    height: var(--checkbox-size-sm, 16px);
+  }
+
+  &--medium-size {
+    width: var(--checkbox-size-md, 20px);
+    height: var(--checkbox-size-md, 20px);
+  }
+
+  &--large-size {
+    width: var(--checkbox-size-lg, 22px);
+    height: var(--checkbox-size-lg, 22px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--checkbox-border-radius-sm, 2px);
+  }
+
+  &--large-radius {
+    border-radius: var(--checkbox-border-radius-lg, 6px);
+  }
+
+  &__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export {default as Checkbox, CheckboxVariant, CheckboxSize, CheckboxRadius} from "./Checkbox";
+export type {CheckboxProps, CheckedState} from "./Checkbox";

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,125 @@
+import React, {FC, memo, useEffect, useRef} from "react";
+import classnames from "classnames";
+import {
+    Content,
+    Description,
+    DialogContentProps,
+    DialogPortalProps,
+    DialogProps as DialogRootProps,
+    Overlay,
+    Portal,
+    Root,
+    Title,
+} from "@radix-ui/react-dialog";
+import {VisuallyHidden} from "radix-ui";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import styles from "./dialog.module.scss";
+
+export interface DialogProps extends DialogRootProps, DialogPortalProps, DialogContentProps {
+    speed?: number;
+    description?: string;
+    fullscreen?: boolean;
+    className?: string;
+    overlayClassName?: string;
+    childrenClassName?: string;
+}
+
+export const dialogPropsKeys = new Set<keyof DialogProps>([
+    // Dialog keys
+    "speed",
+    "description",
+    "fullscreen",
+    "className",
+    "overlayClassName",
+    "childrenClassName",
+
+    // Extended Dialog keys
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "modal",
+    "container",
+    "title",
+]);
+
+const Dialog: FC<DialogProps> = props => {
+    const {
+        speed = 200,
+        open,
+        defaultOpen,
+        onOpenChange,
+        modal,
+        children,
+        container,
+        title,
+        description,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("dialog"), ...props};
+
+    const timeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const intervalId = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+    useEffect(() => {
+        clearInterval(intervalId.current);
+        clearTimeout(timeoutId.current);
+
+        if (open) {
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            document.body.style.overflow = "hidden";
+            document.body.style.boxSizing = "border-box";
+            document.body.style.setProperty("padding-right", `${scrollbarWidth}px`, "important");
+        } else {
+            intervalId.current = setInterval(() => {
+                const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+                if (scrollbarWidth) {
+                    document.body.style.overflow = "";
+                    document.body.style.paddingRight = "";
+                    clearInterval(intervalId.current);
+                }
+            }, 10);
+
+            timeoutId.current = setTimeout(() => {
+                clearInterval(intervalId.current);
+            }, speed + 100);
+        }
+
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [open, speed]);
+
+    return (
+        <Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
+            <Portal container={container}>
+                <Overlay
+                    className={classnames(styles["dialog-overlay"], overlayClassName)}
+                    style={{animationDuration: `${speed}ms`}}
+                />
+                <Content
+                    className={classnames(styles["dialog-content"], className)}
+                    style={{animationDuration: `${speed}ms`}}
+                    {...other}
+                >
+                    <VisuallyHidden.Root>
+                        <Title>{title}</Title>
+                        <Description>{description}</Description>
+                    </VisuallyHidden.Root>
+
+                    {cloneOrCreateElement(
+                        children,
+                        {className: classnames(styles["dialog-children"], childrenClassName)},
+                        "div"
+                    )}
+                </Content>
+            </Portal>
+        </Root>
+    );
+};
+
+export default memo(Dialog);

package/src/components/Dialog/dialog.module.scss

@@ -0,0 +1,55 @@
+$root: dialog;
+
+.#{$root} {
+  &-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background-color: var(--dialog-overlay-bg-color, #111);
+    opacity: var(--dialog-animation-overlay-opacity, 0.9);
+    animation-timing-function: ease-in-out;
+
+    &[data-state="open"] {
+      animation-name: overlayShow;
+    }
+
+    &[data-state="closed"] {
+      animation-name: overlayHide;
+    }
+  }
+
+  &-content {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 9999;
+    transition:
+      background-color var(--transition-speed-sm),
+      color var(--transition-speed-sm);
+    animation-timing-function: ease-in-out;
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--dialog-animation-overlay-opacity, 0.9);
+  }
+}
+
+@keyframes overlayHide {
+  from {
+    opacity: var(--dialog-animation-overlay-opacity, 0.9);
+  }
+  to {
+    opacity: 0;
+  }
+}

package/src/components/Dialog/index.ts

@@ -0,0 +1,2 @@
+export {default as Dialog, dialogPropsKeys} from "./Dialog";
+export type {DialogProps} from "./Dialog";