@pinpt/react-components

React Components is a set of commonly used UI elements and settings.

Setup

• git clone this repo in a directory as a sibling to any web projects
• cd in to project and run npm install && npm link
• cd into your web project and run npm link pinpt-react-components

Alternate to npm link

If npm link doesn't work, use the normal sym link command: cd in to node_modules and run ln -s ../../react-components pinpt-react-components where ../../react-components is the relative path to the react components repo.

Non-sibling Installation

If you do not clone this repo into a location that is a sibling of your web projects, you'll need to ensure the web project's babel can find the component. Edit the config/paths.js file to update the location.

Usage

Basic

import { MyComponentName } from 'pinpt-react-components';

<MyComponentName data={...} />

Semantic UI

This component library wraps the React Semantic UI library. Rather than doing this:

import { Button } from 'semantic-ui-react'

Do this:

import { PinptBaseComponents } from 'pinpt-react-components';
const { Button } = PinptBaseComponents;

Charts.js

This component library wraps the React ChartJS library.

import { PinptCharts } from 'pinpt-react-components';
{ Doughnut } = PinptCharts

<Doughnut data={...} />

Storybook View

To see all of the components in action, outside of your webapp, run npm run storybook and visit http://localhost:9001/.

Developing components

Create a New Component

To automatically generate a new component based on our internal template, run:

node generator -c MyComponentName

This script does the following:

• Creates a new component and the required files in the /components/MyComponentName directory
• Adds the component to the packages export in components/index.js
• Adds the component to the storyboard / component explorer

Testing

npm run test

License

All of this code is proprietary and Copyright © 2017-2019 by Pinpoint Software, Inc.