@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/studio/ComponentLibraryRail.tsx

@@ -0,0 +1,346 @@
+// THE COMPONENTS LEFT COLUMN (C1, C5): a search over both sections, the "All
+// components" row (the home, with its count), THIS PROJECT (its Studio-made
+// definitions, the code files made for it, then the code components it uses)
+// with the way a new one is made, YOUR LIBRARY (code made for no Project,
+// Dailies Library installs and what someone added, each with where it comes
+// from), and Browse Community at the foot. Three only (D8): a dom code
+// component is listed with the reason it never opens.
+//
+// It shows in the docked left column's mode slot (CodeStudio.tsx and
+// ComponentsPreview.tsx portal it there; a definition's Edit tab shows its
+// layers instead). New opens an inline row in the column, never a popover
+// over the stage. The search may be the caller's (`query`, `onQuery`), so
+// the home's field and this one filter together. ONE FIELD ON SCREEN: with
+// no component open the home's bar carries the search, so this column leaves
+// its own out.
+import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { IconCode } from "@dailies-studio/ui";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { dailiesHost } from "../../hostApi.js";
+import { COMPONENT_ICON, CUBE_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import type { ComponentsSelection } from "../../state/types.js";
+import {
+  componentsListOf,
+  libraryComponentsOf,
+  libraryEntryName,
+  libraryHomeLabel,
+  sameComponent,
+} from "../../state/workspace.js";
+import type { LibraryEntry } from "../../state/workspace.js";
+import { useCodeBufferGuard } from "../code/codeBufferGuard.js";
+import { communityBrowseHref } from "../share/ShareComponentDialog.js";
+
+/** Why Browse Community is off on a local studio. */
+export const COMMUNITY_HOSTED_ONLY = "Community is part of the hosted studio.";
+
+export function ComponentLibraryRail(props: {
+  doc: Doc3D;
+  current: ComponentsSelection | null;
+  query?: string;
+  onQuery?: (q: string) => void;
+}) {
+  const store = useStore();
+  const library = useShotEditor((s) => s.library);
+  const workspace = useShotEditor((s) => s.workspaceComponents);
+  const homes = useShotEditor((s) => s.componentHomes);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  // Picking a definition in place of a code component drops its buffers, so
+  // unsaved text there asks first. Another code component keeps them.
+  const { guard, dialog } = useCodeBufferGuard();
+  const [ownQuery, setOwnQuery] = useState("");
+  const query = props.query ?? ownQuery;
+  const setQuery = props.onQuery ?? setOwnQuery;
+  const [making, setMaking] = useState(false);
+  const [newName, setNewName] = useState("");
+  const needle = query.trim().toLowerCase();
+  // The open subject is marked where it lists, in either section. A file
+  // just made lists under This project from the press (`createCodeComponent`
+  // links it), so the subject needs no row of its own.
+  const rows = useMemo(() => componentsListOf(props.doc, library), [props.doc, library]);
+  const mine = useMemo(
+    () => libraryComponentsOf(props.doc, library, workspace, homes, rows),
+    [props.doc, library, workspace, homes, rows],
+  );
+  const matches = (name: string): boolean => needle.length === 0 || name.toLowerCase().includes(needle);
+  const listed = rows.filter((r) => matches(r.name));
+  const libraryListed = mine.filter((entry) => matches(libraryEntryName(entry)));
+  const hosted = dailiesHost() !== undefined;
+
+  // The workspace's list and its homes are the store's, read once per visit;
+  // the Project's own list needs nothing from them.
+  useEffect(() => {
+    void store.refreshWorkspaceComponents();
+  }, [store]);
+
+  const make = (kind: "studio" | "code"): void => {
+    const name = newName.trim() === "" ? "Component" : newName.trim();
+    setMaking(false);
+    setNewName("");
+    if (kind === "studio") guard(() => store.createEmptyComponent(name));
+    else guard(() => void store.newCodeComponent(name));
+  };
+
+  return (
+    <section className="component-library" aria-label="Components">
+      {dialog}
+      {/* No keydown guard here and none needed: the keymap asks
+          `isEditable(target)` before it resolves anything, so a field anywhere
+          in the chrome already keeps every single-letter verb. With no
+          component open the home's bar has the one search field. */}
+      {props.current === null ? null : (
+        <label className="file-search components-search">
+          <input
+            type="search"
+            value={query}
+            placeholder="Search components"
+            aria-label="Search components"
+            data-testid="studio-search"
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </label>
+      )}
+      <div className="rail-scroll">
+        <ul className="components-list is-home">
+          <ComponentItem
+            kind="home"
+            name="All components"
+            count={rows.length + mine.length}
+            current={props.current === null}
+            testId="components-all"
+            title="Every component of this Project and your library"
+            disabled={false}
+            onOpen={() => guard(() => void store.openComponents())}
+          />
+        </ul>
+        <div className="components-section-head" data-testid="components-project-head">
+          <h2 className="components-section-title">This project</h2>
+          <button
+            type="button"
+            className="components-section-action"
+            data-testid="studio-new-component"
+            aria-label="New component"
+            aria-expanded={making}
+            disabled={readOnly}
+            title="New component"
+            onClick={() => setMaking((m) => !m)}
+          >
+            New
+          </button>
+        </div>
+        {making ? (
+          <form
+            className="components-new-row"
+            data-testid="components-new-row"
+            onSubmit={(e) => {
+              e.preventDefault();
+              make("studio");
+            }}
+          >
+            <input
+              className="components-new-name"
+              data-testid="components-new-name"
+              aria-label="New component name"
+              placeholder="Component"
+              value={newName}
+              autoFocus
+              onChange={(e) => setNewName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key !== "Escape") return;
+                e.stopPropagation();
+                setMaking(false);
+              }}
+            />
+            <button type="submit" className="btn" data-testid="components-new-studio" title="A Studio-made component">
+              3D
+            </button>
+            <button
+              type="button"
+              className="btn"
+              data-testid="components-new-code"
+              title="A code component from the three starter"
+              onClick={() => make("code")}
+            >
+              Code
+            </button>
+          </form>
+        ) : null}
+        <ul className="components-list" data-testid="studio-def-list">
+          {listed.map((r) => {
+            const sel = r.sel;
+            const current = sameComponent(sel, props.current);
+            return (
+              <ComponentItem
+                key={sel.kind === "studio" ? sel.def : sel.module}
+                kind={sel.kind}
+                name={r.name}
+                current={current}
+                testId={r.refusal === null ? undefined : "components-row-unsupported"}
+                title={r.refusal ?? r.name}
+                disabled={r.refusal !== null}
+                onOpen={() => {
+                  if (r.refusal !== null) {
+                    store.reportError(r.refusal);
+                    return;
+                  }
+                  // SWAPS THE SUBJECT AND STAYS on the tab already showing.
+                  if (sel.kind === "studio") guard(() => void store.selectComponent(sel));
+                  else void store.selectComponent(sel);
+                }}
+              />
+            );
+          })}
+        </ul>
+        {listed.length === 0 && needle.length > 0 ? (
+          <p className="insp-empty">No component matches “{query.trim()}”.</p>
+        ) : null}
+        <div className="components-section-head is-library" data-testid="components-library-head">
+          <h2 className="components-section-title">Your library</h2>
+          <span className="components-section-count" data-testid="components-library-count">
+            {mine.length}
+          </span>
+        </div>
+        <ul className="components-list" data-testid="components-library-list">
+          {libraryListed.map((entry) => {
+            if (entry.kind === "studio") {
+              const c = entry.component;
+              return (
+                <ComponentItem
+                  key={c.id}
+                  kind="studio"
+                  name={c.name}
+                  author={libraryHomeLabel(entry)}
+                  current={false}
+                  title={workspaceRowTitle(entry)}
+                  disabled={false}
+                  trailing={
+                    <button
+                      type="button"
+                      className="components-use-here"
+                      data-testid="components-use-here"
+                      disabled={readOnly}
+                      title={`Copy ${c.name} into this Project, linked to its recorded version`}
+                      onClick={() => guard(() => void store.addLibraryComponent(c.id))}
+                    >
+                      Use here
+                    </button>
+                  }
+                />
+              );
+            }
+            const { module, refusal } = entry;
+            return (
+              <ComponentItem
+                key={module}
+                kind="code"
+                name={entry.name}
+                author={libraryHomeLabel(entry)}
+                current={sameComponent({ kind: "code", module }, props.current)}
+                testId={refusal === null ? undefined : "components-row-unsupported"}
+                title={refusal ?? workspaceRowTitle(entry)}
+                disabled={refusal !== null}
+                onOpen={() => {
+                  if (refusal !== null) {
+                    store.reportError(refusal);
+                    return;
+                  }
+                  guard(() => void store.openCodeComponent(module));
+                }}
+              />
+            );
+          })}
+        </ul>
+        {workspace !== null && mine.length === 0 ? (
+          <p className="insp-empty">
+            Code made for no Project, Dailies Library installs and components you add to your library show here.
+          </p>
+        ) : null}
+      </div>
+      <div className="components-rail-footer">
+        <button
+          type="button"
+          className="components-browse"
+          data-testid="components-browse"
+          disabled={!hosted}
+          title={hosted ? "Open Community in a new tab" : COMMUNITY_HOSTED_ONLY}
+          onClick={() => window.open(communityBrowseHref(), "_blank", "noopener")}
+        >
+          <span>Browse Community</span>
+          <span className="components-browse-arrow" aria-hidden="true">
+            →
+          </span>
+        </button>
+      </div>
+    </section>
+  );
+}
+
+/** One 28-high row: the icon tile, the name (and a workspace row's home), the
+ *  kind tag (or the home row's count), then a trailing verb. No live
+ *  thumbnails: the one shared canvas is rendering the subject beside this
+ *  list. */
+function ComponentItem(props: {
+  kind: "studio" | "code" | "home";
+  name: string;
+  author?: string;
+  count?: number;
+  current: boolean;
+  title: string;
+  disabled: boolean;
+  testId?: string | undefined;
+  onOpen?: () => void;
+  trailing?: ReactNode;
+}) {
+  const body = (
+    <>
+      <span className="components-item-tile" aria-hidden="true">
+        {props.kind === "code" ? <IconCode /> : props.kind === "home" ? COMPONENT_ICON : CUBE_ICON}
+      </span>
+      <span className="components-item-name">{props.name}</span>
+      {props.author === undefined ? null : <span className="components-item-author">{props.author}</span>}
+      {props.kind === "home" ? (
+        <span className="components-section-count">{props.count}</span>
+      ) : (
+        <span className="components-item-kind">{props.kind === "code" ? "CODE" : "3D"}</span>
+      )}
+    </>
+  );
+  return (
+    <li className={`components-item${props.current ? " is-current" : ""}`} data-testid={props.testId}>
+      {props.onOpen === undefined ? (
+        <span className="components-item-main" title={props.title}>
+          {body}
+        </span>
+      ) : (
+        <button
+          type="button"
+          className="components-item-main"
+          aria-current={props.current}
+          aria-disabled={props.disabled || undefined}
+          title={props.title}
+          onClick={props.onOpen}
+        >
+          {body}
+        </button>
+      )}
+      {props.trailing}
+    </li>
+  );
+}
+
+/** A Your library row's title: what a press does, where the component comes
+ *  from and, once the workspace recorded it, the day it first did, so an
+ *  author can tell when a component arrived. The rail and the home's cards
+ *  say the same. */
+export function workspaceRowTitle(entry: LibraryEntry): string {
+  const recorded = entry.kind === "code" ? entry.recorded : entry.component;
+  const day =
+    recorded === undefined
+      ? null
+      : new Date(recorded.createdAt).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
+  const facts = day === null ? libraryHomeLabel(entry) : `${libraryHomeLabel(entry)} · recorded ${day}`;
+  return entry.kind === "code"
+    ? `Open ${entry.name} · ${facts}`
+    : `${entry.component.name} · ${facts}. Use here adds a copy to this Project`;
+}