ReasonML bindings for Rsuite UI React library

Official overview (bindings according it)

p.s bindings from an enthusiast 🙂

_{Deprecated: https://www.npmjs.com/package/@sdv-studio/bs-rsuite-ui-react}

_{use npm i bs-rsuite-ui-react instead npm i @sdv-studio/bs-rsuite-ui-react}

Plans

1. Cover all documented components ✅
2. Compare with official GitHub repo
3. Check TODOs, fixes ⌛
4. Example project ✅
5. Improve DX (reuse, variants instead string as possible and etc.) ⌛
6. Tests, codegen

Roadmap

✅ = done
🌓 = not full support (temp)
🛑 = unimplemented

Type	Component	Status
General	<Button />; <ButtonGroup />	✅
General	<Icon />; <IconButton />	✅
General	<Tooltip />	✅
General	<Popover />;<Whisper />	✅
General	Alert module	✅
General	Notification module	✅
General	<Message />	✅
General	<Loader />	✅
General	<Modal />	✅
General	<Drawer />	✅
General	<Alert />	✅
General	<Divider />	✅
General	<Progress />	✅
General	<Placeholder />	✅
:-:	------------------------------------
Navigation	<Dropdown />	✅
Navigation	<Nav />	✅
Navigation	<Navbar />	✅
Navigation	<Sidenav />	✅
Navigation	<Steps />	✅
Navigation	<Pagination />	✅
Navigation	<Breadcrumb />	✅
:-:	------------------------------------	:-:
Data Entry	<Form />	🌓
Data Entry	<ControlLabel />	✅
Data Entry	<FormGroup />	✅
Data Entry	<FormControl />	✅
Data Entry	<HelpBlock />	✅
Data Entry	<Checkbox />	✅
Data Entry	<Radio />; <RadioGroup />	✅
Data Entry	<Input />	✅
Data Entry	<InputNumber />	✅
Data Entry	<AutoComplete />	✅
Data Entry	<Toggle />	✅
Data Entry	<InputPicker />	✅
Data Entry	<TagPicker />	✅
Data Entry	<SelectPicker />	✅
Data Entry	<CheckPicker />	✅
Data Entry	<Toggle />	✅
Data Entry	<TreePicker />	✅
Data Entry	<CheckTreePicker />	✅
Data Entry	<Cascader />	✅
Data Entry	<MultiCascader />	✅
Data Entry	<DatePicker />	✅
Data Entry	<DateRangePicker />	✅
Data Entry	<Slider />	✅
Data Entry	<Uploader />	✅
:-:	------------------------------------	:-:
Data Display	<Avatar />	✅
Data Display	<Badge />	✅
Data Display	<Table /> + Cell/Column/Header	✅
Data Display	<Tree />	✅
Data Display	<CheckTree />	✅
Data Display	<Panel />	✅
Data Display	<Timeline />	✅
Data Display	<Tag />;<TagGroup/>	✅
Data Display	<List />	✅
Data Display	<Calendar />	✅
Data Display	<Carousel />	✅
:-:	------------------------------------	:-:
Layout	<Grid />; <Row />; <Col />	✅
Layout	<FlexboxGrid />	✅
Layout	<Container />	✅
:-:	------------------------------------	:-:
Utils	<Animation />	✅
Utils	<Portal />	✅
Utils	Schema module	🛑
Utils	DOMHelper module	✅
:-:	------------------------------------	:-:
Undocumented	<SafeAnchor />	✅

Installation

I. Add bs-rsuite-ui-react binding as dependency

npm i bs-rsuite-ui-react
or
yarn add bs-rsuite-ui-react
or
yarn add "https://github.com/shurygindv/bs-rsuite-ui-react.git"

II. Also we need to say bsb: heey, look! Seems, bs-rsuite-ui-react perfectly complements you, let's add it to bs-dependencies

...somewhere in your bsconfig.json:

  ...
      "bs-dependencies": [
        "reason-react",
        ...,
        "bs-rsuite-ui-react"
    ],
  ...

III. We would be to see a sea of colors, sky and sun, there are two ways to achieve it, import:

LESS

[%bs.raw {|require('rsuite/lib/styles/index.less')|}];

or as plain CSS

[%bs.raw {|require('rsuite/dist/styles/rsuite-default.css')|}];

Usage

All bindings are in RsuiteUi namespace, let's try! Some examples

Notification

 RsuiteUi.Notification._open(props); // props is RsuiteUi.Notification.Props.t
 RsuiteUi.Notification.closeAll();

 RsuiteUi.Notification.success(RsuiteUi.Notification.Props.make(
   ~title = React.string("I'm title"),
   ~description = React.string("I'm desc"),
   ~placement="bottomStart",
   ()
 ));

CheckPicker

 let item = RsuiteUi.RsuiteTypes.DataItemType.make(
  ~value = "value",
  ~label = React.string("value"),
  ()
 );

 <RsuiteUi.CheckPicker data={[|item|]} />

Animation

  let (isVisible, setVisibility) = React.useState(_ => false);

  React.useEffect0(_ => {
    Js.Global.setTimeout(_ => {
      setVisibility(_ => true);
    }, 200);
    None
  });

  <RsuiteUi.Animation.Bounce
    _in={isVisible}
  >
    <div>
      {React.string("look at me")}
    </div>
  </RsuiteUi.Animation.Bounce>

Table

  let items = [|{
    "name": "some name",
    "description": "some description"
  }, {
    "name": "some name",
    "description": "some description"
  }|];

  // where `dataKey` is keyof items (<Table.Cell dataKey={..}>)
  RsuiteUi.(
      <Table
          height={420}
          data={items}
          onSortColumn={(sortColumn, _sortType) => {
            Js.log(sortColumn);
          }}
        >
          <Table.Column width={50} align=`center>
            <Table.HeaderCell>
              {React.string("Name")}
            </Table.HeaderCell>

            <Table.Cell dataKey="name" />
          </Table.Column>

          <Table.Column width={100} flexGrow={2}>
            <Table.HeaderCell>
               {React.string("Description")}
            </Table.HeaderCell>

            <Table.Cell dataKey="description" />
          </Table.Column>
      </Table>
    );

Modal

  <RsuiteUi.Modal show={true}>
      <RsuiteUi.Modal.Header>
         {React.string("Header")}
      </RsuiteUi.Modal.Header>

       <RsuiteUi.Modal.Title>
         {React.string("Title")}
      </RsuiteUi.Modal.Title>

       <RsuiteUi.Modal.Body>
        {React.string("Body")}
      </RsuiteUi.Modal.Body>

      <RsuiteUi.Modal.Footer>
       {React.string("Footer")}
      </RsuiteUi.Modal.Footer>
  </RsuiteUi.Modal>

Caveats

I. Next components: <MultiCascader />, <Cascader />, <DatePicker />, Notification module have _open prop instead open

Example:

  <MultiCascader _open={true} />
  <Cascader _open={true} />
  <DatePicker _open={true} />


   Notification._open(...); // instead Notification.open()

II. _in instead in prop

   <RsuiteUi.Animation.Bounce _in={isVisible} />

   <RsuiteUi.Animation.Transition _in={isVisible} />

   <RsuiteUi.Animation.Slide _in={isVisible} />

III. Similar situation with <FlexboxGrid />; Sometimes we would be to use prop justify with end value, but we should use end_ instead

Example

  <FlexboxGrid justify=`end_ />
  <FlexboxGrid justify=`spaceAround />
  <FlexboxGrid justify=`center />

Contributions

It would be great, make our world better! All contributions are welcomed.

FAQ (just to save time...)

1. How can we pass Component as prop?

• Put it in a separate function
• See: https://github.com/reasonml/reason-react/blob/master/docs/component-as-prop.md

2. What the different between ReasonReact.string and React.string?

• They are the same (aliases), prefer React.string
• See: reasonml/reason-react#406 comments

3. How can we pass string as child?

• Use React.string("example") instead "example"

4. What _type, _open, _val, _in mean as Component prop?

• are reserved in Reason/Ocaml (aliases type, open and so on),
• See: https://bucklescript.github.io/docs/en/object and reasonml/reason-react#475

5. Why do we use an array structure instead of a immutable list everywhere?

• ReasonML lists are represented as nested 2-element arrays in JavaScript (an encoding of cons pairs).

And many other useful details about Reason React here! See: https://github.com/reasonml/reason-react/tree/master/docs

Good luck! 🙂