posthog icon indicating copy to clipboard operation
posthog copied to clipboard

Update Storybook to reflect Design System

Open benjackwhite opened this issue 2 years ago • 0 comments

What to do

Update Storybook to act as our central place for reference of the Design System and any other Frontend Development concepts

The parts of the handbook we want to keep should be pulled into Storybook and linked https://posthog.com/handbook/engineering/conventions/frontend-coding

Proposed Storybook layout

  • [ ] Guide
    • [ ] Working with Storybook
    • [ ] How to build a Scene?
    • [ ] How to build a form?
  • [ ] Design System
    • [ ] Overview
    • [ ] Do's and Dont's
    • [ ] Standard components (Lemon UI)
    • [ ] Colors
    • [ ] Spacing & Layout
    • [ ] Utility classes (Tailwind-esque)
  • [ ] Lemon UI
    • [ ] Refactor a component to be the core example - e.g. LemonButton @benjackwhite
    • [ ] Update all components to follow new structure
      • Each stories.tsx should have at the top a description of exactly what this component is for
      • It should have the "playground" story where you can set your own props
      • It should have one other story covering all variants of the component
      • If it very specific then it can have separate stories per variant
    • [ ] (Add and tick off components as you do them)

benjackwhite avatar Aug 01 '22 11:08 benjackwhite