UT higher order components
npm install ut-front-devextremeut-front-devextremeThis module implements React components, for use in building
web applications with the UT framework. The library exports wrappedMaterial-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.
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:
``js`
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.
- Continuous Integration (Jenkins)
- Static Code Analysis (SonarQube)
- Component library storybook (Chromatic)
1) Test components in storybook, with React fast refresh:
`bash`
npm run storybook
1) Run automated unit tests locally before pushing to git:
`bash`
npm run jest
or
`bash`
node runjest
1) Expose a wrapped Material-UI component:
Add it to ./src/components/mui/index.ts
1) Expose a wrapped DevExtreme component:
Add it to ./src/components/dx/index.ts
1) Create a new UT component:
`bash`
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
`js``
export { default as ComponentName } from './ComponentName';