@react-fabric/core 1.0.0-beta.0

package/dist/types/utils/getColor.d.ts

@@ -0,0 +1,4 @@
+export declare const getColor: (color: string) => string | undefined;
+export declare const getBgClass: (bg: string) => string | undefined;
+export declare const getColorClass: (color: string) => string | undefined;
+export declare const getBorderClass: (color: string) => string | undefined;

package/dist/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./calculateDimensions";
+export * from "./getColor";
+export * from "./nodeCheck";

package/dist/types/utils/nodeCheck.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentType } from "react";
+export declare const nodeCheck: (node: AnyObject, ...types: Array<ComponentType<AnyObject>>) => boolean;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@react-fabric/core",
+  "version": "1.0.0-beta.0",
+  "description": "RUF: Core package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/core",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.24",
+    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.13",
+    "boring-avatars": "^1.10.2",
+    "classnames": "^2.5.1",
+    "color": "^4.2.3",
+    "resize-observer-polyfill": "^1.5.1",
+    "tailwindcss": "^3.4.4"
+  },
+  "peerDependencies": {
+    "i18next": "^23.15.1",
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0",
+    "react-i18next": "^15.0.2"
+  },
+  "engines": {
+    "node": ">=18.12.0",
+    "npm": ">=8.19.0"
+  },
+  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+}

package/src/components/actionLabel/ActionLabel.module.css

@@ -0,0 +1,38 @@
+/*
+ * 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 {
+  .actionLabel {
+    & > .actions {
+      --width: 4rem;
+
+      width: 0;
+    }
+
+    &:not([data-disabled="true"]):hover > .actions {
+      width: var(--width);
+      transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 100ms;
+      transition-delay: 500ms;
+    }
+  }
+}

package/src/components/actionLabel/ActionLabel.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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 { type ReactElement, useCallback } from "react";
+import { type AriaProps, type ChildProp, type CssProp } from "../../types";
+import { ButtonGroup } from "../button/ButtonGroup";
+import classes from "./ActionLabel.module.css";
+
+export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+  /**
+   * action buttons aligment
+   */
+  align?: "start" | "end";
+  /**
+   * disable actions
+   */
+  disabled?: boolean;
+  /**
+   * buttons
+   */
+  actions: ReactElement[];
+}
+
+/**
+ * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
+ * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ */
+export const ActionLabel = ({
+  children,
+  className,
+  align,
+  actions,
+  disabled,
+  ...rest
+}: ActionLabelProps) => {
+  /**
+   * calculate the width of the action box, width will be used for a delayed transition on hover
+   */
+  const calculateBasis = useCallback((el: HTMLElement | null) => {
+    if (el) {
+      const clone = el.cloneNode(true) as HTMLElement;
+      clone.className = "";
+      clone.style.left = "-200%";
+      clone.style.overflow = "hidden";
+      clone.style.position = "absolute";
+      clone.style.whiteSpace = "nowrap";
+      document.body.appendChild(clone);
+      el.style.setProperty("--width", `${clone.offsetWidth}px`);
+      clone.remove();
+    }
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        className,
+        classes.actionLabel,
+        "flex overflow-hidden gap-1 items-center cursor-default select-none",
+      )}
+      data-disabled={disabled}
+      {...rest}
+    >
+      <ButtonGroup
+        ref={calculateBasis}
+        className={classNames(
+          classes.actions,
+          "overflow-hidden flex-content",
+          align === "end" && "order-2",
+        )}
+      >
+        {actions}
+      </ButtonGroup>
+      <div className="flex-initial truncate">{children}</div>
+    </div>
+  );
+};

package/src/components/animations/Animations.module.css

@@ -0,0 +1,253 @@
+/*
+ * 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 l2 {
+    0%,
+    25% {
+      background-position:
+        0 50%,
+        0 calc(50% - 2px),
+        0 calc(50% + 2px),
+        50% 50%,
+        50% calc(50% - 2px),
+        50% calc(50% + 2px),
+        100% 50%,
+        100% calc(50% - 2px),
+        100% calc(50% + 2px);
+      background-size:
+        8px 0,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px;
+    }
+
+    50% {
+      background-position:
+        0 50%,
+        0 calc(0% - 2px),
+        0 calc(100% + 2px),
+        50% 50%,
+        50% calc(50% - 2px),
+        50% calc(50% + 2px),
+        100% 50%,
+        100% calc(50% - 2px),
+        100% calc(50% + 2px);
+      background-size:
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px;
+    }
+
+    75% {
+      background-position:
+        0 50%,
+        0 calc(0% - 2px),
+        0 calc(100% + 2px),
+        50% 50%,
+        50% calc(0% - 2px),
+        50% calc(100% + 2px),
+        100% 50%,
+        100% calc(50% - 2px),
+        100% calc(50% + 2px);
+      background-size:
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px;
+    }
+
+    95%,
+    100% {
+      background-position:
+        0 50%,
+        0 calc(0% - 2px),
+        0 calc(100% + 2px),
+        50% 50%,
+        50% calc(0% - 2px),
+        50% calc(100% + 2px),
+        100% 50%,
+        100% calc(0% - 2px),
+        100% calc(100% + 2px);
+      background-size:
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 100%,
+        8px 4px,
+        8px 4px;
+    }
+  }
+
+  .bars {
+    --c: linear-gradient(currentcolor 0 0);
+    --r1: radial-gradient(farthest-side at bottom, currentcolor 93%, #0000);
+    --r2: radial-gradient(farthest-side at top, currentcolor 93%, #0000);
+
+    aspect-ratio: 1;
+    background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
+      var(--c), var(--r1), var(--r2);
+    background-repeat: no-repeat;
+    animation: l2 1s infinite alternate;
+  }
+
+  @keyframes l4 {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  .spinner {
+    --b: 8px;
+
+    aspect-ratio: 1;
+
+    background: conic-gradient(#0000 10%, currentcolor) content-box;
+    border-radius: 50%;
+
+    mask: repeating-conic-gradient(
+        #0000 0deg,
+        #000 1deg 20deg,
+        #0000 21deg 36deg
+      ),
+      radial-gradient(
+        farthest-side,
+        #0000 calc(100% - var(--b) - 1px),
+        #000 calc(100% - var(--b))
+      );
+
+    animation: l4 2s infinite steps(10);
+
+    mask-composite: destination-in;
+    mask-composite: intersect;
+  }
+
+  @keyframes loader {
+    from {
+      transform: translateX(calc(-100% * var(--multiplier)));
+    }
+
+    to {
+      transform: translateX(calc(100% * var(--multiplier)));
+    }
+  }
+
+  .loader {
+    --multiplier: 1;
+
+    & > div {
+      height: calc(0.125rem + 2px);
+
+      &::after {
+        animation: loader 1s cubic-bezier(0.65, 0, 0.45, 1) infinite;
+      }
+    }
+
+    :global([dir="rtl"]) & {
+      --multiplier: -1;
+    }
+  }
+
+  @keyframes check-stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes check-scale {
+    0%,
+    100% {
+      transform: none;
+    }
+
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+
+  @keyframes check-fill {
+    100% {
+      box-shadow: inset 0 0 0 1em currentcolor;
+    }
+  }
+
+  .checkAnimation {
+    width: 1.5em;
+    height: 1.5em;
+
+    color: theme(colors.primary.DEFAULT);
+
+    box-shadow: inset 0 0 0 currentcolor;
+
+    fill: transparent;
+    stroke-miterlimit: 10;
+    stroke-width: 4px;
+
+    animation:
+      check-fill 0.4s ease-in-out 0.4s forwards,
+      check-scale 0.3s ease-in-out 0.9s both;
+    animation-delay: 0.75s;
+
+    & .circlePart {
+      fill: transparent;
+      stroke: currentcolor;
+      stroke-dasharray: 166;
+      stroke-dashoffset: 166;
+      stroke-miterlimit: 10;
+      stroke-width: 8px;
+
+      animation: check-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+      animation-delay: 0.25s;
+    }
+
+    & .iconPart {
+      transform-origin: 50% 50%;
+
+      stroke: currentcolor;
+      stroke-dasharray: 48;
+      stroke-dashoffset: 48;
+
+      animation: check-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+      animation-delay: 0.75s;
+    }
+  }
+}

package/src/components/animations/Animations.tsx

@@ -0,0 +1,190 @@
+/*
+ * 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 { useMemo } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+} from "../../types";
+import { getColor, getColorClass } from "../../utils";
+import classes from "./Animations.module.css";
+
+export interface AnimationProps extends CssProp, AriaProps {
+  type?: "info" | "check" | "cross" | "question" | "exclaim";
+  /**
+   * icon color
+   */
+  color?: ColorType | PaletteType;
+  /**
+   * icon mark color
+   */
+  strokeColor?: ColorType | PaletteType;
+}
+
+export const AnimationIndicator = ({
+  className,
+  color,
+  strokeColor,
+  type,
+  ...aria
+}: AnimationProps) => {
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (strokeColor) {
+        s.stroke = getColor(strokeColor);
+      }
+      return s;
+    },
+    [color, strokeColor],
+    "Animation styles",
+  );
+  const path = useMemo(() => {
+    if (type === "check") return "M14.1 27.2l7.1 7.2 16.7-16.8";
+    if (type === "cross") return "M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8";
+    if (type === "question")
+      return "M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z";
+    if (type === "exclaim")
+      return "M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z";
+    return "M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z";
+  }, [type]);
+  /** ***************** component *******************/
+  return (
+    <svg
+      data-ref="animated-indicator"
+      className={classNames(
+        classes.checkAnimation,
+        className,
+        "inline-block rounded-full",
+        color && getColorClass(color),
+      )}
+      style={styles}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+      aria-hidden="true"
+      {...aria}
+    >
+      <circle className={classes.circlePart} cx="26" cy="26" r="25" />
+      <path
+        className={classNames(
+          classes.iconPart,
+          getColorClass(strokeColor ?? "invert"),
+        )}
+        d={path}
+      />
+    </svg>
+  );
+};
+
+export const AnimationBars = ({
+  color = "tint-700",
+  size = "2rem",
+}: {
+  color?: ColorType | string;
+  size?: number | string;
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
+      )}
+    >
+      <div
+        className={classNames(
+          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+        )}
+      >
+        <div
+          className={classNames(classes.bars, getColorClass(color + "-500/50"))}
+          style={{ width: size }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const AnimationSpinner = ({
+  color = "tint-700",
+  size = "2rem",
+}: {
+  color?: ColorType | string;
+  size?: number | string;
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
+      )}
+    >
+      <div
+        className={classNames(
+          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+        )}
+      >
+        <div
+          className={classNames(classes.spinner, getColorClass(color))}
+          style={{ width: size }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Loading = () => {
+  return (
+    <div
+      className={classNames(
+        classes.loader,
+        "area-[loader] relative overflow-x-clip",
+      )}
+    >
+      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
+    </div>
+  );
+};
+
+export const Skeleton = () => {
+  return (
+    <div className={classNames("p-2 animate-pulse flex gap-2 max-w-lg")}>
+      <div className="bg-tint-100 rounded aspect-square h-12" />
+      <div className="flex-1 flex flex-col gap-2">
+        <div className="bg-tint-100 h-3 rounded-full" />
+        <div className="flex gap-2">
+          <div className="bg-tint-100 h-2 rounded-full basis-[30%]" />
+          <div className="bg-tint-100 h-2 rounded-full basis-[60%]" />
+        </div>
+        <div className="flex gap-2">
+          <div className="bg-tint-100 h-2 rounded-full basis-[30%]" />
+          <div className="bg-tint-100 h-2 rounded-full basis-[60%]" />
+        </div>
+      </div>
+    </div>
+  );
+};