kmod-cli 1.5.0 → 1.7.1

package/README.md

@@ -41,64 +41,66 @@ npx kumod add button # add button component
 ## Components
 
 - access-denied
+- api-service
 - breadcumb
-- count-down
-- count-input
 - button
+- calculate
 - calendar
+- color-by-text
+- column-table
+- config
+- count-down
+- count-input
+- data-table
 - date-input
 - date-range-picker
-- label
-- popover
-- select
-- switch
 - datetime-picker
-- input
-- period-input
-- time-picker-input
-- time-picker-utils
-- time-picker
+- fade-on-scroll
+- feature-config
+- feature-guard
 - gradient-outline
 - gradient-svg
 - grid-layout
+- hash-aes
 - hydrate-guard
+- idb
 - image
+- input
+- keys
+- kookies
+- label
+- lib
+- list-map
 - loader-slash-gradient
 - masonry-gallery
 - modal
 - multi-select
 - non-hydration
+- period-input
+- popover
 - portal
+- query
+- rbac
+- readme
+- refine-provider
+- safe-action
 - segments-circle
+- select
+- simple-validate
 - single-select
+- spam-guard
+- storage
+- stripe-effect
 - stroke-circle
-- column-table
-- data-table
-- readme
+- switch
 - table
 - text-hover-effect
+- time-picker
+- time-picker-input
+- time-picker-utils
 - timout-loader
 - toast
-- config
-- feature-config
-- keys
-- api-service
-- calculate
-- idb
-- lib
-- storage
-- fade-on-scroll
-- safe-action
-- spam-guard
 - utils
-- feature-guard
-- refine-provider
-- query
-- color-by-text
-- stripe-effect
-- kookies
-- hash-aes
-- simple-validate
 ## Contributing
 
 Contributions are welcome! Please open issues or pull requests.

package/bin/gen-readme-name-key.js

@@ -13,10 +13,13 @@ const componentsConfig = JSON.parse(
   fs.readFileSync(componentsPath, 'utf8')
 );
 
+// sort a-z
+const componentSorted = Object.keys(componentsConfig).sort(
+  (a, b) => a.localeCompare(b)
+)
+
 // build list
-const componentList = Object.keys(componentsConfig)
-  .map((k) => `- ${k}`)
-  .join('\n');
+const componentList = componentSorted.map((k) => `- ${k}`).join('\n');
 
 // đọc README
 const readmeContent = fs.readFileSync(readmePath, 'utf8');

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

@@ -55,7 +55,7 @@ export type TableClassNames = {
 };
 export type TableHeaderProps<TData> =
   HTMLAttributes<HTMLTableSectionElement> & {
-    handleClick: ({
+    handleClick?: ({
       e,
       table,
     }: {
@@ -64,7 +64,7 @@ export type TableHeaderProps<TData> =
     }) => void;
   };
 export type TableBodyProps<TData> = HTMLAttributes<HTMLTableSectionElement> & {
-  handleClick: ({
+  handleClick?: ({
     e,
     table,
   }: {
@@ -73,7 +73,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,18 +86,21 @@ 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,
+      row
     }: {
       e: React.MouseEvent<HTMLTableCellElement>;
       cell: Cell<TData, TValue>;
+      row: Row<TData>;
       table: ITable<TData>;
     }) => void;
   };
 export type TableRowHeadProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
-  handleClick: ({
+  handleClick?: ({
     e,
     table,
     row,
@@ -107,7 +111,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 +123,7 @@ export type TableRowBodyProps<TData> = HTMLAttributes<HTMLTableRowElement> & {
   }) => void;
 };
 export type TableProps<TData> = HTMLAttributes<HTMLTableElement> & {
-  handleClick: ({
+  handleClick?: ({
     e,
     table,
   }: {
@@ -173,6 +178,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 +218,7 @@ export function DataTable<TData, TValue>({
   useTableProps,
   initialState,
   alternate = "even",
-  alternateColor = "#f5f5f5",
+  alternateColor = "#fbfbfb",
   // handles
 }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
@@ -241,47 +255,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,35 +362,28 @@ 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
                     )}
                     style={{
-                      width: header.getSize() ? `${header.getSize()}px !important` : "auto",
+                      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 +418,18 @@ 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)}
+                    style={{
+                      ...rowBodyStyle,
+                      backgroundColor: getAlternateColor(index),
+                    }}
+                    className={cn(
+                      classNames?.body?.row,
+                      getRowBodyClassNameByCondition({ row, table })
+                    )}
                     data-state={row.getIsSelected() && "selected"}
                     onClick={(e) => {
                       rowBodyOnClick?.(e);
@@ -403,10 +440,13 @@ 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 });
+                          cellBodyHandleClick?.({ e, cell, row, table });
                         }}
                       >
                         {flexRender(
@@ -480,26 +520,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/rbac.tsx

@@ -0,0 +1,255 @@
+
+/* ============================================================
+   RBAC FINAL – BACKEND + FRONTEND – SINGLE FILE
+   ============================================================ */
+
+/* =======================
+   REACT HELPERS (OPTIONAL)
+   ======================= */
+import React, {
+  createContext,
+  useContext,
+} from 'react';
+
+/* =======================
+   SHARED CONCEPT
+   ======================= */
+export type ID = string;
+/**
+ * @example "read"
+ */
+export type Action = string;
+/**
+ * @description Resource is route name
+ * @example "user"
+ */
+export type Resource = string;
+/**
+ * @example "user:read"
+ */
+export type PermissionKey = `${Resource}:${Action}`;
+
+/* =======================
+   BACKEND RBAC (AUTHORITATIVE)
+   ======================= */
+
+export interface Permission {
+  id: ID;
+  action: Action;
+  resource: Resource;
+}
+
+export interface Role {
+  id: ID;
+  name: string;
+  permissions: ID[];
+  inherits?: ID[];
+}
+
+export type ConditionOperator = 'eq' | 'ne' | 'in';
+
+export interface Condition {
+  field: string; // "user.id", "resource.ownerId", "user.tenantId"
+  op: ConditionOperator;
+  value: any;
+}
+
+export interface Policy {
+  id: ID;
+  permissionId: ID;
+  effect: 'allow' | 'deny';
+  conditions?: Condition[];
+}
+
+export interface UserIdentity {
+  id: ID;
+  roles: ID[];
+  tenantId?: ID;
+  [k: string]: any;
+}
+
+/* =======================
+   RBAC STORE INTERFACE
+   ======================= */
+export interface RBACStore {
+  getRoles(ids: ID[]): Promise<Role[]>;
+  getPermissionId(action: Action, resource: Resource): Promise<ID | null>;
+  getPolicies(permissionId: ID): Promise<Policy[]>;
+}
+
+/* =======================
+   BACKEND RBAC ENGINE
+   ======================= */
+
+const getByPath = (obj: any, path: string) =>
+  path.split('.').reduce((o, k) => o?.[k], obj);
+
+const evalCondition = (cond: Condition, ctx: any) => {
+  const left = getByPath(ctx, cond.field);
+  if (cond.op === 'eq') return left === cond.value;
+  if (cond.op === 'ne') return left !== cond.value;
+  if (cond.op === 'in') return Array.isArray(cond.value) && cond.value.includes(left);
+  return false;
+};
+
+const evalConditions = (conds: Condition[] = [], ctx: any) =>
+  conds.every(c => evalCondition(c, ctx));
+
+export async function canAccess(
+  store: RBACStore,
+  user: UserIdentity,
+  action: Action,
+  resource: Resource,
+  context: {
+    resource?: any;
+    request?: any;
+  } = {}
+): Promise<boolean> {
+  const permissionId = await store.getPermissionId(action, resource);
+  if (!permissionId) return false;
+
+  /* ---- Resolve role inheritance ---- */
+  const visited = new Set<ID>();
+  const collect = async (roleId: ID) => {
+    if (visited.has(roleId)) return;
+    visited.add(roleId);
+    const [role] = await store.getRoles([roleId]);
+    for (const p of role?.inherits ?? []) await collect(p);
+  };
+  for (const r of user.roles) await collect(r);
+
+  const roles = await store.getRoles([...visited]);
+  const hasRoleGrant = roles.some(r => r.permissions.includes(permissionId));
+
+  /* ---- Evaluate policies ---- */
+  const policies = await store.getPolicies(permissionId);
+  const ctx = {
+    user,
+    resource: context.resource,
+    request: context.request,
+  };
+
+  for (const p of policies) {
+    if (!evalConditions(p.conditions, ctx)) continue;
+    if (p.effect === 'deny') return false;
+    if (p.effect === 'allow') return hasRoleGrant;
+  }
+
+  return hasRoleGrant;
+}
+
+/* =======================
+   BACKEND MIDDLEWARE
+   ======================= */
+
+export const requirePermission =
+  (store: RBACStore, action: Action, resource: Resource) =>
+  async (req: any, res: any, next: any) => {
+    if (!req.user) return res.status(401).end();
+
+    const ok = await canAccess(store, req.user, action, resource, {
+      resource: req.body ?? req.params,
+      request: req,
+    });
+
+    if (!ok) return res.status(403).end();
+    next();
+  };
+
+/* =======================
+   MEMORY STORE (DEV / DEMO)
+   ======================= */
+
+export function createMemoryRBACStore(data: {
+  roles: Role[];
+  permissions: Permission[];
+  policies: Policy[];
+}): RBACStore {
+  const roleMap = new Map(data.roles.map(r => [r.id, r]));
+  const permMap = new Map<PermissionKey, ID>();
+  const policyMap = new Map<ID, Policy[]>();
+
+  data.permissions.forEach(p =>
+    permMap.set(`${p.resource}:${p.action}`, p.id)
+  );
+
+  data.policies.forEach(p => {
+    const arr = policyMap.get(p.permissionId) ?? [];
+    arr.push(p);
+    policyMap.set(p.permissionId, arr);
+  });
+
+  return {
+    getRoles: async ids => ids.map(id => roleMap.get(id)!).filter(Boolean),
+    getPermissionId: async (a, r) => permMap.get(`${r}:${a}`) ?? null,
+    getPolicies: async pid => policyMap.get(pid) ?? [],
+  };
+}
+
+/* =======================
+   FRONTEND RBAC (UI ONLY)
+   ======================= */
+
+export class FrontendRBAC {
+  private permissions: Set<PermissionKey>;
+
+  constructor(perms: PermissionKey[]) {
+    this.permissions = new Set(perms);
+  }
+
+  can(action: Action, resource: Resource): boolean {
+    return this.permissions.has(`${resource}:${action}`);
+  }
+}
+
+const RBACContext = createContext<FrontendRBAC | null>(null);
+
+export const RBACProvider = ({
+  rbac,
+  children,
+}: {
+  rbac: FrontendRBAC;
+  children: React.ReactNode;
+}) => (
+  <RBACContext.Provider value={rbac}>
+    {children}
+  </RBACContext.Provider>
+);
+
+export const useCan = (action: Action, resource: Resource) => {
+  const rbac = useContext(RBACContext);
+  return rbac?.can(action, resource) ?? false;
+};
+
+export const Can = ({
+  action,
+  resource,
+  children,
+  fallback = null,
+}: any) => {
+  const ok = useCan(action, resource);
+  return ok ? children : fallback;
+};
+
+
+// fully usage fe
+
+// const rbac = new FrontendRBAC(['user:read', 'user:update']);
+// const store = createMemoryRBACStore({
+//   roles: [],
+//   permissions: [],
+//   policies: [],
+// });
+
+// <RBACProvider rbac={rbac}>
+//   <Can action="user:read" resource="user">
+//     <div>Can read user</div>
+//   </Can>
+// </RBACProvider>
+
+// fully usage be
+
+// import { requirePermission } from './rbac';
+// router.use(requirePermission(store, 'read', 'user'));
+
+// app.use(requirePermission(store, 'read', 'user'));

package/components.json

@@ -147,6 +147,11 @@
     "dependencies": [],
     "devDependencies": []
   },
+  "list-map": {
+    "path": "component-templates/components/list-map.tsx",
+    "dependencies": [],
+    "devDependencies": []
+  },
   "loader-slash-gradient": {
     "path": "component-templates/components/loader-slash-gradient.tsx",
     "dependencies": [],
@@ -328,6 +333,11 @@
     "dependencies": [],
     "devDependencies": []
   },
+  "rbac": {
+    "path": "component-templates/providers/rbac.tsx",
+    "dependencies": [],
+    "devDependencies": []
+  },
   "refine-provider": {
     "path": "component-templates/providers/refine-provider.tsx",
     "dependencies": [
@@ -358,9 +368,7 @@
     "dependencies": [
       "js-cookie"
     ],
-    "devDependencies": [
-      "@types/js-cookie"
-    ]
+    "devDependencies": []
   },
   "hash-aes": {
     "path": "component-templates/utils/hash/hash-aes.ts",

package/package.json

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