dogumentation

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

yarn add --dev dogumentation

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

Usage

Creating your Doguments

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

// Button_dog.res
open Dogumentation.Dog

addToCategory("Button", ({addDog}) => {
  addDog("Basic", controls => {
    let disabled = controls.bool("Disabled", false)
    <button
      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}
    </button>
  })

  addDog("Huge", ({string, bool}) => {
    let disabled = bool("Disabled", false)
    <button
      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}
    </button>
  })
})

To start / develop:

$ dogumentation start

To build bundle:

$ 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.

open Dogumentation.Config

start()

Customizing

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

open Dogumentation.Config

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

module Intro = {
  @react.component
  let make = () => {
    <div>
      <h1> {"Sample Intro Documentation"->React.string} </h1>
      <p> {"Using Dogumentation you can create an easy rescript documentation."->React.string} </p>
      <h2> {"Usage:"->React.string} </h2>
      <p> {"Check out the sidebar to learn more"->React.string} </p>
    </div>
  }
}

let sortDogs = ((a, entity), (b, _)) => {
  switch entity {
  | Dogumentation.Entity.Demo(_) =>
    if a == "Basic" {
      -1
    } else if b == "Basic" {
      1
    } else {
      String.compare(a, b)
    }
  | Dogumentation.Entity.Category(_) =>
    if a == "Typography" {
      -1
    } else if b == "Typography" {
      1
    } else {
      String.compare(a, b)
    }
  }
}

let config: config = {
  intro: <Intro />,
  sortDogs,
  logo,
  decorators: [
    (dog, _) => {
      <div>
        {dog}
      </div>
    },
  ],
}

start(~config, ())

Roadmap

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