adnbn-ui 0.0.1 → 0.1.0

package/src/components/Header/header.module.scss

@@ -0,0 +1,56 @@
+$root: header;
+
+.#{$root} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  gap: var(--header-gap, 10px);
+  padding: var(--header-padding, var(--side-padding-sm));
+  padding-bottom: 0;
+
+  &__wrap {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    gap: var(--header-wrap-gap, 10px);
+  }
+
+  &__title,
+  &__subtitle {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--header-title-gap, 12px);
+    color: var(--header-title-color, var(--text-primary-color));
+    font-size: var(--header-title-font-size, 25px);
+    font-family: var(--header-title-font-family, var(--font-family)), "sans-serif";
+    font-weight: var(--header-title-font-weight, 700);
+    line-height: var(--header-title-line-height, 120%);
+    will-change: color;
+    transition: color var(--transition-speed);
+
+    .#{$root}--center & {
+      justify-content: center;
+    }
+  }
+
+  &__subtitle {
+    color: var(--header-subtitle-color, var(--text-secondary-color));
+    font-size: var(--header-subtitle-font-size, 14px);
+    font-family: var(--header-subtitle-font-family, var(--font-family)), "sans-serif";
+    font-weight: var(--header-subtitle-font-weight, 400);
+    line-height: var(--header-subtitle-line-height, 120%);
+    white-space: wrap;
+
+    .#{$root}--center & {
+      text-align: center;
+    }
+  }
+}

package/src/components/Header/index.ts

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

package/src/components/Highlight/Highlight.stories.tsx

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

@@ -0,0 +1,40 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import Highlighter, {HighlighterProps} from "react-highlight-words";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./highlight.module.scss";
+
+export enum HighlightColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}
+
+export interface HighlightProps extends HighlighterProps {
+    color?: HighlightColor;
+}
+
+const Highlight: FC<HighlightProps> = props => {
+    const {color, activeClassName, highlightClassName, ...other} = {
+        ...useComponentProps("highlight"),
+        ...props,
+    };
+
+    return (
+        <Highlighter
+            highlightClassName={classnames(
+                styles["highlight"],
+                {
+                    [styles[`highlight--${color}-color`]]: color,
+                },
+                highlightClassName
+            )}
+            activeClassName={classnames(styles["highlight--active"], activeClassName)}
+            {...other}
+        />
+    );
+};
+
+export default memo(Highlight);

package/src/components/Highlight/highlight.module.scss

@@ -0,0 +1,47 @@
+$root: highlight;
+
+.#{$root} {
+  font-size: var(--highlight-font-size, inherit);
+  font-weight: var(--highlight-font-weight, inherit);
+  font-family: var(--highlight-font-family, inherit), sans-serif;
+  color: var(--highlight-color, #fff);
+  background-color: var(--highlight-bg-color, #ffd60a);
+  padding: var(--highlight-y-padding, 2px) var(--highlight-x-padding, 3px);
+  margin: 0 calc(-1 * var(--highlight-x-padding, 3px));
+  border-radius: var(--highlight-border-radius, 2px);
+
+  &--primary-color {
+    color: var(--highlight-primary-color, #fff);
+    background-color: var(--primary-color);
+  }
+
+  &--secondary-color {
+    color: var(--highlight-secondary-color, #fff);
+    background-color: var(--secondary-color);
+  }
+
+  &--accent-color {
+    color: var(--highlight-accent-color, #fff);
+    background-color: var(--accent-color);
+  }
+
+  &--active {
+    color: var(--highlight-active-color, var(--highlight-color, #fff));
+    background-color: var(--highlight-active-bg-color, #ff801f);
+
+    &.#{$root}--primary-color {
+      color: var(--highlight-active-primary-color, var(--highlight-primary-color, #fff));
+      background-color: color-mix(in srgb, black 40%, var(--primary-color));
+    }
+
+    &.#{$root}--secondary-color {
+      color: var(--highlight-active-secondary-color, var(--highlight-secondary-color, #fff));
+      background-color: color-mix(in srgb, black 40%, var(--secondary-color));
+    }
+
+    &.#{$root}--accent-color {
+      color: var(--highlight-active-accent-color, var(--highlight-accent-color, #fff));
+      background-color: color-mix(in srgb, black 40%, var(--accent-color));
+    }
+  }
+}

package/src/components/Highlight/index.ts

@@ -0,0 +1,2 @@
+export {default as Highlight, HighlightColor} from "./Highlight";
+export type {HighlightProps} from "./Highlight";

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,46 @@
+import React, {FC, memo, useEffect, ComponentProps} from "react";
+import classnames from "classnames";
+import {useComponentProps, useIcons} from "../../providers";
+
+import styles from "./icon.module.scss";
+
+export interface IconProps extends ComponentProps<"svg"> {
+    name: string;
+    size?: number;
+}
+
+const Icon: FC<IconProps> = props => {
+    const {
+        name,
+        className,
+        size = 24,
+        width = size,
+        height = size,
+        ...other
+    } = {...useComponentProps("icon"), ...props};
+
+    const {icons, registerIcon} = useIcons();
+
+    useEffect(() => icons[name] && registerIcon(name), [name, icons, registerIcon]);
+
+    if (!icons[name]) {
+        console.warn(`Icon "${name}" not found.`);
+
+        return (
+            <span
+                className={styles["icon--default"]}
+                style={{fontSize: `${width}px`, lineHeight: `${width}px`, width, height}}
+            >
+                ⁇
+            </span>
+        );
+    }
+
+    return (
+        <svg className={classnames(styles["icon"], className)} width={width} height={height} {...other}>
+            <use href={`#${name}`} />
+        </svg>
+    );
+};
+
+export default memo(Icon);

package/src/components/Icon/icon.module.scss

@@ -0,0 +1,17 @@
+.icon {
+  color: var(--icon-color);
+  transition:
+    transform var(--transition-speed-sm),
+    color var(--transition-speed-sm);
+
+  &:hover {
+    color: var(--icon-color-hover);
+    transform: scale(var(--icon-scale, 1));
+  }
+
+  &--default {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Icon/index.ts

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

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

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

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,65 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+
+import {Tooltip, TooltipProps} from "../Tooltip";
+import {BaseButton, BaseButtonProps} from "../BaseButton";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./icon-button.module.scss";
+
+export enum IconButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Ghost = "ghost",
+}
+
+export enum IconButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export enum IconButtonRadius {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+}
+
+export interface IconButtonProps extends BaseButtonProps {
+    size?: IconButtonSize;
+    radius?: IconButtonRadius;
+    variant?: IconButtonVariant;
+    tooltip?: Omit<TooltipProps, "children">;
+}
+
+const IconButton: FC<IconButtonProps> = props => {
+    const {size, radius, variant, tooltip, className, children, ...other} = {
+        ...useComponentProps("iconButton"),
+        ...props,
+    };
+
+    const iconButton = (
+        <BaseButton
+            {...other}
+            className={classnames(
+                styles["icon-button"],
+                {
+                    [styles[`icon-button--${variant}`]]: variant,
+                    [styles[`icon-button--${size}-size`]]: size,
+                    [styles[`icon-button--${radius}-radius`]]: radius,
+                },
+                className
+            )}
+        >
+            {children}
+        </BaseButton>
+    );
+    if (tooltip) {
+        return <Tooltip {...tooltip}>{iconButton}</Tooltip>;
+    }
+
+    return iconButton;
+};
+
+export default memo(IconButton);

package/src/components/IconButton/icon-button.module.scss

@@ -0,0 +1,86 @@
+$root: icon-button;
+
+.#{$root} {
+  border-radius: var(--icon-button-border-radius, 100%);
+  padding: var(--icon-button-padding, 5px);
+  width: var(--icon-button-size, 25px);
+  height: var(--icon-button-size, 25px);
+  color: var(--icon-button-color);
+  background: none;
+
+  &:hover:not(:disabled) {
+    color: var(--icon-button-color-hover);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(var(--icon-button-scale, 0.95));
+  }
+
+  &:disabled {
+    opacity: var(--icon-button-disabled-opacity, 0.75);
+    cursor: default;
+  }
+
+  // Variants
+  &--contained {
+    color: var(--icon-button-contained-color, var(--icon-button-color));
+    background: var(--icon-button-contained-bg-color, var(--icon-button-bg-color));
+
+    &:hover:not(:disabled) {
+      color: var(--icon-button-contained-color-hover, var(--icon-button-color-hover));
+      background-color: var(--icon-button-contained-bg-color-hover, var(--icon-button-bg-color-hover));
+    }
+  }
+
+  &--outlined {
+    color: var(--icon-button-outlined-color, var(--icon-button-color));
+    border-width: var(--icon-button-border-width, 1px);
+    border-color: var(--icon-button-border-color);
+    border-style: solid;
+    background: none;
+
+    &:hover:not(:disabled) {
+      color: var(--icon-button-outlined-color-hover, var(--icon-button-color-hover));
+      background-color: var(--icon-button-outlined-bg-color-hover, var(--icon-button-bg-color-hover));
+    }
+  }
+
+  &--ghost {
+    color: var(--icon-button-ghost-color, var(--icon-button-color));
+    background-color: transparent;
+
+    &:hover:not(:disabled) {
+      color: var(--icon-button-ghost-color-hover, var(--icon-button-color-hover));
+      background-color: var(--icon-button-ghost-bg-color-hover, var(--icon-button-bg-color-hover));
+    }
+  }
+
+  // Sizes
+  &--small-size {
+    width: var(--icon-button-size-sm, 20px);
+    height: var(--icon-button-size-sm, 20px);
+  }
+
+  &--medium-size {
+    width: var(--icon-button-size-md, 35px);
+    height: var(--icon-button-size-md, 35px);
+  }
+
+  &--large-size {
+    width: var(--icon-button-size-lg, 45px);
+    height: var(--icon-button-size-lg, 45px);
+  }
+
+  //Radius
+  &--small-radius {
+    border-radius: var(--icon-button-border-radius-sm, 20%);
+  }
+
+  &--medium-radius {
+    border-radius: var(--icon-button-border-radius-md, 30%);
+  }
+
+  &--large-radius {
+    border-radius: var(--icon-button-border-radius-lg, 40%);
+  }
+}

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export {default as IconButton, IconButtonVariant, IconButtonRadius, IconButtonSize} from "./IconButton";
+export type {IconButtonProps} from "./IconButton";