ta-fe-components v1.3.83-r1

TripActions Components

This project aim to hold all the building blocks of TripActions UI. Our vision is to make the development of TripActions UI feels like a lego. Developers in TripActions will be able to consume the components this library holds and use them as is..

This project goals are:

• Reduce code duplication in TripActions.
• Add accessibility support to all TripActions basic components.
• Align TripActions UI element with a single design guidelines.
• Improve TripActions development experience and speed.

Installing

• Clone the project using ssh.
• Install the dependencies. npm i
• Start storybook. npm run storybook

Development Guidelines

Anyone can contribute to this project.

Before you add a new component ask yourself the following questions:

• Is my component common? if not, then maybe it is not the right place for it.
• Can my component serve different features? if not, it might not be general enough.

If you decide that your component should be in this project then

• Create a new folder under fe-components/src/libs/<your-component-name>.
• Write your component code there.
• Every component should have a standalone module.
• Every component should have tests using jest.
• Every component should have storybook presenting its different variants.

Once your component is ready

• Add your component module to public-api.ts.
• Make sure it doesn't break your project (for example ta-user). To do that, publish a test version ('-test' postfix) and consume it from your project.
• Ask @jtambillo, to review the design.
• Ask @ckandis or @nbenjano to review your code.

Side note Please notice that 'shared' folder is currently being used for sharing the component between multiple repositories (a.k.a fe-user / fe-admin)

Deployment

Currently there are 2 registries to publish a new version to (we want to publish to both of them every time we change version):

• git registry
• npm registry

Git registry setup

There is no special setup needed. Deployment is done automatically by a github action whenever we merge to master.

The only project which uses git registry currently is Liquid.

NPM registry (Nexus) setup

To be able to publish to npm registry ask in #escal-release slack channel to create a developer account in Nexus for you.

Then register yourself with npm (that should be done once, and will give you rights to publish to npm-private repository anytime):

npm adduser --registry=https://nexus.tripactions.tools/repository/npm-private/ --scope=@tripactions --auth-type=legacy
Username: <your nexus username>
Password: <your nexus password>
Email: <your tripactions email>

as a result ~/.npmrc file will be updated with the following lines (check it by typing open ~/.npmrc)

@tripactions:registry=https://nexus.tripactions.tools/repository/npm-private/
//nexus.tripactions.tools/repository/npm-private/:_authToken=NpmToken.<your token generated by npm>

fe-user and fe-admin projects use npm registry.

access to npm-private registry also gives you rights to read from npm-public registry (needed to install packages within fe-admin and fe-user repositories)

everything published to npm-private registry will be automatically available in npm-public registry

Publishing a new version

• Increase manually the version of the project. Increase only the minor version if there are no breaking changes.
  • https://github.com/tripactions/ta-fe-components/blob/master/package.json
  • https://github.com/tripactions/ta-fe-components/blob/master/projects/fe-components/package.json
• Run tests and fix all broken tests (if any): npm run test
• Merge to master
• Run production build from the root folder: npm run build:prod
• Go to dist/fe-components folder and make sure that the package.json has your new version.
• Publish to nexus (from dist/fe-components): npm publish.

For testing you can create a test version by adding '-test' to your version name and consume it from your project. For example 0.0.11-test.

DO NOT override production version, it will cause our builds to fail.

This project was generated with Angular CLI version 11.2.11.