reactioncommerce / reaction-styleguide

A plugin for Reaction, transforming it into a style guide and UI component playground.

---

⚠️ NOTICE: This repository is archived for read-only reference purposes. Check out the Reaction Component Library for the replacement.

---

reaction-styleguide

A plugin for Reaction, transforming it into a style guide and UI component playground.

Install

This plugin does a complete takeover of a reaction app, so be sure to install it into fresh master copy.

Prereq

https://github.com/reactioncommerce/reaction-cli

Install or update reaction-cli if necessary

npm install -g reaction-cli

Installing plugin

# Checkout a fresh copy of reaction as a different name.
reaction init my-styleguide

# Move into the app directory
cd my-styleguide

# Clone this repo into the plugins folder. Or you could download it and unzip there if you prefer
git submodule add -f https://github.com/reactioncommerce/reaction-styleguide.git imports/plugins/custom/styleguide

# Run reaction to build the app and install the styleguide plugin
reaction

# running on http://localhost:3000/

reaction-styleguide's Issues

Document settingsCard defaults

Things to define

• What the default Settings Card UI should be

Style guide architecture

As a contributor with the proper permissions, I should be able to write markdown to update design guidelines for usage of our components in the Reaction Commerce design system. As well as have the ability to add images or embed videos.

As a reaction engineer, I should be able to easily add and update components for documentation of our React UI components.

As a contributor to Reaction Commerce, both core contributors or community contributors, I should be able to view a style guide that has -

• design guidelines for components,
• visual representation of our components with properties,
• the ability to select between our most common usages (i.e. buttons types)
• ability to copy react code

As a design director, I should be able to add static pages such as Reaction Commerce design principles (now) and color, typography, and illustration guidelines (in the future).

Writing Style Guide

Labels on buttons

• Title Case
• ordering of buttons: Cancel should be on the Left, most important should be on the Right. Cancel should be an outlined button.

Titles, labels elsewhere

• Sentence case like this

Setting Card titles

Alert

Copy audit of alerts

Add all components in the sidebar

Missing components:

Design developer navigation bar

Style guide not working

I followed the exact same steps, but unable to see any difference. It is still the original theme.

Research Storybook.js and other options

React component style guide generators

• https://storybook.js.org/
• https://github.com/material-components/material-components
• https://polaris.shopify.com
• https://github.com/davidhund/styleguide-generators#user-content-react

As a styleguide user:

• I want to be able to test a component in a sandbox
• I want to be able to copy/paste code for it
• I want to be able to see all the React props

As a content creator:

• I want to be able to write descriptions in Markdown about a component
• I do NOT want to have to code the component (and all the component changes everytime the library changes)
• I do NOT want to hand-code and write all the propTypes: the propTypes should be generated

NAMING THINGS!!

decided

1. Icon Navigation Bar
2. Action View Panel, which is composed of Action View (master) and Action View Detail
3. Which have Cards in them
4. Product Grid (instead of Grid)

undecided?

4. Content Edit Bar??

Add Badge