izen-react-starter 2.0.0 → 2.1.0

package/README.md

@@ -11,7 +11,7 @@ A modern React component library built with Vite, TypeScript, and best practices
 - 🎨 **Theme Provider**: Dark/light mode with system preference support
 - 🌐 **API Service**: Axios-based service for data fetching and posting
 - 🔄 **React Query Integration**: Built-in query client and provider
-- � **RBAC System**: Role-based access control with customizable permissions
+- 🔐 **RBAC System**: Fully configurable role-based access control - bring your own roles and resources
 - 🎣 **Custom Hooks**: Utility hooks like useIsMobile, useRouter, usePathname
 - 🛠️ **Utility Functions**: Helper functions for common tasks (cn, debounce, throttle, etc.)
 - 💾 **Cache Utilities**: React Query cache manipulation helpers
@@ -559,25 +559,63 @@ export function UsersPage() {
 
 ### Role-Based Access Control (RBAC)
 
+The RBAC system is now fully configurable! Define your own roles, resources, and rules.
+
 ```tsx
 import { 
+  RBACProvider,
   useAccessControl, 
   AccessControlWrapper, 
   withAccessControl,
-  Action, 
-  Resource 
+  CommonActions,
+  RBACConfig 
 } from 'izen-react-starter';
 
-// Using the hook
+// 1. Define your RBAC configuration
+const rbacConfig: RBACConfig = {
+  roles: ['admin', 'editor', 'viewer'],
+  resources: ['posts', 'comments', 'users'],
+  rules: {
+    admin: {
+      [CommonActions.Manage]: { can: 'all' },
+      [CommonActions.Create]: { can: 'all' },
+      [CommonActions.Read]: { can: 'all' },
+      [CommonActions.Update]: { can: 'all' },
+      [CommonActions.Delete]: { can: 'all' },
+    },
+    editor: {
+      [CommonActions.Create]: { can: ['posts', 'comments'] },
+      [CommonActions.Read]: { can: 'all' },
+      [CommonActions.Update]: { can: ['posts', 'comments'] },
+      [CommonActions.Delete]: { can: ['comments'] },
+    },
+    viewer: {
+      [CommonActions.Read]: { can: 'all' },
+    },
+  },
+};
+
+// 2. Wrap your app with RBACProvider
+function App() {
+  return (
+    <AuthProvider>
+      <RBACProvider config={rbacConfig}>
+        <YourApp />
+      </RBACProvider>
+    </AuthProvider>
+  );
+}
+
+// 3. Use access control in your components
 function AdminPanel() {
   const { isAllowed } = useAccessControl();
   
   return (
     <div>
-      {isAllowed(Action.Create, Resource.Users) && (
+      {isAllowed('create', 'users') && (
         <button>Create User</button>
       )}
-      {isAllowed(Action.Delete, Resource.Users) && (
+      {isAllowed('delete', 'users') && (
         <button>Delete User</button>
       )}
     </div>
@@ -587,8 +625,8 @@ function AdminPanel() {
 // Using the wrapper component
 function Dashboard() {
   return (
-    <AccessControlWrapper resource={Resource.Reports} action={Action.Read}>
-      <ReportsPanel />
+    <AccessControlWrapper resource="posts" action="create">
+      <CreatePostButton />
     </AccessControlWrapper>
   );
 }
@@ -597,12 +635,15 @@ function Dashboard() {
 const ProtectedComponent = withAccessControl(MyComponent);
 
 <ProtectedComponent 
-  accessedResource={Resource.Users} 
-  accessAction={Action.Update}
+  accessedResource="users" 
+  accessAction="update"
   otherProp="value" 
 />
 ```
 
+> 📖 **See [RBAC.md](./RBAC.md) for comprehensive documentation** including custom actions, multiple roles, migration guide, and advanced examples.
+```
+
 ### Utility Functions
 
 ```tsx

package/dist/{MIMHJGAX-DM3PPc6i.js → MIMHJGAX-BUG-Z2YP.js}

@@ -1,7 +1,7 @@
 var ws = Object.defineProperty;
 var xs = (e, t, n) => t in e ? ws(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var Re = (e, t, n) => xs(e, typeof t != "symbol" ? t + "" : t, n);
-import { b as $e, d as B, o as xt, e as H, c as L, a as v, P as zo, m as ye, S as K, t as P, i as k, f as U, h as F, j as $s, k as sr, u as Ce, l as V, s as Vn, n as jn, p as ft, q as T, r as Cs, v as cn, w as qe, x as Ss, y as _t, z as Kt, A as ks, B as Es, C as Cn, F as Ds, D as Hr, E as Nt, $ as Ko, G as Ms, H as As, I as W, J as Gr, K as Ts, L as Fs, M as ar, N as Is, O as Os, Q as Kn, R as Ls, T as Ps, U as ie, V as qs, W as _s } from "./index-Dnn3beiE.js";
+import { b as $e, d as B, o as xt, e as H, c as L, a as v, P as zo, m as ye, S as K, t as P, i as k, f as U, h as F, j as $s, k as sr, u as Ce, l as V, s as Vn, n as jn, p as ft, q as T, r as Cs, v as cn, w as qe, x as Ss, y as _t, z as Kt, A as ks, B as Es, C as Cn, F as Ds, D as Hr, E as Nt, $ as Ko, G as Ms, H as As, I as W, J as Gr, K as Ts, L as Fs, M as ar, N as Is, O as Os, Q as Kn, R as Ls, T as Ps, U as ie, V as qs, W as _s } from "./index-BNRXa5M-.js";
 var Rs = (e) => e != null, zs = (e) => e.filter(Rs);
 function Ks(e) {
   return (...t) => {

package/dist/{Q7LWSL4U-Dp8mxbtM.js → Q7LWSL4U-CGtIukTY.js}

@@ -1,5 +1,5 @@
-import { c, T as l, P as m, a as u, D as v, Q as i } from "./MIMHJGAX-DM3PPc6i.js";
-import { g as d, c as f, a as e } from "./index-Dnn3beiE.js";
+import { c, T as l, P as m, a as u, D as v, Q as i } from "./MIMHJGAX-BUG-Z2YP.js";
+import { g as d, c as f, a as e } from "./index-BNRXa5M-.js";
 var h = (t) => {
   const [r, o] = c({
     prefix: "TanstackQueryDevtools"

package/dist/{VLTTJS3N-Dfn6o7Pv.js → VLTTJS3N-DuHfwBTL.js}

@@ -1,5 +1,5 @@
-import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./MIMHJGAX-DM3PPc6i.js";
-import { g as h, c as v, a as e } from "./index-Dnn3beiE.js";
+import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./MIMHJGAX-BUG-Z2YP.js";
+import { g as h, c as v, a as e } from "./index-BNRXa5M-.js";
 var C = (r) => {
   const [t, o] = s({
     prefix: "TanstackQueryDevtools"