adnbn-ui 0.0.1 → 0.0.2

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

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,79 @@
+import React, {FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+import {
+    Arrow,
+    Content,
+    Portal,
+    Provider,
+    Root,
+    TooltipContentProps,
+    TooltipProps as TooltipRootProps,
+    Trigger,
+} from "@radix-ui/react-tooltip";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./tooltip.module.scss";
+
+export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, "content"> {
+    content: ReactNode;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    matchTriggerWidth?: boolean;
+    arrowClassName?: string;
+    contentClassName?: string;
+}
+
+const Tooltip: FC<TooltipProps> = props => {
+    const {
+        open,
+        defaultOpen,
+        disableHoverableContent,
+        delayDuration,
+        onOpenChange,
+
+        arrowWidth,
+        arrowHeight,
+        matchTriggerWidth,
+        content,
+        arrowClassName,
+        contentClassName,
+        children,
+        ...other
+    } = {...useComponentProps("tooltip"), ...props};
+
+    return (
+        <Provider>
+            <Root
+                open={open}
+                defaultOpen={defaultOpen}
+                disableHoverableContent={disableHoverableContent}
+                onOpenChange={onOpenChange}
+                delayDuration={delayDuration}
+            >
+                <Trigger asChild>{children}</Trigger>
+                <Portal>
+                    <Content
+                        className={classnames(
+                            styles["tooltip-content"],
+                            {
+                                [styles["tooltip-content--trigger-width"]]: matchTriggerWidth,
+                            },
+                            contentClassName
+                        )}
+                        {...other}
+                    >
+                        {content}
+                        <Arrow
+                            width={arrowWidth}
+                            height={arrowHeight}
+                            className={classnames(styles["tooltip-arrow"], arrowClassName)}
+                        />
+                    </Content>
+                </Portal>
+            </Root>
+        </Provider>
+    );
+};
+
+export default memo(Tooltip);

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/tooltip.module.scss

@@ -0,0 +1,93 @@
+$root: tooltip;
+
+.#{$root} {
+  &-content {
+    box-sizing: border-box;
+    font-family: var(--tooltip-font-family, var(--font-family)), sans-serif;
+    font-weight: var(--tooltip-font-weight, 500);
+    font-size: var(--tooltip-font-size, var(--font-size, 14px));
+    color: var(--tooltip-color, var(--text-secondary-color));
+    background-color: var(--tooltip-bg-color, var(--bg-secondary-color));
+    border-radius: var(--tooltip-border-radius, 5px);
+    border-width: var(--tooltip-border-width, 1px);
+    border-color: var(--tooltip-border-color, var(--tooltip-bg-color, var(--bg-secondary-color)));
+    border-style: solid;
+    padding: var(--tooltip-padding, 7px 10px);
+    max-width: var(--tooltip-max-width, 300px);
+    word-wrap: break-word;
+    user-select: none;
+    animation-duration: var(--transition-speed-md);
+    will-change: transform, opacity;
+    box-shadow:
+      rgba(0, 6, 13, 0.35) 0 10px 38px -10px,
+      rgba(0, 6, 13, 0.2) 0px 10px 20px -15px;
+
+    &--trigger-width {
+      width: var(--radix-tooltip-trigger-width);
+    }
+
+    &[data-state="delayed-open"][data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-state="delayed-open"][data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-state="delayed-open"][data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-state="delayed-open"][data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+  &-arrow {
+    fill: var(--tooltip-bg-color, var(--bg-secondary-color));
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(var(--tooltip-slide-distance, 2px));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(calc(0px - var(--tooltip-slide-distance, 2px)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(calc(0px - var(--tooltip-slide-distance, 2px)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(var(--tooltip-slide-distance, 2px));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/src/components/View/View.stories.tsx

@@ -0,0 +1,47 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import ViewComponent from "./View";
+
+const meta: Meta<typeof ViewComponent> = {
+    title: "Components/View",
+    component: ViewComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        before: hideInTable,
+        after: hideInTable,
+        className: hideInTable,
+        wrapClassName: hideInTable,
+        titleClassName: hideInTable,
+        bodyClassName: hideInTable,
+        headerClassName: hideInTable,
+        beforeClassName: hideInTable,
+        afterClassName: hideInTable,
+        subtitleClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+    decorators: [
+        Story => (
+            <div
+                style={{background: "var(--bg-secondary-color", width: "380px", height: "400px", borderRadius: "10px"}}
+            >
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+export const View: StoryObj<typeof ViewComponent> = {
+    args: {
+        title: "Volume Up Plus",
+        subtitle: "Adjust the current tab's volume with the slider. Switch to any audio tab in one click.",
+        before: "❤️",
+        alignCenter: true,
+        center: true,
+        showSeparate: true,
+        children: "children",
+    },
+};

package/src/components/View/View.tsx

@@ -0,0 +1,68 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {Header, HeaderProps} from "../Header";
+
+import styles from "./view.module.scss";
+
+export interface ViewProps extends HeaderProps {
+    center?: boolean;
+    showSeparate?: boolean;
+    bodyClassName?: string;
+    headerClassName?: string;
+}
+
+export const viewPropsKeys = new Set<keyof ViewProps>([
+    // View keys
+    "center",
+    "showSeparate",
+    "bodyClassName",
+    "headerClassName",
+    "children",
+
+    // Header keys
+    "title",
+    "before",
+    "after",
+    "subtitle",
+    "wrapClassName",
+    "titleClassName",
+    "beforeClassName",
+    "afterClassName",
+    "subtitleClassName",
+    "alignCenter",
+]);
+
+const View: FC<ViewProps> = props => {
+    const {center, showSeparate, className, bodyClassName, headerClassName, children, ...other} = {
+        ...useComponentProps("view"),
+        ...props,
+    };
+
+    return (
+        <div
+            className={classnames(
+                styles["view"],
+                {
+                    [styles["view--center"]]: center,
+                },
+                className
+            )}
+        >
+            <Header
+                className={classnames(
+                    styles["view-header"],
+                    {
+                        [styles[`view-header--separate`]]: showSeparate,
+                    },
+                    headerClassName
+                )}
+                {...other}
+            />
+            <div className={classnames(styles["view-body"], bodyClassName)}>{children}</div>
+        </div>
+    );
+};
+
+export default memo(View);

package/src/components/View/index.ts

@@ -0,0 +1,2 @@
+export {default as View, viewPropsKeys} from "./View";
+export type {ViewProps} from "./View";

package/src/components/View/view.module.scss

@@ -0,0 +1,38 @@
+$root: view;
+
+.#{$root} {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  &-header {
+    padding-bottom: var(--view-header-padding-bottom, var(--header-padding, var(--side-padding-sm)));
+    justify-content: flex-end;
+
+    &__title {
+      color: var(--view-header-title-color, var(--text-primary-color));
+      font-family: var(--view-header-title-font-family, var(--font-family)), sans-serif;
+    }
+
+    &--separate {
+      border-bottom: var(--view-header-separate-width, 1px) solid
+        var(--view-header-separate-color, var(--separator-color));
+      justify-content: space-between;
+      will-change: border;
+      transition: border-bottom-color var(--transition-speed-sm);
+    }
+  }
+
+  &-body {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    .#{$root}--center & {
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}