https://github.com/schalkventer/coloringbook

📙 An opinionated, batteries-included implementation of Storybook for use in React projects.
https://github.com/schalkventer/coloringbook

atomic-design design-system react starter-template storybook

Last synced: 2 months ago
JSON representation

📙 An opinionated, batteries-included implementation of Storybook for use in React projects.

• Host: GitHub
• URL: https://github.com/schalkventer/coloringbook
• Owner: schalkventer
• Created: 2019-12-31T03:52:58.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T18:54:26.000Z (about 2 years ago)
• Last Synced: 2023-02-27T17:22:33.513Z (almost 2 years ago)
• Topics: atomic-design, design-system, react, starter-template, storybook
• Language: TypeScript
• Homepage: https://coloringbook.dev
• Size: 10.1 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# 📙 Coloringbook

`0.0.2`

[![Netlify Status](https://api.netlify.com/api/v1/badges/44808422-6dd4-423d-bddd-042b5dab4d9f/deploy-status)](https://app.netlify.com/sites/coloringbook-docs/deploys) 

[![](https://img.shields.io/badge/slack-@zatech/%23storybook-purple.svg?logo=slack)](https://zatech.github.io) [![](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![](https://img.shields.io/badge/License-CC%20BY‒SA‒4%2E0-yellow.svg)](https://creativecommons.org/licenses/by-sa/4.0/) [![](https://travis-ci.com/schalkventer/coloringbook.svg?branch=master)](https://travis-ci.com/schalkventer/coloringbook)

**An opinionated, batteries-included UI framework built on Storybook and React.**

## Overview

_NOTE: At the moment Coloringbook is only available for Create React App, however support for Gatsby and NextJS is in the pipeline._

### Features

- 📓 Includes the core [Storybook for React library](https://storybook.js.org/docs/guides/guide-react/), as well as various addons.

- 🔌 Completely decouple your internal webapp logic from your user-interface

- 💾 Includes [TypeDoc](https://typedoc.org/) to document code that is not user-interface related.

- 🚀 Supports [Test-driven Development](https://en.wikipedia.org/wiki/Test-driven_development) all the way from start to finish.

- 📦 Uses the [Material UI](https://material-ui.com/) component-library, configured to work with [Styled Components](https://www.styled-components.com/).

- ✨ Includes various [MDX](https://mdxjs.com/) templates to easily bootstrap documentation.

- 🚥 Built-in [Jest Snapshot](https://jestjs.io/docs/en/snapshot-testing) testing.

- 🏆 Displays all tests results in your documentation itself.

- 🎯 Able to indicate browser support on a per component basis.

- 🗜 Static type-checking with [TypeScript](https://www.typescriptlang.org/).

- 🎨 Includes tools to document your [design tokens](https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71?gi=334353308145).

- 📜 [VS Code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) corresponing to the existing project conventions.

- 📐 Various component templates for use with [Blueprint](https://marketplace.visualstudio.com/items?itemName=teamchilla.blueprint)

- ☂️ Watertight linting with a collection of popular [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/) rules.

- 🤖 Pre-configured Git hooks to ensure that all tests pass upon committing code.

- 🐶 Tooling is documented with Coloringbook itself ([eating its own dog food](https://en.wikipedia.org/wiki/Eating_your_own_dog_food)!)

- 💅 Built to customize/extend according to your needs via `coloringbook` in `package.json` or an seperate config file.