@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/item/preview-header.js

@@ -0,0 +1,323 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-preview-header";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const escapeSelectorValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+          --_obp-surface: var(--boe-token-surface-surface, #ffffff);
+          --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
+          --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          --_obp-border-subtle: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+          --_obp-text-muted: var(--boe-token-text-text-secondary, #6f6f6f);
+          --_obp-brand: var(--boe-token-surface-surface-brand, #0061d5);
+          --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+        }
+
+        [part="header"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid var(--_obp-border);
+          border-radius: ${boePanel.radius};
+          background: var(--_obp-surface-muted);
+        }
+
+        [part="breadcrumbs"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        [part="breadcrumb"] {
+          border: none;
+          padding: 0;
+          background: none;
+          color: var(--_obp-text-muted);
+          font: inherit;
+          cursor: pointer;
+        }
+
+        [part="separator"] {
+          color: color-mix(in srgb, var(--_obp-text-muted) 62%, transparent);
+        }
+
+        [part="main"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="title-row"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: ${boePanel.gap};
+        }
+
+        [part="title"] {
+          margin: 0;
+          font: inherit;
+          font-size: 1.15rem;
+          font-weight: 700;
+          line-height: 1.15;
+        }
+
+        [part="status"] {
+          display: inline-flex;
+          padding: 0.42rem 0.7rem;
+          border-radius: 999px;
+          background: var(--_obp-brand-soft);
+          color: var(--_obp-brand);
+          font-size: 0.82rem;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        [part="message"] {
+          color: var(--_obp-text-muted);
+          line-height: 1.6;
+        }
+
+        [part="actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${boePanel.gap};
+        }
+
+        [part="action"] {
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: 999px;
+          padding: 0.4rem 0.7rem;
+          background: var(--_obp-surface);
+          color: inherit;
+          font: inherit;
+          font-weight: 700;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeNeutralInteractiveStyles('[part="breadcrumb"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="action"][data-tone="primary"] {
+          background: var(--_obp-brand);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          border-color: var(--_obp-brand);
+        }
+      `;
+export class BoxPreviewHeaderElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "breadcrumbs", "message", "status", "heading"];
+    }
+    breadcrumbsEl;
+    titleEl;
+    statusEl;
+    messageEl;
+    actionsEl;
+    breadcrumbsSignature = "";
+    actionsSignature = "";
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get breadcrumbs() {
+        return this.parseJsonAttribute("breadcrumbs", []);
+    }
+    set breadcrumbs(value) {
+        this.setAttribute("breadcrumbs", JSON.stringify(value));
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get status() {
+        return this.getAttribute("status") ?? "";
+    }
+    set status(value) {
+        this.setAttribute("status", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "";
+    }
+    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 },
+        }));
+    }
+    emitBreadcrumbSelected(id) {
+        this.dispatchEvent(new CustomEvent("breadcrumb-selected", {
+            bubbles: true,
+            composed: true,
+            detail: { id },
+        }));
+    }
+    breadcrumbsKey() {
+        return JSON.stringify(this.breadcrumbs.map(crumb => crumb.id));
+    }
+    actionsKey() {
+        return JSON.stringify(this.actions.map(action => action.id));
+    }
+    rebuildBreadcrumbs() {
+        this.breadcrumbsEl.innerHTML = this.breadcrumbs
+            .map(crumb => `
+          <button type="button" part="breadcrumb" data-crumb-id="${escapeHtml(crumb.id)}">
+            ${escapeHtml(crumb.label)}
+          </button>
+        `)
+            .join('<span part="separator">/</span>');
+    }
+    patchBreadcrumbLabels() {
+        this.breadcrumbs.forEach(crumb => {
+            const button = this.breadcrumbsEl.querySelector(`[data-crumb-id="${escapeSelectorValue(crumb.id)}"]`);
+            if (button) {
+                button.textContent = crumb.label;
+            }
+        });
+    }
+    rebuildActions() {
+        this.actionsEl.innerHTML = 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("");
+    }
+    patchActionLabels() {
+        this.actions.forEach(action => {
+            const button = this.actionsEl.querySelector(`[data-action-id="${escapeSelectorValue(action.id)}"]`);
+            if (!button) {
+                return;
+            }
+            button.textContent = action.label;
+            button.dataset.tone = action.tone ?? "neutral";
+        });
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <section part="header">
+        <nav part="breadcrumbs" aria-label="Preview breadcrumbs" hidden></nav>
+        <div part="main">
+          <div part="title-row">
+            <h2 part="title"></h2>
+            <div part="status" hidden></div>
+          </div>
+          <div part="message" hidden></div>
+        </div>
+        <div part="actions" hidden></div>
+      </section>
+    `;
+        this.breadcrumbsEl = this.shadowRoot.querySelector('[part="breadcrumbs"]');
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
+        this.messageEl = this.shadowRoot.querySelector('[part="message"]');
+        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
+    }
+    setupListeners() {
+        this.actionsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="action"]');
+            if (!button || !this.actionsEl.contains(button)) {
+                return;
+            }
+            const actionId = button.dataset.actionId ?? "";
+            if (actionId) {
+                this.emitAction(actionId);
+            }
+        });
+        this.breadcrumbsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="breadcrumb"]');
+            if (!button || !this.breadcrumbsEl.contains(button)) {
+                return;
+            }
+            const id = button.dataset.crumbId ?? "";
+            if (id) {
+                this.emitBreadcrumbSelected(id);
+            }
+        });
+    }
+    update() {
+        if (!this.titleEl || !this.actionsEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.statusEl.hidden = !this.status;
+        this.statusEl.textContent = this.status;
+        this.messageEl.hidden = !this.message;
+        this.messageEl.textContent = this.message;
+        const breadcrumbs = this.breadcrumbs;
+        this.breadcrumbsEl.hidden = breadcrumbs.length === 0;
+        const nextBreadcrumbs = this.breadcrumbsKey();
+        if (nextBreadcrumbs !== this.breadcrumbsSignature || this.breadcrumbsEl.childElementCount === 0) {
+            this.breadcrumbsSignature = nextBreadcrumbs;
+            this.rebuildBreadcrumbs();
+        }
+        else {
+            this.patchBreadcrumbLabels();
+        }
+        const actions = this.actions;
+        this.actionsEl.hidden = actions.length === 0;
+        const nextActions = this.actionsKey();
+        if (nextActions !== this.actionsSignature || this.actionsEl.childElementCount === 0) {
+            this.actionsSignature = nextActions;
+            this.rebuildActions();
+        }
+        else {
+            this.patchActionLabels();
+        }
+    }
+}
+export const defineBoxPreviewHeaderElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPreviewHeaderElement);
+    return BoxPreviewHeaderElement;
+};

package/dist/patterns/metadata/contracts.d.ts

@@ -0,0 +1,75 @@
+export interface MetadataFetchLike {
+    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
+}
+export type MetadataFieldType = "string" | "enum" | "float" | "integer" | "date" | "bool" | "multiSelect";
+export interface MetadataFieldDefinition {
+    key: string;
+    label: string;
+    type: MetadataFieldType;
+    description?: string;
+    required?: boolean;
+    options?: string[];
+}
+export interface MetadataTemplateDefinition {
+    key: string;
+    label: string;
+    scope: string;
+    fields: MetadataFieldDefinition[];
+}
+export interface MetadataInstance {
+    id?: string;
+    scope: string;
+    templateKey: string;
+    values: Record<string, unknown>;
+}
+export interface MetadataRequestContext {
+    locale?: string;
+    requestId?: string;
+    signal?: AbortSignal;
+}
+export interface MetadataQueryInput {
+    templateKey: string;
+    scope?: string;
+    filters: Record<string, unknown>;
+    limit?: number;
+    offset?: number;
+    context?: MetadataRequestContext;
+}
+export interface MetadataPage<TItem> {
+    entries: TItem[];
+    limit: number;
+    offset: number;
+    totalCount: number | null;
+}
+export interface MetadataDataSource<TItem = unknown> {
+    listTemplates(context?: MetadataRequestContext): Promise<MetadataTemplateDefinition[]>;
+    listInstances(input: {
+        itemId: string;
+        itemType: "file" | "folder";
+        context?: MetadataRequestContext;
+    }): Promise<MetadataInstance[]>;
+    updateInstance(input: {
+        itemId: string;
+        itemType: "file" | "folder";
+        instance: MetadataInstance;
+        context?: MetadataRequestContext;
+    }): Promise<MetadataInstance>;
+    query(input: MetadataQueryInput): Promise<MetadataPage<TItem>>;
+}
+export interface MetadataHttpDataSourceOptions<TItem = unknown> {
+    baseUrl?: string;
+    fetch?: MetadataFetchLike;
+    headers?: Record<string, string>;
+    buildListTemplatesUrl?: () => string;
+    buildListInstancesUrl?: (input: {
+        itemId: string;
+        itemType: "file" | "folder";
+    }) => string;
+    buildUpdateInstanceUrl?: (input: {
+        itemId: string;
+        itemType: "file" | "folder";
+        instance: MetadataInstance;
+    }) => string;
+    buildQueryUrl?: () => string;
+}
+export declare const createHttpMetadataDataSource: <TItem = unknown>(options?: MetadataHttpDataSourceOptions<TItem>) => MetadataDataSource<TItem>;

package/dist/patterns/metadata/contracts.js

@@ -0,0 +1,91 @@
+const resolveFetch = (providedFetch) => {
+    if (providedFetch) {
+        return providedFetch;
+    }
+    if (typeof globalThis.fetch !== "function") {
+        throw new Error("A fetch implementation is required to use the metadata HTTP data source.");
+    }
+    return globalThis.fetch.bind(globalThis);
+};
+const getErrorMessage = async (response) => {
+    try {
+        const payload = (await response.json());
+        if (payload.message) {
+            return payload.code ? `${payload.code}: ${payload.message}` : payload.message;
+        }
+    }
+    catch {
+        // ignore parse issues and fall back to status text
+    }
+    return `Metadata request failed with status ${response.status}`;
+};
+export const createHttpMetadataDataSource = (options = {}) => {
+    const fetchImpl = resolveFetch(options.fetch);
+    const baseUrl = (options.baseUrl ?? "/api/metadata").replace(/\/$/, "");
+    const withContextHeaders = (context) => ({
+        accept: "application/json",
+        ...(context?.locale ? { "accept-language": context.locale } : {}),
+        ...(context?.requestId ? { "x-request-id": context.requestId } : {}),
+        ...options.headers,
+    });
+    const readJson = async (response) => {
+        if (!response.ok) {
+            throw new Error(await getErrorMessage(response));
+        }
+        return (await response.json());
+    };
+    return {
+        async listTemplates(context) {
+            const url = options.buildListTemplatesUrl?.() ?? `${baseUrl}/templates`;
+            const response = await fetchImpl(url, {
+                method: "GET",
+                headers: withContextHeaders(context),
+                signal: context?.signal,
+            });
+            return readJson(response);
+        },
+        async listInstances(input) {
+            const url = options.buildListInstancesUrl?.(input) ??
+                `${baseUrl}/items/${encodeURIComponent(input.itemType)}/${encodeURIComponent(input.itemId)}/instances`;
+            const response = await fetchImpl(url, {
+                method: "GET",
+                headers: withContextHeaders(input.context),
+                signal: input.context?.signal,
+            });
+            return readJson(response);
+        },
+        async updateInstance(input) {
+            const url = options.buildUpdateInstanceUrl?.(input) ??
+                `${baseUrl}/items/${encodeURIComponent(input.itemType)}/${encodeURIComponent(input.itemId)}/instances/${encodeURIComponent(input.instance.templateKey)}`;
+            const response = await fetchImpl(url, {
+                method: "PUT",
+                headers: {
+                    ...withContextHeaders(input.context),
+                    "content-type": "application/json",
+                },
+                body: JSON.stringify(input.instance),
+                signal: input.context?.signal,
+            });
+            return readJson(response);
+        },
+        async query(input) {
+            const url = options.buildQueryUrl?.() ?? `${baseUrl}/query`;
+            const response = await fetchImpl(url, {
+                method: "POST",
+                headers: {
+                    ...withContextHeaders(input.context),
+                    "content-type": "application/json",
+                },
+                body: JSON.stringify({
+                    templateKey: input.templateKey,
+                    scope: input.scope,
+                    filters: input.filters,
+                    limit: input.limit,
+                    offset: input.offset,
+                }),
+                signal: input.context?.signal,
+            });
+            return readJson(response);
+        },
+    };
+};

package/dist/patterns/metadata/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./contracts.js";
+export * from "./schemas.js";
+export * from "./metadata-filter-builder.js";
+export * from "./metadata-inspector.js";

package/dist/patterns/metadata/index.js

@@ -0,0 +1,4 @@
+export * from "./contracts.js";
+export * from "./schemas.js";
+export * from "./metadata-filter-builder.js";
+export * from "./metadata-inspector.js";

package/dist/patterns/metadata/metadata-filter-builder.d.ts

@@ -0,0 +1,43 @@
+import { BaseElement } from "../../core/index.js";
+type MetadataFilterField = {
+    id: string;
+    label: string;
+};
+type MetadataFilterRule = {
+    field: string;
+    operator: string;
+    value: string;
+};
+export declare class BoxMetadataFilterBuilderElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private rulesInternal;
+    private syncingFromUi;
+    private labelEl;
+    private rulesEl;
+    private structureSignature;
+    get fields(): MetadataFilterField[];
+    set fields(value: MetadataFilterField[]);
+    get label(): string;
+    set label(value: string);
+    get rules(): MetadataFilterRule[];
+    set rules(value: MetadataFilterRule[]);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private syncRulesFromAttributes;
+    private emitValueChanged;
+    private writeRulesAttribute;
+    private updateRule;
+    private addRule;
+    private removeRule;
+    private renderFieldOptions;
+    private renderOperatorOptions;
+    private renderRulesMarkup;
+    private structureKey;
+    private patchRuleControls;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxMetadataFilterBuilderElement: (tagName?: string) => typeof BoxMetadataFilterBuilderElement;
+export {};