@zthun/romulator-web 1.1.0

package/src/systems/system-page.tsx

@@ -0,0 +1,48 @@
+import {
+  useFashionTheme,
+  useParams,
+  ZAlert,
+  ZBreadcrumbsLocation,
+  ZStack,
+  ZSuspenseProgress,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed } from "@zthun/fashion-tailor";
+import { cssJoinDefined, firstDefined } from "@zthun/helpful-fn";
+import { isStateErrored, isStateLoading } from "@zthun/helpful-react";
+import { ZRomulatorSystemAvatarCard } from "./system-avatar-card.js";
+import { useSystem } from "./systems-service.mjs";
+
+export function ZRomulatorSystemPage() {
+  const { id } = useParams();
+  const { error } = useFashionTheme();
+  const [system] = useSystem(firstDefined("", id));
+
+  const renderSystemInformation = () => {
+    if (isStateLoading(system)) {
+      return <ZSuspenseProgress height={ZSizeFixed.Large} />;
+    }
+
+    if (isStateErrored(system)) {
+      return (
+        <ZAlert
+          fashion={error}
+          heading="Cannot load System"
+          message={system.message}
+        />
+      );
+    }
+
+    return <ZRomulatorSystemAvatarCard system={system} />;
+  };
+
+  return (
+    <ZStack
+      gap={ZSizeFixed.Medium}
+      className={cssJoinDefined("ZRomulatorSystemPage-root")}
+    >
+      <ZBreadcrumbsLocation />
+
+      {renderSystemInformation()}
+    </ZStack>
+  );
+}

package/src/systems/systems-page.cm.mts

@@ -0,0 +1,39 @@
+import { ZCircusBy, ZCircusComponentModel } from "@zthun/cirque";
+import {
+  ZButtonComponentModel,
+  ZGridViewComponentModel,
+} from "@zthun/fashion-boutique";
+import { required } from "@zthun/helpful-fn";
+import { ZRomulatorSystemAvatarCardComponentModel } from "./system-avatar-card.cm.mjs";
+
+export class ZRomulatorSystemsPageComponentModel extends ZCircusComponentModel {
+  public static readonly Selector = ".ZRomulatorSystemsPage-root";
+
+  public grid(): Promise<ZGridViewComponentModel> {
+    return Promise.resolve(new ZGridViewComponentModel(this.driver));
+  }
+
+  public async system(
+    id: string,
+  ): Promise<ZRomulatorSystemAvatarCardComponentModel | null> {
+    const grid = await this.grid();
+    return ZCircusBy.optional(
+      grid.driver,
+      ZRomulatorSystemAvatarCardComponentModel,
+      id,
+    );
+  }
+
+  public async systems(): Promise<ZRomulatorSystemAvatarCardComponentModel[]> {
+    const grid = await this.grid();
+    return ZCircusBy.all(grid.driver, ZRomulatorSystemAvatarCardComponentModel);
+  }
+
+  public async more(id: string): Promise<ZButtonComponentModel> {
+    const system = await this.system(id);
+    const card = await system?.card();
+    const footer = await required(card?.footer());
+
+    return ZCircusBy.first(footer, ZButtonComponentModel, "more");
+  }
+}

package/src/systems/systems-page.spec.tsx

@@ -0,0 +1,81 @@
+import type { IZCircusDriver, IZCircusSetup } from "@zthun/cirque";
+import { ZCircusBy } from "@zthun/cirque";
+import { ZCircusSetupRenderer } from "@zthun/cirque-du-react";
+import { ZTestRouter } from "@zthun/fashion-boutique";
+import { ZDataSourceStatic } from "@zthun/helpful-query";
+import { ZRomulatorSystemBuilder } from "@zthun/romulator-client";
+import type { MemoryHistory } from "history";
+import { createMemoryHistory } from "history";
+import type { Mocked } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { mock } from "vitest-mock-extended";
+import { ZRomulatorSystemsPageComponentModel } from "./systems-page.cm.mjs";
+import { ZRomulatorSystemsPage } from "./systems-page.js";
+import type { IZRomulatorSystemsService } from "./systems-service.mjs";
+import { ZRomulatorSystemsServiceContext } from "./systems-service.mjs";
+
+describe("ZRomulatorSystemsPage", () => {
+  const nes = new ZRomulatorSystemBuilder().id("nes").build();
+  const snes = new ZRomulatorSystemBuilder().id("snes").build();
+  const systems = [nes, snes];
+
+  let _systemsService: Mocked<IZRomulatorSystemsService>;
+  let _renderer: IZCircusSetup | undefined;
+  let _driver: IZCircusDriver | undefined;
+  let _history: MemoryHistory;
+
+  afterEach(async () => {
+    await _driver?.destroy?.call(_driver);
+    await _renderer?.destroy?.call(_renderer);
+  });
+
+  beforeEach(() => {
+    const source = new ZDataSourceStatic(systems);
+
+    _systemsService = mock<IZRomulatorSystemsService>();
+    _systemsService.retrieve.mockImplementation(source.retrieve.bind(source));
+    _systemsService.count.mockImplementation(source.count.bind(source));
+
+    _history = createMemoryHistory();
+  });
+
+  const createTestTarget = async () => {
+    const element = (
+      <ZTestRouter navigator={_history} location={_history.location}>
+        <ZRomulatorSystemsServiceContext value={_systemsService}>
+          <ZRomulatorSystemsPage />
+        </ZRomulatorSystemsServiceContext>
+      </ZTestRouter>
+    );
+
+    _renderer = new ZCircusSetupRenderer(element);
+    _driver = await _renderer.setup();
+
+    return ZCircusBy.first(_driver, ZRomulatorSystemsPageComponentModel);
+  };
+
+  it("should render all systems", async () => {
+    // Arrange.
+    const target = await createTestTarget();
+    const expected = systems.map((s) => s.id);
+
+    // Act.
+    const cards = await target.systems();
+    const actual = await Promise.all(cards.map((s) => s.id()));
+
+    // Assert.
+    expect(actual).toEqual(expected);
+  });
+
+  it("should navigate me to the system page when I click on the navigate button", async () => {
+    // Arrange.
+    const target = await createTestTarget();
+
+    // Act.
+    const more = await target.more(nes.id);
+    await more.click();
+
+    // Assert.
+    expect(_history.location.pathname).toEqual(`/systems/${nes.id}`);
+  });
+});

package/src/systems/systems-page.tsx

@@ -0,0 +1,48 @@
+import {
+  useFashionTheme,
+  useNavigate,
+  ZButton,
+  ZGridView,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed, ZSizeVaried } from "@zthun/fashion-tailor";
+import { ZRomulatorSystemAvatarCard } from "./system-avatar-card.js";
+import { useSystemsService } from "./systems-service.mjs";
+
+export function ZRomulatorSystemsPage() {
+  const { secondary } = useFashionTheme();
+  const navigate = useNavigate();
+  const source = useSystemsService();
+
+  return (
+    <ZGridView
+      className="ZRomulatorSystemsPage-root"
+      GridProps={{
+        columns: {
+          xl: "1fr 1fr 1fr 1fr",
+          lg: "1fr 1fr 1fr",
+          md: "1fr 1fr",
+          sm: "1fr",
+        },
+        gap: ZSizeFixed.Medium,
+      }}
+      dataSource={source}
+      renderItem={(s) => (
+        <ZRomulatorSystemAvatarCard
+          key={s.id}
+          system={s}
+          CardProps={{
+            footer: (
+              <ZButton
+                fashion={secondary}
+                label="More"
+                name="more"
+                width={ZSizeVaried.Full}
+                onClick={() => navigate(`/systems/${s.id}`)}
+              />
+            ),
+          }}
+        />
+      )}
+    />
+  );
+}

package/src/systems/systems-service.mts

@@ -0,0 +1,65 @@
+import { ZLazy } from "@zthun/helpful-fn";
+import type { IZDataRequest, IZDataSource } from "@zthun/helpful-query";
+import { useAsyncState } from "@zthun/helpful-react";
+import type { IZRomulatorSystem } from "@zthun/romulator-client";
+import type { IZHttpService } from "@zthun/webigail-http";
+import { ZHttpService } from "@zthun/webigail-http";
+import type { IZRestfulGet, IZRestfulService } from "@zthun/webigail-rest";
+import { ZRestfulService } from "@zthun/webigail-rest";
+import { ZUrlBuilder } from "@zthun/webigail-url";
+import { createContext, useContext } from "react";
+import { ZRomulatorEnvironmentService } from "../environment/environment-service.mjs";
+
+export interface IZRomulatorSystemsService
+  extends IZRestfulGet<IZRomulatorSystem>,
+    IZDataSource<IZRomulatorSystem> {}
+
+export class ZRomulatorSystemsService implements IZRomulatorSystemsService {
+  private _rest: ZLazy<IZRestfulService<IZRomulatorSystem>>;
+
+  public async endpoint() {
+    const env = await this._env.read();
+    return new ZUrlBuilder().parse(env.api).append("systems").build();
+  }
+
+  public constructor(
+    _http: IZHttpService,
+    private readonly _env: ZRomulatorEnvironmentService,
+  ) {
+    this._rest = new ZLazy(async () =>
+      Promise.resolve(new ZRestfulService(_http, await this.endpoint())),
+    );
+  }
+
+  public async retrieve(request: IZDataRequest): Promise<IZRomulatorSystem[]> {
+    return (await this._rest.get()).retrieve(request);
+  }
+
+  public async count(request: IZDataRequest): Promise<number> {
+    return (await this._rest.get()).count(request);
+  }
+
+  public async get(id: string): Promise<IZRomulatorSystem> {
+    return (await this._rest.get()).get(id);
+  }
+}
+
+export function createDefaultSystemsService(): IZRomulatorSystemsService {
+  return new ZRomulatorSystemsService(
+    new ZHttpService(),
+    new ZRomulatorEnvironmentService(),
+  );
+}
+
+export const ZRomulatorSystemsServiceContext = createContext(
+  createDefaultSystemsService(),
+);
+
+export const useSystemsService = () =>
+  useContext(ZRomulatorSystemsServiceContext);
+
+export const useSystem = (id: string) => {
+  const service = useSystemsService();
+
+  return useAsyncState(() => service.get(id), [id]);
+};

package/src/systems/systems-service.spec.ts

@@ -0,0 +1,144 @@
+import type { IZCircusSetup } from "@zthun/cirque";
+import type { IZCircusReactHook } from "@zthun/cirque-du-react";
+import { ZCircusSetupHook } from "@zthun/cirque-du-react";
+import { ZDataRequestBuilder, ZPageBuilder } from "@zthun/helpful-query";
+import type { IZRomulatorSystem } from "@zthun/romulator-client";
+import { ZRomulatorSystemBuilder } from "@zthun/romulator-client";
+import {
+  ZHttpMethod,
+  ZHttpResultBuilder,
+  ZHttpServiceMock,
+} from "@zthun/webigail-http";
+import { ZRestfulUrlBuilder } from "@zthun/webigail-rest";
+import { ZUrlBuilder } from "@zthun/webigail-url";
+import type { Mocked } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { mock } from "vitest-mock-extended";
+import type { IZRomulatorEnvironmentService } from "../environment/environment-service.mjs";
+import { ZRomulatorEnvironmentBuilder } from "../environment/environment.mjs";
+import type { IZRomulatorSystemsService } from "./systems-service.mjs";
+import {
+  useSystemsService,
+  ZRomulatorSystemsService,
+} from "./systems-service.mjs";
+
+describe("SystemsService", () => {
+  let _http: ZHttpServiceMock;
+  let _env: Mocked<IZRomulatorEnvironmentService>;
+
+  const nes = new ZRomulatorSystemBuilder().id("nes").build();
+  const snes = new ZRomulatorSystemBuilder().id("snes").build();
+  const systems = [nes, snes];
+
+  beforeEach(async () => {
+    _http = new ZHttpServiceMock();
+    _env = mock<IZRomulatorEnvironmentService>();
+    _env.read.mockResolvedValue(new ZRomulatorEnvironmentBuilder().build());
+  });
+
+  const createTestTarget = () => new ZRomulatorSystemsService(_http, _env);
+
+  describe("Read", () => {
+    it("should retrieve a list of systems", async () => {
+      // Arrange.
+      const target = createTestTarget();
+      const request = new ZDataRequestBuilder().build();
+
+      _http.set(
+        await target.endpoint(),
+        ZHttpMethod.Get,
+        new ZHttpResultBuilder(
+          new ZPageBuilder<IZRomulatorSystem>().all(systems).build(),
+        ).build(),
+      );
+
+      // Act.
+      const actual = await target.retrieve(request);
+
+      // Assert.
+      expect(actual).toEqual(systems);
+    });
+
+    it("should retrieve a single system by id", async () => {
+      // Arrange.
+      const target = createTestTarget();
+
+      _http.set(
+        new ZUrlBuilder()
+          .parse(await target.endpoint())
+          .append(nes.id)
+          .build(),
+        ZHttpMethod.Get,
+        new ZHttpResultBuilder(nes).build(),
+      );
+
+      _http.set(
+        new ZUrlBuilder()
+          .parse(await target.endpoint())
+          .append(snes.id)
+          .build(),
+        ZHttpMethod.Get,
+        new ZHttpResultBuilder(snes).build(),
+      );
+
+      // Act.
+      const _nes = await target.get(nes.id);
+      const _snes = await target.get(snes.id);
+
+      // Assert.
+      expect(_nes).toEqual(nes);
+      expect(_snes).toEqual(snes);
+    });
+  });
+
+  describe("Count", () => {
+    it("should count the number of systems", async () => {
+      // Arrange.
+      const target = createTestTarget();
+
+      _http.set(
+        new ZRestfulUrlBuilder(await target.endpoint()).count().build(),
+        ZHttpMethod.Get,
+        new ZHttpResultBuilder(
+          new ZPageBuilder<IZRomulatorSystem>()
+            .data([nes])
+            .count(systems.length)
+            .build(),
+        ).build(),
+      );
+
+      // Act.
+      const actual = await target.count(new ZDataRequestBuilder().build());
+
+      // Assert.
+      expect(actual).toEqual(systems.length);
+    });
+  });
+});
+
+describe("useSystemsService", () => {
+  let _hook: IZCircusSetup<
+    IZCircusReactHook<IZRomulatorSystemsService, unknown>
+  >;
+
+  const createTestTarget = () => {
+    _hook = new ZCircusSetupHook(() => useSystemsService());
+
+    return _hook?.setup();
+  };
+
+  afterEach(async () => {
+    await _hook?.destroy?.call(_hook);
+  });
+
+  it("should have a default implementation", async () => {
+    // Arrange.
+    const target = await createTestTarget();
+
+    // Act.
+    const actual = await target.current();
+
+    // Assert.
+    expect(actual).toBeInstanceOf(ZRomulatorSystemsService);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../.config/.tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@zthun/romulator-client": ["../romulator-client/src/index.mts"]
+    }
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.mts", "./src/**/*.tsx"]
+}

package/vite.config.mts

@@ -0,0 +1,9 @@
+import {
+  ZViteConfigBuilder,
+  ZViteServerBuilder,
+} from "@zthun/janitor-build-config/vite";
+import { defineConfig } from "vite";
+
+const server = new ZViteServerBuilder().dev().build();
+const config = new ZViteConfigBuilder().react().server(server).lodash().build();
+export default defineConfig(config);

package/vitest.config.mts

@@ -0,0 +1,9 @@
+import {
+  ZViteConfigBuilder,
+  ZViteTestBuilder,
+} from "@zthun/janitor-build-config/vite";
+import { defineConfig } from "vite";
+
+const test = new ZViteTestBuilder().browser().build();
+const config = new ZViteConfigBuilder().test(test).build();
+export default defineConfig(config);