DataTable component

Signed-off-by: Jonathan <contact@grafikart.fr>

packages/ui/src/Atoms/Card/Card.tsx

@@ -1,10 +1,11 @@
-import type { PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
 import { tv } from "tailwind-variants";
 import { Slot } from "../Slot";
 
 type Props = PropsWithChildren<{
     padded?: boolean;
     className?: string;
+    style?: CSSProperties;
     asChild?: boolean;
 }>;
 
@@ -17,10 +18,16 @@ const card = tv({
     },
 });
 
-export function Card({ padded = false, children, className, asChild }: Props) {
+export function Card({
+    padded = false,
+    children,
+    className,
+    asChild,
+    style,
+}: Props) {
     const Component = asChild ? Slot : "div";
     return (
-        <Component className={card({ padded, className })}>
+        <Component style={style} className={card({ padded, className })}>
             {children}
         </Component>
     );

packages/ui/src/Atoms/DataTable/DataTable.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DataTable, CellHead, Cell } from "./DataTable.tsx";
+
+export default {
+    title: "Atoms/DataTable",
+    component: DataTable,
+    argTypes: {},
+} satisfies Meta<typeof DataTable>;
+
+type Story = StoryObj<typeof DataTable>;
+
+export const Default: Story = {
+    render: () => {
+        return (
+            <DataTable columns={3}>
+                <CellHead>Header 1</CellHead>
+                <CellHead>Header 2</CellHead>
+                <CellHead>Header 3</CellHead>
+                <Cell>Row 1, Cell 1</Cell>
+                <Cell>Row 1, Cell 2</Cell>
+                <Cell>Row 1, Cell 3</Cell>
+                <Cell>Row 2, Cell 1</Cell>
+                <Cell>Row 2, Cell 2</Cell>
+                <Cell>Row 2, Cell 3</Cell>
+            </DataTable>
+        );
+    },
+};

packages/ui/src/Atoms/DataTable/DataTable.tsx

@@ -0,0 +1,70 @@
+import { type ComponentPropsWithRef, type PropsWithChildren } from "react";
+import { Card } from "../Card/Card";
+import clsx from "clsx";
+import { type AsChildProps, Slot } from "../Slot.tsx";
+
+export function DataTable({
+    children,
+    className,
+    columns,
+}: PropsWithChildren<{ className?: string; columns: number | string[] }>) {
+    const style = () => {
+        if (typeof columns === "number") {
+            return {
+                gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            };
+        }
+        return {
+            gridTemplateColumns: columns
+                .map((col) => `minmax(0, ${col})`)
+                .join(" "),
+        };
+    };
+
+    return (
+        <div className="overflow-auto relative w-full p-1 -m-1">
+            <Card
+                className={clsx(className, "w-full text-left grid")}
+                style={style()}
+            >
+                {children}
+            </Card>
+        </div>
+    );
+}
+
+export function CellHead({
+    children,
+    className,
+    ...props
+}: ComponentPropsWithRef<"div">) {
+    return (
+        <div
+            {...props}
+            className={clsx(
+                "text-xs text-txt-tertiary font-semibold border-border-low border-b",
+                "px-6 whitespace-nowrap py-3",
+                className,
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+export function Cell({
+    asChild,
+    ...props
+}: AsChildProps<ComponentPropsWithRef<"div">>) {
+    const Component = asChild ? Slot : "div";
+    return (
+        <Component
+            data-cell
+            {...props}
+            className={clsx(
+                "py-3 px-6 text-sm text-txt-primary bg-tertiary border-t border-border-low flex flex-col justify-center",
+                props.className,
+            )}
+        />
+    );
+}

packages/ui/src/Atoms/Select/Select.tsx

@@ -13,16 +13,21 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Input, input } from "../Input/Input.tsx";
 import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.tsx";
 import { tv } from "tailwind-variants";
-import { Children, type ComponentProps, type PropsWithChildren } from "react";
+import {
+    Children,
+    type ComponentProps,
+    type PropsWithChildren,
+    type ReactNode,
+} from "react";
 import { IconMagnifyingGlass } from "../Icons/IconMagnifyingGlass.tsx";
 import { Spinner } from "../Spinner/Spinner.tsx";
 
 type Props<T> = PropsWithChildren<
     {
         id?: string;
-        placeholder?: string;
+        placeholder?: ReactNode;
         onValueChange?: (s: NonNullable<T>) => void;
-        variant?: "default" | "editor" | "dashed";
+        variant?: "default" | "editor" | "dashed" | "ghost";
         invalid?: boolean;
         disabled?: boolean;
         className?: string;
@@ -71,6 +76,10 @@ const select = tv({
             default: {
                 trigger: input({ class: "w-full gap-4 " }),
             },
+            ghost: {
+                trigger: "w-full px-3",
+                content: "bg-level-2",
+            },
         },
     },
     compoundVariants: [
@@ -96,6 +105,9 @@ export function Select<T>({
     onSearch,
     searchPlaceholder,
     loading,
+    open,
+    defaultOpen = false,
+    onOpenChange,
     ...props
 }: Props<T>) {
     const { trigger, content, icon } = select({
@@ -103,7 +115,13 @@ export function Select<T>({
     });
 
     return (
-        <Root onValueChange={onValueChange} value={value as string}>
+        <Root
+            defaultOpen={defaultOpen}
+            open={open}
+            onOpenChange={onOpenChange}
+            onValueChange={onValueChange}
+            value={value as string}
+        >
             <Trigger
                 {...props}
                 className={trigger({

packages/ui/src/Atoms/Table/Table.tsx

@@ -6,6 +6,7 @@ import {
     type PropsWithChildren,
     type ReactNode,
     type ThHTMLAttributes,
+    type ComponentPropsWithRef,
 } from "react";
 import { Card } from "../Card/Card";
 import { Link } from "react-router";

packages/ui/src/Molecules/Table/EditableCell.tsx

@@ -0,0 +1,102 @@
+import {
+    type FocusEventHandler,
+    type KeyboardEventHandler,
+    type ReactNode,
+    useRef,
+    useState,
+} from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Select } from "../../Atoms/Select/Select.tsx";
+import { Spinner } from "../../Atoms/Spinner/Spinner.tsx";
+import { Cell } from "../../Atoms/DataTable/DataTable.tsx";
+
+type Props = {
+    type: "text" | "select";
+    onValueChange: (value: string) => void;
+    defaultValue?: ReactNode;
+    children?: ReactNode;
+    options?: ReactNode;
+    isLoading?: boolean;
+};
+
+export function EditableCell({
+    options,
+    children,
+    isLoading,
+    onValueChange,
+    defaultValue,
+    type,
+}: Props) {
+    const td = useRef<HTMLTableCellElement>(null);
+    const [height, setHeight] = useState(0);
+    const [padding, setPadding] = useState("12px");
+
+    const onOpenChange = (open: boolean) => {
+        if (open) {
+            setOpen(open);
+            setHeight(td.current?.offsetHeight ?? 0);
+            setPadding(getComputedStyle(td.current!).paddingLeft);
+        }
+    };
+
+    const onInputBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+        setOpen(false);
+        onValueChange(e.target.value);
+    };
+
+    const blurOnTab: KeyboardEventHandler<HTMLInputElement> = (e) => {
+        if (e.key === "Tab") {
+            setOpen(false);
+            onValueChange(e.currentTarget.value);
+        }
+    };
+
+    const [isOpen, setOpen] = useState(false);
+
+    return (
+        <Popover.Root onOpenChange={onOpenChange} open={isOpen}>
+            <Popover.Trigger asChild>
+                <Cell ref={td} asChild>
+                    <button className="flex flex-row space-between gap-2 w-full items-center justify-start">
+                        {" "}
+                        {children ?? defaultValue}
+                        {isLoading && <Spinner size={12} />}
+                    </button>
+                </Cell>
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content
+                    side="bottom"
+                    align="start"
+                    sideOffset={height * -1}
+                    style={{ height, paddingLeft: padding }}
+                    className="border border-border-low bg-level-2 min-w-[200px] min-h-[57px] flex flex-col justify-center rounded-sm"
+                >
+                    {type === "select" && (
+                        <>
+                            <Select
+                                className="-mx-3"
+                                onValueChange={onValueChange}
+                                onOpenChange={setOpen}
+                                defaultOpen
+                                variant="ghost"
+                                placeholder={children}
+                            >
+                                {options}
+                            </Select>
+                        </>
+                    )}
+                    {type === "text" && (
+                        <input
+                            type="text"
+                            defaultValue={defaultValue?.toString() ?? ""}
+                            className="text-txt-primary text-sm outline-none"
+                            onKeyDown={blurOnTab}
+                            onBlur={onInputBlur}
+                        />
+                    )}
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
+    );
+}

packages/ui/src/index.ts

@@ -38,6 +38,7 @@ export { InfiniteScrollTrigger } from "./Atoms/InfiniteScrollTrigger/InfiniteScr
 export { PriorityLevel } from "./Atoms/PriorityLevel/PriorityLevel.tsx";
 export { TaskStateIcon } from "./Atoms/Icons/TaskStateIcon";
 export { Checkbox } from "./Atoms/Checkbox/Checkbox";
+export { DataTable, Cell, CellHead } from "./Atoms/DataTable/DataTable";
 
 // Molecules
 export {
@@ -71,6 +72,7 @@ export { SentitivityOptions } from "./Molecules/Select/SentitivityOptions";
 export { ImpactOptions } from "./Molecules/Select/ImpactOptions";
 export { DurationPicker } from "./Molecules/DurationPicker/DurationPicker";
 export { FrameworkLogo } from "./Molecules/Badge/FrameworkLogo";
+export { EditableCell } from "./Molecules/Table/EditableCell";
 
 // Hooks
 export { useToast, Toasts } from "./Atoms/Toasts/Toasts";

packages/ui/src/theme.css

@@ -249,6 +249,11 @@ button:focus-visible {
     }
 }
 
+button[data-cell]:focus-visible {
+    box-shadow: none;
+    outline: solid 2px rgba(135, 190, 34, 0.5);
+}
+
 /* Allow interpolation : https://developer.chrome.com/docs/css-ui/animate-to-height-auto */
 :root {
     interpolate-size: allow-keywords;