@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/components/card/Card.tsx

@@ -1,68 +1,60 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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 {
-  Children,
-  useMemo,
-  type DragEvent,
-  type MouseEventHandler,
-} from "react";
+import { cn } from "@react-fabric/utilities";
+import { useCallback } from "react";
 import { ErrorBoundary } from "../../core/boundary/ErrorBoundary";
 import { type ContentProps } from "../../core/content/Content";
-import {
-  Footer,
-  Header,
-  type HeadFootProps,
-} from "../../core/headfoot/HeadFoot";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type CssProp,
-  type RefProp,
-  type TestProps,
+import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
+import type {
+  ChildrenProp,
+  CssPropWithMap,
+  Draggable,
+  HeightProps,
+  PolymorphicProps,
+  RefProp,
+  TestProps,
+  WidthProps,
 } from "../../types";
-import { nodeCheck } from "../../utils";
-import classes from "./Card.module.css";
+import { StyleEffect } from "../effect/StyleEffect";
+import type { TitlebarProps } from "../titlebar/Titlebar";
+import { Titlebar } from "../titlebar/Titlebar";
 
-export interface CardProps
-  extends CssProp,
-    AriaProps,
+interface BaseProps
+  extends
+    CssPropWithMap<{ root?: string; body?: string; titlebar?: string; title?: string; icon?: string }>,
     TestProps,
+    HeightProps,
+    WidthProps,
+    Draggable,
     RefProp<HTMLDivElement>,
     ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
-  /**
-   * apply flex fill styling
-   */
-  flex?: boolean;
   /**
    * click handler
    */
-  onClick?: MouseEventHandler;
-  /**
-   * body css classname(s)
-   */
-  bodyClassName?: string;
+  onClick?: React.MouseEventHandler;
   /**
    * show selected ring
    */
@@ -71,88 +63,114 @@ export interface CardProps
    * show tick mark ribbon
    */
   selectedRibbon?: boolean;
-  /**
-   * make card draggable
-   */
-  draggable?: boolean;
-  /**
-   * drag event data key
-   */
-  dragKey?: string;
-  /**
-   * drag event data
-   */
-  dragData?: KeyValue;
+
+  hideEffect?: boolean;
 }
 
-export const Card = ({
+export type CardProps<Tag extends React.ElementType = "div"> = BaseProps & PolymorphicProps<Tag> & TitlebarProps;
+
+/**
+ * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
+ * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
+ * The Card component is designed to be flexible and can be used in various contexts, such as displaying user profiles, product information, or any other content that benefits from a card layout.
+ * The component accepts children that can include a Header, body content, and a Footer.
+ * It also supports additional properties for styling, accessibility, and interaction.
+ * It can be styled with custom CSS classes and supports features like selection indication and drag-and-drop functionality.
+ *
+ * @example
+ * ```jsx
+ * <Card
+ *   className="my-custom-class"
+ *   classNames={{ body: "my-body-class" }}
+ *   selected={true}
+ *   selectedRibbon={true}
+ *   onClick={() => console.log("Card clicked")}
+ *   onDragStart={(event, key, data) => console.log("Drag started", key, data)}
+ *   draggable={true}
+ *   dragKey="my-drag-key"
+ *   dragData={{ id: 1, name: "Card Data" }}
+ *   aria-label="My Card"
+ * >
+ *   <Header>Card Header</Header>
+ *   <div>Card Body Content</div>
+ *   <Footer>Card Footer</Footer>
+ * </Card>
+ * ```
+ */
+export function Card<Tag extends React.ElementType = "div">({
   children,
   className,
-  bodyClassName,
+  classNames,
   selected,
   selectedRibbon,
   onClick,
-  flex,
+  onDragStart,
+  hideEffect,
   draggable,
   dragKey,
   dragData,
   ref,
-  ...aria
-}: CardProps) => {
-  const [header, body, footer] = useMemo(() => {
-    return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
-      (ret, node) => {
-        nodeCheck(node, Header)
-          ? ret[0].push(node)
-          : nodeCheck(node, Footer)
-            ? ret[2].push(node)
-            : ret[1].push(node);
-        return ret;
-      },
-      [[], [], []],
-    );
-  }, [children]);
+  as,
+  height,
+  width,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  title,
+  icon,
+  actions,
+  ...props
+}: CardProps<Tag>) {
+  const handleDragStart = useCallback(
+    (event: React.DragEvent) => {
+      if (dragKey) {
+        event.dataTransfer?.setData(dragKey, JSON.stringify(dragData));
+        onDragStart?.(event, dragKey, dragData);
+      }
+    },
+    [dragKey, dragData, onDragStart],
+  );
 
+  const E = as ?? "div";
   return (
     <div
-      className={classNames(
-        classes.cardWrapper,
-        "rounded-capped relative grid",
-        flex && "flex-1",
-        selected && selectedRibbon && classes.selected,
-        selected && "outline outline-2 outline-accent-500 outline-offset-2",
+      className={cn(
+        "fabric-card",
+        className,
+        classNames?.root,
+        "rounded-capped relative scroll-thin",
+        selectedRibbon && "selected-ribbon",
+        !selectedRibbon && "is-selected:ring-[1.5px] is-selected:ring-accent-500 is-selected:ring-offset-2",
       )}
+      data-clickable={!!onClick || "to" in props || "href" in props}
+      data-selected={selected}
+      draggable={draggable}
+      onDragStart={!draggable ? undefined : handleDragStart}
+      ref={ref}
     >
+      {!hideEffect && <StyleEffect />}
+      <Titlebar title={title} icon={icon} actions={actions} className={classNames?.titlebar} classNames={classNames} />
       <ErrorBoundary>
-        <div
-          className={classNames(
-            classes.card,
-            className,
-            "rounded-capped flex flex-col flex-nowrap overflow-hidden",
-            onClick && classes.clickable,
+        <E role="none" onClick={onClick} {...props} className="contents">
+          {children && (
+            <object
+              type="none"
+              className={cn("fabric-cardBody", classNames?.body, "grid overflow-hidden min-w-0 z-1")}
+              style={{
+                height,
+                width,
+                minHeight,
+                minWidth,
+                maxHeight,
+                maxWidth,
+              }}
+            >
+              {children}
+            </object>
           )}
-          draggable={draggable}
-          onDragStart={
-            !draggable
-              ? undefined
-              : (e: DragEvent) =>
-                  dragKey &&
-                  e.dataTransfer?.setData(dragKey, JSON.stringify(dragData))
-          }
-          ref={ref}
-          {...aria}
-        >
-          {header}
-          <div
-            role="none"
-            className={classNames(classes.cardBody, bodyClassName, "flex-1")}
-            onClick={onClick}
-          >
-            {body}
-          </div>
-          {footer}
-        </div>
+        </E>
       </ErrorBoundary>
     </div>
   );
-};
+}

package/src/components/card/CardCover.tsx

@@ -1,87 +1,87 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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 { Children, useMemo } from "react";
-import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
-import { nodeCheck } from "../../utils";
-import { Image, Video } from "../media/Media";
-import classes from "./Card.module.css";
+import { cn } from "@react-fabric/utilities";
+import type { ChildProp, CssProp } from "../../types";
+import type { ImageProps, VideoProps } from "../media/Media";
 
-export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
+export interface CardCoverProps extends CssProp, ChildProp<ImageProps | VideoProps> {
   /**
    * cover height
    */
   height?: string | number;
-  /**
-   * cover color scheme
-   */
-  colorScheme?: "light" | "dark";
   /**
    * justify content
    */
   justify?: "start" | "center" | "end";
+  /**
+   * cover media element
+   */
+  title: React.ReactNode;
 }
 
-export const CardCover = ({
-  className,
-  children,
-  height = 120,
-  justify = "end",
-  colorScheme,
-  ...aria
-}: CardCoverProps) => {
-  const [media, body] = useMemo(() => {
-    return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
-      (ret, node) => {
-        nodeCheck(node, Image, Video) ? ret[0].push(node) : ret[1].push(node);
-        return ret;
-      },
-      [[], []],
-    );
-  }, [children]);
+const JUSTIFY_MAP = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+};
+
+/**
+ * A cover component for cards that can contain media and content.
+ * It allows for flexible layout options and supports different color schemes.
+ * It can be used to create visually appealing card layouts with media content.
+ *
+ * @example
+ * ```jsx
+ * <CardCover
+ *   height={200}
+ *   colorScheme="light"
+ *   justify="center"
+ *   className="my-custom-class"
+ *   aria-label="Card Cover"
+ * >
+ *   <Image src="image.jpg" alt="Card Image" />
+ *   <div>Card Content</div>
+ * </CardCover>
+ * // Renders a card cover with a height of 200px, light color scheme, centered content, and a custom class name.
+ * ```
+ */
+export function CardCover({ className, children, title, height = 120, justify = "end", ...props }: CardCoverProps) {
   return (
-    <div
-      style={{ height }}
-      className={classNames(
-        classes.cardCover,
-        classes[colorScheme ?? "inheritScheme"],
-        "relative z-0",
-      )}
-      {...aria}
-    >
-      {media}
+    <div style={{ height }} className="fabric-cardCover relative area-header z-0" {...props}>
+      {children}
       <div
-        className={classNames(
-          classes.cardCoverContent,
+        className={cn(
+          "fabric-cardCoverContent",
           "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full",
-          className,
-          `justify-${justify}`,
+          JUSTIFY_MAP[justify],
           className,
         )}
       >
-        {body}
+        {title}
       </div>
     </div>
   );
-};
+}

package/src/components/card/FlipContent.tsx

@@ -0,0 +1,78 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 { Children, cloneElement, isValidElement, useImperativeHandle, useState } from "react";
+import type { ChildrenProp, CssProp, RefProp } from "../../types";
+
+/**
+ * Ref interface for FlipContent
+ */
+export interface FlipContentRef {
+  /**
+   * Programmatically flip the card
+   */
+  flipCard: () => void;
+}
+
+export interface Props extends ChildrenProp, RefProp<FlipContentRef> {}
+
+/**
+ * A component that flips between front and back content using a ref-based API.
+ * The first child renders as the front face, the second child as the back face.
+ * Use the `flipCard` ref method to programmatically toggle between faces.
+ *
+ * @example
+ * ```jsx
+ * <FlipContent ref={flipRef}>
+ *    <div className="front">Front Content</div>
+ *    <div className="back">Back Content</div>
+ * </FlipContent>
+ * ```
+ */
+export function FlipContent({ ref, children }: Props) {
+  const [showBack, setShowBack] = useState(false);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      flipCard: () => setShowBack((b) => !b),
+    }),
+    [],
+  );
+
+  return (
+    <div className="fabric-flipCard relative area-content" data-card-flip={showBack}>
+      {/* eslint-disable-next-line @eslint-react/no-children-map */}
+      {Children.map(
+        children,
+        (child, idx) =>
+          isValidElement<CssProp>(child) &&
+          cloneElement(child, {
+            "data-card-flip-face": idx === 0 ? "front" : "back",
+          } as KeyValue),
+      )}
+    </div>
+  );
+}