pet-plan-component-library v0.0.65

Front-end Development

Install required front-end node modules with npm i.

Connecting to Artifactory

This shared component library is being stored in an NPM Artifactory repository. The guide used to connect to our Artifactory instance was here: https://www.jfrog.com/confluence/display/JFROG/npm+Registry

First you need to update your npm config to point to the registry by running the following command: npm config set registry https://petplanaws.jfrog.io/artifactory/PetPlanComponentLibrary/

You will then need to log into NPM using your Artifactory credentials: npm login

You will need to configure a .npmrc file in your User directory: ~/.npmrc.

To get the contents you need for this file you can run a curl command from your terminal: curl -u<username>:<apikey> https://petplanaws.jfrog.io/artifactory/api/npm/auth You will need to be registered as a user with the PetPlan Artifactory account for the above command to work. You will also need to get your user's API key. To get that go to the following page: https://petplanaws.jfrog.io/ui/admin/artifactory/user_profile and generate your API key.

Once the above command is run and authenticates correctly you should get an output of 3 lines that you can copy/paste into your .npmrc file. The 3 lines are called _auth, always-auth, and email.

You should now be connected to Artifactory.

Storybook

To run storybook use the npm run storybook command.

Creating a new component

A component is made up of 4 files; JSX, SCSS, SCSS.JS & STORIES.JS. Each file should begin with the directory title with spaces replaced by dashes (example-component.jsx, example-component.scss).

JSX

The JSX is the main file for our component. In here you will define the React component and it's functionality.

SCSS

We are using SCSS to write styles for our components.

SCSS.JS

This file is required for webpack to bundle each SCSS file separately when deploying. Inside of this file you only need to add 1 line to import the regular SCSS file.

STORIES.JS

This file is consumed by storybook to create a page(s) when storybook is running. In here you will need to define mock data that your component will consume and build.

Deploying

We are using Webpack to bundle and deploy our code. Deploying the components so that they can be imported by third-party front-end systems is entirely separate from storybook.

First, run npm run deploy, which will package the styles and javascript into the /dist/ directory.

Next, you'll want to update the version number inside the package.json file. It is the first property in the file.

After the version number is update you can run npm publish to push the code to the private repository.

Docker Instructions

1. cd to the root of the repo

2. Build the image and run the container:

   docker build -t petplan-shared-component-library . && docker run --rm -p 6006:6006 --name petplan-shared-component-library1 petplan-shared-component-library

3. Visit http://localhost:6006/ in your browser