addon-ui 0.3.0

package/src/components/Highlight/Highlight.tsx

@@ -0,0 +1,36 @@
+import React, {FC, memo} from "react";
+import classnames from "classnames";
+import Highlighter, {HighlighterProps} from "react-highlight-words";
+
+import {useComponentProps} from "../../providers";
+
+import {HighlightColor} from "./types";
+
+import styles from "./highlight.module.scss";
+
+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,48 @@
+$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;
+  line-height: var(--highlight-line-height, var(--line-height, 1 rem));
+  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 * from "./types";
+export {default as Highlight, type HighlightProps} from "./Highlight";

package/src/components/Highlight/types.ts

@@ -0,0 +1,5 @@
+export enum HighlightColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Accent = "accent",
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,46 @@
+import React, {memo, useEffect, ComponentProps, forwardRef, ForwardRefRenderFunction} 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: ForwardRefRenderFunction<SVGSVGElement, IconProps> = (props, ref) => {
+    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 ref={ref} className={classnames(styles["icon"], className)} width={width} height={height} {...other}>
+            <use href={`#${name}`} />
+        </svg>
+    );
+};
+
+export default memo(forwardRef(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 @@
+export {default as Icon, type IconProps} from "./Icon";

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,50 @@
+import React, {memo, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+
+import {Tooltip, TooltipProps} from "../Tooltip";
+import {BaseButton, BaseButtonProps} from "../BaseButton";
+
+import {useComponentProps} from "../../providers";
+
+import {IconButtonVariant, IconButtonSize, IconButtonRadius} from "./types";
+
+import styles from "./icon-button.module.scss";
+
+export interface IconButtonProps extends BaseButtonProps {
+    size?: IconButtonSize;
+    radius?: IconButtonRadius;
+    variant?: IconButtonVariant;
+    tooltip?: Omit<TooltipProps, "children">;
+}
+
+const IconButton: ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps> = (props, ref) => {
+    const {size, radius, variant, tooltip, className, children, ...other} = {
+        ...useComponentProps("iconButton"),
+        ...props,
+    };
+
+    const iconButton = (
+        <BaseButton
+            ref={ref}
+            {...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(forwardRef(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 * from "./types";
+export {default as IconButton, type IconButtonProps} from "./IconButton";

package/src/components/IconButton/types.ts

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

package/src/components/Layout/Provider.tsx

@@ -0,0 +1,60 @@
+import React, {
+    ComponentProps,
+    forwardRef,
+    ForwardRefRenderFunction,
+    PropsWithChildren,
+    useCallback,
+    useState,
+} from "react";
+
+import {expandType, LayoutContext} from "./context";
+
+import classnames from "classnames";
+
+import styles from "./layout.module.scss";
+
+export type LayoutProps = ComponentProps<"div">;
+
+const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<LayoutProps>> = (
+    {children, className, style, ...props},
+    ref
+) => {
+    const [isExpanded, setExpanded] = useState(false);
+    const [height, setHeight] = useState<number | string | undefined>(undefined);
+    const [width, setWidth] = useState<number | string | undefined>(undefined);
+
+    const expand = useCallback((value?: expandType) => {
+        setHeight(value?.height);
+        setWidth(value?.width);
+        setExpanded(true);
+    }, []);
+
+    const collapse = useCallback(() => {
+        setHeight(undefined);
+        setWidth(undefined);
+        setExpanded(false);
+    }, []);
+
+    return (
+        <LayoutContext.Provider value={{isExpanded, expand, collapse}}>
+            <div
+                ref={ref}
+                style={{minHeight: height, minWidth: width, ...style}}
+                className={classnames(
+                    styles["layout"],
+                    {
+                        [styles["layout--expanded"]]: isExpanded,
+                    },
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </LayoutContext.Provider>
+    );
+};
+
+Provider.displayName = "ViewportProvider";
+
+export default forwardRef(Provider);

package/src/components/Layout/context.ts

@@ -0,0 +1,24 @@
+import {createContext, useContext} from "react";
+
+export type expandType = {
+    height?: number | string;
+    width?: number | string;
+};
+
+export interface LayoutContract {
+    isExpanded?: boolean;
+
+    expand(value?: expandType): void;
+
+    collapse(): void;
+}
+
+export const LayoutContext = createContext<LayoutContract>({
+    isExpanded: false,
+    expand() {},
+    collapse() {},
+});
+
+LayoutContext.displayName = "LayoutContext";
+
+export const useLayout = () => useContext(LayoutContext);

package/src/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export {default as LayoutProvider, type LayoutProps} from "./Provider";
+export {useLayout} from "./context";

package/src/components/Layout/layout.module.scss

@@ -0,0 +1,17 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+  transition:
+    min-height var(--transition-speed-md) ease-in-out,
+    min-width var(--transition-speed-md) ease-in-out;
+
+  &--expanded {
+    min-height: var(--max-height);
+    min-width: var(--max-width);
+  }
+}

package/src/components/List/List.tsx

@@ -0,0 +1,24 @@
+import React, {ComponentProps, forwardRef, memo, ReactElement} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+
+import {ListItemProps} from "../ListItem";
+
+import styles from "./list.module.scss";
+
+export interface ListProps extends Omit<ComponentProps<"ul">, "children"> {
+    children: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
+}
+
+const List = forwardRef<HTMLUListElement, ListProps>((props, ref) => {
+    const {children, className, ...other} = {...useComponentProps("list"), ...props};
+
+    return (
+        <ul {...other} ref={ref} className={classnames(styles["list"], className)}>
+            {children}
+        </ul>
+    );
+});
+
+export default memo(List);

package/src/components/List/index.ts

@@ -0,0 +1 @@
+export {default as List, type ListProps} from "./List";

package/src/components/List/list.module.scss

@@ -0,0 +1,8 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,75 @@
+import React, {ComponentProps, forwardRef, JSX, memo, ReactNode} from "react";
+import classnames from "classnames";
+
+import {cloneOrCreateElement} from "../../utils";
+import {useComponentProps} from "../../providers";
+
+import styles from "./list-item.module.scss";
+
+type TagType = keyof JSX.IntrinsicElements;
+export type ListItemType = HTMLLIElement;
+
+export interface ListItemProps extends ComponentProps<"li"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    primary?: ReactNode;
+    secondary?: ReactNode;
+    leftTag?: TagType;
+    rightTag?: TagType;
+    primaryTag?: TagType;
+    secondaryTag?: TagType;
+    primaryClassName?: string;
+    secondaryClassName?: string;
+    centerClassName?: string;
+    leftClassName?: string;
+    rightClassName?: string;
+}
+
+const ListItem = forwardRef<ListItemType, ListItemProps>((props, ref) => {
+    const {
+        left,
+        right,
+        primary,
+        secondary,
+        leftTag = "div",
+        rightTag = "div",
+        primaryTag = "div",
+        secondaryTag = "div",
+        children,
+        className,
+        leftClassName,
+        rightClassName,
+        centerClassName,
+        primaryClassName,
+        secondaryClassName,
+        role = "list-item",
+        ...other
+    } = {...useComponentProps("listItem"), ...props};
+
+    return (
+        <li {...other} ref={ref} role={role} className={classnames(styles["list-item"], className)}>
+            {cloneOrCreateElement(left, {className: classnames(styles["list-item__left"], leftClassName)}, leftTag)}
+
+            {(primary || secondary) && (
+                <div className={classnames(styles["list-item__center"], centerClassName)}>
+                    {cloneOrCreateElement(
+                        primary,
+                        {className: classnames(styles["list-item__primary"], primaryClassName)},
+                        primaryTag
+                    )}
+                    {cloneOrCreateElement(
+                        secondary,
+                        {className: classnames(styles["list-item__secondary"], secondaryClassName)},
+                        secondaryTag
+                    )}
+                </div>
+            )}
+
+            {cloneOrCreateElement(right, {className: classnames(styles["list-item__right"], rightClassName)}, rightTag)}
+
+            {children}
+        </li>
+    );
+});
+
+export default memo(ListItem);

package/src/components/ListItem/index.ts

@@ -0,0 +1 @@
+export {default as ListItem, type ListItemProps, type ListItemType} from "./ListItem";

package/src/components/ListItem/list-item.module.scss

@@ -0,0 +1,37 @@
+.list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  line-height: var(--list-item-line-height, var(--line-height, 1 rem));
+
+  &__center {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__primary,
+  &__secondary {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &__primary {
+    color: var(--list-item-primary-color, var(--text-primary-color));
+  }
+  &__secondary {
+    color: var(--list-item-secondary-color, var(--text-secondary-color));
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,90 @@
+import React, {isValidElement, memo, ReactElement, useCallback, forwardRef, ForwardRefRenderFunction} from "react";
+import classnames from "classnames";
+
+import {useComponentProps} from "../../providers";
+import {cloneOrCreateElement} from "../../utils";
+
+import {Dialog, DialogProps, dialogPropsKeys} from "../Dialog";
+import {IconButton, IconButtonProps} from "../IconButton";
+
+import {ModalRadius} from "./types";
+
+import styles from "./modal.module.scss";
+
+export interface ModalProps extends DialogProps {
+    radius?: ModalRadius;
+    closeButton?: boolean | IconButtonProps | ReactElement;
+    onClose?: () => void;
+}
+
+export const modalPropsKeys = new Set<keyof ModalProps>(["radius", "closeButton", "onClose", ...dialogPropsKeys]);
+
+const Modal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (props, ref) => {
+    const {
+        radius,
+        fullscreen = true,
+        closeButton = true,
+        onClose,
+        onOpenChange,
+        children,
+        className,
+        overlayClassName,
+        childrenClassName,
+        ...other
+    } = {...useComponentProps("modal"), ...props};
+
+    const handleClose = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            onClose?.();
+            onOpenChange?.(false);
+            if (typeof closeButton === "object" && !isValidElement(closeButton)) {
+                closeButton?.onClick?.(event);
+            }
+        },
+        [onClose, onOpenChange, closeButton]
+    );
+
+    const renderCloseButton = useCallback(() => {
+        if (!closeButton) return null;
+
+        if (isValidElement(closeButton)) return closeButton;
+
+        const closeButtonProps = typeof closeButton === "object" ? closeButton : {};
+
+        return (
+            <IconButton
+                aria-label="Close"
+                children="✖"
+                {...closeButtonProps}
+                onClick={handleClose}
+                className={classnames(styles["modal-close"], closeButtonProps.className)}
+            />
+        );
+    }, [closeButton, handleClose]);
+
+    return (
+        <Dialog
+            ref={ref}
+            {...other}
+            onOpenChange={onOpenChange}
+            overlayClassName={classnames(styles["modal-overlay"], overlayClassName)}
+            className={classnames(
+                styles["modal-content"],
+                {
+                    [styles["modal-content--fullscreen"]]: fullscreen,
+                    [styles[`modal-content--${radius}-radius`]]: radius,
+                },
+                className
+            )}
+        >
+            {cloneOrCreateElement(
+                children,
+                {className: classnames(styles["modal-children"], childrenClassName)},
+                "div"
+            )}
+            {renderCloseButton()}
+        </Dialog>
+    );
+};
+
+export default memo(forwardRef(Modal));

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export {default as Modal, modalPropsKeys, type ModalProps} from "./Modal";