@cratis/scene.blueprint.default 4.35.0 → 4.37.0

package/foundation/orgModel.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 person or unit in an organization, with who they report to. */
+export interface OrgNode {
+    id: string;
+    label: string;
+    title?: string;
+    parentId?: string;
+}
+
+/** A node placed in the tree. */
+export interface OrgTreeNode extends OrgNode {
+    children: OrgTreeNode[];
+    depth: number;
+}
+
+/** Reads nodes out of a property value, dropping entries without an id and keeping the first of a repeated id. */
+export function readOrgNodes(value: unknown): OrgNode[] {
+    if (!Array.isArray(value)) return [];
+
+    const seen = new Set<string>();
+    return value.flatMap((entry): OrgNode[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { id, label, title, parentId } = entry as Record<string, unknown>;
+        if (typeof id !== 'string' || id.length === 0 || seen.has(id)) return [];
+        seen.add(id);
+        return [{ id, label: typeof label === 'string' && label.length > 0 ? label : id, ...(typeof title === 'string' ? { title } : {}), ...(typeof parentId === 'string' && parentId.length > 0 ? { parentId } : {}) }];
+    });
+}
+
+/**
+ * Builds the tree from the flat rows a query returns.
+ *
+ * Someone whose manager is not in the data becomes a root rather than vanishing, and a reporting cycle is broken at the node that closes it
+ * - which becomes a root - so malformed data draws something and never loops. Siblings keep the order of the rows.
+ */
+export function buildOrgTree(nodes: OrgNode[]): OrgTreeNode[] {
+    const known = new Set(nodes.map(node => node.id));
+    const parentOf = new Map<string, string | undefined>(nodes.map(node => [node.id, node.parentId !== undefined && known.has(node.parentId) && node.parentId !== node.id ? node.parentId : undefined]));
+
+    for (const node of nodes) {
+        const path = new Set<string>([node.id]);
+        for (let current = parentOf.get(node.id); current !== undefined; current = parentOf.get(current)) {
+            if (path.has(current)) { parentOf.set(node.id, undefined); break; }
+            path.add(current);
+        }
+    }
+
+    const placed = new Map<string, OrgTreeNode>(nodes.map(node => [node.id, { ...node, children: [], depth: 0 }]));
+    const roots: OrgTreeNode[] = [];
+    for (const node of nodes) {
+        const parent = parentOf.get(node.id);
+        if (parent === undefined) roots.push(placed.get(node.id)!);
+        else placed.get(parent)!.children.push(placed.get(node.id)!);
+    }
+
+    const assignDepth = (level: OrgTreeNode[], depth: number) => level.forEach(node => { node.depth = depth; assignDepth(node.children, depth + 1); });
+    assignDepth(roots, 1);
+    return roots;
+}
+
+/** The nodes that can be reached from the roots with the given expansion, in the order they are drawn. */
+export function visibleNodes(roots: OrgTreeNode[], expanded: ReadonlySet<string>): OrgTreeNode[] {
+    return roots.flatMap(node => [node, ...(expanded.has(node.id) ? visibleNodes(node.children, expanded) : [])]);
+}
+
+/** The ids of every node down to a depth: what is expanded when the tree first opens. */
+export function expandedToDepth(roots: OrgTreeNode[], depth: number): Set<string> {
+    const result = new Set<string>();
+    const walk = (level: OrgTreeNode[]) => level.forEach(node => { if (node.depth < depth && node.children.length > 0) result.add(node.id); walk(node.children); });
+    walk(roots);
+    return result;
+}
+
+/** The number of people below a node, at any depth. */
+export const descendantCount = (node: OrgTreeNode): number => node.children.reduce((sum, child) => sum + 1 + descendantCount(child), 0);
+
+/** For each node, the nodes that share its parent (itself included, in order) and its parent: what a tree needs for its set size and position, and for Left to go up. */
+export function placements(roots: OrgTreeNode[]): Map<string, { siblings: OrgTreeNode[]; parent?: OrgTreeNode }> {
+    const result = new Map<string, { siblings: OrgTreeNode[]; parent?: OrgTreeNode }>();
+    const walk = (level: OrgTreeNode[], parent?: OrgTreeNode) => level.forEach(node => { result.set(node.id, { siblings: level, parent }); walk(node.children, node); });
+    walk(roots);
+    return result;
+}

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/foundation/uploadModel.ts

@@ -0,0 +1,66 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Where a file is in being uploaded. */
+export enum UploadStatus {
+    Queued = 'queued',
+    Uploading = 'uploading',
+    Done = 'done',
+    Failed = 'failed',
+}
+
+/** The rules a selection is checked against before anything is sent. */
+export interface UploadRules {
+    /** A comma-separated `accept` list: extensions (`.pdf`), MIME types (`image/png`) and wildcards (`image/*`). */
+    accept: string;
+    maximumBytes: number;
+    multiple: boolean;
+}
+
+/** What the checker needs of a file. */
+export interface SelectedFile {
+    name: string;
+    size: number;
+    type: string;
+}
+
+/** Why a file was refused. */
+export enum UploadRefusal {
+    WrongType = 'wrongType',
+    TooLarge = 'tooLarge',
+    Single = 'single',
+}
+
+/** Whether a file matches an `accept` list; an empty list accepts everything, and matching ignores case. */
+export function matchesAccept(file: SelectedFile, accept: string): boolean {
+    const patterns = accept.split(',').map(pattern => pattern.trim().toLowerCase()).filter(pattern => pattern.length > 0);
+    if (patterns.length === 0) return true;
+
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return patterns.some(pattern => pattern.startsWith('.') ? name.endsWith(pattern) : pattern.endsWith('/*') ? type.startsWith(pattern.slice(0, -1)) : type === pattern);
+}
+
+/** Sorts a selection into the files to take and the reasons for refusing the others. Only the first is taken when one file is allowed. */
+export function checkSelection<T extends SelectedFile>(files: T[], rules: UploadRules, alreadySelected = 0): { accepted: T[]; refused: { file: T; reason: UploadRefusal }[] } {
+    const accepted: T[] = [];
+    const refused: { file: T; reason: UploadRefusal }[] = [];
+
+    for (const file of files) {
+        if (!matchesAccept(file, rules.accept)) refused.push({ file, reason: UploadRefusal.WrongType });
+        else if (rules.maximumBytes > 0 && file.size > rules.maximumBytes) refused.push({ file, reason: UploadRefusal.TooLarge });
+        else if (!rules.multiple && alreadySelected + accepted.length >= 1) refused.push({ file, reason: UploadRefusal.Single });
+        else accepted.push(file);
+    }
+
+    return { accepted, refused };
+}
+
+/** A file size in the largest unit that keeps it under 1024, for the locale. */
+export function formatBytes(bytes: number, locale: string): string {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) { value /= 1024; unit++; }
+    return `${new Intl.NumberFormat(locale, { maximumFractionDigits: unit === 0 ? 0 : 1 }).format(value)} ${units[unit]}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.default",
-    "version": "4.35.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.35.0",
-        "@cratis/scene.model": "4.35.0",
-        "@cratis/scene.react": "4.35.0"
+        "@cratis/scene.engine": "4.37.0",
+        "@cratis/scene.model": "4.37.0",
+        "@cratis/scene.react": "4.37.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.35.0",
-        "@cratis/scene.model": "4.35.0",
-        "@cratis/scene.primereact": "4.35.0",
-        "@cratis/scene.react": "4.35.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

@@ -1607,3 +1607,421 @@
         grid-row: 1;
     }
 }
+
+/* Checklist. */
+.foundation-checklist {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-4);
+    padding: var(--foundation-space-4);
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-checklist-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--foundation-space-2);
+}
+
+.foundation-checklist-header h3 {
+    margin: 0;
+    font-size: 1rem;
+}
+
+.foundation-progress {
+    overflow: hidden;
+    block-size: 0.5rem;
+    margin-block: var(--foundation-space-2);
+    border-radius: 999px;
+    background: var(--foundation-hover);
+    border: 1px solid var(--foundation-border);
+}
+
+.foundation-progress-bar {
+    display: block;
+    block-size: 100%;
+    background: var(--foundation-primary);
+}
+
+.foundation-checklist-items {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.foundation-checklist-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--foundation-space-1) var(--foundation-space-4);
+    min-block-size: var(--foundation-row-height);
+    border-block-end: 1px solid var(--foundation-border);
+}
+
+.foundation-checklist-item[data-done='true'] .foundation-checklist-label {
+    color: var(--foundation-muted);
+    text-decoration: line-through;
+}
+
+.foundation-checklist-meta {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--foundation-space-1) var(--foundation-space-4);
+    color: var(--foundation-muted);
+    font-size: 0.875rem;
+}
+
+.foundation-overdue {
+    color: var(--foundation-danger);
+}
+
+/* Activity feed. */
+.foundation-activity-feed {
+    padding: var(--foundation-space-4);
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-activity-heading {
+    margin: var(--foundation-space-3) 0;
+    color: var(--foundation-muted);
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.foundation-activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.foundation-activity-entry {
+    display: flex;
+    gap: var(--foundation-space-3);
+}
+
+.foundation-activity-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border-radius: 50%;
+    background: var(--foundation-highlight);
+    color: var(--foundation-highlight-text);
+}
+
+.foundation-activity-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-1);
+    min-inline-size: 0;
+}
+
+.foundation-activity-summary,
+.foundation-activity-body {
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.foundation-activity-body {
+    padding: var(--foundation-space-2) var(--foundation-space-3);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-background);
+}
+
+/* Avatar stack. */
+.foundation-avatars {
+    display: inline-flex;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.foundation-avatar {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border: 2px solid var(--foundation-surface);
+    border-radius: 50%;
+    background: var(--foundation-highlight);
+    color: var(--foundation-highlight-text);
+    font-size: 0.875rem;
+    font-weight: 700;
+}
+
+.foundation-avatar + .foundation-avatar {
+    margin-inline-start: calc(var(--foundation-space-3) * -1);
+}
+
+.foundation-avatar img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+}
+
+.foundation-avatar-more {
+    background: var(--foundation-hover);
+    color: var(--foundation-text);
+}
+
+.foundation-avatars[data-size='small'] .foundation-avatar {
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    font-size: 0.75rem;
+}
+
+/* File uploader. */
+.foundation-file-uploader {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-3);
+}
+
+.foundation-dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--foundation-space-2);
+    padding: var(--foundation-space-6);
+    border: 2px dashed var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+    text-align: center;
+}
+
+.foundation-dropzone[data-dragging='true'] {
+    border-color: var(--foundation-primary);
+    background: var(--foundation-highlight);
+}
+
+.foundation-upload-problems {
+    color: var(--foundation-danger);
+}
+
+.foundation-upload-list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.foundation-upload-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--foundation-space-2);
+    min-block-size: var(--foundation-row-height);
+    border-block-end: 1px solid var(--foundation-border);
+}
+
+.foundation-upload-name {
+    flex: 1;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+}
+
+.foundation-upload-item[data-status='failed'] .foundation-upload-status {
+    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;
+}