kmod-cli 1.2.0 → 1.2.2

package/component-templates/components/breadcumb.tsx

@@ -7,36 +7,41 @@ import Link from 'next/link';
 import { cn } from '../lib/utils';
 
 type BreadcrumbItem = {
-  label: ReactNode;
-  as?: "link" | "a";
-  href?: string;
-  isCurrent?: boolean;
+    label: ReactNode;
+    as?: "link" | "a";
+    href?: string;
+    isCurrent?: boolean;
 };
 
 interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  className?: string;
+    items: BreadcrumbItem[];
+    classNames?: {
+        container?: string;
+        label?: string;
+        indicator?: string;
+    };
+    indicator?: ReactNode;
 }
 
-export const Breadcrumbs: React.FC<BreadcrumbProps> = ({ items, className }) => {
-  return (
-    <nav className={cn("text-muted-foreground flex items-center space-x-1 text-sm", className)} aria-label="Breadcrumb">
-      {items.map((item, index) => (
-        <React.Fragment key={index}>
-          {index !== 0 && <ChevronRight className="text-muted-foreground h-4 w-4" />}
-          {item.href && !item.isCurrent && item.as === "link" ? (
-            <Link href={item.href} className="hover:text-foreground transition-colors">
-              {item.label}
-            </Link>
-          ) : item.href && !item.isCurrent && item.as === "a" ? (
-            <a href={item.href} className="hover:text-foreground transition-colors">
-              {item.label}
-            </a>
-          ) : (
-            <span className="text-foreground font-medium">{item.label}</span>
-          )}
-        </React.Fragment>
-      ))}
-    </nav>
-  );
-};
+export const Breadcrumbs: React.FC<BreadcrumbProps> = ({ items, indicator, classNames }) => {
+    return (
+        <nav className={cn("text-muted-foreground flex items-center space-x-1 text-sm", classNames?.container)} aria-label="Breadcrumb">
+            {items.map((item, index) => (
+                <React.Fragment key={index}>
+                    {index !== 0 && indicator && <ChevronRight className={cn("text-muted-foreground h-4 w-4", classNames?.indicator)} />}
+                    {item.href && !item.isCurrent && item.as === "link" ? (
+                        <Link href={item.href} className={cn("hover:text-foreground transition-colors", classNames?.label)}>
+                            {item.label}
+                        </Link>
+                    ) : item.href && !item.isCurrent && item.as === "a" ? (
+                        <a href={item.href} className={cn("hover:text-foreground transition-colors", classNames?.label)}>
+                            {item.label}
+                        </a>
+                    ) : (
+                        <span className="text-foreground font-medium">{item.label}</span>
+                    )}
+                </React.Fragment>
+            ))}
+        </nav>
+    );
+};

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

@@ -37,61 +37,104 @@ import {
 } from './table';
 
 export type TableHeaderClassNames = {
-    header?: string;
-    row?: string;
-    head?: string;
+  header?: string;
+  row?: string;
+  head?: string;
 };
 export type TableBodyClassNames = {
-    body?: string;
-    row?: string;
-    cell?: string;
+  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;
-
+  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;
+  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: Header<TData, unknown>;
-        table: ITable<TData>;
+      e,
+      table,
+      cell,
+    }: {
+      e: React.MouseEvent<HTMLTableCellElement>;
+      cell: Cell<TData, TValue>;
+      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;
+  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;
+  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;
+  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>;
+  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 = {
@@ -109,240 +152,345 @@ export type UseTableProps<TData, TValue> = {
 // }
 
 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
+  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"]>;
+  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;
+  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,
-    };
+  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}
-                                        {...(() => {
-                                            const { handleClick, onClick, ...rest } = useTableProps?.cellHeadProps || {};
-                                            return rest;
-                                        })()}
-                                        className={cn("cursor-pointer select-none", classNames?.header?.head)}
-                                        onClick={(e) => {
-                                            // Just call the parent's onClick if provided
-                                            if (useTableProps?.cellHeadProps?.onClick) {
-                                                useTableProps.cellHeadProps.onClick(e);
-                                            }
+  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}
+                    {...(() => {
+                      const { handleClick, onClick, ...rest } =
+                        useTableProps?.cellHeadProps || {};
+                      return rest;
+                    })()}
+                    className={cn(
+                      "cursor-pointer select-none",
+                      classNames?.header?.head
+                    )}
+                    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 });
-                                            }
-                                        }}
-                                    >
-                                        <div className="flex items-center gap-1">
-                                        {flexRender(header.column.columnDef.header, header.getContext())}
-                                        {table.getRowModel().rows.length > 0 && surfix && surfix({ header, showSortIconHeader })}
-                                        </div>
-                                    </TableHead>
-                                ))}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
+                      // Just call the parent's handleClick if provided
+                      if (useTableProps?.cellHeadProps?.handleClick) {
+                        useTableProps.cellHeadProps.handleClick({
+                          e,
+                          cell: header,
+                          table,
+                        });
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-1">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {table.getRowModel().rows.length > 0 &&
+                        surfix &&
+                        surfix({ header, showSortIconHeader })}
+                    </div>
+                  </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
+            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) => {
+                const { handleClick, onClick, ...rest } =
+                  useTableProps?.rowBodyProps || {};
+
+                return (
+                  <TableRow
+                    {...(() => {
+                      const { handleClick, onClick, ...rest } =
+                        useTableProps?.rowBodyProps || {};
+                      return rest;
+                    })()}
+                    key={row.id}
+                    className={cn(classNames?.body?.row)}
+                    data-state={row.getIsSelected() && "selected"}
+                    // {...useTableProps?.rowBodyProps}
+                    onClick={(e) => {
+                      // Just call the parent's onClick if provided
+                      if (useTableProps?.rowBodyProps?.onClick) {
+                        useTableProps.rowBodyProps.onClick(e);
+                      }
+
+                      // Just call the parent's handleClick if provided
+                      if (useTableProps?.rowBodyProps?.handleClick) {
+                        useTableProps.rowBodyProps.handleClick({
+                          e,
+                          row,
+                          table,
+                        });
+                      }
+                    }}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        {...(() => {
+                          const { handleClick, onClick, ...rest } =
+                            useTableProps?.cellBodyProps || {};
+                          return rest;
+                        })()}
+                        key={cell.id}
+                        className={cn(classNames?.body?.cell)}
+                        // {...useTableProps?.cellBodyProps}
+                        onClick={(e) => {
+                          // Just call the parent's onClick if provided
+                          if (useTableProps?.cellBodyProps?.onClick) {
+                            useTableProps.cellBodyProps.onClick(e);
+                          }
+
+                          // Just call the parent's handleClick if provided
+                          if (useTableProps?.cellBodyProps?.handleClick) {
+                            useTableProps.cellBodyProps.handleClick({
+                              e,
+                              cell,
+                              table,
+                            });
+                          }
+                        }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
                         )}
-                    </TableBody>
-                </Table>
-            </div>
-            {paginationTable && paginationTable({ table, fns: paginationFns })}
-        </div>
-    );
+                      </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>;
+  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);
+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>
-        );
+  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 (
-        <>
-            {[...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>
-            ))}
-        </>
+      <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/utils/cookies/kookies.ts

@@ -0,0 +1,31 @@
+import Cookies from 'js-cookie';
+
+/**
+ * @function set - Sets a cookie with the given name, value, and expiration days.
+ * @function get - Gets the value of a cookie with the given name.
+ * @function remove - Removes a cookie with the given name.
+ * @function exists - Checks if a cookie with the given name exists.
+ */
+export const ck = {
+  set: (name: string, value: string, days?: number) => {
+    Cookies.set(name, value, {
+      expires: days || 365 * 100, // Default to 100 years if not specified
+      path: "/",
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "Lax",
+    });
+  },
+
+  get: (name: string): string | undefined => {
+    return Cookies.get(name);
+  },
+
+  remove: (name: string) => {
+    Cookies.remove(name, {path: "/"});
+  },
+
+  
+  exists: (name: string): boolean => {
+    return Cookies.get(name) !== undefined;
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kmod-cli",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Stack components utilities fast setup in projects",
   "author": "kumo_d",
   "license": "MIT",
@@ -11,7 +11,8 @@
   "dependencies": {
     "commander": "^14.0.0",
     "fs-extra": "^11.3.1",
-    "inquirer": "^12.9.4"
+    "inquirer": "^12.9.4",
+    "js-cookie": "^3.0.5"
   },
   "devDependencies": {
     "@radix-ui/react-icons": "^1.3.2",
@@ -50,7 +51,8 @@
     "tailwindcss": "^4.1.12",
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.8",
+    "@types/js-cookie": "^3.0.6"
   },
   "files": [
     "bin",