adnbn-ui 0.0.1 → 0.1.0

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

package/src/components/Toast/toast.module.scss

@@ -0,0 +1,267 @@
+@use "../../styles/mixins" as dir;
+
+$root: toast;
+
+.#{$root} {
+  box-sizing: border-box;
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-template-areas: "title action" "description action";
+  grid-template-columns: auto max-content;
+  column-gap: var(--toast-gap, 15px);
+  background-color: var(--toast-bg-color, var(--bg-secondary-color));
+  border-radius: var(--toast-border-radius, 10px);
+  padding: var(--toast-padding, var(--side-padding-xs));
+
+  &[data-state="open"] {
+    &.#{$root}--top-left,
+    &.#{$root}--bottom-left {
+      animation: slideInLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+
+    &.#{$root}--top-right,
+    &.#{$root}--bottom-right {
+      animation: slideInRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+
+    &.#{$root}--top-center {
+      animation: slideInTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+
+    &.#{$root}--bottom-center {
+      animation: slideInBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+  }
+
+  &[data-state="closed"] {
+    animation: hide var(--toast-transition-speed, var(--transition-speed-md)) ease-in;
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x)) translateY(var(--radix-toast-swipe-move-y));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0) translateY(0);
+    transition: transform var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+  }
+
+  &[data-swipe="end"] {
+    &.#{$root}--top-left,
+    &.#{$root}--bottom-left {
+      animation: swipeOutLeft var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+    &.#{$root}--top-right,
+    &.#{$root}--bottom-right {
+      animation: swipeOutRight var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+
+    &.#{$root}--top-center {
+      animation: swipeOutTop var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+    &.#{$root}--bottom-center {
+      animation: swipeOutBottom var(--toast-transition-speed, var(--transition-speed-md)) ease-out;
+    }
+  }
+
+  &--none-radius {
+    border-radius: 0;
+  }
+  &--small-radius {
+    border-radius: var(--toast-border-radius, 6px);
+  }
+  &--medium-radius {
+    border-radius: var(--toast-border-radius, 15px);
+  }
+  &--large-radius {
+    border-radius: var(--toast-border-radius, 20px);
+  }
+
+  &--error-color {
+    background-color: var(--toast-error-bg-color, var(--error-color));
+  }
+
+  &--success-color {
+    background-color: var(--toast-success-bg-color, var(--success-color));
+  }
+
+  &__title,
+  &__description {
+    .#{$root}--error-color & {
+      color: var(--toast-error-text-color, white);
+    }
+    .#{$root}--success-color & {
+      color: var(--toast-success-text-color, white);
+    }
+  }
+
+  &__title {
+    grid-area: title;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: var(--text-primary-color);
+    font-size: 15px;
+  }
+
+  &__description {
+    grid-area: description;
+    margin: 0;
+    color: var(--text-secondary-color);
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  &__action {
+    grid-area: action;
+  }
+
+  &__close {
+    position: absolute !important;
+    top: var(--toast-close-offset, 5px);
+
+    @include dir.ltr {
+      right: var(--toast-close-offset, 5px);
+    }
+
+    @include dir.rtl {
+      left: var(--toast-close-offset, 5px);
+    }
+  }
+
+  &__viewport {
+    box-sizing: border-box;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-viewport-gap, 10px);
+    width: var(--toast-width, 300px);
+    padding: var(--toast-viewport-padding, var(--side-padding-xs));
+    max-width: 100vw;
+    margin: 0;
+    list-style: none;
+    z-index: 999999;
+    outline: none;
+
+    &:has(.#{$root}--full-width) {
+      width: 100%;
+    }
+
+    &:has(.#{$root}--sticky) {
+      padding: 0;
+    }
+
+    &:has(.#{$root}--top-center) {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:has(.#{$root}--top-left) {
+      top: 0;
+      left: 0;
+    }
+
+    &:has(.#{$root}--top-right) {
+      top: 0;
+      right: 0;
+    }
+
+    &:has(.#{$root}--bottom-right) {
+      bottom: 0;
+      right: 0;
+    }
+
+    &:has(.#{$root}--bottom-left) {
+      bottom: 0;
+      left: 0;
+    }
+
+    &:has(.#{$root}--bottom-center) {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@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: translateX(0);
+  }
+}
+
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes swipeOutRight {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes swipeOutLeft {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes swipeOutTop {
+  from {
+    transform: translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes swipeOutBottom {
+  from {
+    transform: translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateY(100%);
+  }
+}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,80 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Button} from "../index";
+
+import TooltipComponent from "./Tooltip";
+
+const meta: Meta<typeof TooltipComponent> = {
+    title: "Components/Tooltip",
+    component: TooltipComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        open: {
+            options: [true, false, undefined],
+            control: "select",
+            type: "boolean",
+            description: "The controlled open state of the tooltip. Must be used in conjunction with onOpenChange.",
+        },
+        side: {
+            options: ["top", "right", "bottom", "left"],
+            control: "select",
+            description:
+                "The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.",
+        },
+        align: {
+            options: ["start", "center", "end"],
+            control: "select",
+            description: "The preferred alignment against the trigger. May change when collisions occur.",
+        },
+        delayDuration: {
+            description:
+                "Override the duration given to the `Provider` to customise the open delay for a specific tooltip.",
+        },
+        arrowWidth: {
+            description: "The width of the arrow in pixels.",
+        },
+        arrowHeight: {
+            description: "The height of the arrow in pixels.",
+        },
+        arrowPadding: {
+            description:
+                "The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.",
+        },
+        alignOffset: {
+            description: 'An offset in pixels from the "start" or "end" alignment options.',
+        },
+        avoidCollisions: {
+            description:
+                "When true, overrides the side and align preferences to prevent collisions with boundary edges.",
+        },
+        matchTriggerWidth: {
+            description: "Whether to set the content width equal to the trigger width",
+        },
+
+        arrowClassName: hideInTable,
+        contentClassName: hideInTable,
+        children: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Tooltip: StoryObj<typeof TooltipComponent> = {
+    args: {
+        content: "Tooltip content",
+        open: undefined,
+        align: "center",
+        alignOffset: 0,
+        side: "top",
+        sideOffset: 0,
+        arrowHeight: 5,
+        arrowWidth: 10,
+        arrowPadding: 0,
+        delayDuration: 700,
+        matchTriggerWidth: false,
+        avoidCollisions: true,
+        children: <Button style={{marginTop: "40px"}}>Button</Button>,
+    },
+};