@aidexa/open-ds NPM

Banca Aidexa OpenDS: Basi

A React component library that provides:

basic component to be used in other projects
shared styling via SCSS and CSS Custom properties
Design Tokens syncronization with Invision DSM

This component library is published to NPM Registry with the name @aidexa/open-ds.

Setup

Install NodeJs v14.x, preferably via nvm
Register your account on Aidexa Azure portal.azure.com
Access the Azure DevOps repository: https://dev.azure.com/aidexa/Public%20Site/_git/aidexa-open-design-system
Clone the project with git
Run npm install in project folder to install all npm dependencies

Developing

To develop the components, it's reccomended to use Storybook; start by running the command: npm run storybook

See Component Driven for the best practices.

Commands

npm run build: run the production build; the output is written in the dist folder. npm run prepare: run the build command. This command is called automatically before any npm publish. npm run format: format all code files using Prettier configuration. npm run lint: run the ESLint with the Next.js configuration. npm run type-check: compile using TypeScript, use this script to check that the code is properly typed. npm run storybook: build and run storybook, opening a new browser window/tab. npm run build-storybook: create the static build of storybook, the output is put in the storybook-static folder. npm run build-design-tokens: syncronize the design tokens with Invision DSM, and overwrite the file /styles/_tokens.scss.

NPM Publish

To publish an updated version of this library:

update the version number in the package.json file
run npm run build and add to git eventualy new files created in the dist, es, lib folders
Important: be sure to commit all changes in the dist folder
commit and push to the master branch.
run the publish (pipeline https://dev.azure.com/aidexa/Public%20Site/_build?definitionId=39)