@refraktor/core 0.0.2 → 0.0.3

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(" ");

package/src/components/table/table.test.tsx

@@ -0,0 +1,145 @@
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import Table from "./table";
+
+describe("@refraktor/core/Table", () => {
+    it("renders semantic table structure with subcomponents", async () => {
+        await render(
+            <Table>
+                <Table.Caption>Users</Table.Caption>
+                <Table.Head>
+                    <Table.Row>
+                        <Table.HeaderCell>Name</Table.HeaderCell>
+                        <Table.HeaderCell>Email</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Head>
+
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Ada</Table.Cell>
+                        <Table.Cell>ada@example.com</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+        );
+
+        expect(screen.getByRole("table")).toBeInTheDocument();
+        expect(screen.getByText("Users")).toBeInTheDocument();
+        expect(
+            screen.getByRole("columnheader", { name: "Name" })
+        ).toBeInTheDocument();
+        expect(screen.getByRole("cell", { name: "Ada" })).toBeInTheDocument();
+    });
+
+    it("applies body behavior styles", async () => {
+        const { container } = await render(
+            <Table striped highlightOnHover withRowBorders>
+                <Table.Head>
+                    <Table.Row>
+                        <Table.HeaderCell>Name</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Head>
+
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Ada</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+        );
+
+        const body = container.querySelector("tbody") as HTMLTableSectionElement;
+
+        expect(body.className).toContain("nth-child(odd)");
+        expect(body.className).toContain("[&_tr:hover]:bg-[var(--refraktor-bg-hover)]");
+        expect(body.className).toContain("[&_tr]:border-b");
+    });
+
+    it("applies column borders and size styles", async () => {
+        await render(
+            <Table withColumnBorders size="xl">
+                <Table.Head>
+                    <Table.Row>
+                        <Table.HeaderCell>Name</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Head>
+
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Ada</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+        );
+
+        const headerCell = screen.getByRole("columnheader", { name: "Name" });
+        const cell = screen.getByRole("cell", { name: "Ada" });
+
+        expect(headerCell.className).toContain("border-r");
+        expect(cell.className).toContain("border-r");
+        expect(cell.className).toContain("px-4");
+    });
+
+    it("supports root and slot class names", async () => {
+        const { container } = await render(
+            <Table
+                className="custom-root"
+                classNames={{
+                    head: "custom-head",
+                    body: "custom-body",
+                    row: "custom-row",
+                    headerCell: "custom-header-cell",
+                    cell: "custom-cell",
+                    caption: "custom-caption"
+                }}
+            >
+                <Table.Caption>Users</Table.Caption>
+                <Table.Head>
+                    <Table.Row>
+                        <Table.HeaderCell>Name</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Head>
+
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Ada</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+        );
+
+        const root = container.firstElementChild as HTMLTableElement;
+        const head = container.querySelector("thead") as HTMLTableSectionElement;
+        const body = container.querySelector("tbody") as HTMLTableSectionElement;
+        const row = screen.getAllByRole("row")[0];
+        const headerCell = screen.getByRole("columnheader", { name: "Name" });
+        const cell = screen.getByRole("cell", { name: "Ada" });
+        const caption = screen.getByText("Users");
+
+        expect(root).toHaveClass("custom-root");
+        expect(head).toHaveClass("custom-head");
+        expect(body).toHaveClass("custom-body");
+        expect(row).toHaveClass("custom-row");
+        expect(headerCell).toHaveClass("custom-header-cell");
+        expect(cell).toHaveClass("custom-cell");
+        expect(caption).toHaveClass("custom-caption");
+    });
+
+    it("forwards ref to table root", async () => {
+        const ref = createRef<HTMLTableElement>();
+
+        await render(
+            <Table ref={ref}>
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Ada</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+        );
+
+        expect(ref.current).toBeInstanceOf(HTMLTableElement);
+        expect(ref.current?.tagName).toBe("TABLE");
+    });
+});

package/src/components/table/table.tsx

@@ -0,0 +1,91 @@
+import { useId } from "@refraktor/utils";
+import { useCallback } from "react";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { TableBody } from "./table-body";
+import { TableCaption } from "./table-caption";
+import { TableCell } from "./table-cell";
+import { TableProvider } from "./table.context";
+import { TableHead } from "./table-head";
+import { TableHeaderCell } from "./table-header-cell";
+import { TableRow } from "./table-row";
+import { TableClassNames, TableFactoryPayload, TableProps } from "./table.types";
+
+const defaultProps = {
+    size: "md",
+    radius: "default",
+    striped: false,
+    highlightOnHover: false,
+    withRowBorders: true,
+    withColumnBorders: false
+} satisfies Partial<TableProps>;
+
+const Table = factory<TableFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        children,
+        size,
+        radius,
+        striped,
+        highlightOnHover,
+        withRowBorders,
+        withColumnBorders,
+        className,
+        classNames,
+        ...props
+    } = useProps("Table", defaultProps, _props);
+    const classes = useClassNames("Table", classNames);
+    const _id = useId(id);
+
+    const getStyles = useCallback(
+        (part: keyof TableClassNames) => classes[part],
+        [classes]
+    );
+
+    return (
+        <TableProvider
+            value={{
+                size,
+                radius,
+                striped,
+                highlightOnHover,
+                withRowBorders,
+                withColumnBorders,
+                getStyles
+            }}
+        >
+            <table
+                ref={ref}
+                id={_id}
+                className={cx(
+                    "w-full border-collapse text-left text-[var(--refraktor-text)]",
+                    getRadius(radius),
+                    classes.root,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </table>
+        </TableProvider>
+    );
+});
+
+Table.displayName = "@refraktor/core/Table";
+Table.configure = createComponentConfig<TableProps>();
+Table.classNames = createClassNamesConfig<TableClassNames>();
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+Table.Caption = TableCaption;
+
+export default Table;