⬡ Panopticon

React component playground as React component

⬡ Motivation/Promise

Panopticon works/feels like any other React component and doesn't force/lead you to write a lot of configs/stories just for setting up a component playground. That's why it keeps consistent/unified build workflow/pipeline for your application.

⬡ Features

⬡ Installation

yarn add panopticon-core panopticon-stdlib

npm i panopticon-core panopticon-stdlib

pnpm add panopticon-core panopticon-stdlib

⬡ Usage/Utilizing/Enjoyment

import React, { FunctionComponent, ButtonHTMLAttributes } from 'react'
import { createRoot } from 'react-dom/client'
import { Gallery } from 'panopticon-core'
import { BooleanCheckbox } from 'panopticon-stdlib'

// imagine this is your component
const Button: FunctionComponent<ButtonHTMLAttributes<HTMLButtonElement>> =
  ({ ...props }) => <button {...props} />

// make an exhibit from component
// and use some knobs to experiment with it
const buttonExhibit: Exhibit<ButtonHTMLAttributes<HTMLButtonElement>> = {
  component: Button,
  props: {
    disabled: BooleanCheckbox,
  }
}

// create a page from list of exhibits
const PanopticonPage = () => (
  <Gallery
    exhibits={[
      buttonExhibit
    ]}
  />
)

// and render page
createRoot(document.querySelector('#react'))
  .render(<PanopticonPage />)

Simple, right? No configs or build pipelines/plugins, just components.

Check out other examples and router integration guides.

⬡ API

panopticon-core

Gallery and IFrame components, type definitions

panopticon-stdlib

Collection of knobs for common/general purposes

⬡ Contribution

Feel free to open an issue/discussion with request/report, but ensure you read/follow Contributor Covenant Code of Conduct

⬡ Development/History

Changelog/Past/Versions

Roadmap/Future

⬡ Legal info

Project licensed under MIT License. What it means

⬡ Brand/Look

Project name, logo, visual design and writing style heavily inspired by Control game (made by Remedy Entertainment)