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](#introduction)
- [Install](#install)
- [Usage](#usage)
- [Configure](#configure)
- [Roadmap](#roadmap)
## Install
```console
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:
```rescript
// Button_dog.res
open Dogumentation.Dog
addToCategory("Button", ({addDog}) => {
addDog("Basic", controls => {
let disabled = controls.bool("Disabled", false)
})
addDog("Huge", ({string, bool}) => {
let disabled = bool("Disabled", false)
})
})
```
### To start / develop:
```console
$ dogumentation start
```
### To build bundle:
```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()
```
### Customizing
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 = () => {
{"Sample Intro Documentation"->React.string}
{"Using Dogumentation you can create an easy rescript documentation."->React.string}
{"Usage:"->React.string}
{"Check out the sidebar to learn more"->React.string}
}
}
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: ,
sortDogs,
logo,
decorators: [
(dog, _) => {
{dog}
},
],
}
start(~config, ())
```
## Roadmap
- [ ] Props available on decorators
- [ ] Tests
- [ ] Faster bundler
- [ ] CSS in JS support
- [ ] MDX support
---
_Source: https://npm.io/package/dogumentation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
