@react-fabric/core 1.0.0-beta.0

package/src/components/card/Card.module.css

@@ -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.
+ */
+
+@layer comp {
+  .cardWrapper.selected {
+    &::before {
+      content: "";
+
+      position: absolute;
+      z-index: 5;
+      top: -4px;
+      inset-inline-start: -4px;
+
+      border-top: 1rem solid theme(colors.accent.500);
+      border-bottom: 1rem solid transparent;
+      border-inline-start: 1rem solid theme(colors.accent.500);
+      border-inline-end: 1rem solid transparent;
+      border-start-start-radius: var(--rounding-cap);
+    }
+
+    &::after {
+      content: "✓";
+
+      position: absolute;
+      z-index: 5;
+      top: -4px;
+      inset-inline-start: -4px;
+
+      padding: 4px;
+
+      line-height: 1;
+      color: theme(colors.white);
+    }
+  }
+
+  .card {
+    background-color: var(--fabric-bg);
+    box-shadow: 0 0 0 1px theme(borderColor.muted);
+
+    & > * {
+      background-color: transparent;
+    }
+
+    & .cardCover {
+      &.inheritScheme:has([data-colorset="dark"]) > .cardCoverContent,
+      &.dark > .cardCoverContent {
+        color: var(--white);
+        text-shadow: 0 0 2px var(--black);
+        background-image: linear-gradient(to bottom, #0000 0, #0006 100%);
+      }
+
+      &.inheritScheme:has([data-colorset="light"]) > .cardCoverContent,
+      &.light > .cardCoverContent {
+        color: var(--black);
+        text-shadow: 0 0 2px var(--white);
+        background-image: linear-gradient(to bottom, #fff0 0, #fff6 100%);
+      }
+    }
+
+    & .cardBody {
+      padding: 1rem;
+    }
+
+    &.clickable {
+      box-shadow:
+        0 0 0 1px theme(borderColor.dimmed),
+        0 1px 2px 0 var(--fabric-shadow);
+      transition: box-shadow 0ms;
+
+      &:has(.cardBody:hover):not(:has([data-inner-clickable="true"]:hover)) {
+        box-shadow:
+          0 0 0 1px theme(borderColor.dimmed),
+          0 1px 4px 0 var(--fabric-shadow),
+          0 8px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
+        transition-delay: 150ms;
+      }
+
+      &:has(.cardBody:active):not(:has([data-inner-clickable="true"]:hover)) {
+        transform: translateY(1px);
+        box-shadow: 0 0 0 1px theme(borderColor.dimmed);
+        transition-delay: 0ms;
+      }
+
+      & .cardBody {
+        cursor: pointer;
+
+        &::after {
+          pointer-events: none;
+          content: "";
+
+          position: absolute;
+          z-index: 5;
+          inset: 0;
+
+          background-image: linear-gradient(
+            175deg,
+            rgb(255 255 255 / 5%) 0%,
+            transparent 18%,
+            transparent 72%,
+            rgb(0 0 0 / 5%) 100%
+          );
+        }
+      }
+    }
+  }
+}
+
+@layer util {
+  .card {
+    & .cardBody {
+      & > * {
+        grid-area: unset;
+        background-color: transparent;
+      }
+    }
+
+    & .cardCover {
+      & > [data-ref="image"],
+      & > [data-ref="video"] {
+        position: absolute;
+        z-index: 0;
+        inset: 0;
+      }
+
+      & .cardCoverContent {
+        & > * {
+          flex: 0 0 auto;
+        }
+      }
+    }
+  }
+}

package/src/components/card/Card.tsx

@@ -0,0 +1,154 @@
+/*
+ * 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 {
+  Children,
+  useMemo,
+  type DragEvent,
+  type MouseEventHandler,
+} 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 TestProps,
+} from "../../types";
+import { nodeCheck } from "../../utils";
+import classes from "./Card.module.css";
+
+export interface CardProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+  /**
+   * apply flex fill styling
+   */
+  flex?: boolean;
+  /**
+   * click handler
+   */
+  onClick?: MouseEventHandler;
+  /**
+   * body css classname(s)
+   */
+  bodyClassName?: string;
+  /**
+   * show selected ring
+   */
+  selected?: boolean;
+  /**
+   * show tick mark ribbon
+   */
+  selectedRibbon?: boolean;
+  /**
+   * make card draggable
+   */
+  draggable?: boolean;
+  /**
+   * drag event data key
+   */
+  dragKey?: string;
+  /**
+   * drag event data
+   */
+  dragData?: KeyValue;
+}
+
+export const Card = ({
+  children,
+  className,
+  bodyClassName,
+  selected,
+  selectedRibbon,
+  onClick,
+  flex,
+  draggable,
+  dragKey,
+  dragData,
+  ...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]);
+
+  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",
+      )}
+    >
+      <ErrorBoundary>
+        <div
+          className={classNames(
+            classes.card,
+            className,
+            "rounded-capped flex flex-col flex-nowrap overflow-hidden",
+            onClick && classes.clickable,
+          )}
+          draggable={draggable}
+          onDragStart={
+            !draggable
+              ? undefined
+              : (e: DragEvent) =>
+                  dragKey &&
+                  e.dataTransfer?.setData(dragKey, JSON.stringify(dragData))
+          }
+          {...aria}
+        >
+          {header}
+          <div
+            role="none"
+            className={classNames(classes.cardBody, bodyClassName, "flex-1")}
+            onClick={onClick}
+          >
+            {body}
+          </div>
+          {footer}
+        </div>
+      </ErrorBoundary>
+    </div>
+  );
+};

package/src/components/card/CardCover.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { 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";
+
+export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
+  /**
+   * cover height
+   */
+  height?: string | number;
+  /**
+   * cover color scheme
+   */
+  colorScheme?: "light" | "dark";
+  /**
+   * justify content
+   */
+  justify?: "start" | "center" | "end";
+}
+
+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]);
+  return (
+    <div
+      style={{ height }}
+      className={classNames(
+        classes.cardCover,
+        classes[colorScheme ?? "inheritScheme"],
+        "relative z-0",
+      )}
+      {...aria}
+    >
+      {media}
+      <div
+        className={classNames(
+          classes.cardCoverContent,
+          "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full",
+          className,
+          `justify-${justify}`,
+          className,
+        )}
+      >
+        {body}
+      </div>
+    </div>
+  );
+};

package/src/components/chip/Chip.module.css

@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+
+@layer comp {
+  .chip {
+    --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
+
+    color: theme(colors.tint.500);
+    background-image: var(--blank-gradient);
+    outline: 1px solid color-mix(in lab, currentcolor 20%, var(--fabric-bg));
+    outline-offset: -1px;
+
+    & > .chipLabel {
+      padding: 0.25em 0.5em;
+    }
+
+    & > .chipIcon {
+      & + .chipLabel {
+        margin-inline-start: -0.5em;
+      }
+    }
+
+    & > .chipRemove {
+      /* mayble add styles later */
+    }
+
+    &.clickable {
+      cursor: pointer;
+      background-image: var(--click-gradient);
+
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+@layer var {
+  .chip {
+    height: unset;
+    padding: unset;
+    background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
+
+    &[data-variant="outline"] {
+      outline-color: color-mix(in lab, currentcolor 50%, var(--fabric-bg));
+      box-shadow: 0 0 2px color-mix(in lab, currentcolor 50%, var(--tint)) inset;
+    }
+
+    > * {
+      color: color-mix(in lab, currentcolor 50%, var(--fabric-text));
+    }
+
+    &.clickable {
+      &:hover {
+        background-color: color-mix(in lab, currentcolor 20%, var(--fabric-bg));
+      }
+
+      &:active,
+      &[data-dropdown-open="true"] {
+        background-color: color-mix(in lab, currentcolor 15%, var(--fabric-bg));
+        background-image: var(--active-gradient);
+      }
+
+      &[data-dropdown-open="true"] {
+        pointer-events: none;
+      }
+    }
+
+    &[data-variant="solid"] {
+      background-color: color-mix(in lab, currentcolor 35%, var(--fabric-bg));
+      outline-color: color-mix(in lab, currentcolor 50%, var(--fabric-bg));
+
+      & > * {
+        color: color-mix(in lab, currentcolor 5%, var(--fabric-text));
+      }
+
+      &.clickable {
+        &:hover {
+          background-color: color-mix(
+            in lab,
+            currentcolor 45%,
+            var(--fabric-bg)
+          );
+        }
+
+        &:active,
+        &[data-dropdown-open="true"] {
+          background-color: color-mix(
+            in lab,
+            currentcolor 30%,
+            var(--fabric-bg)
+          );
+        }
+      }
+    }
+  }
+}

package/src/components/chip/Chip.tsx

@@ -0,0 +1,201 @@
+/*
+ * 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, type ReactElement } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildProp,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type PolymorphicProps,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { getColor, getColorClass } from "../../utils";
+import { Icon } from "../icon/Icon";
+import classes from "./Chip.module.css";
+
+export interface ChipProps
+  extends CssProp,
+    AriaProps,
+    IconProps,
+    TestProps,
+    ChildProp<string | ReactElement>,
+    RefProp<HTMLDivElement> {
+  /**
+   * chip size
+   */
+  size?: SizeType;
+  /**
+   * chip color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * chip styling
+   */
+  variant?: "solid" | "outline";
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * prevent click propagation
+   */
+  stopPropagation?: boolean;
+  /**
+   * click handler
+   */
+  onClick?: React.MouseEventHandler;
+  /**
+   * icon click handler
+   */
+  onIconClick?: React.MouseEventHandler;
+  /**
+   * remove handler
+   */
+  onRemove?: React.MouseEventHandler;
+}
+
+const SizeMap: KeyValue<string> = {
+  xs: "0.625rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+export const Chip = <Tag extends React.ElementType = "div">({
+  ref,
+  children,
+  className,
+  size,
+  color,
+  variant,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  disabled,
+  onClick,
+  onIconClick,
+  onRemove,
+  rounded,
+  stopPropagation,
+  as,
+  ...aria
+}: ChipProps & PolymorphicProps<Tag>) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (size && !(size in SizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in SizeMap) {
+        s.fontSize = SizeMap[size];
+      }
+      return s;
+    },
+    [color, size],
+    "Chip styles",
+  );
+
+  const clickHandler = useCallback(
+    (e: React.MouseEvent) => {
+      if (stopPropagation) e.stopPropagation();
+      onClick?.(e);
+    },
+    [onClick, stopPropagation],
+  );
+
+  const removeHandler = useCallback(
+    (e: React.MouseEvent) => {
+      if (stopPropagation) e.stopPropagation();
+      onRemove?.(e);
+    },
+    [onRemove, stopPropagation],
+  );
+
+  const E = as ?? "div";
+  return (
+    <E
+      ref={ref}
+      role="term"
+      className={classNames(
+        classes.chip,
+        className,
+        color && getColorClass(color),
+        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded",
+        rounded && "rounded-full",
+        !!onClick && classes.clickable,
+        disabled && classes.disabled,
+      )}
+      style={styles}
+      data-variant={variant}
+      data-inner-clickable={!!onClick}
+      {...{ onClick: clickHandler }}
+      {...aria}
+    >
+      {icon && (
+        <Icon
+          className={classNames(classes.chipIcon, "m-1")}
+          icon={icon}
+          bg={iconBg}
+          onClick={onIconClick}
+          color={iconColor}
+          rtlFlip={rtlFlip}
+        />
+      )}
+      {children && (
+        <label
+          className={classNames(classes.chipLabel, "leading-none truncate")}
+        >
+          {children}
+        </label>
+      )}
+      {onRemove && (
+        <span
+          role="none"
+          className={classNames(
+            classes.chipRemove,
+            "cursor-pointer pe-1 opacity-65 hover:opacity-90",
+          )}
+          onClick={removeHandler}
+        >
+          &times;
+        </span>
+      )}
+    </E>
+  );
+};