commons-ui

Library for sharing GridSuite apps commons components

Frontend components organization

Components are organized as follows:

• src/components/ui

  • Simple, generic, low-level UI components.
  • Highly reusable and not tied to any business logic.

• src/components/composite

  • Richer, higher-level reusable components.
  • Composed of multiple UI components, but still independent from business logic.

• src/features

  • Feature- or domain-oriented components.
  • Tied to specific application use cases and business logic.

For developers

The commons-ui library has a demo app in which you can call your components to test them. The npm start command installs the library's dependencies then launches the demo app.

The commons-ui Storybook is also available at https://www.gridsuite.org/commons-ui/. It is the reference place to document and preview reusable UI components from src/components/ui. When you add a new component under src/components/ui, also add the corresponding story so it is available in Storybook.

Development Scripts

Developers can use these scripts to perform check actions instead of executing local tsc, eslint, etc... This ensures all developers use the project's local tools version from node_modules rather than a potentially different globally-installed version.

• npm run type-check - Runs TypeScript type checking without emitting files on the whole sources. Run this to check that your current dev is mainly correct.

• npm run type-check:build - Runs TypeScript type checking with emitting files and only on the exported sources. This is what is executed by the CI, so you can use it before committing.

• npm run build - Builds the library. Note: This automatically runs npm run prebuild first.

• npm run prebuild - Runs linting and type checking before the build (npm run lint && npm run type-check:build). This script is executed automatically by npm before npm run build and ensures that the build is not executed if linting or type checking fails. You don't need to call this manually unless you want to verify code quality without building.

• npm run storybook - Starts the Storybook development server. Changes to components and stories are reflected automatically during development.

• npm run build-storybook - Builds the static Storybook site. This is useful for verifying the production build or publishing the component documentation. This script is used when storybook.yml action is run.

Local Testing

If you want to test your library integration with a consumer application my-app you have first to build commons-ui via

• npm install (if not already done to get tsc)
• npm run build:pack

Then in the my-app project :

• Change the commons-ui dependency in my-app's package.json from
  @gridsuite/commons-ui:"^x.x.x"
  to
  @gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"
• npm install
• npm start

Warning : with Create React App, we realised the library was not updating correctly if you try to install the library multiple times. To fix this, run this command from the app after running "npm install"

• rm -Rf node_modules/.cache

For integrators

If you want to deploy a new version of commons-ui in the NPM package registry, first you need some permissions. You need to be a member of the gridsuite organization and a member of the 'developers' team. Only in this case, you need to follow the steps below:

• Make a release action
• In the 'run workflow' combobox select, let the branch on main
• Enter the type of evolution (major | minor | patch)
• Click 'run workflow'

Otherwise ask someone who has the permission.

License Headers and dependencies checking

To check dependencies license compatibility with this project one locally, please run the following command :

npm run licenses-check

Notes :

• Check license-checker-config.json for license white list and exclusion. If you need to update this list, please inform organization's owners.