@react-fabric/core 1.0.0-beta.0

package/src/components/panel/PanelStack.tsx

@@ -0,0 +1,133 @@
+/*
+ * 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 {
+  Children,
+  cloneElement,
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useTransition,
+} from "react";
+import { type ChildrenProp, type CssProp } from "../../types";
+
+export interface PanelStackProps extends CssProp, ChildrenProp {
+  /**
+   * active panel id
+   */
+  active?: string;
+  /**
+   * panel change event callback
+   */
+  onPanelChange?: (panelId: string) => void;
+  /**
+   * navigate to previous panel in history
+   */
+  onBack?: (panelId: string, nextPanelId: string) => boolean | undefined;
+}
+
+export const PanelStack = ({
+  active,
+  children,
+  className,
+  onPanelChange,
+  onBack,
+  ...rest
+}: PanelStackProps) => {
+  const stackRef = useRef<HTMLDivElement>(null);
+  const [history, setHistory] = useState<string[]>([]);
+  const [, startTransition] = useTransition();
+
+  const panels = useMemo(
+    () =>
+      new Map(
+        Children.toArray(children).map(
+          (child: AnyObject) =>
+            child.props && [child.props.panelId ?? "root", child],
+        ),
+      ),
+    [children],
+  );
+
+  useEffect(() => {
+    startTransition(() => {
+      onPanelChange?.(history[0] ?? "root");
+      stackRef.current?.dispatchEvent(
+        new Event("updatePopper", { bubbles: true }),
+      );
+    });
+  }, [onPanelChange, history]);
+
+  const goBack = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+    if (onBack?.(history[0], history[1] ?? "root") !== false) {
+      setHistory(history.slice(1));
+    }
+  }, [history, onBack]);
+
+  const currentPanel = useMemo<AnyObject>(
+    () => panels.get(history[0]) ?? panels.values().next().value,
+    [history, panels],
+  );
+
+  const checkMenuClick = useCallback(
+    (e: MouseEvent) => {
+      const panelKey = (e.target as HTMLElement)?.dataset?.panel;
+      if (panelKey) {
+        if (panelKey === "back") {
+          goBack();
+        } else if (panelKey === "root") {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+          if (onBack?.(history[0], "root") !== false) {
+            setHistory([]);
+          }
+        } else if (panels.has(panelKey)) {
+          setHistory([panelKey, ...history]);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      return true;
+    },
+    [goBack, history, panels, onBack],
+  );
+
+  return (
+    <div
+      {...rest}
+      role="none"
+      ref={stackRef}
+      className={className}
+      onClickCapture={checkMenuClick}
+    >
+      {currentPanel &&
+        cloneElement(currentPanel, {
+          onBack: history.length > 0 ? goBack : undefined,
+        })}
+    </div>
+  );
+};

package/src/components/progress/Progress.module.css

@@ -0,0 +1,70 @@
+/*
+ * 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 {
+  .progressbar {
+    height: 1em;
+    box-shadow: 0 0 4px 0 theme(boxShadowColor.dimmed) inset;
+
+    & > div:last-child {
+      width: calc(var(--progress) * 1%);
+
+      &::after {
+        content: attr(data-label);
+
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+
+        width: calc((100 / var(--progress)) * 100%);
+        padding: 0.75em;
+
+        font-size: 0.5em;
+        line-height: 0.5em;
+        color: var(--white);
+        text-align: center;
+        vertical-align: middle;
+      }
+    }
+
+    .progressTrack {
+      width: calc(var(--progress) * 1%);
+      transition: width 0.5s;
+    }
+
+    & > div:first-child {
+      padding: 0.75em;
+      font-size: 0.5em;
+      line-height: 0.5em;
+    }
+  }
+
+  .progressAnimate {
+    background-image: var(--progress-gradient);
+    background-size: 1rem 1rem;
+
+    & :global {
+      animation: progress 750ms linear infinite;
+    }
+  }
+}

package/src/components/progress/ProgressBar.tsx

@@ -0,0 +1,122 @@
+/*
+ * 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 { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { type ColorType } from "../../types";
+import { getColorClass } from "../../utils";
+import classes from "./Progress.module.css";
+
+export interface ProgressProps {
+  /**
+   * progress value (0-100)
+   */
+  value: number;
+  /**
+   * size
+   */
+  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   * color
+   */
+  color?: ColorType;
+  /**
+   * animate
+   */
+  animate?: boolean;
+  /**
+   * progress label
+   */
+  label?: string;
+}
+
+const SizeMap: KeyValue = {
+  "": "0.875rem",
+  xxs: "3px",
+  xs: "0.375rem",
+  sm: "0.625rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+export const ProgressBar = ({
+  value = 0,
+  size,
+  color = "primary",
+  label = "",
+  animate,
+}: ProgressProps) => {
+  /** ***************** make sure value is between 0 and 100 *******************/
+  const actualValue = useMemoDebugger(
+    () => Math.min(Math.max(value, 0), 100),
+    [value],
+    "ProgressBar value",
+  );
+
+  const progressVar = useMemoDebugger<KeyValue>(
+    () => ({
+      "--progress": actualValue,
+    }),
+    [actualValue],
+    "ProgressBar cssVar",
+  );
+
+  /** ***************** component *******************/
+  return (
+    <div
+      className={classNames(
+        classes.progressbar,
+        getColorClass(color),
+        "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap",
+      )}
+      style={{
+        ...progressVar,
+        minHeight: SizeMap[size ?? ""],
+        fontSize: SizeMap[size ?? ""],
+      }}
+      data-animate={animate}
+      aria-hidden="true"
+    >
+      {!["xxs", "xs", "sm"].includes(size ?? "") && (
+        <div className="absolute inset-0 text-center z-0 align-top">
+          {label} {Format.percent(actualValue / 100)}
+        </div>
+      )}
+      <div
+        className={classNames(
+          classes.progressTrack,
+          animate && classes.progressAnimate,
+          "h-full overflow-clip bg-current relative z-0",
+        )}
+      />
+      {!["xxs", "xs", "sm"].includes(size ?? "") && (
+        <div
+          className={classNames("h-full absolute inset-0 overflow-hidden z-1")}
+          data-label={`${label} ${Format.percent(actualValue / 100)}`}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/progress/ProgressCircle.tsx

@@ -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.
+ */
+
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { type ColorType } from "../../types";
+import { getColorClass } from "../../utils";
+
+export interface ProgressProps {
+  /**
+   * progress value (0-100)
+   */
+  value: number;
+  /**
+   * size
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+  /**
+   * color
+   */
+  color?: ColorType;
+}
+
+const SizeMap: KeyValue = {
+  "": "1rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+export const ProgressCircle = ({
+  value = 0,
+  size = "sm",
+  color = "primary",
+}: ProgressProps) => {
+  /** ***************** make sure value is between 0 and 100 *******************/
+  const actualValue = useMemoDebugger(
+    () => Math.min(Math.max(value, 0), 100),
+    [value],
+    "ProgressCirle value",
+  );
+
+  /** ***************** calculate stroke offset by actual value *******************/
+  const strokeDashoffset = useMemoDebugger(
+    () => {
+      const circumfrence = Math.PI * 2 * 44;
+      return circumfrence * (1 - actualValue / 100);
+    },
+    [actualValue],
+    "ProgressCirle dashOffset",
+  );
+
+  /** ***************** component *******************/
+  return (
+    <div
+      className={classNames(
+        "inline-block w-[4em] h-[4em] text-lg relative",
+        getColorClass(color),
+      )}
+      aria-hidden="true"
+      style={{ fontSize: SizeMap[size] }}
+    >
+      <svg
+        viewBox="0 0 100 100"
+        className={classNames("absolute inset-0 w-full h-full stroke-dimmed")}
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="44"
+          strokeWidth="12"
+          strokeOpacity="0.25"
+          fillOpacity="0"
+        />
+        <circle
+          cx="50"
+          cy="50"
+          r="44"
+          stroke="currentColor"
+          strokeWidth="12"
+          fillOpacity="0"
+          style={{
+            transform: "rotate(-90deg)",
+            transformOrigin: "center",
+            strokeDasharray: Math.PI * 2 * 44,
+            strokeDashoffset,
+            transition: "stroke-dashoffset 0.5s",
+          }}
+        />
+      </svg>
+      <span className="flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]">
+        {Format.percent(actualValue / 100)}
+      </span>
+    </div>
+  );
+};

package/src/components/tabpanel/Tab.tsx

@@ -0,0 +1,175 @@
+/*
+ * 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, useMemo } from "react";
+import {
+  type AriaProps,
+  type BadgeType,
+  type CallbackReturn,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type PolymorphicProps,
+  type RefProp,
+  type TestProps,
+} from "../../types";
+import { Badge, getBadgeProps } from "../badge/Badge";
+import { DropdownTool } from "../dropdown/DropdownTool";
+import { Icon } from "../icon/Icon";
+import classes from "./TabPanel.module.css";
+
+export interface TabProps
+  extends Partial<ChildrenProp>,
+    CssProp,
+    RefProp,
+    AriaProps,
+    TestProps,
+    IconProps {
+  /**
+   * tab id
+   */
+  id: string;
+  /**
+   * tab label
+   */
+  label?: string;
+  /**
+   * tab color
+   */
+  color?: ColorType;
+  /**
+   * tab badge
+   */
+  badge?: BadgeType;
+  /**
+   * disabled
+   */
+  disabled?: boolean;
+  /**
+   * tab flex to fill button
+   */
+  tabFlex?: boolean;
+  /**
+   * className for active state
+   */
+  activeClassName?: string;
+  /**
+   * action dropdown body
+   */
+  actions?: ReactElement;
+  /**
+   * close handler
+   */
+  onClose?: () => CallbackReturn;
+}
+
+export const Tab = <Tag extends React.ElementType = "button">({
+  ref,
+  as,
+  id,
+  className,
+  label,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  badge,
+  disabled,
+  onClose,
+  // @ts-expect-error ignore
+  active,
+  // @ts-expect-error ignore
+  minimal,
+  onClick,
+  tabFlex,
+  color,
+  actions,
+  activeClassName,
+  ...aria
+}: TabProps & PolymorphicProps<Tag>) => {
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(badge);
+  }, [badge]);
+
+  const E = as ?? "button";
+  return (
+    <E
+      data-id={id}
+      disabled={disabled}
+      data-color={color}
+      className={classNames(
+        classes.tabButton,
+        className,
+        active && "active pointer-events-none",
+        active && activeClassName,
+        disabled && "text-tint-500 pointer-events-none",
+        tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24",
+        "flex items-center justify-center px-1 rounded overflow-hidden",
+      )}
+      onClick={() => !active && onClick?.(id)}
+      ref={ref as AnyObject}
+      {...aria}
+    >
+      {icon && (
+        <Icon
+          icon={icon}
+          bg={iconBg}
+          color={iconColor}
+          rtlFlip={rtlFlip}
+          className="flex-content"
+        />
+      )}
+      {!minimal && (
+        <label className="flex-initial truncate text-center px-1 py-1">
+          {label}
+        </label>
+      )}
+      {badge && (
+        <Badge
+          {...badgeProps}
+          placement={minimal ? "end" : ""}
+          className={classNames("me-1", badgeProps.className)}
+        />
+      )}
+      {actions && active && (
+        <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
+      )}
+      {onClose && (
+        <span
+          role="none"
+          className={classNames(
+            "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
+          )}
+          onClick={(e) => {
+            onClose?.();
+            e.stopPropagation();
+          }}
+        >
+          &times;
+        </span>
+      )}
+    </E>
+  );
+};