@sanity/workbench 0.1.0-alpha.6 → 0.1.0-alpha.7

package/src/core/applications/application-list.test.ts

@@ -0,0 +1,222 @@
+// eslint-disable-next-line no-restricted-imports
+import type { Resource as ProtocolResource } from "@sanity/message-protocol";
+import { describe, expect, expectTypeOf, it } from "vitest";
+
+import {
+  APPLICATION_DATA,
+  CANVAS_DATA,
+  MEDIA_LIBRARY_DATA,
+  MULTIPLE_WORKSPACE_STUDIO_DATA,
+  PROJECTS,
+  SINGLE_WORKSPACE_STUDIO_DATA,
+} from "../__tests__/__fixtures__";
+import { CanvasApplication } from "../canvases";
+import { MediaLibraryApplication } from "../media-libraries";
+import { CoreAppApplication } from "../user-applications/core-app";
+import {
+  StudioApplication,
+  StudioWorkspace,
+} from "../user-applications/studio";
+import { brandUserApplicationId } from "../user-applications/user-application";
+import { ApplicationList } from "./application-list";
+
+describe("ApplicationList", () => {
+  const create = () => {
+    const canvas = new CanvasApplication(CANVAS_DATA);
+    const mediaLibrary = new MediaLibraryApplication(MEDIA_LIBRARY_DATA);
+    const coreApp = new CoreAppApplication(APPLICATION_DATA);
+    const multiStudio = new StudioApplication(
+      MULTIPLE_WORKSPACE_STUDIO_DATA,
+      PROJECTS,
+    );
+    const singleStudio = new StudioApplication(
+      SINGLE_WORKSPACE_STUDIO_DATA,
+      PROJECTS,
+    );
+
+    return new ApplicationList([
+      canvas,
+      mediaLibrary,
+      coreApp,
+      multiStudio,
+      singleStudio,
+      ...multiStudio.workspaces,
+      ...singleStudio.workspaces,
+    ]);
+  };
+
+  describe("findApplication", () => {
+    it("should find an application by type and correctly infer the type", () => {
+      const applicationList = create();
+
+      const canvasResource = applicationList.findApplication("canvas");
+      expect(canvasResource).toBeInstanceOf(CanvasApplication);
+      expectTypeOf(canvasResource).toEqualTypeOf<
+        CanvasApplication | undefined
+      >();
+
+      const mediaResource = applicationList.findApplication("media-library");
+      expect(mediaResource).toBeInstanceOf(MediaLibraryApplication);
+      expectTypeOf(mediaResource).toEqualTypeOf<
+        MediaLibraryApplication | undefined
+      >();
+
+      const applicationId = brandUserApplicationId(APPLICATION_DATA.id);
+      const foundCoreApplication = applicationList.findApplication(
+        "coreApp",
+        applicationId,
+      );
+      expect(foundCoreApplication).toBeInstanceOf(CoreAppApplication);
+      expectTypeOf(foundCoreApplication).toEqualTypeOf<
+        CoreAppApplication | undefined
+      >();
+      expect(foundCoreApplication?.id).toBe(applicationId);
+
+      const foundStudioApplication = applicationList.findApplication(
+        "studio",
+        brandUserApplicationId(MULTIPLE_WORKSPACE_STUDIO_DATA.id),
+      );
+      expect(foundStudioApplication).toBeInstanceOf(StudioApplication);
+      expectTypeOf(foundStudioApplication).toEqualTypeOf<
+        StudioApplication | undefined
+      >();
+      expect(foundStudioApplication?.id).toBe(
+        brandUserApplicationId(MULTIPLE_WORKSPACE_STUDIO_DATA.id),
+      );
+
+      const workspaceId = StudioWorkspace.makeId(
+        brandUserApplicationId(SINGLE_WORKSPACE_STUDIO_DATA.id),
+        "default",
+      );
+      const foundWorkspace = applicationList.findApplication(
+        "workspace",
+        workspaceId,
+      );
+      expect(foundWorkspace).toBeInstanceOf(StudioWorkspace);
+      expectTypeOf(foundWorkspace).toEqualTypeOf<StudioWorkspace | undefined>();
+      expect(foundWorkspace?.id).toBe(workspaceId);
+    });
+
+    it("should find all applications of a given type", () => {
+      const applicationList = create();
+
+      const canvasResources = applicationList.findApplicationsByType("canvas");
+      expect(canvasResources).toHaveLength(1);
+      expectTypeOf(canvasResources).toEqualTypeOf<CanvasApplication[]>();
+
+      const mediaResources =
+        applicationList.findApplicationsByType("media-library");
+      expect(mediaResources).toHaveLength(1);
+      expectTypeOf(mediaResources).toEqualTypeOf<MediaLibraryApplication[]>();
+
+      const coreApplications =
+        applicationList.findApplicationsByType("coreApp");
+      expect(coreApplications).toHaveLength(1);
+      expectTypeOf(coreApplications).toEqualTypeOf<CoreAppApplication[]>();
+
+      const studioApplications =
+        applicationList.findApplicationsByType("studio");
+      expect(studioApplications).toHaveLength(2);
+      expectTypeOf(studioApplications).toEqualTypeOf<StudioApplication[]>();
+
+      const workspaceApplications =
+        applicationList.findApplicationsByType("workspace");
+      expect(workspaceApplications).toHaveLength(9);
+      expectTypeOf(workspaceApplications).toEqualTypeOf<StudioWorkspace[]>();
+    });
+
+    it("should allow passing multiple types to findApplicationsByType", () => {
+      const applicationList = create();
+
+      const applications = applicationList.findApplicationsByType([
+        "coreApp",
+        "studio",
+      ]);
+      expect(applications).toHaveLength(3);
+      expect(applications[0]).toBeInstanceOf(CoreAppApplication);
+      expect(applications[1]).toBeInstanceOf(StudioApplication);
+      expect(applications[2]).toBeInstanceOf(StudioApplication);
+    });
+
+    it("should correctly merge workspaces with other application types when specified", () => {
+      const applicationList = create();
+
+      expect(
+        applicationList.findApplicationsByType(["coreApp", "workspace"]),
+      ).toHaveLength(10);
+    });
+  });
+
+  describe("toProtocolResources", () => {
+    it("should return an array of protocol resources", () => {
+      const applicationList = create();
+      const protocolResources = applicationList.toProtocolResources();
+      expect(protocolResources).toHaveLength(12);
+      expectTypeOf(protocolResources).toEqualTypeOf<ProtocolResource[]>();
+    });
+  });
+
+  describe("static methods", () => {
+    describe("areApplicationsEqual", () => {
+      it("should return false if an application is undefined", () => {
+        const application = new CoreAppApplication(APPLICATION_DATA);
+        expect(
+          ApplicationList.areApplicationsEqual(undefined, application),
+        ).toBe(false);
+        expect(
+          ApplicationList.areApplicationsEqual(application, undefined),
+        ).toBe(false);
+        expect(ApplicationList.areApplicationsEqual(undefined, undefined)).toBe(
+          false,
+        );
+      });
+
+      it("should return true if the applications are the same", () => {
+        const application1 = new CoreAppApplication(APPLICATION_DATA);
+        const application2 = new CoreAppApplication(APPLICATION_DATA);
+        expect(
+          ApplicationList.areApplicationsEqual(application1, application2),
+        ).toBe(true);
+      });
+
+      it("should return false if the applications are not the same", () => {
+        const application1 = new CoreAppApplication(APPLICATION_DATA);
+        const application2 = new StudioApplication(
+          MULTIPLE_WORKSPACE_STUDIO_DATA,
+          PROJECTS,
+        );
+        expect(
+          ApplicationList.areApplicationsEqual(application1, application2),
+        ).toBe(false);
+      });
+
+      it("should return true if the applications are the same studio", () => {
+        const application1 = new StudioApplication(
+          MULTIPLE_WORKSPACE_STUDIO_DATA,
+          PROJECTS,
+        );
+        const application2 = new StudioApplication(
+          MULTIPLE_WORKSPACE_STUDIO_DATA,
+          PROJECTS,
+        );
+        expect(
+          ApplicationList.areApplicationsEqual(application1, application2),
+        ).toBe(true);
+      });
+
+      it("should return false if the applications are not the same studio", () => {
+        const application1 = new StudioApplication(
+          MULTIPLE_WORKSPACE_STUDIO_DATA,
+          PROJECTS,
+        );
+        const application2 = new StudioApplication(
+          SINGLE_WORKSPACE_STUDIO_DATA,
+          PROJECTS,
+        );
+        expect(
+          ApplicationList.areApplicationsEqual(application1, application2),
+        ).toBe(false);
+      });
+    });
+  });
+});

package/src/core/applications/application-list.ts

@@ -0,0 +1,103 @@
+import type { Resource as ProtocolResource } from "@sanity/message-protocol";
+
+import type { CanvasApplication } from "../canvases";
+import type { MediaLibraryApplication } from "../media-libraries";
+import type { CoreAppApplication } from "../user-applications/core-app";
+import type {
+  StudioApplication,
+  StudioWorkspace,
+} from "../user-applications/studio";
+import type { UserApplicationId } from "../user-applications/user-application";
+import { LocalApplication } from "./local-application";
+
+type Application =
+  | CoreAppApplication
+  | StudioApplication
+  | StudioWorkspace
+  | CanvasApplication
+  | MediaLibraryApplication
+  | LocalApplication;
+
+/**
+ * @public
+ */
+export class ApplicationList<TApplication extends Application = Application> {
+  readonly applications: TApplication[];
+
+  /**
+   * @param applications - The applications to initialize the list with.
+   */
+  constructor(applications: TApplication[]) {
+    this.applications = [...applications];
+  }
+
+  findApplicationsByType<T extends TApplication["type"]>(
+    type: T,
+  ): Extract<TApplication, { type: T }>[];
+  findApplicationsByType<T extends TApplication["type"][]>(
+    types: T,
+  ): Extract<TApplication, { type: T[number] }>[];
+  findApplicationsByType(
+    _type: TApplication["type"] | TApplication["type"][],
+  ): TApplication[] {
+    const types = Array.isArray(_type) ? _type : [_type];
+
+    return this.applications.filter((r) => types.includes(r.type));
+  }
+
+  findApplication(
+    type: "media-library",
+  ): Extract<TApplication, { type: "media-library" }> | undefined;
+  findApplication(
+    type: "canvas",
+  ): Extract<TApplication, { type: "canvas" }> | undefined;
+  findApplication(
+    type: "coreApp",
+    id: UserApplicationId,
+  ): Extract<TApplication, { type: "coreApp" }> | undefined;
+  findApplication(
+    type: "studio",
+    id: UserApplicationId,
+  ): Extract<TApplication, { type: "studio" }> | undefined;
+  findApplication(
+    type: "workspace",
+    id: string,
+  ): Extract<TApplication, { type: "workspace" }> | undefined;
+  findApplication(
+    type: TApplication["type"],
+    id?: UserApplicationId | string,
+  ): TApplication | undefined {
+    switch (type) {
+      case "media-library":
+      case "canvas":
+        return this.applications.find((r) => r.type === type);
+      case "coreApp":
+      case "studio":
+      case "workspace": {
+        return this.applications.find((r) => r.type === type && r.id === id);
+      }
+    }
+  }
+
+  toProtocolResources() {
+    return this.applications.reduce<ProtocolResource[]>((acc, r) => {
+      if (r.type === "studio" || r instanceof LocalApplication) return acc;
+      return [...acc, r.toProtocolResource()];
+    }, []);
+  }
+
+  static areApplicationsEqual(
+    application1?: Application,
+    application2?: Application,
+  ): boolean {
+    if (
+      !application1 ||
+      !application2 ||
+      application1.type !== application2.type
+    ) {
+      return false;
+    }
+
+    return application1.id === application2.id;
+  }
+}

package/src/core/applications/application.ts

@@ -0,0 +1,78 @@
+import type { Resource as ProtocolResource } from "@sanity/message-protocol";
+
+/**
+ * @public
+ */
+export type AbstractApplicationType =
+  | "studio"
+  | "coreApp"
+  | "canvas"
+  | "media-library"
+  | "workspace";
+
+/**
+ * @public
+ */
+export abstract class AbstractApplication<
+  TType extends AbstractApplicationType,
+  TProtocolResource extends ProtocolResource = Extract<
+    ProtocolResource,
+    { type: TType }
+  >,
+> {
+  readonly type: TType;
+
+  constructor(type: TType) {
+    this.type = type;
+  }
+
+  abstract get href(): string;
+
+  abstract get title(): string;
+
+  abstract get id(): string;
+
+  get initials(): string {
+    const SYMBOLS = /[^\p{Alpha}\p{N}\p{White_Space}]/gu;
+    const WHITESPACE = /\p{White_Space}+/u;
+    const ALPHANUMERIC_SEGMENTS = /(\p{N}+|\p{Alpha}+)/gu;
+    const IS_NUMERIC = /^\p{N}+$/u;
+
+    if (!this.title) return "";
+
+    const namesArray = this.title
+      .replace(SYMBOLS, "")
+      .split(WHITESPACE)
+      .filter(Boolean);
+
+    if (namesArray.length === 0) return "";
+
+    if (namesArray.length === 1) {
+      const word = namesArray[0];
+      const segments = word.match(ALPHANUMERIC_SEGMENTS) || [];
+
+      if (segments.length === 0) return "";
+      if (segments.length === 1) {
+        if (word.length === 1) {
+          return word.toUpperCase();
+        }
+
+        if (IS_NUMERIC.test(word)) {
+          return `${word.charAt(0)}${word.charAt(1)}`.toUpperCase();
+        }
+
+        return word.charAt(0).toUpperCase();
+      }
+
+      return `${segments[0]!.charAt(0)}${segments[1].charAt(0)}`.toUpperCase();
+    }
+
+    return `${namesArray[0].charAt(0)}${namesArray[namesArray.length - 1].charAt(0)}`.toUpperCase();
+  }
+
+  /**
+   * Converts the resource to a protocol resource that comlink expects
+   * for backwards compatibility with the old API format.
+   */
+  abstract toProtocolResource(): TProtocolResource;
+}

package/src/core/applications/local-application.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, expectTypeOf, it } from "vitest";
+
+import { AbstractApplication } from "./application";
+import type { LocalApplicationData } from "./local-application";
+import { LocalApplication } from "./local-application";
+
+const STUDIO_APP: LocalApplicationData = {
+  host: "localhost",
+  port: 3333,
+  type: "studio",
+};
+
+const CORE_APP: LocalApplicationData = {
+  host: "127.0.0.1",
+  port: 4444,
+  type: "coreApp",
+};
+
+describe("LocalApplication", () => {
+  it("is an instance of AbstractApplication", () => {
+    expect(new LocalApplication(STUDIO_APP)).toBeInstanceOf(
+      AbstractApplication,
+    );
+  });
+
+  describe("type", () => {
+    it("inherits the type from LocalApplicationData", () => {
+      expect(new LocalApplication(STUDIO_APP).type).toBe("studio");
+      expect(new LocalApplication(CORE_APP).type).toBe("coreApp");
+    });
+
+    it("has the correct TypeScript type", () => {
+      const app = new LocalApplication(STUDIO_APP);
+      expectTypeOf(app.type).toEqualTypeOf<"studio" | "coreApp">();
+    });
+  });
+
+  describe("id", () => {
+    it("generates a deterministic id from host and port", () => {
+      expect(new LocalApplication(STUDIO_APP).id).toBe("local-localhost-3333");
+    });
+
+    it("is stable across instances with the same data", () => {
+      expect(new LocalApplication(STUDIO_APP).id).toBe(
+        new LocalApplication(STUDIO_APP).id,
+      );
+    });
+
+    it("differs when host or port differs", () => {
+      const a = new LocalApplication(STUDIO_APP);
+      const b = new LocalApplication(CORE_APP);
+      expect(a.id).not.toBe(b.id);
+    });
+  });
+
+  describe("title", () => {
+    it("formats as host:port", () => {
+      expect(new LocalApplication(STUDIO_APP).title).toBe("localhost:3333");
+      expect(new LocalApplication(CORE_APP).title).toBe("127.0.0.1:4444");
+    });
+  });
+
+  describe("href", () => {
+    it("generates a /local/ route", () => {
+      expect(new LocalApplication(STUDIO_APP).href).toBe(
+        "/local/localhost:3333",
+      );
+      expect(new LocalApplication(CORE_APP).href).toBe("/local/127.0.0.1:4444");
+    });
+  });
+
+  describe("initials", () => {
+    it("derives initials from the title", () => {
+      // "localhost:3333" → strip symbols → "localhost3333"
+      // → alpha segment "localhost" + numeric segment "3333" → "L" + "3" = "L3"
+      expect(new LocalApplication(STUDIO_APP).initials).toBe("L3");
+    });
+
+    it("handles numeric-only titles (e.g. IP address)", () => {
+      // "127.0.0.1:4444" → strip symbols → "1270014444"
+      // → single numeric segment → first two chars → "12"
+      expect(new LocalApplication(CORE_APP).initials).toBe("12");
+    });
+  });
+
+  describe("toProtocolResource", () => {
+    it("throws because local applications have no protocol representation", () => {
+      expect(() =>
+        new LocalApplication(STUDIO_APP).toProtocolResource(),
+      ).toThrow();
+    });
+  });
+});

package/src/core/applications/local-application.ts

@@ -0,0 +1,52 @@
+import { AbstractApplication } from "./application";
+
+/**
+ * Raw data for a local application discovered by the CLI dev server.
+ *
+ * @experimental
+ * @public
+ */
+export interface LocalApplicationData {
+  host: string;
+  port: number;
+  type: "studio" | "coreApp";
+}
+
+/**
+ * An Application wrapping a locally-discovered CLI application.
+ * Provides a deterministic id, title and href suitable for use in navigation.
+ *
+ * @internal
+ */
+export class LocalApplication extends AbstractApplication<
+  "studio" | "coreApp",
+  never
+> {
+  readonly localApplication: LocalApplicationData;
+
+  constructor(localApplication: LocalApplicationData) {
+    super(localApplication.type);
+    this.localApplication = localApplication;
+  }
+
+  get id(): string {
+    const { host, port } = this.localApplication;
+    return `local-${host}-${port}`;
+  }
+
+  get title(): string {
+    const { host, port } = this.localApplication;
+    return `${host}:${port}`;
+  }
+
+  get href(): string {
+    const { host, port } = this.localApplication;
+    return `/local/${host}:${port}`;
+  }
+
+  toProtocolResource(): never {
+    throw new Error(
+      "LocalApplication cannot be serialized to a protocol resource",
+    );
+  }
+}

package/src/core/canvases.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+
+import { CANVAS_DATA } from "./__tests__/__fixtures__";
+import { CanvasApplication } from "./canvases";
+
+const setup = () => new CanvasApplication(CANVAS_DATA);
+
+describe("CanvasResource", () => {
+  it("should have a type of canvas", () => {
+    const resource = setup();
+    expect(resource.type).toBe("canvas");
+  });
+
+  it("should have a to of /canvas", () => {
+    const resource = setup();
+    expect(resource.href).toBe("canvas");
+  });
+
+  it("should have a name of Canvas", () => {
+    const resource = setup();
+    expect(resource.title).toBe("Canvas");
+  });
+
+  it("should have an id", () => {
+    const resource = setup();
+    expect(resource.id).toBe("cac1Na6lwtEI");
+  });
+
+  it("should implement the toProtocolResource method", () => {
+    const resource = setup();
+    expect(resource.toProtocolResource()).toMatchInlineSnapshot(`
+      {
+        "id": "cac1Na6lwtEI",
+        "type": "canvas",
+      }
+    `);
+  });
+});

package/src/core/canvases.ts

@@ -0,0 +1,81 @@
+import type { CanvasResource as ProtocolCanvasResource } from "@sanity/message-protocol";
+import { z } from "zod";
+
+import { AbstractApplication } from "./applications/application";
+import { OrganizationId } from "./organizations";
+
+/**
+ * Canvas ID schema, branded for type safety.
+ * @public
+ */
+const CanvasId = z.string().nonempty().brand("CanvasId");
+
+/**
+ * Canvas ID type, branded for type safety.
+ * @public
+ */
+export type CanvasId = z.output<typeof CanvasId>;
+
+/**
+ * Validates and brands a string as a CanvasId.
+ * @public
+ */
+export function brandCanvasId(id: string): CanvasId {
+  return CanvasId.parse(id);
+}
+
+const Canvas = z.object({
+  id: CanvasId,
+  organizationId: OrganizationId,
+  status: z.enum(["active", "provisioning"]),
+});
+
+/**
+ * Represents a Canvas resource as returned from the API.
+ * @public
+ */
+export type Canvas = z.output<typeof Canvas>;
+
+/**
+ * Validates and parses a raw API response into a branded
+ * Canvas.
+ * @public
+ */
+export function parseCanvas(data: unknown): Canvas {
+  return Canvas.parse(data);
+}
+
+/**
+ * Whilst the constructor takes an organization's canvas resource the existance
+ * therefore implies the organization has access to the canvas application which
+ * is what workbench most importantly wants to know.
+ * @public
+ */
+export class CanvasApplication extends AbstractApplication<"canvas"> {
+  private readonly canvas: Canvas;
+
+  constructor(canvas: Canvas) {
+    super("canvas");
+
+    this.canvas = canvas;
+  }
+
+  get id(): CanvasId {
+    return this.canvas.id;
+  }
+
+  get href(): string {
+    return "canvas";
+  }
+
+  get title(): string {
+    return "Canvas";
+  }
+
+  toProtocolResource(): ProtocolCanvasResource {
+    return {
+      type: "canvas",
+      id: this.id,
+    } satisfies ProtocolCanvasResource;
+  }
+}

package/src/core/config.ts

@@ -0,0 +1,34 @@
+import type { OrganizationId } from "./organizations";
+
+/**
+ * Workbench configuration.
+ *
+ * @public
+ */
+interface Config {
+  /**
+   * The organization ID to use when rendering the workbench.
+   */
+  organizationId?: string;
+}
+
+/**
+ * The resolved configuration after processing
+ * and validating the provided config.
+ *
+ * @public
+ */
+type ResolvedConfig = Omit<Config, "organizationId"> & {
+  organizationId: OrganizationId;
+};
+
+/**
+ * Options for rendering a remote module, such as a user application.
+ *
+ * @public
+ */
+interface RemoteModuleRenderOptions {
+  reactStrictMode?: boolean;
+}
+
+export type { Config, ResolvedConfig, RemoteModuleRenderOptions };