adnbn-ui 0.0.1 → 0.0.2

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";

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,89 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import {Button, List, ListItem} from "../index";
+
+import DrawerComponent, {DrawerProps, DrawerSide} from "./Drawer";
+
+const sides: DrawerSide[] = [DrawerSide.Left, DrawerSide.Top, DrawerSide.Bottom, DrawerSide.Right];
+const items = [
+    {title: "Profile", icon: "👤"},
+    {title: "Messages", icon: "✉️"},
+    {title: "Notifications", icon: "🔔"},
+    {title: "Setting", icon: "⚙️"},
+    {title: "Help", icon: "❓"},
+    {title: "Logout", icon: "🚪"},
+];
+
+const meta: Meta<typeof DrawerComponent> = {
+    title: "Components/Drawer",
+    component: DrawerComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        side: {
+            options: sides,
+            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",
+        },
+        speed: {
+            type: "number",
+        },
+        className: hideInTable,
+        description: hideInTable,
+        overlayClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Drawer = (props: DrawerProps & {label?: string}) => {
+    const [open, setOpen] = useState(false);
+    const {label = "Open Drawer", ...other} = props;
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>{label}</Button>
+            <DrawerComponent open={open} onOpenChange={setOpen} {...other}>
+                <div
+                    style={{
+                        boxSizing: "border-box",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        height: "100%",
+                        gap: "30px",
+                        padding: "20px",
+                    }}
+                >
+                    <List style={{display: "flex", flexDirection: "column", gap: "15px", overflow: "auto"}}>
+                        {items.map(({icon, title}) => (
+                            <ListItem left={icon} primary={title} />
+                        ))}
+                    </List>
+                    <Button onClick={() => setOpen(false)} style={{width: "auto"}}>
+                        Close
+                    </Button>
+                </div>
+            </DrawerComponent>
+        </div>
+    );
+};
+
+export const Side = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sides.map(side => (
+                <div key={side} className="item-card">
+                    <Drawer side={side} label={`${capitalizeFirstLetter(side)} side`} />
+                </div>
+            ))}
+        </div>
+    );
+};

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,57 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
+
+import styles from "./drawer.module.scss";
+
+export enum DrawerSide {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom",
+}
+
+export interface DrawerProps extends DialogProps {
+    side?: DrawerSide;
+}
+
+export const drawerPropsKeys = new Set<keyof DrawerProps>(["side", ...dialogPropsKeys]);
+
+const Drawer: FC<DrawerProps> = props => {
+    const {
+        side = DrawerSide.Left,
+        fullscreen,
+        children,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("drawer"), ...props};
+
+    return (
+        <Dialog
+            {...other}
+            overlayClassName={classnames(styles["drawer-overlay"], overlayClassName)}
+            className={classnames(
+                styles["drawer-content"],
+                {
+                    [styles["drawer-content--fullscreen"]]: fullscreen,
+                    [styles[`drawer-content--${side}-side`]]: side,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["drawer-children"], childrenClassName)},
+                "div"
+            )}
+        </Dialog>
+    );
+};
+
+export default memo(Drawer);

package/src/components/Drawer/drawer.module.scss

@@ -0,0 +1,170 @@
+$root: drawer;
+
+.#{$root} {
+  &-overlay {
+    background-color: var(--drawer-overlay-bg-color, var(--dialog-overlay-bg-color, #111));
+  }
+
+  &-content {
+    padding: var(--drawer-padding, 0);
+    box-shadow: var(--drawer-box-shadow, 0 0 4px rgba(0, 0, 0, 0.5));
+    background-color: var(--drawer-bg-color, var(--bg-secondary-color));
+
+    &[data-state="open"] {
+      &.#{$root}-content--left-side {
+        animation-name: slideInLeft;
+      }
+
+      &.#{$root}-content--right-side {
+        animation-name: slideInRight;
+      }
+
+      &.#{$root}-content--top-side {
+        animation-name: slideInTop;
+      }
+
+      &.#{$root}-content--bottom-side {
+        animation-name: slideInBottom;
+      }
+    }
+
+    &[data-state="closed"] {
+      &.#{$root}-content--left-side {
+        animation-name: slideOutLeft;
+      }
+
+      &.#{$root}-content--right-side {
+        animation-name: slideOutRight;
+      }
+
+      &.#{$root}-content--top-side {
+        animation-name: slideOutTop;
+      }
+
+      &.#{$root}-content--bottom-side {
+        animation-name: slideOutBottom;
+      }
+    }
+
+    &--left-side {
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: var(--drawer-width, 90vw);
+
+      &.#{$root}-content--fullscreen {
+        width: 100%;
+      }
+    }
+
+    &--right-side {
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: var(--drawer-width, 90vw);
+
+      &.#{$root}-content--fullscreen {
+        width: 100%;
+      }
+    }
+
+    &--top-side {
+      top: 0;
+      left: 0;
+      right: 0;
+      height: var(--drawer-height, 90vh);
+
+      &.#{$root}-content--fullscreen {
+        height: 100%;
+      }
+    }
+
+    &--bottom-side {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: var(--drawer-height, 90vh);
+
+      &.#{$root}-content--fullscreen {
+        height: 100%;
+      }
+    }
+  }
+
+  &-children {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideOutTop {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slideOutBottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}

package/src/components/Drawer/index.ts

@@ -0,0 +1,2 @@
+export {default as Drawer, DrawerSide, drawerPropsKeys} from "./Drawer";
+export type {DrawerProps} from "./Drawer";

package/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,118 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {IconButton, IconButtonSize, IconButtonVariant} from "../index";
+
+import FooterComponent from "./Footer";
+
+const meta: Meta<typeof FooterComponent> = {
+    title: "Components/Footer",
+    component: FooterComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        left: hideInTable,
+        right: hideInTable,
+        style: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+        leftClassName: hideInTable,
+        rightClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+    decorators: [
+        Story => (
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    background: "var(--bg-secondary-color",
+                    width: "380px",
+                    height: "300px",
+                    borderRadius: "10px",
+                }}
+            >
+                <span style={{flexGrow: 1}} />
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+export const Footer: StoryObj<typeof FooterComponent> = {
+    args: {
+        shadow: true,
+        reverse: false,
+        style: {paddingTop: "20px"},
+        children: (
+            <div>
+                <div style={{display: "flex", gap: "20px"}}>
+                    <IconButton style={{fontSize: "20px"}} tooltip={{content: "Change theme"}}>
+                        🌓
+                    </IconButton>
+                    <IconButton style={{fontSize: "20px"}} tooltip={{content: "Rate Us"}}>
+                        ❤️
+                    </IconButton>
+                </div>
+                <div style={{display: "flex", gap: "20px"}}>
+                    <IconButton style={{fontSize: "20px"}} tooltip={{content: "Support Us"}}>
+                        💲
+                    </IconButton>
+                    <IconButton style={{fontSize: "20px"}} tooltip={{content: "FAQ"}}>
+                        ❓
+                    </IconButton>
+                </div>
+            </div>
+        ),
+    },
+};
+
+export const FooterWithoutChildren: StoryObj<typeof FooterComponent> = {
+    args: {
+        shadow: true,
+        reverse: false,
+        style: {paddingTop: "20px"},
+        left: (
+            <div>
+                <IconButton
+                    variant={IconButtonVariant.Contained}
+                    size={IconButtonSize.Medium}
+                    style={{fontSize: "20px"}}
+                    tooltip={{content: "Change theme"}}
+                >
+                    🌓
+                </IconButton>
+                <IconButton
+                    variant={IconButtonVariant.Contained}
+                    size={IconButtonSize.Medium}
+                    style={{fontSize: "20px"}}
+                    tooltip={{content: "Rate Us"}}
+                >
+                    ❤️
+                </IconButton>
+            </div>
+        ),
+        right: (
+            <div>
+                <IconButton
+                    variant={IconButtonVariant.Ghost}
+                    size={IconButtonSize.Medium}
+                    style={{fontSize: "20px"}}
+                    tooltip={{content: "Support Us"}}
+                >
+                    💲
+                </IconButton>
+                <IconButton
+                    variant={IconButtonVariant.Ghost}
+                    size={IconButtonSize.Medium}
+                    style={{fontSize: "20px"}}
+                    tooltip={{content: "FAQ"}}
+                >
+                    ❓
+                </IconButton>
+            </div>
+        ),
+    },
+};