nitro-sg

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
• Local Storybook Development in Nitro-Web
• Other options for storybook in Nitro-Web
• Getting Your Changes Into Nitro-Web
• Creating Components
• Converting Existing Components

Quick Start

From the current project directory, run:

• ensure you are running proper node version (see package.json => engines)
• yarn install
• yarn run storybook
• 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: "[e-mail]:powerhome/nitro-styleguide.git", tag: "v1.2.1"

Gemfile - SHA

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

Gemfile - Branch

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

package.json - Branch

"nitro-storybook": "git+ssh://[e-mail]/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://[e-mail]/powerhome/nitro-storybook.git#v1.9.2",

Gemfile (Usually 4 Spots)

gem "nitro_sg", git: "[e-mail]: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:

• Does the component already exist in nitro_react ?
  • Yes - see Converting Existing Components
  • No - continue
• 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):

• Create a new directory under /components named Foo
• 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>
    }
  }
  
  

• Create styles.scss inside the directory with the contents:

  .foo {}
  

• Add the stylesheet as an import by adding this line:

  import styles from './styles.scss'
  

• Then make use of the import by adding styles.foo as the className:

  render() {
    return <span className={styles.foo}>{`I'm a Foo`}</span>
  }
  

• Add Foo.jsx to the component index in components/index.js

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

Create the Story

• 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}/>
        )
      }
    )
  }
  

• 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! 😬 💀

• Create a Props flow type

  type Props = {
    children?: Array<React.Node>,
    bold: boolean,
    italic: boolean,
    className: string,
  }
  

• Add the type to your class

  export default class Foo extends React.Component<Props> {
    static defaultProps = {}
    props: Props
    ...
  

• You can still deconstruct this.props in any of your methods in the normal way

  const {bar} = this.props
  

• Lint your code yarn run lint
• For some lint warning you can yarn run lint-fix which will automagically fix things like indentation.