@react-fabric/core 1.0.0-beta.0

package/src/components/collapsable/Collapsable.module.css

@@ -0,0 +1,30 @@
+/*
+ * 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 {
+  .collapsable {
+    & + & {
+      border-top: 1px solid theme(borderColor.base);
+    }
+  }
+}

package/src/components/collapsable/Collapsable.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type RefProp,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Icon } from "../icon/Icon";
+import classes from "./Collapsable.module.css";
+
+interface CollapsableRef {
+  button: RefObject<HTMLElement>;
+  body: RefObject<HTMLElement>;
+  open: boolean;
+}
+
+export interface CollapsableProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    RefProp<CollapsableRef>,
+    ChildrenProp {
+  /**
+   * expand icon alignment
+   */
+  iconAlign?: "start" | "end";
+  /**
+   * panel body className
+   */
+  bodyClassName?: string;
+  /**
+   * header button className
+   */
+  headerClassName?: string;
+  /**
+   * open state icon
+   */
+  iconOpen?: string;
+  /**
+   * closed state icon
+   */
+  iconClosed?: string;
+  /**
+   * open state
+   */
+  open?: boolean;
+  /**
+   * open handler
+   */
+  onOpen?: () => void;
+  /**
+   * open handler
+   */
+  onClose?: () => void;
+}
+
+export const Collapsable = ({
+  ref,
+  className,
+  bodyClassName,
+  headerClassName,
+  children,
+  iconAlign,
+  iconClosed = CoreIcons.chevronRight,
+  iconOpen = CoreIcons.chevronDown,
+  open,
+  onClose,
+  onOpen,
+  ...aria
+}: CollapsableProps) => {
+  const [openState, setOpenState] = useState(open);
+  const headRef = useRef(null);
+  const bodyRef = useRef(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      button: headRef,
+      body: bodyRef,
+      open: !!openState,
+    }),
+    [openState],
+  );
+
+  useEffect(() => {
+    setOpenState(open);
+  }, [open]);
+
+  const [head, body] = useMemo(() => {
+    const [h, ...b] = Children.toArray(children);
+    return [h, b];
+  }, [children]);
+  return (
+    <div className={classNames(classes.collapsable, className)} {...aria}>
+      <div
+        role="none"
+        ref={headRef}
+        className={classNames(
+          classes.collapsableHead,
+          "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70",
+          headerClassName,
+          iconAlign === "end" ? "flex-row-reverse" : "flex-row",
+        )}
+        onClick={() => setOpenState(!openState)}
+      >
+        <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
+        <div className="flex-1 px-2">{head}</div>
+      </div>
+      {openState && (
+        <div
+          ref={bodyRef}
+          className={classNames(classes.collapsableBody, bodyClassName)}
+        >
+          {body}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/divider/Divider.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 { useCallback } from "react";
+import {
+  type CssProp,
+  type ChildProp,
+  type ColorType,
+  type PaletteType,
+} from "../../types";
+import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+
+export interface DividerProps extends CssProp, Partial<ChildProp> {
+  /**
+   * apply text bg
+   */
+  fill?: boolean;
+  /**
+   * vertical rule
+   */
+  vertical?: boolean;
+  /**
+   * rule color
+   */
+  color?: ColorType | PaletteType | "tint";
+  /**
+   * text alignment
+   */
+  align?: "start" | "end" | "center";
+}
+
+export const Divider = ({
+  children,
+  color,
+  vertical,
+  fill,
+  align = "start",
+  className,
+}: DividerProps) => {
+  const Rule = useCallback(
+    ({ flex, className }: KeyValue) => {
+      return (
+        <hr
+          style={{ flex }}
+          className={classNames(
+            className,
+            vertical && "vertical",
+            !flex && "self-stretch",
+            vertical ? "mx-1" : "my-1",
+            color && getBorderClass(color + "-200"),
+          )}
+        />
+      );
+    },
+    [color, vertical],
+  );
+
+  return children ? (
+    <div
+      className={classNames(
+        "flex flex-nowrap items-center",
+        vertical && "flex-col",
+        className,
+      )}
+    >
+      <Rule flex={align === "start" ? "0 0 1rem" : "1 1 1em"} />
+      <div
+        className={classNames(
+          "px-2 whitespace-nowrap",
+          vertical ? "mx-1" : "my-1",
+          fill && getBgClass((color ?? "tint") + "-200"),
+          !fill && getColorClass((color ?? "tint") + "-600"),
+          "rounded-full text-[0.75em]",
+          vertical && "origin-center -rotate-90 z-1",
+        )}
+      >
+        {children}
+      </div>
+      <Rule flex={align === "end" ? "0 0 1rem" : "1 1 1em"} />
+    </div>
+  ) : (
+    <Rule className={className} />
+  );
+};

package/src/components/dropdown/Dropdown.module.css

@@ -0,0 +1,39 @@
+/*
+ * 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 var {
+  .dropdownBody {
+    grid-template: 1fr /1fr;
+
+    & [data-ref="card"],
+    & [data-ref="panel"],
+    & [data-ref="panelGroup"] {
+      grid-area: unset;
+
+      border-top: 0;
+      border-inline: 0;
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+}

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,307 @@
+/*
+ * 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,
+  FloatingOverlay,
+  FloatingPortal,
+  FloatingTree,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  safePolygon,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingTree,
+  useHover,
+  useInteractions,
+  type Placement,
+} from "@floating-ui/react";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { type ChildProp, type RefProp } from "../../types";
+import classes from "./Dropdown.module.css";
+
+export interface DropdownProps extends RefProp {
+  children: [React.ReactNode, React.ReactNode];
+  /**
+   * dropdown placement
+   */
+  placement?: Placement;
+  /**
+   * show dropdown arrow
+   */
+  showArrow?: boolean;
+  /**
+   * fit with to anchor' parent element
+   */
+  fitToParent?: boolean;
+  /**
+   * close dropdown on click
+   */
+  closeOnClick?: boolean;
+  /**
+   * disable dropdown
+   */
+  disabled?: boolean;
+  /**
+   * plain dropdown body
+   */
+  plainDropdown?: boolean;
+  /**
+   * dropdown body className
+   */
+  dropdownClassName?: string;
+  /**
+   * dropdown event
+   */
+  dropdownEvent?: "click" | "hover";
+  /**
+   * open handler
+   */
+  onOpen?: () => void;
+  /**
+   * close handler
+   */
+  onClose?: () => void;
+}
+
+const DropdownElement = ({
+  ref,
+  children,
+  showArrow,
+  closeOnClick,
+  fitToParent = true,
+  placement = "bottom",
+  onClose,
+  onOpen,
+  disabled,
+  plainDropdown,
+  dropdownEvent,
+  dropdownClassName,
+}: DropdownProps) => {
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const tree = useFloatingTree();
+
+  const [anchor, panel] = useMemo<AnyObject[]>(
+    () => Children.toArray(children as AnyObject),
+    [children],
+  );
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, reason) => {
+      if (reason === "reference-press") return;
+      setIsOpen(open);
+      (open ? onOpen : onClose)?.();
+    },
+    strategy: "fixed",
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      showArrow && offset(9),
+      showArrow &&
+        arrow({
+          element: arrowRef,
+        }),
+    ],
+  });
+
+  const handler = dropdownEvent === "hover" ? useHover : useClick;
+  const click = handler(context, {
+    enabled: !disabled,
+    handleClose: safePolygon({ blockPointerEvents: true }),
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
+  const minWidth = useMemo(() => {
+    if (fitToParent) {
+      const el: HTMLElement =
+        // @ts-expect-error ignore
+        refs.reference.current?.closest('[data-ref="buttonGroup"]') ??
+        refs.reference.current;
+      return el?.offsetWidth;
+    }
+    return undefined;
+  }, [refs, isOpen, fitToParent]);
+
+  const tryClosing = useCallback(
+    (e: React.MouseEvent) => {
+      if (
+        !refs.floating.current?.contains(
+          (e.target as HTMLElement).closest("[data-dropdown-dismiss='false']"),
+        ) &&
+        (!!closeOnClick ||
+          refs.floating.current?.contains(
+            (e.target as HTMLElement).closest("[data-dropdown-dismiss='true']"),
+          ))
+      ) {
+        setTimeout(() => {
+          setIsOpen(false);
+          onClose?.();
+        }, 100);
+      }
+    },
+    [closeOnClick, onClose],
+  );
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, anchor.props.ref, refs.setReference),
+    [ref, anchor.props.ref, refs.setReference],
+  );
+
+  useEffect(() => {
+    disabled && setIsOpen(false);
+  }, [disabled]);
+
+  useEffect(() => {
+    if (!tree) return;
+
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+
+    tree.events.on("close", handleTreeClick);
+
+    return () => {
+      tree.events.off("close", handleTreeClick);
+    };
+  }, [tree]);
+
+  if (!anchor || !panel)
+    throw Error("Dropdown requires two elements [Anchor, Panel]");
+
+  return (
+    <Fragment>
+      {cloneElement(anchor, {
+        ...getReferenceProps({
+          onClick: (e) => {
+            anchor.props.onClick?.(e);
+            e.stopPropagation();
+          },
+        }),
+        "data-dropdown-open": isOpen ? true : undefined,
+        ref: innerRef,
+      })}
+      {isOpen && (
+        <FloatingPortal
+          root={
+            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
+            undefined
+          }
+        >
+          <FloatingOverlay />
+          <FloatingFocusManager context={context} modal>
+            <div
+              ref={(el) => {
+                refs.setFloating(el);
+                el
+                  ?.querySelector<HTMLElement>("input,textarea,button")
+                  ?.focus();
+              }}
+              style={{
+                minWidth,
+                zIndex: "var(--z-popover)",
+                ...floatingStyles,
+              }}
+              {...getFloatingProps({
+                onClick: (e) => e.stopPropagation(),
+              })}
+            >
+              <div
+                role="none"
+                className={classNames(
+                  classes.dropdownBody,
+                  dropdownClassName,
+                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
+                  "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
+                )}
+                onMouseUpCapture={tryClosing}
+              >
+                {panel}
+              </div>
+              {showArrow && (
+                <FloatingArrow
+                  ref={arrowRef}
+                  context={context}
+                  strokeWidth={0.5}
+                  className="fill-base stroke-muted"
+                />
+              )}
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </Fragment>
+  );
+};
+
+export const Dropdown = (props: DropdownProps) => (
+  <FloatingTree>
+    <DropdownElement {...props} />
+  </FloatingTree>
+);
+
+export const DropdownDismiss = ({
+  children,
+  dismiss = true,
+}: ChildProp & { dismiss?: boolean }) => {
+  const tree = useFloatingTree();
+
+  return (
+    <div
+      role="none"
+      className="contents"
+      data-dropdown-dismiss={dismiss}
+      onMouseUp={() =>
+        dismiss && setTimeout(() => tree?.events.emit("close"), 50)
+      }
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/dropdown/DropdownTool.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 ChildProp, type CssProp } from "../../types";
+import { Icon } from "../icon/Icon";
+import { Dropdown, type DropdownProps } from "./Dropdown";
+
+export const DropdownTool = ({
+  children,
+  className,
+  groupHover,
+  ...props
+}: ChildProp &
+  CssProp &
+  Omit<DropdownProps, "children"> & {
+    /**
+     * hide until group hovered
+     */
+    groupHover?: boolean;
+  }) => {
+  return (
+    <Dropdown {...props}>
+      <Icon
+        icon="mdi mdi-menu-down"
+        className={classNames(
+          className,
+          "outline bg-base flex-content pointer-events-auto cursor-pointer",
+          groupHover &&
+            "hidden group-hover:inline-block data-[dropdown-open]:inline-block",
+        )}
+      />
+      {children}
+    </Dropdown>
+  );
+};