@react-fabric/core 1.0.0-beta.0

package/src/components/meter/Meter.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 AriaProps, type CssProp, type TestProps } from "../../types";
+import classes from "./Meter.module.css";
+
+export interface MeterProps extends CssProp, AriaProps, TestProps {
+  /**
+   * meter value (0-100)
+   */
+  value: number;
+  /**
+   * hide value label
+   */
+  hideLabel?: boolean;
+}
+
+export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
+  /** ***************** calculate active meter dots *******************/
+  const activeCount = useMemoDebugger(
+    () => {
+      return value / 16.67;
+    },
+    [value],
+    "Meter activeCount",
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes.meter,
+        className,
+        "flex flex-nowrap items-center gap-[2px]",
+      )}
+      {...aria}
+    >
+      {[0, 1, 2, 3, 4, 5].map((step) => (
+        <div
+          key={step}
+          className={classNames(
+            classes.meterBar,
+            "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0",
+          )}
+          data-active={activeCount >= step}
+          style={
+            {
+              "--width": `${Math.min((activeCount - step) * 100, 100)}%`,
+            } as AnyObject
+          }
+        />
+      ))}
+      {!hideLabel && (
+        <label className="text-muted">{Format.percent(value / 100)}</label>
+      )}
+    </div>
+  );
+};

package/src/components/navigator/Navigator.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 { HotKey } from "../../hotkeys/HotKey";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Icon } from "../icon/Icon";
+
+export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+  /**
+   * navigator button color
+   */
+  color?: ColorType | string;
+  /**
+   * navigation handler
+   */
+  onNavigate: (dir: -1 | 1) => void;
+}
+
+export const Navigator = ({
+  className,
+  onNavigate,
+  color,
+  ...aria
+}: NavigatorProps) => {
+  return (
+    <div
+      className={classNames(className, "inline-block leading-none")}
+      {...aria}
+    >
+      <HotKey keyCombo="left" handler={() => onNavigate(-1)} />
+      <HotKey keyCombo="right" handler={() => onNavigate(1)} />
+      <Icon
+        rtlFlip
+        color={color}
+        className="text-[1em] p-1"
+        aria-label="previous"
+        icon={CoreIcons.chevronLeft}
+        onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
+      />
+      <Icon
+        rtlFlip
+        className="text-[1em] p-1"
+        color={color}
+        aria-label="next"
+        icon={CoreIcons.chevronRight}
+        onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
+      />
+    </div>
+  );
+};

package/src/components/panel/Panel.module.css

@@ -0,0 +1,86 @@
+/*
+ * 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 {
+  .panel {
+    grid-template: "head" auto "content" 1fr / 1fr;
+    background-color: theme(colors.bg);
+
+    & > * {
+      background-color: transparent;
+    }
+
+    &:global(.fixed) {
+      box-shadow: 0 0 18px theme(boxShadowColor.base);
+    }
+
+    & .panelHeader {
+      background-color: theme(backgroundColor.dimmed);
+    }
+
+    & .panelAction {
+      padding: 0.25rem;
+    }
+
+    & .panelBody {
+      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    }
+  }
+}
+
+@layer util {
+  .panelGroup {
+    & > .panel {
+      &[data-collapsed="true"] {
+        flex: 0 0 auto;
+      }
+
+      &[data-collapsed="false"] {
+        flex: 1 1 auto;
+        min-height: 15rem;
+
+        [data-ref="panelCollapse"] {
+          pointer-events: none;
+          color: var(--tint);
+          opacity: 0.25;
+        }
+      }
+    }
+
+    & > .panel:not(:first-child) {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    & > .panel:not(:last-child) {
+      border-bottom: 1px solid theme(backgroundColor.base);
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  [data-ref="asideBody"] > .panelGroup > .panel {
+    border-radius: 0;
+    outline: 0;
+  }
+}

package/src/components/panel/Panel.tsx

@@ -0,0 +1,254 @@
+/*
+ * 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 { type ContentProps } from "../../core/content/Content";
+import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
+import { usePropToggle } from "../../hooks/usePropToggle";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CollapseProps,
+  type CssProp,
+  type ExpandProps,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Loading } from "../animations/Animations";
+import { Icon } from "../icon/Icon";
+import classes from "./Panel.module.css";
+
+export interface PanelProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    IconProps,
+    ExpandProps,
+    CollapseProps,
+    ChildrenProp<HeadFootProps | ContentProps> {
+  /**
+   * panel id used by panel stack
+   */
+  panelId?: string;
+  /**
+   * panel title
+   */
+  title?: string;
+  /**
+   * header actions
+   */
+  actions?: JSX.Element;
+  /**
+   * header css classname(s)
+   */
+  headerClassName?: string;
+  /**
+   * title css classname(s)
+   */
+  titleClassName?: string;
+  /**
+   * loading state
+   */
+  loading?: boolean;
+  /**
+   * height
+   */
+  height?: string | number;
+  /**
+   * width
+   */
+  width?: string | number;
+  /**
+   * minimum height
+   */
+  minHeight?: string | number;
+  /**
+   * minimum width
+   */
+  minWidth?: string | number;
+  /**
+   * maximum height
+   */
+  maxHeight?: string | number;
+  /**
+   * maximum width
+   */
+  maxWidth?: string | number;
+  /**
+   * close handler
+   */
+  onClose?: () => void;
+}
+
+export const Panel = ({
+  children,
+  className,
+  titleClassName,
+  headerClassName,
+  title,
+  actions,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  panelId,
+  height,
+  width,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  loading,
+  expandable,
+  expanded: _expanded,
+  onExpand,
+  collapsable,
+  collapsed: _collapsed,
+  onCollapse,
+  onClose,
+  // @ts-expect-error ignore
+  onBack,
+  ...aria
+}: PanelProps) => {
+  const [collapsed, toggleCollapse] = usePropToggle(
+    _collapsed,
+    onCollapse,
+    panelId,
+  );
+  const [expanded, toggleExpand] = usePropToggle(_expanded, onExpand, panelId);
+
+  const hasTools = useMemo(() => {
+    return !!expandable || !!collapsable || !!onClose;
+  }, [expandable, collapsable, onClose]);
+
+  return (
+    <div
+      className={classNames(
+        classes.panel,
+        className,
+        "rounded-capped overflow-hidden outline grid",
+        expanded ? "fixed inset-4 z-50" : "relative",
+      )}
+      data-ref="panel"
+      data-collapsed={collapsed}
+      style={
+        expanded
+          ? {}
+          : collapsed
+            ? { width, minWidth, maxWidth }
+            : {
+                height,
+                width,
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight,
+              }
+      }
+      {...aria}
+    >
+      <header
+        role="none"
+        className={classNames(
+          classes.panelHeader,
+          headerClassName,
+          "flex flex-nowrap items-center area-head",
+        )}
+        onClick={collapsable ? toggleCollapse : undefined}
+      >
+        {onBack && (
+          <Icon
+            data-ref="panelBack"
+            className={classNames(classes.panelAction, "cursor-pointer")}
+            icon={CoreIcons.chevronLeft}
+            onClick={onBack}
+          />
+        )}
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className="p-2 text-md select-none pointer-events-none"
+          />
+        )}
+        <div
+          className={classNames(
+            titleClassName,
+            "flex-1 select-none truncate",
+            title && "py-1 first:px-2",
+          )}
+        >
+          {title}
+        </div>
+        <div className="px-1">{actions}</div>
+        {hasTools && (
+          <div
+            role="none"
+            className="px-1 gap-px flex"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {expandable && (
+              <Icon
+                data-ref="panelExpand"
+                className={classNames(classes.panelAction, "cursor-pointer")}
+                icon={expanded ? CoreIcons.minimize : CoreIcons.maximize}
+                onClick={toggleExpand}
+              />
+            )}
+            {!expanded && collapsable && (
+              <Icon
+                data-ref="panelCollapse"
+                className={classNames(classes.panelAction, "cursor-pointer")}
+                icon={collapsed ? CoreIcons.expand : CoreIcons.collapse}
+                onClick={toggleCollapse}
+              />
+            )}
+            {!expanded && onClose && (
+              <Icon
+                data-ref="panelClose"
+                className={classNames(classes.panelAction, "cursor-pointer")}
+                icon={CoreIcons.close}
+                onClick={onClose}
+              />
+            )}
+          </div>
+        )}
+      </header>
+      {(!collapsed || expanded) && (
+        <div
+          className={classNames(
+            classes.panelBody,
+            "area-content grid overflow-hidden",
+          )}
+        >
+          {loading && <Loading />}
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/panel/PanelGroup.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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, cloneElement, useCallback, useState } from "react";
+import {
+  useEffectDebugger,
+  useMemoDebugger,
+} from "../../hooks/useEffectDebugger";
+import { type ChildrenProp } from "../../types";
+import classes from "./Panel.module.css";
+
+export interface PanelGroupProps extends ChildrenProp {
+  /**
+   * active panel id / index
+   */
+  activePanel?: string | number;
+  /**
+   * active change callback
+   */
+  onActiveChange?: (panelId: string) => void;
+}
+
+export const PanelGroup = ({
+  children,
+  activePanel,
+  onActiveChange,
+}: PanelGroupProps) => {
+  const [expandedPanel, setExpandedPanel] = useState<string>();
+
+  const panels = useMemoDebugger(
+    () =>
+      Children.toArray(children).map(
+        (child: AnyObject, index: number) => child.props.panelId || index,
+      ),
+    [children],
+    "PanelGroup children",
+  );
+
+  useEffectDebugger(
+    () => {
+      setExpandedPanel(activePanel ?? panels[0]);
+    },
+    [activePanel, panels],
+    "PanelGroup setActive",
+  );
+
+  const changeExpanded = useCallback(
+    (collapsed: boolean, id: string, handler?: AnyObject) => {
+      if (!collapsed) {
+        setExpandedPanel(id);
+        onActiveChange?.(id);
+      }
+      handler?.(collapsed);
+      return id !== expandedPanel;
+    },
+    [onActiveChange, expandedPanel],
+  );
+
+  return (
+    <div
+      data-ref="panelGroup"
+      className={classNames(
+        classes.panelGroup,
+        "flex flex-col overflow-auto area-content p-px",
+      )}
+    >
+      {Children.toArray(children).map((child: AnyObject, index: number) =>
+        cloneElement(child, {
+          panelId: child.props.panelId || index,
+          collapsable: true,
+          onCollapse: (b: boolean, id: string) =>
+            changeExpanded(b, id, child.props.onCollapse),
+          collapsed: expandedPanel !== (child.props.panelId || index),
+        }),
+      )}
+    </div>
+  );
+};