Build a dogcumentation for you Rescript React components

This is a project forked and strongly inspired by Reshowcase
please check it out and also fund the author bloodyowl if you can.

Table of Contents

- Introduction
- Install
- Usage
- Configure
- Roadmap

Install

``console
yarn add --dev dogumentation
`

Then add to your "dogumentation" to bs-dependencies in your bsconfig.json.

Usage

$3

Create a file with de suffix _dog.res. Then create you Dogumentation as the exemple below:

`rescript
// Button_dog.res
open Dogumentation.Dog

addToCategory("Button", ({addDog}) => {
addDog("Basic", controls => {
let disabled = controls.bool("Disabled", false)
disabled
style={ReactDOM.Style.make(
~backgroundColor=controls.string(
"Color",
~options=[("Red", "#E02020"), ("Green", "#6DD400"), ("Blue", "#0091FF")],
"#0091FF",
),
~color="#fff",
~border="none",
~padding="10px",
~borderRadius="10px",
~fontFamily="inherit",
~fontSize="inherit",
~opacity=disabled ? "0.5" : "1",
~cursor=disabled ? "default" : "pointer",
(),
)}>
{controls.string("Text", "hello")->React.string}

})

addDog("Huge", ({string, bool}) => {
let disabled = bool("Disabled", false)
disabled
style={ReactDOM.Style.make(
~backgroundColor=string(
"Color",
~options=[("Red", "#E02020"), ("Green", "#6DD400"), ("Blue", "#0091FF")],
"#0091FF",
),
~color="#fff",
~border="none",
~padding="20px",
~borderRadius="10px",
~fontFamily="inherit",
~fontSize="30px",
~opacity=disabled ? "0.5" : "1",
~cursor=disabled ? "default" : "pointer",
(),
)}>
{string("Text", "Hello")->React.string}

})
})
`

$3

`console
$ dogumentation start
`

$3

`console
$ dogumentation build
`

It outputs the bundle to ./dog folder.

If you need custom webpack options, create the .dogumentation/config.js and export the webpack config, plugins and modules will be merged.

If you need a custom template for your dogs, pass --template=./path/to/template.html.

Configure

This is a plug and play library, but you can customize it.

Create a Main.res file on the .dogumentation folder, this file will be the entry point for the dogumentation.

Then call the start function from Dogumentation.Config module.

`rescript
open Dogumentation.Config

start()
`

$3

To customize the dogumentation pass the config values to the start function.

`rescript
open Dogumentation.Config

@module("./logo.png")
external logo: string = "default"

module Intro = {
@react.component
let make = () => {


start(~config, ())
``

Roadmap

- [ ] Props available on decorators
- [ ] Tests
- [ ] Faster bundler
- [ ] CSS in JS support
- [ ] MDX support