@sprucelabs/react-heartwood-components

Sprucebot for React

Goals

1. Translate vanilla components from Sprucebot Heartwood into React components for use in web.

Setup

1. Follow the instructions for the workspace
2. Add Storybook CLI tool globally: yarn global @storybook/cli

Running Storybook locally

1. From packages/react-heartwood-components, run yarn storybook
2. If you need to load additional stylesheets, i.e. from sprucebot-heartwood, you can specify them in .env as STYLESHEETS

Adding stories

Any .js file that ends with -story.js will be automatically added to Storybook.

Usage in Skills

1. Add the current prerelease version: yarn add @sprucelabs/react-heartwood-components@8.x.x
2. Import components:

import { Button } from '@sprucelabs/react-heartwood-components'

React Docgen

This project uses React Docgen via Storybook Info Addon to autogenerate documentation from Flow declarations and comments.

To add a description to a prop, write a comment above it:

type Props = {
	/** This is the component's title */
	title: string
}

This will add it to the description cell in the props table.

Contributing

TBD — This is currently a prerelease

Deploying Storybook as a static site

TBD

Additional Info

• Heartwood Components in Fractal
• Heartwood Components in Figma
• React Storybook