Add FormatSetSelector, FormatSetPanel, make UI more consistent (#1456)

Author: hl662

apps/learning-snippets/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@itwin/tree-widget-react": "workspace:*",
     "@itwin/property-grid-react": "workspace:*",
+    "@itwin/quantity-formatting-react": "workspace:*",
     "@itwin/itwinui-react": "^3.19.3",
     "@itwin/appui-abstract": "^5.1.1",
     "@itwin/appui-react": "^5.13.0",

apps/learning-snippets/pnpm-lock.yaml

@@ -15,6 +15,10 @@ const packages = [
     name: "@itwin/property-grid-react",
     dir: "property-grid",
   },
+  {
+    name: "@itwin/quantity-formatting-react",
+    dir: "quantity-formatting",
+  },
 ];
 
 linkPackages();

apps/learning-snippets/scripts/linkWorkspaceDeps.cjs

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import { expect } from "chai";
+import { render, screen } from "@testing-library/react";
+// __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSelectorExampleImports
+import { FormatSelector } from "@itwin/quantity-formatting-react";
+import type { FormatDefinition } from "@itwin/core-quantity";
+import type { FormatSet } from "@itwin/ecschema-metadata";
+// __PUBLISH_EXTRACT_END__
+import { QuantityFormattingTestUtils } from "../../utils/QuantityFormattingTestUtils.js";
+
+describe("Quantity formatting", () => {
+  describe("Learning snippets", () => {
+    describe("FormatSelector", () => {
+      before(async function () {
+        await QuantityFormattingTestUtils.initialize();
+      });
+
+      after(async function () {
+        await QuantityFormattingTestUtils.terminate();
+      });
+
+      it("renders FormatSelector", async function () {
+        // __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSelectorExample
+        const formatSet: FormatSet = {
+          name: "TestSet",
+          label: "Test Format Set",
+          unitSystem: "metric",
+          formats: {
+            "test-format": {
+              name: "test-format",
+              label: "Test Format",
+              type: "Decimal",
+              precision: 2,
+              composite: { units: [{ name: "Units.M", label: "m" }] },
+            },
+          },
+        } as FormatSet;
+
+        const handleFormatSelection = (_formatDef: FormatDefinition, _key: string) => {
+          // Handle format selection
+        };
+
+        render(<FormatSelector activeFormatSet={formatSet} activeFormatDefinitionKey={undefined} onListItemChange={handleFormatSelection} />);
+        // __PUBLISH_EXTRACT_END__
+
+        expect(screen.getByPlaceholderText("labels.searchFormats")).to.exist;
+      });
+    });
+  });
+});

apps/learning-snippets/src/test/quantity-formatting/FormatSelector.test.tsx

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import { expect } from "chai";
+import { render, screen } from "@testing-library/react";
+// __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSetPanelExampleImports
+import { FormatSetPanel } from "@itwin/quantity-formatting-react";
+import type { FormatSet } from "@itwin/ecschema-metadata";
+// __PUBLISH_EXTRACT_END__
+import { QuantityFormattingTestUtils } from "../../utils/QuantityFormattingTestUtils.js";
+
+describe("Quantity formatting", () => {
+  describe("Learning snippets", () => {
+    describe("FormatSetPanel", () => {
+      before(async function () {
+        await QuantityFormattingTestUtils.initialize();
+      });
+
+      after(async function () {
+        await QuantityFormattingTestUtils.terminate();
+      });
+
+      it("renders FormatSetPanel in editable mode", async function () {
+        // __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSetPanelEditableExample
+        const formatSet: FormatSet = {
+          name: "CustomSet",
+          label: "Custom Format Set",
+          unitSystem: "metric",
+          description: "A custom format set",
+          formats: {},
+        } as FormatSet;
+
+        const handleFormatSetChange = (_updatedFormatSet: FormatSet) => {
+          // Handle format set change
+        };
+
+        render(<FormatSetPanel formatSet={formatSet} editable={true} onFormatSetChange={handleFormatSetChange} />);
+        // __PUBLISH_EXTRACT_END__
+
+        expect(screen.getByText("labels.formatSetDetails")).to.exist;
+      });
+
+      it("renders FormatSetPanel in read-only mode", async function () {
+        // __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSetPanelReadOnlyExample
+        const formatSet: FormatSet = {
+          name: "ReadOnlySet",
+          label: "Read-Only Format Set",
+          unitSystem: "imperial",
+          description: "A read-only format set",
+          formats: {},
+        } as FormatSet;
+
+        render(<FormatSetPanel formatSet={formatSet} editable={false} />);
+        // __PUBLISH_EXTRACT_END__
+
+        expect(screen.getByText("labels.formatSetDetails")).to.exist;
+        const labelInput = screen.getByLabelText("labels.description");
+        expect((labelInput as HTMLInputElement).disabled).to.be.true;
+      });
+    });
+  });
+});

apps/learning-snippets/src/test/quantity-formatting/FormatSetPanel.test.tsx

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import { expect } from "chai";
+import { render, screen } from "@testing-library/react";
+// __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSetSelectorExampleImports
+import { FormatSetSelector } from "@itwin/quantity-formatting-react";
+import type { FormatSet } from "@itwin/ecschema-metadata";
+// __PUBLISH_EXTRACT_END__
+import { QuantityFormattingTestUtils } from "../../utils/QuantityFormattingTestUtils.js";
+
+describe("Quantity formatting", () => {
+  describe("Learning snippets", () => {
+    describe("FormatSetSelector", () => {
+      before(async function () {
+        await QuantityFormattingTestUtils.initialize();
+      });
+
+      after(async function () {
+        await QuantityFormattingTestUtils.terminate();
+      });
+
+      it("renders FormatSetSelector", async function () {
+        // __PUBLISH_EXTRACT_START__ QuantityFormat.FormatSetSelectorExample
+        const formatSets: FormatSet[] = [
+          {
+            name: "MetricSet",
+            label: "Metric Formats",
+            unitSystem: "metric",
+            description: "Standard metric unit formats",
+            formats: {},
+          } as FormatSet,
+          {
+            name: "ImperialSet",
+            label: "Imperial Formats",
+            unitSystem: "imperial",
+            description: "Imperial unit formats",
+            formats: {},
+          } as FormatSet,
+        ];
+
+        const handleFormatSetChange = (_formatSet: FormatSet, _key: string) => {
+          // Handle format set change
+        };
+
+        render(<FormatSetSelector formatSets={formatSets} selectedFormatSetKey={undefined} onFormatSetChange={handleFormatSetChange} />);
+        // __PUBLISH_EXTRACT_END__
+
+        expect(screen.getByPlaceholderText("labels.searchFormatSets")).to.exist;
+      });
+    });
+  });
+});

apps/learning-snippets/src/test/quantity-formatting/FormatSetSelector.test.tsx

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import { expect } from "chai";
+import { render, screen } from "@testing-library/react";
+// __PUBLISH_EXTRACT_START__ QuantityFormat.QuantityFormatPanelExampleImports
+import { QuantityFormatPanel } from "@itwin/quantity-formatting-react";
+import { IModelApp } from "@itwin/core-frontend";
+import type { FormatDefinition } from "@itwin/core-quantity";
+// __PUBLISH_EXTRACT_END__
+import { QuantityFormattingTestUtils } from "../../utils/QuantityFormattingTestUtils.js";
+
+describe("Quantity formatting", () => {
+  describe("Learning snippets", () => {
+    describe("QuantityFormatPanel", () => {
+      before(async function () {
+        await QuantityFormattingTestUtils.initialize();
+      });
+
+      after(async function () {
+        await QuantityFormattingTestUtils.terminate();
+      });
+
+      it("renders QuantityFormatPanel", async function () {
+        // __PUBLISH_EXTRACT_START__ QuantityFormat.QuantityFormatPanelExample
+        const formatDefinition: FormatDefinition = {
+          precision: 4,
+          type: "Decimal",
+          composite: {
+            units: [{ name: "Units.M", label: "m" }],
+          },
+        };
+
+        const handleFormatChange = (_newFormat: FormatDefinition) => {
+          // Handle format change
+        };
+
+        render(
+          <QuantityFormatPanel
+            formatDefinition={formatDefinition}
+            unitsProvider={IModelApp.quantityFormatter.unitsProvider}
+            onFormatChange={handleFormatChange}
+            initialMagnitude={123.456}
+          />,
+        );
+        // __PUBLISH_EXTRACT_END__
+
+        expect(screen.getByText("labels.type")).to.exist;
+      });
+    });
+  });
+});

apps/learning-snippets/src/test/quantity-formatting/QuantityFormatPanel.test.tsx

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/* eslint-disable import/no-duplicates */
+import { IModelApp, NoRenderApp } from "@itwin/core-frontend";
+// __PUBLISH_EXTRACT_START__ QuantityFormat.QuantityFormattingInitializeImports
+import { QuantityFormatting } from "@itwin/quantity-formatting-react";
+
+// __PUBLISH_EXTRACT_END__
+
+export class QuantityFormattingTestUtils {
+  private static _initialized = false;
+
+  public static async initialize() {
+    if (QuantityFormattingTestUtils._initialized) {
+      return;
+    }
+
+    await NoRenderApp.startup();
+    // __PUBLISH_EXTRACT_START__ QuantityFormat.QuantityFormattingInitialize
+    await QuantityFormatting.startup({ localization: IModelApp.localization });
+    // __PUBLISH_EXTRACT_END__
+    QuantityFormattingTestUtils._initialized = true;
+  }
+
+  public static async terminate() {
+    QuantityFormatting.terminate();
+    await IModelApp.shutdown();
+    QuantityFormattingTestUtils._initialized = false;
+  }
+}