@refraktor/core 0.0.4 → 0.0.5

package/src/components/popover/popover.context.ts

@@ -1,20 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { UsePopoverReturn } from "./use-popover";
-import { PopoverClassNames } from "./popover.types";
-import { RefraktorRadius } from "../../theme";
-import { TransitionProps } from "../transition";
-
-export interface PopoverContextValue {
-    popover: UsePopoverReturn;
-    showArrow: boolean;
-    radius: RefraktorRadius;
-    withinPortal: boolean;
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-    classNames?: PopoverClassNames;
-    getStyles: (part: keyof PopoverClassNames) => string | undefined;
-}
-
-export const [PopoverProvider, usePopoverContext] =
-    createSafeContext<PopoverContextValue>(
-        "Popover component was not found in tree. Make sure you wrap Popover.Trigger and Popover.Dropdown with Popover component."
-    );

package/src/components/popover/popover.tsx

@@ -1,113 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    PopoverClassNames,
-    PopoverFactoryPayload,
-    PopoverProps
-} from "./popover.types";
-import { usePopover } from "./use-popover";
-import { PopoverProvider } from "./popover.context";
-import { PopoverTrigger } from "./popover-trigger";
-import { PopoverDropdown } from "./popover-dropdown";
-
-const defaultProps = {
-    positioning: {
-        placement: "bottom",
-        offset: 8
-    },
-    middlewares: { flip: true, shift: true },
-    trigger: "click",
-    openDelay: 0,
-    closeDelay: 0,
-    showArrow: false,
-    radius: "default",
-    withinPortal: true,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-    trapFocus: false
-} satisfies Partial<PopoverProps>;
-
-const Popover = factory<PopoverFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning,
-        middlewares,
-        disabled,
-        trigger,
-        openDelay,
-        closeDelay,
-        showArrow,
-        transitionProps,
-        radius,
-        withinPortal,
-        closeOnClickOutside,
-        closeOnEscape,
-        trapFocus,
-        className,
-        classNames,
-        ...props
-    } = useProps("Popover", defaultProps, _props);
-    const classes = useClassNames("Popover", classNames);
-
-    const _id = useId(id);
-
-    const popover = usePopover({
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning,
-        middlewares,
-        disabled,
-        trigger,
-        showArrow,
-        closeOnClickOutside,
-        closeOnEscape,
-        openDelay,
-        closeDelay
-    });
-
-    const getStyles = (part: keyof PopoverClassNames) => classes[part];
-
-    return (
-        <PopoverProvider
-            value={{
-                popover,
-                showArrow: showArrow ?? false,
-                radius: radius ?? "default",
-                withinPortal: withinPortal ?? true,
-                transitionProps,
-                classNames,
-                getStyles
-            }}
-        >
-            <div
-                ref={ref}
-                id={_id}
-                className={cx("inline-block", classes.root, className)}
-                {...props}
-            >
-                {children}
-            </div>
-        </PopoverProvider>
-    );
-});
-
-Popover.displayName = "@refraktor/core/Popover";
-Popover.configure = createComponentConfig<PopoverProps>();
-Popover.classNames = createClassNamesConfig<PopoverClassNames>();
-Popover.Trigger = PopoverTrigger;
-Popover.Dropdown = PopoverDropdown;
-
-export default Popover;

package/src/components/popover/popover.types.ts

@@ -1,137 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import type {
-    FlipOptions,
-    InlineOptions,
-    Placement,
-    ShiftOptions
-} from "@floating-ui/react";
-import { TransitionProps } from "../transition";
-import { RefraktorRadius } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { PopoverTrigger } from "./popover-trigger";
-import { PopoverDropdown } from "./popover-dropdown";
-
-export type PopoverClassNames = {
-    root?: string;
-    trigger?: string;
-    dropdown?: string;
-    arrow?: string;
-};
-
-export type PopoverPositioning = {
-    /** The placement of the popover relative to the trigger element @default `bottom` */
-    placement?: Placement;
-
-    /** Offset distance from the trigger element in pixels @default `8` */
-    offset?: number;
-};
-
-export type PopoverMiddlewares = {
-    shift?: boolean | ShiftOptions;
-    flip?: boolean | FlipOptions;
-    inline?: boolean | InlineOptions;
-};
-
-export type PopoverTrigger = "click" | "hover" | "focus";
-
-export interface PopoverProps extends ComponentPropsWithoutRef<"div"> {
-    /** Children containing subcomponents */
-    children: ReactNode;
-
-    /** State of the popover (controlled) */
-    opened?: boolean;
-
-    /** Initial state of the popover (uncontrolled) */
-    defaultOpened?: boolean;
-
-    /** Callback called when the popover state changes */
-    onOpenedChange?: (opened: boolean) => void;
-
-    /** Positioning settings for the popover */
-    positioning?: PopoverPositioning;
-
-    /** Middlewares settings for the popover */
-    middlewares?: PopoverMiddlewares;
-
-    /** Whether the popover is disabled @default `false` */
-    disabled?: boolean;
-
-    /** Trigger type for the popover @default `click` */
-    trigger?: PopoverTrigger;
-
-    /** Delay in milliseconds before the popover opens @default `0` */
-    openDelay?: number;
-
-    /** Delay in milliseconds before the popover closes @default `0` */
-    closeDelay?: number;
-
-    /** Whether to show the arrow for the popover @default `false` */
-    showArrow?: boolean;
-
-    /** Transition props for the popover dropdown, uses Transition component internally */
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-
-    /** Radius for the popover dropdown @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Whether to render the popover within a portal @default `true` */
-    withinPortal?: boolean;
-
-    /** Whether to close on click outside @default `true` */
-    closeOnClickOutside?: boolean;
-
-    /** Whether to close on escape key @default `true` */
-    closeOnEscape?: boolean;
-
-    /** Whether to trap focus within the popover @default `false` */
-    trapFocus?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: PopoverClassNames;
-}
-
-export interface PopoverTriggerProps extends ComponentPropsWithoutRef<"div"> {
-    /** The trigger element */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface PopoverDropdownProps extends ComponentPropsWithoutRef<"div"> {
-    /** Content to display inside the dropdown */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface PopoverFactoryPayload extends FactoryPayload {
-    props: PopoverProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<PopoverProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<PopoverClassNames>
-        >;
-        Trigger: typeof PopoverTrigger;
-        Dropdown: typeof PopoverDropdown;
-    };
-}
-
-export interface PopoverTriggerFactoryPayload extends FactoryPayload {
-    props: PopoverTriggerProps;
-    ref: HTMLDivElement;
-}
-
-export interface PopoverDropdownFactoryPayload extends FactoryPayload {
-    props: PopoverDropdownProps;
-    ref: HTMLDivElement;
-}

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

@@ -1,219 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import {
-    PopoverMiddlewares,
-    PopoverPositioning,
-    PopoverTrigger
-} from "./popover.types";
-import {
-    arrow,
-    autoUpdate,
-    flip,
-    FloatingContext,
-    inline,
-    Middleware,
-    offset,
-    Placement,
-    safePolygon,
-    shift,
-    useClick,
-    useDismiss,
-    useFloating,
-    useFocus,
-    useHover,
-    useInteractions,
-    useRole
-} from "@floating-ui/react";
-import { useCallback, useMemo, useRef } from "react";
-
-interface UsePopoverProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    positioning?: PopoverPositioning;
-    middlewares?: PopoverMiddlewares;
-    disabled?: boolean;
-    trigger?: PopoverTrigger;
-    showArrow?: boolean;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    openDelay?: number;
-    closeDelay?: number;
-}
-
-export interface UsePopoverReturn {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    context: FloatingContext;
-    refs: {
-        setReference: (node: HTMLElement | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-        reference: React.MutableRefObject<HTMLElement | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-    };
-    floatingStyles: React.CSSProperties;
-    getReferenceProps: (
-        userProps?: React.HTMLAttributes<HTMLElement>
-    ) => Record<string, unknown>;
-    getFloatingProps: (
-        userProps?: React.HTMLAttributes<HTMLElement>
-    ) => Record<string, unknown>;
-    arrowRef: React.RefObject<SVGSVGElement | null>;
-    placement: Placement;
-}
-
-export function usePopover(options: UsePopoverProps = {}): UsePopoverReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning = {
-            placement: "bottom",
-            offset: 8
-        },
-        middlewares = { flip: true, shift: true },
-        disabled = false,
-        trigger = "click",
-        showArrow = false,
-        closeOnClickOutside = true,
-        closeOnEscape = true,
-        openDelay = 0,
-        closeDelay = 0
-    } = options;
-
-    const arrowRef = useRef<SVGSVGElement>(null);
-
-    const [isOpen, setIsOpen] = useUncontrolled({
-        value: opened,
-        defaultValue: defaultOpened,
-        finalValue: false,
-        onChange: onOpenedChange
-    });
-
-    const middleware = useMemo(() => {
-        const middlewareList: Middleware[] = [];
-
-        middlewareList.push(offset(positioning.offset ?? 8));
-
-        if (middlewares.flip) {
-            middlewareList.push(
-                flip(
-                    typeof middlewares.flip === "boolean"
-                        ? undefined
-                        : middlewares.flip
-                )
-            );
-        }
-
-        if (middlewares.shift) {
-            middlewareList.push(
-                shift(
-                    typeof middlewares.shift === "boolean"
-                        ? undefined
-                        : middlewares.shift
-                )
-            );
-        }
-
-        if (middlewares.inline) {
-            middlewareList.push(
-                inline(
-                    typeof middlewares.inline === "boolean"
-                        ? undefined
-                        : middlewares.inline
-                )
-            );
-        }
-
-        if (arrowRef.current && showArrow) {
-            middlewareList.push(
-                arrow({
-                    element: arrowRef.current
-                })
-            );
-        }
-
-        return middlewareList;
-    }, [positioning.offset, middlewares, showArrow, arrowRef]);
-
-    const floating = useFloating({
-        placement: positioning.placement,
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        middleware: middleware,
-        whileElementsMounted: autoUpdate,
-        strategy: "fixed"
-    });
-
-    const click = useClick(floating.context, {
-        enabled: trigger === "click" && !disabled
-    });
-
-    const hover = useHover(floating.context, {
-        enabled: trigger === "hover" && !disabled,
-        handleClose: safePolygon(),
-        delay: {
-            open: openDelay,
-            close: closeDelay
-        }
-    });
-
-    const focus = useFocus(floating.context, {
-        enabled: trigger === "focus" && !disabled
-    });
-
-    const dismiss = useDismiss(floating.context, {
-        outsidePress: closeOnClickOutside,
-        escapeKey: closeOnEscape
-    });
-
-    const role = useRole(floating.context, {
-        role: "dialog"
-    });
-
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        click,
-        hover,
-        focus,
-        dismiss,
-        role
-    ]);
-
-    const open = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(true);
-        }
-    }, [setIsOpen, disabled]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-        }
-    }, [setIsOpen, isOpen, disabled]);
-
-    return {
-        opened: isOpen,
-        open,
-        close,
-        toggle,
-        context: floating.context,
-        refs: {
-            setReference: floating.refs.setReference,
-            setFloating: floating.refs.setFloating,
-            reference: floating.refs
-                .reference as React.MutableRefObject<HTMLElement | null>,
-            floating: floating.refs
-                .floating as React.MutableRefObject<HTMLElement | null>
-        },
-        floatingStyles: floating.floatingStyles,
-        getReferenceProps,
-        getFloatingProps,
-        placement: floating.placement,
-        arrowRef
-    };
-}

package/src/components/portal/index.ts

@@ -1,2 +0,0 @@
-export { default as Portal } from "./portal";
-export type { PortalProps } from "./portal.types";

package/src/components/portal/portal.test.tsx

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../vitest";
-import Portal from "./portal";
-
-describe("@refraktor/core/Portal", () => {
-    it("renders into document.body by default", async () => {
-        await render(
-            <div data-testid="root">
-                <Portal>
-                    <div data-testid="content">Portal content</div>
-                </Portal>
-            </div>
-        );
-
-        const root = screen.getByTestId("root");
-        const content = await screen.findByTestId("content");
-
-        expect(document.body).toContainElement(content);
-        expect(root).not.toContainElement(content);
-    });
-
-    it("renders into custom target", async () => {
-        const target = document.createElement("div");
-        target.id = "portal-target";
-        document.body.appendChild(target);
-
-        await render(
-            <Portal target="#portal-target">
-                <div data-testid="content">Targeted content</div>
-            </Portal>
-        );
-
-        const content = await screen.findByTestId("content");
-
-        expect(target).toContainElement(content);
-
-        target.remove();
-    });
-});

package/src/components/portal/portal.tsx

@@ -1,104 +0,0 @@
-import { createPortal } from "react-dom";
-import { createComponentConfig, factory, useProps } from "../../utils";
-import { PortalFactoryPayload, PortalProps } from "./portal.types";
-import { ComponentPropsWithoutRef, useEffect, useRef, useState } from "react";
-
-function createPortalNode(props: ComponentPropsWithoutRef<"div">) {
-    const node = document.createElement("div");
-    node.setAttribute("data-portal", "true");
-    typeof props.className === "string" &&
-        node.classList.add(...props.className.split(" ").filter(Boolean));
-    typeof props.style === "object" && Object.assign(node.style, props.style);
-    typeof props.id === "string" && node.setAttribute("id", props.id);
-    return node;
-}
-
-function getTargetNode({
-    target,
-    reuseTargetNode,
-    ...others
-}: Omit<PortalProps, "children">): HTMLElement {
-    if (target) {
-        if (typeof target === "string") {
-            return (
-                document.querySelector<HTMLElement>(target) ||
-                createPortalNode(others)
-            );
-        }
-
-        return target;
-    }
-
-    if (reuseTargetNode) {
-        const existingNode = document.querySelector<HTMLElement>(
-            "[data-velra-shared-portal-node]"
-        );
-
-        if (existingNode) {
-            return existingNode;
-        }
-
-        const node = createPortalNode(others);
-        node.setAttribute("data-velra-shared-portal-node", "true");
-        document.body.appendChild(node);
-        return node;
-    }
-
-    return createPortalNode(others);
-}
-
-const Portal = factory<PortalFactoryPayload>((_props, ref) => {
-    const { children, target, reuseTargetNode, ...others } = useProps(
-        "Portal",
-        null,
-        _props
-    );
-
-    const [mounted, setMounted] = useState(false);
-    const nodeRef = useRef<HTMLElement | null>(null);
-
-    useEffect(() => {
-        setMounted(true);
-        nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others });
-
-        if (ref) {
-            if (typeof ref === "function") {
-                ref(nodeRef.current as HTMLDivElement);
-            } else {
-                ref.current = nodeRef.current as HTMLDivElement;
-            }
-        }
-
-        if (target && nodeRef.current) {
-            const computedStyle = window.getComputedStyle(nodeRef.current);
-            if (computedStyle.position === "static") {
-                nodeRef.current.style.position = "relative";
-            }
-        }
-
-        if (!target && !reuseTargetNode && nodeRef.current) {
-            document.body.appendChild(nodeRef.current);
-        }
-
-        return () => {
-            if (!target && !reuseTargetNode && nodeRef.current) {
-                try {
-                    if (document.body.contains(nodeRef.current)) {
-                        document.body.removeChild(nodeRef.current);
-                    }
-                } catch (error) {}
-            }
-        };
-    }, [target, reuseTargetNode]);
-
-    if (!mounted || !nodeRef.current) {
-        return null;
-    }
-
-    return createPortal(<>{children}</>, nodeRef.current);
-});
-
-Portal.displayName = "@refraktor/core/Portal";
-Portal.configure = createComponentConfig<PortalProps>();
-
-export default Portal;

package/src/components/portal/portal.types.ts

@@ -1,31 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-
-export interface BasePortalProps extends ComponentPropsWithoutRef<"div"> {
-    /** Target element to render the portal inside. Can be an HTMLElement or a CSS selector string. */
-    target?: HTMLElement | string;
-
-    /** Whether to reuse a shared portal node for all portals with this option enabled. @default false */
-    reuseTargetNode?: boolean;
-}
-
-export interface PortalProps extends BasePortalProps {
-    /** The content to render inside the portal */
-    children: ReactNode;
-}
-
-export type PortalClassNames = {
-    root?: string;
-};
-
-export interface PortalFactoryPayload extends FactoryPayload {
-    props: PortalProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<PortalProps>>;
-    };
-}

package/src/components/progress/index.ts

@@ -1,2 +0,0 @@
-export { default as Progress } from "./progress";
-export type { ProgressProps, ProgressClassNames } from "./progress.types";

package/src/components/progress/progress.styles.ts

@@ -1,25 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-type ProgressSizeStyles = {
-    track: string;
-};
-
-const sizes: Record<RefraktorSize, ProgressSizeStyles> = {
-    xs: {
-        track: "h-1"
-    },
-    sm: {
-        track: "h-1.5"
-    },
-    md: {
-        track: "h-2"
-    },
-    lg: {
-        track: "h-2.5"
-    },
-    xl: {
-        track: "h-3"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];