adnbn-ui 0.0.1 → 0.0.2

package/src/components/BaseButton/BaseButton.tsx

@@ -0,0 +1,36 @@
+import React, {ComponentProps, FC, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+
+import styles from "./base-button.module.scss";
+
+export interface BaseButtonProps extends ComponentProps<"button"> {
+    after?: ReactNode;
+    before?: ReactNode;
+    afterClassName?: string;
+    beforeClassName?: string;
+    childrenClassName?: string;
+}
+
+const BaseButton: FC<BaseButtonProps> = props => {
+    const {after, before, children, className, afterClassName, beforeClassName, childrenClassName, ...other} = props;
+
+    return (
+        <button className={classnames(styles["base-button"], className)} {...other}>
+            {cloneOrCreateElement(before, {
+                className: classnames(styles["base-button__before"], beforeClassName),
+            })}
+
+            {cloneOrCreateElement(children, {
+                className: classnames(styles["base-button__children"], childrenClassName),
+            })}
+
+            {cloneOrCreateElement(after, {
+                className: classnames(styles["base-button__after"], afterClassName),
+            })}
+        </button>
+    );
+};
+
+export default memo(BaseButton);

package/src/components/BaseButton/base-button.module.scss

@@ -0,0 +1,24 @@
+.base-button {
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  gap: var(--base-button-gap, 8px);
+  will-change: background, color, transform;
+  transition:
+    background var(--transition-speed-sm),
+    color var(--transition-speed-sm),
+    transform var(--transition-speed-sm);
+
+  &__after,
+  &__before,
+  &__children {
+    position: relative;
+    display: inline;
+  }
+}

package/src/components/BaseButton/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,148 @@
+import {Meta, StoryObj} from "@storybook/react";
+
+import {capitalizeFirstLetter, hideInTable} from "../../utils";
+
+import ButtonComponent, {ButtonColor, ButtonRadius, ButtonSize, ButtonVariant} from "./Button";
+
+const variants: ButtonVariant[] = [ButtonVariant.Contained, ButtonVariant.Outlined, ButtonVariant.Text];
+const colors: (ButtonColor | "default")[] = ["default", ButtonColor.Primary, ButtonColor.Secondary, ButtonColor.Accent];
+const sizes: (ButtonSize | "default")[] = [ButtonSize.Small, "default", ButtonSize.Medium, ButtonSize.Large];
+const radius: (ButtonRadius | "default")[] = [
+    ButtonRadius.Small,
+    "default",
+    ButtonRadius.Medium,
+    ButtonRadius.Large,
+    ButtonRadius.Full,
+];
+
+const meta: Meta<typeof ButtonComponent> = {
+    title: "Components/Button",
+    component: ButtonComponent,
+    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"},
+        },
+
+        after: hideInTable,
+        before: hideInTable,
+        afterClassName: hideInTable,
+        beforeClassName: hideInTable,
+        childrenClassName: hideInTable,
+    },
+};
+
+export default meta;
+
+export const Button: StoryObj<typeof ButtonComponent> = {
+    args: {
+        children: "Button",
+    },
+};
+
+export const VariantColor = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                colors.map(color => (
+                    <div key={`${variant}-${color}`}>
+                        <ButtonComponent variant={variant} color={color !== "default" ? color : undefined}>
+                            {capitalizeFirstLetter(color)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const VariantColorDisabled = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+            {variants.map(variant =>
+                colors.map(color => (
+                    <div key={`${variant}-${color}`}>
+                        <ButtonComponent disabled variant={variant} color={color !== "default" ? color : undefined}>
+                            {capitalizeFirstLetter(color)}
+                        </ButtonComponent>
+                    </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}`}>
+                        <ButtonComponent variant={variant} size={size !== "default" ? size : undefined}>
+                            {capitalizeFirstLetter(size)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const VariantRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            {variants.map(variant =>
+                radius.map(radius => (
+                    <div key={`${variant}-${radius}`}>
+                        <ButtonComponent variant={variant} radius={radius !== "default" ? radius : undefined}>
+                            {capitalizeFirstLetter(radius)}
+                        </ButtonComponent>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+};
+
+export const SizeRadius = () => {
+    return (
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
+            <span className="item-card__title"> Radius \ Size </span>
+            {sizes.map(size => (
+                <span key={size} className="item-card__title">
+                    {capitalizeFirstLetter(size)} size
+                </span>
+            ))}
+            {radius.map(radius => (
+                <>
+                    <span key={radius} className="item-card__title">
+                        {capitalizeFirstLetter(radius)} radius
+                    </span>
+                    {sizes.map(size => (
+                        <div key={`${size}-${radius}`} className="item-card">
+                            <ButtonComponent
+                                size={size !== "default" ? size : undefined}
+                                radius={radius !== "default" ? radius : undefined}
+                            >
+                                Button
+                            </ButtonComponent>
+                        </div>
+                    ))}
+                </>
+            ))}
+        </div>
+    );
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,73 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import {BaseButton, BaseButtonProps} from "../BaseButton";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./button.module.scss";
+
+export enum ButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Text = "text",
+}
+
+export enum ButtonColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export enum ButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum ButtonRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    Full = "full",
+}
+
+export interface ButtonProps extends BaseButtonProps {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    radius?: ButtonRadius;
+}
+
+const Button: FC<ButtonProps> = props => {
+    const {
+        variant = ButtonVariant.Contained,
+        color,
+        size,
+        radius,
+        childrenClassName,
+        className,
+        children,
+        ...other
+    } = {...useComponentProps("button"), ...props};
+
+    return (
+        <BaseButton
+            {...other}
+            className={classnames(
+                styles["button"],
+                {
+                    [styles[`button--${variant}`]]: variant,
+                    [styles[`button--${radius}-radius`]]: radius,
+                    [styles[`button--${color}-color`]]: color,
+                    [styles[`button--${size}-size`]]: size,
+                },
+                className
+            )}
+            childrenClassName={classnames(styles["button__text"], childrenClassName)}
+        >
+            {children}
+        </BaseButton>
+    );
+};
+
+export default memo(Button);

package/src/components/Button/button.module.scss

@@ -0,0 +1,140 @@
+$root: button;
+
+.#{$root} {
+  font-family: var(--button-font-family, var(--font-family)), sans-serif;
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, var(--font-size, 14px));
+  letter-spacing: var(--button-letter-spacing, 0.5px);
+  line-height: var(--button-line-height, var(--line-height, 14px));
+  height: var(--button-height, 34px);
+  border-radius: var(--button-border-radius, 10px);
+  padding: var(--button-padding, 0 16px);
+
+  &:active:not(:disabled) {
+    transform: scale(var(--button-scale, 0.98));
+  }
+
+  &:disabled {
+    opacity: var(--button-disabled-opacity, 0.75);
+    cursor: default;
+  }
+
+  // Variants
+  &--contained {
+    color: var(--button-contained-text-color, var(--bg-primary-color));
+    background: var(--button-contained-bg-color, var(--text-primary-color));
+
+    &.#{$root}--primary-color {
+      color: #fff;
+      background: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: #fff;
+      background: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: #fff;
+      background: var(--accent-color);
+    }
+  }
+
+  &--outlined {
+    color: var(--button-outlined-text-color, var(--text-primary-color));
+    border: 1px solid var(--button-outlined-border-color, var(--button-outlined-text-color, var(--text-primary-color)));
+    background: none;
+
+    &:hover {
+      background-color: var(--button-outlined-bg-color-hover);
+    }
+
+    &:active {
+      background-color: var(--button-outlined-bg-color-active);
+    }
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+      border-color: var(--button-outlined-border-primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+      border-color: var(--button-outlined-border-secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+      border-color: var(--button-outlined-border-accent-color);
+    }
+  }
+
+  &--text {
+    color: var(--button-text-text-color, var(--text-primary-color));
+    background-color: transparent;
+
+    &:hover {
+      color: var(--button-text-text-color-hover, var(--text-secondary-color));
+    }
+
+    &:active {
+      color: var(--button-text-text-color-active, var(--text-secondary-color));
+    }
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    height: var(--button-height-sm, 24px);
+    font-size: var(--button-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    height: var(--button-height-md, 44px);
+    font-size: var(--button-font-size-sm, 16px);
+  }
+
+  &--large-size {
+    height: var(--button-height-lg, 54px);
+    min-width: 95px;
+    font-size: var(--button-font-size-sm, 18px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--button-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--button-border-radius-md, 12px);
+  }
+
+  &--large-radius {
+    border-radius: var(--button-border-radius-lg, 15px);
+  }
+
+  &--full-radius {
+    border-radius: var(--button-height, 999px);
+  }
+
+  &__text {
+    position: relative;
+    z-index: 3;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: var(--button-max-width, 160px);
+    line-height: initial;
+  }
+}

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export {default as Button, ButtonVariant, ButtonRadius, ButtonColor, ButtonSize} from "./Button";
+export type {ButtonProps} from "./Button";

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

@@ -0,0 +1,180 @@
+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/Checkbox/Checkbox.tsx

@@ -0,0 +1,71 @@
+import React, {FC, memo, ReactElement} from "react";
+import classnames from "classnames";
+import {CheckboxProps as CheckboxRootProps, Indicator, Root} from "@radix-ui/react-checkbox";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./checkbox.module.scss";
+
+export type {CheckedState} from "@radix-ui/react-checkbox";
+
+export enum CheckboxVariant {
+    Classic = "classic",
+    Soft = "soft",
+}
+
+export enum CheckboxSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum CheckboxRadius {
+    Small = "small",
+    Large = "large",
+}
+
+export interface CheckboxProps extends CheckboxRootProps {
+    indicatorClassName?: string;
+    size?: CheckboxSize;
+    radius?: CheckboxRadius;
+    variant?: CheckboxVariant;
+    checkedIcon?: ReactElement;
+    indeterminateIcon?: ReactElement;
+}
+
+const Checkbox: FC<CheckboxProps> = props => {
+    const {
+        checked,
+        size,
+        radius,
+        variant,
+        className,
+        indicatorClassName,
+        checkedIcon = "✔",
+        indeterminateIcon = "―",
+        ...other
+    } = {...useComponentProps("checkbox"), ...props};
+
+    return (
+        <Root
+            {...other}
+            checked={checked}
+            className={classnames(
+                styles["checkbox"],
+                {
+                    [styles[`checkbox--${variant}`]]: variant,
+                    [styles[`checkbox--${radius}-radius`]]: radius,
+                    [styles[`checkbox--${size}-size`]]: size,
+                },
+                className
+            )}
+        >
+            <Indicator className={classnames(styles["checkbox__indicator"], indicatorClassName)}>
+                {checked === "indeterminate" && indeterminateIcon}
+                {checked === true && checkedIcon}
+            </Indicator>
+        </Root>
+    );
+};
+
+export default memo(Checkbox);