adnbn-ui 0.0.2 → 0.1.1

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

@@ -1,88 +0,0 @@
-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/List/List.stories.tsx

@@ -1,81 +0,0 @@
-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/Modal/Modal.stories.tsx

@@ -1,95 +0,0 @@
-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/Odometer/Odometer.stories.tsx

@@ -1,66 +0,0 @@
-import {useEffect, useState} from "react";
-import {Meta, StoryObj} from "@storybook/react";
-
-import {hideInTable} from "../../utils";
-
-import OdometerComponent from "./Odometer";
-
-const meta: Meta<typeof OdometerComponent> = {
-    title: "Components/Odometer",
-    component: OdometerComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        value: {
-            description: "The number to display on the odometer.",
-            control: {type: "number"},
-        },
-        format: {
-            description: "Formatting string for odometer value.",
-            control: {type: "text"},
-        },
-        duration: {
-            description: "Animation duration in milliseconds.",
-            control: {type: "number"},
-        },
-        auto: hideInTable,
-        className: hideInTable,
-    },
-};
-
-export default meta;
-
-export const Odometer: StoryObj<typeof OdometerComponent> = {
-    args: {
-        value: 1234,
-        duration: 500,
-        format: "d",
-    },
-};
-
-export const OdometerCount = () => {
-    const [value, setValue] = useState(100);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setValue(prev => ++prev);
-        }, 1000);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return <OdometerComponent value={value} />;
-};
-
-export const OdometerRandom = () => {
-    const [value, setValue] = useState(100);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setValue(prev => prev + Math.floor(Math.random() * 10) + 1);
-        }, 3000);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return <OdometerComponent value={value} duration={1000} />;
-};

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -1,58 +0,0 @@
-import {Meta, StoryObj} from "@storybook/react";
-
-import {hideInTable} from "../../utils";
-
-import ScrollAreaComponent from "./ScrollArea";
-
-const meta: Meta<typeof ScrollAreaComponent> = {
-    title: "Components/ScrollArea",
-    component: ScrollAreaComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        type: {
-            description:
-                "Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.",
-            options: ["auto", "always", "scroll", "hover"],
-            control: {type: "select"},
-        },
-        scrollHideDelay: {
-            description:
-                'If type is set to either "scroll" or "hover", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.',
-        },
-        dir: {
-            description:
-                "The reading direction of the scroll area. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.",
-            options: ["ltr", "rtl"],
-            control: {type: "select"},
-        },
-
-        style: hideInTable,
-        className: hideInTable,
-        thumbClassName: hideInTable,
-        cornerClassName: hideInTable,
-        viewportClassName: hideInTable,
-        scrollbarClassName: hideInTable,
-    },
-};
-
-export default meta;
-
-export const ScrollArea: StoryObj<typeof ScrollAreaComponent> = {
-    args: {
-        type: "hover",
-        dir: "ltr",
-        xOffset: 3,
-        yOffset: 3,
-        scrollHideDelay: 600,
-        style: {
-            padding: "10px",
-            width: "300px",
-            height: "150px",
-            borderRadius: "10px",
-            color: "var(--text-secondary-color)",
-            background: "var(--bg-secondary-color)",
-        },
-        children:
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, justo at congue malesuada, arcu elit malesuada eros, ut tempor justo libero a est. Donec sit amet tortor nec justo auctor sagittis. Suspendisse potenti. Fusce gravida, libero vel auctor pretium, odio risus vehicula nunc, et ultricies nunc arcu a neque. Aliquam erat volutpat. Morbi vulputate erat nec lectus vestibulum, at ullamcorper risus aliquet",
-    },
-};

package/src/components/Switch/Switch.stories.tsx

@@ -1,25 +0,0 @@
-import {Meta, StoryObj} from "@storybook/react";
-
-import {hideInTable} from "../../utils";
-
-import SwitchComponent from "./Switch";
-
-const meta: Meta<typeof SwitchComponent> = {
-    title: "Components/Switch",
-    component: SwitchComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        children: hideInTable,
-        className: hideInTable,
-        thumbClassName: hideInTable,
-    },
-};
-
-export default meta;
-
-export const Switch: StoryObj<typeof SwitchComponent> = {
-    args: {
-        checked: true,
-        disabled: false,
-    },
-};

package/src/components/Tag/Tag.stories.tsx

@@ -1,157 +0,0 @@
-import {Meta, StoryObj} from "@storybook/react";
-
-import {capitalizeFirstLetter} from "../../utils";
-
-import TagComponent, {TagColor, TagRadius, TagSize, TagVariant} from "./Tag";
-
-const variants: TagVariant[] = [TagVariant.Contained, TagVariant.Outlined, TagVariant.Soft];
-const colors: (TagColor | "default")[] = ["default", TagColor.Primary, TagColor.Secondary, TagColor.Accent];
-const sizes: (TagSize | "default")[] = [TagSize.Small, "default", TagSize.Medium, TagSize.Large];
-const radius: (TagRadius | "default")[] = [TagRadius.Small, TagRadius.Medium, TagRadius.Large, "default"];
-
-const meta: Meta<typeof TagComponent> = {
-    title: "Components/Tag",
-    component: TagComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        variant: {
-            options: variants,
-            control: {type: "select"},
-        },
-        color: {
-            options: colors,
-            control: {type: "select"},
-        },
-        size: {
-            options: sizes,
-            control: {type: "select"},
-        },
-        radius: {
-            options: radius,
-            control: {type: "select"},
-        },
-    },
-};
-
-export default meta;
-
-export const Tag: StoryObj<typeof TagComponent> = {
-    args: {
-        children: "Test",
-        variant: TagVariant.Contained,
-        color: TagColor.Primary,
-        clickable: false,
-    },
-};
-
-export const Variant = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <TagComponent variant={variant} color={TagColor.Primary}>
-                        {capitalizeFirstLetter(variant)}
-                    </TagComponent>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const VariantDisabled = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <TagComponent variant={variant} color={TagColor.Primary}>
-                        {capitalizeFirstLetter(variant)}
-                    </TagComponent>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Size = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {sizes.map(size => (
-                <div key={size} className="item-card">
-                    <TagComponent size={size !== "default" ? size : undefined} color={TagColor.Primary}>
-                        {capitalizeFirstLetter(size)}
-                    </TagComponent>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Radius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {radius.map(radius => (
-                <div key={radius} className="item-card">
-                    <TagComponent radius={radius !== "default" ? radius : undefined} color={TagColor.Primary}>
-                        {capitalizeFirstLetter(radius)}
-                    </TagComponent>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const VariantColor = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {variants.map(variant =>
-                colors.map(color => (
-                    <div key={`${variant}-${color}`}>
-                        <TagComponent variant={variant} color={color !== "default" ? color : undefined}>
-                            {capitalizeFirstLetter(color)}
-                        </TagComponent>
-                    </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}`}>
-                        <TagComponent
-                            variant={variant}
-                            size={size !== "default" ? size : undefined}
-                            color={TagColor.Primary}
-                        >
-                            {capitalizeFirstLetter(size)}
-                        </TagComponent>
-                    </div>
-                ))
-            )}
-        </div>
-    );
-};
-
-export const VariantRadius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {variants.map(variant =>
-                radius.map(radius => (
-                    <div key={`${variant}-${radius}`}>
-                        <TagComponent
-                            variant={variant}
-                            radius={radius !== "default" ? radius : undefined}
-                            color={TagColor.Primary}
-                        >
-                            {capitalizeFirstLetter(radius)}
-                        </TagComponent>
-                    </div>
-                ))
-            )}
-        </div>
-    );
-};