@cratis/scene.blueprint.default 4.36.0 → 4.37.0

package/foundation/permissionModel.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** A role: a column of the matrix. */
+export interface MatrixRole {
+    id: string;
+    label: string;
+}
+
+/** A permission: a row of the matrix, optionally in a named group. */
+export interface MatrixPermission {
+    id: string;
+    label: string;
+    group?: string;
+}
+
+/** One role holding one permission. */
+export interface MatrixGrant {
+    role: string;
+    permission: string;
+}
+
+/** A named run of permissions, for the group heading rows. */
+export interface MatrixSection {
+    group?: string;
+    permissions: MatrixPermission[];
+}
+
+const records = (value: unknown): Record<string, unknown>[] =>
+    Array.isArray(value) ? value.filter((entry): entry is Record<string, unknown> => typeof entry === 'object' && entry !== null && !Array.isArray(entry)) : [];
+
+/** Reads roles, dropping those without an id and repeated ids. */
+export function readRoles(value: unknown): MatrixRole[] {
+    const seen = new Set<string>();
+    return records(value).flatMap(entry => {
+        if (typeof entry.id !== 'string' || entry.id.length === 0 || seen.has(entry.id)) return [];
+        seen.add(entry.id);
+        return [{ id: entry.id, label: typeof entry.label === 'string' && entry.label.length > 0 ? entry.label : entry.id }];
+    });
+}
+
+/** Reads permissions, dropping those without an id and repeated ids. */
+export function readPermissions(value: unknown): MatrixPermission[] {
+    const seen = new Set<string>();
+    return records(value).flatMap(entry => {
+        if (typeof entry.id !== 'string' || entry.id.length === 0 || seen.has(entry.id)) return [];
+        seen.add(entry.id);
+        return [{ id: entry.id, label: typeof entry.label === 'string' && entry.label.length > 0 ? entry.label : entry.id, ...(typeof entry.group === 'string' && entry.group.length > 0 ? { group: entry.group } : {}) }];
+    });
+}
+
+/** Reads grants, keeping each pair once and only for a role and a permission that exist: a grant of something that was deleted is not shown as held. */
+export function readGrants(value: unknown, roles: MatrixRole[], permissions: MatrixPermission[]): MatrixGrant[] {
+    const roleIds = new Set(roles.map(role => role.id));
+    const permissionIds = new Set(permissions.map(permission => permission.id));
+    const seen = new Set<string>();
+
+    return records(value).flatMap(entry => {
+        const { role, permission } = entry;
+        if (typeof role !== 'string' || typeof permission !== 'string' || !roleIds.has(role) || !permissionIds.has(permission)) return [];
+        const key = `${role}\u0000${permission}`;
+        if (seen.has(key)) return [];
+        seen.add(key);
+        return [{ role, permission }];
+    });
+}
+
+/** Whether a role holds a permission. */
+export const isGranted = (grants: MatrixGrant[], role: string, permission: string): boolean => grants.some(grant => grant.role === role && grant.permission === permission);
+
+/** Grants a permission to a role, or takes it away, leaving every other grant as it was. */
+export const setGrant = (grants: MatrixGrant[], role: string, permission: string, granted: boolean): MatrixGrant[] =>
+    granted ? (isGranted(grants, role, permission) ? grants : [...grants, { role, permission }]) : grants.filter(grant => !(grant.role === role && grant.permission === permission));
+
+/** Groups the permissions into runs by their group, in the order first seen, with the ungrouped ones in a run of their own. */
+export function sectionsOf(permissions: MatrixPermission[]): MatrixSection[] {
+    const sections: MatrixSection[] = [];
+    for (const permission of permissions) {
+        const section = sections.find(candidate => candidate.group === permission.group);
+        if (section) section.permissions.push(permission);
+        else sections.push({ ...(permission.group === undefined ? {} : { group: permission.group }), permissions: [permission] });
+    }
+
+    return sections;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.default",
-    "version": "4.36.0",
+    "version": "4.37.0",
     "description": "The default blueprint: application shell layouts, the screen and dialog templates that go inside them, the components that fill their slots, and two themes.",
     "keywords": [
         "cratis",
@@ -55,15 +55,15 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.36.0",
-        "@cratis/scene.model": "4.36.0",
-        "@cratis/scene.react": "4.36.0"
+        "@cratis/scene.engine": "4.37.0",
+        "@cratis/scene.model": "4.37.0",
+        "@cratis/scene.react": "4.37.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.36.0",
-        "@cratis/scene.model": "4.36.0",
-        "@cratis/scene.primereact": "4.36.0",
-        "@cratis/scene.react": "4.36.0",
+        "@cratis/scene.engine": "4.37.0",
+        "@cratis/scene.model": "4.37.0",
+        "@cratis/scene.primereact": "4.37.0",
+        "@cratis/scene.react": "4.37.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@primeuix/themes": "^3.0.1",

package/shell/layout.css

@@ -1841,3 +1841,187 @@
     color: var(--foundation-danger);
     font-weight: 600;
 }
+
+/* Approval chain. */
+.foundation-approval-chain {
+    padding: var(--foundation-space-4);
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-approval-outcome {
+    margin-block: 0 var(--foundation-space-3);
+    font-weight: 700;
+}
+
+.foundation-approval-steps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--foundation-space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.foundation-approval-step {
+    position: relative;
+    display: flex;
+    flex: 1 1 10rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--foundation-space-1);
+    min-inline-size: 0;
+    padding-block-start: var(--foundation-space-3);
+    border-block-start: 3px solid var(--foundation-border);
+}
+
+.foundation-approval-step[data-state='approved'] { border-block-start-color: var(--foundation-success); }
+.foundation-approval-step[data-state='current'] { border-block-start-color: var(--foundation-info); }
+.foundation-approval-step[data-state='rejected'] { border-block-start-color: var(--foundation-danger); }
+
+.foundation-approval-comment {
+    overflow-wrap: anywhere;
+    font-style: italic;
+}
+
+.foundation-approval-steps[data-orientation='vertical'] {
+    flex-direction: column;
+}
+
+.foundation-approval-steps[data-orientation='vertical'] .foundation-approval-step {
+    flex-basis: auto;
+    padding-block-start: 0;
+    padding-inline-start: var(--foundation-space-3);
+    border-block-start: 0;
+    border-inline-start: 3px solid var(--foundation-border);
+}
+
+.foundation-approval-steps[data-orientation='vertical'] .foundation-approval-step[data-state='approved'] { border-inline-start-color: var(--foundation-success); }
+.foundation-approval-steps[data-orientation='vertical'] .foundation-approval-step[data-state='current'] { border-inline-start-color: var(--foundation-info); }
+.foundation-approval-steps[data-orientation='vertical'] .foundation-approval-step[data-state='rejected'] { border-inline-start-color: var(--foundation-danger); }
+
+@media (max-width: 40rem) {
+    .foundation-approval-steps {
+        flex-direction: column;
+    }
+
+    .foundation-approval-step {
+        flex-basis: auto;
+        padding-block-start: 0;
+        padding-inline-start: var(--foundation-space-3);
+        border-block-start: 0;
+        border-inline-start: 3px solid var(--foundation-border);
+    }
+
+    .foundation-approval-step[data-state='approved'] { border-inline-start-color: var(--foundation-success); }
+    .foundation-approval-step[data-state='current'] { border-inline-start-color: var(--foundation-info); }
+    .foundation-approval-step[data-state='rejected'] { border-inline-start-color: var(--foundation-danger); }
+}
+
+/* Org tree. */
+.foundation-org-tree {
+    padding: var(--foundation-space-2);
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-tree {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.foundation-tree-item {
+    display: flex;
+    align-items: center;
+    gap: var(--foundation-space-2);
+    min-block-size: var(--foundation-row-height);
+    padding-inline-end: var(--foundation-space-2);
+    border-radius: var(--foundation-radius);
+    cursor: pointer;
+}
+
+.foundation-tree-item:hover {
+    background: var(--foundation-hover);
+}
+
+.foundation-tree-item[data-selected='true'] {
+    background: var(--foundation-highlight);
+    color: var(--foundation-highlight-text);
+    box-shadow: inset 3px 0 0 var(--foundation-primary);
+}
+
+.foundation-tree-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-inline-size: 0;
+}
+
+.foundation-tree-spacer {
+    flex: none;
+    inline-size: 2.25rem;
+}
+
+.foundation-tree-item[data-selected='true'] .foundation-count {
+    color: inherit;
+}
+
+/* Permission matrix. */
+.foundation-permission-matrix {
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-matrix-scroll {
+    overflow-x: auto;
+}
+
+.foundation-matrix {
+    inline-size: 100%;
+    border-collapse: collapse;
+}
+
+.foundation-matrix th,
+.foundation-matrix td {
+    min-block-size: var(--foundation-row-height);
+    padding: var(--foundation-space-2) var(--foundation-space-3);
+    border-block-end: 1px solid var(--foundation-border);
+    text-align: center;
+    white-space: nowrap;
+}
+
+.foundation-matrix th[scope='row'],
+.foundation-matrix thead th:first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    background: var(--foundation-surface);
+    text-align: start;
+}
+
+.foundation-matrix-group th {
+    background: var(--foundation-background);
+    color: var(--foundation-muted);
+    font-size: 0.875rem;
+    text-align: start;
+}
+
+.foundation-matrix input[type='checkbox'] {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+}
+
+.foundation-matrix td[data-granted='true'] .foundation-matrix-state {
+    color: var(--foundation-success);
+}
+
+.foundation-matrix-state {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}