Build a dogumentation for you Rescript React components
npm install 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.
- Introduction
- Install
- Usage
- Configure
- Roadmap
``console`
yarn add --dev dogumentation
Then add to your "dogumentation" to bs-dependencies in your bsconfig.json.
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}
})
})
`
`console`
$ dogumentation start
`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.
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()
`
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 = () => {
{"Using Dogumentation you can create an easy rescript documentation."->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, _) => {
start(~config, ())
``
- [ ] Props available on decorators
- [ ] Tests
- [ ] Faster bundler
- [ ] CSS in JS support
- [ ] MDX support