@refraktor/core 0.0.3 → 0.0.4

package/src/components/chip/chip.test.tsx

@@ -0,0 +1,197 @@
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Chip from "./chip";
+
+describe("@refraktor/core/Chip", () => {
+    it("renders correctly", async () => {
+        await render(<Chip>React</Chip>);
+
+        expect(screen.getByText("React")).toBeInTheDocument();
+    });
+
+    it("forwards ref correctly", async () => {
+        const ref = createRef<HTMLDivElement>();
+
+        await render(<Chip ref={ref}>React</Chip>);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+
+    it("supports uncontrolled selected state when selectable", async () => {
+        const user = userEvent.setup();
+
+        await render(<Chip selectable>React</Chip>);
+
+        const chip = screen.getByRole("button", { name: "React" });
+
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+
+        await user.click(chip);
+
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+    });
+
+    it("supports controlled selected state", async () => {
+        const user = userEvent.setup();
+
+        function Demo() {
+            const [selected, setSelected] = useState(false);
+
+            return (
+                <Chip selectable selected={selected} onSelectedChange={setSelected}>
+                    React
+                </Chip>
+            );
+        }
+
+        await render(<Demo />);
+
+        const chip = screen.getByRole("button", { name: "React" });
+
+        await user.click(chip);
+
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+    });
+
+    it("handles keyboard toggling", async () => {
+        const user = userEvent.setup();
+
+        await render(<Chip selectable>Vue</Chip>);
+
+        const chip = screen.getByRole("button", { name: "Vue" });
+        chip.focus();
+
+        await user.keyboard("{Space}");
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+
+        await user.keyboard("{Enter}");
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+    });
+
+    it("calls onRemove and does not toggle selection", async () => {
+        const user = userEvent.setup();
+        const onRemove = vi.fn();
+
+        await render(
+            <Chip selectable removable onRemove={onRemove} defaultSelected>
+                Svelte
+            </Chip>
+        );
+
+        const chip = screen.getByRole("button", { name: "Svelte" });
+        const removeButton = screen.getByRole("button", { name: "Remove chip" });
+
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+
+        await user.click(removeButton);
+
+        expect(onRemove).toHaveBeenCalledTimes(1);
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+    });
+
+    it("supports group selection", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(
+            <Chip.Group defaultValue={["react"]} onChange={onChange}>
+                <Chip value="react">React</Chip>
+                <Chip value="vue">Vue</Chip>
+            </Chip.Group>
+        );
+
+        const reactChip = screen.getByRole("button", { name: "React" });
+        const vueChip = screen.getByRole("button", { name: "Vue" });
+
+        expect(reactChip).toHaveAttribute("aria-pressed", "true");
+        expect(vueChip).toHaveAttribute("aria-pressed", "false");
+
+        await user.click(vueChip);
+        expect(onChange).toHaveBeenLastCalledWith(["react", "vue"]);
+
+        await user.click(reactChip);
+        expect(onChange).toHaveBeenLastCalledWith(["vue"]);
+    });
+
+    it("removes value from group with removable chip", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(
+            <Chip.Group defaultValue={["react"]} onChange={onChange}>
+                <Chip value="react" removable>
+                    React
+                </Chip>
+            </Chip.Group>
+        );
+
+        await user.click(screen.getByRole("button", { name: "Remove chip" }));
+
+        expect(onChange).toHaveBeenLastCalledWith([]);
+    });
+
+    it("supports disabled state from group", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(
+            <Chip.Group disabled onChange={onChange}>
+                <Chip value="react">React</Chip>
+            </Chip.Group>
+        );
+
+        const chip = screen.getByRole("button", { name: "React" });
+        await user.click(chip);
+
+        expect(chip).toHaveAttribute("aria-disabled", "true");
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("supports hidden inputs from group name", async () => {
+        const { container } = await render(
+            <Chip.Group name="frameworks" defaultValue={["react", "vue"]}>
+                <Chip value="react">React</Chip>
+                <Chip value="vue">Vue</Chip>
+            </Chip.Group>
+        );
+
+        const hiddenInputs = container.querySelectorAll(
+            'input[type="hidden"][name="frameworks"]'
+        );
+
+        expect(hiddenInputs).toHaveLength(2);
+        expect(
+            Array.from(hiddenInputs).map(
+                (item) => (item as HTMLInputElement).value
+            )
+        ).toEqual(["react", "vue"]);
+    });
+
+    it("supports root and slot class names", async () => {
+        const { container } = await render(
+            <Chip
+                className="custom-root"
+                classNames={{
+                    label: "custom-label",
+                    removeButton: "custom-remove-button",
+                    removeIcon: "custom-remove-icon"
+                }}
+                removable
+            >
+                React
+            </Chip>
+        );
+
+        const root = container.firstElementChild as HTMLDivElement;
+        const label = screen.getByText("React");
+        const removeButton = screen.getByRole("button", { name: "Remove chip" });
+        const removeIcon = removeButton.querySelector("span");
+
+        expect(root).toHaveClass("custom-root");
+        expect(label).toHaveClass("custom-label");
+        expect(removeButton).toHaveClass("custom-remove-button");
+        expect(removeIcon).toHaveClass("custom-remove-icon");
+    });
+});

package/src/components/chip/chip.tsx

@@ -0,0 +1,208 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { KeyboardEvent } from "react";
+import { XIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { useChipGroupContext } from "./chip.context";
+import { ChipGroup } from "./chip-group";
+import { getSize, getVariant } from "./chip.styles";
+import { ChipClassNames, ChipFactoryPayload, ChipProps } from "./chip.types";
+
+const defaultProps = {
+    size: "sm",
+    radius: "full",
+    variant: "default",
+    selectable: false,
+    removable: false
+} satisfies Partial<ChipProps>;
+
+const Chip = factory<ChipFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        value,
+        children,
+        selected,
+        defaultSelected,
+        onSelectedChange,
+        selectable,
+        removable,
+        onRemove,
+        removeButtonLabel,
+        leftSection,
+        rightSection,
+        size,
+        radius,
+        variant,
+        disabled,
+        className,
+        classNames,
+        onClick,
+        onKeyDown,
+        ...props
+    } = useProps("Chip", defaultProps, _props);
+    const classes = useClassNames<ChipClassNames>("Chip", classNames);
+    const chipGroup = useChipGroupContext();
+
+    const _id = useId(id);
+
+    const [uncontrolledSelected, setUncontrolledSelected] =
+        useUncontrolled<boolean>({
+            value: selected,
+            defaultValue: defaultSelected,
+            finalValue: false,
+            onChange: onSelectedChange
+        });
+
+    const hasGroupValue = !!chipGroup && typeof value === "string";
+    const isSelectable = selectable || hasGroupValue;
+    const isRemovable = removable || typeof onRemove === "function";
+    const isDisabled = !!(disabled || chipGroup?.disabled);
+    const resolvedSize = size ?? chipGroup?.size ?? "sm";
+    const resolvedRadius = radius ?? chipGroup?.radius ?? "full";
+    const resolvedVariant = variant ?? chipGroup?.variant ?? "default";
+    const isSelected = hasGroupValue
+        ? chipGroup.value.includes(value)
+        : uncontrolledSelected;
+
+    const toggleChip = () => {
+        if (!isSelectable || isDisabled) {
+            return;
+        }
+
+        const nextSelected = !isSelected;
+
+        if (hasGroupValue) {
+            chipGroup.onValueChange(value, nextSelected);
+            return;
+        }
+
+        setUncontrolledSelected(nextSelected);
+    };
+
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        onClick?.(event);
+
+        if (event.defaultPrevented) {
+            return;
+        }
+
+        toggleChip();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+        onKeyDown?.(event);
+
+        if (event.defaultPrevented || isDisabled || !isSelectable) {
+            return;
+        }
+
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            toggleChip();
+        }
+    };
+
+    const handleRemove = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+
+        if (isDisabled) {
+            return;
+        }
+
+        if (hasGroupValue) {
+            chipGroup.onValueChange(value, false);
+        } else if (isSelectable && isSelected) {
+            setUncontrolledSelected(false);
+        }
+
+        onRemove?.(event);
+    };
+
+    return (
+        <div
+            ref={ref}
+            id={_id}
+            data-selected={isSelected}
+            data-disabled={isDisabled}
+            data-selectable={isSelectable}
+            data-removable={isRemovable}
+            role={isSelectable ? "button" : undefined}
+            tabIndex={isSelectable ? (isDisabled ? -1 : 0) : undefined}
+            aria-pressed={isSelectable ? isSelected : undefined}
+            aria-disabled={isDisabled || undefined}
+            className={cx(
+                "inline-flex w-fit max-w-full items-center justify-center border select-none transition-colors",
+                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+                "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
+                isSelectable ? "cursor-pointer" : "cursor-default",
+                getSize(resolvedSize),
+                getRadius(resolvedRadius),
+                getVariant(resolvedVariant, isSelected),
+                classes.root,
+                className
+            )}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            {...props}
+        >
+            {leftSection && (
+                <span
+                    className={cx(
+                        "inline-flex shrink-0 items-center justify-center",
+                        classes.leftSection
+                    )}
+                    aria-hidden="true"
+                >
+                    {leftSection}
+                </span>
+            )}
+
+            <span className={cx("truncate", classes.label)}>{children}</span>
+
+            {rightSection && (
+                <span
+                    className={cx(
+                        "inline-flex shrink-0 items-center justify-center",
+                        classes.rightSection
+                    )}
+                    aria-hidden="true"
+                >
+                    {rightSection}
+                </span>
+            )}
+
+            {isRemovable && (
+                <button
+                    type="button"
+                    tabIndex={isDisabled ? -1 : 0}
+                    aria-label={removeButtonLabel ?? "Remove chip"}
+                    className={cx(
+                        "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 cursor-pointer",
+                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+                        classes.removeButton
+                    )}
+                    onClick={handleRemove}
+                    disabled={isDisabled}
+                >
+                    <span className={cx("inline-flex", classes.removeIcon)}>
+                        <XIcon size={12} />
+                    </span>
+                </button>
+            )}
+        </div>
+    );
+});
+
+Chip.displayName = "@refraktor/core/Chip";
+Chip.configure = createComponentConfig<ChipProps>();
+Chip.classNames = createClassNamesConfig<ChipClassNames>();
+Chip.Group = ChipGroup;
+
+export default Chip;

package/src/components/chip/chip.types.ts

@@ -0,0 +1,134 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { ChipGroup } from "./chip-group";
+
+export type ChipVariant = "default" | "outline";
+export type ChipGroupOrientation = "horizontal" | "vertical";
+
+export type ChipClassNames = {
+    root?: string;
+    leftSection?: string;
+    label?: string;
+    rightSection?: string;
+    removeButton?: string;
+    removeIcon?: string;
+};
+
+export type ChipGroupClassNames = {
+    root?: string;
+};
+
+export interface ChipProps extends ComponentPropsWithoutRef<"div"> {
+    /** The value used by Chip.Group */
+    value?: string;
+
+    /** The selected state of the chip (controlled) */
+    selected?: boolean;
+
+    /** The initial selected state of the chip (uncontrolled) */
+    defaultSelected?: boolean;
+
+    /** Callback called when selected state changes */
+    onSelectedChange?: (selected: boolean) => void;
+
+    /** Whether chip can be toggled @default `false` */
+    selectable?: boolean;
+
+    /** Whether to show remove button @default `false` */
+    removable?: boolean;
+
+    /** Callback called when remove button is clicked */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /** Accessible label for remove button */
+    removeButtonLabel?: string;
+
+    /** Content rendered at the start of the chip */
+    leftSection?: ReactNode;
+
+    /** Content rendered before remove button at the end of the chip */
+    rightSection?: ReactNode;
+
+    /** The size of the chip @default `sm` */
+    size?: RefraktorSize;
+
+    /** The radius of the chip @default `full` */
+    radius?: RefraktorRadius;
+
+    /** The variant of the chip @default `default` */
+    variant?: ChipVariant;
+
+    /** Whether chip is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ChipClassNames;
+}
+
+export interface ChipGroupProps
+    extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Chip components to render */
+    children: ReactNode;
+
+    /** Selected values (controlled) */
+    value?: string[];
+
+    /** Initial selected values (uncontrolled) */
+    defaultValue?: string[];
+
+    /** Callback called when values change */
+    onChange?: (value: string[]) => void;
+
+    /** Hidden input name used for form submission */
+    name?: string;
+
+    /** Whether all chips in group are disabled */
+    disabled?: boolean;
+
+    /** Shared chip size */
+    size?: RefraktorSize;
+
+    /** Shared chip radius */
+    radius?: RefraktorRadius;
+
+    /** Shared chip variant */
+    variant?: ChipVariant;
+
+    /** Layout direction @default `horizontal` */
+    orientation?: ChipGroupOrientation;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ChipGroupClassNames;
+}
+
+export interface ChipFactoryPayload extends FactoryPayload {
+    props: ChipProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ChipProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ChipClassNames>>;
+        Group: typeof ChipGroup;
+    };
+}
+
+export interface ChipGroupFactoryPayload extends FactoryPayload {
+    props: ChipGroupProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ChipGroupProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<ChipGroupClassNames>
+        >;
+    };
+}

package/src/components/chip/index.ts

@@ -0,0 +1,10 @@
+export { default as Chip } from "./chip";
+export { ChipGroup } from "./chip-group";
+export type {
+    ChipProps,
+    ChipClassNames,
+    ChipVariant,
+    ChipGroupProps,
+    ChipGroupClassNames,
+    ChipGroupOrientation
+} from "./chip.types";

package/src/components/drawer/drawer-body/drawer-body.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerBodyFactoryPayload } from "../drawer.types";
+
+const DrawerBody = factory<DrawerBodyFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useDrawerContext();
+
+        return (
+            <div
+                ref={ref}
+                className={cx(
+                    "overflow-y-auto",
+                    getStyles("body"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+DrawerBody.displayName = "@refraktor/core/Drawer.Body";
+
+export default DrawerBody;

package/src/components/drawer/drawer-body/index.ts

@@ -0,0 +1 @@
+export { default as DrawerBody } from "./drawer-body";