@refraktor/core 0.0.2 → 0.0.4

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

@@ -1,170 +1,170 @@
-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
-    };
-}
+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/table/index.ts

@@ -0,0 +1,24 @@
+export { default as Table } from "./table";
+export { TableHead } from "./table-head";
+export { TableBody } from "./table-body";
+export { TableRow } from "./table-row";
+export { TableHeaderCell } from "./table-header-cell";
+export { TableCell } from "./table-cell";
+export { TableCaption } from "./table-caption";
+export type {
+    TableProps,
+    TableHeadProps,
+    TableBodyProps,
+    TableRowProps,
+    TableHeaderCellProps,
+    TableCellProps,
+    TableCaptionProps,
+    TableClassNames,
+    TableFactoryPayload,
+    TableHeadFactoryPayload,
+    TableBodyFactoryPayload,
+    TableRowFactoryPayload,
+    TableHeaderCellFactoryPayload,
+    TableCellFactoryPayload,
+    TableCaptionFactoryPayload
+} from "./table.types";

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

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

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

@@ -0,0 +1,37 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getBodyStyles } from "../table.styles";
+import { TableBodyFactoryPayload } from "../table.types";
+
+const TableBody = factory<TableBodyFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const {
+            striped,
+            highlightOnHover,
+            withRowBorders,
+            getStyles
+        } = useTableContext();
+
+        const bodyStyles = getBodyStyles({
+            striped,
+            highlightOnHover,
+            withRowBorders
+        });
+
+        return (
+            <tbody
+                ref={ref}
+                className={cx("align-top", bodyStyles, getStyles("body"), className)}
+                {...props}
+            >
+                {children}
+            </tbody>
+        );
+    }
+);
+
+TableBody.displayName = "@refraktor/core/Table.Body";
+
+export default TableBody;

package/src/components/table/table-caption/index.ts

@@ -0,0 +1 @@
+export { default as TableCaption } from "./table-caption";

package/src/components/table/table-caption/table-caption.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getSize } from "../table.styles";
+import { TableCaptionFactoryPayload } from "../table.types";
+
+const TableCaption = factory<TableCaptionFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { size, getStyles } = useTableContext();
+        const sizeStyles = getSize(size);
+
+        return (
+            <caption
+                ref={ref}
+                className={cx(
+                    "caption-bottom mt-2 text-[var(--refraktor-text-secondary)]",
+                    sizeStyles.caption,
+                    getStyles("caption"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </caption>
+        );
+    }
+);
+
+TableCaption.displayName = "@refraktor/core/Table.Caption";
+
+export default TableCaption;

package/src/components/table/table-cell/index.ts

@@ -0,0 +1 @@
+export { default as TableCell } from "./table-cell";

package/src/components/table/table-cell/table-cell.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getColumnBorder, getSize } from "../table.styles";
+import { TableCellFactoryPayload } from "../table.types";
+
+const TableCell = factory<TableCellFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { size, withColumnBorders, getStyles } = useTableContext();
+        const sizeStyles = getSize(size);
+
+        return (
+            <td
+                ref={ref}
+                className={cx(
+                    "align-middle text-[var(--refraktor-text)]",
+                    sizeStyles.cell,
+                    getColumnBorder(withColumnBorders),
+                    getStyles("cell"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </td>
+        );
+    }
+);
+
+TableCell.displayName = "@refraktor/core/Table.Cell";
+
+export default TableCell;

package/src/components/table/table-head/index.ts

@@ -0,0 +1 @@
+export { default as TableHead } from "./table-head";

package/src/components/table/table-head/table-head.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { TableHeadFactoryPayload } from "../table.types";
+
+const TableHead = factory<TableHeadFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useTableContext();
+
+        return (
+            <thead
+                ref={ref}
+                className={cx(
+                    "border-b border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]",
+                    getStyles("head"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </thead>
+        );
+    }
+);
+
+TableHead.displayName = "@refraktor/core/Table.Head";
+
+export default TableHead;

package/src/components/table/table-header-cell/index.ts

@@ -0,0 +1 @@
+export { default as TableHeaderCell } from "./table-header-cell";

package/src/components/table/table-header-cell/table-header-cell.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getColumnBorder, getSize } from "../table.styles";
+import { TableHeaderCellFactoryPayload } from "../table.types";
+
+const TableHeaderCell = factory<TableHeaderCellFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { size, withColumnBorders, getStyles } = useTableContext();
+        const sizeStyles = getSize(size);
+
+        return (
+            <th
+                ref={ref}
+                className={cx(
+                    "text-left font-medium align-middle text-[var(--refraktor-text-secondary)]",
+                    sizeStyles.headerCell,
+                    getColumnBorder(withColumnBorders),
+                    getStyles("headerCell"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </th>
+        );
+    }
+);
+
+TableHeaderCell.displayName = "@refraktor/core/Table.HeaderCell";
+
+export default TableHeaderCell;

package/src/components/table/table-row/index.ts

@@ -0,0 +1 @@
+export { default as TableRow } from "./table-row";

package/src/components/table/table-row/table-row.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { TableRowFactoryPayload } from "../table.types";
+
+const TableRow = factory<TableRowFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { highlightOnHover, getStyles } = useTableContext();
+
+        return (
+            <tr
+                ref={ref}
+                className={cx(
+                    "align-middle",
+                    highlightOnHover && "transition-colors",
+                    getStyles("row"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </tr>
+        );
+    }
+);
+
+TableRow.displayName = "@refraktor/core/Table.Row";
+
+export default TableRow;

package/src/components/table/table.context.ts

@@ -0,0 +1,18 @@
+import { createSafeContext } from "@refraktor/utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TableClassNames } from "./table.types";
+
+export interface TableContextValue {
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    striped: boolean;
+    highlightOnHover: boolean;
+    withRowBorders: boolean;
+    withColumnBorders: boolean;
+    getStyles: (part: keyof TableClassNames) => string | undefined;
+}
+
+export const [TableProvider, useTableContext] =
+    createSafeContext<TableContextValue>(
+        "Table component was not found in tree. Make sure Table subcomponents are wrapped with Table."
+    );

package/src/components/table/table.styles.ts

@@ -0,0 +1,62 @@
+import { RefraktorSize } from "../../theme";
+
+type TableSizeStyles = {
+    headerCell: string;
+    cell: string;
+    caption: string;
+};
+
+type TableBodyStyleOptions = {
+    striped: boolean;
+    highlightOnHover: boolean;
+    withRowBorders: boolean;
+};
+
+const sizes: Record<RefraktorSize, TableSizeStyles> = {
+    xs: {
+        headerCell: "px-2 py-1.5 text-xs",
+        cell: "px-2 py-1.5 text-xs",
+        caption: "text-xs"
+    },
+    sm: {
+        headerCell: "px-2.5 py-2 text-xs",
+        cell: "px-2.5 py-2 text-sm",
+        caption: "text-xs"
+    },
+    md: {
+        headerCell: "px-3 py-2.5 text-sm",
+        cell: "px-3 py-2.5 text-sm",
+        caption: "text-sm"
+    },
+    lg: {
+        headerCell: "px-3.5 py-3 text-base",
+        cell: "px-3.5 py-3 text-base",
+        caption: "text-base"
+    },
+    xl: {
+        headerCell: "px-4 py-3.5 text-lg",
+        cell: "px-4 py-3.5 text-lg",
+        caption: "text-lg"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];
+
+export const getColumnBorder = (withColumnBorders = false) =>
+    withColumnBorders
+        ? "border-r border-[var(--refraktor-border)] last:border-r-0"
+        : "";
+
+export const getBodyStyles = ({
+    striped,
+    highlightOnHover,
+    withRowBorders
+}: TableBodyStyleOptions) =>
+    [
+        striped && "[&_tr:nth-child(odd)]:bg-[var(--refraktor-bg-subtle)]",
+        highlightOnHover && "[&_tr:hover]:bg-[var(--refraktor-bg-hover)]",
+        withRowBorders &&
+            "[&_tr]:border-b [&_tr]:border-[var(--refraktor-border)] [&_tr:last-child]:border-b-0"
+    ]
+        .filter(Boolean)
+        .join(" ");