kmod-cli 1.5.0 → 1.6.0

package/component-templates/components/list-map.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface ListProps<T> {
+  items: T[];
+  keyExtractor: (item: T) => React.Key;
+  renderItem: (item: T, index: number) => React.ReactNode;
+}
+
+export function List<T>({ items, keyExtractor, renderItem }: ListProps<T>) {
+  return (
+    <>
+      {items.map((item, index) => (
+        <ListItem
+          key={keyExtractor(item)}
+          item={item}
+          index={index}
+          renderItem={renderItem}
+        />
+      ))}
+    </>
+  );
+}
+
+interface ListItemProps<T> {
+  item: T;
+  index: number;
+  renderItem: (item: T, index: number) => React.ReactNode;
+}
+
+// Generic memo component
+function _ListItem<T>({ item, index, renderItem }: ListItemProps<T>) {
+  return <>{renderItem(item, index)}</>;
+}
+
+const ListItem = React.memo(_ListItem) as <T>(
+  props: ListItemProps<T>
+) => React.ReactNode;
+
+
+// Example usage of the List component
+// interface User {
+//     id: number;
+//     name: string;
+// }
+
+// const users: User[] = [
+//     { id: 1, name: 'Alice' },
+//     { id: 2, name: 'Bob' },
+//     { id: 3, name: 'Charlie' },
+// ];
+
+// export function UserList() {
+//     return (
+//         <List
+//             items={users}
+//             keyExtractor={(user) => user.id}
+//             renderItem={(user) => <div>{user.name}</div>}
+//         />
+//     );
+// }

package/component-templates/components/table/data-table.tsx

@@ -8,7 +8,6 @@ import {
   useState,
 } from 'react';
 
-// Nếu bạn cần alias cho ITable type, dùng:
 import type { Table as ITable } from '@tanstack/react-table';
 import {
   Cell,
@@ -55,7 +54,7 @@ export type TableClassNames = {
 };
 export type TableHeaderProps<TData> =
   HTMLAttributes<HTMLTableSectionElement> & {
-    handleClick: ({
+    handleClick?: ({
       e,
       table,
     }: {
@@ -64,7 +63,7 @@ export type TableHeaderProps<TData> =
     }) => void;
   };
 export type TableBodyProps<TData> = HTMLAttributes<HTMLTableSectionElement> & {
-  handleClick: ({
+  handleClick?: ({
     e,
     table,
   }: {
@@ -73,7 +72,8 @@ export type TableBodyProps<TData> = HTMLAttributes<HTMLTableSectionElement> & {
   }) => void;
 };
 export type TableHeadProps<TData> = HTMLAttributes<HTMLTableCellElement> & {
-  handleClick: ({
+  classNameCondition?: | (({cell, table}: {cell?: Header<TData, unknown>; table?: ITable<TData>}) => string) | string;
+  handleClick?: ({
     e,
     table,
     cell,
@@ -85,7 +85,8 @@ export type TableHeadProps<TData> = HTMLAttributes<HTMLTableCellElement> & {
 };
 export type TableCellProps<TData, TValue> =
   HTMLAttributes<HTMLTableCellElement> & {
-    handleClick: ({
+    classNameCondition?: | (({cell, table}: {cell?: Cell<TData, unknown>; table?: ITable<TData>}) => string) | string;
+    handleClick?: ({
       e,
       table,
       cell,
@@ -96,7 +97,7 @@ export type TableCellProps<TData, TValue> =
     }) => void;
   };
 export type TableRowHeadProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
-  handleClick: ({
+  handleClick?: ({
     e,
     table,
     row,
@@ -107,7 +108,8 @@ export type TableRowHeadProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
   }) => void;
 };
 export type TableRowBodyProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
-  handleClick: ({
+  classNameCondition?: | (({row, table}: {row?: Row<TData>; table?: ITable<TData>}) => string) | string;
+  handleClick?: ({
     e,
     table,
     row,
@@ -118,7 +120,7 @@ export type TableRowBodyProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
   }) => void;
 };
 export type TableProps<TData> = HTMLAttributes<HTMLTableElement> & {
-  handleClick: ({
+  handleClick?: ({
     e,
     table,
   }: {
@@ -173,6 +175,15 @@ export type DataTableProps<TData, TValue> = {
   // handles?: Handles
 };
 
+export interface UseTablePropsFn<TData, TValue> {
+  table: ITable<TData>;
+  row?: Row<TData>;
+  cell?: Cell<TData, TValue>;
+  header?: Header<TData, TValue>;
+  headerGroup?: HeaderGroup<TData>;
+}
+
+
 export type DataTableToolbarFns<TData> = {
   globalFilter: string;
   setGlobalFilter: (value: string) => void;
@@ -204,7 +215,7 @@ export function DataTable<TData, TValue>({
   useTableProps,
   initialState,
   alternate = "even",
-  alternateColor = "#f5f5f5",
+  alternateColor = "#fbfbfb",
   // handles
 }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
@@ -241,47 +252,74 @@ export function DataTable<TData, TValue>({
   };
 
   const {
-  handleClick: tableHandleClick,
-  onClick: tableOnClick,
-  ...tableDomProps
-} = useTableProps?.tableProps || {};
+    handleClick: tableHandleClick,
+    onClick: tableOnClick,
+    ...tableDomProps
+  } = useTableProps?.tableProps || {};
 
-const {
-  handleClick: headerHandleClick,
-  onClick: headerOnClick,
-  ...headerDomProps
-} = useTableProps?.headerProps || {};
-const {
-  handleClick: rowHeadHandleClick,
-  onClick: rowHeadOnClick,
-  ...rowHeadDomProps
-} = useTableProps?.rowHeadProps || {};
-const {
-  handleClick: bodyHandleClick,
-  onClick: bodyOnClick,
-  ...bodyDomProps
-} = useTableProps?.bodyProps || {};
-const {
-  handleClick: rowBodyHandleClick,
-  onClick: rowBodyOnClick,
-  style: rowBodyStyle,
-  ...rowBodyDomProps
-} = useTableProps?.rowBodyProps || {};
-const {
-  handleClick: cellBodyHandleClick,
-  onClick: cellBodyOnClick,
-  ...cellBodyDomProps
-} = useTableProps?.cellBodyProps || {};
+  const {
+    handleClick: headerHandleClick,
+    onClick: headerOnClick,
+    ...headerDomProps
+  } = useTableProps?.headerProps || {};
+  const {
+    handleClick: rowHeadHandleClick,
+    onClick: rowHeadOnClick,
+    ...rowHeadDomProps
+  } = useTableProps?.rowHeadProps || {};
+  const {
+    handleClick: cellHeadHandleClick,
+    onClick: cellHeadOnClick,
+    classNameCondition: cellHeadClassNameCondition,
+    ...cellHeadDomProps
+  } = useTableProps?.cellHeadProps || {};
+  const {
+    handleClick: bodyHandleClick,
+    onClick: bodyOnClick,
+    ...bodyDomProps
+  } = useTableProps?.bodyProps || {};
+  const {
+    handleClick: rowBodyHandleClick,
+    onClick: rowBodyOnClick,
+    style: rowBodyStyle,
+    classNameCondition: rowBodyClassNameCondition,
+    ...rowBodyDomProps
+  } = useTableProps?.rowBodyProps || {};
+  const {
+    handleClick: cellBodyHandleClick,
+    onClick: cellBodyOnClick,
+    classNameCondition: cellBodyClassNameCondition,
+    ...cellBodyDomProps
+  } = useTableProps?.cellBodyProps || {};
 
-const {
-  handleClick: skRowHandleClick,
-  ...skRowDomProps
-} = useTableProps?.rowBodyProps || {};
+  const { handleClick: skRowHandleClick, classNameCondition: skRowClassNameCondition, ...skRowDomProps } =
+    useTableProps?.rowBodyProps || {};
 
-const {
-  handleClick: skCellHandleClick,
-  ...skCellDomProps
-} = useTableProps?.cellBodyProps || {};
+  const { handleClick: skCellHandleClick, classNameCondition: skCellClassNameCondition, ...skCellDomProps } =
+    useTableProps?.cellBodyProps || {};
+
+
+  function getCellHeadClassNameByCondition({cell,table}: {cell?: Header<TData, unknown>; table?: ITable<TData>}) {
+    if(!cell || !table) return "";
+    const classNameCondition = useTableProps?.cellHeadProps?.classNameCondition;
+    if(!classNameCondition) return "";
+    if(typeof classNameCondition === "string") return classNameCondition;
+    return classNameCondition({cell,table});
+  }
+  function getCellBodyClassNameByCondition({cell,table}: {cell?: Cell<TData, unknown>; table?: ITable<TData>}) {
+    if(!cell || !table) return "";
+    const classNameCondition = useTableProps?.cellBodyProps?.classNameCondition;
+    if(!classNameCondition) return "";
+    if(typeof classNameCondition === "string") return classNameCondition;
+    return classNameCondition({cell,table});
+  }
+  function getRowBodyClassNameByCondition({row,table}: {row?: Row<TData>; table?: ITable<TData>}) {
+    if(!row || !table) return "";
+    const classNameCondition = useTableProps?.rowBodyProps?.classNameCondition;
+    if(!classNameCondition) return "";
+    if(typeof classNameCondition === "string") return classNameCondition;
+    return classNameCondition({row,table});
+  }
 
 
   return (
@@ -321,11 +359,7 @@ const {
                 {headerGroup.headers.map((header) => (
                   <TableHead
                     key={header.id}
-                    {...(() => {
-                      const { handleClick, onClick, ...rest } =
-                        useTableProps?.cellHeadProps || {};
-                      return rest;
-                    })()}
+                    {...cellHeadDomProps}
                     className={cn(
                       "cursor-pointer select-none",
                       classNames?.header?.head
@@ -334,22 +368,11 @@ const {
                       width: header.getSize() ? `${header.getSize()}px !important` : "auto",
                     }}
                     onClick={(e) => {
-                      // Just call the parent's onClick if provided
-                      if (useTableProps?.cellHeadProps?.onClick) {
-                        useTableProps.cellHeadProps.onClick(e);
-                      }
-
-                      // Just call the parent's handleClick if provided
-                      if (useTableProps?.cellHeadProps?.handleClick) {
-                        useTableProps.cellHeadProps.handleClick({
-                          e,
-                          cell: header,
-                          table,
-                        });
-                      }
+                      cellHeadOnClick?.(e);
+                      cellHeadHandleClick?.({ e, table, cell: header });
                     }}
                   >
-                    <div className={cn("flex items-center gap-1 w-fit", classNames?.header?.content)}>
+                    <div className={cn("flex items-center gap-1 w-fit", classNames?.header?.content, getCellHeadClassNameByCondition({cell: header, table}))}>
                       {flexRender(
                         header.column.columnDef.header,
                         header.getContext()
@@ -384,15 +407,13 @@ const {
             {!isLoading &&
               table.getRowModel().rows.length > 0 &&
               table.getRowModel().rows.map((row, index) => {
-                const { handleClick, onClick, ...rest } =
-                  useTableProps?.rowBodyProps || {};
 
                 return (
                   <TableRow
                     {...rowBodyDomProps}
                     key={row.id}
                     style={{...rowBodyStyle, backgroundColor: getAlternateColor(index)}}
-                    className={cn(classNames?.body?.row)}
+                    className={cn(classNames?.body?.row, getRowBodyClassNameByCondition({row,table}))}
                     data-state={row.getIsSelected() && "selected"}
                     onClick={(e) => {
                       rowBodyOnClick?.(e);
@@ -403,7 +424,7 @@ const {
                       <TableCell
                         {...cellBodyDomProps}
                         key={cell.id}
-                        className={cn(classNames?.body?.cell)}
+                        className={cn(classNames?.body?.cell, getCellBodyClassNameByCondition({cell, table}))}
                         onClick={(e) => {
                           cellBodyOnClick?.(e);
                           cellBodyHandleClick?.({ e, cell, table });
@@ -480,26 +501,27 @@ export const TableSkeleton = <TData, TValue>({
   const {
   handleClick: _rowHandleClick,
   onClick: _rowOnClick,
+  classNameCondition: rowClassNameCondition,
   ...rowDomProps
 } = props?.rowBodyProps || {};
 
 const {
   handleClick: _cellHandleClick,
   onClick: _cellOnClick,
+  classNameCondition: cellClassNameCondition,
   ...cellDomProps
 } = props?.cellBodyProps || {};
 
-
   if (showNoData) {
     return (
       <TableRow
         key="no-data-skeleton"
-        className={cn(classNames?.body?.row)}
+        className={cn(classNames?.body?.row, )}
         {...rowDomProps}
       >
         <TableCell
           colSpan={columns.length}
-          className={cn("h-24 text-center", classNames?.body?.cell)}
+          className={cn("h-24 text-center")}
           {...cellDomProps}
         >
           {emptyLabel}

package/component-templates/components/table/readme.tsx

@@ -1,95 +1,200 @@
 "use client";
 
-import { useState } from "react";
+import React from 'react';
 
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef } from '@tanstack/react-table';
 
-import { DataTable } from "./data-table";
+import { cn } from '../../lib/utils';
+import {
+  DataTable,
+  UseTableProps,
+} from './data-table'; // chỉnh path cho đúng
 
+/* ======================================================
+ * 1. Data type
+ * ====================================================== */
 type User = {
   id: string;
   name: string;
   email: string;
+  role: "admin" | "user";
+  status: "active" | "inactive";
 };
 
-// 1. Columns
+/* ======================================================
+ * 2. Mock data
+ * ====================================================== */
+const USERS: User[] = [
+  {
+    id: "1",
+    name: "John Doe",
+    email: "john@example.com",
+    role: "admin",
+    status: "active",
+  },
+  {
+    id: "2",
+    name: "Jane Smith",
+    email: "jane@example.com",
+    role: "user",
+    status: "inactive",
+  },
+  {
+    id: "3",
+    name: "Alex Johnson",
+    email: "alex@example.com",
+    role: "user",
+    status: "active",
+  },
+];
+
+/* ======================================================
+ * 3. Columns
+ * ====================================================== */
 const columns: ColumnDef<User>[] = [
   {
     accessorKey: "name",
     header: "Name",
-    cell: ({ row }) => <div className="font-medium">{row.getValue("name")}</div>,
-    enableSorting: true,
+    cell: ({ row }) => (
+      <span className="font-medium">{row.original.name}</span>
+    ),
   },
   {
     accessorKey: "email",
     header: "Email",
-    enableSorting: true,
+    cell: ({ getValue }) => (
+      <span className="text-blue-600">{getValue<string>()}</span>
+    ),
+  },
+  {
+    accessorKey: "role",
+    header: "Role",
+    cell: ({ getValue }) => (
+      <span className="capitalize">{getValue<string>()}</span>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ getValue }) => {
+      const value = getValue<string>();
+      return (
+        <span
+          className={cn(
+            "px-2 py-0.5 rounded text-xs font-medium",
+            value === "active"
+              ? "bg-green-100 text-green-700"
+              : "bg-red-100 text-red-700"
+          )}
+        >
+          {value}
+        </span>
+      );
+    },
   },
 ];
 
-// 2. Dummy Data
-const users: User[] = [
-  { id: "1", name: "Nguyễn Văn A", email: "a@example.com" },
-  { id: "2", name: "Trần Thị B", email: "b@example.com" },
-  { id: "3", name: "Lê Văn C", email: "c@example.com" },
-  { id: "4", name: "Phạm Thị D", email: "d@example.com" },
-];
+/* ======================================================
+ * 4. Toolbar
+ * ====================================================== */
+const Toolbar = ({ fns }: any) => {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        value={fns.globalFilter ?? ""}
+        onChange={(e) => fns.setGlobalFilter(e.target.value)}
+        placeholder="Search..."
+        className="border rounded px-2 py-1 text-sm"
+      />
+    </div>
+  );
+};
 
-// 3. Component chính
-export default function UserTableExample() {
-  const [data, setData] = useState<User[]>(users);
-  const [isLoading, setIsLoading] = useState(false);
+/* ======================================================
+ * 5. Pagination
+ * ====================================================== */
+const Pagination = ({ fns }: any) => {
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <button
+        onClick={fns.previousPage}
+        disabled={!fns.getCanPreviousPage()}
+        className="px-3 py-1 border rounded disabled:opacity-50"
+      >
+        Prev
+      </button>
+
+      <span className="text-sm">
+        Page {fns.pageIndex + 1}
+      </span>
+
+      <button
+        onClick={fns.nextPage}
+        disabled={!fns.getCanNextPage()}
+        className="px-3 py-1 border rounded disabled:opacity-50"
+      >
+        Next
+      </button>
+    </div>
+  );
+};
 
+/* ======================================================
+ * 6. useTableProps (row / cell behavior)
+ * ====================================================== */
+const useTableProps: UseTableProps<User, unknown> = {
+  rowBodyProps: {
+    classNameCondition: ({ row }) =>
+      row?.original.status === "inactive"
+        ? "opacity-60"
+        : "",
+    handleClick: ({ row }) => {
+      console.log("Row clicked:", row.original);
+    },
+  },
+  cellBodyProps: {
+    classNameCondition: ({ cell }) =>
+      cell?.column.id === "email"
+        ? "underline"
+        : "",
+  },
+};
+
+/* ======================================================
+ * 7. Final Component
+ * ====================================================== */
+export default function UserTableExample() {
   return (
-    <DataTable
-      data={data}
-      columns={columns}
-      isLoading={isLoading}
-      emptyLabel="Không có dữ liệu nào"
-      classNames={{
-        wrapper: "p-4",
-        table: "bg-transparent",
-        header: {
-          header: "bg-muted",
-          row: "border-b",
-          head: "text-left text-sm font-semibold",
-        },
-        body: {
-          body: "bg-transparent",
-          row: "hover:bg-muted/30",
-          cell: "text-sm px-2 py-3",
-        },
-      }}
-      toolbarTable={({ table, fns }) => (
-        <div className="flex items-center gap-2">
-          <input
-            type="text"
-            placeholder="Tìm kiếm..."
-            value={fns.globalFilter ?? ""}
-            onChange={(e) => fns.setGlobalFilter(e.target.value)}
-            className="px-3 py-2 border rounded-md w-64"
-          />
-        </div>
-      )}
-      paginationTable={({ fns }) => (
-        <div className="flex items-center justify-end gap-4">
-          <button
-            onClick={fns.previousPage}
-            disabled={!fns.getCanPreviousPage()}
-            className="px-3 py-1 rounded-md bg-gray-200 disabled:opacity-50 dark:bg-gray-700 dark:text-white"
-          >
-            Trang trước
-          </button>
-          <span>Trang {fns.pageIndex + 1}</span>
-          <button
-            onClick={fns.nextPage}
-            disabled={!fns.getCanNextPage()}
-            className="px-3 py-1 rounded-md bg-gray-200 disabled:opacity-50 dark:bg-gray-700 dark:text-white"
-          >
-            Trang sau
-          </button>
-        </div>
-      )}
-    />
+    <div className="p-4 space-y-4">
+      <h1 className="text-lg font-semibold">User Table</h1>
+
+      <DataTable<User, unknown>
+        data={USERS}
+        columns={columns}
+        enableSort
+        alternate="even"
+        alternateColor="#f9fafb"
+        emptyLabel="No users found"
+        initialState={{
+          pagination: {
+            pageSize: 5,
+            pageIndex: 0,
+          },
+        }}
+        toolbarTable={({ fns }) => <Toolbar fns={fns} />}
+        paginationTable={({ fns }) => <Pagination fns={fns} />}
+        useTableProps={useTableProps}
+        classNames={{
+          table: "border rounded-md",
+          header: {
+            head: "bg-gray-50 text-sm font-semibold",
+          },
+          body: {
+            row: "hover:bg-gray-50 cursor-pointer",
+            cell: "text-sm",
+          },
+        }}
+      />
+    </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kmod-cli",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Stack components utilities fast setup in projects",
   "author": "kumo_d",
   "license": "MIT",