Nitro Storybook

This repo provides the tools to implement view components which make up the visual appearance of Nitro.

  • Stylesheets for the app navigation and general appearance
  • Self-contained React components for use in building views

The intent of this repo is to provide a base on which other UIs can be built such that they maintain visual consistency and the Nitro brand.

Quick Start

From the current project directory, run:

  1. ensure you are running proper node version (see package.json => engines)
  2. yarn install
  3. yarn run storybook
  4. navigate to localhost:9001

Local Storybook Development in Nitro-Web

Its easy to create and test out a component on nitro in real time, even with hot reload. You can point your local storybook folder as you develop it.

Update the storybook in the Gemfile to a local path

gem "nitro_sg", :path => "/path/to/storybook/locally"

Update the storybook in package.json to a local path

”nitro-storybook": "/path/to/storybook/locally"

if you have any problems with assets not showing try running: bundle exec rake assets:clobber


Other options for storybook in Nitro-Web

You’ll need to point to a something published on GitHub when your ready to deploy it. Here are some options for you:

Gemfile - Tag

gem "nitro_sg", git: "[email protected]:powerhome/nitro-styleguide.git", tag: "v1.2.1"

Gemfile - SHA

gem "nitro_sg", git: "[email protected]:powerhome/nitro-styleguide.git", ref: "4aded"

Gemfile - Branch

gem "nitro_sg", git: "[email protected]:powerhome/nitro-styleguide.git", branch: "branchname"

package.json - Branch

"nitro-storybook": "git+ssh://[email protected]/powerhome/nitro-storybook.git#branchname",


Getting Your Changes Into Nitro-Web

1. Increase your version

Check the releases and increase your version by 1 in the following files:

lib/nitro_sg/version.rb
package.json

Be sure and run the following anytime you version up:

yarn install && bundle install

2. Prep a Storybook PR

Get your nitro-storybook PR approved and merged into the nitro-storybook's master branch.

3. Create a Tag & Release

Once your merged you need to create a tag so we can reference this version. Here are some easy ways to create and delete tags:

Add A Tag
git tag v1.0.1
git push origin v1.0.1
Remove A Tag
git tag -d v1.0.1
git push --delete origin v1.0.1

4. Update references in Nitro Web

Package.json

"nitro-storybook": "git+ssh://[email protected]/powerhome/nitro-storybook.git#v1.9.2",

Gemfile (Usually 4 Spots)
gem "nitro_sg", git: "[email protected]:powerhome/nitro-storybook.git", tag: "v1.9.2"

If your updated styling doesn’t show up, you may have old assets you need to remove. bundle exec rake assets:clobber


Creating Components

Creation of new components requires a bit of forethought. Ask yourself these questions first:

  1. Does the component already exist in nitro_react ?
    1. Yes - see Converting Existing Components
    2. No - continue
  2. Ensure you are familiar with these concepts:
    • using Flow.js (install tooling in your editor/IDE)
    • creating "dumb components" in React - your new component will not need to be concerned with XHR requests, servers, ect.
    • ESLint (install tooling in your editor/IDE)
    • CSSModules
    • Composing complex React components/organisms (so that you don't create them here!)
    • Storybook

New React Component

Here are the steps to creating a new Foo component (in order):

  1. Create a new directory under /components named Foo
  2. Create Foo.jsx inside the directory with the contents:

    /* @flow */
    
    import React from 'react'
    
    type Props = {}
    
    export default class Foo extends React.Component<Props> {
      static defaultProps = {}
      props: Props
      render() {
        return <span>{`I'm a Foo`}</span>
      }
    }
    
    
  3. Create styles.scss inside the directory with the contents:

    .foo {}
    
  4. Add the stylesheet as an import by adding this line:

    import styles from './styles.scss'
    
  5. Then make use of the import by adding styles.foo as the className:

    render() {
      return <span className={styles.foo}>{`I'm a Foo`}</span>
    }
    
  6. Add Foo.jsx to the component index in components/index.js

    export Foo from './Foo/Foo.jsx'
    

Create the Story

  1. Within the same directory, create a FooStory.jsx with the contents:

    import React from "react"
    import Foo from "./Foo"
    
    import { text, select, boolean } from "@storybook/addon-knobs"
    
    export default function FooStory(stories) {
      stories.add("Foo",
        () => {
          let props = {}
          return (
            <Foo {...props}/>
          )
        }
      )
    }
    
  2. Add the story to the appropriate story index. This will depend on the intent of your component. Foo is pretty simply 😁, hence we will add it to /stories/basic.js like so:

    export FooStory from '../components/Foo/FooStory'
    

    This will add your Foo story to the categoy "Basic Components" in Storybook


Converting Existing Components

Conversion of existing components in nitro_react is a little different since we already have a decent class structure in the jsx component. There are, however, a few considerations:

  • Use Flow.js types instead of PropTypes
  • use class instead of function (see the examples below)
  • Try and fix as many eslint and Flow warnings as possible - this is your chance and the time is now! 😬 💀
  1. Create a Props flow type javascript type Props = { children?: Array<React.Node>, bold: boolean, italic: boolean, className: string, }
  2. Add the type to your class javascript export default class Foo extends React.Component<Props> { static defaultProps = {} props: Props ...
  3. You can still deconstruct this.props in any of your methods in the normal way javascript const {bar} = this.props
  4. Lint your code yarn run lint
  5. For some lint warning you can yarn run lint-fix which will automagically fix things like indentation.