Topotopia NPM | npm.io

Common ICP UI components

This repo contains ICP UI react common components which are shared across ICP UI microservices.

Displying the changes locally without adding to your own code

We are running story book like the carbon team is doing. Clone the repo like normal git clone git@github.ibm.com:IBMPrivateCloud/icp-ui-components.git

Install the dependencies

npm i

After you have created your component. Create a story that just displays the component and run:

npm run storybook This will load storybook locally and you can view your component from your browser. Everytime a change is made to the component, the code will rebuild and the browser will update.

Deploy storybook @ https://pages.github.ibm.com/IBMPrivateCloud/icp-ui-components

npm run deploy

How to consume ICP UI Common Components?

Add the .npmrc file to your git repository and configure it by visiting the NPM registry in artifactory here: https://na.artifactory.swg-devops.com/artifactory/webapp/#/artifacts/browse/simple/General/cpi-npm-local

Login with your IBM Intranet credentials
Click the Set me Up text in the upper right hand corner
It will ask you to type your password to insert your credentials automatically then copy the output to your .npmrc file
Update the @<SCOPE> to icpui and save the file with your email and token that was added to the file
Add the .npmrc file to the root of your github code repository
Then add the needed component to your code

import {MyButton} from '@icpui/icp-ui-components'

Prerequisites

Any repository that wants to consume these files needs to use webpack to build the react components. Make sure carbon-components and carbon-icons is installed in the target repository.

Contributing

We are going about a different way of contributing to this repo. When a change is added to this repo and it has a new feature, tests, or bug fixes, once the change is pushed to the master branch it will be released. We are using semantic-release to automatically release our components to the artifactory NPM registry.

Making a change

Clone the repo like normal git clone git@github.ibm.com:IBMPrivateCloud/icp-ui-components.git

Install the dependencies

npm i

Make your code changes:

Add the code to the src/components directory.
Create a new directory with your new components name
Add the code for the component in a file within the component's directory
Styles are stored in the scss directory. Please name the files appropriately
We import the colors from carbon automatically
Add Jest tests for your component
Add a story for your component so it will display in the story book

Once you have done all of that, it's time to stage your changes and commit the new code:

git add .
git checkout -b branchname
npm run commit

This new command will do the following:

Run the jest tests before the commit is done, if the tests fail, you have to fix the test and redo the commit
Starts commitizen to start an interactive changelog. This basically helps semantic-release to understand what type of change you are making and helps it to decide whether to release it or not.
Choose the appropriate change type you are commiting

Must be one of the following:

feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing or correcting existing tests
chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

Choose the correct scope
Add the Title of the change
Add the description of the change
If it closes an issue, answer yes to affects an issue and add Closes <issue url>
If it's a BREAKING CHANGE Select yes to that question

Once the commit has succeeded -> all tests have passed -> Then push the branch and creat a PR as normal.

Add @ericabr @kaapte As a reviewer
We will review and merge

The code will be sent to travis and if a new release is determined, a new release will be created when the change is merged to the master.

References

Change to trigger build