adnbn-ui 0.0.1 → 0.1.0

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

package/src/components/ViewDrawer/ViewDrawer.stories.tsx

@@ -0,0 +1,75 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Button, DrawerSide} from "../index";
+
+import ViewDrawerComponent, {ViewDrawerProps} from "./ViewDrawer";
+
+const sides: DrawerSide[] = [DrawerSide.Left, DrawerSide.Top, DrawerSide.Bottom, DrawerSide.Right];
+
+const meta: Meta<typeof ViewDrawerComponent> = {
+    title: "Components/ViewDrawer",
+    component: ViewDrawerComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        side: {
+            options: sides,
+            control: {type: "select"},
+        },
+        title: {
+            type: "string",
+        },
+        subtitle: {
+            type: "string",
+        },
+        after: {
+            type: "string",
+        },
+        before: {
+            type: "string",
+        },
+        fullscreen: {
+            type: "boolean",
+        },
+        speed: {
+            type: "number",
+        },
+        children: hideInTable,
+        className: hideInTable,
+        wrapClassName: hideInTable,
+        titleClassName: hideInTable,
+        bodyClassName: hideInTable,
+        headerClassName: hideInTable,
+        beforeClassName: hideInTable,
+        afterClassName: hideInTable,
+        subtitleClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const ViewDrawer = (props: ViewDrawerProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>Open</Button>
+            <ViewDrawerComponent
+                open={open}
+                onOpenChange={setOpen}
+                title="Volume Up Plus"
+                side={DrawerSide.Right}
+                fullscreen={false}
+                subtitle="Adjust the current tab's volume with the slider. Switch to any audio tab in one click."
+                after="❤️"
+                {...props}
+            >
+                <Button style={{margin: "50px auto", maxWidth: "max-content"}} onClick={() => setOpen(false)}>
+                    Close ViewDrawer
+                </Button>
+            </ViewDrawerComponent>
+        </div>
+    );
+};

package/src/components/ViewDrawer/ViewDrawer.tsx

@@ -0,0 +1,24 @@
+import React, {FC, memo} from "react";
+
+import {splitProps} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {Drawer, DrawerProps, drawerPropsKeys} from "../Drawer";
+import {View, ViewProps, viewPropsKeys} from "../View";
+
+export type ViewDrawerProps = Omit<DrawerProps, "title"> & ViewProps;
+
+const ViewDrawer: FC<ViewDrawerProps> = props => {
+    const mergedProps = {...useComponentProps("viewDrawer"), ...props};
+
+    const drawerProps = splitProps<DrawerProps>(mergedProps, drawerPropsKeys);
+    const viewProps = splitProps<ViewProps>(mergedProps, viewPropsKeys);
+
+    return (
+        <Drawer {...drawerProps}>
+            <View {...viewProps} />
+        </Drawer>
+    );
+};
+
+export default memo(ViewDrawer);

package/src/components/ViewDrawer/index.ts

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

package/src/components/ViewModal/ViewModal.stories.tsx

@@ -0,0 +1,68 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Button} from "../index";
+
+import ViewModalComponent, {ViewModalProps} from "./ViewModal";
+
+const meta: Meta<typeof ViewModalComponent> = {
+    title: "Components/ViewModal",
+    component: ViewModalComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        title: {
+            type: "string",
+        },
+        subtitle: {
+            type: "string",
+        },
+        after: {
+            type: "string",
+        },
+        before: {
+            type: "string",
+        },
+        fullscreen: {
+            type: "boolean",
+        },
+        speed: {
+            type: "number",
+        },
+        children: hideInTable,
+        className: hideInTable,
+        wrapClassName: hideInTable,
+        titleClassName: hideInTable,
+        bodyClassName: hideInTable,
+        headerClassName: hideInTable,
+        beforeClassName: hideInTable,
+        afterClassName: hideInTable,
+        subtitleClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const ViewModal = (props: ViewModalProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>Open</Button>
+            <ViewModalComponent
+                open={open}
+                onOpenChange={setOpen}
+                title="Volume Up Plus"
+                fullscreen={false}
+                subtitle="Adjust the current tab's volume with the slider. Switch to any audio tab in one click."
+                after="❤️"
+                {...props}
+            >
+                <Button style={{margin: "50px auto", maxWidth: "max-content"}} onClick={() => setOpen(false)}>
+                    Close ViewModal
+                </Button>
+            </ViewModalComponent>
+        </div>
+    );
+};

package/src/components/ViewModal/ViewModal.tsx

@@ -0,0 +1,24 @@
+import React, {FC, memo} from "react";
+
+import {splitProps} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import {Modal, ModalProps, modalPropsKeys} from "../Modal";
+import {View, ViewProps, viewPropsKeys} from "../View";
+
+export type ViewModalProps = Omit<ModalProps, "title"> & ViewProps;
+
+const ViewModal: FC<ViewModalProps> = props => {
+    const mergedProps = {...useComponentProps("viewModal"), ...props};
+
+    const modalProps = splitProps<ModalProps>(mergedProps, modalPropsKeys);
+    const viewProps = splitProps<ViewProps>(mergedProps, viewPropsKeys);
+
+    return (
+        <Modal {...modalProps}>
+            <View {...viewProps} />
+        </Modal>
+    );
+};
+
+export default memo(ViewModal);

package/src/components/ViewModal/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,29 @@
+export * from "./Avatar";
+export * from "./BaseButton";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./Footer";
+export * from "./Header";
+export * from "./Highlight";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./Layout";
+export * from "./List";
+export * from "./ListItem";
+export * from "./Modal";
+export * from "./Odometer";
+export * from "./ScrollArea";
+export * from "./SvgSprite";
+export * from "./Switch";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./View";
+export * from "./ViewDrawer";
+export * from "./ViewModal";
+
+export type {ComponentsProps} from "./types";

package/src/components/types.ts

@@ -0,0 +1,65 @@
+import type {
+    AvatarProps,
+    ButtonProps,
+    CheckboxProps,
+    DialogProps,
+    DrawerProps,
+    FooterProps,
+    HeaderProps,
+    HighlightProps,
+    IconProps,
+    IconButtonProps,
+    ListProps,
+    ListItemProps,
+    ModalProps,
+    OdometerProps,
+    ScrollAreaProps,
+    SwitchProps,
+    TagProps,
+    TextAreaProps,
+    TextFieldProps,
+    ToastProps,
+    TooltipProps,
+    ViewProps,
+    ViewDrawerProps,
+    ViewModalProps,
+} from "../components";
+
+export interface ComponentsProps {
+    avatar?: Pick<AvatarProps, "size" | "radius" | "cursorPointer" | "delayMs">;
+    button?: Pick<ButtonProps, "variant" | "color" | "size" | "radius">;
+    checkbox?: Pick<CheckboxProps, "variant" | "size" | "radius" | "checkedIcon" | "indeterminateIcon">;
+    dialog?: DialogProps;
+    drawer?: DrawerProps;
+    footer?: FooterProps;
+    header?: Pick<HeaderProps, "alignCenter" | "before" | "after">;
+    highlight?: HighlightProps;
+    icon?: Omit<IconProps, "name">;
+    iconButton?: Pick<IconButtonProps, "variant" | "size" | "radius">;
+    list?: ListProps;
+    listItem?: ListItemProps;
+    modal?: ModalProps;
+    odometer?: Pick<OdometerProps, "auto" | "format" | "duration">;
+    scrollArea?: ScrollAreaProps;
+    switch?: SwitchProps;
+    tag?: Pick<TagProps, "variant" | "size" | "color" | "radius" | "clickable">;
+    textArea?: TextAreaProps;
+    textField?: TextFieldProps;
+    toast?: Pick<
+        ToastProps,
+        | "side"
+        | "duration"
+        | "swipeDirection"
+        | "swipeThreshold"
+        | "closeProps"
+        | "closeIcon"
+        | "fullWidth"
+        | "sticky"
+        | "radius"
+        | "color"
+    >;
+    tooltip?: Pick<TooltipProps, "side" | "align" | "delayDuration" | "arrowHeight" | "arrowWidth">;
+    view?: ViewProps;
+    viewDrawer?: ViewDrawerProps;
+    viewModal?: ViewModalProps;
+}

package/src/config/default.ts

@@ -0,0 +1,3 @@
+import {Config} from "./index";
+
+export default {} as Config;

package/src/config/index.ts

@@ -0,0 +1,26 @@
+import type {ComponentsProps} from "../components";
+import type {Icons} from "../providers";
+
+export {AvatarSize, AvatarRadius} from "../components/Avatar";
+export {ButtonColor, ButtonSize, ButtonRadius, ButtonVariant} from "../components/Button";
+export {CheckboxVariant, CheckboxRadius, CheckboxSize} from "../components/Checkbox";
+export {DrawerSide} from "../components/Drawer";
+export {HighlightColor} from "../components/Highlight";
+export {IconButtonSize, IconButtonVariant, IconButtonRadius} from "../components/IconButton";
+export {ModalRadius} from "../components/Modal";
+export {TagVariant, TagColor, TagRadius, TagSize} from "../components/Tag";
+export {TextAreaSize, TextAreaVariant} from "../components/TextArea";
+export {TextFieldAccent, TextFieldSize, TextFieldVariant} from "../components/TextField";
+export {ToastColor, ToastRadius, ToastSide} from "../components/Toast";
+
+export type {ComponentsProps} from "../components";
+
+export interface Config {
+    props: ComponentsProps;
+    icons: Icons;
+}
+
+export const defineConfig = (config: Partial<Config>): Config => {
+    const {props = {}, icons = {}} = config;
+    return {props, icons};
+};

package/src/declaration.d.ts

@@ -0,0 +1,8 @@
+declare module "*.module.css" {
+    const classes: CSSModuleClasses;
+    export default classes;
+}
+declare module "*.module.scss" {
+    const classes: CSSModuleClasses;
+    export default classes;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./providers";
+export {Theme} from "./types/theme";