adnbn-ui 0.0.1 → 0.1.0

package/src/components/Layout/Layout.stories.tsx

@@ -0,0 +1,88 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {Header, Footer, Button, ScrollArea, IconButton, IconButtonVariant, IconButtonSize} from "../index";
+
+import {LayoutProvider, useLayout} from "./index";
+
+const meta: Meta<typeof LayoutProvider> = {
+    title: "Components/Layout",
+    component: LayoutProvider,
+    tags: ["autodocs"],
+    argTypes: {
+        children: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Layout = () => {
+    return (
+        <LayoutProvider>
+            <App />
+        </LayoutProvider>
+    );
+};
+
+const App = () => {
+    const [arr, setArr] = useState(Array.from(Array(5)));
+    const {expand, collapse} = useLayout();
+
+    return (
+        <div
+            style={{
+                background: "var(--bg-secondary-color)",
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                borderRadius: "10px",
+                overflow: "hidden",
+            }}
+        >
+            <Header title={"Layout"} />
+            <div style={{display: "flex", justifyContent: "space-evenly", alignItems: "center", padding: "5px 10px"}}>
+                <IconButton
+                    size={IconButtonSize.Medium}
+                    variant={IconButtonVariant.Contained}
+                    onClick={() => setArr([...arr, "item"])}
+                >
+                    ➕
+                </IconButton>
+                <Button onClick={() => expand()}>Expand</Button>
+                <Button onClick={() => collapse()}>Collapse</Button>
+
+                <IconButton
+                    size={IconButtonSize.Medium}
+                    variant={IconButtonVariant.Contained}
+                    onClick={() => setArr(arr.slice(0, -1))}
+                >
+                    ➖
+                </IconButton>
+            </div>
+            <div style={{display: "flex", justifyContent: "space-evenly", padding: "5px 10px"}}>
+                <Button onClick={() => expand({height: 700})}>700px height</Button>
+                <Button onClick={() => expand({height: 700, width: 500})}>700x500px</Button>
+                <Button onClick={() => expand({width: 500})}>500px width</Button>
+            </div>
+            <ScrollArea
+                xOffset={10}
+                type="always"
+                style={{flex: 1, display: "flex", flexDirection: "column", overflow: "hidden"}}
+            >
+                <div style={{flex: 1}}>
+                    {arr.map((_, index) => (
+                        <div
+                            key={index}
+                            style={{padding: "10px 20px", textAlign: "center", color: "var(--text-secondary-color)"}}
+                        >
+                            Item {++index}
+                        </div>
+                    ))}
+                </div>
+            </ScrollArea>
+            <Footer left="❤️" right="⭐" shadow style={{paddingTop: "10px"}} />
+        </div>
+    );
+};

package/src/components/Layout/Provider.tsx

@@ -0,0 +1,47 @@
+import React, {ComponentProps, FC, PropsWithChildren, useCallback, useState} from "react";
+
+import {expandType, LayoutContext} from "./context";
+
+import classnames from "classnames";
+
+import styles from "./layout.module.scss";
+
+const Provider: FC<PropsWithChildren<ComponentProps<"div">>> = ({children, className, style, ...props}) => {
+    const [isExpanded, setExpanded] = useState(false);
+    const [height, setHeight] = useState<number | string | undefined>(undefined);
+    const [width, setWidth] = useState<number | string | undefined>(undefined);
+
+    const expand = useCallback((value?: expandType) => {
+        setHeight(value?.height);
+        setWidth(value?.width);
+        setExpanded(true);
+    }, []);
+
+    const collapse = useCallback(() => {
+        setHeight(undefined);
+        setWidth(undefined);
+        setExpanded(false);
+    }, []);
+
+    return (
+        <LayoutContext.Provider value={{isExpanded, expand, collapse}}>
+            <div
+                style={{minHeight: height, minWidth: width, ...style}}
+                className={classnames(
+                    styles["layout"],
+                    {
+                        [styles["layout--expanded"]]: isExpanded,
+                    },
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </LayoutContext.Provider>
+    );
+};
+
+Provider.displayName = "ViewportProvider";
+
+export default Provider;

package/src/components/Layout/context.ts

@@ -0,0 +1,24 @@
+import {createContext, useContext} from "react";
+
+export type expandType = {
+    height?: number | string;
+    width?: number | string;
+};
+
+export interface LayoutContract {
+    isExpanded?: boolean;
+
+    expand(value?: expandType): void;
+
+    collapse(): void;
+}
+
+export const LayoutContext = createContext<LayoutContract>({
+    isExpanded: false,
+    expand() {},
+    collapse() {},
+});
+
+LayoutContext.displayName = "LayoutContext";
+
+export const useLayout = () => useContext(LayoutContext);

package/src/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export {default as LayoutProvider} from "./Provider";
+export {useLayout} from "./context";

package/src/components/Layout/layout.module.scss

@@ -0,0 +1,17 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+  transition:
+    min-height var(--transition-speed-md) ease-in-out,
+    min-width var(--transition-speed-md) ease-in-out;
+
+  &--expanded {
+    min-height: var(--max-height);
+    min-width: var(--max-width);
+  }
+}

package/src/components/List/List.stories.tsx

@@ -0,0 +1,81 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {hideInTable} from "../../utils";
+
+import {ListItem, Button, ButtonSize, ButtonVariant, Avatar, AvatarSize} from "../index";
+
+import ListComponent from "./List";
+
+const mockListItems = [
+    {
+        id: 1,
+        avatar: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80",
+        name: "John Doe",
+        role: "React Developer",
+        action: "Add",
+    },
+    {
+        id: 2,
+        avatar: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80",
+        name: "Emily Smith",
+        role: "UI/UX Designer",
+        action: "Invite",
+    },
+    {
+        id: 3,
+        avatar: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80",
+        name: "Michael Johnson",
+        role: "Project Manager",
+        action: "Add",
+    },
+    {
+        id: 4,
+        avatar: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80",
+        name: "Sarah Brown",
+        role: "QA Engineer",
+        action: "Invite",
+    },
+    {
+        id: 5,
+        avatar: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80",
+        name: "David Wilson",
+        role: "DevOps Engineer",
+        action: "Invite",
+    },
+];
+
+const meta: Meta<typeof ListComponent> = {
+    title: "Components/List",
+    component: ListComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        children: hideInTable,
+        className: hideInTable,
+        style: hideInTable,
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListComponent>;
+
+export const List: Story = {
+    args: {
+        children: mockListItems.map(({id, avatar, name, role, action}) => (
+            <ListItem
+                key={id}
+                left={<Avatar src={avatar} size={AvatarSize.Small} />}
+                primary={<span style={{fontWeight: 500}}>{name}</span>}
+                secondary={<span style={{fontSize: "14px"}}>{role}</span>}
+                right={
+                    <Button variant={ButtonVariant.Contained} size={ButtonSize.Small}>
+                        {action}
+                    </Button>
+                }
+            />
+        )),
+        style: {
+            minWidth: "300px",
+        },
+    },
+};

package/src/components/List/List.tsx

@@ -0,0 +1,24 @@
+import React, {ComponentProps, forwardRef, memo, ReactElement} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+
+import {ListItemProps} from "../ListItem";
+
+import styles from "./list.module.scss";
+
+export interface ListProps extends Omit<ComponentProps<"ul">, "children"> {
+    children: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
+}
+
+const List = forwardRef<HTMLUListElement, ListProps>((props, ref) => {
+    const {children, className, ...other} = {...useComponentProps("list"), ...props};
+
+    return (
+        <ul {...other} ref={ref} className={classnames(styles["list"], className)}>
+            {children}
+        </ul>
+    );
+});
+
+export default memo(List);

package/src/components/List/index.ts

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

package/src/components/List/list.module.scss

@@ -0,0 +1,8 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,75 @@
+import React, {ComponentProps, forwardRef, JSX, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./list-item.module.scss";
+
+type TagType = keyof JSX.IntrinsicElements;
+export type ListItemType = HTMLLIElement;
+
+export interface ListItemProps extends ComponentProps<"li"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    primary?: ReactNode;
+    secondary?: ReactNode;
+    leftTag?: TagType;
+    rightTag?: TagType;
+    primaryTag?: TagType;
+    secondaryTag?: TagType;
+    primaryClassName?: string;
+    secondaryClassName?: string;
+    centerClassName?: string;
+    leftClassName?: string;
+    rightClassName?: string;
+}
+
+const ListItem = forwardRef<ListItemType, ListItemProps>((props, ref) => {
+    const {
+        left,
+        right,
+        primary,
+        secondary,
+        leftTag = "div",
+        rightTag = "div",
+        primaryTag = "div",
+        secondaryTag = "div",
+        children,
+        className,
+        leftClassName,
+        rightClassName,
+        centerClassName,
+        primaryClassName,
+        secondaryClassName,
+        role = "list-item",
+        ...other
+    } = {...useComponentProps("listItem"), ...props};
+
+    return (
+        <li {...other} ref={ref} role={role} className={classnames(styles["list-item"], className)}>
+            {cloneOrCreateElement(left, {className: classnames(styles["list-item__left"], leftClassName)}, leftTag)}
+
+            {(primary || secondary) && (
+                <div className={classnames(styles["list-item__center"], centerClassName)}>
+                    {cloneOrCreateElement(
+                        primary,
+                        {className: classnames(styles["list-item__primary"], primaryClassName)},
+                        primaryTag
+                    )}
+                    {cloneOrCreateElement(
+                        secondary,
+                        {className: classnames(styles["list-item__secondary"], secondaryClassName)},
+                        secondaryTag
+                    )}
+                </div>
+            )}
+
+            {cloneOrCreateElement(right, {className: classnames(styles["list-item__right"], rightClassName)}, rightTag)}
+
+            {children}
+        </li>
+    );
+});
+
+export default memo(ListItem);

package/src/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export {default as ListItem} from "./ListItem";
+export type {ListItemProps, ListItemType} from "./ListItem";

package/src/components/ListItem/list-item.module.scss

@@ -0,0 +1,36 @@
+.list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+
+  &__center {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__primary,
+  &__secondary {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &__primary {
+    color: var(--list-item-primary-color, var(--text-primary-color));
+  }
+  &__secondary {
+    color: var(--list-item-secondary-color, var(--text-secondary-color));
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,95 @@
+import {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import {Button, Header} from "../index";
+
+import ModalComponent, {ModalProps, ModalRadius} from "./Modal";
+
+const radius: (ModalRadius | "default")[] = [
+    ModalRadius.None,
+    ModalRadius.Small,
+    "default",
+    ModalRadius.Medium,
+    ModalRadius.Large,
+];
+
+const meta: Meta<typeof ModalComponent> = {
+    title: "Components/Modal",
+    component: ModalComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        radius: {
+            options: radius,
+            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",
+        },
+        closeButton: {
+            options: [true, false, {children: "❌"}],
+            control: {type: "select"},
+        },
+        speed: {
+            type: "number",
+        },
+        onClose: hideInTable,
+        children: hideInTable,
+        className: hideInTable,
+        description: hideInTable,
+        overlayClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Modal = (props: ModalProps & {label?: string}) => {
+    const [open, setOpen] = useState(false);
+    const {label = "Open Modal", ...other} = props;
+    return (
+        <div>
+            <Button onClick={() => setOpen(true)}>{label}</Button>
+            <ModalComponent open={open} onOpenChange={setOpen} {...other}>
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        gap: "30px",
+                    }}
+                >
+                    <Header
+                        title="Volume Up Plus"
+                        subtitle="Adjust the current tab's volume with the slider. Switch to any audio tab in one click."
+                        before="❤️"
+                    />
+                    <Button style={{margin: "50px auto", maxWidth: "max-content"}} onClick={() => setOpen(false)}>
+                        Close Modal
+                    </Button>
+                </div>
+            </ModalComponent>
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <Modal
+                        radius={radius !== "default" ? radius : undefined}
+                        fullscreen={false}
+                        label={`${capitalizeFirstLetter(radius)} radius`}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,94 @@
+import React, {FC, isValidElement, memo, ReactElement, useCallback} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
+import {IconButton, IconButtonProps} from "../IconButton";
+
+import styles from "./modal.module.scss";
+
+export enum ModalRadius {
+    None = "none",
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface ModalProps extends DialogProps {
+    radius?: ModalRadius;
+    closeButton?: boolean | IconButtonProps | ReactElement;
+    onClose?: () => void;
+}
+
+export const modalPropsKeys = new Set<keyof ModalProps>(["radius", "closeButton", "onClose", ...dialogPropsKeys]);
+
+const Modal: FC<ModalProps> = props => {
+    const {
+        radius,
+        fullscreen = true,
+        closeButton = true,
+        onClose,
+        onOpenChange,
+        children,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("modal"), ...props};
+
+    const handleClose = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            onClose?.();
+            onOpenChange?.(false);
+            if (typeof closeButton === "object" && !isValidElement(closeButton)) {
+                closeButton?.onClick?.(event);
+            }
+        },
+        [onClose, onOpenChange, closeButton]
+    );
+
+    const renderCloseButton = useCallback(() => {
+        if (!closeButton) return null;
+
+        if (isValidElement(closeButton)) return closeButton;
+
+        const closeButtonProps = typeof closeButton === "object" ? closeButton : {};
+
+        return (
+            <IconButton
+                aria-label="Close"
+                children="✖"
+                {...closeButtonProps}
+                onClick={handleClose}
+                className={classnames(styles["modal-close"], closeButtonProps.className)}
+            />
+        );
+    }, [closeButton, handleClose]);
+
+    return (
+        <Dialog
+            {...other}
+            onOpenChange={onOpenChange}
+            overlayClassName={classnames(styles["modal-overlay"], overlayClassName)}
+            className={classnames(
+                styles["modal-content"],
+                {
+                    [styles["modal-content--fullscreen"]]: fullscreen,
+                    [styles[`modal-content--${radius}-radius`]]: radius,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["modal-children"], childrenClassName)},
+                "div"
+            )}
+            {renderCloseButton()}
+        </Dialog>
+    );
+};
+
+export default memo(Modal);

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export {default as Modal, ModalRadius, modalPropsKeys} from "./Modal";
+export type {ModalProps} from "./Modal";