Neti Pot Manufacturer

    origin-storybook
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.0 • Public • Published

    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 = () => {
      ...
    }
    1. 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
    
    1. 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

    Keywords

    none

    Install

    npm i origin-storybook

    DownloadsWeekly Downloads

    14

    Version

    0.11.0

    License

    MIT

    Unpacked Size

    11.7 MB

    Total Files

    18

    Last publish

    Collaborators

    • nickick