@react-fabric/core 1.0.0-beta.0

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

@@ -0,0 +1,375 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .buttonWrapper {
+    --color: theme(colors.primary.500);
+
+    font-size: 1rem;
+    border-radius: var(--rounding);
+
+    & .button {
+      color: var(--text);
+
+      background-color: var(--bg);
+      background-image: var(--click-gradient);
+      border-radius: inherit;
+      outline: 1px solid var(--outline);
+
+      &.spinOnHover:hover .buttonIcon {
+        & :global {
+          animation: spin 2s linear infinite;
+        }
+      }
+
+      & > * {
+        pointer-events: none;
+      }
+
+      &:not(:disabled) input[type="file"] {
+        pointer-events: auto;
+
+        &::-webkit-file-upload-button {
+          cursor: pointer;
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
+
+    & .rounded {
+      border-radius: 9999px;
+    }
+
+    & .buttonLabel {
+      order: 1;
+      padding: 0.5em 1em;
+      line-height: 1;
+
+      & + .altIcon {
+        margin-inline-start: -1em;
+      }
+    }
+
+    & .buttonChild {
+      order: 1;
+      padding: 0.5em;
+      line-height: 1;
+    }
+
+    & .buttonIcon {
+      padding: 0.3889em;
+      font-size: 1.125em;
+    }
+
+    & :global(.hotkey-label) {
+      align-self: center;
+      order: 3;
+    }
+
+    & .altIcon {
+      align-self: center;
+      order: 4;
+      padding: 0.125em 0.5em;
+    }
+
+    & [data-ref="badge"] {
+      align-self: center;
+      order: 2;
+      margin-inline-end: 0.5em;
+    }
+  }
+
+  .buttonGroup {
+    & > .buttonWrapper {
+      flex: 0 1 1em;
+    }
+
+    &:not(.flex) + &:not(.flex) {
+      margin-inline-start: 0.5rem;
+    }
+  }
+}
+
+@layer util {
+  .buttonWrapper {
+    &[data-size="xs"] {
+      font-size: 0.625rem;
+    }
+
+    &[data-size="sm"] {
+      font-size: 0.875rem;
+    }
+
+    &[data-size="md"] {
+      font-size: 1.125rem;
+    }
+
+    &[data-size="lg"] {
+      font-size: 1.25rem;
+    }
+
+    &[data-size="xl"] {
+      font-size: 1.5rem;
+    }
+  }
+
+  .button {
+    --bg: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+    --outline: color-mix(in lab, var(--bg) 90%, var(--fabric-text));
+    --text: color-mix(in lab, var(--color) 80%, var(--fabric-text));
+    --bg-hover: color-mix(in lab, var(--color) 18%, var(--fabric-bg));
+    --bg-click: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
+    --bg-active: color-mix(in lab, var(--color) 36%, var(--fabric-bg));
+
+    &[data-color="accent"] {
+      --color: theme(colors.accent.500);
+    }
+
+    &[data-color="info"] {
+      --color: theme(colors.info.500);
+    }
+
+    &[data-color="danger"] {
+      --color: theme(colors.danger.500);
+    }
+
+    &[data-color="success"] {
+      --color: theme(colors.success.500);
+    }
+
+    &[data-color="warning"] {
+      --color: theme(colors.warning.500);
+    }
+
+    &[data-variant="outline"] {
+      --outline: var(--color);
+    }
+
+    &[data-variant="solid"] {
+      --outline: var(--color);
+      --bg: color-mix(in lab, var(--color) 96%, var(--fabric-text));
+      --text: theme(colors.white);
+      --bg-hover: color-mix(in lab, var(--color) 90%, var(--fabric-bg));
+      --bg-click: color-mix(in lab, var(--color) 80%, theme(colors.black));
+      --bg-active: color-mix(in lab, var(--color) 70%, theme(colors.black));
+
+      & :global(.hotkey-label) {
+        color: theme(colors.white/70%);
+        background-color: theme(backgroundColor.dark/30%);
+      }
+    }
+
+    &[data-variant="link"] {
+      --bg: transparent;
+      --outline: transparent;
+
+      background-image: none;
+      box-shadow: none;
+    }
+
+    &[data-color="invert"] {
+      --bg: theme(backgroundColor.invert);
+      --text: color-mix(in lab, var(--color) 90%, theme(textColor.invert));
+      --bg-hover: color-mix(
+        in lab,
+        var(--color) 15%,
+        theme(backgroundColor.invert)
+      );
+      --bg-click: color-mix(
+        in lab,
+        var(--color) 35%,
+        theme(backgroundColor.invert)
+      );
+    }
+  }
+
+  .buttonIcon[data-align="start"] {
+    order: 0;
+
+    & + .buttonLabel[data-colored-icon="false"] {
+      margin-inline-start: -1em;
+    }
+  }
+
+  .buttonIcon[data-align="end"] {
+    order: 2;
+
+    & ~ .buttonLabel[data-colored-icon="false"] {
+      margin-inline-end: -1em;
+    }
+  }
+}
+
+@layer var {
+  .buttonWrapper {
+    height: unset;
+    padding: unset;
+
+    &[data-disabled="true"] {
+      cursor: not-allowed;
+
+      & .button {
+        pointer-events: none;
+        opacity: 0.5;
+        background-image: var(--active-gradient);
+      }
+    }
+
+    &[data-loading="true"] {
+      cursor: wait;
+
+      & .button {
+        pointer-events: none;
+        background-image: var(--progress-gradient);
+        background-size: 1em 1em;
+
+        & :global {
+          animation: progress 750ms linear infinite;
+        }
+      }
+
+      & .button:not([data-variant="solid"]) {
+        background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
+      }
+    }
+
+    &:global(.btn-dashed) > .button {
+      color: theme(colors.tint.600);
+      outline: 1px dashed theme(colors.tint.600);
+
+      &[data-invalid="true"] {
+        color: theme(colors.danger.600);
+        background-color: theme(colors.danger.100);
+        outline: 1px dashed theme(colors.danger.600);
+      }
+    }
+  }
+
+  .button {
+    --tw-ring-color: var(--color);
+
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+
+    &:active {
+      background-color: var(--bg-click);
+      background-image: var(--active-gradient);
+
+      .buttonIcon,
+      .buttonLabel {
+        transform: translateY(1px);
+      }
+    }
+
+    &[data-active="true"],
+    &[data-checked="true"],
+    &[data-dropdown-open="true"] {
+      background-color: var(--bg-active);
+      background-image: none;
+    }
+
+    &[data-dropdown-open="true"] {
+      pointer-events: none;
+    }
+
+    &[data-active="true"] {
+      pointer-events: none;
+    }
+  }
+
+  .buttonGroup {
+    & > .buttonWrapper {
+      margin: 0;
+
+      & .button[data-variant="link"] {
+        --outline: theme(backgroundColor.base);
+      }
+    }
+
+    &:not(.vertical) {
+      & > :not(:first-child) {
+        &::before {
+          content: "";
+
+          position: absolute;
+          inset-block: 5%;
+          inset-inline-start: -0.5px;
+
+          border-inline-start: 0.5px solid theme(borderColor.base);
+        }
+      }
+
+      &.separator > :not(:first-child) {
+        margin-inline-start: 2px;
+
+        &::before {
+          inset-inline-start: -1.5px;
+        }
+      }
+
+      & > :not(:last-child) .button {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      & > :not(:first-child) .button {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    &.vertical {
+      & > :not(:first-child) {
+        &::before {
+          content: "";
+
+          position: absolute;
+          inset-block-start: -0.5px;
+          inset-inline: 5%;
+
+          border-block-start: 0.5px solid theme(borderColor.base);
+        }
+      }
+
+      &.separator > :not(:first-child) {
+        margin-block-start: 1px;
+
+        &::before {
+          inset-block-start: -1px;
+        }
+      }
+
+      & > :not(:last-child) .button {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      & > :not(:first-child) .button {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+    }
+  }
+}

package/src/components/button/Button.tsx

@@ -0,0 +1,323 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isNil, isString, mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  isValidElement,
+  type MouseEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type WheelEventHandler,
+} from "react";
+import { useEffectDebugger } from "../../hooks/useEffectDebugger";
+import { HotKey } from "../../hotkeys/HotKey";
+import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
+import { Tooltip } from "../../overlays/tooltip/Tooltip";
+import {
+  type AriaProps,
+  type BadgeType,
+  type CallbackReturn,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type PolymorphicProps,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+  type TooltipType,
+} from "../../types";
+import { AnimationIndicator } from "../animations/Animations";
+import { Badge, getBadgeProps } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import classes from "./Button.module.css";
+
+export interface BaseProps
+  extends CssProp,
+    AriaProps,
+    IconProps,
+    RefProp,
+    TestProps {
+  /**
+   * primary icon alignment
+   */
+  iconAlign?: "start" | "end";
+  /**
+   * alternate icon align end (caret, arrow)
+   */
+  altIcon?: string;
+  /**
+   * button size
+   */
+  size?: SizeType;
+  /**
+   * button color
+   */
+  color?: ColorType;
+  /**
+   * button type
+   */
+  type?: "button" | "reset" | "submit";
+  /**
+   * button styling
+   */
+  variant?: "outline" | "solid" | "link";
+  /**
+   * active state with click disabled
+   */
+  active?: boolean;
+  /**
+   * loading state with animation and click disabled
+   */
+  loading?: boolean;
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * spin icon on hover
+   */
+  spinOnHover?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * stretch to full width
+   */
+  fullWidth?: boolean;
+  /**
+   * action completed message works best with `onClick` Promise return.
+   * To hide completed message onClick/Promise return should be false
+   */
+  actionMessage?: string;
+  /**
+   * manually force show action message
+   */
+  showActionDone?: boolean;
+  /**
+   * show action message `onClick` or manually by setting `showActionDone` true
+   */
+  showActionDoneEvent?: "click" | "manual";
+  /**
+   * click handler, return Promise to autoset loading state
+   */
+  onClick?: (e?: React.MouseEvent) => CallbackReturn;
+  /**
+   * badges
+   */
+  badge?: string | number | BadgeType;
+  /**
+   * keyboard shortcut
+   */
+  hotKey?: string;
+
+  onMouseOut?: MouseEventHandler;
+  onMouseOver?: MouseEventHandler;
+  onMouseMove?: MouseEventHandler;
+  onMouseEnter?: MouseEventHandler;
+  onMouseLeave?: MouseEventHandler;
+
+  onWheel?: WheelEventHandler;
+}
+
+export type ButtonProps =
+  | { children: string | React.ReactElement; "aria-label"?: string }
+  | { children?: never; "aria-label": string };
+
+/**
+ * Clickable action button
+ */
+export const Button = <Tag extends React.ElementType = "button">({
+  as,
+  ref,
+  children,
+  className,
+  active,
+  color = "primary",
+  icon,
+  iconBg,
+  iconColor,
+  iconAlign = "start",
+  altIcon,
+  rtlFlip,
+  rounded,
+  size,
+  disabled,
+  loading,
+  variant,
+  badge,
+  fullWidth,
+  spinOnHover,
+  onClick,
+  actionMessage,
+  type = "button",
+  hotKey,
+  showActionDone,
+  showActionDoneEvent = "click",
+  tabIndex = 0,
+  // @ts-expect-error ignore
+  "data-ref": dataRef,
+  ...aria
+}: BaseProps & ButtonProps & PolymorphicProps<Tag>) => {
+  const refEl = useRef<AnyObject>(null);
+  const [busy, setBusy] = useState(false);
+  const [actionDone, setActionDone] = useState(false);
+
+  const clickHandler = useCallback(
+    (e: React.MouseEvent) => {
+      setBusy(true);
+      // e.stopPropagation();
+      const ret = onClick?.(e);
+      void Promise.resolve(ret).then((b) => {
+        setBusy(false);
+        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    },
+    [onClick, disabled, actionMessage, showActionDoneEvent],
+  );
+
+  /** ***************** reset done state on timeout *******************/
+  useEffect(() => {
+    actionMessage && showActionDone && setActionDone(true);
+  }, [showActionDone, actionMessage]);
+  useEffectDebugger(
+    () => {
+      if (actionDone) {
+        const timer = setTimeout(() => setActionDone(false), 2000);
+        return () => clearTimeout(timer);
+      }
+    },
+    [actionDone],
+    "ActionButton done handler",
+  );
+
+  const TooltipWrapper = useMemo(
+    () => (actionMessage ? Tooltip : Fragment),
+    [actionMessage, actionDone],
+  );
+  const tooltipProps = useMemo(() => {
+    if (actionDone && actionMessage) {
+      return {
+        content: actionMessage,
+        placement: "top",
+        color,
+        open: true,
+      } as TooltipType;
+    }
+  }, [actionDone, actionMessage, color]);
+
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(badge);
+  }, [badge]);
+
+  const E = as ?? "button";
+  return (
+    <div
+      className={classNames(
+        classes.buttonWrapper,
+        className,
+        "relative align-text-top select-none focus-within:z-1",
+        fullWidth ? "block w-full" : "inline-block",
+      )}
+      data-ref={dataRef ?? "button"}
+      data-size={size}
+      data-loading={busy || loading}
+      data-disabled={disabled}
+    >
+      {hotKey && (
+        <HotKey
+          keyCombo={hotKey}
+          handler={() => !disabled && refEl.current?.click()}
+        />
+      )}
+      <TooltipWrapper {...tooltipProps}>
+        <E
+          ref={mergeRefs(ref, refEl)}
+          role="button"
+          className={classNames(
+            classes.button,
+            "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none",
+            `focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner`,
+            fullWidth && "max-w-full w-full",
+            rounded && "rounded-full",
+            spinOnHover && classes.spinOnHover,
+          )}
+          type={type}
+          disabled={disabled}
+          tabIndex={tabIndex}
+          data-inner-clickable
+          onClick={clickHandler}
+          data-color={color}
+          data-active={active}
+          data-variant={variant}
+          {...aria}
+        >
+          {icon && (
+            <Icon
+              className={classes.buttonIcon}
+              icon={icon}
+              bg={iconBg}
+              color={iconColor}
+              rtlFlip={rtlFlip}
+              data-align={iconAlign}
+            />
+          )}
+          {isValidElement(children) && (
+            <div className={classes.buttonChild}>{children}</div>
+          )}
+          {isString(children) && (
+            <label
+              className={classNames(classes.buttonLabel, "truncate")}
+              data-colored-icon={!!iconBg}
+            >
+              {children}
+            </label>
+          )}
+          {!isNil(badge) && <Badge {...badgeProps} />}
+          {hotKey && <HotKeyLabel keyCombo={hotKey} />}
+          {altIcon && (
+            <Icon className={classes.altIcon} icon={altIcon} rtlFlip />
+          )}
+        </E>
+      </TooltipWrapper>
+      {actionDone && (
+        <div
+          className={classNames(
+            "absolute inset-0 overflow-hidden flex justify-center items-center",
+            `bg-${color}-300`,
+            rounded ? "rounded-full" : "rounded",
+          )}
+        >
+          <AnimationIndicator type="check" color={color} />
+        </div>
+      )}
+    </div>
+  );
+};