RolesMatrix

A grid of what each role is allowed to do.

SourcePackage @kerf-js/veneer

Preview

tsx

import { RolesMatrix } from '@kerf-js/veneer'import type { Role } from '@kerf-js/veneer'export function ReadOnly() {  return (  <RolesMatrix    roles={TEAM_ROLES}    permissions={TEAM_PERMISSIONS}  />  )}const TEAM_ROLES: Role[] = [  { value: 'owner', label: 'Owner', manages: true },  { value: 'admin', label: 'Admin', manages: true },  { value: 'member', label: 'Member' },  { value: 'viewer', label: 'Viewer' },]const TEAM_PERMISSIONS = [  {    id: 'view',    label: 'See projects and deploys',    roles: ['owner', 'admin', 'member', 'viewer'],  },  {    id: 'deploy',    label: 'Deploy to production',    roles: ['owner', 'admin', 'member'],  },  {    id: 'env',    label: 'Change environment variables',    roles: ['owner', 'admin', 'member'],  },  {    id: 'invite',    label: 'Invite and remove members',    roles: ['owner', 'admin'],  },  {    id: 'keys',    label: 'Create API keys',    roles: ['owner', 'admin'],  },  {    id: 'billing',    label: 'Change billing and plan',    roles: ['owner'],  },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { RolesMatrix } from '@kerf-js/veneer'<RolesMatrix  roles={TEAM_ROLES}  permissions={TEAM_PERMISSIONS}/>

Editable

Pass onToggle and each cell becomes a checkbox.

tsx

import { state } from '@kerf-js/core'import { RolesMatrix } from '@kerf-js/veneer'import type { Permission } from '@kerf-js/veneer'import type { Role } from '@kerf-js/veneer'export function Edit() {  const rows = state<Permission[]>(TEAM_PERMISSIONS)  const flip = (    p: Permission,    role: string,    on: boolean,  ) => {    rows.value = rows.value.map((x) =>      x.id === p.id        ? {            ...x,            roles: on              ? [...x.roles, role]              : x.roles.filter((r) => r !== role),          }        : x,    )  }  return (    <RolesMatrix      roles={TEAM_ROLES}      permissions={rows.value}      onToggle={flip}    />  )}const TEAM_ROLES: Role[] = [  { value: 'owner', label: 'Owner', manages: true },  { value: 'admin', label: 'Admin', manages: true },  { value: 'member', label: 'Member' },  { value: 'viewer', label: 'Viewer' },]const TEAM_PERMISSIONS = [  {    id: 'view',    label: 'See projects and deploys',    roles: ['owner', 'admin', 'member', 'viewer'],  },  {    id: 'deploy',    label: 'Deploy to production',    roles: ['owner', 'admin', 'member'],  },  {    id: 'env',    label: 'Change environment variables',    roles: ['owner', 'admin', 'member'],  },  {    id: 'invite',    label: 'Invite and remove members',    roles: ['owner', 'admin'],  },  {    id: 'keys',    label: 'Create API keys',    roles: ['owner', 'admin'],  },  {    id: 'billing',    label: 'Change billing and plan',    roles: ['owner'],  },]

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`roles`	`Role[]`	—	The columns.
`permissions`	`Permission[]`	—	The rows: a label and the roles that have it.

Event	Type	Default	Description
`onToggle`	`((permission: Permission, role: string, on: boolean) => void)`	—	Called when a cell changes. Without it the grid is read only.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="roles-matrix"] [data-part="yes"]

yessr-onlyno

RelatedMembers table