@itwin/synchronization-report-react

Usage

1. Installation

npm i @itwin/synchronization-report-react

Yarn

yarn add @itwin/synchronization-report-react

2. Imports

Import the component and styles.

import { Report } from '@itwin/synchronization-report-react';
import '@itwin/synchronization-report-react/style.css';

Export maps

If you get an error that style.css can not be found, it might be because your project cannot handle export maps correctly. You can work around this by importing from the actual path (i.e. dist folder):

import '@itwin/synchronization-report-react/dist/style.css';

3. Basic usage

Simply pass your report data and workflow mapping into the Report component.

export const App = () => {
  // ... load report data

  return (
    <>
      <Report data={report} workflowMapping={mapping} />
    </>
  );
};

4. Advanced usage

This package uses a composition approach to provide extreme flexibility. Smaller components are exported and can be passed as children of Report, which makes the report data available through the context API without prop drilling. However, most of the smaller components do accept props to allow using outside Report.

Additionally, all the smaller components also support these props:

• displayStrings for localization and for modifying verbiage.
• className for specifying custom styles.
• rest props for specifying any delegated props (e.g. data or aria attributes).

export const App = () => {
  // ... load report data

  return (
    <Report data={reportData} workflowMapping={mapping}>
      <ReportTitleWrapper>
        <ReportTitle />
        <ReportDebugIds />
      </ReportTitleWrapper>
      <ReportHeaderBannerWrapper>
        <ReportTimestamp />
        <ReportBanner />
      </ReportHeaderBannerWrapper>
      <ReportTableSelectWrapper>
        <Label as='span'>Issues Found</Label>
        <ReportTableSelect />
      </ReportTableSelectWrapper>
      <ReportInfoPanelWrapper>
          <ProblemsTable />
        <ReportInfoPanel />
      </ReportInfoPanelWrapper>
    </Report>
  );
};

Development

This project was bootstrapped with Vite and uses Yarn v3 without PnP.

The actual components are located in src/components/ and are used by the test app located at src/App.tsx.

You can open the test app in Stackblitz without cloning the repo:

Available scripts

yarn start

Runs the test app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn test

Launches the Cypress test runner environment.
See the section about component testing for more information.

yarn build

Generates bundled output in the dist/ directory.
Three files are generated — one each for the ES module, type declarations, and styles.