@operational/styleguide

@operational/styleguide

This project serves as the living styleguide to @operational/components. It is TypeScript-first and uses the Monaco editor that powers Visual Studio Code to provide type-safe playgrounds for components, reading them from any given component library.

There's a good chance that you can create a living styleguide for your TypeScript design system with @operational/styleguide.

Getting Started

Here's how you can try out @operational/styleguide.

Prerequisites

This tool uses a source folder as a source of truth. It does not concern itself with the rest of your project, but components that you intend to export are required to be structured the following way inside of any given source folder.

anything-can-happen-outside-of-src
src
├── ComponentName
│   ├── ComponentName.tsx
│   └── README.md
├── OtherComponentName
│   ├── OtherComponentName.tsx
│   └── README.md
└── index.tsx # <- this exports all the components

The reason for this requirement is that we have found that it scales quite well. As with any open source project, this is up for discussion, collaboration and improvement. Open an issue to start collaborating.

Installation

⚠️ These instructions are where we want to be. The src path is not yet configurable.

Install @operational/styleguide by running yarn add @operational/styleguide -D.

Once installed, run yarn operational-styleguide start ./path/to/your/src and you will have a development server up and running. To build your styleguide for production, run yarn operational-styleguide build ./path/to/your/src. The final artifacts will be in a dist folder at your project root, ready to be served.

The ./path/to/your/src defaults to PROJECT_ROOT/src and can be omitted if your project is already structured this way.

For convenience, consider aliasing the operational-styleguide (start, build, etc.) by adding scripts to your package.json.

{
  "name": "@operational/styleguide",
  "scripts": {
+   "start": "operational-styleguide start",
+   "build": "operational-styleguide build",
  }
}

Contributing

We love TypeScript. We love community. Open an issue with whatever's on your mind to start contributing.