CORE-UI

This is a custom React component library created for easy use and customization of commonly used UI components based on the new DSM. This library is designed to help developers reduce development time and increase consistency in their applications by providing reusable, styled components.

Being a library there will be no Bootstrap or renders function, as we are just exposing the components for the consumer apps.

This is developed buy using a boilerplate of the TSDX.

TSDX: A development environment and build tool for creating TypeScript libraries with ease.

Node Version

Node version must be 16.14

Install

To Install dependencies (if not already installed).

$ npm install

Development

For the Development you have to start the TSDX server

$ npm start

Once it's done then run either Storybook

$ npm run storybook

Testing

We are using Jest and Storybook's storyshots addon to provide a large amount of snapshot coverage. Every storybook story is automatically snapshotted to provide an ongoing diff as we make changes.

Additional those tests that are not covered by snapshots should be authored in *.test.tsx files using the Testing-Library

Testing Library: A set of libraries for testing user interfaces in JavaScript applications. It provides utilities to simulate user interactions with a UI and assert that the resulting output matches the expected behavior.

Check the linter with

$ npm run lint

and run unit tests with

$ npm run test

Storybook development

Make sure you have started the tsdx server. npm run start/ npm start Run inside another terminal:

npm storybook

This loads the stories from ./stories.

Storybook Build & Deployment

Requirements: Node version should be 18.xx

• Go to root folder cd core-ui
• Install the packages npm install
• build the storybook npm run build-storybook
• It will create a storybook-static folder with index.html file.

Deployment

• The CI will build the storybook images when a tag matches dsm-x.y.z.

• After a successful build this image will be deployed to the cloud.

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Setup Files

This is the folder structure we set up for you:

/src
  index.tsx
/test
  XXXXX.test.tsx
/stories
  XXXXX.stories.tsx # EDIT THIS
/.storybook
  main.js
  preview.js
.gitignore
package.json
README.md         # EDIT THIS
tsconfig.json

Rollup

TSDX uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

GitHub Actions

Following actions are added:

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix

Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in package.json and dist/index.js accordingly. Please report if any issues are found.