pay-component-library v1.0.22

Pay Component Library

This is a repo for reusable components across the Checkr Pay ecosystem.

It compiles with Typescript and uses Storybook to allow for interactive, isolated component testing.

Installation

In another project, install the package with

npm i --save pay-component-library

Then you can import any of the components exported from src/index.js

How to add a new component

1. Make a new directory for it in src/
2. Add the component itself, as well as any .styled.js and .stories.jsx files in the directory
3. Import the component and export it from src/index.js

How to test a new component

1. Add a .stories.jsx file next to your component. An example is Button.stories.jsx.
2. Run npm run storybook – look for your story in the web interface that's opened up.

How to publish

1. Make sure you have an npm account that has publish permissions and npm login
2. Update the version number in package.json
3. Add and commit all your changes
4. Run npm run prepublish – make sure it compiles correctly.
5. Run npm publish.

Important differences and quirks

The configuration of this repo is still a bit janky (since I wanted an MVP rather than a full-scale solution for early review and input). We should be using Webkit or something to produce a full-fledged build process, but for now we're just compiling our typescript, copying over a CSS file, and calling it a day (see npm run prepublish).

• This is a typescript project, but it works just fine with js! We can intermix JS and TS here, and we can import and use the components from a TS or a JS repo.
• We can't import styled-components/macro right now.

• There are important file naming and import gotchas here:

  1. JSX file extensions won't work right now in the components. Just name every jsx file with a js extension and import React at the top no matter what. JSX works fine for stories though, since they're ignored by our typescript compiler.
  2. When you import a file, you need to use its extension (eg. import { Button } from './Button/Button.js')

TODOs:

• Make this a private npm module.
• Get linter and prettier installed and working.
• Get icon testing working.
• Hot reloading
• Better test process for dist/
• Figure out why sourcemap has to be false for now in tsconfig.js