@react-fabric/core 1.0.0-beta.0

package/src/typography/Text.tsx

@@ -0,0 +1,194 @@
+/*
+ * 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 { isNumber } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useCallback, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useLayoutEffectDebugger,
+  useMemoDebugger,
+} from "../hooks/useEffectDebugger";
+import { usePropToggle } from "../hooks/usePropToggle";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorWithGrays,
+  type CssProp,
+  type SizeType,
+  type TestProps,
+} from "../types";
+import {
+  calculateTextHeight,
+  getBgClass,
+  getColor,
+  getColorClass,
+} from "../utils";
+import classes from "./Typography.module.css";
+import { TextSizeMap } from "./types";
+
+export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
+  /**
+   * render text as inline span
+   */
+  inline?: boolean;
+  /**
+   * text background (CSS color / tailwind color)
+   */
+  bg?: ColorWithGrays | string;
+  /**
+   * text color (CSS color / tailwind color)
+   */
+  color?: ColorWithGrays | string;
+  /**
+   * text size
+   */
+  size?: SizeType | number | string;
+  /**
+   * font family
+   */
+  family?: "sans" | "serif" | "mono";
+  /**
+   * text align
+   */
+  align?: "start" | "end" | "center" | "justify";
+  /**
+   * text line clamp
+   */
+  clamp?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+}
+
+/**
+ * Typography text component
+ */
+export const Text = ({
+  children,
+  className,
+  inline,
+  bg,
+  color,
+  family,
+  size,
+  clamp,
+  align,
+  ...aria
+}: TextProps) => {
+  const { t } = useTranslation("core");
+  const refContainer = useRef<HTMLDivElement>(null);
+  const [clipped, setClipped] = useState(false);
+  const [showMore, toggleShowMore, refShowMore] = usePropToggle(false);
+
+  /** ***************** check text height if clip enabled *******************/
+  const checkHeight = useCallback(() => {
+    const el = refContainer.current as HTMLElement;
+    if (el && isNumber(clamp) && clamp > 0 && !refShowMore.current) {
+      setClipped(
+        calculateTextHeight(el.firstElementChild as HTMLElement, el) >
+          el.offsetHeight,
+      );
+    }
+  }, [clamp]);
+
+  /** ***************** observe element resize to recalculate height *******************/
+  useLayoutEffectDebugger(
+    () => {
+      if (refContainer.current) {
+        const ob = new ResizeObserver(checkHeight);
+        ob.observe(refContainer.current as HTMLElement);
+        checkHeight();
+        return () => {
+          ob.disconnect();
+        };
+      }
+    },
+    [children, checkHeight],
+    "Text check height",
+  );
+
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (align) {
+        s.textAlign = align;
+      }
+      if (size && !(size in TextSizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in TextSizeMap) {
+        s.fontSize = TextSizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size, align, family],
+    "Text styles",
+  );
+
+  return inline ? (
+    <span className={className} style={styles} {...aria}>
+      {children}
+    </span>
+  ) : (
+    <article className={className}>
+      <div
+        ref={refContainer}
+        style={
+          { "--text-clamp": showMore ? "unset" : clamp ?? "unset" } as AnyObject
+        }
+      >
+        <div
+          className={classNames(
+            classes.text,
+            "text-reset mixed-lang px-[2px] whitespace-pre-wrap",
+            family && `font-${family}`,
+            bg && getBgClass(bg),
+            color && getColorClass(color),
+            clamp && "line-clamp-1",
+          )}
+          style={styles}
+          {...aria}
+        >
+          {children}
+        </div>
+      </div>
+      {clipped && (
+        <div className={classes.moreLink}>
+          <span
+            role="link"
+            tabIndex={0}
+            data-inner-clickable
+            onClick={(e) => [e.stopPropagation(), toggleShowMore()]}
+          >
+            ...{t(`action.${showMore ? "less" : "more"}`)}
+          </span>
+        </div>
+      )}
+    </article>
+  );
+};

package/src/typography/Title.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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 DetailedHTMLProps,
+  type ElementType,
+  type HTMLAttributes,
+} from "react";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorWithGrays,
+  type CssProp,
+  type SizeType,
+} from "../types";
+import { getBgClass, getColor, getColorClass } from "../utils";
+import { TitleSizeMap } from "./types";
+import classes from "./Typography.module.css";
+
+export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
+  as?: ElementType<
+    DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
+    "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  >;
+  /**
+   * title background
+   */
+  bg?: ColorWithGrays | string;
+  /**
+   * title color (CSS color / tailwind color)
+   */
+  color?: ColorWithGrays | string;
+  /**
+   * title size (CSS color / tailwind color)
+   */
+  size?: SizeType | number | string;
+  /**
+   * font family
+   */
+  family?: "sans" | "serif" | "mono";
+  /**
+   * text align
+   */
+  align?: "start" | "end" | "center" | "justify";
+}
+
+/**
+ * Typography title component
+ */
+export const Title = ({
+  children,
+  className,
+  as,
+  bg,
+  color,
+  size,
+  align,
+  family,
+  ...aria
+}: TitleProps) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (align) {
+        s.textAlign = align;
+      }
+      if (size && !(size in TitleSizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in TitleSizeMap) {
+        s.fontSize = TitleSizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size, align],
+    "Title styles",
+  );
+
+  const E = as ?? "p";
+  return (
+    <E
+      className={classNames(
+        classes.title,
+        "px-[2px] py-1 truncate whitespace-pre-wrap",
+        className,
+        family && `font-${family}`,
+        !as && "text-lg",
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+      )}
+      style={styles}
+      {...aria}
+    >
+      {children}
+    </E>
+  );
+};

package/src/typography/Typography.module.css

@@ -0,0 +1,68 @@
+/*
+ * 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 {
+  .title {
+    line-height: 1.125;
+  }
+
+  .moreLink {
+    margin: -0.25rem 0 1rem;
+    text-align: end;
+
+    & > span {
+      cursor: pointer;
+      user-select: none;
+      font-size: 0.75rem;
+      color: theme(colors.accent.700);
+
+      &:hover {
+        color: theme(colors.accent.500);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+    }
+  }
+}
+
+@layer util {
+  .text {
+    -webkit-line-clamp: var(--text-clamp);
+  }
+
+  .abbr {
+    --abbr-color: var(--accent);
+
+    color: color-mix(in lab, var(--abbr-color) 50%, var(--fabric-text));
+  }
+
+  .mark {
+    --mark-color: var(--accent);
+
+    background-color: color-mix(
+      in lab,
+      var(--mark-color) 25%,
+      var(--fabric-bg)
+    );
+  }
+}

package/src/typography/index.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export { Abbr } from "./Abbr";
+export { Copy } from "./Copy";
+export { Link } from "./Link";
+export { Mark } from "./Mark";
+export { Text } from "./Text";
+export { Title } from "./Title";

package/src/typography/types.ts

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+export const TitleSizeMap: KeyValue<string> = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "1.75rem",
+  xl: "2rem",
+};
+
+export const TextSizeMap: KeyValue<string> = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "1.75rem",
+};

package/src/utils/calculateDimensions.ts

@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+/** ***************** get css style property value *******************/
+export const getCssStyle = (element: HTMLElement, property: string) => {
+  return getComputedStyle(element).getPropertyValue(property);
+};
+
+/** ***************** calculate full width for given element *******************/
+export const calculateTextWidth = (
+  element: HTMLElement,
+  styleRoot?: HTMLElement,
+) => {
+  const clone = element.cloneNode(true) as HTMLElement;
+  clone.style.font = getCssStyle(styleRoot ?? element, "font");
+  clone.style.padding = getCssStyle(styleRoot ?? element, "padding");
+  clone.style.letterSpacing = getCssStyle(
+    styleRoot ?? element,
+    "letter-spacing",
+  );
+  clone.style.position = "absolute";
+  clone.style.top = "-10000%";
+  document.body.appendChild(clone);
+  const width = clone.offsetWidth;
+  clone.remove();
+  return width;
+};
+
+/** ***************** calculate full height for given element *******************/
+export const calculateTextHeight = (
+  element: HTMLElement,
+  styleRoot?: HTMLElement,
+) => {
+  const clone = element.cloneNode(true) as HTMLElement;
+  clone.style.font = getCssStyle(styleRoot ?? element, "font");
+  clone.style.width = `${element.offsetWidth}px`;
+  clone.style.padding = getCssStyle(styleRoot ?? element, "padding");
+  clone.style.lineHeight = getCssStyle(styleRoot ?? element, "line-height");
+  clone.style.letterSpacing = getCssStyle(
+    styleRoot ?? element,
+    "letter-spacing",
+  );
+  clone.style.webkitLineClamp = "unset";
+  clone.style.position = "absolute";
+  clone.style.left = "-10000%";
+  document.body.appendChild(clone);
+  const height = clone.offsetHeight;
+  clone.remove();
+  return height;
+};

package/src/utils/getColor.ts

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+import { isColor } from "@react-fabric/utilities";
+
+export const getColor = (color: string) => {
+  if (color && isColor(color)) {
+    return color;
+  }
+};
+
+export const getBgClass = (bg: string) => {
+  if (bg && !isColor(bg)) {
+    return `bg-${bg}`;
+  }
+};
+
+export const getColorClass = (color: string) => {
+  if (color && !isColor(color)) {
+    return `text-${color}`;
+  }
+};
+export const getBorderClass = (color: string) => {
+  if (color && !isColor(color)) {
+    return `border-${color}`;
+  }
+};

package/src/utils/index.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+export * from "./calculateDimensions";
+export * from "./getColor";
+export * from "./nodeCheck";

package/src/utils/nodeCheck.ts

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+import { isObject } from "@react-fabric/utilities";
+import { type ComponentType } from "react";
+
+export const nodeCheck = (
+  node: AnyObject,
+  ...types: Array<ComponentType<AnyObject>>
+) => {
+  return isObject(node) && "type" in node && types.includes(node.type);
+};