ut-prime
v2.84.7
Published
UT higher order UI components based on PrimeReact
Downloads
278
Readme
UT React component library ut-prime
This module implements React components, for use in building
web applications with the UT framework. The library exports
wrapped PrimeReact
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 PrimeReact
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-prime/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
Test components in storybook, with React fast refresh:
npm run storybook
Run automated unit tests locally before pushing to git:
npm run jest
or
node runjest
Expose a wrapped
PrimeReact
component:Add it to ./src/components/prime/index.ts
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';
- Implement the component's logic in the files in the folder
Advanced dev patterns
When cloned in the dev folder within an implementation:
- remove the
react
andreact-dom
dependencies frompackage.json
- run
npm install
within ut-prime - run
npm start
within ut-prime to rebuild on each change - run webpack in the implementation
- remove the
When cloned in ut/ut/node_modules, only install these dependencies:
"@babel/cli@^7.17.10", "@babel/core@^7.18.5", "@babel/plugin-proposal-class-properties@^7.17.12", "@babel/plugin-transform-runtime@^7.18.5", "@babel/preset-env@^7.18.2", "@babel/preset-react@^7.17.12", "@babel/preset-typescript@^7.17.12", "@babel/runtime@^7.18.3", "@storybook/testing-library@^0.0.13", "@testing-library/react@^12.1.5", "@testing-library/user-event@^14.2.6"