@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

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,240 @@ export type ColorType =
   | "success"
   | "warning";
 
+export type ColorType =
+  | "primary-50"
+  | "primary-100"
+  | "primary-200"
+  | "primary-300"
+  | "primary-400"
+  | "primary-500"
+  | "primary-600"
+  | "primary-700"
+  | "primary-800"
+  | "primary-900"
+  | "primary-950"
+  | "accent-50"
+  | "accent-100"
+  | "accent-200"
+  | "accent-300"
+  | "accent-400"
+  | "accent-500"
+  | "accent-600"
+  | "accent-700"
+  | "accent-800"
+  | "accent-900"
+  | "accent-950"
+  | "info-50"
+  | "info-100"
+  | "info-200"
+  | "info-300"
+  | "info-400"
+  | "info-500"
+  | "info-600"
+  | "info-700"
+  | "info-800"
+  | "info-900"
+  | "info-950"
+  | "danger-50"
+  | "danger-100"
+  | "danger-200"
+  | "danger-300"
+  | "danger-400"
+  | "danger-500"
+  | "danger-600"
+  | "danger-700"
+  | "danger-800"
+  | "danger-900"
+  | "danger-950"
+  | "success-50"
+  | "success-100"
+  | "success-200"
+  | "success-300"
+  | "success-400"
+  | "success-500"
+  | "success-600"
+  | "success-700"
+  | "success-800"
+  | "success-900"
+  | "success-950"
+  | "warning-50"
+  | "warning-100"
+  | "warning-200"
+  | "warning-300"
+  | "warning-400"
+  | "warning-500"
+  | "warning-600"
+  | "warning-700"
+  | "warning-800"
+  | "warning-900"
+  | "warning-950";
+
 export type PaletteType =
-  | "scarlet"
-  | "pumpkin"
-  | "marigold"
-  | "avacado"
-  | "jade"
-  | "denim"
-  | "iris"
-  | "lilac"
-  | "coral"
-  | "wood"
-  | "silver"
-  | "steel"
-  | "olive"
-  | "sand";
+  | "scarlet-50"
+  | "scarlet-100"
+  | "scarlet-200"
+  | "scarlet-300"
+  | "scarlet-400"
+  | "scarlet-500"
+  | "scarlet-600"
+  | "scarlet-700"
+  | "scarlet-800"
+  | "scarlet-900"
+  | "scarlet-950"
+  | "pumpkin-50"
+  | "pumpkin-100"
+  | "pumpkin-200"
+  | "pumpkin-300"
+  | "pumpkin-400"
+  | "pumpkin-500"
+  | "pumpkin-600"
+  | "pumpkin-700"
+  | "pumpkin-800"
+  | "pumpkin-900"
+  | "pumpkin-950"
+  | "marigold-50"
+  | "marigold-100"
+  | "marigold-200"
+  | "marigold-300"
+  | "marigold-400"
+  | "marigold-500"
+  | "marigold-600"
+  | "marigold-700"
+  | "marigold-800"
+  | "marigold-900"
+  | "marigold-950"
+  | "avacado-50"
+  | "avacado-100"
+  | "avacado-200"
+  | "avacado-300"
+  | "avacado-400"
+  | "avacado-500"
+  | "avacado-600"
+  | "avacado-700"
+  | "avacado-800"
+  | "avacado-900"
+  | "avacado-950"
+  | "jade-50"
+  | "jade-100"
+  | "jade-200"
+  | "jade-300"
+  | "jade-400"
+  | "jade-500"
+  | "jade-600"
+  | "jade-700"
+  | "jade-800"
+  | "jade-900"
+  | "jade-950"
+  | "denim-50"
+  | "denim-100"
+  | "denim-200"
+  | "denim-300"
+  | "denim-400"
+  | "denim-500"
+  | "denim-600"
+  | "denim-700"
+  | "denim-800"
+  | "denim-900"
+  | "denim-950"
+  | "iris-50"
+  | "iris-100"
+  | "iris-200"
+  | "iris-300"
+  | "iris-400"
+  | "iris-500"
+  | "iris-600"
+  | "iris-700"
+  | "iris-800"
+  | "iris-900"
+  | "iris-950"
+  | "lilac-50"
+  | "lilac-100"
+  | "lilac-200"
+  | "lilac-300"
+  | "lilac-400"
+  | "lilac-500"
+  | "lilac-600"
+  | "lilac-700"
+  | "lilac-800"
+  | "lilac-900"
+  | "lilac-950"
+  | "coral-50"
+  | "coral-100"
+  | "coral-200"
+  | "coral-300"
+  | "coral-400"
+  | "coral-500"
+  | "coral-600"
+  | "coral-700"
+  | "coral-800"
+  | "coral-900"
+  | "coral-950"
+  | "wood-50"
+  | "wood-100"
+  | "wood-200"
+  | "wood-300"
+  | "wood-400"
+  | "wood-500"
+  | "wood-600"
+  | "wood-700"
+  | "wood-800"
+  | "wood-900"
+  | "wood-950"
+  | "silver-50"
+  | "silver-100"
+  | "silver-200"
+  | "silver-300"
+  | "silver-400"
+  | "silver-500"
+  | "silver-600"
+  | "silver-700"
+  | "silver-800"
+  | "silver-900"
+  | "silver-950"
+  | "steel-50"
+  | "steel-100"
+  | "steel-200"
+  | "steel-300"
+  | "steel-400"
+  | "steel-500"
+  | "steel-600"
+  | "steel-700"
+  | "steel-800"
+  | "steel-900"
+  | "steel-950"
+  | "olive-50"
+  | "olive-100"
+  | "olive-200"
+  | "olive-300"
+  | "olive-400"
+  | "olive-500"
+  | "olive-600"
+  | "olive-700"
+  | "olive-800"
+  | "olive-900"
+  | "olive-950"
+  | "sand-50"
+  | "sand-100"
+  | "sand-200"
+  | "sand-300"
+  | "sand-400"
+  | "sand-500"
+  | "sand-600"
+  | "sand-700"
+  | "sand-800"
+  | "sand-900"
+  | "sand-950"
+  | "tint-50"
+  | "tint-100"
+  | "tint-200"
+  | "tint-300"
+  | "tint-400"
+  | "tint-500"
+  | "tint-600"
+  | "tint-700"
+  | "tint-800"
+  | "tint-900"
+  | "tint-950";
 
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 
@@ -78,7 +301,11 @@ export interface TooltipType {
   /**
    * tooltip color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType | string;
+  /**
+   * text color
+   */
+  textColor?: ColorType | PaletteType | string;
   /**
    * tooltip placement
    */
@@ -109,6 +336,10 @@ export interface CssProp {
    * css classname(s)
    */
   className?: string;
+  /**
+   * direction
+   */
+  dir?: "ltr" | "rtl";
 }
 
 export interface TestProps {
@@ -122,15 +353,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 +402,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 +462,21 @@ export interface SizeObject {
   width: number;
   height: number;
 }
+
+export interface ScrollObject extends PositionObject, SizeObject {
+  scrollWidth?: number;
+  scrollHeight: number;
+}
+
+export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> =
+  T extends readonly any[]
+    ? T[number]
+    : T extends ArrayLike<any>
+      ? T[number]
+      : undefined;
+
+export type Complete<T> = {
+  [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>>
+    ? T[P]
+    : T[P] | undefined;
+};

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;
@@ -43,17 +47,13 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
     [tooltip],
   );
   const tooltipProps = useMemo(() => {
-    return { ...getTooltipProps(tooltip), copyContent: content };
+    return tooltip ? { ...getTooltipProps(tooltip), copyContent: content } : {};
   }, [tooltip, content]);
 
   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
    */
@@ -82,7 +88,34 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
 }
 
 /**
- * Typography abbr component to wrap text parts in `abbr` with tooltip
+ * A component that renders abbreviated text with tooltips for additional information.
+ * It allows you to define a list of abbreviations, each with a tooltip and optional color.
+ * The component will tokenize the children text and replace matching parts with the abbreviated version.
+ * It supports a copy action that can either copy the text or the tooltip content.
+ * This component is useful for displaying technical terms or acronyms in a user-friendly way,
+ * while providing additional context through tooltips.
+ *
+ * @param {AbbrProps} props - The properties for the Abbr component.
+ * @returns {JSX.Element} The rendered Abbr component.
+ *
+ * @example
+ * ```jsx
+ * <Abbr
+ * abbr={[
+ *   ["HTML", "HyperText Markup Language", "primary"],
+ *   ["CSS", "Cascading Style Sheets", "secondary"],
+ *   ["JS", "JavaScript", "success"],
+ * ]}
+ * className="text-sm"
+ * copyContent="tooltip"
+ * >
+ *   Learn more about HTML, CSS, and JS.
+ * </Abbr>
+ * // Renders the text with abbreviations for HTML, CSS, and JS,
+ * // each with a tooltip showing the full form and colored according to the specified color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
 export const Abbr = ({
   children,

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
    */
@@ -58,9 +59,26 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
 }
 
 /**
- * Typography link component
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * It can be styled with background color, text color, font size, and font family.
+ * It accepts various properties such as `bg`, `color`, `size`, and `family` to customize its appearance.
+ * This component is useful for creating links that need to be styled consistently across an application, while also providing flexibility in terms of the HTML element used.
+ *
+ * @param {AnchorProps} props - The properties for the Anchor component.
+ * @param {Tag} as - The HTML element type to render as (default is "a").
+ * @returns {JSX.Element} - A styled anchor element with the specified properties.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com" bg="blue-500" color="white" size="md">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with a blue background, white text, and medium font size.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--anchor} for more details.
  */
-export const Link = <Tag extends React.ElementType = "a">({
+export const Anchor = <Tag extends React.ElementType = "a">({
   ref,
   as,
   children,
@@ -70,7 +88,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 +114,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/Copy.tsx

@@ -29,6 +29,21 @@ import { Tooltip } from "../overlays/tooltip/Tooltip";
 import { type CssProp, type SizeType } from "../types";
 import { CoreIcons } from "../types/icons";
 
+/**
+ * A component that provides a button to copy text to the clipboard.
+ * It uses the Clipboard API to write the specified text to the clipboard.
+ * The button displays a tooltip feedback when the text is successfully copied.
+ *
+ * @param {CopyProps} props - The properties for the Copy component.
+ * @returns {JSX.Element} The rendered Copy component.
+ *
+ * @example
+ * ```jsx
+ * <Copy text="Text to copy" size="small" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--copy} for more details.
+ */
 export interface CopyProps extends CssProp {
   text: string;
   /**

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
    */
@@ -65,7 +60,26 @@ export interface MarkProps extends ChildProp<string> {
 }
 
 /**
- * Typography mark component to wrap text parts in `mark`
+ * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
+ * It tokenizes the children string based on the provided `mark` array,
+ * which contains pairs of text parts and their corresponding colors.
+ * The component can use a custom renderer to display the marked text,
+ * allowing for greater flexibility in how the text is presented.
+ *
+ * @param {MarkProps} props - The properties for the Mark component.
+ * @returns {JSX.Element} The rendered Mark component.
+ *
+ * @example
+ * <Mark
+ *   mark={[
+ *     ["important", "red"],
+ *     ["note", "blue"],
+ *   ]}
+ * >
+ *   This is an important note that should be highlighted.
+ * </Mark>
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--mark} for more details.
  */
 export const Mark = ({ children, mark, renderer }: MarkProps) => {
   /** ***************** abbr text renderer *******************/

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 {
@@ -79,7 +73,33 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
 }
 
 /**
- * Typography text component
+ * A component that renders text with various styles, supports line clamping, and provides a "show more" link if the text is clipped.
+ * It can be rendered as an inline element or a block element, and allows customization of background color, text color, font size, font family, and text alignment.
+ * It also supports line clamping to limit the number of visible lines, and provides a toggle to show more or less text when the content exceeds the specified clamp.
+ * The component uses a combination of CSS and JavaScript to achieve the desired effects, ensuring a smooth user experience.
+ * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
+ *
+ * @param {TextProps} props - The properties for the Text component.
+ * @returns {JSX.Element} The rendered Text component.
+ *
+ * @example
+ * ```jsx
+ * <Text
+ *   inline={false}
+ *   bg="bg-gray-100"
+ *   color="text-gray-800"
+ *   size="md"
+ *   family="sans"
+ *   clamp={2}
+ *   align="start"
+ * >
+ *   This is a sample text that demonstrates the Text component with various styles applied.
+ * </Text>
+ * // Renders a block-level text with gray background, dark gray text, medium font size,
+ * // sans-serif font family, clamped to 2 lines, and left-aligned.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--text} for more details.
  */
 export const Text = ({
   children,
@@ -164,11 +184,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 +196,7 @@ export const Text = ({
         </div>
       </div>
       {clipped && (
-        <div className={classes.moreLink}>
+        <div className={"fabric-moreLink"}>
           <span
             role="link"
             tabIndex={0}