@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/task/task-assignment-panel.js

@@ -0,0 +1,450 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-task-assignment-panel";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="panel"] {
+          display: grid;
+          gap: 0.6rem;
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: ${boePanel.background};
+        }
+
+        [part="header"] {
+          display: grid;
+          gap: 0.45rem;
+        }
+
+        [part="title"] {
+          margin: 0;
+          font: inherit;
+          font-size: 1.1rem;
+          font-weight: 700;
+          line-height: 1.15;
+        }
+
+        [part="message"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.55;
+        }
+
+        [part="meta"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+        }
+
+        [part="status"],
+        [part="priority"],
+        [part="due-date"],
+        [part="assignee-status"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.28rem 0.55rem;
+          border-radius: 999px;
+          background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          font-size: 0.78rem;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        [part="priority"] {
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 16%, var(--boe-token-surface-surface, #ffffff));
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 62%, var(--boe-token-text-text, #222222));
+        }
+
+        [part="due-date"] {
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-accent, #5b4b8a) 12%, var(--boe-token-surface-surface, #ffffff));
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-accent, #5b4b8a) 72%, var(--boe-token-text-text, #222222));
+        }
+
+        [part="section-title"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="assignees"],
+        [part="checklist"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="assignee-list"],
+        [part="checklist-items"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="assignee"] {
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr);
+          gap: ${boePanel.gap};
+          align-items: center;
+          padding: 0.65rem 0.75rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          text-align: left;
+          cursor: pointer;
+        }
+
+        [part="assignee-avatar"] {
+          width: 2rem;
+          height: 2rem;
+          display: inline-grid;
+          place-items: center;
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          font-weight: 700;
+          letter-spacing: 0.04em;
+        }
+
+        [part="assignee-meta"] {
+          display: grid;
+          gap: 0.2rem;
+          min-width: 0;
+        }
+
+        [part="assignee-name"],
+        [part="checklist-label"] {
+          font-weight: 600;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="assignee-description"],
+        [part="checklist-description"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.45;
+        }
+
+        [part="checklist-item"] {
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr);
+          gap: ${boePanel.gap};
+          align-items: start;
+          padding: 0.65rem 0.75rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+        }
+
+        [part="checkbox"] {
+          margin-top: 0.2rem;
+        }
+
+        [part="checklist-copy"] {
+          display: grid;
+          gap: 0.2rem;
+        }
+
+        [part="actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${boePanel.gap};
+        }
+
+        [part="action"] {
+          appearance: none;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          padding: 0.4rem 0.7rem;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeNeutralInteractiveStyles('[part="assignee"]')}
+        ${boeFocusVisibleStyles('[part="checkbox"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="assignee"][aria-selected="true"],
+        [part="assignee"][aria-selected="true"]:hover:not(:disabled) {
+          border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+          background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 88%, var(--boe-token-surface-surface, #ffffff) 12%);
+        }
+
+        [part="action"][data-tone="primary"] {
+          border-color: transparent;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+      `;
+export class BoxTaskAssignmentPanelElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "assignees", "checklist", "current-assignee-id", "due-date", "message", "priority", "status", "heading"];
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get assignees() {
+        return this.parseJsonAttribute("assignees", []);
+    }
+    set assignees(value) {
+        this.setAttribute("assignees", JSON.stringify(value));
+    }
+    get checklist() {
+        return this.parseJsonAttribute("checklist", []);
+    }
+    set checklist(value) {
+        this.setAttribute("checklist", JSON.stringify(value));
+    }
+    get currentAssigneeId() {
+        return this.getAttribute("current-assignee-id") ?? "";
+    }
+    set currentAssigneeId(value) {
+        if (!value) {
+            this.removeAttribute("current-assignee-id");
+            return;
+        }
+        this.setAttribute("current-assignee-id", value);
+    }
+    get dueDate() {
+        return this.getAttribute("due-date") ?? "";
+    }
+    set dueDate(value) {
+        if (!value) {
+            this.removeAttribute("due-date");
+            return;
+        }
+        this.setAttribute("due-date", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get priority() {
+        return this.getAttribute("priority") ?? "";
+    }
+    set priority(value) {
+        if (!value) {
+            this.removeAttribute("priority");
+            return;
+        }
+        this.setAttribute("priority", value);
+    }
+    get status() {
+        return this.getAttribute("status") ?? "";
+    }
+    set status(value) {
+        if (!value) {
+            this.removeAttribute("status");
+            return;
+        }
+        this.setAttribute("status", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Task Assignment";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    parseJsonAttribute(name, fallback) {
+        const raw = this.getAttribute(name);
+        if (!raw) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    emitAction(actionId) {
+        this.dispatchEvent(new CustomEvent("action", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                action: actionId,
+                assigneeId: this.currentAssigneeId,
+                checklist: this.checklist,
+            },
+        }));
+    }
+    updateAssignee(assigneeId) {
+        this.currentAssigneeId = assigneeId;
+        this.dispatchEvent(new CustomEvent("assignee-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { assigneeId },
+        }));
+    }
+    updateChecklist(itemId, checked) {
+        const nextChecklist = this.checklist.map(item => (item.id === itemId ? { ...item, checked } : item));
+        this.checklist = nextChecklist;
+        this.dispatchEvent(new CustomEvent("checklist-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { itemId, checked, checklist: nextChecklist },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
+        const statusMarkup = this.status ? `<span part="status">${escapeHtml(this.status)}</span>` : "";
+        const priorityMarkup = this.priority ? `<span part="priority">${escapeHtml(this.priority)}</span>` : "";
+        const dueDateMarkup = this.dueDate ? `<span part="due-date">Due ${escapeHtml(this.dueDate)}</span>` : "";
+        const assigneesMarkup = this.assignees.length
+            ? `
+          <section part="assignees">
+            <div part="section-title">Assignees</div>
+            <div part="assignee-list" role="listbox" aria-label="${escapeHtml(this.heading)} assignees">
+              ${this.assignees
+                .map(assignee => `
+                    <button
+                      type="button"
+                      part="assignee"
+                      role="option"
+                      aria-selected="${String(assignee.id === this.currentAssigneeId)}"
+                      data-assignee-id="${escapeHtml(assignee.id)}"
+                    >
+                      <span part="assignee-avatar">${escapeHtml(assignee.initials ?? assignee.name.slice(0, 2).toUpperCase())}</span>
+                      <span part="assignee-meta">
+                        <span part="assignee-name">${escapeHtml(assignee.name)}</span>
+                        ${assignee.description ? `<span part="assignee-description">${escapeHtml(assignee.description)}</span>` : ""}
+                        ${assignee.status ? `<span part="assignee-status">${escapeHtml(assignee.status)}</span>` : ""}
+                      </span>
+                    </button>
+                  `)
+                .join("")}
+            </div>
+          </section>
+        `
+            : "";
+        const checklistMarkup = this.checklist.length
+            ? `
+          <section part="checklist">
+            <div part="section-title">Checklist</div>
+            <div part="checklist-items">
+              ${this.checklist
+                .map(item => `
+                    <label part="checklist-item">
+                      <input
+                        type="checkbox"
+                        part="checkbox"
+                        data-item-id="${escapeHtml(item.id)}"
+                        ${item.checked ? "checked" : ""}
+                      />
+                      <span part="checklist-copy">
+                        <span part="checklist-label">${escapeHtml(item.label)}</span>
+                        ${item.description ? `<span part="checklist-description">${escapeHtml(item.description)}</span>` : ""}
+                      </span>
+                    </label>
+                  `)
+                .join("")}
+            </div>
+          </section>
+        `
+            : "";
+        const actionsMarkup = this.actions.length
+            ? `
+          <div part="actions">
+            ${this.actions
+                .map(action => `
+                  <button
+                    type="button"
+                    part="action"
+                    data-action-id="${escapeHtml(action.id)}"
+                    data-tone="${escapeHtml(action.tone ?? "neutral")}"
+                  >
+                    ${escapeHtml(action.label)}
+                  </button>
+                `)
+                .join("")}
+          </div>
+        `
+            : "";
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <section part="panel">
+        <header part="header">
+          <h2 part="title">${escapeHtml(this.heading)}</h2>
+          ${messageMarkup}
+          <div part="meta">${statusMarkup}${priorityMarkup}${dueDateMarkup}</div>
+        </header>
+        ${assigneesMarkup}
+        ${checklistMarkup}
+        ${actionsMarkup}
+      </section>
+    `;
+        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const actionId = button.dataset.actionId;
+                if (actionId) {
+                    this.emitAction(actionId);
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="assignee"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const assigneeId = button.dataset.assigneeId;
+                if (assigneeId) {
+                    this.updateAssignee(assigneeId);
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="checkbox"]').forEach(input => {
+            input.addEventListener("change", () => {
+                const itemId = input.dataset.itemId;
+                if (itemId) {
+                    this.updateChecklist(itemId, input.checked);
+                }
+            });
+        });
+    }
+}
+export const defineBoxTaskAssignmentPanelElement = (tagName = DEFAULT_TAG_NAME) => {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, BoxTaskAssignmentPanelElement);
+    }
+};

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "@unofficialbox/box-open-elements",
+  "version": "0.1.0",
+  "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
+  "license": "MIT",
+  "homepage": "https://components.unofficialbox.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unofficialbox/box-open-elements.git"
+  },
+  "bugs": {
+    "url": "https://github.com/unofficialbox/box-open-elements/issues"
+  },
+  "keywords": [
+    "box",
+    "box-ui-elements",
+    "design-system",
+    "web-components",
+    "custom-elements",
+    "ui-components",
+    "framework-agnostic"
+  ],
+  "packageManager": "bun@1.3.11",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./foundations/*": {
+      "types": "./dist/foundations/*/index.d.ts",
+      "import": "./dist/foundations/*/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./patterns/content-explorer": {
+      "types": "./dist/patterns/content-explorer/index.d.ts",
+      "import": "./dist/patterns/content-explorer/index.js"
+    },
+    "./patterns/content-explorer/selection": {
+      "types": "./dist/patterns/content-explorer/selection/index.d.ts",
+      "import": "./dist/patterns/content-explorer/selection/index.js"
+    },
+    "./patterns/content-explorer/collection": {
+      "types": "./dist/patterns/content-explorer/collection/index.d.ts",
+      "import": "./dist/patterns/content-explorer/collection/index.js"
+    },
+    "./patterns/content-explorer/navigation": {
+      "types": "./dist/patterns/content-explorer/navigation/index.d.ts",
+      "import": "./dist/patterns/content-explorer/navigation/index.js"
+    },
+    "./patterns/content-explorer/actions": {
+      "types": "./dist/patterns/content-explorer/actions/index.d.ts",
+      "import": "./dist/patterns/content-explorer/actions/index.js"
+    },
+    "./patterns/search": {
+      "types": "./dist/patterns/search/index.d.ts",
+      "import": "./dist/patterns/search/index.js"
+    },
+    "./patterns/item": {
+      "types": "./dist/patterns/item/index.d.ts",
+      "import": "./dist/patterns/item/index.js"
+    },
+    "./patterns/metadata": {
+      "types": "./dist/patterns/metadata/index.d.ts",
+      "import": "./dist/patterns/metadata/index.js"
+    },
+    "./patterns/share": {
+      "types": "./dist/patterns/share/index.d.ts",
+      "import": "./dist/patterns/share/index.js"
+    },
+    "./patterns/preview": {
+      "types": "./dist/patterns/preview/index.d.ts",
+      "import": "./dist/patterns/preview/index.js"
+    },
+    "./patterns/file-request": {
+      "types": "./dist/patterns/file-request/index.d.ts",
+      "import": "./dist/patterns/file-request/index.js"
+    },
+    "./patterns/task": {
+      "types": "./dist/patterns/task/index.d.ts",
+      "import": "./dist/patterns/task/index.js"
+    },
+    "./patterns/governance": {
+      "types": "./dist/patterns/governance/index.d.ts",
+      "import": "./dist/patterns/governance/index.js"
+    },
+    "./patterns/insights": {
+      "types": "./dist/patterns/insights/index.d.ts",
+      "import": "./dist/patterns/insights/index.js"
+    },
+    "./patterns/*": {
+      "types": "./dist/patterns/*.d.ts",
+      "import": "./dist/patterns/*.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "build:watch": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "prepublishOnly": "bun run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p packages/box-server/tsconfig.json --noEmit && tsc -p packages/react/tsconfig.json --noEmit && tsc -p storybook/tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "verify": "bun run typecheck && bun run test:coverage && bun run build",
+    "style-bridge": "bun tools/style-bridge/cli.ts",
+    "style-bridge:bue-explorer": "bun tools/style-bridge/cli.ts --config tools/style-bridge/configs/box-ui-elements/content-explorer.config.json --input tools/style-bridge/libraries/box-ui-elements/content-explorer/index.scss --out tools/style-bridge/out/box-ui-elements/content-explorer.css --report tools/style-bridge/out/box-ui-elements/content-explorer.report.json",
+    "preview:capture": "bun run build && bun tools/preview/capture.ts",
+    "docs": "bun run build && bun docs-site/server.ts",
+    "docs:typecheck": "tsc -p docs-site/tsconfig.json",
+    "docs:build": "bun run build && bun docs-site/build.ts",
+    "site:build": "bun run build && bun docs-site/build.ts",
+    "docs:shots": "bun run build && bun tools/preview/docs-site-shots.ts",
+    "test:regression": "bun run build && bun tools/preview/regression.ts",
+    "test:regression:pixel": "bash tools/preview/container-run.sh 'bun run test:regression -- --pixel'",
+    "baselines:regen": "bash tools/preview/container-run.sh 'bun run build && bun tools/preview/capture.ts && bun tools/preview/docs-site-shots.ts'",
+    "icons:generate": "bun tools/iconography/generate-box-iconography.ts",
+    "bue-conformance": "bun tools/bue-conformance/audit.ts",
+    "bue-conformance:color": "bun tools/bue-conformance/color-audit.ts",
+    "bue-conformance:webapp": "bun tools/bue-conformance/webapp-audit.ts",
+    "storybook:extract": "bun storybook/extract.ts",
+    "storybook:dev": "bun run build && bun storybook/server.ts",
+    "storybook:build": "bun run build && bun storybook/build.ts"
+  },
+  "devDependencies": {
+    "@types/pngjs": "^6.0.5",
+    "@types/react": "19",
+    "@types/react-dom": "19",
+    "@vitest/coverage-v8": "^4.1.2",
+    "bun-types": "^1.3.14",
+    "jsdom": "^29.0.1",
+    "pixelmatch": "^7.2.0",
+    "playwright-core": "^1.61.1",
+    "pngjs": "^7.0.0",
+    "react": "19",
+    "react-dom": "19",
+    "typescript": "^5.8.2",
+    "vitest": "^4.1.2"
+  }
+}