Skip to content

Latest commit

 

History

History
323 lines (251 loc) · 10.6 KB

README.md

File metadata and controls

323 lines (251 loc) · 10.6 KB
Raw

ReasonML bindings for Rsuite UI React library

npm version bs rsuite ui CI

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?

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

3. How can we pass string as child?

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

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

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! 🙂