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: "git@github.com:powerhome/nitro-styleguide.git", tag: "v1.2.1"
Gemfile - SHA
gem "nitro_sg", git: "git@github.com:powerhome/nitro-styleguide.git", ref: "4aded"
Gemfile - Branch
gem "nitro_sg", git: "git@github.com:powerhome/nitro-styleguide.git", branch: "branchname"
package.json - Branch
"nitro-storybook": "git+ssh://git@github.com/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://git@github.com/powerhome/nitro-storybook.git#v1.9.2",
Gemfile (Usually 4 Spots)
gem "nitro_sg", git: "git@github.com: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
namedFoo
- Create
Foo.jsx
inside the directory with the contents:/* @flow */type Props = {}Component<Props>static defaultProps = {}props: Props{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:
- Then make use of the import by adding
styles.foo
as theclassName
:{return <span className=stylesfoo>`I'm a Foo`</span>} - Add
Foo.jsx
to the component index incomponents/index.js
Create the Story
- Within the same directory, create a
FooStory.jsx
with the contents:{stories} - 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:This will add yourFoo
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 offunction
(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 typetype Props =children?: Array<ReactNode>bold: booleanitalic: booleanclassName: string - Add the type to your classComponent<Props>static defaultProps = {}props: Props...
- You can still deconstruct
this.props
in any of your methods in the normal wayconst bar = thisprops - Lint your code
yarn run lint
- For some lint warning you can
yarn run lint-fix
which will automagically fix things like indentation.