@refraktor/core 0.0.3 → 0.0.5

package/src/components/select/select.test.tsx

@@ -1,190 +0,0 @@
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent, waitFor } from "../../vitest";
-import Select from "./select";
-
-describe("@refraktor/core/Select", () => {
-    const transitionProps = {
-        duration: 0,
-        immediate: true
-    } as const;
-
-    it("supports built-in data mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select
-                placeholder="Pick framework"
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" }
-                ]}
-            />
-        );
-
-        const trigger = screen.getByRole("combobox");
-        expect(trigger).toHaveAttribute("placeholder", "Pick framework");
-
-        await user.click(trigger);
-        await user.click(screen.getByRole("option", { name: "React" }));
-
-        expect(trigger).toHaveValue("React");
-
-        await waitFor(() => {
-            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-        });
-    });
-
-    it("renders defaultValue label in trigger before opening", async () => {
-        await render(
-            <Select
-                defaultValue="apple"
-                data={[
-                    { value: "apple", label: "Apple" },
-                    { value: "orange", label: "Orange" }
-                ]}
-            />
-        );
-
-        expect(screen.getByRole("combobox")).toHaveValue("Apple");
-    });
-
-    it("renders searchable input inside dropdown", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select
-                searchable
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" },
-                    { value: "solid", label: "Solid" }
-                ]}
-            />
-        );
-
-        await user.click(screen.getByRole("combobox"));
-
-        const searchInput = screen.getByPlaceholderText("Search...");
-        expect(searchInput).toBeInTheDocument();
-
-        await user.type(searchInput, "vu");
-
-        expect(screen.getByRole("option", { name: "Vue" })).toBeInTheDocument();
-        expect(
-            screen.queryByRole("option", { name: "React" })
-        ).not.toBeInTheDocument();
-
-        await user.clear(searchInput);
-        await user.type(searchInput, "unknown");
-
-        expect(screen.getByText("No options")).toBeInTheDocument();
-    });
-
-    it("supports compound mode with groups", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select.Root transitionProps={transitionProps}>
-                <Select.Trigger />
-
-                <Select.Dropdown>
-                    <Select.Group label="Frontend">
-                        <Select.Item value="react">React</Select.Item>
-                    </Select.Group>
-
-                    <Select.Group label="Backend">
-                        <Select.Item value="node">Node.js</Select.Item>
-                    </Select.Group>
-                </Select.Dropdown>
-            </Select.Root>
-        );
-
-        const trigger = screen.getByRole("combobox");
-
-        await user.click(trigger);
-        expect(screen.getByText("Frontend")).toBeInTheDocument();
-        expect(screen.getByText("Backend")).toBeInTheDocument();
-
-        await user.click(screen.getByRole("option", { name: "Node.js" }));
-        expect(trigger).toHaveValue("Node.js");
-    });
-
-    it("supports keyboard selection", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" }
-                ]}
-            />
-        );
-
-        const trigger = screen.getByRole("combobox");
-        trigger.focus();
-
-        await user.keyboard("{ArrowDown}");
-        await user.keyboard("{ArrowDown}");
-        await user.keyboard("{Enter}");
-
-        expect(trigger).toHaveValue("Vue");
-    });
-
-    it("supports controlled mode", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        function Demo() {
-            const [value, setValue] = useState<string | null>("react");
-
-            return (
-                <Select
-                    value={value}
-                    onChange={(nextValue) => {
-                        onChange(nextValue);
-                        setValue(nextValue);
-                    }}
-                    transitionProps={transitionProps}
-                    data={[
-                        { value: "react", label: "React" },
-                        { value: "vue", label: "Vue" }
-                    ]}
-                />
-            );
-        }
-
-        await render(<Demo />);
-
-        await user.click(screen.getByRole("combobox"));
-        await user.click(screen.getByRole("option", { name: "Vue" }));
-
-        expect(onChange).toHaveBeenCalledWith("vue");
-        expect(screen.getByRole("combobox")).toHaveValue("Vue");
-    });
-
-    it("supports input wrapper props", async () => {
-        await render(
-            <Select
-                label="Framework"
-                description="Pick one option"
-                error="Selection is required"
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" }
-                ]}
-            />
-        );
-
-        const trigger = screen.getByLabelText("Framework");
-
-        expect(trigger).toHaveAttribute("aria-invalid", "true");
-        expect(screen.getByText("Pick one option")).toBeInTheDocument();
-        expect(screen.getByText("Selection is required")).toBeInTheDocument();
-    });
-});

package/src/components/select/select.tsx

@@ -1,82 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory
-} from "../../utils";
-import { SelectDropdown } from "./select-dropdown";
-import { SelectGroup } from "./select-group";
-import { SelectItem } from "./select-item";
-import { SelectRoot } from "./select-root";
-import { SelectTrigger } from "./select-trigger";
-import type {
-    SelectClassNames,
-    SelectData,
-    SelectFactoryPayload,
-    SelectGroupData,
-    SelectProps
-} from "./select.types";
-
-function isGroupData(item: SelectData): item is SelectGroupData {
-    return "items" in item;
-}
-
-const Select = factory<SelectFactoryPayload>((_props, ref) => {
-    const { data, children, ...props } = _props;
-
-    if (children !== undefined && children !== null) {
-        return (
-            <SelectRoot ref={ref} {...props}>
-                {children}
-            </SelectRoot>
-        );
-    }
-
-    return (
-        <SelectRoot ref={ref} {...props}>
-            <SelectTrigger />
-
-            <SelectDropdown>
-                {(data ?? []).map((entry, index) => {
-                    if (isGroupData(entry)) {
-                        return (
-                            <SelectGroup key={`group-${index}`} label={entry.label}>
-                                {entry.items.map((item) => (
-                                    <SelectItem
-                                        key={item.value}
-                                        value={item.value}
-                                        disabled={item.disabled}
-                                        textValue={item.textValue}
-                                    >
-                                        {item.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectGroup>
-                        );
-                    }
-
-                    return (
-                        <SelectItem
-                            key={entry.value}
-                            value={entry.value}
-                            disabled={entry.disabled}
-                            textValue={entry.textValue}
-                        >
-                            {entry.label}
-                        </SelectItem>
-                    );
-                })}
-            </SelectDropdown>
-        </SelectRoot>
-    );
-});
-
-Select.displayName = "@refraktor/core/Select";
-Select.configure = createComponentConfig<SelectProps>();
-Select.classNames = createClassNamesConfig<SelectClassNames>();
-Select.Root = SelectRoot;
-Select.Trigger = SelectTrigger;
-Select.Dropdown = SelectDropdown;
-Select.Group = SelectGroup;
-Select.Item = SelectItem;
-
-export default Select;

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

@@ -1,170 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import {
-    autoUpdate,
-    flip,
-    FloatingContext,
-    inline,
-    Middleware,
-    offset,
-    Placement,
-    shift,
-    useClick,
-    useDismiss,
-    useFloating,
-    useInteractions
-} from "@floating-ui/react";
-import { useCallback, useMemo } from "react";
-import type { SelectMiddlewares, SelectPositioning } from "./select.types";
-
-interface UseSelectProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    positioning?: SelectPositioning;
-    middlewares?: SelectMiddlewares;
-    disabled?: boolean;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-}
-
-export interface UseSelectReturn {
-    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>;
-    placement: Placement;
-}
-
-export function useSelect(options: UseSelectProps = {}): UseSelectReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning = {
-            placement: "bottom-start",
-            offset: 4
-        },
-        middlewares = { flip: true, shift: true },
-        disabled = false,
-        closeOnClickOutside = true,
-        closeOnEscape = true
-    } = options;
-
-    const [isOpen, setIsOpen] = useUncontrolled({
-        value: opened,
-        defaultValue: defaultOpened,
-        finalValue: false,
-        onChange: onOpenedChange
-    });
-
-    const middleware = useMemo(() => {
-        const middlewareList: Middleware[] = [];
-
-        middlewareList.push(offset(positioning.offset ?? 4));
-
-        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
-                )
-            );
-        }
-
-        return middlewareList;
-    }, [positioning.offset, middlewares]);
-
-    const floating = useFloating({
-        placement: positioning.placement,
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        middleware,
-        whileElementsMounted: autoUpdate,
-        strategy: "fixed"
-    });
-
-    const click = useClick(floating.context, {
-        enabled: !disabled
-    });
-
-    const dismiss = useDismiss(floating.context, {
-        outsidePress: closeOnClickOutside,
-        escapeKey: closeOnEscape
-    });
-
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        click,
-        dismiss
-    ]);
-
-    const open = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(true);
-        }
-    }, [disabled, setIsOpen]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-        }
-    }, [disabled, isOpen, setIsOpen]);
-
-    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
-    };
-}

package/src/components/slider/index.ts

@@ -1,7 +0,0 @@
-export { default as Slider } from "./slider";
-export type {
-    SliderProps,
-    SliderClassNames,
-    SliderMark,
-    SliderFactoryPayload
-} from "./slider.types";

package/src/components/slider/slider.styles.ts

@@ -1,37 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-type SliderSizeStyles = {
-    track: string;
-    thumb: string;
-    label: string;
-};
-
-const sizes: Record<RefraktorSize, SliderSizeStyles> = {
-    xs: {
-        track: "h-1",
-        thumb: "w-3 h-3",
-        label: "text-[8px] px-1 py-0.5"
-    },
-    sm: {
-        track: "h-1.5",
-        thumb: "w-3.5 h-3.5",
-        label: "text-[10px] px-1.5 py-0.5"
-    },
-    md: {
-        track: "h-2",
-        thumb: "w-4 h-4",
-        label: "text-xs px-2 py-1"
-    },
-    lg: {
-        track: "h-2.5",
-        thumb: "w-5 h-5",
-        label: "text-sm px-2.5 py-1"
-    },
-    xl: {
-        track: "h-3",
-        thumb: "w-6 h-6",
-        label: "text-base px-3 py-1.5"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];