Pup

Underdog.io's component library.

Example usage

// Import non-component base styles for stuff like typography.
// This should be done once in your project.
import '@underdogio/pup/styles/pup.scss'

import React, { Component } from 'react'

import Alert from '@underdogio/pup/components/alert'

class Application extends Component {
  render() {
    return (
      <Alert type="success" onClose={() => console.log('closed')}>
        Nice work!
      </Alert>
    )
  }
}

Installation

Because components include CSS and other non Javascript imports, you will also need webpack. We recommend using @underdogio/webpack-config so you won't have to create a new webpack config from scratch.

yarn add @underdogio/pup @underdogio/webpack-config

Development

Pup is built off of Storybook. You can start Storybook by running:

yarn develop

You will then be able to access the Storybook frontend at http://localhost:9001.

Adding a new component

Every component should have its own directory under the components/ directory (e.g. /components/button/) with the following files:

index.jsx

Source code for the component. Be sure to include prop types.

styles.scss

Styles for the component. This file should be imported by index.jsx.

[component_name].stories.jsx

Storybook stories and documentation.

[component_name].spec.jsx

Mocha tests.

Creating a new release

1. Bump the npm package version number with yarn version.

   yarn version --new-version <new-version-number>

2. Push the new tag and package.json update to GitHub.

   git push origin master --tags

3. Publish to npm.

   npm publish

Deployment

You can deploy a new version of the component library frontend to GitHub pages by running:

yarn deploy