adnbn-ui 0.0.1 → 0.0.2

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,179 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import IconButtonComponent, {IconButtonRadius, IconButtonSize, IconButtonVariant} from "./IconButton";
+
+const variants: (IconButtonVariant | "default")[] = [
+    "default",
+    IconButtonVariant.Contained,
+    IconButtonVariant.Outlined,
+    IconButtonVariant.Ghost,
+];
+const sizes: (IconButtonSize | "default")[] = [
+    IconButtonSize.Small,
+    "default",
+    IconButtonSize.Medium,
+    IconButtonSize.Large,
+];
+const radius: (IconButtonRadius | "default")[] = [
+    IconButtonRadius.Small,
+    IconButtonRadius.Medium,
+    IconButtonRadius.Large,
+    "default",
+];
+
+const meta: Meta<typeof IconButtonComponent> = {
+    title: "Components/IconButton",
+    component: IconButtonComponent,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            options: variants,
+            control: {type: "select"},
+        },
+        size: {
+            options: sizes,
+            control: {type: "select"},
+        },
+        radius: {
+            options: radius,
+            control: {type: "select"},
+        },
+
+        after: hideInTable,
+        before: hideInTable,
+        children: hideInTable,
+        afterClassName: hideInTable,
+        beforeClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+const icon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M12.0002 2L15.1037 8.72839L22.4618 9.60081L17.0218 14.6316L18.4658 21.8992L12.0002 18.28L5.53456 21.8992L6.97862 14.6316L1.53857 9.60081L8.89669 8.72839L12.0002 2Z"
+            stroke="currentColor"
+            stroke-width="2.4"
+            stroke-linejoin="round"
+        />
+    </svg>
+);
+
+export const IconButton: StoryObj<typeof IconButtonComponent> = {
+    args: {
+        children: icon,
+        disabled: false,
+        tooltip: {
+            content: "Rate Us",
+        },
+    },
+};
+
+export const Variant = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
+                    <IconButtonComponent variant={variant !== "default" ? variant : undefined}>
+                        {icon}
+                    </IconButtonComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantDisabled = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            {variants.map(variant => (
+                <div key={variant} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
+                    <IconButtonComponent disabled variant={variant !== "default" ? variant : undefined}>
+                        {icon}
+                    </IconButtonComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Size = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size => (
+                <div key={size} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(size)}</span>
+                    <IconButtonComponent
+                        size={size !== "default" ? size : undefined}
+                        variant={IconButtonVariant.Contained}
+                    >
+                        {icon}
+                    </IconButtonComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const Radius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {radius.map(radius => (
+                <div key={radius} className="item-card">
+                    <span className="item-card__title">{capitalizeFirstLetter(radius)}</span>
+                    <IconButtonComponent
+                        radius={radius !== "default" ? radius : undefined}
+                        variant={IconButtonVariant.Contained}
+                    >
+                        {icon}
+                    </IconButtonComponent>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const VariantSize = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                sizes.map(size => (
+                    <div key={`${variant}-${size}`}>
+                        <IconButtonComponent
+                            variant={variant !== "default" ? variant : undefined}
+                            size={size !== "default" ? size : undefined}
+                        >
+                            {icon}
+                        </IconButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const SizeRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {sizes.map(size =>
+                radius.map(radius => (
+                    <div key={`${radius}-${size}`} className="item-card">
+                        <IconButtonComponent
+                            variant={IconButtonVariant.Contained}
+                            radius={radius !== "default" ? radius : undefined}
+                            size={size !== "default" ? size : undefined}
+                        >
+                            {icon}
+                        </IconButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,65 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+
+import {Tooltip, TooltipProps} from "../Tooltip";
+import {BaseButton, BaseButtonProps} from "../BaseButton";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./icon-button.module.scss";
+
+export enum IconButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Ghost = "ghost",
+}
+
+export enum IconButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum IconButtonRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface IconButtonProps extends BaseButtonProps {
+    size?: IconButtonSize;
+    radius?: IconButtonRadius;
+    variant?: IconButtonVariant;
+    tooltip?: Omit<TooltipProps, "children">;
+}
+
+const IconButton: FC<IconButtonProps> = props => {
+    const {size, radius, variant, tooltip, className, children, ...other} = {
+        ...useComponentProps("iconButton"),
+        ...props,
+    };
+
+    const iconButton = (
+        <BaseButton
+            {...other}
+            className={classnames(
+                styles["icon-button"],
+                {
+                    [styles[`icon-button--${variant}`]]: variant,
+                    [styles[`icon-button--${size}-size`]]: size,
+                    [styles[`icon-button--${radius}-radius`]]: radius,
+                },
+                className
+            )}
+        >
+            {children}
+        </BaseButton>
+    );
+    if (tooltip) {
+        return <Tooltip {...tooltip}>{iconButton}</Tooltip>;
+    }
+
+    return iconButton;
+};
+
+export default memo(IconButton);

package/src/components/IconButton/icon-button.module.scss

@@ -0,0 +1,86 @@
+$root: icon-button;
+
+.#{$root} {
+  border-radius: var(--icon-button-border-radius, 100%);
+  padding: var(--icon-button-padding, 5px);
+  width: var(--icon-button-size, 25px);
+  height: var(--icon-button-size, 25px);
+  color: var(--icon-button-color);
+  background: none;
+
+  &:hover:not(:disabled) {
+    color: var(--icon-button-color-hover);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(var(--icon-button-scale, 0.95));
+  }
+
+  &:disabled {
+    opacity: var(--icon-button-disabled-opacity, 0.75);
+    cursor: default;
+  }
+
+  // Variants
+  &--contained {
+    color: var(--icon-button-contained-color, var(--icon-button-color));
+    background: var(--icon-button-contained-bg-color, var(--icon-button-bg-color));
+
+    &:hover:not(:disabled) {
+      color: var(--icon-button-contained-color-hover, var(--icon-button-color-hover));
+      background-color: var(--icon-button-contained-bg-color-hover, var(--icon-button-bg-color-hover));
+    }
+  }
+
+  &--outlined {
+    color: var(--icon-button-outlined-color, var(--icon-button-color));
+    border-width: var(--icon-button-border-width, 1px);
+    border-color: var(--icon-button-border-color);
+    border-style: solid;
+    background: none;
+
+    &:hover:not(:disabled) {
+      color: var(--icon-button-outlined-color-hover, var(--icon-button-color-hover));
+      background-color: var(--icon-button-outlined-bg-color-hover, var(--icon-button-bg-color-hover));
+    }
+  }
+
+  &--ghost {
+    color: var(--icon-button-ghost-color, var(--icon-button-color));
+    background-color: transparent;
+
+    &:hover:not(:disabled) {
+      color: var(--icon-button-ghost-color-hover, var(--icon-button-color-hover));
+      background-color: var(--icon-button-ghost-bg-color-hover, var(--icon-button-bg-color-hover));
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    width: var(--icon-button-size-sm, 20px);
+    height: var(--icon-button-size-sm, 20px);
+  }
+
+  &--medium-size {
+    width: var(--icon-button-size-md, 35px);
+    height: var(--icon-button-size-md, 35px);
+  }
+
+  &--large-size {
+    width: var(--icon-button-size-lg, 45px);
+    height: var(--icon-button-size-lg, 45px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--icon-button-border-radius-sm, 20%);
+  }
+
+  &--medium-radius {
+    border-radius: var(--icon-button-border-radius-md, 30%);
+  }
+
+  &--large-radius {
+    border-radius: var(--icon-button-border-radius-lg, 40%);
+  }
+}

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export {default as IconButton, IconButtonVariant, IconButtonRadius, IconButtonSize} from "./IconButton";
+export type {IconButtonProps} from "./IconButton";

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