Sharable UI components for react web apps
- Clone and
cd
into the repo
> git clone https://github.com/cohubinc/cohub-ui.git && cd cohub-ui
- Install the dependencies
> yarn install
- Start the build process
watches for changes in the
./src
directory and builds the app bundle into./dist
> yarn watch
There are two options for developing components. You can use the Storybook server or the development-playground server to see what your working on in the browser
Components live in
./src/components/
- Move into the development-playground directory and get those dependencies
> cd development-playground
> yarn install
- If you haven't already create this file
./development-playgroud/DevSandbox.tsx
and export a component. This is what will be rendered to the screen when you start the app.
import * as React from "react";
import { Buttons } from "../dist";
export default function DevSandbox() {
return <Buttons.FloatingAction icon="arrowDown" />;
}
- Start the playground server
> yarn start
-
Add your new component then import and use it in
development-playground/index.tsx
-
Save the file and after the build completes the browser should update automatically
Story's are written in MDX and should generally be co-located in the root of the component dir
-
Add a
__stories__
dir to the root of the components folder -
Create the
*.stories.mdx
file. For example:> touch src/components/Avatar/__stories__/Avatar.stories.mdx
-
Reference the already created stories for examples on how these should be written
-
Start the build process
> yarn watch:stories
. (the regular yarn watch will not work) -
From the project root start the Storybook server and open the stories in your browser @ http://localhost:6007
Make sure
yarn watch
is still running
> yarn storybook