@navinc/base-react-components
Nav's Pattern Library
Last updated 4 days ago by dlewallen .
SEE LICENSE IN LICENSE · Repository · Original npm · Tarball · package.json
$ cnpm install @navinc/base-react-components 
SYNC missed versions from official npm registry.

base-react-components

Is split into two different parts: Storybook, and Base Components. Storybook is used for development and testing of the ui and for reference for developers on the implementation details of an UI component. The readme files for each component inside Storybook acts as the Styleguide. Lastly, Base Components is the directory containing all of our base reusable components which gets published as the npm package.

You can view the current build of Storybook here.

Bug Reporting: For technical issues post to ux-guild or front-end-team slack channel. For design issues talk to a designer.

Quick start

  1. npm start - Make changes and watch them at http://localhost:9009/
  2. Watch and run your tests with npm run test:watch
  3. Test in pipsqueak with bin/copy-to-pip
  4. When it works as you need it to, build it: npm run build
  5. Run the tests post build: npm run test
  6. Create a MR and get approvals
  7. Version: npm version [major, minor, patch]
  8. Publish: npm publish
    • Make sure you are logged in npm login
    • You can confirm the new version was published by visiting here
  9. Merge new version into master.
  10. Use this new version! In your other repo where you want to use these changes do npm install @navinc/base-react-components@latest

It's a little bit manual right now. We are working on getting some of these build steps into the pipeline.

Setup

npm i

Getting Started with Storybook

To start Storybook

npm start

And go to http://localhost:9009/

Contributing

Adding a new Base Component: Copy the pattern used with other base components. Each component should have its own folder with a structure similar to

/parts/...js  //Optional
/index.js
/readme.md
/story.js

If it makes sense, organize related components by putting them in their own sub directory, ei: /typography, but prefer a flat file structure.

Group stories by using the same storiesOf name.

IMPORTANT: Don't forget to add them to the main base-components/index.js file.

If your component has multiple variations of style based on props. Make sure to use withPropsCombinations and to pass it arrays for each possible prop. For example:

// ...

import withPropsCombinations from 'react-storybook-addon-props-combinations'

// ...

storiesOf('__ | Variations', module).add(
  'Typography: Copy',
  withPropsCombinations(P, {
    bold: [false, true],
    italic: [false, true],
    size: ['', 'small', 'large'],
    fullWidth: [false, true],
    children: ['Test']
  })
)

When should you add a new component? Good question! You should add a component to our base components when you have found a good reusable abstraction of a piece of our ui. Make sure the team agrees with the abstraction and that it has been passed off by design then add it and and create a pull request for it.

Testing Locally in pipsqueak before publishing Assuming pipsqueak and base-react-components are both in ~/{user}/nav/ you can use bin/copy-to-pip and it will build base-react-components and manually put it in the node_modules folder in pipsqueak for you. Then you can restart pipsqueak and see your changes.

Updating a Base Component: This can be dangerous waters. Its super easy to update global components now, but be careful cause this will change it everywhere its used! Make sure to be smart about changes you make and to thoroughly test your changes! If you do make global changes, make sure you bump the major version.

Building

Base Components

npm run build

Storybooks

npm run build:storybook

And open .out/index.html to test storybook.

Testing

  1. npm test This will run Jest and our linter.

Versioning and Publishing npm Package (Deploy)

Once you have made changes to the base-components, tested them, had them reviewed and approved you can publish your changes:

  1. Build: npm run build
  2. Version: npm version [major, minor, patch]
  3. Publish: npm publish
  4. Merge new version into master.
  5. Use this new version! In your other repo where you want to use these changes do npm install @navinc/base-react-components@latest

NOTE: Publishing only publishes the /base-components directory. Not the Storybook. Storybook updates get automatically deployed via gitlab with every merge into master.

Using base-react-components in your own projects

  1. Install it in your project npm i @navinc/base-react-components
  2. Use it! Ex: import { Copy } from '@navinc/base-react-components'
  3. Refer to Storybook for implementation details for each component.

Add-ons

We use the following add-ons are in Storybooks. Please read their documentation for more details.

  • Knobs: allow you to edit React props dynamically using the Storybook UI.
  • Viewport: allows your stories to be displayed in different sizes and layouts
  • Actions: used to display data received by event handlers.
  • Options: used to set configure the Storybook UI.
  • a11y: accessibility testing. story.
  • Props Combinations : renders every variation of a component based of its possible props.
  • Info : Shows additional info in the storybook ui about a component

App TODO/Wishlist

Current Tags

  • 11.15.0-beta.0                                ...           beta (2 months ago)
  • 12.4.3                                ...           latest (4 days ago)

214 Versions

  • 12.4.3                                ...           4 days ago
  • 12.4.2                                ...           6 days ago
  • 12.4.1                                ...           7 days ago
  • 12.4.0                                ...           13 days ago
  • 12.3.0                                ...           22 days ago
  • 12.2.2                                ...           a month ago
  • 12.2.1                                ...           a month ago
  • 12.2.0                                ...           a month ago
  • 12.1.0                                ...           a month ago
  • 12.0.1                                ...           2 months ago
  • 12.0.0                                ...           2 months ago
  • 11.14.2-beta.0                                ...           2 months ago
  • 11.14.1                                ...           2 months ago
  • 11.15.0-beta.0                                ...           2 months ago
  • 11.14.0                                ...           3 months ago
  • 11.13.0                                ...           3 months ago
  • 11.12.1                                ...           3 months ago
  • 11.12.0                                ...           3 months ago
  • 11.11.1                                ...           3 months ago
  • 11.11.0                                ...           3 months ago
  • 11.10.0                                ...           3 months ago
  • 11.9.0                                ...           3 months ago
  • 11.8.0                                ...           4 months ago
  • 11.7.0                                ...           4 months ago
  • 11.6.0                                ...           4 months ago
  • 11.5.0                                ...           4 months ago
  • 11.4.1                                ...           4 months ago
  • 11.4.0                                ...           4 months ago
  • 11.3.0                                ...           4 months ago
  • 11.2.0                                ...           4 months ago
  • 11.1.0                                ...           4 months ago
  • 11.0.0                                ...           5 months ago
  • 10.41.0                                ...           5 months ago
  • 10.40.0                                ...           5 months ago
  • 10.39.4                                ...           5 months ago
  • 10.39.3                                ...           5 months ago
  • 10.39.2                                ...           5 months ago
  • 10.39.1                                ...           5 months ago
  • 10.39.0                                ...           6 months ago
  • 10.38.2                                ...           6 months ago
  • 10.38.1                                ...           6 months ago
  • 10.38.0                                ...           6 months ago
  • 10.37.0                                ...           6 months ago
  • 10.36.1                                ...           6 months ago
  • 10.36.0                                ...           6 months ago
  • 10.35.0                                ...           6 months ago
  • 10.34.0                                ...           6 months ago
  • 10.33.1                                ...           6 months ago
  • 10.33.0                                ...           6 months ago
  • 10.32.0                                ...           6 months ago
  • 10.31.2                                ...           6 months ago
  • 10.31.1                                ...           6 months ago
  • 10.31.0                                ...           6 months ago
  • 11.0.0-beta.7                                ...           6 months ago
  • 11.0.0-beta.6                                ...           6 months ago
  • 10.30.1                                ...           6 months ago
  • 10.30.0                                ...           6 months ago
  • 10.29.0                                ...           7 months ago
  • 10.28.1                                ...           7 months ago
  • 10.28.0                                ...           7 months ago
  • 10.27.0                                ...           7 months ago
  • 10.26.2                                ...           7 months ago
  • 11.0.0-beta.5                                ...           7 months ago
  • 11.0.0-beta.4                                ...           7 months ago
  • 11.0.0-beta.3                                ...           7 months ago
  • 11.0.0-beta.1                                ...           7 months ago
  • 11.0.0-beta.0                                ...           7 months ago
  • 10.26.1                                ...           7 months ago
  • 10.26.0                                ...           7 months ago
  • 10.25.1                                ...           7 months ago
  • 10.25.0                                ...           7 months ago
  • 10.24.1                                ...           8 months ago
  • 10.24.0                                ...           8 months ago
  • 10.23.0                                ...           8 months ago
  • 10.22.0                                ...           8 months ago
  • 10.20.1                                ...           8 months ago
  • 10.21.0                                ...           8 months ago
  • 10.20.0                                ...           8 months ago
  • 10.19.0                                ...           8 months ago
  • 10.18.0                                ...           8 months ago
  • 10.17.0                                ...           8 months ago
  • 10.16.2                                ...           8 months ago
  • 10.16.1                                ...           8 months ago
  • 10.16.0                                ...           8 months ago
  • 10.15.3                                ...           8 months ago
  • 10.15.2                                ...           8 months ago
  • 10.15.1                                ...           8 months ago
  • 10.15.0                                ...           8 months ago
  • 10.14.0                                ...           8 months ago
  • 10.13.0                                ...           8 months ago
  • 10.12.0                                ...           8 months ago
  • 10.11.0                                ...           9 months ago
  • 10.10.0                                ...           9 months ago
  • 10.9.0                                ...           9 months ago
  • 10.8.0                                ...           9 months ago
  • 10.6.3                                ...           9 months ago
  • 10.6.2                                ...           9 months ago
  • 10.6.1                                ...           9 months ago
  • 10.7.0                                ...           9 months ago
  • 10.6.0                                ...           9 months ago
  • 10.5.0                                ...           9 months ago
  • 10.4.0                                ...           9 months ago
  • 10.3.0                                ...           9 months ago
  • 10.2.1                                ...           9 months ago
  • 10.2.0                                ...           10 months ago
  • 10.1.0                                ...           10 months ago
  • 10.0.0                                ...           10 months ago
  • 9.3.0                                ...           10 months ago
  • 9.2.1                                ...           10 months ago
  • 9.2.0                                ...           10 months ago
  • 9.1.0                                ...           10 months ago
  • 9.0.1                                ...           10 months ago
  • 8.10.0                                ...           10 months ago
  • 8.9.0                                ...           10 months ago
  • 8.8.0                                ...           10 months ago
  • 8.6.0                                ...           10 months ago
  • 8.5.0                                ...           10 months ago
  • 8.4.9                                ...           10 months ago
  • 8.4.8                                ...           10 months ago
  • 8.4.7                                ...           10 months ago
  • 8.4.6                                ...           10 months ago
  • 8.4.5                                ...           10 months ago
  • 8.4.4                                ...           10 months ago
  • 8.4.3                                ...           10 months ago
  • 8.4.2                                ...           a year ago
  • 8.4.1                                ...           a year ago
  • 8.4.0                                ...           a year ago
  • 8.3.0                                ...           a year ago
  • 8.2.0                                ...           a year ago
  • 8.1.0                                ...           a year ago
  • 8.0.0                                ...           a year ago
  • 6.0.0                                ...           a year ago
  • 7.0.1                                ...           a year ago
  • 7.0.0                                ...           a year ago
  • 5.4.4 [deprecated]           ...           2 years ago
  • 5.4.3 [deprecated]           ...           2 years ago
  • 5.4.2 [deprecated]           ...           2 years ago
  • 5.4.1 [deprecated]           ...           2 years ago
  • 5.4.0 [deprecated]           ...           2 years ago
  • 5.3.0 [deprecated]           ...           2 years ago
  • 5.2.0 [deprecated]           ...           2 years ago
  • 5.1.0 [deprecated]           ...           2 years ago
  • 4.3.1 [deprecated]           ...           2 years ago
  • 4.3.0 [deprecated]           ...           2 years ago
  • 4.2.0 [deprecated]           ...           2 years ago
  • 4.0.6 [deprecated]           ...           2 years ago
  • 4.0.5 [deprecated]           ...           2 years ago
  • 4.0.4 [deprecated]           ...           2 years ago
  • 4.0.3 [deprecated]           ...           2 years ago
  • 4.0.2 [deprecated]           ...           2 years ago
  • 4.0.1 [deprecated]           ...           2 years ago
  • 5.0.0 [deprecated]           ...           2 years ago
  • 4.0.0 [deprecated]           ...           2 years ago
  • 3.4.0 [deprecated]           ...           2 years ago
  • 3.3.2 [deprecated]           ...           2 years ago
  • 3.3.1 [deprecated]           ...           2 years ago
  • 3.3.0 [deprecated]           ...           2 years ago
  • 3.2.1 [deprecated]           ...           2 years ago
  • 3.2.0 [deprecated]           ...           2 years ago
  • 3.1.3 [deprecated]           ...           2 years ago
  • 3.1.1 [deprecated]           ...           2 years ago
  • 3.1.0 [deprecated]           ...           2 years ago
  • 3.0.0 [deprecated]           ...           2 years ago
  • 2.7.0 [deprecated]           ...           2 years ago
  • 2.6.0 [deprecated]           ...           2 years ago
  • 2.5.1 [deprecated]           ...           2 years ago
  • 2.5.0 [deprecated]           ...           2 years ago
  • 2.3.0 [deprecated]           ...           2 years ago
  • 2.2.4 [deprecated]           ...           2 years ago
  • 0.0.9 [deprecated]           ...           2 years ago
  • 2.2.3 [deprecated]           ...           2 years ago
  • 2.2.2 [deprecated]           ...           2 years ago
  • 2.2.1 [deprecated]           ...           2 years ago
  • 2.2.0 [deprecated]           ...           2 years ago
  • 2.1.0 [deprecated]           ...           2 years ago
  • 2.0.0 [deprecated]           ...           2 years ago
  • 1.8.4 [deprecated]           ...           2 years ago
  • 1.8.3 [deprecated]           ...           2 years ago
  • 1.8.2 [deprecated]           ...           2 years ago
  • 1.8.1 [deprecated]           ...           2 years ago
  • 1.8.0 [deprecated]           ...           2 years ago
  • 1.7.2 [deprecated]           ...           2 years ago
  • 1.7.1 [deprecated]           ...           2 years ago
  • 1.7.0 [deprecated]           ...           2 years ago
  • 1.6.3 [deprecated]           ...           2 years ago
  • 1.6.1 [deprecated]           ...           2 years ago
  • 1.6.0 [deprecated]           ...           2 years ago
  • 1.5.0 [deprecated]           ...           2 years ago
  • 1.3.11 [deprecated]           ...           2 years ago
  • 1.3.10 [deprecated]           ...           2 years ago
  • 1.3.9 [deprecated]           ...           2 years ago
  • 1.3.8 [deprecated]           ...           2 years ago
  • 1.3.7 [deprecated]           ...           2 years ago
  • 1.3.6 [deprecated]           ...           2 years ago
  • 1.3.5 [deprecated]           ...           2 years ago
  • 1.3.4 [deprecated]           ...           2 years ago
  • 1.3.3 [deprecated]           ...           2 years ago
  • 1.3.2 [deprecated]           ...           2 years ago
  • 1.4.0 [deprecated]           ...           2 years ago
  • 1.3.1 [deprecated]           ...           2 years ago
  • 1.3.0 [deprecated]           ...           2 years ago
  • 1.2.0 [deprecated]           ...           2 years ago
  • 1.1.3 [deprecated]           ...           2 years ago
  • 1.1.2 [deprecated]           ...           2 years ago
  • 1.1.1 [deprecated]           ...           2 years ago
  • 1.1.0 [deprecated]           ...           2 years ago
  • 1.0.0 [deprecated]           ...           2 years ago
  • 0.5.0 [deprecated]           ...           2 years ago
  • 0.4.0 [deprecated]           ...           2 years ago
  • 0.2.2 [deprecated]           ...           2 years ago
  • 0.3.0 [deprecated]           ...           2 years ago
  • 0.2.1 [deprecated]           ...           2 years ago
  • 0.2.0 [deprecated]           ...           2 years ago
  • 0.1.0 [deprecated]           ...           2 years ago
Downloads
Today 0
This Week 214
This Month 466
Last Day 214
Last Week 252
Last Month 273
Dependencies (1)
Dev Dependencies (62)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |