@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.40

package/src/types/index.ts

@@ -25,11 +25,15 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 
+export type ModalProps<P = unknown> = P & {
+  onClose: (...args: AnyObject) => void;
+};
+
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 
-export type ColorType =
+export type ColorState =
   | "primary"
   | "accent"
   | "info"
@@ -37,21 +41,229 @@ export type ColorType =
   | "success"
   | "warning";
 
+export type ColorType =
+  | "primary-50"
+  | "accent-50"
+  | "info-50"
+  | "danger-50"
+  | "success-50"
+  | "warning-50"
+  | "primary-100"
+  | "accent-100"
+  | "info-100"
+  | "danger-100"
+  | "success-100"
+  | "warning-100"
+  | "primary-200"
+  | "accent-200"
+  | "info-200"
+  | "danger-200"
+  | "success-200"
+  | "warning-200"
+  | "primary-300"
+  | "accent-300"
+  | "info-300"
+  | "danger-300"
+  | "success-300"
+  | "warning-300"
+  | "primary-400"
+  | "accent-400"
+  | "info-400"
+  | "danger-400"
+  | "success-400"
+  | "warning-400"
+  | "primary-500"
+  | "accent-500"
+  | "info-500"
+  | "danger-500"
+  | "success-500"
+  | "warning-500"
+  | "primary-600"
+  | "accent-600"
+  | "info-600"
+  | "danger-600"
+  | "success-600"
+  | "warning-600"
+  | "primary-700"
+  | "accent-700"
+  | "info-700"
+  | "danger-700"
+  | "success-700"
+  | "warning-700"
+  | "primary-800"
+  | "accent-800"
+  | "info-800"
+  | "danger-800"
+  | "success-800"
+  | "warning-800"
+  | "primary-900"
+  | "accent-900"
+  | "info-900"
+  | "danger-900"
+  | "success-900"
+  | "warning-900"
+  | "primary-950"
+  | "accent-950"
+  | "info-950"
+  | "danger-950"
+  | "success-950"
+  | "warning-950";
+
 export type PaletteType =
-  | "scarlet"
-  | "pumpkin"
-  | "marigold"
-  | "avacado"
-  | "jade"
-  | "denim"
-  | "iris"
-  | "lilac"
-  | "coral"
-  | "wood"
-  | "silver"
-  | "steel"
-  | "olive"
-  | "sand";
+  | "scarlet-50"
+  | "pumpkin-50"
+  | "marigold-50"
+  | "avacado-50"
+  | "jade-50"
+  | "denim-50"
+  | "iris-50"
+  | "lilac-50"
+  | "coral-50"
+  | "wood-50"
+  | "silver-50"
+  | "steel-50"
+  | "olive-50"
+  | "sand-50"
+  | "scarlet-100"
+  | "pumpkin-100"
+  | "marigold-100"
+  | "avacado-100"
+  | "jade-100"
+  | "denim-100"
+  | "iris-100"
+  | "lilac-100"
+  | "coral-100"
+  | "wood-100"
+  | "silver-100"
+  | "steel-100"
+  | "olive-100"
+  | "sand-100"
+  | "scarlet-200"
+  | "pumpkin-200"
+  | "marigold-200"
+  | "avacado-200"
+  | "jade-200"
+  | "denim-200"
+  | "iris-200"
+  | "lilac-200"
+  | "coral-200"
+  | "wood-200"
+  | "silver-200"
+  | "steel-200"
+  | "olive-200"
+  | "sand-200"
+  | "scarlet-300"
+  | "pumpkin-300"
+  | "marigold-300"
+  | "avacado-300"
+  | "jade-300"
+  | "denim-300"
+  | "iris-300"
+  | "lilac-300"
+  | "coral-300"
+  | "wood-300"
+  | "silver-300"
+  | "steel-300"
+  | "olive-300"
+  | "sand-300"
+  | "scarlet-400"
+  | "pumpkin-400"
+  | "marigold-400"
+  | "avacado-400"
+  | "jade-400"
+  | "denim-400"
+  | "iris-400"
+  | "lilac-400"
+  | "coral-400"
+  | "wood-400"
+  | "silver-400"
+  | "steel-400"
+  | "olive-400"
+  | "sand-400"
+  | "scarlet-500"
+  | "pumpkin-500"
+  | "marigold-500"
+  | "avacado-500"
+  | "jade-500"
+  | "denim-500"
+  | "iris-500"
+  | "lilac-500"
+  | "coral-500"
+  | "wood-500"
+  | "silver-500"
+  | "steel-500"
+  | "olive-500"
+  | "sand-500"
+  | "scarlet-600"
+  | "pumpkin-600"
+  | "marigold-600"
+  | "avacado-600"
+  | "jade-600"
+  | "denim-600"
+  | "iris-600"
+  | "lilac-600"
+  | "coral-600"
+  | "wood-600"
+  | "silver-600"
+  | "steel-600"
+  | "olive-600"
+  | "sand-600"
+  | "scarlet-700"
+  | "pumpkin-700"
+  | "marigold-700"
+  | "avacado-700"
+  | "jade-700"
+  | "denim-700"
+  | "iris-700"
+  | "lilac-700"
+  | "coral-700"
+  | "wood-700"
+  | "silver-700"
+  | "steel-700"
+  | "olive-700"
+  | "sand-700"
+  | "scarlet-800"
+  | "pumpkin-800"
+  | "marigold-800"
+  | "avacado-800"
+  | "jade-800"
+  | "denim-800"
+  | "iris-800"
+  | "lilac-800"
+  | "coral-800"
+  | "wood-800"
+  | "silver-800"
+  | "steel-800"
+  | "olive-800"
+  | "sand-800"
+  | "scarlet-900"
+  | "pumpkin-900"
+  | "marigold-900"
+  | "avacado-900"
+  | "jade-900"
+  | "denim-900"
+  | "iris-900"
+  | "lilac-900"
+  | "coral-900"
+  | "wood-900"
+  | "silver-900"
+  | "steel-900"
+  | "olive-900"
+  | "sand-900"
+  | "scarlet-950"
+  | "pumpkin-950"
+  | "marigold-950"
+  | "avacado-950"
+  | "jade-950"
+  | "denim-950"
+  | "iris-950"
+  | "lilac-950"
+  | "coral-950"
+  | "wood-950"
+  | "silver-950"
+  | "steel-950"
+  | "olive-950"
+  | "sand-950";
 
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 
@@ -78,7 +290,11 @@ export interface TooltipType {
   /**
    * tooltip color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType | string;
+  /**
+   * text color
+   */
+  textColor?: ColorType | PaletteType | string;
   /**
    * tooltip placement
    */
@@ -122,15 +338,7 @@ export interface TestProps {
   "data-test-value"?: AnyObject;
 }
 
-export type Elements<T> =
-  | React.ReactElement<T>
-  | React.ReactPortal
-  | React.ReactNode
-  | string
-  | number
-  | boolean
-  | null
-  | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 
 export type AriaProps = React.AriaAttributes;
 
@@ -179,11 +387,11 @@ export interface IconProps {
   /**
    * icon background color
    */
-  iconBg?: ColorType | string;
+  iconBg?: ColorType | PaletteType | string;
   /**
    * icon color
    */
-  iconColor?: ColorType | string;
+  iconColor?: ColorType | PaletteType | string;
 }
 
 export interface CollapseProps {
@@ -239,3 +447,8 @@ export interface SizeObject {
   width: number;
   height: number;
 }
+
+export interface ScrollObject extends PositionObject, SizeObject {
+  scrollWidth?: number;
+  scrollHeight: number;
+}

package/src/typography/Abbr.tsx

@@ -26,9 +26,13 @@ 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, type CssProp } from "../types";
-import { getColor, getColorClass } from "../utils";
-import classes from "./Typography.module.css";
+import {
+  type ChildProp,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+} from "../types";
+import { getColor } from "../utils";
 
 interface AbbrTextProps {
   children: string;
@@ -49,11 +53,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
   return (
     <TooltipWrapper {...tooltipProps}>
       <abbr
-        className={classNames(
-          classes.abbr,
-          "whitespace-nowrap",
-          color && getColorClass(color),
-        )}
+        className={classNames("fabric-abbr", "whitespace-nowrap")}
         style={
           color ? ({ "--abbr-color": getColor(color) } as AnyObject) : undefined
         }
@@ -74,7 +74,13 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
    *
    * [textPart, tooltip, color (class name or color string)]
    */
-  abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+  abbr: Array<
+    [
+      textPart: string,
+      tooltip: string,
+      color?: ColorType | PaletteType | string,
+    ]
+  >;
   /**
    * renderer callback
    */

package/src/typography/{Link.tsx → Anchor.tsx}

@@ -29,22 +29,23 @@ import {
   type ChildrenProp,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
 } from "../types";
-import { getBgClass, getColor, getColorClass } from "../utils";
+import { getColor } from "../utils";
 import { TextSizeMap } from "./types";
 
-export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
   /**
    * link background (CSS color / tailwind color)
    */
-  bg?: ColorType | string;
+  bg?: ColorType | PaletteType | string;
   /**
    * link color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * link size
    */
@@ -60,7 +61,7 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
 /**
  * Typography link component
  */
-export const Link = <Tag extends React.ElementType = "a">({
+export const Anchor = <Tag extends React.ElementType = "a">({
   ref,
   as,
   children,
@@ -70,7 +71,7 @@ export const Link = <Tag extends React.ElementType = "a">({
   family,
   size,
   ...aria
-}: LinkProps & PolymorphicProps<Tag>) => {
+}: AnchorProps & PolymorphicProps<Tag>) => {
   /** ***************** style map *******************/
   const styles = useMemoDebugger(
     () => {
@@ -96,13 +97,7 @@ export const Link = <Tag extends React.ElementType = "a">({
   const E = as ?? "a";
   return (
     <E
-      className={classNames(
-        "link",
-        className,
-        family && `font-${family}`,
-        bg && getBgClass(bg),
-        color && getColorClass(color),
-      )}
+      className={classNames("link", className, family && `font-${family}`)}
       style={styles}
       ref={ref as AnyObject}
       {...aria}

package/src/typography/Mark.tsx

@@ -25,9 +25,8 @@ 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";
+import { type ChildProp, type ColorType, type PaletteType } from "../types";
+import { getColor } from "../utils";
 
 interface MarkTextProps {
   children: string;
@@ -37,11 +36,7 @@ interface MarkTextProps {
 const MarkText = ({ color, children }: MarkTextProps) => {
   return (
     <mark
-      className={classNames(
-        classes.mark,
-        "whitespace-nowrap",
-        color && getBgClass(color),
-      )}
+      className={classNames("fabric-mark", "whitespace-nowrap")}
       style={
         color ? ({ "--mark-color": getColor(color) } as AnyObject) : undefined
       }
@@ -57,7 +52,7 @@ export interface MarkProps extends ChildProp<string> {
    *
    * [textPart, color (class name or color string)]
    */
-  mark: Array<[textPart: string, color?: ColorType | string]>;
+  mark: Array<[textPart: string, color?: ColorType | PaletteType | string]>;
   /**
    * renderer callback
    */

package/src/typography/Text.tsx

@@ -38,13 +38,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../types";
-import {
-  calculateTextHeight,
-  getBgClass,
-  getColor,
-  getColorClass,
-} from "../utils";
-import classes from "./Typography.module.css";
+import { calculateTextHeight, getColor } from "../utils";
 import { TextSizeMap } from "./types";
 
 export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
@@ -164,11 +158,9 @@ export const Text = ({
       >
         <div
           className={classNames(
-            classes.text,
-            "text-reset mixed-lang px-[2px] whitespace-pre-wrap",
+            "fabric-text",
+            "mixed-lang px-[2px] whitespace-pre-wrap",
             family && `font-${family}`,
-            bg && getBgClass(bg),
-            color && getColorClass(color),
             clamp && "line-clamp-1",
           )}
           style={styles}
@@ -178,7 +170,7 @@ export const Text = ({
         </div>
       </div>
       {clipped && (
-        <div className={classes.moreLink}>
+        <div className={"fabric-moreLink"}>
           <span
             role="link"
             tabIndex={0}

package/src/typography/Title.tsx

@@ -35,9 +35,8 @@ import {
   type CssProp,
   type SizeType,
 } from "../types";
-import { getBgClass, getColor, getColorClass } from "../utils";
+import { getColor } from "../utils";
 import { TitleSizeMap } from "./types";
-import classes from "./Typography.module.css";
 
 export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
   as?: ElementType<
@@ -109,13 +108,10 @@ export const Title = ({
   return (
     <E
       className={classNames(
-        classes.title,
-        "px-[2px] py-1 truncate whitespace-pre-wrap",
+        "fabric-title",
         className,
         family && `font-${family}`,
         !as && "text-lg",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
       )}
       style={styles}
       {...aria}

package/src/typography/index.ts

@@ -22,8 +22,8 @@
  */
 
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";

package/src/utils/cloneElement.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 { type ReactNode, Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+export const cloneChildren = (
+  children: ReactNode,
+  callback: (child: ReactNode, index: number) => ReactNode,
+): ReactNode => {
+  return Children.map(children, (c: ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren(c.props?.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })
+    ?.flat()
+    .filter(Boolean)
+    .map(callback);
+};

package/src/utils/getColor.ts

@@ -29,21 +29,5 @@ 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}`;
-  }
+  return `var(--color-${color})`;
 };

package/src/utils/index.ts

@@ -24,5 +24,6 @@
 /* istanbul ignore file */
 
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";