kmod-cli 1.4.15 → 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/component-templates/providers/refine-provider.tsx

@@ -994,33 +994,70 @@ export const useDataProvider = () => {
 
 /**
  * Create HTTP client with authentication
+ * @param url Base URL for the HTTP client
+ * @param options Configuration options for the HTTP client
+ * @param options.tokenName Name of the token to use for authentication
+ * @param options.tokenStorage Storage mechanism for the token
+ * @param options.authorizationType Type of authorization (e.g., Bearer, Basic)
+ * @param options.withCredentials Whether to send cookies with requests (defaults to true if tokenStorage is "http-only")
+ * @returns Configured Axios instance
  */
-export function createHttpClient(
-  baseURL: string, 
-  authTokenKey: string = 'token',
-  authTokenStorage: 'localStorage' | 'sessionStorage' | 'cookie' = 'cookie',
-  typeAuthorization: "Bearer" | "Basic" | string = "Bearer"
-): AxiosInstance {
+
+export interface ICreateHttpClientOptions {
+  tokenName?: string ;
+  tokenStorage?: "local" | "session" | "cookie" | "http-only";
+  authorizationType?: "Bearer" | "Basic" | string;
+  withCredentials?: boolean;
+}
+
+export  interface ICreateHttpClient {
+  url?: string;
+  options?: ICreateHttpClientOptions
+}
+export function createHttpClient({url, options = {}}:ICreateHttpClient): AxiosInstance {
+  const {
+    tokenName = "token",
+    tokenStorage = "http-only",
+    authorizationType = "Bearer",
+  } = options;
+  
+  const withCredentials =
+    options.withCredentials ?? tokenStorage === "http-only";
+
+  
   const axiosInstance = axios.create({
-    baseURL: baseURL || 'https://api.example.com',
+    baseURL: url || "https://api.example.com",
+    withCredentials,
   });
 
-  axiosInstance.interceptors.request.use(config => {
+  axiosInstance.interceptors.request.use((config) => {
     let token: string | null = null;
-    
-    if (authTokenStorage === 'localStorage') {
-      token = localStorage.getItem(authTokenKey);
-    } else if (authTokenStorage === 'sessionStorage') {
-      token = sessionStorage.getItem(authTokenKey);
-    } else if (authTokenStorage === 'cookie') {
-      const match = document.cookie.match(new RegExp('(^| )' + authTokenKey + '=([^;]+)'));
-      if (match) token = match[2];
+
+    switch (options.tokenStorage) {
+      case "local":
+        token = localStorage.getItem(tokenName);
+        break;
+
+      case "session":
+        token = sessionStorage.getItem(tokenName);
+        break;
+
+      case "cookie":
+        token = cookiesProvider.get(tokenName) ?? null;
+        break;
+
+      case "http-only":
+        // NO READ 
+        // HttpOnly cookies are not accessible via JavaScript 
+        // Browser will send it automatically
+        break;
     }
-    
+
+    // Just set token if available in storage
     if (token) {
-      config.headers.Authorization = `${typeAuthorization} ${token}`;
-    }
-    
+      config.headers.Authorization = `${authorizationType} ${token}`;
+    } 
+
     return config;
   });
 
@@ -1050,15 +1087,36 @@ interface AuthContextValue {
   isAuthenticated: () => boolean;
   setUser: (user: AuthUser | null) => void;
   login: (payload: LoginPayload, type?: "full" | "simple") => Promise<any>;
-  logout: () => void;
+  logout: (params: CustomParams, type?: TypeResponse) => Promise<any>;
   getMe: (type?: "full" | "simple") => Promise<any>;
 }
 
+/**
+ * Authentication Provider Urls Props
+ * @param loginUrl - URL for login API
+ * @param logoutUrl - URL for logout API
+ * @param meUrl - URL for fetching current user info
+ * @returns AuthProviderUrls
+ */
+export interface AuthProviderUrls {
+  loginUrl: string;
+  logoutUrl?: string;
+  meUrl?: string;
+}
+
+/**
+ * Authentication Provider Props
+ * @param children - React children nodes
+ * @param urls - AuthProviderUrls
+ * @param tokenKey - Key for token storage
+ * @param keysCleanUpOnLogout - Additional keys to clean up on logout
+ * @returns AuthProviderProps
+ */
 export interface AuthProviderProps {
   children: React.ReactNode;
-  loginUrl: string;
-  meUrl: string;
+  urls: AuthProviderUrls;
   tokenKey: string;
+  keysCleanUpOnLogout?: string[] | string;
 }
 
 export type TypeResponse = "full" | "simple";
@@ -1075,13 +1133,21 @@ export const useAuth = () => {
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({
   children,
-  loginUrl = '/auth/login',
-  meUrl = '/auth/me',
+  urls,
   tokenKey = 'token',
+  keysCleanUpOnLogout = ["token"],
 }) => {
   const dataProvider = useDataProvider();
   const [user, setUser] = useState<AuthUser | null>(null);
 
+  const { loginUrl, meUrl, logoutUrl } = urls;
+
+  function removeKeys(key: string) {
+    cookiesProvider.remove(key);
+    localStorage.removeItem(key);
+    sessionStorage.removeItem(key);
+  }
+
   const login = useCallback(async (payload: LoginPayload, type: TypeResponse = "full") => {
       try {
         const res = await dataProvider.custom<any>({
@@ -1100,15 +1166,37 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     }
   , [dataProvider, loginUrl]);
 
-  const logout = useCallback(() => {
-    cookiesProvider.remove(tokenKey);
-    localStorage.clear();
-    sessionStorage.clear();
-    dataProvider.clearAllCache();
-  }, [dataProvider]);
+  const logout = useCallback(async (params: CustomParams, type: TypeResponse = "full") => {
+
+    try {
+      const res = await dataProvider.custom<any>({
+        url: params.url || logoutUrl,
+        ...params,
+      });
+
+      if (type === "simple") {
+        return res.data;
+      }
+      
+      return res;
+    } catch (error) {
+      throw error;
+    } finally {
+      setUser(null);
+      dataProvider.clearAllCache();
+      if(Array.isArray(keysCleanUpOnLogout)){
+        keysCleanUpOnLogout.forEach((key) => {
+          removeKeys(key);
+        });
+      } else {
+        removeKeys(keysCleanUpOnLogout);
+      }
+    }
+    
+  }, [dataProvider, logoutUrl]);
 
   const isAuthenticated = () => {
-    return (cookiesProvider.get(tokenKey) !== null && cookiesProvider.get(tokenKey) !== undefined && cookiesProvider.get(tokenKey) !== "" && typeof cookiesProvider.get(tokenKey) === "string" && user !== null) ? true : false;
+    return user !== null;
   };
   const getToken = useCallback(() => {
     return cookiesProvider.get(tokenKey);
@@ -1128,12 +1216,17 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     } catch {
       return null;
     }
-  }, [dataProvider, meUrl, logout]);
+  }, [dataProvider, meUrl]);
+
+  useEffect(() => {
+    getMe().then((u: any) => u && setUser(u));
+  }, [getMe]);
+
 
   const value: AuthContextValue = {
     user,
     setUser,
-    token: getToken(),
+    token: getToken() ?? null,
     isAuthenticated: isAuthenticated,
     login,
     logout,
@@ -1171,28 +1264,39 @@ export const cookiesProvider = {
 
 // =================== Example ===================
 
-// create httpClient
+// create httpClient - (can create multiple httpClients for different apis)
 
 // const TOKEN = "token";
 
-// const httpClient = createHttpClient(
-//   `${process.env.NEXT_PUBLIC_API_URL}`,
-//   TOKEN, --> key_name_cookie
-//   "cookie", --> storage
-//   "Bearer" --> prefix
-// );
+  // const httpClient = createHttpClient({
+  //   url: `${process.env.NEXT_PUBLIC_API_URL}`,
+  //   options: {
+  //     authorizationType: "Bearer",
+  //     tokenName: TOKEN,
+  //     tokenStorage: "cookie",
+  //     withCredentials: true, --- optionals (default to true if tokenStorage is "http-only")
+  //   },
+  // });
 
 
 // create dataProvider
 
 // const dataProvider = useDataProvider(httpClient);
 
+// const urls = {
+//     loginUrl: "/auth/login", --> api_login
+//     logoutUrl: "/auth/logout", --> api_logout
+//     meUrl: "/auth/me", --> api_get_me_by_token
+//   }
+
+//   const keysRemoveOnLogout = [TOKEN, "refreshToken", "user"];
+
 // wrapped all into:
 // <DataProvider  dataProvider={dataProvider}>
 //   <AuthProvider 
-//      loginUrl={"/auth/login"} --> api_login 
+//      urls={urls} --> api_login 
 //      tokenKey={TOKEN} 
-//      meUrl='/auth/me' --> api_get_me_by_token
+//      keysCleanUpOnLogout={keysRemoveOnLogout} --> optional (default to ["token"]) - additional keys to clean up on logout
 //   >
 //     <App />
 //   </AuthProvider>

package/package.json

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