adds Form components

- Form (Floating, Group, Label, Text, Control, Range, Select)
- FormControl (Feedback)
- Form.Check (Input, Label)
- FloatingLabel

Author: matdsoupe

src/ReactBootstrap.res

@@ -569,128 +569,30 @@ module Dropdown = {
   }
 }
 
-module Container = {
-  @module("react-bootstrap") @react.component
-  external make: (~children: React.element, ~className: string=?) => React.element = "Container"
-}
-
-module Row = {
+module Figure = {
   @module("react-bootstrap") @react.component
   external make: (
-    ~xs: int=?,
-    ~sm: int=?,
-    ~md: int=?,
-    ~lg: int=?,
-    ~xl: int=?,
-    ~xxl: int=?,
+    ~_as: string=?,
     ~className: string=?,
     ~children: React.element,
-  ) => React.element = "Row"
+    ~bsPrefix: string=?,
+  ) => React.element = "Figure"
 }
 
-module Col = {
+module FigureImage = {
   @module("react-bootstrap") @react.component
-  external make: (
-    ~xs: int=?,
-    ~sm: int=?,
-    ~md: int=?,
-    ~lg: int=?,
-    ~xl: int=?,
-    ~xxl: int=?,
-    ~className: string=?,
-    ~children: React.element,
-  ) => React.element = "Col"
+  external make: (~width: int=?, ~height: int=?, ~alt: string=?, ~src: string=?) => React.element =
+    "FigureImage"
 }
 
-module Navbar = {
+module FigureCaption = {
   @module("react-bootstrap") @react.component
   external make: (
-    ~id: string=?,
     ~_as: string=?,
-    ~children: React.element,
-    ~bg: string=?,
-    ~expand: [#sm | #md | #lg | #xl | #xxl],
-    ~expanded: bool=?,
-    ~fixed: [#top | #bottom],
-    ~role: string=?,
-    ~variant: [#light | #dark],
-    ~collapseOnSelect: bool=?,
-    ~sticky: string=?,
-    ~className: string=?,
-  ) => React.element = "Navbar"
-
-  module Brand = {
-    @module("react-bootstrap") @scope("Navbar") @react.component
-    external make: (
-      ~is: string=?,
-      ~_as: string=?,
-      ~href: string,
-      ~className: string=?,
-      ~children: React.element,
-    ) => React.element = "Brand"
-  }
-
-  module Collapse = {
-    @module("react-bootstrap") @scope("Navbar") @react.component
-    external make: (
-      ~id: string=?,
-      ~className: string=?,
-      ~children: React.element,
-    ) => React.element = "Collapse"
-  }
-
-  module Toggle = {
-    @module("react-bootstrap") @scope("Navbar") @react.component
-    external make: (
-      ~id: string=?,
-      ~_as: string=?,
-      ~children: React.element=?,
-      ~label: string=?,
-      ~\"aria-controls": string=?,
-      ~className: string=?,
-    ) => React.element = "Toggle"
-  }
-}
-
-module Nav = {
-  @module("react-bootstrap") @react.component
-  external make: (
-    ~id: string=?,
-    ~activeKey: string=?,
-    ~className: string=?,
-    ~navbarScroll: bool=?,
-    ~_as: string=?,
-    ~fill: bool=?,
-    ~justify: bool=?,
-    ~navbar: bool=?,
-    ~role: string=?,
-    ~variant: [#tabs | #pills],
     ~className: string=?,
     ~children: React.element,
-  ) => React.element = "Nav"
-
-  module Item = {
-    @module("react-bootstrap") @scope("Nav") @react.component
-    external make: (
-      ~id: string=?,
-      ~className: string=?,
-      ~children: React.element,
-      ~_as: string=?,
-    ) => React.element = "Item"
-  }
-
-  module Link = {
-    @module("react-bootstrap") @scope("Nav") @react.component
-    external make: (
-      ~id: string=?,
-      ~children: React.element,
-      ~_as: string=?,
-      ~active: bool=?,
-      ~disabled: bool=?,
-      ~href: string,
-      ~className: string=?,
-    ) => React.element = "Link"
-  }
+    ~bsPrefix: string,
+  ) => React.element = "FigureCaption"
 }
 
 module Form = {
@@ -703,6 +605,16 @@ module Form = {
     ~className: string=?,
   ) => React.element = "Form"
 
+  module Floating = {
+    @module("react-bootstrap") @scope("Form") @react.component
+    external make: (
+      ~_as: string=?,
+      ~className: string=?,
+      ~children: React.element,
+      ~bsPrefix: string,
+    ) => React.element = "Floating"
+  }
+
   module Group = {
     @module("react-bootstrap") @scope("Form") @react.component
     external make: (
@@ -715,15 +627,18 @@ module Form = {
   }
 
   module Label = {
+    type column = Bool(bool) | Size([#sm | #lg])
+
     @module("react-bootstrap") @scope("Form") @react.component
     external make: (
       ~_ref: ReactDOM.Ref.t=?,
       ~_as: string=?,
-      ~column: [#sm | #lg]=?,
+      ~column: column=?,
       ~visuallyHidden: bool=?,
       ~htmlFor: string=?,
       ~className: string=?,
       ~children: React.element,
+      ~bsPrefix: string=?,
     ) => React.element = "Label"
   }
 
@@ -735,6 +650,7 @@ module Form = {
       ~muted: bool=?,
       ~className: string=?,
       ~children: React.element,
+      ~bsPrefix: string=?,
     ) => React.element = "Text"
   }
 
@@ -755,6 +671,7 @@ module Form = {
       ~value: string=?,
       ~className: string=?,
       ~onChange: ReactEvent.Form.t=?,
+      ~bsPrefix: string=?,
     ) => React.element = "Control"
 
     module Feedback = {
@@ -776,11 +693,18 @@ module Form = {
       ~_as: string=?,
       ~children: React.element=?,
       ~disabled: bool=?,
+      ~feedback: reactNode=?,
+      ~feedbackTooltip: bool=?,
+      ~id: string=?,
       ~inline: bool=?,
       ~isInvalid: bool=?,
       ~isValid: bool=?,
+      ~label: string=?,
       ~title: string=?,
       ~className: string=?,
+      ~_type: [#radio | #checkbox | #"switch"]=?,
+      ~bsPrefix: string=?,
+      ~bsSwitchPredfix: string=?,
     ) => React.element = "Check"
 
     module Input = {
@@ -792,16 +716,37 @@ module Form = {
         ~isValid: bool=?,
         ~className: string=?,
         ~_type: [#radio | #checkbox]=?,
+        ~bsPrefix: string=?,
       ) => React.element = "Input"
     }
 
     module Label = {
       @module("react-bootstrap") @scope(("Form", "Check")) @react.component
-      external make: (~htmlFor: string, ~className: string=?) => React.element = "Label"
+      external make: (
+        ~htmlFor: string,
+        ~className: string=?,
+        ~children: React.element,
+        ~bsPrefix: string=?,
+      ) => React.element = "Label"
+    }
+
+    module Range = {
+      type value<'a> = Value('a) | Values(array<'a>)
+
+      @module("react-bootstrap") @scope(("Form", "Check")) @react.component
+      external make: (
+        ~disabled: bool=?,
+        ~id: string=?,
+        ~onChange: ReactEvent.Form.t => unit=?,
+        ~value: value<'a>=?,
+        ~bsPrefix: string=?,
+      ) => React.element = "Label"
     }
   }
 
   module Select = {
+    type value<'a> = Value('a) | Values(array<'a>)
+
     @module("react-bootstrap") @scope("Form") @react.component
     external make: (
       ~disabled: bool=?,
@@ -810,7 +755,9 @@ module Form = {
       ~isValid: bool=?,
       ~onChange: ReactEvent.Form.t=?,
       ~className: string=?,
+      ~value: value<'a>=?,
       ~size: [#sm | #lg]=?,
+      ~bsPrefix: string=?,
     ) => React.element = "Select"
   }
 
@@ -819,7 +766,7 @@ module Form = {
     external make: (
       ~_as: string=?,
       ~controlId: string=?,
-      ~label: string=?,
+      ~label: string,
       ~className: string=?,
       ~children: React.element,
     ) => React.element = "FloatingLabel"
@@ -836,3 +783,127 @@ module InputGroup = {
     ~children: React.element,
   ) => React.element = "InputGroup"
 }
+
+module Container = {
+  @module("react-bootstrap") @react.component
+  external make: (~children: React.element, ~className: string=?) => React.element = "Container"
+}
+
+module Row = {
+  @module("react-bootstrap") @react.component
+  external make: (
+    ~xs: int=?,
+    ~sm: int=?,
+    ~md: int=?,
+    ~lg: int=?,
+    ~xl: int=?,
+    ~xxl: int=?,
+    ~className: string=?,
+    ~children: React.element,
+  ) => React.element = "Row"
+}
+
+module Col = {
+  @module("react-bootstrap") @react.component
+  external make: (
+    ~xs: int=?,
+    ~sm: int=?,
+    ~md: int=?,
+    ~lg: int=?,
+    ~xl: int=?,
+    ~xxl: int=?,
+    ~className: string=?,
+    ~children: React.element,
+  ) => React.element = "Col"
+}
+
+module Navbar = {
+  @module("react-bootstrap") @react.component
+  external make: (
+    ~id: string=?,
+    ~_as: string=?,
+    ~children: React.element,
+    ~bg: string=?,
+    ~expand: [#sm | #md | #lg | #xl | #xxl],
+    ~expanded: bool=?,
+    ~fixed: [#top | #bottom],
+    ~role: string=?,
+    ~variant: [#light | #dark],
+    ~collapseOnSelect: bool=?,
+    ~sticky: string=?,
+    ~className: string=?,
+  ) => React.element = "Navbar"
+
+  module Brand = {
+    @module("react-bootstrap") @scope("Navbar") @react.component
+    external make: (
+      ~is: string=?,
+      ~_as: string=?,
+      ~href: string,
+      ~className: string=?,
+      ~children: React.element,
+    ) => React.element = "Brand"
+  }
+
+  module Collapse = {
+    @module("react-bootstrap") @scope("Navbar") @react.component
+    external make: (
+      ~id: string=?,
+      ~className: string=?,
+      ~children: React.element,
+    ) => React.element = "Collapse"
+  }
+
+  module Toggle = {
+    @module("react-bootstrap") @scope("Navbar") @react.component
+    external make: (
+      ~id: string=?,
+      ~_as: string=?,
+      ~children: React.element=?,
+      ~label: string=?,
+      ~\"aria-controls": string=?,
+      ~className: string=?,
+    ) => React.element = "Toggle"
+  }
+}
+
+module Nav = {
+  @module("react-bootstrap") @react.component
+  external make: (
+    ~id: string=?,
+    ~activeKey: string=?,
+    ~className: string=?,
+    ~navbarScroll: bool=?,
+    ~_as: string=?,
+    ~fill: bool=?,
+    ~justify: bool=?,
+    ~navbar: bool=?,
+    ~role: string=?,
+    ~variant: [#tabs | #pills],
+    ~className: string=?,
+    ~children: React.element,
+  ) => React.element = "Nav"
+
+  module Item = {
+    @module("react-bootstrap") @scope("Nav") @react.component
+    external make: (
+      ~id: string=?,
+      ~className: string=?,
+      ~children: React.element,
+      ~_as: string=?,
+    ) => React.element = "Item"
+  }
+
+  module Link = {
+    @module("react-bootstrap") @scope("Nav") @react.component
+    external make: (
+      ~id: string=?,
+      ~children: React.element,
+      ~_as: string=?,
+      ~active: bool=?,
+      ~disabled: bool=?,
+      ~href: string,
+      ~className: string=?,
+    ) => React.element = "Link"
+  }
+}