adnbn-ui 0.0.1 → 0.0.2

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,63 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import {
+    Corner,
+    Root,
+    ScrollAreaProps as ScrollAreaRootProps,
+    Scrollbar,
+    Thumb,
+    Viewport,
+} from "@radix-ui/react-scroll-area";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./scroll-area.module.scss";
+
+export interface ScrollAreaProps extends ScrollAreaRootProps {
+    xOffset?: number;
+    yOffset?: number;
+    thumbClassName?: string;
+    cornerClassName?: string;
+    viewportClassName?: string;
+    scrollbarClassName?: string;
+}
+
+const ScrollArea: FC<ScrollAreaProps> = props => {
+    const {
+        xOffset,
+        yOffset,
+        children,
+        className,
+        thumbClassName,
+        cornerClassName,
+        viewportClassName,
+        scrollbarClassName,
+        ...other
+    } = {...useComponentProps("scrollArea"), ...props};
+
+    return (
+        <Root className={classnames(styles["scroll-area"], className)} {...other}>
+            <Viewport className={classnames(styles["scroll-area__viewport"], viewportClassName)}>{children}</Viewport>
+
+            <Scrollbar
+                orientation="vertical"
+                style={{padding: `0 ${xOffset}px`}}
+                className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
+            >
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+            </Scrollbar>
+
+            <Scrollbar
+                orientation="horizontal"
+                style={{padding: `${yOffset}px 0`}}
+                className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
+            >
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+            </Scrollbar>
+
+            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)} />
+        </Root>
+    );
+};
+
+export default memo(ScrollArea);

package/src/components/ScrollArea/index.ts

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

package/src/components/ScrollArea/scroll-area.module.scss

@@ -0,0 +1,54 @@
+$root: scroll-area;
+
+.#{$root} {
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &__viewport {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__scrollbar {
+    display: flex;
+    user-select: none;
+    touch-action: none;
+    padding: var(--scroll-area-scrollbar-padding, 3px);
+    background: var(--scroll-area-scrollbar-bg-color, transparent);
+    transition: background var(--transition-speed-sm) ease-in-out;
+
+    &:hover {
+      background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--scroll-area-scrollbar-size, 9px);
+      padding: 0 var(--scroll-area-scrollbar-offset, var(--scroll-area-scrollbar-x-offset, 2px));
+    }
+
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+      height: var(--scroll-area-scrollbar-size, 9px);
+      padding: var(--scroll-area-scrollbar-offset, var(--scroll-area-scrollbar-y-offset, 2px)) 0;
+    }
+  }
+
+  &__thumb {
+    flex: 1;
+    position: relative;
+    background: var(--scroll-area-thumb-bg-color);
+    border-radius: var(--scroll-area-thumb-border-radius, 100px);
+
+    &:hover {
+      background: var(--scroll-area-thumb-bg-color-hover, var(--scroll-area-thumb-bg-color));
+    }
+  }
+
+  &__corner {
+    background: var(--scroll-area-scrollbar-bg-color, transparent);
+
+    &:hover {
+      background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
+    }
+  }
+}

package/src/components/SvgSprite/SvgSprite.tsx

@@ -0,0 +1,21 @@
+import React, {ComponentProps, FC, memo} from "react";
+
+export interface SvgSpriteProps {
+    icons: Record<string, FC<ComponentProps<"svg">>>;
+}
+
+const SvgSprite: FC<SvgSpriteProps> = ({icons}) => {
+    return (
+        <svg style={{display: "none"}} aria-hidden="true">
+            <defs>
+                {Object.entries(icons).map(([name, Icon]) => (
+                    <symbol id={name} key={name} viewBox="0 0 24 24">
+                        <Icon />
+                    </symbol>
+                ))}
+            </defs>
+        </svg>
+    );
+};
+
+export default memo(SvgSprite);

package/src/components/SvgSprite/index.ts

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

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

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

@@ -0,0 +1,23 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import {Root, SwitchProps as SwitchRootProps, Thumb} from "@radix-ui/react-switch";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./switch.module.scss";
+
+export interface SwitchProps extends SwitchRootProps {
+    thumbClassName?: string;
+}
+
+const Switch: FC<SwitchProps> = props => {
+    const {className, thumbClassName, ...other} = {...useComponentProps("switch"), ...props};
+
+    return (
+        <Root {...other} className={classnames(styles["switch"], className)}>
+            <Thumb className={classnames(styles["switch__thumb"], thumbClassName)} />
+        </Root>
+    );
+};
+
+export default memo(Switch);

package/src/components/Switch/index.ts

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

package/src/components/Switch/switch.module.scss

@@ -0,0 +1,65 @@
+@use "../../styles/mixins" as dir;
+
+@function switch-width() {
+  @return var(--switch-width, 36px);
+}
+
+@function switch-height() {
+  @return var(--switch-height, 22px);
+}
+
+@function switch-thumb-width() {
+  @return var(--switch-thumb-width, 18px);
+}
+
+@function switch-thumb-height() {
+  @return var(--switch-thumb-height, 18px);
+}
+
+$root: switch;
+
+.#{$root} {
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  width: switch-width();
+  height: switch-height();
+  border-radius: var(--switch-border-radius, 9999px);
+  background: var(--switch-bg-color, #bbb);
+  will-change: background;
+  transition: background var(--transition-speed-sm);
+
+  &[data-state="checked"] {
+    background-color: var(--switch-cheked-bg-color, var(--primary-color));
+  }
+
+  &:disabled {
+    opacity: var(--switch-disabled-opacity, 0.6);
+    cursor: default;
+  }
+
+  &__thumb {
+    box-sizing: border-box;
+    display: block;
+    width: switch-thumb-width();
+    height: switch-thumb-height();
+    transform: translateX(calc((#{switch-height()} - #{switch-thumb-height()}) / 2));
+    background-color: var(--switch-thumb-bg-color, white);
+    border-radius: var(--switch-border-radius, 9999px);
+    will-change: transform;
+    transition: transform var(--transition-speed-sm) ease-in-out;
+
+    @include dir.rtl {
+      margin-right: calc(#{switch-width()} / 2);
+    }
+
+    &[data-state="checked"] {
+      transform: translateX(
+        calc(#{switch-width()} - #{switch-thumb-width()} - (#{switch-height()} - #{switch-thumb-height()}) / 2)
+      );
+    }
+  }
+}

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

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

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,71 @@
+import React, {ComponentProps, FC, memo} from "react";
+import classnames from "classnames";
+import {useComponentProps} from "../../providers";
+
+import styles from "./tag.module.scss";
+
+export enum TagVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Soft = "soft",
+}
+
+export enum TagColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export enum TagSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum TagRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface TagProps extends ComponentProps<"span"> {
+    size?: TagSize;
+    color?: TagColor;
+    radius?: TagRadius;
+    variant?: TagVariant;
+    clickable?: boolean;
+}
+
+const Tag: FC<TagProps> = props => {
+    const {
+        size,
+        color,
+        radius,
+        variant = TagVariant.Contained,
+        clickable,
+        children,
+        className,
+        ...other
+    } = {...useComponentProps("tag"), ...props};
+
+    return (
+        <span
+            {...other}
+            className={classnames(
+                styles["tag"],
+                {
+                    [styles[`tag--${variant}`]]: variant,
+                    [styles[`tag--${radius}-radius`]]: radius,
+                    [styles[`tag--${color}-color`]]: color,
+                    [styles[`tag--${size}-size`]]: size,
+                    [styles["tag--clickable"]]: clickable,
+                },
+                className
+            )}
+        >
+            {children}
+        </span>
+    );
+};
+
+export default memo(Tag);

package/src/components/Tag/index.ts

@@ -0,0 +1,2 @@
+export {default as Tag, TagVariant, TagRadius, TagColor, TagSize} from "./Tag";
+export type {TagProps} from "./Tag";

package/src/components/Tag/tag.module.scss

@@ -0,0 +1,118 @@
+$root: tag;
+
+.#{$root} {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tag-font-size, 13px);
+  font-weight: var(--tag-font-weight, 500);
+  line-height: var(--tag-line-height, 1rem);
+  letter-spacing: var(--tag-letter-spacing, 0.5px);
+  padding: var(--tag-padding, 4px 8px);
+  border-radius: var(--tag-border-radius, 999px);
+  color: var(--tag-color, var(--text-secondary-color));
+  background: var(--tag-bg-color, var(--bg-secondary-color));
+
+  &--clickable {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(var(--tag-scale, 0.98));
+      user-select: none;
+    }
+  }
+
+  // Variants
+  &--contained {
+    color: var(--tag-contained-color, var(--tag-color, var(--text-secondary-color)));
+    background: var(--tag-contained-bg-color, var(--tag-bg-color, var(--bg-secondary-color)));
+    border: none;
+
+    &.#{$root}--primary-color {
+      color: var(--tag-contained-primary-color, #fff);
+      background: var(--primary-color);
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--tag-contained-secondary-color, #fff);
+      background: var(--secondary-color);
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--tag-contained-accent-color, #fff);
+      background: var(--accent-color);
+    }
+  }
+
+  &--outlined {
+    color: var(--tag-outlined-color, var(--tag-color, var(--text-secondary-color)));
+    border: var(--tag-border-width, 1px) solid
+      var(--tag-outlined-border-color, var(--tag-outlined-color, var(--text-secondary-color)));
+    background: none;
+
+    &.#{$root}--primary-color {
+      color: var(--primary-color);
+      border-color: var(--tag-outlined-border-primary-color, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--secondary-color);
+      border-color: var(--tag-outlined-border-secondary-color, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--accent-color);
+      border-color: var(--tag-outlined-border-accent-color, var(--accent-color));
+    }
+  }
+
+  &--soft {
+    color: var(--tag-soft-color, var(--tag-color, var(--text-secondary-color)));
+    background-color: color-mix(in srgb, white 30%, var(--tag-bg-color, var(--bg-secondary-color)));
+
+    &.#{$root}--primary-color {
+      color: var(--tag-soft-primary-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--tag-soft-secondary-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--tag-soft-accent-color, #fff);
+      background-color: color-mix(in srgb, white 30%, var(--accent-color));
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    padding: var(--tag-padding, 3px 6px);
+    font-size: var(--tag-font-size-sm, 12px);
+  }
+
+  &--medium-size {
+    padding: var(--tag-padding, 5px 10px);
+    font-size: var(--tag-font-size-sm, 14px);
+  }
+
+  &--large-size {
+    padding: var(--tag-padding, 6px 12px);
+    font-size: var(--tag-font-size-sm, 16px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--tag-border-radius-sm, 5px);
+  }
+
+  &--medium-radius {
+    border-radius: var(--tag-border-radius-md, 8px);
+  }
+
+  &--large-radius {
+    border-radius: var(--tag-border-radius-lg, 10px);
+  }
+}