kmod-cli 1.0.10

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

@@ -0,0 +1,339 @@
+"use client";
+
+import {
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  Cell,
+  getSortedRowModel,
+  Header,
+  HeaderGroup,
+  InitialTableState,
+  Row,
+  Table as ITable,
+} from '@tanstack/table-core';
+
+import { cn } from '../../lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
+
+export type TableHeaderClassNames = {
+  header?: string;
+  row?: string;
+  head?: string;
+};
+export type TableBodyClassNames = {
+  body?: string;
+  row?: string;
+  cell?: string;
+};
+export type TableClassNames = {
+  wrapper?: string;
+  container?: string;
+  table?: string;
+  header?: TableHeaderClassNames;
+  body?: TableBodyClassNames;
+};
+export type TableHeaderProps<TData> = HTMLAttributes<HTMLTableSectionElement> & {
+  handleClick: ({ e, table }: { e: React.MouseEvent<HTMLTableSectionElement>; table: ITable<TData> }) => void;
+  
+};
+export type TableBodyProps<TData> = HTMLAttributes<HTMLTableSectionElement> & {
+  handleClick: ({ e, table }: { e: React.MouseEvent<HTMLTableSectionElement>; table: ITable<TData> }) => void;
+};
+export type TableHeadProps<TData> = HTMLAttributes<HTMLTableCellElement> & {
+  handleClick: ({
+    e,
+    table,
+    cell,
+  }: {
+    e: React.MouseEvent<HTMLTableCellElement>;
+    cell: Header<TData, unknown>;
+    table: ITable<TData>;
+  }) => void;
+};
+export type TableCellProps<TData, TValue> = HTMLAttributes<HTMLTableCellElement> & {
+  handleClick: ({ e, table, cell }: { e: React.MouseEvent<HTMLTableCellElement>; cell: Cell<TData, TValue>; table: ITable<TData> }) => void;
+};
+export type TableRowHeadProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
+  handleClick: ({ e, table, row }: { e: React.MouseEvent<HTMLTableRowElement>; row: HeaderGroup<TData>; table: ITable<TData> }) => void;
+};
+export type TableRowBodyProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
+  handleClick: ({ e, table, row }: { e: React.MouseEvent<HTMLTableRowElement>; row: Row<TData>; table: ITable<TData> }) => void;
+};
+export type TableProps<TData> = HTMLAttributes<HTMLTableElement> & {
+  handleClick: ({ e, table }: { e: React.MouseEvent<HTMLTableElement>; table: ITable<TData> }) => void;
+};
+
+export type UseTableProps<TData, TValue> = {
+  tableProps?: TableProps<TData>;
+  headerProps?: TableHeaderProps<TData>;
+  bodyProps?: TableBodyProps<TData>;
+  cellBodyProps?: TableCellProps<TData, TValue>;
+  rowHeadProps?: TableRowHeadProps<TData>;
+  rowBodyProps?: TableRowBodyProps<TData>;
+  cellHeadProps?: TableHeadProps<TData>;
+};
+
+// export type Handles = {
+//   globalFilter?: () => void
+//   setGlobalFilter?: () => void
+//   sorting?: () => void
+//   setSorting?: () => void
+//   getColumn?: () => void
+//   previousPage?: () => void
+//   nextPage?: () => void
+//   getCanPreviousPage?: () => void
+//   getCanNextPage?: () => void
+//   pageIndex?: () => void
+//   pageSize?: () => void
+// }
+
+export type DataTableProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  toolbarTable?: ({ table, fns }: { table: ITable<TData>; fns: DataTableToolbarFns<TData> }) => ReactNode | ReactNode[];
+  paginationTable?: ({ table, fns }: { table: ITable<TData>; fns: DataTablePaginationFns<TData> }) => ReactNode | ReactNode[];
+  isLoading?: boolean;
+  classNames?: TableClassNames;
+  emptyLabel?: string;
+  showSortIconHeader?: boolean;
+  surfix?: ({
+    header,
+    showSortIconHeader,
+  }: {
+    header: Header<TData, TValue | unknown>;
+    showSortIconHeader: boolean;
+  }) => ReactNode | ReactNode[];
+  enableSort?: boolean;
+  useTableProps?: UseTableProps<TData, TValue>;
+  initialState?: InitialTableState;
+  // handles?: Handles
+};
+
+export type DataTableToolbarFns<TData> = {
+  globalFilter: string;
+  setGlobalFilter: (value: string) => void;
+  sorting: any;
+  setSorting: (value: any) => void;
+  getColumn: (columnId: string) => ReturnType<ITable<TData>["getColumn"]>;
+};
+
+export type DataTablePaginationFns<TData> = {
+  previousPage: () => void;
+  nextPage: () => void;
+  getCanPreviousPage: () => boolean;
+  getCanNextPage: () => boolean;
+  pageIndex: number;
+  pageSize: number;
+};
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  toolbarTable,
+  paginationTable,
+  classNames,
+  isLoading = false,
+  emptyLabel = "No data",
+  showSortIconHeader = true,
+  surfix,
+  enableSort = true,
+  useTableProps,
+  initialState,
+  // handles
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: enableSort ? getSortedRowModel() : undefined,
+    initialState: initialState,
+  });
+  const toolbarFns: DataTableToolbarFns<TData> = {
+    globalFilter: table.getState().globalFilter as string,
+    setGlobalFilter: table.setGlobalFilter,
+    sorting: table.getState().sorting,
+    setSorting: table.setSorting,
+    getColumn: table.getColumn,
+  };
+  const paginationFns: DataTablePaginationFns<TData> = {
+    previousPage: table.previousPage,
+    nextPage: table.nextPage,
+    getCanPreviousPage: table.getCanPreviousPage,
+    getCanNextPage: table.getCanNextPage,
+    pageIndex: table.getState().pagination.pageIndex,
+    pageSize: table.getState().pagination.pageSize,
+  };
+
+  return (
+    <div className={cn("space-y-4", classNames?.wrapper)}>
+      {toolbarTable && toolbarTable({ table, fns: toolbarFns })}
+      <div className={cn(classNames?.container)}>
+        <Table
+          className={cn(classNames?.table)}
+          {...useTableProps?.tableProps}
+          onClick={(e) => useTableProps?.tableProps?.handleClick({ e, table })}
+        >
+          <TableHeader
+            className={cn(classNames?.header?.header)}
+            {...useTableProps?.headerProps}
+            onClick={(e) => useTableProps?.headerProps?.handleClick({ e, table })}
+          >
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow
+                key={headerGroup.id}
+                className={cn(classNames?.header?.row)}
+                {...useTableProps?.rowHeadProps}
+                onClick={(e) => useTableProps?.rowHeadProps?.handleClick({ e, row: headerGroup, table })}
+              >
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className={cn("cursor-pointer select-none", classNames?.header?.head)}
+                    onClick={(e) => {
+                      header.column.getToggleSortingHandler();
+
+                      if (useTableProps?.headerProps?.handleClick) {
+                        useTableProps?.cellHeadProps?.handleClick({ e, cell: header, table });
+                      }
+                    }}
+                    {...useTableProps?.cellHeadProps}
+                  >
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    {table.getRowModel().rows.length > 0 && surfix && surfix({ header, showSortIconHeader })}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody
+            className={cn(classNames?.body?.body)}
+            {...useTableProps?.bodyProps}
+            onClick={(e) => useTableProps?.bodyProps?.handleClick({ e, table })}
+          >
+            {isLoading && (
+              <TableSkeleton
+                props={useTableProps}
+                isLoading={isLoading}
+                classNames={classNames}
+                emptyLabel={emptyLabel}
+                columns={columns}
+              />
+            )}
+            {!isLoading &&
+              table.getRowModel().rows.length > 0 &&
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  className={cn(classNames?.body?.row)}
+                  data-state={row.getIsSelected() && "selected"}
+                  {...useTableProps?.rowBodyProps}
+                  onClick={(e) => useTableProps?.rowBodyProps?.handleClick({ e, row, table })}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(classNames?.body?.cell)}
+                      {...useTableProps?.cellBodyProps}
+                      onClick={(e) => useTableProps?.cellBodyProps?.handleClick({ e, cell, table })}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            {!isLoading && table.getRowModel().rows.length === 0 && (
+              <TableRow key="no-data" className={cn(classNames?.body?.row)} {...useTableProps?.rowBodyProps}>
+                <TableCell
+                  colSpan={columns.length}
+                  className={cn("h-24 text-center", classNames?.body?.cell)}
+                  {...useTableProps?.cellBodyProps}
+                >
+                  {emptyLabel}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {paginationTable && paginationTable({ table, fns: paginationFns })}
+    </div>
+  );
+}
+
+type TableSkeletonProps<TData, TValue> = {
+  isLoading: boolean;
+  classNames?: TableClassNames;
+  emptyLabel?: string;
+  columns: ColumnDef<TData, TValue>[];
+  props?: UseTableProps<TData, TValue>;
+};
+
+export const TableSkeleton = <TData, TValue>({ isLoading, classNames, emptyLabel, props, columns }: TableSkeletonProps<TData, TValue>) => {
+  const [showNoData, setShowNoData] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (isLoading) {
+      timerRef.current = setTimeout(() => setShowNoData(true), 10000);
+    } else {
+      setShowNoData(false);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [isLoading]);
+
+  if (showNoData) {
+    return (
+      <TableRow key="no-data-skeleton" className={cn(classNames?.body?.row)} {...props?.rowBodyProps}>
+        <TableCell colSpan={columns.length} className={cn("h-24 text-center", classNames?.body?.cell)} {...props?.cellBodyProps}>
+          {emptyLabel}
+        </TableCell>
+      </TableRow>
+    );
+  }
+  return (
+    <>
+      {[...Array(5)].map((_, rowIndex) => (
+        <TableRow key={`skeleton-${rowIndex}`} className={cn(classNames?.body?.row)} {...props?.rowBodyProps}>
+          {columns.map((_, colIndex) => (
+            <TableCell key={`skeleton-${rowIndex}-${colIndex}`} className={cn(classNames?.body?.cell)} {...props?.cellBodyProps}>
+              <div className="shimmer h-4 w-full" />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DataTable } from "./data-table";
+
+type User = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+// 1. Columns
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ row }) => <div className="font-medium">{row.getValue("name")}</div>,
+    enableSorting: true,
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    enableSorting: true,
+  },
+];
+
+// 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" },
+];
+
+// 3. Component chính
+export default function UserTableExample() {
+  const [data, setData] = useState<User[]>(users);
+  const [isLoading, setIsLoading] = useState(false);
+
+  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>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />,
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  ),
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />,
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/component-templates/components/text-hover-effect.tsx

@@ -0,0 +1,120 @@
+"use client";
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { motion } from 'motion/react';
+
+export const TextHoverEffect = ({ text, duration }: { text: string; duration?: number; automatic?: boolean }) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [cursor, setCursor] = useState({ x: 0, y: 0 });
+  const [hovered, setHovered] = useState(false);
+  const [maskPosition, setMaskPosition] = useState({ cx: "50%", cy: "50%" });
+
+  useEffect(() => {
+    if (svgRef.current && cursor.x !== null && cursor.y !== null) {
+      const svgRect = svgRef.current.getBoundingClientRect();
+      const cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;
+      const cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;
+      setMaskPosition({
+        cx: `${cxPercentage}%`,
+        cy: `${cyPercentage}%`,
+      });
+    }
+  }, [cursor]);
+
+  return (
+    <svg
+      ref={svgRef}
+      width="100%"
+      height="100%"
+      viewBox="0 0 300 100"
+      xmlns="http://www.w3.org/2000/svg"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}
+      className="select-none"
+    >
+      <defs>
+        <linearGradient id="textGradient" gradientUnits="userSpaceOnUse" cx="50%" cy="50%" r="25%">
+          {hovered && (
+            <>
+              <stop offset="0%" stopColor="#eab308" />
+              <stop offset="25%" stopColor="#ef4444" />
+              <stop offset="50%" stopColor="#3b82f6" />
+              <stop offset="75%" stopColor="#06b6d4" />
+              <stop offset="100%" stopColor="#8b5cf6" />
+            </>
+          )}
+        </linearGradient>
+
+        <motion.radialGradient
+          id="revealMask"
+          gradientUnits="userSpaceOnUse"
+          r="20%"
+          initial={{ cx: "50%", cy: "50%" }}
+          animate={maskPosition}
+          transition={{ duration: duration ?? 0, ease: "easeOut" }}
+
+          // example for a smoother animation below
+
+          //   transition={{
+          //     type: "spring",
+          //     stiffness: 300,
+          //     damping: 50,
+          //   }}
+        >
+          <stop offset="0%" stopColor="white" />
+          <stop offset="100%" stopColor="black" />
+        </motion.radialGradient>
+        <mask id="textMask">
+          <rect x="0" y="0" width="100%" height="100%" fill="url(#revealMask)" />
+        </mask>
+      </defs>
+      <text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        strokeWidth="0.3"
+        className="fill-transparent stroke-neutral-200 font-[helvetica] text-7xl font-bold dark:stroke-neutral-800"
+        style={{ opacity: hovered ? 0.7 : 0 }}
+      >
+        {text}
+      </text>
+      <motion.text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        strokeWidth="0.3"
+        className="fill-transparent stroke-neutral-200 font-[helvetica] text-7xl font-bold dark:stroke-neutral-800"
+        initial={{ strokeDashoffset: 1000, strokeDasharray: 1000 }}
+        animate={{
+          strokeDashoffset: 0,
+          strokeDasharray: 1000,
+        }}
+        transition={{
+          duration: 4,
+          ease: "easeInOut",
+        }}
+      >
+        {text}
+      </motion.text>
+      <text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        stroke="url(#textGradient)"
+        strokeWidth="0.3"
+        mask="url(#textMask)"
+        className="fill-transparent font-[helvetica] text-7xl font-bold"
+      >
+        {text}
+      </text>
+    </svg>
+  );
+};

package/component-templates/components/timout-loader.tsx

@@ -0,0 +1,52 @@
+"use client";
+import React, {
+  useEffect,
+  useState,
+} from "react";
+
+type TimeoutLoaderProps = {
+  children: React.ReactNode;
+  fallback: React.ReactNode | (() => void);
+  timeoutMs?: number;
+  isLoaded?: boolean;
+  isActive?: boolean;
+  loadingComponent?: React.ReactNode;
+};
+
+export const TimeoutLoader: React.FC<TimeoutLoaderProps> = ({
+  children,
+  fallback,
+  timeoutMs = 10000,
+  isLoaded = false,
+  isActive = true,
+  loadingComponent = <div>Đang tải...</div>,
+}) => {
+  const [timedOut, setTimedOut] = useState(false);
+
+  useEffect(() => {
+    if (!isActive || isLoaded) return;
+
+    const timeout = setTimeout(() => {
+      setTimedOut(true);
+    }, timeoutMs);
+
+    return () => clearTimeout(timeout);
+  }, [isLoaded, isActive, timeoutMs]);
+
+  // Không active: render children ngay lập tức
+  if (!isActive) return <>{children}</>;
+
+  // Nếu đã load
+  if (isLoaded) return <>{children}</>;
+
+  // Nếu hết thời gian và fallback là hàm
+  if (timedOut) {
+    if (typeof fallback === 'function') {
+      fallback(); // optional: có thể return fallback() nếu muốn hiện kết quả từ hàm
+      return null;
+    }
+    return <>{fallback}</>;
+  }
+
+  return <>{loadingComponent}</>;
+};