npm package: @shesha/module-reports
Description: Boilerplate for writing React Libraries bundled with Rollup.js to commonJs and ES6 Modules and React Storybook
Author: Boxfusion Team
Latest version: 0.4.0

# @boxfusion/pd-devexpressreporting

## Heading

This is a component library, based on ReactJS and [DevExpress Reporting](https://www.npmjs.com/package/devexpress-reporting) that provides the capability to develop a reporting application to create and customize reports.

## Consuming the library

In order to use this library in your application, there are three things you need to do: install it, register it, and import DevExpress styles.

### Install

### Register

Because this components uses a library that references a `window` object on load, it causing an error shown below when registered normally:

To overcome this, it will need to be registered only within the `useEffect`, because this function runs on the browser, when the window object is available, as shown below:

### import the DevExpress styles

Create a `dev-express.less` file and paste the following lines of code:

```less
@import '../../node_modules//jquery-ui/themes/base/all.css';
@import '../../node_modules//devextreme/dist/css/dx.common.css';
@import '../../node_modules//devextreme/dist/css/dx.light.css';
@import '../../node_modules//@devexpress/analytics-core/dist/css/dx-analytics.common.css';
@import '../../node_modules//@devexpress/analytics-core/dist/css/dx-analytics.light.css';
@import '../../node_modules//@devexpress/analytics-core/dist/css/dx-querybuilder.css';
@import '../../node_modules//devexpress-reporting/dist/css/dx-webdocumentviewer.css';
@import '../../node_modules//devexpress-reporting/dist/css/dx-reportdesigner.css';
```

In your `pages/\_app.tsx` file, import the styles like below

```tsx
import {
  AppConfiguratorProvider,
  CustomErrorBoundary,
  DynamicModalProvider,
  GlobalStateProvider,
  IToolboxComponentGroup,
  PageWithLayout,
  ShaApplicationProvider,
  StoredFilesProvider,
  UiProvider,
} from '@shesha-io/reactjs';
import { CustomNProgress } from 'components';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import { BASE_URL } from 'src/api/utils/constants';
import { StyledThemeProvider } from 'src/definitions/styled-components';
require('@shesha-io/reactjs/dist/styles.less');
require('src/styles/compiled.antd.variable.css');
require('src/styles/custom-n-progress.less');

require('src/styles/devexpress.less');

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  const router = useRouter();
  const [reportingComponents, setReportingComponents] = useState<IToolboxComponentGroup[]>([]);

  useEffect(() => {
    setReportingConfigComponents();
  }, []);

  const setReportingConfigComponents = () => {
    import('@shesha/module-reports').then(({ allComponents }) => {
      setReportingComponents(allComponents);
    });
  };

  // Use the layout defined at the page level, if available
  const getLayout = (Component as PageWithLayout<any>).getLayout ?? ((page) => page);

  return (
    <CustomErrorBoundary>
      <StyledThemeProvider>
        <GlobalStateProvider>
          <ShaApplicationProvider
            backendUrl={BASE_URL}
            router={router as any}
            toolboxComponentGroups={reportingComponents}
            noAuth={router?.asPath?.includes('/no-auth')}
          >
            <AppConfiguratorProvider>
              <DynamicModalProvider>
                <CustomNProgress />
                <StoredFilesProvider baseUrl={BASE_URL} ownerId={''} ownerType={''}>
                  <UiProvider>{getLayout(<Component {...(router?.query || {})} {...pageProps} />)}</UiProvider>
                </StoredFilesProvider>
              </DynamicModalProvider>
            </AppConfiguratorProvider>
          </ShaApplicationProvider>
        </GlobalStateProvider>
      </StyledThemeProvider>
    </CustomErrorBoundary>
  );
}

export default MyApp;
```

```jsx
require('src/styles/devexpress.less');
```

> The libraries which are referenced here will be installed you install
> `@boxfusion/pd-devexpressreporting`, meaning you don't need to it
> manually.

## Switch to another file

All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.

## Rename a file

You can rename the current file by clicking the file name in the navigation bar or by clicking the **Rename** button in the file explorer.

## Delete a file

You can delete the current file by clicking the **Remove** button in the file explorer. The file will be moved into the **Trash** folder and automatically deleted after 7 days of inactivity.

## Export a file

You can export the current file by clicking **Export to disk** in the menu. You can choose to export the file as plain Markdown, as HTML using a Handlebars template or as a PDF.

## Node version

This library was developed and tested on version v18.16.0 of [NodeJS](https://nodejs.org/en)