feat(permissions): Adding the permission shield overlay to Sistent base components

src/base/Button/Button.tsx

@@ -1,13 +1,34 @@
 import { Button as MuiButton, type ButtonProps as MuiButtonProps } from '@mui/material';
+import React from 'react';
+import { Key, PermissionShield } from '../../custom/permissions';
 
 export interface ButtonProps extends MuiButtonProps {
   label?: string;
   children?: React.ReactNode;
+  permissionKey?: Key;
 }
 
-export function Button({ label, children, ...props }: ButtonProps): JSX.Element {
+export function Button({
+  label,
+  children,
+  permissionKey,
+  disabled,
+  ...props
+}: ButtonProps): JSX.Element {
+  // When disabled AND permissionKey is provided, show the shield overlay
+  if (disabled && permissionKey) {
+    return (
+      <PermissionShield permissionKey={permissionKey} variant="badge">
+        <MuiButton {...props} disabled={true}>
+          {label}
+          {children}
+        </MuiButton>
+      </PermissionShield>
+    );
+  }
+
   return (
-    <MuiButton {...props}>
+    <MuiButton {...props} disabled={disabled}>
       {label}
       {children}
     </MuiButton>

src/base/IconButton/IconButton.tsx

@@ -3,12 +3,26 @@ import {
   type IconButtonProps as MuiIconButtonProps
 } from '@mui/material';
 import React from 'react';
+import { Key, PermissionShield } from '../../custom/permissions';
 
-export type IconButtonProps = MuiIconButtonProps;
+export interface IconButtonProps extends MuiIconButtonProps {
+  permissionKey?: Key;
+}
 
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => (
-  <MuiIconButton ref={ref} {...props} />
-));
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
+  const { permissionKey, disabled, ...rest } = props;
+
+  // When disabled AND permissionKey is provided, show the shield overlay
+  if (disabled && permissionKey) {
+    return (
+      <PermissionShield permissionKey={permissionKey} variant="badge">
+        <MuiIconButton ref={ref} {...rest} disabled={true} />
+      </PermissionShield>
+    );
+  }
+
+  return <MuiIconButton ref={ref} {...rest} disabled={disabled} />;
+});
 
 IconButton.displayName = 'IconButton';
 

src/base/ListItem/ListItem.tsx

@@ -1,8 +1,29 @@
 import { ListItem as MuiListItem, ListItemProps as MuiListItemProps } from '@mui/material';
 import React from 'react';
+import { Key, PermissionShield } from '../../custom/permissions';
 
-const ListItem = React.forwardRef<HTMLLIElement, MuiListItemProps>((props, ref) => {
-  return <MuiListItem {...props} ref={ref} />;
+export interface ListItemProps extends MuiListItemProps {
+  permissionKey?: Key;
+  disabled?: boolean;
+}
+
+const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
+  const { permissionKey, disabled, ...rest } = props;
+
+  // When disabled AND permissionKey is provided, show the shield overlay
+  // Note: MUI ListItem doesn't have a native `disabled` prop, so we only use
+  // it as a custom guard for the PermissionShield wrapper
+  if (disabled && permissionKey) {
+    return (
+      <PermissionShield permissionKey={permissionKey} variant="inline">
+        <MuiListItem {...rest} ref={ref} />
+      </PermissionShield>
+    );
+  }
+
+  return <MuiListItem {...rest} ref={ref} />;
 });
 
+ListItem.displayName = 'ListItem';
+
 export default ListItem;

src/base/ListItemButton/ListItemButton.tsx

@@ -3,9 +3,28 @@ import {
   ListItemButtonProps as MuiListItemButtonProps
 } from '@mui/material';
 import React from 'react';
+import { Key, PermissionShield } from '../../custom/permissions';
 
-const ListItemButton = React.forwardRef<HTMLDivElement, MuiListItemButtonProps>((props, ref) => {
-  return <MuiListItemButton {...props} ref={ref} />;
+export interface ListItemButtonProps extends MuiListItemButtonProps {
+  permissionKey?: Key;
+}
+
+const ListItemButton = React.forwardRef<HTMLDivElement, ListItemButtonProps>((props, ref) => {
+  const { permissionKey, disabled, ...rest } = props;
+
+  // When disabled AND permissionKey is provided, show the shield overlay
+  if (disabled && permissionKey) {
+    return (
+      <PermissionShield permissionKey={permissionKey} variant="inline">
+        <MuiListItemButton {...rest} ref={ref} disabled={true} />
+      </PermissionShield>
+    );
+  }
+
+  return <MuiListItemButton {...rest} ref={ref} disabled={disabled} />;
 });
 
+ListItemButton.displayName = 'ListItemButton';
+
 export { ListItemButton };
+export default ListItemButton;

src/base/MenuItem/MenuItem.tsx

@@ -1,7 +1,24 @@
 import { MenuItem as MuiMenuItem, MenuItemProps as MuiMenuItemProps } from '@mui/material';
+import React from 'react';
+import { Key, PermissionShield } from '../../custom/permissions';
 
-export function MenuItem(props: MuiMenuItemProps): JSX.Element {
-  return <MuiMenuItem {...props} />;
+export interface MenuItemProps extends MuiMenuItemProps {
+  permissionKey?: Key;
+}
+
+export function MenuItem(props: MenuItemProps): JSX.Element {
+  const { permissionKey, disabled, ...rest } = props;
+
+  // When disabled AND permissionKey is provided, show the shield overlay
+  if (disabled && permissionKey) {
+    return (
+      <PermissionShield permissionKey={permissionKey} variant="inline">
+        <MuiMenuItem {...rest} disabled={true} />
+      </PermissionShield>
+    );
+  }
+
+  return <MuiMenuItem {...rest} disabled={disabled} />;
 }
 
 export default MenuItem;