UT React component library ut-front-devextreme

This module implements React components, for use in building web applications with the UT framework. The library exports wrapped Material-UI and DevExtreme components and also locally developed components, which are called UT components.

The idea of wrapped components is to have a central place to handle tasks like:

• Controlling used versions of external components
• Fixing bugs
• Extending external components with additional functionality

The idea of UT components is to create components for functionality not available in Material-UI and DevExtreme or higher order components based on existing ones.

All the UT components must follow these rules:

• Implemented as function components
• Written in TypeScript, to enable parameter checking during usage.
• Have a README.md file, with basic usage instructions.
• Have a .stories.tsx file, with example usage.
• Have a .test.tsx file, with unit test.
• Have a .types.tsx file, with a type definition of component's parameters
• Use Material-UI's styling solution, based on JSS, where applicable.

Usage

The library is published in a transpiled form, in commonJS format, so that it can be used with Webpack, but without the need to use Babel.

Import individual components using this pattern:

import SomeComponent from 'ut-front-devextreme/core/SomeComponent';

Check README.md files of the components for further info. A link to the storybook of all components is available in the project links below.

Project links

• Continuous Integration (Jenkins)
• Static Code Analysis (SonarQube)
• Component library storybook (Chromatic)

Library development tasks

1. Test components in storybook, with React fast refresh:

   npm run storybook

2. Run automated unit tests locally before pushing to git:

   npm run jest

   or

   node runjest

3. Expose a wrapped Material-UI component:

   Add it to ./src/components/mui/index.ts

4. Expose a wrapped DevExtreme component:

   Add it to ./src/components/dx/index.ts

5. Create a new UT component:

   npm run generate:component ComponentName

   • Implement the component's logic in the files in the folder src/components/ComponentName
   • Export the new component in src/components/index.ts

   export { default as ComponentName } from './ComponentName';