@underdogio/pup

Underdog.io's component library.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@underdogio/pup
Minified + gzip package size for @underdogio/pup in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.