@react-fabric/core 1.0.0-beta.0

package/src/types/index.ts

@@ -0,0 +1,238 @@
+/*
+ * 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 { type Placement } from "@floating-ui/react";
+import { type JSXElementConstructor, type Ref } from "react";
+
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
+
+export type ColorType =
+  | "primary"
+  | "accent"
+  | "info"
+  | "danger"
+  | "success"
+  | "warning";
+
+export type PaletteType =
+  | "scarlet"
+  | "pumpkin"
+  | "marigold"
+  | "avacado"
+  | "jade"
+  | "denim"
+  | "iris"
+  | "lilac"
+  | "coral"
+  | "wood"
+  | "silver"
+  | "steel"
+  | "olive"
+  | "sand";
+
+export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
+
+export const ThemeColors = [
+  "primary",
+  "accent",
+  "info",
+  "danger",
+  "success",
+  "warning",
+  "invert",
+  "dimmed",
+  "muted",
+  "gray",
+  "dark",
+  "light",
+];
+
+export interface TooltipType {
+  /**
+   * tooltip content
+   */
+  content?: string | JSX.Element;
+  /**
+   * tooltip color
+   */
+  color?: ColorType;
+  /**
+   * tooltip placement
+   */
+  placement?: Placement;
+}
+
+export interface BadgeType {
+  /**
+   * badge value
+   */
+  value?: number | string;
+  /**
+   * max value for number display
+   */
+  max?: number;
+  /**
+   * ping animation
+   */
+  ping?: boolean;
+  /**
+   * badge CSS className
+   */
+  className?: string;
+}
+
+export interface CssProp {
+  /**
+   * css classname(s)
+   */
+  className?: string;
+}
+
+export interface TestProps {
+  /**
+   * data attribute for test id
+   */
+  "data-testid"?: string;
+  /**
+   * data attribute for test value
+   */
+  "data-test-value"?: AnyObject;
+}
+
+export type Elements<T> =
+  | React.ReactElement<T>
+  | React.ReactPortal
+  | React.ReactNode
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+export type AriaProps = React.AriaAttributes;
+
+/**
+ * For wrapping components
+ */
+
+export interface RefProp<T = HTMLElement> {
+  ref?: Ref<T>;
+}
+
+/* *********** */
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+export type CallbackReturn<T = unknown> = void | T | Promise<T | void>;
+
+export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+
+export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType
+  ? Omit<React.ComponentProps<AsTag>, "ref">
+  : never;
+
+export type PolymorphicProps<AsTag extends ReactTag> = Omit<
+  PropsOf<AsTag>,
+  "children" | "as" | "className"
+> & {
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  as?: AsTag;
+};
+
+export interface IconProps {
+  /**
+   * svg path / image url
+   */
+  icon?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
+  /**
+   * icon background color
+   */
+  iconBg?: ColorType | string;
+  /**
+   * icon color
+   */
+  iconColor?: ColorType | string;
+}
+
+export interface CollapseProps {
+  /**
+   * Allow collapsing
+   */
+  collapsable?: boolean;
+  /**
+   * Default collapsed
+   */
+  collapsed?: boolean;
+  /**
+   * Collapse event
+   */
+  onCollapse?: (state: boolean) => void;
+}
+export interface ExpandProps {
+  /**
+   * Allow expanding
+   */
+  expandable?: boolean;
+  /**
+   * Default expanded
+   */
+  expanded?: boolean;
+  /**
+   * Expand event
+   */
+  onExpand?: (state: boolean) => void;
+}
+
+export interface TooltipProp {
+  /**
+   * floating tooltip
+   */
+  tooltip?: string | TooltipType;
+}
+
+export interface ChildProp<T = JSX.Element> {
+  children: Elements<T>;
+}
+
+export interface ChildrenProp<T = JSX.Element> {
+  children: Elements<T> | Array<Elements<T>>;
+}
+
+export interface PositionObject {
+  top: number;
+  left: number;
+}
+
+export interface SizeObject {
+  width: number;
+  height: number;
+}

package/src/typography/Abbr.tsx

@@ -0,0 +1,152 @@
+/*
+ * 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 { isEmpty, isString, tokenize } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback, useMemo } from "react";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import { Tooltip, getTooltipProps } from "../overlays/tooltip/Tooltip";
+import { type ChildProp, type ColorType } from "../types";
+import { getColor, getColorClass } from "../utils";
+import classes from "./Typography.module.css";
+
+interface AbbrTextProps {
+  children: string;
+  color?: string;
+  tooltip?: string;
+  content?: string;
+}
+
+const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
+  const TooltipWrapper = useMemo(
+    () => (tooltip ? Tooltip : Fragment),
+    [tooltip],
+  );
+  const tooltipProps = useMemo(() => {
+    return { ...getTooltipProps(tooltip), copyContent: content };
+  }, [tooltip, content]);
+
+  return (
+    <TooltipWrapper {...tooltipProps}>
+      <abbr
+        className={classNames(
+          classes.abbr,
+          "whitespace-nowrap",
+          color && getColorClass(color),
+        )}
+        style={
+          color ? ({ "--abbr-color": getColor(color) } as AnyObject) : undefined
+        }
+      >
+        {children}
+      </abbr>
+    </TooltipWrapper>
+  );
+};
+
+export interface AbbrProps extends ChildProp<string> {
+  /**
+   * content to copy using the tooltip copy action
+   */
+  copyContent?: "text" | "tooltip";
+  /**
+   * texts to match and abbreviate within
+   *
+   * [textPart, tooltip, color (class name or color string)]
+   */
+  abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+  /**
+   * renderer callback
+   */
+  renderer?: (part: string[]) => JSX.Element;
+}
+
+/**
+ * Typography abbr component to wrap text parts in `abbr` with tooltip
+ */
+export const Abbr = ({
+  children,
+  abbr,
+  renderer,
+  copyContent = "text",
+}: AbbrProps) => {
+  /** ***************** abbr text renderer *******************/
+  const abbrRender = useCallback(
+    (text: string, tooltip: string, color = "") => {
+      return (
+        <AbbrText
+          color={color}
+          tooltip={tooltip}
+          content={copyContent === "tooltip" ? tooltip : text}
+        >
+          {(renderer?.([text, tooltip, color]) ?? text) as string}
+        </AbbrText>
+      );
+    },
+    [renderer, copyContent],
+  );
+
+  /** ***************** tokenize text with abbr list *******************/
+  const inner = useMemoDebugger(
+    () => {
+      if (isString(children)) {
+        if (!isEmpty(abbr)) {
+          const tokens = tokenize(
+            children,
+            abbr.map(([keyword]) => keyword),
+          );
+          const titles: KeyValue = abbr.reduce(
+            (t, [a, tooltip = "", color = ""]) => ({
+              ...t,
+              [a.toLowerCase()]: {
+                tooltip,
+                color,
+              },
+            }),
+            {},
+          );
+          return (
+            <Fragment>
+              {tokens.map(([start, text], i) => {
+                const { tooltip = "", color = "" } =
+                  titles[text.toLowerCase()] ?? {};
+                return (
+                  <Fragment key={i}>
+                    {start}
+                    {text ? abbrRender(text, tooltip, color) : null}
+                  </Fragment>
+                );
+              })}
+            </Fragment>
+          );
+        }
+      }
+      return children;
+    },
+    [children, abbr, abbrRender],
+    "TextAbbr inner",
+  );
+
+  /** ***************** component *******************/
+  return <span>{inner}</span>;
+};

package/src/typography/Copy.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { useTranslation } from "react-i18next";
+import { Button } from "../components/button/Button";
+import { Tooltip } from "../overlays/tooltip/Tooltip";
+import { type CssProp, type SizeType } from "../types";
+import { CoreIcons } from "../types/icons";
+
+export interface CopyProps extends CssProp {
+  text: string;
+  /**
+   * button size
+   */
+  size?: SizeType;
+}
+
+export const Copy = ({ text, size, className }: CopyProps) => {
+  const { t } = useTranslation("core");
+
+  /** ***************** handle copy *******************/
+  const doCopy = useCallback(() => {
+    void navigator.clipboard.writeText(text);
+  }, [text]);
+
+  return (
+    <Tooltip content={t("action.copy")}>
+      <Button
+        icon={CoreIcons.copy}
+        aria-label="Copy text"
+        actionMessage={t("action.copied")}
+        variant="link"
+        size={size}
+        className={classNames(className, "align-bottom")}
+        onClick={doCopy}
+      />
+    </Tooltip>
+  );
+};

package/src/typography/Link.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 { useMemoDebugger } from "../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type PolymorphicProps,
+  type RefProp,
+  type SizeType,
+} from "../types";
+import { getBgClass, getColor, getColorClass } from "../utils";
+import { TextSizeMap } from "./types";
+
+export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+  /**
+   * link background (CSS color / tailwind color)
+   */
+  bg?: ColorType | string;
+  /**
+   * link color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * link size
+   */
+  size?: SizeType | number | string;
+  /**
+   * font family
+   */
+  family?: "sans" | "serif" | "mono";
+}
+
+/**
+ * Typography link component
+ */
+export const Link = <Tag extends React.ElementType = "a">({
+  ref,
+  as,
+  children,
+  className,
+  bg,
+  color,
+  family,
+  size,
+  ...aria
+}: LinkProps & PolymorphicProps<Tag>) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (size && !(size in TextSizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in TextSizeMap) {
+        s.fontSize = TextSizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size, family],
+    "Link styles",
+  );
+
+  const E = as ?? "a";
+  return (
+    <E
+      className={classNames(
+        "link",
+        className,
+        family && `font-${family}`,
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+      )}
+      style={styles}
+      ref={ref as AnyObject}
+      {...aria}
+    >
+      {children}
+    </E>
+  );
+};

package/src/typography/Mark.tsx

@@ -0,0 +1,122 @@
+/*
+ * 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 { isEmpty, isString, tokenize } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback } from "react";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import { type ChildProp, type ColorType } from "../types";
+import { getBgClass, getColor } from "../utils";
+import classes from "./Typography.module.css";
+
+interface MarkTextProps {
+  children: string;
+  color?: string;
+}
+
+const MarkText = ({ color, children }: MarkTextProps) => {
+  return (
+    <mark
+      className={classNames(
+        classes.mark,
+        "whitespace-nowrap",
+        color && getBgClass(color),
+      )}
+      style={
+        color ? ({ "--mark-color": getColor(color) } as AnyObject) : undefined
+      }
+    >
+      {children}
+    </mark>
+  );
+};
+
+export interface MarkProps extends ChildProp<string> {
+  /**
+   * texts to match and abbreviate within
+   *
+   * [textPart, color (class name or color string)]
+   */
+  mark: Array<[textPart: string, color?: ColorType | string]>;
+  /**
+   * renderer callback
+   */
+  renderer?: (part: string[]) => JSX.Element;
+}
+
+/**
+ * Typography mark component to wrap text parts in `mark`
+ */
+export const Mark = ({ children, mark, renderer }: MarkProps) => {
+  /** ***************** abbr text renderer *******************/
+  const abbrRender = useCallback(
+    (text: string, color = "") => {
+      return (
+        <MarkText color={color}>
+          {(renderer?.([text, color]) ?? text) as string}
+        </MarkText>
+      );
+    },
+    [renderer],
+  );
+
+  /** ***************** tokenize text with abbr list *******************/
+  const inner = useMemoDebugger(
+    () => {
+      if (isString(children)) {
+        if (!isEmpty(mark)) {
+          const tokens = tokenize(
+            children,
+            mark.map(([keyword]) => keyword),
+          );
+          const titles: KeyValue = mark.reduce(
+            (t, [a, color = ""]) => ({
+              ...t,
+              [a.toLowerCase()]: { color },
+            }),
+            {},
+          );
+          return (
+            <Fragment>
+              {tokens.map(([start, text], i) => {
+                const { color = "" } = titles[text.toLowerCase()] ?? {};
+                return (
+                  <Fragment key={i}>
+                    {start}
+                    {text ? abbrRender(text, color) : null}
+                  </Fragment>
+                );
+              })}
+            </Fragment>
+          );
+        }
+      }
+      return children;
+    },
+    [children, mark, abbrRender],
+    "TextMark inner",
+  );
+
+  /** ***************** component *******************/
+  return <span>{inner}</span>;
+};