@react-fabric/core 1.0.0-beta.0

package/src/components/badge/Badge.tsx

@@ -0,0 +1,148 @@
+/*
+ * 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 { isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { cloneElement, useMemo } from "react";
+import {
+  type BadgeType,
+  type ChildProp,
+  type CssProp,
+  type IconProps,
+  type RefProp,
+} from "../../types";
+import { Icon } from "../icon/Icon";
+import classes from "./Badge.module.css";
+
+export interface BadgeProps
+  extends CssProp,
+    RefProp,
+    IconProps,
+    Partial<ChildProp> {
+  /**
+   * make wrapper a block element
+   */
+  block?: boolean;
+  /**
+   * badge value
+   */
+  value?: number | string;
+  /**
+   * max value for number display
+   */
+  max?: number;
+  /**
+   * ping animation
+   */
+  ping?: boolean;
+  /**
+   * badge placement
+   */
+  placement?:
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "top"
+    | "bottom"
+    | "start"
+    | "end";
+}
+
+export const getBadgeProps = (
+  badge?: string | number | BadgeType,
+): AnyObject => {
+  if (isObject(badge)) {
+    return Object.assign({ forButton: true, placement: "" }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: "",
+    };
+  }
+};
+
+export const Badge = ({
+  ref,
+  className,
+  value,
+  max,
+  ping,
+  block,
+  placement = "top-end",
+  children,
+  // @ts-expect-error ignore
+  forButton = false,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  ...rest
+}: BadgeProps) => {
+  const label = useMemo(() => {
+    if (isNumber(value) && max && value > max) {
+      return `${max}+`;
+    }
+    return `${value}`;
+  }, [value, max]);
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, (children as AnyObject)?.props.ref),
+    [ref, (children as AnyObject)?.props.ref],
+  );
+
+  /**
+   * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
+   */
+  return (
+    <div
+      className={classNames(
+        forButton ? "contents" : "relative",
+        block ? "block" : "inline-block",
+      )}
+    >
+      {children &&
+        cloneElement(children as AnyObject, {
+          ...rest,
+          ref: innerRef,
+        })}
+      <div
+        data-ref="badge"
+        data-ping={ping}
+        data-placement={placement}
+        className={classNames(
+          classes.badge,
+          className,
+          "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none",
+          forButton && !placement ? "relative" : "absolute",
+        )}
+      >
+        {label && <span className="p-1">{label}</span>}
+        {icon && (
+          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,189 @@
+/*
+ * 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 {
+  .breadcrumbs,
+  .breadcrumbOverflow {
+    --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);
+    }
+
+    & :global(.link) {
+      padding: 0.25em 0.5em;
+      text-decoration: none;
+    }
+  }
+
+  .breadcrumbOverflow,
+  .breadcrumbs[data-variant="classic"] {
+    & :global(.link) {
+      color: color-mix(in lab, var(--color) 90%, var(--fabric-text));
+    }
+
+    & :global(.link):hover {
+      color: color-mix(in lab, var(--color) 99%, var(--fabric-text));
+      text-decoration: underline;
+      background-color: theme(colors.tint.50/50%);
+    }
+
+    & :global(.link):active {
+      color: color-mix(in lab, var(--color) 85%, var(--fabric-text));
+      background-color: theme(colors.tint.50);
+    }
+  }
+
+  .breadcrumbs[data-variant="classic"] {
+    & > .breadcrumbLink {
+      list-style: none;
+
+      &::after {
+        content: attr(data-separator);
+        display: inline-block;
+        margin-inline: 0.125em;
+        color: theme(colors.tint.300);
+      }
+
+      &:last-child::after {
+        content: unset;
+      }
+    }
+  }
+
+  [data-ref="viewport"] .breadcrumbs {
+    grid-area: crumbbar;
+    padding: 0 0.25rem;
+  }
+}
+
+@layer var {
+  .breadcrumbs[data-variant="classic"] {
+    & > :global(.link) {
+      overflow: hidden;
+      max-width: 24rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    & > .breadcrumbLink:last-child > :global(.link) {
+      pointer-events: none;
+      color: theme(colors.tint.600);
+    }
+  }
+
+  .breadcrumbs[data-variant="modern"] {
+    & > .breadcrumbLink {
+      --linkcolor: color-mix(in lab, var(--color) 50%, var(--fabric-bg));
+
+      position: relative;
+      list-style: none;
+      border-radius: var(--rounding);
+
+      &:last-child {
+        --color: theme(colors.tint.500);
+
+        pointer-events: none;
+      }
+
+      &:first-child > :global(.link) {
+        border-start-start-radius: var(--rounding);
+        border-end-start-radius: var(--rounding);
+      }
+
+      &:last-child > :global(.link) {
+        border-start-end-radius: var(--rounding);
+        border-end-end-radius: var(--rounding);
+      }
+
+      &:not(:first-child) {
+        margin-inline-start: -1em;
+
+        &::before {
+          content: "";
+
+          display: inline-block;
+
+          vertical-align: middle;
+
+          border: 0.625em solid transparent;
+          border-block-color: var(--linkcolor);
+          border-inline-end-color: var(--linkcolor);
+        }
+
+        & > :global(.link) {
+          margin-inline-start: -0.625em;
+        }
+      }
+
+      &:not(:last-child) {
+        &::after {
+          content: "";
+
+          display: inline-block;
+
+          vertical-align: middle;
+
+          border: 0.625em solid transparent;
+          border-inline-start-color: var(--linkcolor);
+        }
+      }
+
+      & > :global(.link) {
+        display: inline-block;
+
+        padding: 0.125em 0.5em;
+
+        line-height: 1;
+        color: color-mix(in lab, var(--color) 50%, var(--fabric-text));
+        vertical-align: middle;
+
+        background-color: var(--linkcolor);
+      }
+
+      &:hover {
+        --linkcolor: color-mix(in lab, var(--color) 65%, var(--fabric-bg));
+      }
+
+      &:active {
+        --linkcolor: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
+      }
+    }
+  }
+}

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -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.
+ */
+
+import classNames from "classnames";
+import { Children, useMemo } from "react";
+import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
+import { Link } from "../../typography/Link";
+import { Dropdown } from "../dropdown/Dropdown";
+import classes from "./Breadcrumbs.module.css";
+
+export interface BreadcrumbProps
+  extends CssProp,
+    AriaProps,
+    ChildrenProp<typeof Link> {
+  /**
+   * breadcrumb styling
+   */
+  variant?: "classic" | "modern";
+  /**
+   * classic breadcrumb spearator
+   */
+  separator?: string;
+  /**
+   * breadcrumb color
+   */
+  color?: "primary" | "accent";
+}
+
+export const Breadcrumbs = ({
+  variant = "classic",
+  className,
+  separator = "/",
+  children,
+  color,
+  ...aria
+}: BreadcrumbProps) => {
+  const [start, overflow, end] = useMemo(() => {
+    const nodeList = Children.toArray(children as AnyObject);
+    if (nodeList.length > 7) {
+      return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
+    }
+    return [nodeList];
+  }, [children]);
+
+  return (
+    <nav
+      data-color={color}
+      data-variant={variant}
+      className={classNames(
+        classes.breadcrumbs,
+        className,
+        "flex flex-nowrap items-center",
+      )}
+      {...aria}
+    >
+      {start.map((link, idx) => (
+        <li
+          key={idx}
+          className={classes.breadcrumbLink}
+          data-separator={separator}
+        >
+          {link}
+        </li>
+      ))}
+      {overflow && (
+        <Dropdown closeOnClick showArrow>
+          <li className={classes.breadcrumbLink} data-separator={separator}>
+            <Link>...</Link>
+          </li>
+          <div
+            data-color={color}
+            className={classNames(classes.breadcrumbOverflow, "flex flex-col")}
+          >
+            {overflow}
+          </div>
+        </Dropdown>
+      )}
+      {end?.map((link, idx) => (
+        <li
+          key={idx}
+          className={classes.breadcrumbLink}
+          data-separator={separator}
+        >
+          {link}
+        </li>
+      ))}
+    </nav>
+  );
+};