@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

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,
@@ -109,6 +142,7 @@ export const Abbr = ({
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(abbr)) {

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 *******************/
@@ -82,6 +96,7 @@ export const Mark = ({ children, mark, renderer }: MarkProps) => {
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(mark)) {

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}

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<
@@ -67,7 +66,22 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
 }
 
 /**
- * Typography title component
+ * A component that renders a title with customizable styles such as background color, text color, size, alignment, and font family.
+ * It can be rendered as different HTML elements based on the `as` prop.
+ * This component is useful for creating headings or titles in a consistent style across an application.
+ *
+ * @param {TitleProps} props - The properties for the Title component.
+ * @returns {JSX.Element} The rendered Title component.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1" bg="blue-500" color="white" size="2xl" align="center">
+ *   This is a Title
+ * </Title>
+ * // Renders a title as an h1 element with a blue background, white text color, size of 2xl, and centered alignment.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--title} for more details.
  */
 export const Title = ({
   children,
@@ -109,13 +123,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/{overlays/tooltip/Tooltip.module.css → utils/cloneElement.ts}

@@ -21,33 +21,27 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .tooltip {
-    z-index: var(--z-tooltip);
-    color: theme(backgroundColor.invert);
+import { Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
 
-    &[data-color="primary"] {
-      color: theme(colors.primary.600);
+export const cloneChildren = (
+  children: React.ReactNode,
+  callback: (child: React.ReactNode, index: number) => React.ReactNode,
+): React.ReactNode => {
+  return Children.map(children, (c: React.ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren((c.props as AnyObject)?.children, callback);
+      }
+      return c;
     }
-
-    &[data-color="accent"] {
-      color: theme(colors.accent.600);
-    }
-
-    &[data-color="info"] {
-      color: theme(colors.info.600);
-    }
-
-    &[data-color="danger"] {
-      color: theme(colors.danger.600);
-    }
-
-    &[data-color="success"] {
-      color: theme(colors.success.600);
-    }
-
-    &[data-color="warning"] {
-      color: theme(colors.warning.600);
+    if (c instanceof Promise) {
+      return undefined;
     }
-  }
-}
+    return c as AnyObject;
+  })
+    ?.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";