@zthun/romulator-web 1.1.0

package/src/settings/setting-page.spec.tsx

@@ -0,0 +1,154 @@
+import {
+  ZCircusBy,
+  type IZCircusDriver,
+  type IZCircusSetup,
+} from "@zthun/cirque";
+import { ZCircusSetupRenderer } from "@zthun/cirque-du-react";
+import { ZRoute, ZRouteMap, ZTestRouter } from "@zthun/fashion-boutique";
+import {
+  ZRomulatorConfigBuilder,
+  ZRomulatorConfigGamesBuilder,
+  ZRomulatorConfigGamesMetadata,
+  ZRomulatorConfigId,
+} from "@zthun/romulator-client";
+import { createMemoryHistory, type MemoryHistory } from "history";
+import type { Mocked } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { mock } from "vitest-mock-extended";
+import { ZRomulatorSettingPageComponentModel } from "./setting-page.cm.mjs";
+import { ZRomulatorSettingPage } from "./setting-page.js";
+import {
+  ZRomulatorSettingsContext,
+  type IZRomulatorSettingsService,
+} from "./settings-service.mjs";
+
+describe("ZRomulatorSettingPage", () => {
+  const _gamesContent = new ZRomulatorConfigGamesBuilder()
+    .gamesFolder("/path/to/games")
+    .build();
+  const _gamesFolder = ZRomulatorConfigGamesMetadata.gamesFolder();
+  const _games = new ZRomulatorConfigBuilder()
+    .id(ZRomulatorConfigId.Games)
+    .contents(_gamesContent)
+    .name("Games")
+    .description("Games config")
+    .metadata(_gamesFolder)
+    .build();
+
+  let _history: MemoryHistory;
+  let _settings: Mocked<IZRomulatorSettingsService>;
+  let _renderer: IZCircusSetup;
+  let _driver: IZCircusDriver;
+
+  const createTestTarget = async () => {
+    const element = (
+      <ZRomulatorSettingsContext value={_settings}>
+        <ZTestRouter location={_history.location} navigator={_history}>
+          <ZRouteMap>
+            <ZRoute path="/settings/:id" element={<ZRomulatorSettingPage />} />
+          </ZRouteMap>
+        </ZTestRouter>
+      </ZRomulatorSettingsContext>
+    );
+
+    _renderer = new ZCircusSetupRenderer(element);
+    _driver = await _renderer.setup();
+
+    return ZCircusBy.first(_driver, ZRomulatorSettingPageComponentModel);
+  };
+
+  const loadTestTarget = async () => {
+    const target = await createTestTarget();
+    const suspense = await target.suspense();
+    await suspense.load();
+    return target;
+  };
+
+  beforeEach(() => {
+    _settings = mock<IZRomulatorSettingsService>();
+    _settings.get.mockResolvedValue(_games);
+
+    _history = createMemoryHistory({
+      initialEntries: [`/settings/${_games.id}`],
+    });
+  });
+
+  afterEach(async () => {
+    await _driver?.destroy?.call(_driver);
+    await _renderer?.destroy?.call(_renderer);
+  });
+
+  describe("Header", () => {
+    it("should set the page title to the name of the config", async () => {
+      // Arrange.
+      const target = await loadTestTarget();
+      const card = await target.card();
+      const title = await card.title();
+
+      // Act.
+      const heading = await title.heading();
+      const actual = await heading?.text();
+
+      // Assert.
+      expect(actual).toEqual(_games.name);
+    });
+
+    it("should set the subheading to the description of the config", async () => {
+      // Arrange.
+      const target = await loadTestTarget();
+      const card = await target.card();
+      const title = await card.title();
+
+      // Act.
+      const subHeading = await title.subHeading();
+      const actual = await subHeading?.text();
+
+      // Assert.
+      expect(actual).toEqual(_games.description);
+    });
+  });
+
+  describe("Reset", () => {
+    it("should reset the form meta when the reset button is clicked", async () => {
+      // Arrange.
+      const target = await loadTestTarget();
+      const form = await target.form();
+      const field = await form.field(_gamesFolder.id);
+
+      // Act.
+      const folder = await field.text();
+      await folder?.keyboard("games");
+      const reset = await form.button("reset");
+      const btn = await reset.underlying();
+      await btn.click();
+      const actual = await folder?.value();
+
+      // Assert.
+      expect(actual).toEqual(_gamesContent.gamesFolder);
+    });
+  });
+
+  describe("Save", () => {
+    it("should save the form when the save button is clicked", async () => {
+      // Arrange.
+      const target = await loadTestTarget();
+      const form = await target.form();
+      const field = await form.field(_gamesFolder.id);
+      const gamesFolder = "games";
+      const expected = {
+        contents: expect.objectContaining({ gamesFolder }),
+      };
+
+      // Act.
+      const folder = await field.text();
+      await folder?.clear();
+      await folder?.keyboard(gamesFolder);
+      const save = await form.button("submit");
+      const btn = await save.underlying();
+      await btn.click();
+
+      // Assert.
+      expect(_settings.update).toHaveBeenCalledWith(_games.id, expected);
+    });
+  });
+});

package/src/settings/setting-page.tsx

@@ -0,0 +1,83 @@
+import {
+  useParams,
+  ZBreadcrumbsLocation,
+  ZCard,
+  ZForm,
+  ZFormButton,
+  ZFormField,
+  ZIconFontAwesome,
+  ZStack,
+  ZSuspenseProgress,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed } from "@zthun/fashion-tailor";
+import { firstDefined, ZOrientation } from "@zthun/helpful-fn";
+import type { IZMetadata } from "@zthun/helpful-query";
+import { asStateData, isStateLoading } from "@zthun/helpful-react";
+import type { ZRomulatorConfigId } from "@zthun/romulator-client";
+import { useCallback } from "react";
+import { useSetting, useSettingsService } from "./settings-service.mjs";
+
+export function ZRomulatorSettingPage() {
+  const { id } = useParams();
+  const [setting, setSetting] = useSetting(id as ZRomulatorConfigId);
+  const _setting = asStateData(setting);
+  const metadata = firstDefined([], _setting?.metadata);
+  const service = useSettingsService();
+
+  const renderField = useCallback((meta: IZMetadata) => {
+    return <ZFormField key={meta.id} metadata={meta} />;
+  }, []);
+
+  const handleUpdateConfig = async (contents: any) => {
+    try {
+      const updated = await service.update(_setting!.id, { contents });
+      setSetting(updated);
+    } catch {
+      // TODO:  Error Handling
+    }
+  };
+
+  return (
+    <ZStack className="ZRomulatorSettingPage-root" gap={ZSizeFixed.Medium}>
+      <ZBreadcrumbsLocation />
+      <ZForm value={_setting?.contents} onValueChange={handleUpdateConfig}>
+        <ZCard
+          TitleProps={{
+            avatar: (
+              <ZIconFontAwesome
+                name={_setting?.avatar}
+                width={ZSizeFixed.Medium}
+              />
+            ),
+            heading: _setting?.name,
+            subHeading: _setting?.description,
+            suffix: (
+              <ZStack
+                orientation={ZOrientation.Horizontal}
+                gap={ZSizeFixed.Medium}
+              >
+                <ZFormButton
+                  type="reset"
+                  ButtonProps={{
+                    label: (
+                      <ZIconFontAwesome name="rotate-left" tooltip="Reset" />
+                    ),
+                  }}
+                />
+                <ZFormButton
+                  type="submit"
+                  ButtonProps={{
+                    label: <ZIconFontAwesome name="save" tooltip="Save" />,
+                  }}
+                />
+              </ZStack>
+            ),
+          }}
+        >
+          <ZSuspenseProgress disabled={!isStateLoading(setting)} />
+          {metadata.map(renderField)}
+        </ZCard>
+      </ZForm>
+    </ZStack>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { ZCircusBy, ZCircusComponentModel } from "@zthun/cirque";
+import {
+  ZBoxComponentModel,
+  ZGridViewComponentModel,
+} from "@zthun/fashion-boutique";
+import type { ZRomulatorConfigId } from "@zthun/romulator-client";
+
+export class ZRomulatorSettingsPageComponentModel extends ZCircusComponentModel {
+  public static readonly Selector = ".ZRomulatorSettingsPage-root";
+
+  public async grid(): Promise<ZGridViewComponentModel> {
+    return Promise.resolve(new ZGridViewComponentModel(this.driver));
+  }
+
+  public async config(id: ZRomulatorConfigId): Promise<ZBoxComponentModel> {
+    return ZCircusBy.first(this.driver, ZBoxComponentModel, id);
+  }
+}

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

@@ -0,0 +1,99 @@
+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 {
+  ZRomulatorConfigBuilder,
+  ZRomulatorConfigId,
+} from "@zthun/romulator-client";
+import { createMemoryHistory, type MemoryHistory } from "history";
+import type { Mocked } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { mock } from "vitest-mock-extended";
+import { ZRomulatorSettingsPageComponentModel } from "./settings-page.cm.mjs";
+import { ZRomulatorSettingsPage } from "./settings-page.js";
+import type { IZRomulatorSettingsService } from "./settings-service.mjs";
+import { ZRomulatorSettingsContext } from "./settings-service.mjs";
+
+describe("ZRomulatorSettingsPage", () => {
+  const _games = new ZRomulatorConfigBuilder()
+    .id(ZRomulatorConfigId.Games)
+    .name("Games")
+    .build();
+  const _emulators = new ZRomulatorConfigBuilder()
+    .id(ZRomulatorConfigId.Media)
+    .name("Media")
+    .build();
+
+  let _renderer: IZCircusSetup | undefined;
+  let _driver: IZCircusDriver | undefined;
+  let _settings: Mocked<IZRomulatorSettingsService>;
+  let _history: MemoryHistory;
+
+  beforeEach(() => {
+    _history = createMemoryHistory();
+
+    const source = new ZDataSourceStatic([_games, _emulators]);
+
+    _settings = mock<IZRomulatorSettingsService>();
+    _settings.retrieve.mockImplementation((r) => source.retrieve(r));
+    _settings.count.mockImplementation((r) => source.count(r));
+  });
+
+  afterEach(async () => {
+    await _driver?.destroy?.call(_driver);
+    await _renderer?.destroy?.call(_renderer);
+  });
+
+  const createTestTarget = async () => {
+    const element = (
+      <ZTestRouter location={_history.location} navigator={_history}>
+        <ZRomulatorSettingsContext value={_settings}>
+          <ZRomulatorSettingsPage />
+        </ZRomulatorSettingsContext>
+      </ZTestRouter>
+    );
+
+    _renderer = new ZCircusSetupRenderer(element);
+    _driver = await _renderer.setup();
+
+    const target = await ZCircusBy.first(
+      _driver,
+      ZRomulatorSettingsPageComponentModel,
+    );
+    const grid = await target.grid();
+    const suspense = await grid.suspense();
+    await suspense.load();
+
+    return target;
+  };
+
+  describe("Tiles", () => {
+    it("should have a tile for each config returned from the settings service", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+
+      // Act.
+      const games = await target.config(ZRomulatorConfigId.Games);
+      const emulators = await target.config(ZRomulatorConfigId.Media);
+
+      // Assert.
+      expect(games).toBeTruthy();
+      expect(emulators).toBeTruthy();
+    });
+
+    it("should navigate to an individual config page when a tile is clicked", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+      const expected = `/${ZRomulatorConfigId.Games}`;
+
+      // Act.
+      const games = await target.config(ZRomulatorConfigId.Games);
+      await games.click();
+
+      // Assert.
+      expect(_history.location.pathname).toEqual(expected);
+    });
+  });
+});

package/src/settings/settings-page.tsx

@@ -0,0 +1,82 @@
+import {
+  useFashionTheme,
+  useNavigate,
+  ZBox,
+  ZBreadcrumbsLocation,
+  ZCaption,
+  ZCard,
+  ZContentTitle,
+  ZGridView,
+  ZH3,
+  ZIconFontAwesome,
+  ZStack,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed } from "@zthun/fashion-tailor";
+import { ZDataRequestBuilder } from "@zthun/helpful-query";
+import type { IZRomulatorConfig } from "@zthun/romulator-client";
+import { useState } from "react";
+import { useSettingsService } from "./settings-service.mjs";
+
+export function ZRomulatorSettingsPage() {
+  const { body } = useFashionTheme();
+  const navigate = useNavigate();
+  const settings = useSettingsService();
+  const [request] = useState(new ZDataRequestBuilder().build());
+
+  const renderTile = (config: IZRomulatorConfig) => {
+    return (
+      <ZBox
+        className="ZRomulatorSettingsPage-tile"
+        fashion={body}
+        interactive
+        key={config.id}
+        cursor="pointer"
+        padding={ZSizeFixed.Medium}
+        data-name={config.id}
+        onClick={() => navigate(config.id)}
+      >
+        <ZStack gap={ZSizeFixed.Medium}>
+          <ZContentTitle
+            avatar={
+              <ZIconFontAwesome
+                name={config.avatar}
+                width={ZSizeFixed.Medium}
+              />
+            }
+            heading={<ZH3 compact>{config.name}</ZH3>}
+            subHeading={<ZCaption>{config.description}</ZCaption>}
+          />
+        </ZStack>
+      </ZBox>
+    );
+  };
+
+  return (
+    <ZStack gap={ZSizeFixed.Medium}>
+      <ZBreadcrumbsLocation />
+      <ZCard
+        TitleProps={{
+          heading: <ZH3 compact>Settings</ZH3>,
+          subHeading: <ZCaption compact>Modify configs and options</ZCaption>,
+          avatar: <ZIconFontAwesome name="gear" width={ZSizeFixed.Medium} />,
+        }}
+      >
+        <ZGridView
+          className="ZRomulatorSettingsPage-root"
+          GridProps={{
+            columns: {
+              xl: "1fr 1fr 1fr",
+              lg: "1fr 1fr",
+              sm: "1fr",
+            },
+            gap: ZSizeFixed.Medium,
+          }}
+          SearchProps={false}
+          dataSource={settings}
+          value={request}
+          renderItem={renderTile}
+        />
+      </ZCard>
+    </ZStack>
+  );
+}

package/src/settings/settings-service.mts

@@ -0,0 +1,38 @@
+import type { IZDataSource } from "@zthun/helpful-query";
+import { useAsyncState } from "@zthun/helpful-react";
+import type {
+  IZRomulatorConfig,
+  ZRomulatorConfigId,
+} from "@zthun/romulator-client";
+import { ZHttpService } from "@zthun/webigail-http";
+import {
+  ZRestfulService,
+  type IZRestfulGet,
+  type IZRestfulUpdate,
+} from "@zthun/webigail-rest";
+import { createContext, useContext } from "react";
+import { ZRomulatorEnvironmentBuilder } from "../environment/environment.mjs";
+
+export interface IZRomulatorSettingsService
+  extends IZDataSource<IZRomulatorConfig>,
+    IZRestfulGet<IZRomulatorConfig>,
+    IZDataSource<IZRomulatorConfig>,
+    IZRestfulUpdate<IZRomulatorConfig> {}
+
+export function createDefaultSettingsService(): IZRomulatorSettingsService {
+  const env = new ZRomulatorEnvironmentBuilder().build();
+  const http = new ZHttpService();
+  const endpoint = `${env.api}/configs`;
+  return new ZRestfulService(http, endpoint);
+}
+
+export const ZRomulatorSettingsContext = createContext(
+  createDefaultSettingsService(),
+);
+
+export const useSettingsService = () => useContext(ZRomulatorSettingsContext);
+
+export const useSetting = (id: ZRomulatorConfigId) => {
+  const service = useSettingsService();
+  return useAsyncState(() => service.get(id), [id]);
+};

package/src/systems/system-avatar-card.cm.mts

@@ -0,0 +1,17 @@
+import { ZCircusComponentModel } from "@zthun/cirque";
+import { ZCardComponentModel } from "@zthun/fashion-boutique";
+import { firstDefined } from "@zthun/helpful-fn";
+
+export class ZRomulatorSystemAvatarCardComponentModel extends ZCircusComponentModel {
+  public static readonly Selector = ".ZRomulatorSystemCard-root";
+
+  public card(): Promise<ZCardComponentModel> {
+    return Promise.resolve(new ZCardComponentModel(this.driver));
+  }
+
+  public async id(): Promise<string> {
+    const card = await this.card();
+    const name = await card.driver.attribute("data-name");
+    return firstDefined("", name);
+  }
+}

package/src/systems/system-avatar-card.tsx

@@ -0,0 +1,41 @@
+import type { IZCard } from "@zthun/fashion-boutique";
+import {
+  ZCard,
+  ZIconFontAwesome,
+  ZImageSource,
+  ZStack,
+} from "@zthun/fashion-boutique";
+import { ZSizeFixed } from "@zthun/fashion-tailor";
+import { ZOrientation } from "@zthun/helpful-fn";
+
+export interface IZRomulatorSystemAvatarCard {
+  system: any;
+
+  CardProps?: Pick<IZCard, "footer">;
+}
+
+export function ZRomulatorSystemAvatarCard(props: IZRomulatorSystemAvatarCard) {
+  const { system, CardProps } = props;
+  // TODO: Add support for other regions
+  const src = `/systems/us/${system.id}-256x256.png`;
+
+  return (
+    <ZCard
+      className="ZRomulatorSystemCard-root"
+      TitleProps={{
+        avatar: <ZIconFontAwesome name="gamepad" width={ZSizeFixed.Small} />,
+        heading: system.short,
+        subHeading: system.name,
+      }}
+      name={system.id}
+      {...CardProps}
+    >
+      <ZStack
+        orientation={ZOrientation.Horizontal}
+        justify={{ content: "center" }}
+      >
+        <ZImageSource src={src} width={ZSizeFixed.ExtraLarge} />
+      </ZStack>
+    </ZCard>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { ZCircusBy, ZCircusComponentModel } from "@zthun/cirque";
+import {
+  ZAlertComponentModel,
+  ZSuspenseComponentModel,
+} from "@zthun/fashion-boutique";
+import { ZRomulatorSystemAvatarCardComponentModel } from "./system-avatar-card.cm.mjs";
+
+export class ZRomulatorSystemPageComponentModel extends ZCircusComponentModel {
+  public static readonly Selector = ".ZRomulatorSystemPage-root";
+
+  public async loader(): Promise<ZSuspenseComponentModel | null> {
+    return ZCircusBy.optional(this.driver, ZSuspenseComponentModel);
+  }
+
+  public async loading(): Promise<boolean> {
+    return (await this.loader()) != null;
+  }
+
+  public load(): Promise<void> {
+    return this.driver.wait(() => this.loading().then((l) => !l));
+  }
+
+  public error(): Promise<ZAlertComponentModel | null> {
+    return ZCircusBy.optional(this.driver, ZAlertComponentModel);
+  }
+
+  public system(): Promise<ZRomulatorSystemAvatarCardComponentModel | null> {
+    return ZCircusBy.optional(
+      this.driver,
+      ZRomulatorSystemAvatarCardComponentModel,
+    );
+  }
+}

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

@@ -0,0 +1,127 @@
+import type { IZCircusDriver, IZCircusSetup } from "@zthun/cirque";
+import { ZCircusBy } from "@zthun/cirque";
+import { ZCircusSetupRenderer } from "@zthun/cirque-du-react";
+import {
+  ZNotFound,
+  ZRoute,
+  ZRouteMap,
+  ZTestRouter,
+} from "@zthun/fashion-boutique";
+import { required } from "@zthun/helpful-fn";
+import {
+  ZDataRequestBuilder,
+  ZDataSourceStatic,
+  ZFilterBinaryBuilder,
+} from "@zthun/helpful-query";
+import { ZRomulatorSystemBuilder } from "@zthun/romulator-client";
+import type { History } from "history";
+import { createMemoryHistory } from "history";
+import { noop } from "lodash-es";
+import type { Mocked } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { mock } from "vitest-mock-extended";
+import { ZRomulatorSystemPageComponentModel } from "./system-page.cm.mjs";
+import { ZRomulatorSystemPage } from "./system-page.js";
+import type { IZRomulatorSystemsService } from "./systems-service.mjs";
+import { ZRomulatorSystemsServiceContext } from "./systems-service.mjs";
+
+interface ZRomulatorSystemPageProps {
+  history?: History;
+}
+
+describe("SystemPage", () => {
+  const nes = new ZRomulatorSystemBuilder().id("nes").build();
+
+  let _driver: IZCircusDriver;
+  let _renderer: IZCircusSetup;
+  let _systems: Mocked<IZRomulatorSystemsService>;
+
+  beforeEach(() => {
+    const source = new ZDataSourceStatic([nes]);
+
+    _systems = mock<IZRomulatorSystemsService>();
+    _systems.get.mockImplementation(async (id) => {
+      const byId = new ZFilterBinaryBuilder()
+        .subject("id")
+        .equal()
+        .value(id)
+        .build();
+      const request = new ZDataRequestBuilder().filter(byId).build();
+      const [item] = await source.retrieve(request);
+
+      return required(item);
+    });
+  });
+
+  afterEach(async () => {
+    await _driver?.destroy?.call(_driver);
+    await _renderer?.destroy?.call(_renderer);
+  });
+
+  async function createTestTarget(props: ZRomulatorSystemPageProps = {}) {
+    const {
+      history = createMemoryHistory({ initialEntries: [`/systems/${nes.id}`] }),
+    } = props;
+
+    const element = (
+      <ZRomulatorSystemsServiceContext value={_systems}>
+        <ZTestRouter navigator={history} location={history.location}>
+          <ZRouteMap>
+            <ZRoute path="/systems/:id" element={<ZRomulatorSystemPage />} />
+            <ZRoute path="*" element={<ZNotFound />} />
+          </ZRouteMap>
+        </ZTestRouter>
+      </ZRomulatorSystemsServiceContext>
+    );
+
+    _renderer = new ZCircusSetupRenderer(element);
+    _driver = await _renderer.setup();
+    return ZCircusBy.first(_driver, ZRomulatorSystemPageComponentModel);
+  }
+
+  describe("Loading", () => {
+    it("should show a loading indicator while the system is loading", async () => {
+      // Arrange.
+      _systems.get.mockReturnValue(new Promise(noop));
+      const target = await createTestTarget();
+
+      // Act.
+      const actual = await target.loading();
+
+      // Assert.
+      expect(actual).toBeTruthy();
+    });
+  });
+
+  describe("Error", () => {
+    it("should show an error alert if the system cannot be found", async () => {
+      // Arrange.
+      const history = createMemoryHistory({
+        initialEntries: ["/systems/does-not-exist"],
+      });
+      const target = await createTestTarget({ history });
+      await target.load();
+
+      // Act.
+      const actual = await target.error();
+
+      // Assert.
+      expect(actual).toBeTruthy();
+    });
+  });
+
+  describe("System", () => {
+    it("should render the system information card", async () => {
+      // Arrange.
+      const target = await createTestTarget();
+      await target.load();
+
+      // Act.
+      const system = await target.system();
+      const actual = await system?.id();
+
+      // Assert.
+      expect(actual).toEqual(nes.id);
+    });
+  });
+});