adnbn-ui 0.1.0 → 0.1.1

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,145 +0,0 @@
-import {Fragment} from "react";
-import {Meta, StoryObj} from "@storybook/react";
-
-import {capitalizeFirstLetter, hideInTable} from "../../utils";
-
-import TextAreaComponent, {TextAreaRadius, TextAreaSize, TextAreaVariant} from "./TextArea";
-
-const variants: TextAreaVariant[] = [TextAreaVariant.Regular, TextAreaVariant.Outlined, TextAreaVariant.Filled];
-const sizes: (TextAreaSize | "default")[] = [TextAreaSize.Small, "default", TextAreaSize.Medium, TextAreaSize.Large];
-const radius: (TextAreaRadius | "default")[] = [
-    TextAreaRadius.None,
-    TextAreaRadius.Small,
-    "default",
-    TextAreaRadius.Medium,
-    TextAreaRadius.Large,
-];
-
-const meta: Meta<typeof TextAreaComponent> = {
-    title: "Components/TextArea",
-    component: TextAreaComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        variant: {
-            options: variants,
-            control: {type: "select"},
-        },
-        size: {
-            options: sizes,
-            control: {type: "select"},
-        },
-        radius: {
-            options: radius,
-            control: {type: "select"},
-        },
-
-        label: hideInTable,
-        children: hideInTable,
-    },
-};
-
-export default meta;
-
-export const TextArea: StoryObj<typeof TextAreaComponent> = {
-    args: {
-        placeholder: "Enter text",
-        disabled: false,
-        fullWidth: false,
-    },
-};
-
-export const Variant = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {variants.map(variant => (
-                <div key={variant}>
-                    <TextAreaComponent variant={variant} placeholder={capitalizeFirstLetter(variant)} />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Size = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {sizes.map(size => (
-                <div key={size}>
-                    <TextAreaComponent
-                        size={size !== "default" ? size : undefined}
-                        placeholder={capitalizeFirstLetter(size)}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Radius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {radius.map(radius => (
-                <div key={radius}>
-                    <TextAreaComponent
-                        radius={radius !== "default" ? radius : undefined}
-                        placeholder={capitalizeFirstLetter(radius)}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const VariantRadius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
-            <span className="item-card__title"> Variant \ Radius</span>
-            {radius.slice(1).map(radius => (
-                <span key={radius} className="item-card__title">
-                    {capitalizeFirstLetter(radius)} radius
-                </span>
-            ))}
-            {variants.map(variant => (
-                <Fragment key={variant}>
-                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
-                    {radius.slice(1).map(radius => (
-                        <div key={`${radius}-${variant}`} className="item-card">
-                            <TextAreaComponent
-                                variant={variant}
-                                radius={radius !== "default" ? radius : undefined}
-                                placeholder="Enter value"
-                            />
-                        </div>
-                    ))}
-                </Fragment>
-            ))}
-        </div>
-    );
-};
-
-export const VariantSize = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
-            <span className="item-card__title"> Variant \ Size</span>
-            {sizes.map(size => (
-                <span key={size} className="item-card__title">
-                    {capitalizeFirstLetter(size)} size
-                </span>
-            ))}
-            {variants.map(variant => (
-                <Fragment key={variant}>
-                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
-                    {sizes.map(size => (
-                        <div key={`${size}-${variant}`} className="item-card">
-                            <TextAreaComponent
-                                variant={variant}
-                                size={size !== "default" ? size : undefined}
-                                placeholder="Enter value"
-                            />
-                        </div>
-                    ))}
-                </Fragment>
-            ))}
-        </div>
-    );
-};

package/src/components/TextField/TextField.stories.tsx

@@ -1,177 +0,0 @@
-import {Fragment} from "react";
-import {Meta, StoryObj} from "@storybook/react";
-
-import {capitalizeFirstLetter, hideInTable} from "../../utils";
-
-import TextFieldComponent, {TextFieldAccent, TextFieldRadius, TextFieldSize, TextFieldVariant} from "./TextField";
-
-const variants: TextFieldVariant[] = [TextFieldVariant.Regular, TextFieldVariant.Outlined, TextFieldVariant.Filled];
-const sizes: (TextFieldSize | "default")[] = [
-    TextFieldSize.Small,
-    "default",
-    TextFieldSize.Medium,
-    TextFieldSize.Large,
-];
-const radius: (TextFieldRadius | "default")[] = [
-    TextFieldRadius.None,
-    TextFieldRadius.Small,
-    "default",
-    TextFieldRadius.Medium,
-    TextFieldRadius.Large,
-    TextFieldRadius.Full,
-];
-const accents: (TextFieldAccent | "default")[] = ["default", TextFieldAccent.Success, TextFieldAccent.Error];
-
-const meta: Meta<typeof TextFieldComponent> = {
-    title: "Components/TextField",
-    component: TextFieldComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        variant: {
-            options: variants,
-            control: {type: "select"},
-        },
-        customSize: {
-            options: sizes,
-            control: {type: "select"},
-        },
-        radius: {
-            options: radius,
-            control: {type: "select"},
-        },
-        accent: {
-            options: accents,
-            control: {type: "select"},
-        },
-
-        label: hideInTable,
-        value: hideInTable,
-        defaultValue: hideInTable,
-        inputClassName: hideInTable,
-        afterClassName: hideInTable,
-        beforeClassName: hideInTable,
-    },
-};
-
-export default meta;
-
-export const TextField: StoryObj<typeof TextFieldComponent> = {
-    args: {
-        placeholder: "Enter text",
-        disabled: false,
-        fullWidth: false,
-        before: "🔍",
-        after: "🔑",
-    },
-};
-
-export const Variant = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {variants.map(variant => (
-                <div key={variant}>
-                    <TextFieldComponent variant={variant} placeholder={capitalizeFirstLetter(variant)} />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Size = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {sizes.map(size => (
-                <div key={size}>
-                    <TextFieldComponent
-                        customSize={size !== "default" ? size : undefined}
-                        placeholder={capitalizeFirstLetter(size)}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Accent = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {accents.map(accent => (
-                <div key={accent}>
-                    <TextFieldComponent
-                        accent={accent !== "default" ? accent : undefined}
-                        placeholder={capitalizeFirstLetter(accent)}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Radius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(6, auto)"}}>
-            {radius.map(radius => (
-                <div key={radius}>
-                    <TextFieldComponent
-                        radius={radius !== "default" ? radius : undefined}
-                        placeholder={capitalizeFirstLetter(radius)}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const VariantRadius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(7, auto)"}}>
-            <span className="item-card__title"> Variant \ Radius</span>
-            {radius.map(radius => (
-                <span key={radius} className="item-card__title">
-                    {capitalizeFirstLetter(radius)} radius
-                </span>
-            ))}
-            {variants.map(variant => (
-                <Fragment key={variant}>
-                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
-                    {radius.map(radius => (
-                        <div key={`${radius}-${variant}`} className="item-card">
-                            <TextFieldComponent
-                                variant={variant}
-                                radius={radius !== "default" ? radius : undefined}
-                                placeholder="Enter value"
-                            />
-                        </div>
-                    ))}
-                </Fragment>
-            ))}
-        </div>
-    );
-};
-
-export const VariantSize = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
-            <span className="item-card__title"> Variant \ Size</span>
-            {sizes.map(size => (
-                <span key={size} className="item-card__title">
-                    {capitalizeFirstLetter(size)} size
-                </span>
-            ))}
-            {variants.map(variant => (
-                <Fragment key={variant}>
-                    <span className="item-card__title">{capitalizeFirstLetter(variant)}</span>
-                    {sizes.map(size => (
-                        <div key={`${size}-${variant}`} className="item-card">
-                            <TextFieldComponent
-                                variant={variant}
-                                customSize={size !== "default" ? size : undefined}
-                                placeholder="Enter value"
-                            />
-                        </div>
-                    ))}
-                </Fragment>
-            ))}
-        </div>
-    );
-};

package/src/components/Toast/Toast.stories.tsx

@@ -1,209 +0,0 @@
-import {FC, useState} from "react";
-import {Meta, StoryObj} from "@storybook/react";
-
-import {hideInTable} from "../../utils";
-
-import {Button, ButtonColor, ButtonVariant} from "../index";
-
-import ToastComponent, {ToastColor, ToastProps, ToastRadius, ToastSide} from "./Toast";
-
-const sides: ToastSide[] = [
-    ToastSide.TopLeft,
-    ToastSide.TopCenter,
-    ToastSide.TopRight,
-    ToastSide.BottomRight,
-    ToastSide.BottomCenter,
-    ToastSide.BottomLeft,
-];
-const colors: (ToastColor | "default")[] = ["default", ToastColor.Success, ToastColor.Error];
-const radius: (ToastRadius | "default")[] = [
-    ToastRadius.None,
-    ToastRadius.Small,
-    "default",
-    ToastRadius.Medium,
-    ToastRadius.Large,
-];
-
-const meta: Meta<typeof ToastComponent> = {
-    title: "Components/Toast",
-    component: ToastComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        duration: {
-            description: "The time in milliseconds that should elapse before automatically closing each toast.",
-        },
-        swipeDirection: {
-            options: ["right", "left", "up", "down"],
-            control: {type: "select"},
-            description: "The direction of the pointer swipe that should close the toast.",
-        },
-        swipeThreshold: {
-            description: "The distance in pixels that the swipe gesture must travel before a close is triggered.",
-            control: {type: "number"},
-        },
-        side: {
-            options: sides,
-            control: {type: "select"},
-        },
-        radius: {
-            options: radius,
-            control: {type: "select"},
-        },
-        color: {
-            options: colors,
-            control: {type: "select"},
-        },
-
-        action: hideInTable,
-        closeIcon: hideInTable,
-        closeProps: hideInTable,
-        onClose: hideInTable,
-        children: hideInTable,
-        className: hideInTable,
-        titleClassName: hideInTable,
-        actionClassName: hideInTable,
-        viewportClassName: hideInTable,
-        descriptionClassName: hideInTable,
-    },
-};
-
-export default meta;
-
-export const Toast: StoryObj<typeof ToastComponent> = {
-    args: {
-        open: true,
-        sticky: false,
-        fullWidth: false,
-        children: (
-            <Button variant={ButtonVariant.Contained} color={ButtonColor.Primary}>
-                Show toast
-            </Button>
-        ),
-        title: "New notification",
-        description: "Description",
-        side: ToastSide.BottomRight,
-        duration: 5000,
-        onClose: () => undefined,
-    },
-};
-
-const ToastClickable: FC<ToastProps> = ({children, ...props}) => {
-    const [open, setOpen] = useState(false);
-    const handleClick = () => setOpen(prev => !prev);
-    const handleClose = () => setOpen(false);
-
-    return (
-        <ToastComponent
-            open={open}
-            title="New notification"
-            description="Description"
-            onOpenChange={setOpen}
-            onClose={handleClose}
-            {...props}
-        >
-            <Button variant={ButtonVariant.Contained} color={ButtonColor.Primary} onClick={handleClick}>
-                {children}
-            </Button>
-        </ToastComponent>
-    );
-};
-
-export const Side = () => {
-    return (
-        <div style={{display: "grid", gridTemplateColumns: "repeat(6, auto)", gap: "10px"}}>
-            <ToastClickable side={ToastSide.TopLeft} description="Top Left">
-                Top Left
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.TopCenter} description="Top Center">
-                Top Center
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.TopRight} description="Top Right">
-                Top Right
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.BottomLeft} description="Bottom Left">
-                Bottom Left
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.BottomCenter} description="Bottom Center">
-                Bottom Center
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.BottomRight} description="Bottom Right">
-                Bottom Right
-            </ToastClickable>
-        </div>
-    );
-};
-
-export const Radius = () => {
-    return (
-        <div style={{display: "flex", gap: "10px"}}>
-            <ToastClickable side={ToastSide.TopLeft} radius={ToastRadius.None} description="None Radius">
-                None
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.TopCenter} radius={ToastRadius.Small} description="Small Radius">
-                Small
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.TopRight} description="Default Radius">
-                Default
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.BottomLeft} radius={ToastRadius.Medium} description="Medium Radius">
-                Medium
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.BottomRight} radius={ToastRadius.Large} description="Large Radius">
-                Large
-            </ToastClickable>
-        </div>
-    );
-};
-
-export const FullWidth = () => {
-    return (
-        <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
-            <ToastClickable
-                side={ToastSide.TopCenter}
-                radius={ToastRadius.None}
-                fullWidth
-                sticky
-                description="Top full width without padding"
-            >
-                Top
-            </ToastClickable>
-
-            <ToastClickable
-                side={ToastSide.BottomCenter}
-                radius={ToastRadius.None}
-                fullWidth
-                sticky
-                description="Bottom full width without padding"
-            >
-                Bottom
-            </ToastClickable>
-        </div>
-    );
-};
-
-export const Color = () => {
-    return (
-        <div style={{display: "flex", gap: "10px"}}>
-            <ToastClickable side={ToastSide.TopLeft} color={ToastColor.Error} description="Error color">
-                Error
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.TopCenter} description="Default color">
-                Default
-            </ToastClickable>
-
-            <ToastClickable side={ToastSide.TopRight} color={ToastColor.Success} description="Success color">
-                Success
-            </ToastClickable>
-        </div>
-    );
-};

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,80 +0,0 @@
-import {Meta, StoryObj} from "@storybook/react";
-
-import {hideInTable} from "../../utils";
-
-import {Button} from "../index";
-
-import TooltipComponent from "./Tooltip";
-
-const meta: Meta<typeof TooltipComponent> = {
-    title: "Components/Tooltip",
-    component: TooltipComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        open: {
-            options: [true, false, undefined],
-            control: "select",
-            type: "boolean",
-            description: "The controlled open state of the tooltip. Must be used in conjunction with onOpenChange.",
-        },
-        side: {
-            options: ["top", "right", "bottom", "left"],
-            control: "select",
-            description:
-                "The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.",
-        },
-        align: {
-            options: ["start", "center", "end"],
-            control: "select",
-            description: "The preferred alignment against the trigger. May change when collisions occur.",
-        },
-        delayDuration: {
-            description:
-                "Override the duration given to the `Provider` to customise the open delay for a specific tooltip.",
-        },
-        arrowWidth: {
-            description: "The width of the arrow in pixels.",
-        },
-        arrowHeight: {
-            description: "The height of the arrow in pixels.",
-        },
-        arrowPadding: {
-            description:
-                "The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.",
-        },
-        alignOffset: {
-            description: 'An offset in pixels from the "start" or "end" alignment options.',
-        },
-        avoidCollisions: {
-            description:
-                "When true, overrides the side and align preferences to prevent collisions with boundary edges.",
-        },
-        matchTriggerWidth: {
-            description: "Whether to set the content width equal to the trigger width",
-        },
-
-        arrowClassName: hideInTable,
-        contentClassName: hideInTable,
-        children: hideInTable,
-    },
-};
-
-export default meta;
-
-export const Tooltip: StoryObj<typeof TooltipComponent> = {
-    args: {
-        content: "Tooltip content",
-        open: undefined,
-        align: "center",
-        alignOffset: 0,
-        side: "top",
-        sideOffset: 0,
-        arrowHeight: 5,
-        arrowWidth: 10,
-        arrowPadding: 0,
-        delayDuration: 700,
-        matchTriggerWidth: false,
-        avoidCollisions: true,
-        children: <Button style={{marginTop: "40px"}}>Button</Button>,
-    },
-};

package/src/components/View/View.stories.tsx

@@ -1,47 +0,0 @@
-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",
-    },
-};