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 anindex.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