An Origin Protocol shared component library, using React, Storybook.js, and rollup.js.
The latest Storybook version from the main branch is live here.
These components are meant to be used by originprotocol.com, ousd.com, oeth.com, and story.xyz React frontend apps.
- Install the npm package.
yarn add @originprotocol/origin-storybookIn 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 />
...To run storybook locally to develop or look at component docs, install and run Storybook:
yarn
yarn storybookThis will stand up a Storybook server at localhost:6006.
- In
src/components, add a folder with your component name and anindex.tsxfile.
export const YourComponent = () => {
...
}- Add a
YourComponent.stories.tsxfile 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- 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.
Once the preview of the components with changes look good, you'll want to build the components using Rollup.
yarn buildAfter commiting changes:
yarn build
npm version [major|minor|patch] -m "New version message"
npm publishMake sure to also add the tags to Github as well!
git push origin main --tags
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent