Pinpoint component library and styles for React

Component Docs

• Notebook

• Base Styles

• Avatar

• Banner

• Breadcrumb

• Button

• Compose

• ContextMenu

• Dialog

• Dropdown

• Error

• Filter

• Icon

• ListPanel

• Loader

• Message

• Metric

• Panel

• Popup

• SegmentedControl

• Table

• Tabs

• Theme

• Toggle

• Tooltip

Install

npm install @pinpt/uic.next

If you'd like to use FontAwesome pro, set an environment variable with your token for npm:

export UIC_NPM_TOKEN=<your_token_here>

Developing

In order to develop using uic.next, you'll need to link in React from the project you are developing on. Assuming they are siblings in a directory:

npm link ../<project_name>/node_modules/react

Then, you will need to link this library:

npm link

And finally, in your application, bring in the linked library:

npm link @pinpt/uic.next

If you need to add any third party libraries, add them to both dependencies and peerDependencies so that npm brings in the dependencies dependencies and so that rollup ignores them.

Creating Components

This library has a script for adding a component that handles all the tasks needed:

npm run create -- -c <componentName>

This script will create:

• Component directory with uppercased componentName
• Component stub
• Storybook file stub
• Test file stub
• Less stylesheet stub
• README template

This script will update:

• Library exports
• Main library README

If you pass the script the -s or --star argument, it will make the file use named exports, and write the imports as import * as <componentName> from './<componentName>';. Otherwise all components are default exported from their individual files.

Storybook

We use storybook for viewing the components in isolation:

npm run storybook 

Each component should have a <componentName>.stories.tsx file with:

• A default export with the title
• Named exports with each desired variation

For example:

import React from 'react';
import * as Tabs from './index';

export default {
    title: 'Tabs',
};

export const multiple = () => (
    <Tabs.Wrapper>
        <Tabs.Tab title="Hi" small="(Hello)">
            <div>
                Hello World
            </div>
        </Tabs.Tab>
        <Tabs.Tab title="Bye" small="(Goodbye)">
            <div>
                Goodbye
            </div>
        </Tabs.Tab>
        <Tabs.Tab title="Titles can be really long">
            <div>
                ...and that is fine
            </div>
        </Tabs.Tab>
    </Tabs.Wrapper>
);

export const single = () => (
    <Tabs.Wrapper>
        <Tabs.Tab title=":(">
            <div>
                I am all alone
            </div>
        </Tabs.Tab>
    </Tabs.Wrapper>
);

This yields a Storybook entry with the structure

Tabs
├── Multiple
├── Single

Testing

This repo currently uses Jest snapshot testing to validate that components render successfully.

Running Tests

npm test

Writing Tests

Tests should be created in the folder of the components, in a file named <component_name>.test.tsx

Here is an example test suite for the Tabs component:

import React from 'react';
import renderer from 'react-test-renderer';
import * as Tabs from './index';

it('renders correctly with one tab', () => {
    const tree = renderer
        .create(
            <Tabs.Wrapper>
                <Tabs.Tab title="Hello">
                    <div>
                        Hello, world
                    </div>
                </Tabs.Tab>
            </Tabs.Wrapper>
        )
        .toJSON();
    expect(tree).toMatchSnapshot();
});

Tests should cover an many variations as possible of the component, especially if it is dynamic based on props. Be sure to commit the snapshots generated by your new tests.

Updating Test Snapshops

npm run test:output -- -u