kmod-cli 1.6.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/table/data-table.tsx

@@ -8,6 +8,7 @@ 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,
@@ -90,9 +91,11 @@ export type TableCellProps<TData, TValue> =
       e,
       table,
       cell,
+      row
     }: {
       e: React.MouseEvent<HTMLTableCellElement>;
       cell: Cell<TData, TValue>;
+      row: Row<TData>;
       table: ITable<TData>;
     }) => void;
   };
@@ -365,14 +368,22 @@ export function DataTable<TData, TValue>({
                       classNames?.header?.head
                     )}
                     style={{
-                      width: header.getSize() ? `${header.getSize()}px !important` : "auto",
+                      width: header.getSize()
+                        ? `${header.getSize()}px !important`
+                        : "auto",
                     }}
                     onClick={(e) => {
                       cellHeadOnClick?.(e);
                       cellHeadHandleClick?.({ e, table, cell: header });
                     }}
                   >
-                    <div className={cn("flex items-center gap-1 w-fit", classNames?.header?.content, getCellHeadClassNameByCondition({cell: header, table}))}>
+                    <div
+                      className={cn(
+                        "flex items-center gap-1 w-fit",
+                        classNames?.header?.content,
+                        getCellHeadClassNameByCondition({ cell: header, table })
+                      )}
+                    >
                       {flexRender(
                         header.column.columnDef.header,
                         header.getContext()
@@ -407,13 +418,18 @@ export function DataTable<TData, TValue>({
             {!isLoading &&
               table.getRowModel().rows.length > 0 &&
               table.getRowModel().rows.map((row, index) => {
-
                 return (
                   <TableRow
                     {...rowBodyDomProps}
                     key={row.id}
-                    style={{...rowBodyStyle, backgroundColor: getAlternateColor(index)}}
-                    className={cn(classNames?.body?.row, getRowBodyClassNameByCondition({row,table}))}
+                    style={{
+                      ...rowBodyStyle,
+                      backgroundColor: getAlternateColor(index),
+                    }}
+                    className={cn(
+                      classNames?.body?.row,
+                      getRowBodyClassNameByCondition({ row, table })
+                    )}
                     data-state={row.getIsSelected() && "selected"}
                     onClick={(e) => {
                       rowBodyOnClick?.(e);
@@ -424,10 +440,13 @@ export function DataTable<TData, TValue>({
                       <TableCell
                         {...cellBodyDomProps}
                         key={cell.id}
-                        className={cn(classNames?.body?.cell, getCellBodyClassNameByCondition({cell, table}))}
+                        className={cn(
+                          classNames?.body?.cell,
+                          getCellBodyClassNameByCondition({ cell, table })
+                        )}
                         onClick={(e) => {
                           cellBodyOnClick?.(e);
-                          cellBodyHandleClick?.({ e, cell, table });
+                          cellBodyHandleClick?.({ e, cell, row, table });
                         }}
                       >
                         {flexRender(

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.6.0",
+  "version": "1.7.1",
   "description": "Stack components utilities fast setup in projects",
   "author": "kumo_d",
   "license": "MIT",