@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/studio/EveryUse.tsx

@@ -0,0 +1,244 @@
+// EVERY USE (C4): the centre's list of every place the open component is
+// used, in place of the preview (no stage, no transport).
+//
+//   USED IN     this document's uses, live: board cards and Shot layers (and
+//               layers inside other definitions), each with what it changed.
+//               A row picks the use for THIS USE on the right; "Go to" opens
+//               it where it lives. Then the usage index's uses in OTHER
+//               Projects, whose row opens that Project.
+//   COMMUNITY   the owner's side of a published component: how many people
+//               added the published version, and, when the master is ahead of
+//               it, what their copies will show after the next publish.
+//
+// The crumb's "used in N places" opens and closes it (`openComponentUses`);
+// the view belongs to the subject it was opened on (`usesViewOf`).
+import { useEffect, useMemo, useState } from "react";
+import { sceneHref } from "@dailies-studio/ui";
+import type { ComponentUse } from "@dailies-studio/shot/doc";
+import * as api from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import type { ComponentsSelection } from "../../state/types.js";
+import { changeLabel, propLabelOf, useKeyOf, useRowText, usesOfSubject, usesViewOf } from "../../state/workspace.js";
+import { useSignedIn } from "../header/AccountAvatar.js";
+import { leaveFor } from "../header/leave.js";
+import { addedLine } from "../share/ShareComponentDialog.js";
+import { useOtherProjectUses, useSubjectRow } from "./componentParts.js";
+
+/** The change chip: a dot and "1 change: Tilt", or a quiet "No changes". */
+function ChangeChip(props: { use: Pick<ComponentUse, "overrides">; labelOf: (key: string) => string }) {
+  if (props.use.overrides.length === 0) {
+    return <span className="every-use-nochange">No changes</span>;
+  }
+  return (
+    <span className="use-chip" data-testid="every-use-changes">
+      <span className="use-dot" aria-hidden="true" />
+      {changeLabel(props.use, props.labelOf)}
+    </span>
+  );
+}
+
+export function EveryUse() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const contracts = useShotEditor((s) => s.contracts);
+  const view = useShotEditor(usesViewOf);
+  const row = useSubjectRow();
+  const others = useOtherProjectUses();
+  const subject = view?.subject ?? null;
+  const local = useMemo(
+    () => (doc === null || subject === null ? [] : usesOfSubject(doc, subject, contracts)),
+    [doc, subject, contracts],
+  );
+  // A code component's labels and defaults come from its contract.
+  const module = subject?.kind === "code" ? subject.module : null;
+  useEffect(() => {
+    if (module !== null) void store.loadContract(module);
+  }, [store, module]);
+  if (doc === null || view === null || subject === null) return null;
+
+  const master: Pick<ComponentUse, "def" | "component"> =
+    subject.kind === "studio" ? { def: subject.def } : { component: subject.module };
+  const labelOf = (key: string): string => propLabelOf(doc, contracts, master, key);
+  const total = local.length + others.length;
+  // A Studio-made master reaches this Project's uses live. Other Projects
+  // hold copies, which move only when their author takes Update available
+  // (`updateComponentCopy`), and one not recorded yet has no copies at all.
+  const note =
+    subject.kind === "code"
+      ? "All on the latest build · code edits reach them live"
+      : row === undefined
+        ? "Master edits reach them live"
+        : `Master v${row.version} · edits reach this Project live, other Projects through Update available`;
+
+  return (
+    <div className="every-use" data-testid="every-use">
+      <div className="every-use-head">
+        <h3 className="every-use-caps" data-testid="every-use-count">
+          Used in {total} {total === 1 ? "place" : "places"}
+        </h3>
+        <span className="every-use-note">{note}</span>
+      </div>
+      {total === 0 ? (
+        <p className="every-use-empty" data-testid="every-use-empty">
+          Not used anywhere yet. Add it to the storyboard or use it in a shot.
+        </p>
+      ) : (
+        <ul className="every-use-list" data-testid="every-use-list">
+          {local.map((use) => {
+            const key = useKeyOf(use);
+            return (
+              <UseRow
+                key={key}
+                useKey={key}
+                use={use}
+                text={useRowText(doc, use)}
+                selected={view.use === key}
+                labelOf={labelOf}
+              />
+            );
+          })}
+          {others.map((use, i) => (
+            <OtherProjectRow key={`${use.projectId}:${use.layerId ?? use.referenceId ?? i}`} use={use} labelOf={labelOf} />
+          ))}
+        </ul>
+      )}
+      {subject.kind === "studio" && row !== undefined ? <CommunityCopies subject={subject} row={row} /> : null}
+    </div>
+  );
+}
+
+/** A use in this document: picking it shows THIS USE; Go to opens it. */
+function UseRow(props: {
+  useKey: string;
+  use: ComponentUse;
+  text: { kind: "BOARD" | "SHOT"; title: string; location: string };
+  selected: boolean;
+  labelOf: (key: string) => string;
+}) {
+  const store = useStore();
+  const { text } = props;
+  return (
+    <li className={`every-use-row${props.selected ? " is-selected" : ""}`} data-testid="every-use-row" data-use={props.useKey}>
+      <button
+        type="button"
+        className="every-use-pick"
+        data-testid="every-use-pick"
+        aria-pressed={props.selected}
+        onClick={() => store.selectComponentUse(props.selected ? null : props.useKey)}
+      >
+        <span className="every-use-thumb" aria-hidden="true" />
+        <span className="every-use-text">
+          <span className="every-use-line">
+            <span className="every-use-kind">{text.kind}</span>
+            <span className="every-use-title">{text.title}</span>
+          </span>
+          <span className="every-use-location">{text.location}</span>
+        </span>
+        <ChangeChip use={props.use} labelOf={props.labelOf} />
+      </button>
+      <button
+        type="button"
+        className="every-use-go"
+        data-testid="every-use-go"
+        title={text.kind === "BOARD" ? "Open it on the Storyboard" : "Open it in the Studio, selected"}
+        onClick={() => store.goToComponentUse(props.useKey)}
+      >
+        Go to
+      </button>
+    </li>
+  );
+}
+
+/** A use in another Project, from the usage index: opening it leaves this
+ *  Project (after the save lands) for that one. */
+function OtherProjectRow(props: { use: api.IndexedComponentUse; labelOf: (key: string) => string }) {
+  const store = useStore();
+  const { use } = props;
+  const where = use.kind === "card" ? (use.referenceName ?? "Storyboard") : (use.sceneName ?? use.layerName ?? "a component");
+  return (
+    <li className="every-use-row" data-testid="every-use-other">
+      <button
+        type="button"
+        className="every-use-pick"
+        title={`Open ${use.projectName}`}
+        onClick={() => leaveFor(store, sceneHref(use.projectName))}
+      >
+        <span className="every-use-thumb" aria-hidden="true" />
+        <span className="every-use-text">
+          <span className="every-use-line">
+            <span className="every-use-kind">PROJECT</span>
+            <span className="every-use-title">
+              {use.projectName} · {where}
+            </span>
+          </span>
+          <span className="every-use-location">Another Project · same master</span>
+        </span>
+        <ChangeChip use={use} labelOf={props.labelOf} />
+      </button>
+    </li>
+  );
+}
+
+/**
+ * The owner's side of a Community listing: "N people added vN", and while the
+ * master is ahead of the published version, the row their copies will show
+ * once it is published. Hosted only: Community is part of the hosted studio.
+ */
+function CommunityCopies(props: { subject: ComponentsSelection; row: api.WorkspaceComponent }) {
+  const me = useSignedIn();
+  const [listing, setListing] = useState<{ id: string; listing: api.OwnedComponentListing | null } | null>(null);
+  const id = props.row.id;
+  const hosted = isCloudWorkspace();
+  useEffect(() => {
+    if (!hosted) return;
+    let live = true;
+    api.ownedComponentListing(id).then(
+      (got) => {
+        if (live) setListing({ id, listing: got });
+      },
+      () => {
+        // No Community section; the uses above stand.
+      },
+    );
+    return () => {
+      live = false;
+    };
+  }, [hosted, id]);
+  const owned = listing !== null && listing.id === id ? listing.listing : null;
+  if (owned === null || owned.version === null) return null;
+  const ahead = props.row.version > owned.version;
+  return (
+    <section className="every-use-community" data-testid="every-use-community" aria-label="Community copies">
+      <div className="every-use-head">
+        <h3 className="every-use-caps">Community copies</h3>
+        <span className="every-use-note" data-testid="every-use-added">
+          {addedLine(owned) ?? `Nobody has added v${owned.version} yet`}
+        </span>
+      </div>
+      {ahead ? (
+        <div className="every-use-preview" data-testid="every-use-preview">
+          <span className="every-use-note">What they see after you publish v{props.row.version}</span>
+          <div className="every-use-row is-preview">
+            <span className="every-use-tile" aria-hidden="true" />
+            <span className="every-use-text">
+              <span className="every-use-title">
+                {owned.name} · v{owned.version}
+              </span>
+              <span className="every-use-location">by {me?.name ?? "you"} · from Community</span>
+            </span>
+            <span className="use-chip">Update available · v{props.row.version}</span>
+            {/* A picture of their button, not one: it acts in their Projects. */}
+            <span className="use-update-button is-picture" aria-hidden="true">
+              Update
+            </span>
+          </div>
+          <p className="every-use-help">
+            Their prop changes carry over. If v{props.row.version} removes a prop they changed, Update shows it before
+            applying.
+          </p>
+        </div>
+      ) : null}
+    </section>
+  );
+}