@refraktor/core 0.0.3 → 0.0.5

package/src/components/modal/modal.test.tsx

@@ -1,146 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent, waitFor } from "../../vitest";
-import Modal from "./modal";
-import { ModalContent } from "./modal-content";
-import { ModalOverlay } from "./modal-overlay";
-import { ModalRoot } from "./modal-root";
-
-describe("@refraktor/core/Modal", () => {
-    const transitionProps = {
-        duration: 0,
-        immediate: true
-    } as const;
-
-    it("renders with compound subcomponents and closes with header close button", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Overlay />
-
-                <Modal.Content>
-                    <Modal.Header text="Delete item" />
-                    <p>Are you sure?</p>
-                </Modal.Content>
-            </Modal>
-        );
-
-        expect(
-            await screen.findByRole("dialog", { name: "Delete item" })
-        ).toBeInTheDocument();
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
-    });
-
-    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
-        const user = userEvent.setup();
-        const onOpenedChange = vi.fn();
-
-        await render(
-            <Modal
-                opened
-                onOpenedChange={onOpenedChange}
-                transitionProps={transitionProps}
-            >
-                <Modal.Overlay data-testid="overlay" />
-                <Modal.Content>Controlled modal</Modal.Content>
-            </Modal>
-        );
-
-        await user.click(await screen.findByTestId("overlay"));
-
-        expect(onOpenedChange).toHaveBeenCalledWith(false);
-    });
-
-    it("closes on Escape key", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Content>Keyboard close</Modal.Content>
-            </Modal>
-        );
-
-        await screen.findByRole("dialog");
-
-        await user.keyboard("{Escape}");
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
-    });
-
-    it("supports standalone subcomponents with ModalRoot", async () => {
-        await render(
-            <ModalRoot defaultOpened transitionProps={transitionProps}>
-                <ModalOverlay />
-                <ModalContent>Standalone composition</ModalContent>
-            </ModalRoot>
-        );
-
-        expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    });
-
-    it("applies custom overlay background opacity and blur", async () => {
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Overlay
-                    data-testid="overlay"
-                    backgroundOpacity={0.4}
-                    blur={6}
-                />
-                <Modal.Content>Styled overlay</Modal.Content>
-            </Modal>
-        );
-
-        const overlay = await screen.findByTestId("overlay");
-
-        expect(overlay).toHaveStyle({
-            backgroundColor: "rgba(0, 0, 0, 0.4)",
-            backdropFilter: "blur(6px)"
-        });
-    });
-
-    it("does not set backdrop blur for zero blur", async () => {
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Overlay data-testid="overlay" blur={0} />
-                <Modal.Content>No blur</Modal.Content>
-            </Modal>
-        );
-
-        const overlay = await screen.findByTestId("overlay");
-
-        expect(overlay).toHaveStyle({
-            backgroundColor: "rgba(0, 0, 0, 0.5)"
-        });
-        expect(overlay.style.backdropFilter).toBe("");
-    });
-
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Modal defaultOpened lockScroll transitionProps={transitionProps}>
-                <Modal.Content>
-                    Scroll locked
-                    <Modal.Close />
-                </Modal.Content>
-            </Modal>
-        );
-
-        await waitFor(() => {
-            expect(document.body).toHaveAttribute("data-scroll-locked");
-        });
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(document.body).not.toHaveAttribute("data-scroll-locked");
-        });
-    });
-});

package/src/components/modal/modal.tsx

@@ -1,26 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory
-} from "../../utils";
-import { ModalClose } from "./modal-close";
-import { ModalContent } from "./modal-content";
-import { ModalHeader } from "./modal-header";
-import { ModalOverlay } from "./modal-overlay";
-import { ModalRoot } from "./modal-root";
-import { ModalClassNames, ModalFactoryPayload, ModalProps } from "./modal.types";
-
-const Modal = factory<ModalFactoryPayload>((props, ref) => {
-    return <ModalRoot {...props} ref={ref} />;
-});
-
-Modal.displayName = "@refraktor/core/Modal";
-Modal.configure = createComponentConfig<ModalProps>();
-Modal.classNames = createClassNamesConfig<ModalClassNames>();
-Modal.Root = ModalRoot;
-Modal.Overlay = ModalOverlay;
-Modal.Content = ModalContent;
-Modal.Header = ModalHeader;
-Modal.Close = ModalClose;
-
-export default Modal;

package/src/components/modal/modal.types.ts

@@ -1,148 +0,0 @@
-import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { RefraktorRadius } from "../../theme";
-import { TransitionProps } from "../transition";
-import { ModalRoot } from "./modal-root";
-import { ModalOverlay } from "./modal-overlay";
-import { ModalContent } from "./modal-content";
-import { ModalHeader } from "./modal-header";
-import { ModalClose } from "./modal-close";
-
-export type ModalClassNames = {
-    root?: string;
-    overlay?: string;
-    content?: string;
-    header?: string;
-    close?: string;
-};
-
-export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
-    /** Children containing modal subcomponents */
-    children: ReactNode;
-
-    /** State of the modal (controlled) */
-    opened?: boolean;
-
-    /** Initial state of the modal (uncontrolled) */
-    defaultOpened?: boolean;
-
-    /** Callback called when modal state changes */
-    onOpenedChange?: (opened: boolean) => void;
-
-    /** Whether to close modal on overlay/outside click @default `true` */
-    closeOnClickOutside?: boolean;
-
-    /** Whether to close modal on Escape key @default `true` */
-    closeOnEscape?: boolean;
-
-    /** Whether to lock body scroll while opened @default `true` */
-    lockScroll?: boolean;
-
-    /** Whether to render overlay/content inside portal @default `true` */
-    withinPortal?: boolean;
-
-    /** Radius for modal content @default `md` */
-    radius?: RefraktorRadius;
-
-    /** Transition props for overlay/content, uses Transition internally */
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: ModalClassNames;
-}
-
-export type ModalRootProps = ModalProps;
-
-export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
-    /** Whether clicking the overlay closes modal @default `true` */
-    closeOnClick?: boolean;
-
-    /** Overlay background opacity @default `0.5` */
-    backgroundOpacity?: number;
-
-    /** Backdrop blur amount in px (or any CSS length) @default `0` */
-    blur?: number | string;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface ModalContentProps extends ComponentPropsWithoutRef<"div"> {
-    /** Modal body content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
-    /** Header content */
-    children?: ReactNode;
-
-    /** Shorthand header text */
-    text?: ReactNode;
-
-    /** Whether to show close button inside header @default `true` */
-    withClose?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface ModalCloseProps
-    extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
-    /** Optional close content (defaults to `x`) */
-    children?: ReactNode;
-
-    /** Click callback fired before closing */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface ModalFactoryPayload extends FactoryPayload {
-    props: ModalProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ModalProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<ModalClassNames>>;
-        Root: typeof ModalRoot;
-        Overlay: typeof ModalOverlay;
-        Content: typeof ModalContent;
-        Header: typeof ModalHeader;
-        Close: typeof ModalClose;
-    };
-}
-
-export interface ModalRootFactoryPayload extends FactoryPayload {
-    props: ModalRootProps;
-    ref: HTMLDivElement;
-}
-
-export interface ModalOverlayFactoryPayload extends FactoryPayload {
-    props: ModalOverlayProps;
-    ref: HTMLDivElement;
-}
-
-export interface ModalContentFactoryPayload extends FactoryPayload {
-    props: ModalContentProps;
-    ref: HTMLDivElement;
-}
-
-export interface ModalHeaderFactoryPayload extends FactoryPayload {
-    props: ModalHeaderProps;
-    ref: HTMLDivElement;
-}
-
-export interface ModalCloseFactoryPayload extends FactoryPayload {
-    props: ModalCloseProps;
-    ref: HTMLButtonElement;
-}

package/src/components/modal/use-modal.ts

@@ -1,101 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
-
-interface UseModalProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
-}
-
-export interface UseModalReturn {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-
-export function useModal(options: UseModalProps): UseModalReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside = true,
-        closeOnEscape = true,
-        contentRef
-    } = options;
-
-    const [isOpen, setIsOpen] = useUncontrolled({
-        value: opened,
-        defaultValue: defaultOpened,
-        finalValue: false,
-        onChange: onOpenedChange
-    });
-
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, [setIsOpen]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnEscape) {
-            return;
-        }
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener("keydown", handleKeyDown);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [closeOnEscape, isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnClickOutside) {
-            return;
-        }
-
-        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-            const target = event.target;
-
-            if (!(target instanceof Node)) {
-                return;
-            }
-
-            if (contentRef.current?.contains(target)) {
-                return;
-            }
-
-            setIsOpen(false);
-        };
-
-        document.addEventListener("mousedown", handlePointerDown);
-        document.addEventListener("touchstart", handlePointerDown);
-
-        return () => {
-            document.removeEventListener("mousedown", handlePointerDown);
-            document.removeEventListener("touchstart", handlePointerDown);
-        };
-    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
-
-    return {
-        opened: isOpen,
-        open,
-        close,
-        toggle
-    };
-}

package/src/components/number-input/index.ts

@@ -1,2 +0,0 @@
-export { default as NumberInput } from "./number-input";
-export * from "./number-input.types";

package/src/components/number-input/number-input.styles.ts

@@ -1,37 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-const controlSizes = {
-    xs: {
-        width: "w-3",
-        iconSize: 8,
-        leftSpacing: "mr-0.5",
-        rightSpacing: "ml-0.5"
-    },
-    sm: {
-        width: "w-4",
-        iconSize: 10,
-        leftSpacing: "mr-0.5",
-        rightSpacing: "ml-0.5"
-    },
-    md: {
-        width: "w-5",
-        iconSize: 12,
-        leftSpacing: "mr-1",
-        rightSpacing: "ml-1"
-    },
-    lg: {
-        width: "w-6",
-        iconSize: 14,
-        leftSpacing: "mr-1",
-        rightSpacing: "ml-1"
-    },
-    xl: {
-        width: "w-7",
-        iconSize: 16,
-        leftSpacing: "mr-1.5",
-        rightSpacing: "ml-1.5"
-    }
-};
-
-export const getControlSize = (size: RefraktorSize = "md") =>
-    controlSizes[size];

package/src/components/number-input/number-input.test.tsx

@@ -1,22 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../vitest";
-import NumberInput from "./number-input";
-
-describe("@refraktor/core/NumberInput", () => {
-    it("supports input wrapper props", async () => {
-        await render(
-            <NumberInput
-                label="Quantity"
-                description="Enter desired amount"
-                error="Quantity is required"
-            />
-        );
-
-        const input = screen.getByLabelText("Quantity");
-
-        expect(input).toHaveAttribute("type", "number");
-        expect(input).toHaveAttribute("aria-invalid", "true");
-        expect(screen.getByText("Enter desired amount")).toBeInTheDocument();
-        expect(screen.getByText("Quantity is required")).toBeInTheDocument();
-    });
-});