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)