Investigate React Component Management Libraries

[lomaxap]

Tools like storybook / styleguidist and bit (see others) allow us to create easily shareable directories of react components. We should create a list of all the options and the pros and cons for each.

• How easily sharable are they? (where would it have to be hosted?)
• How easy is it to integrate into our existing components? (would it allow us to either move our frontend toolkit into caseflow or vice versa?)
• is there a live preview that allows us to change props?
• How easy is it for others to understand?

[jcq]

One major consideration will likely be cost. For instance, while Bit has a free tier, we'd likely need organization account access, which requires the $12/user/mo tier, which may be a tougher sell.

[jcq]

Another thing to investigate: What's the best way to mock some of the larger objects that components might use? If we have a component that takes an appeal as a prop, we should have some standardized way of creating a mock that will properly satisfy that type.

What would be best would be to utilize the existing FactoryBot logic already established on the Rails side to avoid needing to keep multiple generators updated. For instance, Hanger generates an API based on existing Rails factories.

[aplybeah]

Recommendations for React Component Management

Context

Response to #12009. The goal of this investigation is to find tools that will isolate our react components so that we can have a live preview of how the component works, and have directories of components that can be shared between projects.

Overview

The tools considered are Docz, React Styleguidist and Storybook. These were chosen primarily for the level of documentation, price (all are free and open source), and compatibility with React, and the dependencies that we have.

Components Tools In-depth:

Docz

Documentation

Seems to be more of a documentation system/style guide more than a library where components can be shared in between projects. The live preview does auto generate a "basic Usage" page, which is super helpful. However, converting all of the .jsx into .mdx looks like it would be a lot more trouble than it's worth.

Highlights:

• initial configuration process seems really simple (install, then add script to package.json)
• generates an API keeps track of props
• Only reads .mdx files
• requires React 16.8.0 or higher

React Styleguidist

Documentation React Styleguidist is a management tool that Unlike Docz, can natively read .jsx files as components. It features a live preview that also shows the code that generates a specific component.

React Styleguidist

Highlights:

• a configuration
• natively accepts .jsx
• public and private methods have to be defined in a way that seems counter intuitive to ruby on rails.

Storybook

Documentation

Highlights:

• installing the tool is quite simple, a script needs to be added into the package.json. The documentation also has react specific instructions
• Potential compatibility issue with node. Current version of storybook (with many breaking changes) requires node 8

[jimruggiero]

@jcq and @lomaxap With #12945 now open, can you clarify what scope remains on this issue? Can this one be closed?

[jcq]

@jimruggiero Sorry for delayed response — yup, this one is good to close out, as we have begun actual implementation from the other ticket. Thanks for checking!