Thisislawatts-oa-components NPM

Platform Components

A collection of react components for reuse across the platform. Built with Theme UI for styling.

These components are stored within the Community Platform monorepo and configured as a standalone package using Yarn workspaces.
The aim of packaging these components separately is to:

Encourage separation between presentation layer and business logic
Reduce the overhead for contributors looking to work only on the component layer without needing to spin up the entire application locally.

We are using Storybook to provide a browser accessible interface for our components.

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

(Optional) For anyone unfamiliar with Storybook looking to better understand the tool, we recommend reading their guide on What's a Story.

Getting started

After cloning the repo, you can start the Storybook instance, which will make the application available in your browser at http://localhost:6006.

cd ./packages/components
yarn install
yarn start

Creating a new Component

You can quickly create a new component using the command yarn new-component MyNewComponentName, which will generate the following items:

src/
  MyNewComponentName/
    MyNewComponentName.tsx # Component
    MyNewComponentName.stories.tsx # Storybook documentation