origin-storybook

Origin Protocol Component Library

An Origin Protocol shared component library, using React, Storybook.js, and rollup.js.

Install and use components

These components are meant to be used by originprotocol.com, ousd.com, and story.xyz React frontend apps.

To use in a consuming React app

1. Install the npm package.

npm install origin-storybook

In a React component, import components:

import { Card, Header, Footer } from 'origin-storybook'
...
<Header webProperty='originprotocol' />

<Card 
  webProperty='originprotocol'
  title="Lucky Ducky NFTs"
  imgSrc="https://placekeanu.com/510/340"
  imgAlt="keanu banner"
  body="7,777 Lucky Duckies have left the pond and are getting into mischief!"
  linkText="Visit luckyducky.xyz/market"
  linkHref="https://google.com"
  thumbnailSrc="https://placekeanu.com/128/128"
  thumbnailAlt="Keanu face"
/>

<Footer />
...

---

Running and developing Storybook locally

To run storybook locally to develop or look at component docs, install and run Storybook:

yarn
yarn storybook

This will stand up a Storybook server at localhost:6006.

---

Making new components

1. In src/components, add a folder with your component name and an index.tsx file.

export const YourComponent = () => {
  ...
}

2. Add a YourComponent.stories.tsx file in your folder.

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { YourComponent } from '.';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Origin/YourComponent',
  component: Footer,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as ComponentMeta<typeof Footer>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof YourComponent> = (args) => (
  <YourComponent />
)

export const YourComponentStoryTitle = Template.bind({});

Your folder should look like:

.
└── src/
    └── components/
        └── YourComponent/
            ├── index.tsx
            └── YourComponent.stories.tsx

3. In src/index.ts, import your component:

import './index.css'

export * from './components/Button'
export * from './components/Card'
export * from './components/Dropdown'
export * from './components/Footer'
export * from './components/Header'
export * from './components/Typography'
export * from './components/YourComponent' // add your component here

---

Development notes

• We use Tailwindcss v2 for styling
• We use HeadlessUI for more complex UI interactions like dropdowns.
• The build step will compile image and CSS styling, so consuming apps don't need to have Tailwind or HeadlessUI installed.

---

Publishing updates

Building changes

Once the preview of the components with changes look good, you'll want to build the components using Rollup.

yarn build

Publishing changes

After commiting changes:

yarn build
npm version [major|minor|patch] -m "New version message"
npm publish