Introduce @itwin/quantity-formatting-react

[hl662]

See README of new package for example workflow, including images

Add @itwin/quantity-formatting-react package, which includes a QuantityFormatPanel, FormatSelector, FormatPanel (differs from QuantityFormatPanel in that it lets you customize the interactions more granularly if needed).

Additionally, adds extensive support to the test viewer in the repo to allow customizing the format settings of the app while being run. Compromises had to be made regarding the display of the formats (many KindOfQuantities share duplicate labels, for those KoQs, wrap the schemaName in parentheses and append to the label)

The test viewer now includes a button on the bottom status bar that will open up a modal to customize the formatting settings (per session)

The modal includes a dropdown selector to select the format you want to customize

Notes:

• The FormatManager and FormatSetFormatsProvider can be moved to @itwin/quantity-formatting-react in a later PR

[grigasp]

Could you add a gif or at least a static image of the components you're adding to the PR description?

[Copilot]

Pull Request Overview

This PR introduces a new quantity formatting React package (@itwin/quantity-formatting-react) that provides React components for quantity formatting configuration within iTwin applications. The package includes UI components for various format types including decimal, scientific, fractional, station, bearing, azimuth, and ratio formats.

Key changes:

• New React components for quantity formatting configuration panels and controls
• Comprehensive test coverage for all format types and internal components
• TypeScript configuration and build setup for the new package

Reviewed Changes

Copilot reviewed 74 out of 76 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
vite.config.ts	Build configuration for the React package with testing setup
tsconfig.json	TypeScript configuration for React JSX compilation
src/quantity-formatting-react.ts	Main entry point exporting public React components
src/useTranslation.ts	Custom hook for accessing localized strings
src/components/quantityformat/	React components for format panels and configuration UI
src/test/	Comprehensive test suite covering all components and format types

Files not reviewed (1)

• apps/test-viewer/pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[grigasp]

could a new ContextMenuItem be created that can use it to update the format a Field description uses, similar to the button I made in the test-viewer?

Sure, but the requirement is not completely clear to me:

• Are you talking about property context menu or the widget settings menu?
• In case of the former, we're not going to just open the dialog with all the formats, right? We should open it in a mode that has the appropriate format (the one used on selected property) pre-selected, or maybe even have others completely hidden. Do we know how it should work exactly?

All fields that formats their properties should have field.properties.koq right

Yes, but that's not convenient to access. I think the more appropriate attribute is PropertyRecord.property.kindOfQuantityName.

In any case, I think that should be implemented in a separate PR and warrants a GH issue that describes the requirements.

[hl662]

In any case, I think that should be implemented in a separate PR and warrants a GH issue that describes the requirements.

Issue opened, we can keep discussing a context menu item in there

[grigasp]

Reviewed API, package configuration and some top-level code of @itwin/quantity-formatting-react, also changes to test-viewer. Looks good.

[saskliutas]

Looked over React components code. Added some comments that apply to multiple files but didn't want to spam same comment on each file.

[grigasp]

Some questions regarding layout of the dialog:

1. Why does it take full height of the screen? I think it should:

   • take as little vertical space as possible, to accommodate its content,
   • as the amount of content grows, grow vertically until ~80% of the vertical screen size, then start showing the scrollbar.

2. Why is the preview block narrower than the other blocks?

3. Why do the blocks have so much left/right padding? Why aren't they in line with "Available Formats" section?

In short, seems like way too much blank space in that dialog.

[hl662]

In short, seems like way too much blank space in that dialog.

Crux of getting something quick to demonstrate functionality.

I've edited the styling of the component housed in test-viewer, and updated styling in the components exported by the package themselves to be more aligned:

[hl662]

Why is the preview block narrower than the other blocks?

It's a flex box that expands as the formatted value increases in size, it's meant to draw less attention than panels below it, which serves the largest purpose (configuring formatting)

Edit: Removed the flexbox, the preview pane now has the same size

[saskliutas]

Looks better.