@originprotocol/origin-storybook

Origin Protocol Component Library

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

The latest Storybook version from the main branch is live here.

Install and use components

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

To use in a consuming React app

• Install the npm package.

yarn add @originprotocol/origin-storybook

In a React component, import components:

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

<Card
 body="7,777 Lucky Duckies have left the pond and are getting into mischief!"
 img={<value alt="keanu banner" height="200" src="https://placekeanu.com/381/192" width="400"/>}
 linkHref="https://google.com"
 linkText="Visit luckyducky.xyz/market"
 thumbnail={<value alt="keanu face" layout="fill" src="https://placekeanu.com/128/128"/>}
 title="Lucky Ducky NFTs"
 webProperty="originprotocol"
/>

<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

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

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

• 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

• 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 v3 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

Make sure to also add the tags to Github as well!

git push origin main --tags