adnbn-ui 0.0.1 → 0.1.0

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

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,58 @@
+import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./footer.module.scss";
+
+export interface FooterProps extends ComponentProps<"footer"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    shadow?: boolean;
+    reverse?: boolean;
+    leftClassName?: string;
+    rightClassName?: string;
+    childrenClassName?: string;
+}
+
+const Footer: FC<FooterProps> = props => {
+    const {
+        left,
+        right,
+        shadow,
+        reverse,
+        children,
+        className,
+        leftClassName,
+        rightClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("footer"), ...props};
+
+    return (
+        <footer
+            {...other}
+            className={classnames(
+                styles["footer"],
+                {
+                    [styles["footer--shadow"]]: shadow,
+                    [styles["footer--reverse"]]: reverse,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["footer-children"], childrenClassName)},
+                "div"
+            )}
+            {!children &&
+                cloneOrCreateElement(left, {className: classnames(styles["footer-left"], leftClassName)}, "div")}
+            {!children &&
+                cloneOrCreateElement(right, {className: classnames(styles["footer-right"], rightClassName)}, "div")}
+        </footer>
+    );
+};
+
+export default memo(Footer);

package/src/components/Footer/footer.module.scss

@@ -0,0 +1,44 @@
+$root: footer;
+
+.#{$root} {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--footer-padding, var(--side-padding-sm));
+  padding-top: 0;
+  background-color: var(--footer-background-color, transparent);
+  transition:
+    background-color var(--transition-speed-sm),
+    box-shadow var(--transition-speed-sm);
+
+  &--shadow {
+    box-shadow: var(--footer-box-shadow, 0px -4px 4px 0px rgba(0, 0, 0, 0.03));
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &-children {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .#{$root}--reverse & {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &-left {
+    display: flex;
+    align-items: center;
+    gap: var(--footer-left-gap, var(--footer-gap, 15px));
+  }
+
+  &-right {
+    display: flex;
+    align-items: center;
+    gap: var(--footer-right-gap, var(--footer-gap, 15px));
+  }
+}

package/src/components/Footer/index.ts

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

package/src/components/Header/Header.stories.tsx

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

package/src/components/Header/Header.tsx

@@ -0,0 +1,73 @@
+import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./header.module.scss";
+
+export interface HeaderProps extends Omit<ComponentProps<"header">, "title"> {
+    title?: ReactNode;
+    before?: ReactNode;
+    after?: ReactNode;
+    subtitle?: ReactNode;
+    wrapClassName?: string;
+    titleClassName?: string;
+    beforeClassName?: string;
+    afterClassName?: string;
+    subtitleClassName?: string;
+    childrenClassName?: string;
+    alignCenter?: boolean;
+}
+
+const Header: FC<HeaderProps> = props => {
+    const {
+        title,
+        before,
+        after,
+        subtitle,
+        className,
+        wrapClassName,
+        titleClassName,
+        beforeClassName,
+        afterClassName,
+        subtitleClassName,
+        childrenClassName,
+        alignCenter = true,
+        children,
+        ...other
+    } = {...useComponentProps("header"), ...props};
+
+    return (
+        <header
+            {...other}
+            className={classnames(
+                styles["header"],
+                {
+                    [styles["header--center"]]: alignCenter,
+                },
+                className
+            )}
+        >
+            {(title || subtitle) && (
+                <div className={classnames(styles["header__wrap"], wrapClassName)}>
+                    <h1 className={classnames(styles["header__title"], titleClassName)}>
+                        {cloneOrCreateElement(before, {className: beforeClassName})}
+                        {title}
+                        {cloneOrCreateElement(after, {className: afterClassName})}
+                    </h1>
+
+                    {cloneOrCreateElement(
+                        subtitle,
+                        {className: classnames(styles["header__subtitle"], subtitleClassName)},
+                        "h2"
+                    )}
+                </div>
+            )}
+
+            {cloneOrCreateElement(children, {className: childrenClassName}, "div")}
+        </header>
+    );
+};
+
+export default memo(Header);