@react-fabric/core 1.0.0-beta.0

package/src/components/media/Media.tsx

@@ -0,0 +1,224 @@
+/*
+ * 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 { getImageColorset } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo, useRef, useState } from "react";
+import { type AriaProps, type CssProp } from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Button } from "../button/Button";
+import classes from "./Media.module.css";
+
+export interface BaseProps extends CssProp, AriaProps {
+  /**
+   * media source
+   */
+  src: string;
+  /**
+   * show media reel decoration
+   */
+  reel?: boolean;
+  /**
+   * media content fit
+   */
+  fit?: "cover" | "contain" | "fill";
+}
+
+export interface ImageProps extends BaseProps {
+  /**
+   * image alt text
+   */
+  alt?: string;
+}
+export interface VideoProps extends BaseProps {
+  /**
+   * video poster
+   */
+  poster?: string;
+  /**
+   * auto play video
+   */
+  autoPlay?: boolean;
+  /**
+   * play on mouse over
+   */
+  playOnHover?: boolean;
+}
+
+export const Image = ({
+  src,
+  alt,
+  reel,
+  fit = "cover",
+  className,
+  ...aria
+}: ImageProps) => {
+  const [colorSet, setColorSet] = useState("light");
+  const loadIndicator = useMemo(
+    () => (
+      <div
+        className={classNames(
+          classes.mediaPlaceholder,
+          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
+        )}
+      >
+        ●●●
+      </div>
+    ),
+    [src],
+  );
+  return (
+    <div
+      data-ref="image"
+      className={classNames(
+        classes.mediaContainer,
+        "relative overflow-hidden bg-gray inline-block",
+        reel && classes.mediaReel,
+        className,
+      )}
+      data-colorset={colorSet}
+      {...aria}
+    >
+      {loadIndicator}
+      <img
+        alt={alt ?? src}
+        src={src}
+        loading="lazy"
+        crossOrigin="anonymous"
+        className={classNames(
+          classes.media,
+          "pointer-events-none w-full h-full",
+          fit && `object-${fit}`,
+        )}
+        onLoad={(e) => {
+          e.currentTarget.previousElementSibling?.remove();
+          setColorSet(getImageColorset(e.currentTarget));
+        }}
+      />
+    </div>
+  );
+};
+
+export const Video = ({
+  src,
+  poster,
+  reel,
+  autoPlay,
+  playOnHover,
+  fit = "cover",
+  className,
+  ...aria
+}: VideoProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const [state, setState] = useState(true);
+  const [volume, setVolume] = useState(false);
+
+  return (
+    <div
+      data-ref="video"
+      className={classNames(
+        classes.mediaContainer,
+        "relative overflow-hidden bg-gray inline-block",
+        reel && classes.mediaReel,
+        className,
+      )}
+      onMouseEnter={() => {
+        playOnHover && videoRef.current?.play();
+      }}
+      onMouseLeave={() => {
+        playOnHover && videoRef.current?.pause();
+      }}
+      {...aria}
+    >
+      <div
+        className={classNames(
+          classes.mediaPlaceholder,
+          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse",
+        )}
+      >
+        ●●●
+      </div>
+      <video
+        loop
+        ref={videoRef}
+        controls={false}
+        poster={poster}
+        autoPlay={autoPlay}
+        className={classNames(
+          classes.media,
+          "pointer-events-none w-full h-full",
+          fit && `object-${fit}`,
+        )}
+        onPlay={() => setState(true)}
+        onPause={() => setState(false)}
+        onVolumeChange={(e) => setVolume(!!e.currentTarget.volume)}
+        onLoadedData={(e) => {
+          e.currentTarget.volume = 0;
+          e.currentTarget.previousElementSibling?.remove();
+        }}
+      >
+        <source src={src} />
+        <track kind="captions" />
+      </video>
+      <div
+        data-inner-clickable
+        className={classNames(
+          classes.mediaControls,
+          "absolute bottom-6 end-6 rounded-full flex flex-col",
+        )}
+      >
+        <Button
+          rounded
+          variant="link"
+          className={classes.mediaControlPlaceholder}
+          icon={CoreIcons.ellipsis}
+          aria-label="controls"
+        />
+        <Button
+          rounded
+          variant="link"
+          aria-label="controls"
+          className={classes.mediaControlAction}
+          onClick={() => {
+            videoRef.current &&
+              (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+          }}
+          icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
+        />
+        <Button
+          rounded
+          variant="link"
+          aria-label="controls"
+          className={classes.mediaControlAction}
+          onClick={() => {
+            videoRef.current?.paused
+              ? videoRef.current?.play()
+              : videoRef.current?.pause();
+          }}
+          icon={state ? CoreIcons.pause : CoreIcons.play}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/menu/ContextMenu.tsx

@@ -0,0 +1,116 @@
+/*
+ * 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 {
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { cloneElement, useRef, useState } from "react";
+import { type ChildrenProp } from "../../types";
+import { type Menu } from "./Menu";
+
+export interface ContextMenuProps extends ChildrenProp {
+  menu: React.ReactElement<typeof Menu>;
+}
+
+export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(8), flip()],
+  });
+
+  const click = useClick(context, {});
+  const dismiss = useDismiss(context, {});
+
+  const { getFloatingProps } = useInteractions([dismiss, click]);
+
+  const handleClick = useRef((e: MouseEvent) => {
+    const virtual = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY,
+        };
+      },
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  });
+
+  const wrapperRef = useRef((el: HTMLElement) => {
+    el?.parentElement?.removeEventListener("contextmenu", handleClick.current);
+    el?.parentElement?.addEventListener("contextmenu", handleClick.current);
+  });
+
+  const tryClosing = useRef((e: React.MouseEvent) => {
+    if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
+      setTimeout(() => setIsOpen(false), 50);
+  });
+
+  return (
+    <div
+      className="contents"
+      ref={wrapperRef.current as AnyObject}
+      onMouseUpCapture={tryClosing.current}
+    >
+      {children}
+      {isOpen && (
+        <FloatingPortal>
+          {cloneElement(menu as AnyObject, {
+            ...getFloatingProps(),
+            style: {
+              ...floatingStyles,
+              borderRadius: "var(--rounding)",
+              zIndex: "var(--z-popover)",
+              fontSize: "0.875rem",
+            },
+            className: "bg-base outline rounded-capped shadow-lg",
+            ref: refs.setFloating,
+            onMouseUp: tryClosing.current,
+          })}
+        </FloatingPortal>
+      )}
+    </div>
+  );
+};

package/src/components/menu/Menu.module.css

@@ -0,0 +1,109 @@
+/*
+ * 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 {
+  .menuItem {
+    --color: theme(colors.primary.DEFAULT);
+
+    &[data-color="accent"] {
+      --color: theme(colors.accent.DEFAULT);
+    }
+
+    &[data-color="info"] {
+      --color: theme(colors.info.DEFAULT);
+    }
+
+    &[data-color="danger"] {
+      --color: theme(colors.danger.DEFAULT);
+    }
+
+    &[data-color="success"] {
+      --color: theme(colors.success.DEFAULT);
+    }
+
+    &[data-color="warning"] {
+      --color: theme(colors.warning.DEFAULT);
+    }
+  }
+}
+
+@layer var {
+  .menuItem {
+    color: color-mix(in lab, var(--color) 80%, var(--fabric-text));
+
+    > * {
+      pointer-events: none;
+    }
+
+    &[data-focus="true"] {
+      background-color: color(from var(--color) srgb r g b / 15%);
+    }
+
+    &:active {
+      background-color: color(from var(--color) srgb r g b / 35%);
+    }
+
+    &[data-open="true"] {
+      background-color: color(from var(--color) srgb r g b / 10%);
+    }
+
+    &.active,
+    &:global(.active) {
+      pointer-events: none;
+      background-color: color(from var(--color) srgb r g b / 20%);
+
+      & > div {
+        box-shadow: 4px 0 0 var(--color) inset;
+
+        :global([dir="rtl"]) & {
+          box-shadow: -4px 0 0 var(--color) inset;
+        }
+      }
+    }
+
+    &.disabled {
+      pointer-events: none;
+      color: theme(textColor.tint.500);
+      opacity: 0.5;
+
+      & > label ~ * {
+        display: none;
+      }
+    }
+  }
+
+  .menuIcon {
+    padding: 0.3em;
+    font-size: 1.25em;
+
+    &.minimal {
+      padding: 0.375em;
+      font-size: 1.5em;
+      font-weight: 500;
+    }
+  }
+
+  :global(.menu-list.hide-icons) .menuIcon {
+    width: 0.125em;
+  }
+}