@refraktor/core 0.0.2 → 0.0.4

package/src/components/breadcrumbs/breadcrumbs.test.tsx

@@ -0,0 +1,136 @@
+import { render as rtlRender } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "../../theme";
+import { render, screen, userEvent } from "../../vitest";
+import Breadcrumbs from "./breadcrumbs";
+
+const items = [
+    { label: "Home", href: "/" },
+    { label: "Workspace", href: "/workspace" },
+    { label: "Projects", href: "/workspace/projects" },
+    { label: "Refraktor", href: "/workspace/projects/refraktor" },
+    { label: "Components", href: "/workspace/projects/refraktor/components" },
+    { label: "Breadcrumbs" }
+];
+
+describe("@refraktor/core/Breadcrumbs", () => {
+    it("renders navigation, links and current page", async () => {
+        await render(<Breadcrumbs items={items.slice(0, 3)} maxItems={0} />);
+
+        expect(
+            screen.getByRole("navigation", { name: "Breadcrumb" })
+        ).toBeInTheDocument();
+        expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute(
+            "href",
+            "/"
+        );
+        expect(screen.getByText("Projects")).toHaveAttribute(
+            "aria-current",
+            "page"
+        );
+    });
+
+    it("collapses and expands middle items", async () => {
+        const user = userEvent.setup();
+        const onExpandedChange = vi.fn();
+
+        await render(
+            <Breadcrumbs
+                items={items}
+                maxItems={4}
+                onExpandedChange={onExpandedChange}
+            />
+        );
+
+        expect(screen.getByRole("button", { name: /show full breadcrumb path/i })).toBeInTheDocument();
+        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
+
+        await user.click(
+            screen.getByRole("button", { name: /show full breadcrumb path/i })
+        );
+
+        expect(onExpandedChange).toHaveBeenCalledWith(true);
+        expect(screen.getByText("Projects")).toBeInTheDocument();
+        expect(
+            screen.queryByRole("button", { name: /show full breadcrumb path/i })
+        ).not.toBeInTheDocument();
+    });
+
+    it("supports itemsBeforeCollapse and itemsAfterCollapse", async () => {
+        await render(
+            <Breadcrumbs
+                items={items}
+                maxItems={4}
+                itemsBeforeCollapse={2}
+                itemsAfterCollapse={2}
+            />
+        );
+
+        expect(screen.getByText("Home")).toBeInTheDocument();
+        expect(screen.getByText("Workspace")).toBeInTheDocument();
+        expect(screen.getByText("Components")).toBeInTheDocument();
+        expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
+        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
+    });
+
+    it("supports controlled expanded mode", async () => {
+        await render(<Breadcrumbs items={items} maxItems={3} expanded />);
+
+        expect(screen.getByText("Projects")).toBeInTheDocument();
+        expect(
+            screen.queryByRole("button", { name: /show full breadcrumb path/i })
+        ).not.toBeInTheDocument();
+    });
+
+    it("supports custom separator", async () => {
+        await render(<Breadcrumbs items={items.slice(0, 3)} separator="/" />);
+
+        expect(screen.getAllByText("/")).toHaveLength(2);
+    });
+
+    it("supports root and slot class names", async () => {
+        const { container } = await render(
+            <Breadcrumbs
+                items={items}
+                maxItems={4}
+                className="custom-root"
+                classNames={{
+                    list: "custom-list",
+                    item: "custom-item",
+                    link: "custom-link",
+                    current: "custom-current",
+                    separator: "custom-separator",
+                    collapse: "custom-collapse"
+                }}
+            />
+        );
+
+        const root = container.firstElementChild as HTMLElement;
+
+        expect(root).toHaveClass("custom-root");
+        expect(root.querySelector("ol")).toHaveClass("custom-list");
+        expect(root.querySelector("li")).toHaveClass("custom-item");
+        expect(screen.getByRole("link", { name: "Home" })).toHaveClass(
+            "custom-link"
+        );
+        expect(root.querySelector('[aria-current="page"]')).toHaveClass(
+            "custom-current"
+        );
+        expect(
+            screen.getByRole("button", { name: /show full breadcrumb path/i })
+        ).toHaveClass("custom-collapse");
+        expect(root.querySelector("span[aria-hidden='true']")).toHaveClass(
+            "custom-separator"
+        );
+    });
+
+    it("returns null when items array is empty", () => {
+        const { container } = rtlRender(
+            <ThemeProvider>
+                <Breadcrumbs items={[]} />
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toBeNull();
+    });
+});

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,199 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { ChevronIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { getSize } from "./breadcrumbs.styles";
+import {
+    BreadcrumbsClassNames,
+    BreadcrumbsFactoryPayload,
+    BreadcrumbsProps
+} from "./breadcrumbs.types";
+import { buildBreadcrumbsRange } from "./breadcrumbs.utils";
+
+const defaultProps = {
+    maxItems: 4,
+    itemsBeforeCollapse: 1,
+    itemsAfterCollapse: 1,
+    defaultExpanded: false,
+    expandLabel: "Show full breadcrumb path",
+    size: "md",
+    radius: "default"
+} satisfies Partial<BreadcrumbsProps>;
+
+const Breadcrumbs = factory<BreadcrumbsFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        items,
+        maxItems,
+        itemsBeforeCollapse,
+        itemsAfterCollapse,
+        expanded,
+        defaultExpanded,
+        onExpandedChange,
+        expandLabel,
+        separator,
+        size,
+        radius,
+        className,
+        classNames,
+        ...props
+    } = useProps("Breadcrumbs", defaultProps, _props);
+    const classes = useClassNames("Breadcrumbs", classNames);
+    const _id = useId(id);
+
+    const [isExpanded, setIsExpanded] = useUncontrolled<boolean>({
+        value: expanded,
+        defaultValue: defaultExpanded,
+        finalValue: false,
+        onChange: onExpandedChange
+    });
+
+    const sizeStyles = getSize(size);
+    const visibleItems = buildBreadcrumbsRange({
+        total: items.length,
+        maxItems,
+        itemsBeforeCollapse,
+        itemsAfterCollapse,
+        expanded: isExpanded
+    });
+
+    if (items.length === 0) {
+        return null;
+    }
+
+    const resolvedSeparator =
+        separator !== undefined ? (
+            separator
+        ) : (
+            <ChevronIcon direction="right" size={sizeStyles.iconSize} />
+        );
+
+    return (
+        <nav
+            {...props}
+            ref={ref}
+            id={_id}
+            aria-label={props["aria-label"] ?? "Breadcrumb"}
+            className={cx("w-full", classes.root, className)}
+        >
+            <ol
+                className={cx(
+                    "flex flex-wrap items-center",
+                    sizeStyles.list,
+                    classes.list
+                )}
+            >
+                {visibleItems.map((rangeItem, index) => {
+                    const showSeparator = index < visibleItems.length - 1;
+                    const content = (() => {
+                        if (rangeItem === "collapse") {
+                            return (
+                                <button
+                                    type="button"
+                                    aria-label={expandLabel}
+                                    className={cx(
+                                        "inline-flex items-center justify-center select-none outline-none transition-colors",
+                                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+                                        "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]",
+                                        sizeStyles.collapse,
+                                        getRadius(radius),
+                                        classes.collapse
+                                    )}
+                                    onClick={() => setIsExpanded(true)}
+                                >
+                                    ...
+                                </button>
+                            );
+                        }
+
+                        const item = items[rangeItem];
+                        const isCurrent = rangeItem === items.length - 1;
+                        const baseLabelClass = cx(
+                            "inline-flex min-w-0 items-center truncate",
+                            sizeStyles.label
+                        );
+
+                        if (!isCurrent && item.href) {
+                            return (
+                                <a
+                                    href={item.href}
+                                    target={item.target}
+                                    rel={item.rel}
+                                    aria-label={item.ariaLabel}
+                                    className={cx(
+                                        baseLabelClass,
+                                        "outline-none transition-colors",
+                                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+                                        "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)]",
+                                        classes.link
+                                    )}
+                                >
+                                    {item.label}
+                                </a>
+                            );
+                        }
+
+                        return (
+                            <span
+                                aria-label={item.ariaLabel}
+                                aria-current={isCurrent ? "page" : undefined}
+                                className={cx(
+                                    baseLabelClass,
+                                    isCurrent
+                                        ? "font-medium text-[var(--refraktor-text)]"
+                                        : "text-[var(--refraktor-text-secondary)]",
+                                    isCurrent ? classes.current : classes.link
+                                )}
+                            >
+                                {item.label}
+                            </span>
+                        );
+                    })();
+
+                    return (
+                        <li
+                            key={
+                                rangeItem === "collapse"
+                                    ? "collapse"
+                                    : `item-${rangeItem}`
+                            }
+                            className={cx(
+                                "inline-flex min-w-0 items-center",
+                                sizeStyles.item,
+                                classes.item
+                            )}
+                        >
+                            {content}
+
+                            {showSeparator && (
+                                <span
+                                    aria-hidden="true"
+                                    className={cx(
+                                        "inline-flex items-center text-[var(--refraktor-text-tertiary)]",
+                                        sizeStyles.separator,
+                                        classes.separator
+                                    )}
+                                >
+                                    {resolvedSeparator}
+                                </span>
+                            )}
+                        </li>
+                    );
+                })}
+            </ol>
+        </nav>
+    );
+});
+
+Breadcrumbs.displayName = "@refraktor/core/Breadcrumbs";
+Breadcrumbs.configure = createComponentConfig<BreadcrumbsProps>();
+Breadcrumbs.classNames = createClassNamesConfig<BreadcrumbsClassNames>();
+
+export default Breadcrumbs;

package/src/components/breadcrumbs/breadcrumbs.types.ts

@@ -0,0 +1,78 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export type BreadcrumbsItem = {
+    label: ReactNode;
+    href?: string;
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    rel?: ComponentPropsWithoutRef<"a">["rel"];
+    ariaLabel?: string;
+};
+
+export type BreadcrumbsClassNames = {
+    root?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    current?: string;
+    separator?: string;
+    collapse?: string;
+};
+
+export interface BreadcrumbsProps
+    extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+    /** Breadcrumb items in hierarchical order */
+    items: BreadcrumbsItem[];
+
+    /** Collapse items when amount exceeds this number. Use `0` to disable @default `4` */
+    maxItems?: number;
+
+    /** Amount of visible items before collapsed section @default `1` */
+    itemsBeforeCollapse?: number;
+
+    /** Amount of visible items after collapsed section @default `1` */
+    itemsAfterCollapse?: number;
+
+    /** Collapse state (controlled) */
+    expanded?: boolean;
+
+    /** Initial collapse state (uncontrolled) @default `false` */
+    defaultExpanded?: boolean;
+
+    /** Callback called when collapse state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+
+    /** Accessible label for collapse control @default `Show full breadcrumb path` */
+    expandLabel?: string;
+
+    /** Separator between items */
+    separator?: ReactNode;
+
+    /** Size of breadcrumb text and controls @default `md` */
+    size?: RefraktorSize;
+
+    /** Radius of collapse control @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: BreadcrumbsClassNames;
+}
+
+export interface BreadcrumbsFactoryPayload extends FactoryPayload {
+    props: BreadcrumbsProps;
+    ref: HTMLElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<BreadcrumbsProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<BreadcrumbsClassNames>
+        >;
+    };
+}

package/src/components/breadcrumbs/breadcrumbs.utils.ts

@@ -0,0 +1,70 @@
+export type BreadcrumbsRangeItem = number | "collapse";
+
+export type BreadcrumbsRangeOptions = {
+    total: number;
+    maxItems: number;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+    expanded: boolean;
+};
+
+function range(start: number, end: number) {
+    if (end < start) {
+        return [];
+    }
+
+    const length = end - start + 1;
+
+    return Array.from({ length }, (_, index) => start + index);
+}
+
+function toSafeInteger(value: number, fallback: number, minimum = 0) {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+
+    return Math.max(minimum, Math.trunc(value));
+}
+
+export function buildBreadcrumbsRange(
+    options: BreadcrumbsRangeOptions
+): BreadcrumbsRangeItem[] {
+    const total = toSafeInteger(options.total, 0, 0);
+
+    if (total <= 0) {
+        return [];
+    }
+
+    const all = range(0, total - 1);
+
+    if (options.expanded) {
+        return all;
+    }
+
+    const maxItems = toSafeInteger(options.maxItems, 0, 0);
+
+    if (maxItems === 0 || total <= maxItems) {
+        return all;
+    }
+
+    const itemsBeforeCollapse = Math.min(
+        toSafeInteger(options.itemsBeforeCollapse, 1, 1),
+        total - 1
+    );
+    const itemsAfterCollapse = Math.min(
+        toSafeInteger(options.itemsAfterCollapse, 1, 1),
+        total - itemsBeforeCollapse
+    );
+
+    const hiddenItems =
+        total - itemsBeforeCollapse - Math.max(itemsAfterCollapse, 1);
+
+    if (hiddenItems <= 1) {
+        return all;
+    }
+
+    const start = range(0, itemsBeforeCollapse - 1);
+    const end = range(total - itemsAfterCollapse, total - 1);
+
+    return [...start, "collapse", ...end];
+}

package/src/components/breadcrumbs/index.ts

@@ -0,0 +1,6 @@
+export { default as Breadcrumbs } from "./breadcrumbs";
+export type {
+    BreadcrumbsProps,
+    BreadcrumbsItem,
+    BreadcrumbsClassNames
+} from "./breadcrumbs.types";

package/src/components/button/button.styles.ts

@@ -6,11 +6,11 @@ const sizes: Record<ButtonSize, string> = {
     md: "text-sm px-2.5 h-8 gap-2",
     lg: "text-base px-3 h-10 gap-2.5",
     xl: "text-lg px-4 h-12 gap-3",
-    "icon-xs": "size-5",
-    "icon-sm": "size-6",
-    "icon-md": "size-8",
-    "icon-lg": "size-10",
-    "icon-xl": "size-12"
+    "icon-xs": "size-5 shrink-0",
+    "icon-sm": "size-6 shrink-0",
+    "icon-md": "size-8 shrink-0",
+    "icon-lg": "size-10 shrink-0",
+    "icon-xl": "size-12 shrink-0"
 };
 
 export const getSize = (size: ButtonSize = "md") => sizes[size];

package/src/components/chip/chip-group/chip-group.tsx

@@ -0,0 +1,107 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../../utils";
+import { ChipGroupProvider } from "../chip.context";
+import {
+    ChipGroupClassNames,
+    ChipGroupFactoryPayload,
+    ChipGroupProps
+} from "../chip.types";
+
+const defaultProps = {
+    orientation: "horizontal"
+} satisfies Partial<ChipGroupProps>;
+
+const ChipGroup = factory<ChipGroupFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        value,
+        defaultValue,
+        onChange,
+        name,
+        disabled,
+        size,
+        radius,
+        variant,
+        orientation,
+        className,
+        classNames,
+        ...props
+    } = useProps("ChipGroup", defaultProps, _props);
+    const classes = useClassNames<ChipGroupClassNames>("ChipGroup", classNames);
+
+    const _id = useId(id);
+
+    const [values, setValues] = useUncontrolled<string[]>({
+        value,
+        defaultValue,
+        finalValue: [],
+        onChange
+    });
+
+    const handleValueChange = (chipValue: string, selected: boolean) => {
+        const nextValues = selected
+            ? values.includes(chipValue)
+                ? values
+                : [...values, chipValue]
+            : values.filter((itemValue) => itemValue !== chipValue);
+
+        setValues(nextValues);
+    };
+
+    return (
+        <ChipGroupProvider
+            value={{
+                value: values,
+                onValueChange: handleValueChange,
+                disabled,
+                size,
+                radius,
+                variant
+            }}
+        >
+            <div
+                ref={ref}
+                id={_id}
+                data-disabled={disabled}
+                aria-disabled={disabled}
+                className={cx(
+                    "inline-flex",
+                    orientation === "vertical"
+                        ? "flex-col items-start gap-2"
+                        : "flex-row flex-wrap items-center gap-2",
+                    "data-[disabled=true]:opacity-50",
+                    classes.root,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+
+                {name &&
+                    values.map((itemValue, index) => (
+                        <input
+                            key={`${itemValue}-${index}`}
+                            type="hidden"
+                            name={name}
+                            value={itemValue}
+                        />
+                    ))}
+            </div>
+        </ChipGroupProvider>
+    );
+});
+
+ChipGroup.displayName = "@refraktor/core/ChipGroup";
+ChipGroup.configure = createComponentConfig<ChipGroupProps>();
+ChipGroup.classNames = createClassNamesConfig<ChipGroupClassNames>();
+
+export default ChipGroup;

package/src/components/chip/chip-group/index.ts

@@ -0,0 +1 @@
+export { default as ChipGroup } from "./chip-group";

package/src/components/chip/chip.context.ts

@@ -0,0 +1,15 @@
+import { createOptionalContext } from "@refraktor/utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { ChipVariant } from "./chip.types";
+
+export interface ChipGroupContextValue {
+    value: string[];
+    onValueChange: (chipValue: string, selected: boolean) => void;
+    disabled?: boolean;
+    size?: RefraktorSize;
+    radius?: RefraktorRadius;
+    variant?: ChipVariant;
+}
+
+export const [ChipGroupProvider, useChipGroupContext] =
+    createOptionalContext<ChipGroupContextValue>();

package/src/components/chip/chip.styles.ts

@@ -0,0 +1,36 @@
+import { RefraktorSize } from "../../theme";
+import { ChipVariant } from "./chip.types";
+
+const sizes: Record<RefraktorSize, string> = {
+    xs: "text-xs h-5 px-2 gap-1",
+    sm: "text-xs h-6 px-2.5 gap-1.5",
+    md: "text-sm h-7 px-3 gap-1.5",
+    lg: "text-base h-8 px-3.5 gap-2",
+    xl: "text-lg h-9 px-4 gap-2"
+};
+
+const variants: Record<
+    ChipVariant,
+    {
+        idle: string;
+        selected: string;
+    }
+> = {
+    default: {
+        idle: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:bg-[var(--refraktor-bg-hover)]",
+        selected:
+            "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] border border-[var(--refraktor-primary)]"
+    },
+    outline: {
+        idle: "bg-transparent text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:border-[var(--refraktor-border-hover)]",
+        selected:
+            "bg-[var(--refraktor-bg-subtle)] text-[var(--refraktor-text)] border border-[var(--refraktor-primary)]"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "sm") => sizes[size];
+
+export const getVariant = (
+    variant: ChipVariant = "default",
+    selected = false
+) => (selected ? variants[variant].selected : variants[variant].idle);