centerfield-component-library v0.21.0

Centerfield Component Library

A React component library published as a NPM package on a private Verdaccio server.

Product owner: https://github.com/christiancashiola
Click here to view components
Click here to view test coverage
Click here to view NPM private server

Table of Contents

• Developing Components
• Using NPM link
• Publishing Components
• Using Components

Developing Components

🔧Setup:

Setup is simple. 1. Git clone this repository. 2. Change directory into "source" and run npm install. 3. Ensure you are following Centerfield's GitFlow by working off of a dev branch.

👽 Structure:

This repo uses a unique structure unlike any other CF application.

• commands/ -> Node.js code for AWS build, NPM publishing, and Component creation.
• coverage/ -> Test coverage information.
• config/ -> Files related to configuration or setup.
• templates/ -> The template that commands/newComponent.js relies on.
• src/index.js -> Everything that our NPM package exports.
• src/componentMap.js -> All components that would be used in a JSON Buyflow should be added here. You will have to manually update this file if you want to use a component you create in a JSON Buyflow.
• src/components/ -> All of the components. Note that each component is self contained within its own folder (.js, .scss, .test, .md).

⚡ Development:

The development process is very streamlined and easy to follow. 1. To create a new component, make sure you are in the "source" directory and run npm run new. This will ask you to provide a Component name. Please use UpperCamelCase. Take note of the console output. 2. View your new component folder within src/components/ and update the contents of each file to use the name you provided (Highlight "NewComponent" and press ctrl-d). 3. Start up the dev server by running: npm start. This will launch a localhost version for viewing components. This is your playground. Use debuggers, console logs, etc. 4. Write your code. Document your code. Test your code.

📋 Rules:

There are some hard and fast rules that must be followed when developing new components. Your pull request will be rejected if you do not follow these rules.

• PropTypes must be present.
• DefaultProps should be used for any prop that requires a default value.
• Avoid 3rd party libraries and ask yourself or another dev if this is the way to go. Remember that any dependency you use, the consuming application will have to use as well.
• Every prop requires a description no matter how simple you think it is. This way, anyone and everyone will understand every single prop. This is 50% of your documentation.
• Every component should have 80% unit test coverage. Via husky, your code will not even be pushed up to GitHub unless it meets that criteria. Remember, these are simple UI/common components. They should not be hard to test. We want to use these components with confidence. No integration tests necessary.

Using NPM Link

Setup 🔗

To test your components in your app while making live edits without publishing to NPM you must use "npm link".
Here are the steps: 1. Make sure you npm install: npm i 2. Start up the local npm package: npm run start:npm 3. Once that's up, run npm link (this only needs to be done once ever) 4. Inside your other app repo run npm link centerfield-component-library 5. Now inside that other app you have access to this repo. Keep in mind you have access to /source. This means you must import from "centerfield-component-library/lib/index" 6. To unlink run npm unlink inside this repo and npm unlink centerfield-component-library inside your other app's repo. If you install new packages via npm in either repo you may need to repeat these steps 2-5.

Publishing Components

Only the master branch can be published.

In fact.. You will get an error if you try to do otherwise 😈

This means that you have had to go through the entire GitFlow process to be approved to publish.
Here is the process: 1. Create a dev{initials} branch off of develop branch 2. Create a PR into develop with your changes (this must be reviewed) 3. On develop branch, update the version in package.json and create a PR into master (this must be reviewed and the ONLY thing that should be changed is the version number) The reason we don't update the version on your local dev{initials} branch is that there could be multiple people adding to the next version to be published. 4. Create a release tag of master branch explaining what this new publish is about. 5. Publish from the master branch. If you want to externally test out a component before publishing use NPM Link

🍼 Prerequisites:

• Set your NPM registry by running: npm set registry http://192.168.10.180:88
• If you have not created a user before run: npm adduser --registry http://192.168.10.180:88
• Make sure you are logged in by running: npm login --registry http://192.168.10.180:88

📐 Steps To Publish:

The NPM scripts located in the "package.json" handle almost all the upkeep involved. This is the easiest part! 1. Update the version number inside the "package.json". 2. Run the command: npm publish --registry http://192.168.10.180:88 MAKE SURE YOU USE THE REGISTRY FLAG HERE, OR THIS PACAKGE BECOMES PUBLIC 3. Verify no errors and view our NPM private server to see if your new version is there.

Using Components

Follow these steps to use components from this library. Make sure your registry is set to point to our proxy by running: npm set registry http://192.168.10.180:88 1. In your consuming application, at the root level of your "package.json" run: npm install centerfield-component-library@9.9.9 (except use the version you want, not "9.9.9") 2. Import any components you want just like any other node module. Just remember if you want to use the styles you must import them as well (import 'centerfield-component-library/index.css).