adnbn-ui 0.0.2 → 0.1.1

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,180 +0,0 @@
-import {useState} from "react";
-import {Meta, StoryObj} from "@storybook/react";
-
-import {capitalizeFirstLetter, hideInTable} from "../../utils";
-
-import CheckboxComponent, {CheckboxRadius, CheckboxSize, CheckboxVariant, CheckedState} from "./Checkbox";
-
-const variants: (CheckboxVariant | "default")[] = ["default", CheckboxVariant.Classic, CheckboxVariant.Soft];
-const size: (CheckboxSize | "default")[] = [CheckboxSize.Small, "default", CheckboxSize.Medium, CheckboxSize.Large];
-const radius: (CheckboxRadius | "default")[] = [CheckboxRadius.Small, "default", CheckboxRadius.Large];
-
-const meta: Meta<typeof CheckboxComponent> = {
-    title: "Components/Checkbox",
-    component: CheckboxComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        checked: {
-            options: [true, false, "indeterminate"],
-            control: {type: "select"},
-        },
-        variant: {
-            options: variants,
-            control: {type: "select"},
-        },
-        size: {
-            options: size,
-            control: {type: "select"},
-        },
-        radius: {
-            options: radius,
-            control: {type: "select"},
-        },
-
-        checkedIcon: hideInTable,
-        indeterminateIcon: hideInTable,
-        children: hideInTable,
-        className: hideInTable,
-        indicatorClassName: hideInTable,
-    },
-};
-
-export default meta;
-
-export const Checkbox: StoryObj<typeof CheckboxComponent> = {
-    args: {
-        checked: true,
-        disabled: false,
-        variant: CheckboxVariant.Classic,
-    },
-};
-
-export const CheckboxClickable = () => {
-    const [checked, setChecked] = useState<CheckedState>("indeterminate");
-
-    return <CheckboxComponent variant={CheckboxVariant.Classic} checked={checked} onCheckedChange={setChecked} />;
-};
-
-export const Variant = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {variants.map(variant => (
-                <span key={variant} className="item-card__title">
-                    {capitalizeFirstLetter(variant)}
-                </span>
-            ))}
-
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <CheckboxComponent variant={variant !== "default" ? variant : undefined} checked={false} />
-                </div>
-            ))}
-
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <CheckboxComponent variant={variant !== "default" ? variant : undefined} checked={true} />
-                </div>
-            ))}
-
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <CheckboxComponent variant={variant !== "default" ? variant : undefined} checked="indeterminate" />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const VariantDisabled = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {variants.map(variant => (
-                <span key={variant} className="item-card__title">
-                    {capitalizeFirstLetter(variant)}
-                </span>
-            ))}
-
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <CheckboxComponent disabled variant={variant !== "default" ? variant : undefined} checked={false} />
-                </div>
-            ))}
-
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <CheckboxComponent disabled variant={variant !== "default" ? variant : undefined} checked={true} />
-                </div>
-            ))}
-
-            {variants.map(variant => (
-                <div key={variant} className="item-card">
-                    <CheckboxComponent
-                        disabled
-                        variant={variant !== "default" ? variant : undefined}
-                        checked="indeterminate"
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Size = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
-            {size.map(size => (
-                <span key={size} className="item-card__title">
-                    {capitalizeFirstLetter(size)}
-                </span>
-            ))}
-
-            {size.map(size => (
-                <div key={size} className="item-card">
-                    <CheckboxComponent size={size !== "default" ? size : undefined} checked={false} />
-                </div>
-            ))}
-
-            {size.map(size => (
-                <div key={size} className="item-card">
-                    <CheckboxComponent size={size !== "default" ? size : undefined} checked={true} />
-                </div>
-            ))}
-
-            {size.map(size => (
-                <div key={size} className="item-card">
-                    <CheckboxComponent size={size !== "default" ? size : undefined} checked="indeterminate" />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const Radius = () => {
-    return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(3, auto)"}}>
-            {radius.map(radius => (
-                <span key={radius} className="item-card__title">
-                    {capitalizeFirstLetter(radius)}
-                </span>
-            ))}
-
-            {radius.map(radius => (
-                <div key={radius} className="item-card">
-                    <CheckboxComponent radius={radius !== "default" ? radius : undefined} checked={false} />
-                </div>
-            ))}
-
-            {radius.map(radius => (
-                <div key={radius} className="item-card">
-                    <CheckboxComponent radius={radius !== "default" ? radius : undefined} checked={true} />
-                </div>
-            ))}
-
-            {radius.map(radius => (
-                <div key={radius} className="item-card">
-                    <CheckboxComponent radius={radius !== "default" ? radius : undefined} checked="indeterminate" />
-                </div>
-            ))}
-        </div>
-    );
-};

package/src/components/Drawer/Drawer.stories.tsx

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

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

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

@@ -1,83 +0,0 @@
-import {Meta, StoryObj} from "@storybook/react";
-
-import {capitalizeFirstLetter, hideInTable} from "../../utils";
-
-import HighlightComponent, {HighlightColor} from "./Highlight";
-
-const colors: (HighlightColor | "default")[] = [
-    "default",
-    HighlightColor.Primary,
-    HighlightColor.Secondary,
-    HighlightColor.Accent,
-];
-const searchWords = ["Adjust", "volume", "switch", "audio"];
-const textToHighlight = "Adjust the current tab's volume with the slider. Switch to any audio tab in one click";
-
-const meta: Meta<typeof HighlightComponent> = {
-    title: "Components/Highlighter",
-    component: HighlightComponent,
-    tags: ["autodocs"],
-    argTypes: {
-        color: {
-            options: colors,
-            control: {type: "select"},
-        },
-        searchWords: {
-            description:
-                "Array of search words. String search terms are automatically cast to RegExps unless autoEscape is true.",
-        },
-        activeIndex: {
-            description: "Specify the match index that should be actively highlighted. Use along with activeClassName",
-        },
-        caseSensitive: {
-            description: "Search should be case sensitive; defaults to false",
-        },
-        textToHighlight: {
-            description: "Text to highlight matches in",
-        },
-
-        style: hideInTable,
-        children: hideInTable,
-        className: hideInTable,
-    },
-    decorators: [
-        Story => (
-            <div style={{color: "var(--text-primary-color"}}>
-                <Story />
-            </div>
-        ),
-    ],
-};
-
-export default meta;
-
-export const Highlight: StoryObj<typeof HighlightComponent> = {
-    args: {
-        searchWords,
-        textToHighlight,
-        color: undefined,
-        activeIndex: 0,
-        caseSensitive: true,
-    },
-};
-
-export const Color = () => {
-    return (
-        <div>
-            {colors.map(color => (
-                <div key={color} style={{margin: "20px", display: "flex", alignItems: "center"}}>
-                    <span className="item-card__title" style={{width: "150px"}}>
-                        {capitalizeFirstLetter(color)} color
-                    </span>
-
-                    <HighlightComponent
-                        searchWords={searchWords}
-                        textToHighlight={textToHighlight}
-                        color={color !== "default" ? color : undefined}
-                        activeIndex={0}
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};

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

@@ -1,179 +0,0 @@
-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>
-    );
-};