@react-fabric/core 1.0.0-beta.0

package/src/components/avatar/Avatar.module.css

@@ -0,0 +1,90 @@
+/*
+ * 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 {
+  .avatar {
+    width: 1em;
+    height: 1em;
+
+    vertical-align: -0.125em;
+
+    border-radius: var(--rounding);
+    box-shadow: 0 0 1px theme(borderColor.base);
+
+    & > i,
+    & > svg,
+    & > img {
+      pointer-events: none;
+
+      overflow: hidden;
+      display: block;
+
+      width: 1em;
+      height: 1em;
+
+      line-height: 1;
+
+      object-fit: cover;
+      background-color: theme(backgroundColor.dimmed);
+      border-radius: inherit;
+
+      fill: currentcolor;
+    }
+
+    & > i::before {
+      line-height: 1;
+    }
+
+    & > .imagePlaceholder {
+      z-index: -1;
+    }
+  }
+
+  .avatarGroup {
+    & > .avatar {
+      box-shadow:
+        0 0 0 1px theme(borderColor.muted),
+        0 0 0 0.125em var(--fabric-bg);
+
+      &:not(:first-child) {
+        margin-inline-start: -0.125em;
+      }
+    }
+
+    & .avatarGroup--extra {
+      width: 1em;
+      height: 1em;
+      font-size: inherit;
+      border-radius: inherit;
+    }
+  }
+}
+
+@layer util {
+  .avatarGroup {
+    & > .avatar {
+      font-size: inherit;
+      border-radius: inherit;
+    }
+  }
+}

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,218 @@
+/*
+ * 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 { isSvgPath } from "@react-fabric/utilities";
+import BoringAvatar from "boring-avatars";
+import classNames from "classnames";
+import { useState } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { getBgClass, getColor, getColorClass } from "../../utils";
+import classes from "./Avatar.module.css";
+
+export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
+  /**
+   * avatar name for generated fallback
+   */
+  name: string;
+  /**
+   * svg path
+   */
+  fallbackIcon?: string;
+  /**
+   * avatar image url
+   */
+  avatar?: string;
+  /**
+   * avatar variant
+   */
+  variant?: "text" | "beam" | "pixel" | "bauhaus";
+  /**
+   * background color (CSS color / tailwind color)
+   */
+  bg?: ColorType | string;
+  /**
+   * icon color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * icon size
+   */
+  size?: SizeType | number | string;
+  /**
+   * viewbox for svg path (default 24)
+   */
+  viewBox?: string;
+  /**
+   * rounded icon
+   */
+  rounded?: boolean;
+  /**
+   * click handler
+   */
+  onClick?: React.MouseEventHandler;
+}
+
+const SizeMap: KeyValue<string> = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem",
+};
+
+/**
+ * An avatar is a graphical representation of a user's identity.
+ */
+export const Avatar = ({
+  ref,
+  name,
+  avatar,
+  fallbackIcon,
+  bg,
+  color,
+  size = "",
+  rounded,
+  variant = "beam",
+  className,
+  viewBox = "0 0 24 24",
+  onClick,
+  ...aria
+}: AvatarProps) => {
+  const [fallback, setFallback] = useState(true);
+
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      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;
+    },
+    [bg, color, size],
+    "Avatar styles",
+  );
+
+  /** ***************** render icon *******************/
+  const avatarImage = useMemoDebugger(
+    () => {
+      setFallback(!avatar);
+      return (
+        avatar && (
+          <div className="contents">
+            <div
+              className={classNames(
+                classes.imgPlaceholder,
+                "absolute inset-0 bg-gray animate-pulse",
+              )}
+            />
+            <img
+              src={avatar}
+              alt={avatar}
+              className="align-baseline"
+              onError={() => setFallback(true)}
+              onLoad={(e) => e.currentTarget.previousElementSibling?.remove()}
+            />
+          </div>
+        )
+      );
+    },
+    [avatar],
+    "Avatar icon",
+  );
+
+  const fallbackAvatar = useMemoDebugger(
+    () => {
+      if (fallbackIcon) {
+        return isSvgPath(fallbackIcon) ? (
+          <svg viewBox={viewBox}>
+            <path fill="currentColor" d={fallbackIcon.toString()} />
+          </svg>
+        ) : (
+          <i className={fallbackIcon} />
+        );
+      }
+      if (variant === "text") {
+        const [, first, second, group] =
+          name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
+        return (
+          <svg role="img">
+            <text
+              x="50%"
+              y="50%"
+              dy=".1em"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              style={{ fontSize: ".5em", fontWeight: 500 }}
+            >
+              {group ?? `${first}${second}`}
+            </text>
+          </svg>
+        );
+      }
+      return <BoringAvatar square size={64} variant={variant} name={name} />;
+    },
+    [name, variant, fallbackIcon],
+    "Avatar fallback",
+  );
+
+  return (
+    <dfn
+      role="presentation"
+      className={classNames(
+        classes.avatar,
+        className,
+        "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+        !rounded && "rounded",
+        rounded && "rounded-full",
+      )}
+      onClick={onClick}
+      style={styles}
+      data-clickable={!!onClick}
+      ref={ref}
+      {...aria}
+    >
+      {!fallback && avatarImage}
+      {fallback && fallbackAvatar}
+    </dfn>
+  );
+};

package/src/components/avatar/AvatarGroup.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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 ReactElement } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+} from "../../types";
+import { type AvatarProps } from "./Avatar";
+import classes from "./Avatar.module.css";
+
+type AvatarChild =
+  | ReactElement<Omit<AvatarProps, "size" | "rounded">>
+  | false
+  | undefined;
+
+export interface AvatarGroupProps extends CssProp, RefProp, AriaProps {
+  children: AvatarChild | AvatarChild[];
+  /**
+   * rounded icon
+   */
+  rounded?: boolean;
+  /**
+   * icon size
+   */
+  size?: SizeType | number | string;
+  /**
+   * max count
+   */
+  totalCount?: number;
+}
+
+const SizeMap: KeyValue<string> = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem",
+};
+
+/**
+ * Group multiple avatars together
+ */
+export const AvatarGroup = ({
+  ref,
+  children,
+  className,
+  totalCount,
+  rounded,
+  size,
+  ...aria
+}: AvatarGroupProps) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (size && !(size in SizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in SizeMap) {
+        s.fontSize = SizeMap[size];
+      }
+      return s;
+    },
+    [size],
+    "Icon styles",
+  );
+
+  const avatars = useMemo(
+    () => Children.toArray(children).filter(Boolean),
+    [children],
+  );
+  const diff = useMemo(
+    () =>
+      totalCount && totalCount > avatars.length && totalCount - avatars.length,
+    [avatars, totalCount],
+  );
+  return (
+    <div
+      {...aria}
+      ref={ref as AnyObject}
+      className={classNames(
+        classes.avatarGroup,
+        className,
+        "inline-flex flex-nowrap",
+        !rounded && "rounded",
+        rounded && "rounded-full",
+      )}
+      style={styles}
+    >
+      {avatars}
+      {!!diff && (
+        <dfn
+          className={classNames(
+            classes.avatar,
+            "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",
+            classes.extra,
+          )}
+        >
+          <svg>
+            <text
+              x="50%"
+              y="50%"
+              dy=".1em"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              style={{ fontSize: ".375em", fontWeight: 500 }}
+            >
+              {`+${diff}`}
+            </text>
+          </svg>
+        </dfn>
+      )}
+    </div>
+  );
+};

package/src/components/badge/Badge.module.css

@@ -0,0 +1,165 @@
+/*
+ * 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 {
+  @keyframes pinger {
+    0% {
+      transform: scale(1);
+      opacity: 0.7;
+    }
+
+    100% {
+      transform: scale(3);
+      opacity: 0;
+    }
+  }
+
+  .badge {
+    --tw-bg-opacity: 1;
+
+    box-sizing: content-box;
+    color: theme(textColor.base);
+    background-color: theme(colors.tint.200/var(--tw-bg-opacity));
+    outline: 0.5px solid theme(backgroundColor.base);
+
+    & > span {
+      font-size: 0.625em;
+      font-weight: 500;
+      line-height: 1;
+      vertical-align: 0.125em;
+    }
+
+    &[data-ping="true"] {
+      --translate: calc(50%);
+
+      &::before {
+        content: "";
+
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+
+        background-color: inherit;
+        border-radius: 999px;
+
+        animation: pinger 1s linear infinite;
+      }
+    }
+
+    &:not([data-ping="true"]) {
+      --translate: 0.75rem;
+
+      min-width: 1em;
+    }
+
+    &[data-placement="top"] {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &[data-placement="top-start"] {
+      top: 0;
+      inset-inline-start: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+    }
+
+    &[data-placement="top-end"] {
+      top: 0;
+      inset-inline-end: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+    }
+
+    &[data-placement="bottom"] {
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+
+    &[data-placement="bottom-start"] {
+      bottom: 0;
+      inset-inline-start: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+    }
+
+    &[data-placement="bottom-end"] {
+      bottom: 0;
+      inset-inline-end: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+    }
+
+    &[data-placement="start"] {
+      top: 50%;
+      inset-inline-start: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(-50%, -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(50%, -50%);
+      }
+    }
+
+    &[data-placement="end"] {
+      top: 50%;
+      inset-inline-end: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(50%, -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}