cca-io/rescript-mui

ReScript bindings for MUI

rescript-mui's Issues

Trouble to use Typography.Classes

Maybe I'm wrong but I didn't find the way to use Typography.Classes variants. As they are not polymorphic or not exposed I don't find how to use it in order to put a class in a Typography element.

Thank you very much for your help =)

The new reason react hooks

I'm getting this error upon attempting to use the bindings with the new reason react hooks template

I'm open to helping in any API changes that are necessary to enable compatibility with the new version of Reason React

MaterialUi_Icons should be MaterialUi.Icons

Hey, great work on the library so far. I really appreciate the good work!

When I try and use Icons from MaterialUI the error is that the module is unbound.

It doesn't seem to be exported from MaterialUi.re. However, it is available at MaterialUi_Icons.

I can make a PR to add it just below the Icon module:
https://github.com/jsiebern/bs-material-ui/blob/07b14ab57557a226fccc5c016b2adb28594966a5/src/MaterialUi.re#L47

Let me know if that makes sense and sounds good. If I'm doing something silly let me know 😄

`TablePagination` component doesn't have the correct bindings for `onChangePage`

Currently, TablePagination has a binding signature of unit => unit so there is no way to access the value of page as described in the material-ui-next docs. I'd expect to be able to define the event like:

<MaterialUi.TablePagination
  onChangePage=(
    (_event, page) => self.send(UpdatePage(page))
  )
  ...
>

instead I get a bucklescript error

This function expects too many arguments, it should have type unit => unit

I've been able to make it work in the meantime by creating my own minimal binding:

module TablePaginationCustom = {
  [@bs.module "material-ui/Table/TablePagination"]
  external reactClass : ReasonReact.reactClass = "default";
  let make =
      (
        ~colSpan: int,
        ~count: int,
        ~rowsPerPage: int,
        ~page: int,
        ~onChangePage: (ReactEventRe.Mouse.t, int) => unit,
        children,
      ) =>
    ReasonReact.wrapJsForReason(
      ~reactClass,
      ~props={
        "colSpan": colSpan,
        "count": count,
        "rowsPerPage": rowsPerPage,
        "page": page,
        "onChangePage": onChangePage,
      },
      children,
    );
};

I'm still super new to Reason, so please let me know if I'm misunderstanding some concepts here.

Thanks!

MaterialUi_Icons Bundle Size

Adding just one icon to my project makes my production* bundle size increase by 3Mb.

After inspecting my bundle I noticed it contains all the icons, not just the one I'm using. My guess is that the dynamic nature of the MaterialUi_Icons component makes three shaking impossible.

MaterialUi_Icons.re

[@bs.module]
external iconClasses: Js.Dict.t(ReasonReact.reactClass) =
  "@material-ui/icons";

...

ReasonReact.wrapJsForReason(
    ~reactClass=
      iconClasses->Js.Dict.unsafeGet(icon->MaterialUi_IconsNames.tToJs),
...

Do you have the same issue? Any advise on how to deal with this problem?

Best and thank you for your hard work!

*when using webpack (in production mode) no extra plugins.

Are there plans to migrate to 3.x.x?

I think there are not many changes, and current bidnings work with 3.0.2.

Unsafe styles problems after upgrading to 1.0

Hi! I used safe styles but when I needed linux CI pipeline back then when no ppx for linux was available I switched to unsafe styles. And it worked until last update to 1.0 :) It looks like my styles are not applied. Example on github for unsafe style is quite old like it was not tested with recent changes. All my components use following pattern:

    render: self => <MaterialUi.WithStyles
        classes=[{
            name: "mystyle",
            styles: Style.make(
                ~minHeight="850px",
                ~position="relative",
                ()
            )
        }]
        render={classes => <div className=classes##mystyle/>}
       />

I would be very glad if it stared to work again - my codebase is too big now for going back to safe styles.

Step bindings cause an error at runtime.

Inserting a <Step /> I keep getting this error. looks like something to do with [@bs.deriving jsConverter]. Any ideas?

Dynamic access to classes

I would like to emulate the following in ReasonML but records can't be accessed dynamically like in JS

const expandedClass = expanded ? 'open' : 'closed'

<div className={classes[expandedClass]}>

Is there a way I can dynamically select one of the Style Class Records? Would they need to be Js.Dict.t instead?

I've resorted to inline styles for the dynamic styling I need.

Thanks

Cannot Use MaterialUI_Icons

I'm trying to add the ExpandMore icon to the expansion panel component. I was referencing the example here (https://github.com/jsiebern/bs-material-ui/blob/master/examples/ExampleIcons.re), but the moduleMaterialUI_Icons cannot be found. I also tried directly using MaterialUI_Icon, but I was unable to figure out what to pass as the component.

I have materialUI core added as a dependency. Do I need to also add materialUI icons?

SvgIcon needs props update for v4.x

I believe nativeColor should be changed to htmlColor. I'm on hooks branch and haven't checked master.

<MatrialUi.WithTheme> crash if classes property only is provided

This code worked in previous versions:

render: self => <MaterialUi.WithStyles
        classes=[{
            name: "fullScreen",
            styles: Style.make(~width="100vw", ~height="100vh", ())
        }, {
            name: "fullView",
            styles: Style.make(~width="100%", ~height="100%", ())
        }, {

but recently it stopped with following error:

If I add classesWithTheme={theme => []} then my code runs correctly again. But it shouldn't be necessary IMO.

The value enterGet can't be found

Can't run the bucklescript compiler after installing this library.

Running version

▶ bsb -v
3.1.5

  We've found a bug for you!
.../node_modules/@jsiebern/bs-material-ui/src/MaterialUi_Menu.re 14:10-17

  12 ┆ switch (
  13 ┆   obj
  14 ┆   |. enterGet
  15 ┆   |. Belt.Option.map(v => MaterialUi_Helpers.unwrapValue(v))
  16 ┆ ) {

  The value enterGet can't be found

  Hint: Did you mean enter?

    at Array.map (<anonymous>)i_Input.cmj

Usage of pseudo css selectors

I was wondering whether pseudo selectors are supported in the ppx.

When using material-ui, you can do:

container: {
  '&:hover': {
     background: "#fff",
  },
}

but I couldn't find any similar examples in the repository.
Thanks!

build fails due to case mismatch

Building the ppx fails on Linux (Ubuntu 18.04) due to a mismatch between the filename of the ppx that is built (i.c. ppx_withstyles.native) and the filename that is used during the subsequent cp step (i.c. ppx_withStyles.native)

This is the output I get:

yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ bsb -make-world -backend native && cp ./lib/bs/native/ppx_withStyles.native ./ppx
[10/10] Building src/Generate.mlast.d
[6/6] Building ppx_withstyles.native
cp: cannot stat './lib/bs/native/ppx_withStyles.native': No such file or directory
error Command failed with exit code 1.

Quick fix is to change the filename in the cp instruction, but I am unsure if this is something platform/version dependant or not.

ppx issue on windows

I am attempting to use bs-material-ui-ppx on Windows 10, but cant seem to make it work without hacking it up. With a stock install of the package, and adding "ppx-flags": ["@jsiebern/bs-material-ui-ppx/ppx"], to my bsconfig.json I get this error message when compiling:

'{bs-material-ui-ppx-path}\ppx' is not recognized as an internal or external command

However, if I move the ppx file to ppx.exe, and change the ppx-flags path to end with .exe it works.

Cant Resolve Reboot

Running the example files is getting me this result.

Failed to compile.

./node_modules/@jsiebern/bs-material-ui/lib/js/src/MaterialUi.bs.js
Module not found: Can't resolve 'material-ui/Reboot/Reboot' in '/Users/prisc_000/code/BHYV/bhyv-mui/node_modules/@jsiebern/bs-material-ui/lib/js/src'

This the bsconfig.json: https://github.com/idkjs/bs-mui-example/blob/master/bsconfig.json
This is package.json: https://github.com/idkjs/bs-mui-example/blob/master/package.json

Tabs Component doesn't highlight selected tab

Using properties like indicatorColor or textColor, the selected Tab doesn't get highlighted.

I tried to use the Tab component by cloning this repo and editing one of the files in the examples folder https://github.com/jsiebern/bs-material-ui/tree/master/public/bs-material-ui/examples
And noticed this below output

Below are the versions I have used to try the Tab Component
material-ui - 3.9.2
jsiebern/bs-material-ui - 1.1.1

Binding way makes CDN hard.

We tried to use material-ui from CDN, but current binding way makes it impossible to do it. The default could not be found.
We are using

[@bs.module "@material-ui/core"]
external reactClass : ReasonReact.reactClass = "AppBar";

instead of

[@bs.module "@material-ui/core/AppBar/AppBar"]
external reactClass : ReasonReact.reactClass = "default";

Not sure it is an issue or not. Please close it if it is not.

ppx_WithStyle doesn't work for linux

Current ppx works with Mac, but it has problem to run on linux. Do you have a version for linux??

export createStyledWithTheme was not found in @material-ui/styles

I'm received the following warning in webpack when I try to compile my code

WARNING in ./node_modules/@jsiebern/bs-material-ui/src/MaterialUi_WithStyles.bs.js 75:13-41
    "export 'createStyledWithTheme' (imported as 'Styles') was not found in '@material-ui/styles'
     @ ./src/core/Styles.bs.js
     @ ./src/app.bs.js
     @ ./src/index.bs.js

indeed '@material-ui/styles' does not contain 'createStyledWithTheme'.
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/index.js

export { default as createGenerateClassName } from './createGenerateClassName';
export { default as createStyles } from './createStyles';
export { default as install } from './install';
export { default as jssPreset } from './jssPreset';
export { default as makeStyles } from './makeStyles';
export { default as styled } from './styled';
export { default as StylesProvider } from './StylesProvider';
export { default as ThemeProvider } from './ThemeProvider';
export { default as useTheme } from './useTheme';
export { default as withStyles } from './withStyles';
export { default as withTheme } from './withTheme';

I'm using:
"@material-ui/styles": "3.0.0-alpha.3",
"@jsiebern/bs-material-ui": "1.0.0-beta.4",
"@jsiebern/bs-material-ui-ppx": "^1.0.2",

My code compiles and works as expected when I use webpack development mode (it does show the working but it works), but when I compile my code in webpack's production mode all the styles are wrong and the application looks broken.

InputLabel no longer renders children

InputLabel seems to be broken as of this commit. It doesn't render the actual label anymore. Removing the htmlFor prop seems to fix it.

error running example

./node_modules/@jsiebern/bs-material-ui/src/MaterialUi_Button.bs.js
Module not found: Can't resolve '@material-ui/core/Button/Button' in '/Users/mac/Coding/reasonmat/node_modules/@jsiebern/bs-material-ui/src'

the bsconfig.json:

{
  "name": "reason-scripts",
  "sources": ["src"],
  "bs-dependencies": [
    "reason-react", 
    "@glennsl/bs-jest",
    "@jsiebern/bs-material-ui"
  ],
  "reason": {
    "react-jsx": 2
  },
  "bsc-flags": ["-bs-super-errors"],
  "refmt": 3,
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".bs.js",
  "ppx-flags": ["./node_modules/@jsiebern/bs-material-ui/ppx_withStyles"]
}

Why is not using the ppx for withStyles unsafe?

Hey, still early days for my use of these bindings and I'm deciding whether it is worth it to use the ppx (I don't have a strong reason not to use it but also don't have a strong reason to use it). The API looks almost the same to me so I'm wondering what makes it unsafe?

Can't get any of the examples to compile

I must be doing something terribly stupid but I can't seem to get any of the examples to work. I am rather new to ReasonML.
I tried to make a minimal example

[@react.component]
let make = () => {
  <div>
    <MaterialUi.List>
    </MaterialUi.List>
  </div>;
};

When I try to compile it it tell me this:

4 ┆
5 ┆

6 ┆ <MaterialUi.List>
7 ┆ </MaterialUi.List>
8 ┆

;
This has type:
'a =>
ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
ReasonReact.actionless)
But somewhere wanted:
React.component('a) (defined as 'a => React.element)
The incompatible parts:
ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
ReasonReact.actionless)
(defined as
ReasonReact.componentSpec(ReasonReact.stateless, ReasonReact.stateless,
ReasonReact.noRetainedProps,
ReasonReact.noRetainedProps,
ReasonReact.actionless))
vs
React.element

So I am a bit unsure what this says because I suspect there are some type aliases at work here, but it seems to suggest I need to pass in a function instead of a value somewhere. I can't really make it out though.

I installed the @jsiebern/bs-material-ui version 1.1.1, the @material-ui/core version 3.9.2, reason-react 0.7.0 and bs-platform 6.2.1. Is there some clash between those versions or so?

JSX3 support

Hey, thanks for this, I'm only starting with Reason/BS and it's good to find these nice packages one can use to hit the ground running. However, I'm getting an error which I assume has to do with this package not supporting JSX3. Do you have any plans to upgrade to that?

This is the code I have

module App = {
  [@react.component]
  let make = () =>
    MaterialUi.(
      <Layouts.Center>
        <MaterialUi.Button>
          {React.string("Sign in with Google")}
        </MaterialUi.Button>
      </Layouts.Center>
    );
};

and the error I'm getting:

server :   We've found a bug for you!
server :   /home/david/projects/servant/assets/js/Servant.re 19:10-26
server :   
server :   17 ┆ MaterialUi.(
server :   18 ┆   <Layouts.Center>
server :   19 ┆     <MaterialUi.Button>
server :   20 ┆       {React.string("Sign in with Google")}
server :   21 ┆     </MaterialUi.Button>
server :   
server :   This has type:
server :     'a =>
server :     ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
server :                            ReasonReact.actionless)
server :   But somewhere wanted:
server :     React.component('a) (defined as 'a => React.element)
server :   
server :   The incompatible parts:
server :     ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
server :                            ReasonReact.actionless)
server :       (defined as
server :       ReasonReact.componentSpec(ReasonReact.stateless, ReasonReact.stateless,
server :                                  ReasonReact.noRetainedProps,
server :                                  ReasonReact.noRetainedProps,
server :                                  ReasonReact.actionless))
server :     vs
server :     React.element

Thanks!

Wrong version of @material-ui/core set in package.json

When installing v0.3.3 via yarn with material-ui/core pinned to v1.4.1 I get the following warning:

warning " > @jsiebern/[email protected]" has incorrect peer dependency "@material-ui/core@~1.3.1".

Missing Bindings for popper component

current bs-material-ui is missing bindings for @material-ui/core/Popper

Support passing through extra properties

Reference: https://material-ui.com/guides/api/#spread

My specific use-case was attaching ARIA properties to a button. In React, these would filter down to the <button> element ultimately and just work. The strict typing gets in the way a little here. Perhaps all the components should inherit the props from ReactDOMRe.props and then extend from there?

It feels like #27 is related to this too.

Large bundle size overhead if using withStyles ppx

I was trying out the hooks branch and used [%mui.withStyles...] in quite a lot of my components to override styling. I checked the bundle distribution with source-map-explorer and it showed that the components that used the ppx (around 10-15 in total) where larger than react-dom itself.

It appears that the generated javascript from [%mui.withStyles...] has a function style that takes all possible css props (in total 348) and calls the function for each class with missing parameters as undefined, so it looks like this:

function style(prim, prim$1, prim$2, prim$3, prim$4, prim$5, prim$6, prim$7, ..., prim$347) {
  var tmp = { };
  if (prim !== undefined) {
    tmp.azimuth = Caml_option.valFromOption(prim);
  }
  if (prim$1 !== undefined) {
    tmp.background = Caml_option.valFromOption(prim$1);
  }
...
style(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, ...)

The function style is duplicated in each component that uses the ppx with [%mui.withStyles...]. This contributes immensely to the overall bundle size.

Is it the expected behavior? Or have I missed some bit of configuration?

I really enjoy working with bs-material-ui and can't imagine working on my projects without it, but the issue with the bundle size is really concerning. I am happy to help further investigate and improve it though!

TextField has no onKeyPress

Would really like to use the enter key in text fields, but the bindings offer no onKeyPress prop.

Theme support

For discussion and possible action:
What would it take to support themes?

PPX build fails at the end on Linux

When the ppx is added (and then built) on linux, at the end the following error happens:
cp: cannot stat './lib/bs/native/ppx_withStyles.native': No such file or directory

This is because the command is written with a capital S and linux is case-sensitive.

This issue had previously been reported and fixed before the repos are merged (jsiebern/reason-mui-withstyles-ppx#4), and the fix hasn't been brought over.

I'm about to do a pull request.

No docs appear on NPM

I normally find packages and their docs via NPM in the first instance. If I do that for bs-material-ui now, I only see:

Unable to find a readme for @jsiebern/[email protected]

I think this is also having the effect that it doesn't appear in the top few results of Google any more (which is how I found it originally).

SVG Icons

It'd be great if the built-in SVG icon components were exposed. Currently I've inlined it
with the SVG from https://material.io/tools/icons/

<SvgIcon>
  <path fill="none" d="M0 0h24v24H0V0z"/>
  <path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/>
</SvgIcon>

It'd be lovely if this could be simply:

<SvgIcon.AccountBox />

Which would pull the built-in component from @material-ui/icons/AccountBox.

TableCell `align` prop

Hey - this is awesome, thanks very much for making it!

I'm trying to figure out how to set 'align' on the TableCell component, as mentioned here:
https://material-ui.com/api/table-cell/ - as it appears under 'props' on those docs, I'd expect to be able to do:

<TableCell align=`Center>...</TableCell>

Should this instead be done using the styling framework? I tried setting a className that set textAlign as I wanted, but it was overridden by a higher precedence style rule - I'm still getting my head round all of the 'vanilla' material-ui concepts so ignore this part if it makes no sense 😄

htmlFor for Label based components

It would be nice to have htmlFor in props for Label based components.

The Material UI examples for Select

<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
  value={this.state.age}
  inputProps={{
    name: 'age',
    id: 'age-simple',
  }}
>

I was looking for htmlFor in your bindings but realised that it's not in the Material UI library so you haven't auto generated it. It's an optional in ReasonReact if passed through.

https://github.com/reasonml/reason-react/blob/a137c9dbde8816f5fae65a542a25aeefcc7b1d77/src/ReactDOMRe.re#L209

Thanks

<MenuItem/> does not accept ~value property

Consider the following slightly modified example from the material-ui documentation.

<MUI.Select 
   value=(`String("")) 
   name="age">
  <MenuItem value=`String("")>
    <em>
         ( "None" |> ReasonReact.stringToElement)
    </em>
  </MenuItem>
  <MenuItem value={`String("10")}>
     ( "Ten" |> ReasonReact.stringToElement )
  </MenuItem>
  <MenuItem value={`String("20")}>
     ("Twenty" |> ReasonReact.stringToElement )
  </MenuItem>
  <MenuItem value={`String("30"}>
    ("Thirty" |> ReasonReact.stringToElement)
  </MenuItem>
</MUI.Select>;

This throws the following error:

The function applied to this argument has type
    (~className: string=?,
    ~component: [ `Element(ReasonReact.reactElement) | `String(string) ]=?,
    ~role: string=?, ~selected: bool=?, ~button: bool=?,
    ~containerComponent: [ `Element(ReasonReact.reactElement)
                         | `String(string) ]=?,
    ~dense: bool=?, ~disabled: bool=?, ~disableGutters: bool=?,
    ~divider: bool=?, ~classes: MUI.MenuItem.Classes.t=?) =>
    ReasonReact.componentSpec
    (ReasonReact.stateless,  ReasonReact.stateless,
      ReasonReact.noRetainedProps,  ReasonReact.noRetainedProps,
      ReasonReact.actionless)
This argument cannot be applied with label ~value

MenuItem.d.ts defines the following interface:

export interface MenuItemProps extends StandardProps<ListItemProps, MenuItemClassKey> {
  component?: React.ReactType<MenuItemProps>;
  role?: string;
  selected?: boolean;
}

ListItem.d.ts defines the following interface

export interface ListItemProps
  extends StandardProps<
      ButtonBaseProps & React.LiHTMLAttributes<HTMLElement>,
      ListItemClassKey,
      'component'
    > {
  button?: boolean;
  component?: React.ReactType<ListItemProps>;
  ContainerComponent?: React.ReactType<React.HTMLAttributes<HTMLDivElement>>;
  ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
  dense?: boolean;
  disabled?: boolean;
  disableGutters?: boolean;
  divider?: boolean;
}

ButtonBase.d.ts defines the following interface

export interface ButtonBaseProps
  extends StandardProps<
      React.AnchorHTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>,
      ButtonBaseClassKey
    > {
  buttonRef?: React.Ref<any>;
  centerRipple?: boolean;
  component?: React.ReactType<ButtonBaseProps>;
  disableRipple?: boolean;
  focusRipple?: boolean;
  keyboardFocusedClassName?: string;
  onKeyboardFocus?: React.FocusEventHandler<any>;
  TouchRippleProps?: Partial<TouchRippleProps>;
}

While, React.LiHTMLAttributes<HTMLElement> is defined as follows:

interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
   value?: string | string[] | number;
 }

So it seems as though the intersection type ButtonBaseProps & React.LiHTMLAttributes<HTMLElement> is not being properly parsed.

Is this intended? I'd be happy to take a crack at this issue. Figured I'd reach out first to see if I'm missing something here.

Thanks!

Complete bindings for theme

Continuing from conversation in #17 there is a little work still to be done to fully support the mui theme.

Todo:

• type theme object
• access theme in withStyles ppx

I'm going to start with typing the theme object

How should I use theme.breakpoints.up?

I can't seem to find an easy way to translate this material-ui example https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js,

to reasonML. Can someone please advise? It's especially the breakpoints that is hard.

MaterialUi Auto-Layout

Auto-layout
The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

How is this done with bs-material-ui?

Bindings for material-ui-icons

Just wanted to double check that I am not missing anything: at the moment, bs-material-ui does not include bindings to the Material-ui-icons, right? (i.e. https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons )

Do you consider this as something you want to add later, of something better suited for a stand-alone package? If there is interest to add this, I will try and have a look to see if the codegen approach you used would work to generate these bindings as well.

My main goal is converting some of the Material-UI docs and code examples to ReasonML, and the icons + theme support seem to be the main showstoppers right now.

Prop names: change leading underscore to trailing underscore

In 0.4.2, reason-react moved from leading underscores (_open, _type, ...) to trailing underscores (open_, type_, ...), see https://github.com/reasonml/reason-react/blob/master/HISTORY.md.

I think the material-ui bindings should follow suit. Trailing underscores just make more sense, as a leading underscore usually means "unused" in Reason/OCaml.

Button component example

Hi! Could you provide an example how to use Button's component property?. I have Link component:

let component = ReasonReact.statelessComponent("Link");

let make = (~href: string, children) => {
    ...component,
    render: _self => {
        <a href=href onClick=(e => {
            ReactEventRe.Mouse.preventDefault(e);
            ReasonReact.Router.push(href);
        })> {children} </a>
    }
};

and

<Button color=`Primary size=`Small component=`Callback(Link.make) href={"/users/edit/" ++ string_of_int(u.id)}>
    <span className=classes##buttonIcon>
        <MaterialUIIcons.Edit/>
    </span>
    {str("EDIT")}
</Button>

doesn't work. It prints Link000 everywhere.
This is better:

<Button color=`Primary size=`Small component=`Callback(props => <Link href="test"/>)

but still is not what I expect.
Thx in advance for any help

Select Component returns polymorphic variant for onChange event

On the hooks branch the select component behavior has changed.

Previously I would set up the value prop as `String(value) and the onChange event value would be a string. Now the event value returns a polymorphic value [id, "string"].

Switching to native select fixes the problem

Postinstall script calling bsb instead of bsb-native within Docker container.

I'm encountering a strange issue when I attempt to containerize a project that includes bs-material-ui-ppx.

Outside the containerized environment everything works fine, but when I try to build a Docker container using the node:11 image, I encounter an issue when the postinstall script attempts to build via bsb-native. It appears to execute the default bsb from bs-platform, per this error message about not supporting the -backend option:

> [email protected] postinstall /physis/node_modules/@jsiebern/bs-material-ui-ppx/node_modules/bsb-native
> node postinstall.js

Unzip successful.

> @jsiebern/[email protected] postinstall /physis/node_modules/@jsiebern/bs-material-ui-ppx
> bsb -make-world -backend native && cp ./lib/bs/native/ppx_withstyles.native ./ppx

/physis/node_modules/@jsiebern/bs-material-ui-ppx/node_modules/bsb-native/lib/bsb.exe: unknown option '-backend'.
Usage : bsb.exe <bsb-options> -- <ninja_options>

However, the executable path mentioned in the logs (/physis/node_modules/@jsiebern/bs-material-ui-ppx/node_modules/bsb-native/lib/bsb.exe) implies that the bsb.exe from bs-material-ui-ppx's node_modules is raising this error. But if that were the case, bsb.exe would know how to handle the -backend flag. It appears something's lying to us...

This seems related to this issue, though a definitive conclusion wasn't reached in that thread.

Do you have any ideas regarding why this might occur?

Add my project under the Example section of README?

Hi, I created a small app using your bindings and it worked great! You can find it at https://github.com/feihong/cool-char-generator. Although it's a full-fledged program, it's pretty small so I think it works as example code. If you like, you could add a link to it under the Example section of README.md.

The code shows usage of Button, Grid, FormControl, Select, MenuItem, and Popover components. I think the most useful part is how it deals with the anchorEl argument of the Popover component. This was the only thing that I really struggled with when using your bindings, probably because I'm relatively new to Reason.

If you prefer, I can make the edits to README.md myself and send you a PR.

Arrow prop doesn't exist for tooltip.

Arrow prop doesn't exist as a prop for tooltip. Can someone please add the prop. Implementation exists in material-ui binding. Or some other way to implement this ?

new type signatures

Hey @jsiebern,

Great work as always, I'm really enjoying the new improvements in the library. I've recently upgraded from from 0.1.6 to 0.2.0 and was able to migrate everything rather seamlessly aside from a few things that are puzzling me. I'm currently building out some cascading menus so I'm making use of the properties transformOrigin and anchorOrigin, previously I was able to set values like:

<MaterialUi.Menu
  transformOrigin={horizontal: int, vertical: int}
  anchorOrigin={horizontal: int, vertical: int}
  ...
/>

however with the new type signatures, these values no longer work - it looks like you're moving towards using the enums/variant values which I very much agree with, but even attempting to pass record with something like: {horizontal: Left, vertical: Center} I'll still get type errors telling me they are expecting MaterialUi.Menu.typeAnchorOrigin. Looking through the source hasn't quite helped as much as it has in the past. Am I missing something here?

Thanks for all your hard work on this project!

theming

I see that there a variety of to-do items related to theming. Have you decided on an execution plan? If so, perhaps it would be good to document it here?

In the meantime, going to read the code to see what's possible.

Thanks!