enalmada/bs-ant-design

Bucklescript + ReasonReact binding Ant Design

bs-ant-design-alt

Introduction

** See forked repo for details. This repo is a staging area for me to test out components not in original bs-ant-design before doing a pull request. I am new to reason-react and these are my first bindings. Many have incorrect types for parameters (especially callbacks) I don't happen to be using yet.
I will fix them up before pull request to parent repo. **

Bucklescript + ReasonReact binding for Ant Design components. I write bindings when I needed them in my projects. If you find a component is missing, it's because I don't need it (yet).

Difference from bs-antd : It uses the official recommended way for writing bindings and it doesn't work for me. I explained this in this blog post

I also attempted to rewrite the components when possible for a better integration.

Installation

• With npm:

npm install --save bs-ant-design-alt

• With yarn:

yarn add bs-ant-design-alt

• Add bs-ant-design-alt to bs-dependencies in bsconfig.json.
• You also need to set up your bundler to handle less files (This is a requirement from ant-design)

For webpack, you can do this:

npm install --save-dev less@^2.7.3 less-loader css-loader style-loader

(less@^2.7.3 is the important bit)

Now add this to your webpack config:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
    }]
}
};

Usage

Please check ant design's documentation for each component.

I tried to keep the API as close to the original JS API as possible.

Some common patterns I used:

• string enums -> polymorphic variants
• function argument accepts different types: GDATs or %identity hack.

Components

Almost all of them are done, some completely, some superficially with params I needed. Refer to src for specifics.

Contributions

All contributions are welcomed. I intend to merge and release quickly.

LICENSE

MIT

bs-ant-design's Issues

[jsx3] avatar size string support

Would be ideal to figure out how to allow this if reason can support it.

Update to antd ^3.18

Not a priority as of now, but we should keep it in mind.
Right now every component breaks upon updating ant to 3.18.x.
The fix seams to be rewriting

[@module] external reactComponent: React.component('a) = "antd/lib/package" 

to

[@module "antd/lib/package" ] external reactComponent: React.component('a) = "default"

Didn't yet check why is it an issue, maybe we could do something to omit changing every file.

Form component doesn't match upstream

This fork of the project has a Form component definition that doesn't match upstream. While there's a fair bit of divergence by virtue of targeting JSX 3, the definition in this fork doesn't appear to be all that usable. In particular, Ant expects you to call a create function to wrap its Form element, giving you something with FormComponentProps, which is needed to validate and extract form values. Basically, it's needed to work with Ant's version of controlled form components. That function is not imported here, so the Form component can't be wrapped.

Can't run with BuckleScript 7.1.0

BuckleScript 7.1.0 ships with refmt 3.6.0 and I think it's a bit stricter than older versions were. I'm seeing a couple problems with type definitions in the Antd_Form component:

  We've found a bug for you!
  /home/nirvdrum/dev/workspaces/todo-app/node_modules/bs-ant-design-alt/src/Antd_Form.re 43:8-30
  
  41 ┆     ~wrapperCol: option(Antd_Grid.Col.props)=?,
  42 ┆     ~colon: option(bool)=?,
  43 ┆     ~children: React.element=?,
  44 ┆   ) =>
  45 ┆ React.createElement(
  
  ReasonReact: optional argument annotations must have explicit `option`. Did you mean `option(React.element)=?`?

  We've found a bug for you!
  /home/nirvdrum/dev/workspaces/todo-app/node_modules/bs-ant-design-alt/src/Antd_Form.re 113:10-32
  
  111 ┆     ~style: option(ReactDOMRe.Style.t)=?,
  112 ┆     ~colon: option(bool)=?,
  113 ┆     ~children: React.element=?,
  114 ┆   ) =>
  115 ┆ React.createElement(
  
  ReasonReact: optional argument annotations must have explicit `option`. Did you mean `option(React.element)=?`?

I'm not sure if there are other components that are similarly impacted.