@react-fabric/core 1.0.0-beta.0

package/src/components/button/ButtonGroup.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 classNames from "classnames";
+import { Children, cloneElement } from "react";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { type Button } from "./Button";
+import classes from "./Button.module.css";
+
+export interface ButtonGroupProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    RefProp<HTMLDivElement>,
+    ChildrenProp<React.ReactElement<typeof Button>> {
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * button styling
+   */
+  variant?: "outline" | "solid" | "link";
+  /**
+   * button size
+   */
+  size?: SizeType;
+  /**
+   * button color
+   */
+  color?: ColorType;
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * stretch to full width
+   */
+  fullWidth?: boolean;
+}
+
+export const ButtonGroup = ({
+  vertical,
+  className,
+  children,
+  variant,
+  rounded,
+  disabled,
+  fullWidth,
+  color,
+  size,
+  ...aria
+}: ButtonGroupProps) => {
+  return (
+    <div
+      data-ref="buttonGroup"
+      className={classNames(
+        classes.buttonGroup,
+        className,
+        fullWidth ? "flex" : "inline-flex",
+        "flex-nowrap align-middle rounded",
+        vertical && classes.vertical,
+        vertical && "flex-col items-stretch",
+      )}
+      {...aria}
+    >
+      {Children.map(children, (child: AnyObject) =>
+        cloneElement(child, {
+          color,
+          size,
+          variant,
+          disabled,
+          rounded,
+          fullWidth,
+          ...child.props,
+        }),
+      )}
+    </div>
+  );
+};

package/src/components/button/ConfirmButton.tsx

@@ -0,0 +1,221 @@
+/*
+ * 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 {
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+  type CallbackReturn,
+  type PolymorphicProps,
+  type RefProp,
+} from "../../types";
+import { Button, type BaseProps, type ButtonProps } from "./Button";
+
+interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
+  /**
+   * confirm message
+   */
+  message: string;
+  /**
+   * ok label
+   */
+  okLabel?: string;
+  /**
+   * ok label
+   */
+  cancelLabel?: string;
+  /**
+   * click handler, return Promise to autoset loading state
+   */
+  onClick?: (e: boolean) => CallbackReturn;
+}
+
+export type ConfirmButtonProps = ExtendedProps & ButtonProps;
+
+/**
+ * Button with confirmation dropdown
+ */
+export const ConfirmButton = <Tag extends React.ElementType = "button">({
+  ref,
+  message,
+  color,
+  okLabel,
+  cancelLabel,
+  onClick,
+  loading,
+  actionMessage,
+  showActionDone,
+  showActionDoneEvent = "click",
+  ...props
+}: ConfirmButtonProps & PolymorphicProps<Tag>) => {
+  const { t } = useTranslation("core");
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [actionDone, setActionDone] = useState(false);
+
+  const clickHandler = useCallback(
+    (e: boolean) => {
+      setBusy(e);
+      const ret = onClick?.(e);
+      if (e) {
+        void Promise.resolve(ret).then((b) => {
+          setBusy(false);
+          if (b !== false && actionMessage && showActionDoneEvent === "click") {
+            setActionDone(true);
+          }
+        });
+      }
+    },
+    [onClick, actionMessage, showActionDoneEvent],
+  );
+  useEffect(() => {
+    if (actionDone) {
+      const timer = setTimeout(() => setActionDone(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [actionDone]);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange(nextOpen, _, reason) {
+      setIsOpen(nextOpen);
+      if (reason === "escape-key") {
+        clickHandler(false);
+      }
+    },
+    strategy: "fixed",
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const click = useClick(context, {
+    enabled: !props.disabled,
+  });
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
+  const ButtonWrapper = useCallback(
+    ({ ref, ...props }: AnyObject) => <Button ref={ref} {...props} />,
+    [],
+  );
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, refs.setReference),
+    [ref, refs.setReference],
+  );
+
+  return (
+    <Fragment>
+      <ButtonWrapper
+        {...props}
+        color={color}
+        loading={busy || loading}
+        showActionDone={actionDone || showActionDone}
+        showActionDoneEvent="manual"
+        actionMessage={actionMessage}
+        ref={innerRef}
+        {...getReferenceProps()}
+        data-dropdown-open={isOpen}
+      />
+      {isOpen && (
+        <FloatingPortal>
+          <FloatingFocusManager modal context={context}>
+            <div
+              data-color={color}
+              className={classNames(
+                "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base",
+              )}
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              <div className="font-medium ">
+                <p className="py-2 px-4">{message}</p>
+                <div className="flex justify-end py-2 px-4 gap-2">
+                  <Button
+                    size="sm"
+                    variant="link"
+                    color={color}
+                    onClick={() => [clickHandler(false), setIsOpen(false)]}
+                  >
+                    {cancelLabel ?? t("action.cancel")}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="solid"
+                    color={color}
+                    autoFocus
+                    onClick={() => [clickHandler(true), setIsOpen(false)]}
+                  >
+                    {okLabel ?? t("action.ok")}
+                  </Button>
+                </div>
+              </div>
+              <FloatingArrow
+                ref={arrowRef}
+                context={context}
+                strokeWidth={0.5}
+                className="fill-base stroke-muted"
+              />
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </Fragment>
+  );
+};

package/src/components/button/ToggleButtonGroup.tsx

@@ -0,0 +1,161 @@
+/*
+ * 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 { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Children, cloneElement, useCallback, useMemo } from "react";
+import { useControlledValue } from "../../hooks/useControlledValue";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type SizeType,
+} from "../../types";
+import { type ButtonProps } from "./Button";
+import classes from "./Button.module.css";
+
+interface BaseProps
+  extends CssProp,
+    AriaProps,
+    ChildrenProp<React.ReactElement<ButtonProps & { value: string }>> {
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * button styling
+   */
+  variant?: "outline" | "solid" | "link";
+  /**
+   * button size
+   */
+  size?: SizeType;
+  /**
+   * button color
+   */
+  color?: ColorType;
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * stretch to full width
+   */
+  fullWidth?: boolean;
+}
+
+export type ToggleButtonGroupProps = BaseProps &
+  (
+    | {
+        /**
+         *
+         */
+        value: string;
+        /**
+         * change handler
+         */
+        onChange?: (value: string) => void;
+      }
+    | {
+        /**
+         *
+         */
+        value: string[];
+        /**
+         * change handler
+         */
+        onChange?: (value: string[]) => void;
+      }
+  );
+
+export const ToggleButtonGroup = ({
+  vertical,
+  className,
+  children,
+  variant,
+  rounded,
+  disabled,
+  fullWidth,
+  color,
+  size,
+  value,
+  onChange,
+  ...aria
+}: ToggleButtonGroupProps) => {
+  const isMultiple = useMemo(() => isArray(value), [value]);
+  const { currentValue, updateValue } = useControlledValue<typeof value>(
+    value,
+    isArray(value) ? EMPTY_ARRAY : "",
+  );
+
+  const clickHandler = useCallback(
+    (cb: AnyObject) => (e: React.MouseEvent<HTMLElement>) => {
+      let newValue: AnyObject = `${e.currentTarget.dataset.value}`;
+      if (isArray(currentValue)) {
+        if (currentValue.includes(newValue))
+          newValue = currentValue.filter((v) => v !== newValue);
+        else newValue = [...currentValue, newValue];
+      }
+      updateValue(newValue);
+      onChange?.(newValue);
+      cb?.(e);
+    },
+    [currentValue, onChange],
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes.buttonGroup,
+        className,
+        fullWidth ? "flex" : "inline-flex",
+        "flex-nowrap align-middle",
+        vertical && classes.vertical,
+        vertical && "flex-col",
+      )}
+      {...aria}
+    >
+      {Children.map(children, (child: AnyObject) =>
+        cloneElement(child, {
+          color,
+          size,
+          variant,
+          disabled,
+          rounded,
+          fullWidth,
+          ...child.props,
+          onClick: clickHandler(child.props.onClick),
+          "data-value": child.props.value,
+          "data-checked": isMultiple
+            ? currentValue.includes(child.props.value)
+            : currentValue === child.props.value,
+        }),
+      )}
+    </div>
+  );
+};

package/src/components/callout/Callout.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 classNames from "classnames";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type PaletteType,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import { Icon } from "../icon/Icon";
+
+export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
+  /**
+   * callout color
+   */
+  color?: ColorType | PaletteType;
+  /**
+   * legend title
+   */
+  legend?: string;
+  /**
+   * callout icon
+   */
+  icon?: string;
+  /**
+   * callout title
+   */
+  title?: string;
+  /**
+   * callout border style
+   */
+  border?: "solid" | "dotted" | "dashed";
+  /**
+   * close action handler
+   */
+  onClose?: () => void;
+}
+
+export const Callout = ({
+  children,
+  // @ts-expect-error ignore
+  color = "tint",
+  legend,
+  title,
+  icon,
+  border,
+  onClose,
+  ...aria
+}: CalloutProps) => {
+  return (
+    <fieldset
+      className={classNames(
+        "block rounded-capped border max-w-full relative overflow-hidden mb-4",
+        getBgClass(color + "-50"),
+        getColorClass(color + "-700"),
+        getBorderClass(color + "-300"),
+        border === "dashed" && "border-dashed",
+        border === "dotted" && "border-dotted",
+      )}
+      {...aria}
+    >
+      {legend && <legend className="px-2 mx-4 font-medium">{legend}</legend>}
+      <div className={classNames("break-words whitespace-break-spaces p-2")}>
+        <div className="flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0">
+          {icon && <Icon icon={icon} />}
+          {title && <p className="flex-1">{title}</p>}
+        </div>
+        <div className="pe-4">{children}</div>
+      </div>
+      {onClose && (
+        <Icon
+          size="md"
+          className={classNames("absolute end-2", legend ? "top-0" : "top-2")}
+          icon={CoreIcons.close}
+          onClick={onClose}
+        />
+      )}
+    </fieldset>
+  );
+};