Merge pull request #15 from Hazelfire/rescript-refactor

Re-add Ant Design components + Remove Home Page

packages/playground/bsconfig.json

@@ -38,7 +38,7 @@
     "@rescriptbr/reform",
     "@rescript/react",
     "bs-css",
-    "bs-css-dom",
+    "bs-css-emotion",
     "@foretold-app/squiggle",
     "rationale",
     "bs-moment",

packages/playground/package.json

@@ -37,7 +37,7 @@
     "binary-search-tree": "0.2.6",
     "bs-ant-design-alt": "2.0.0-alpha.33",
     "bs-css": "^15.1.0",
-    "bs-css-dom": "^3.1.0",
+    "bs-css-emotion": "^4.1.0",
     "bs-moment": "0.6.0",
     "bsb-js": "1.1.7",
     "css-loader": "^6.6.0",

packages/playground/showcase/Lib.res

@@ -88,9 +88,9 @@ module Index = {
 
   let buildNav = _ => {
     let rec buildFolder = (f: folderEntry) =>
-      <div key=f.id style=Styles.folderNav>
+      <div key=f.id className=Styles.folderNav>
         <h4 onClick={_e => changeId(f.id)}> {f.title->React.string} </h4>
-        <div style=Styles.folderChildren>
+        <div className=Styles.folderChildren>
           {(f.children
           |> E.L.fmap(e =>
             switch e {
@@ -102,7 +102,7 @@ module Index = {
         </div>
       </div>
     and buildEntry = (e: compEntry) =>
-      <div key=e.id style=Styles.compNav onClick={_e => changeId(e.id)}>
+      <div key=e.id className=Styles.compNav onClick={_e => changeId(e.id)}>
         {e.title->React.string}
       </div>
     (entries
@@ -118,7 +118,7 @@ module Index = {
   let renderEntry = e =>
     switch e.container {
     | FullWidth => e.render()
-    | Sidebar => <div style=Styles.sidebarContainer> {e.render()} </div>
+    | Sidebar => <div className=Styles.sidebarContainer> {e.render()} </div>
     }
 
   @react.component
@@ -132,9 +132,9 @@ module Index = {
       let _ = RescriptReactRouter.watchUrl(url => setRoute(_ => url))
     }) |> ignore
 
-    <div style=Styles.pageContainer>
-      <div style=Styles.leftNav> {buildNav(setRoute)} </div>
-      <div style=Styles.compContainer>
+    <div className=Styles.pageContainer>
+      <div className=Styles.leftNav> {buildNav(setRoute)} </div>
+      <div className=Styles.compContainer>
         {if route.hash == "" {
           React.null
         } else {
@@ -148,7 +148,7 @@ module Index = {
               |> E.L.fmap(child =>
                 switch child {
                 | CompEntry(c) =>
-                  <div style=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
+                  <div className=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
                 | _ => React.null
                 }
               )

packages/playground/src/Antd/Antd_Button.res

@@ -9,7 +9,7 @@ type makeType = props => React.element
   ~ghost: bool=?,
   ~href: string=?,
   ~htmlType: @string [#button | #submit | #submit]=?,
-  ~icon: 'a=?,
+  ~icon: Antd_IconName.t=?,
   ~shape: @string [#circle | #round]=?,
   ~size: @string [#small | #large]=?,
   ~target: string=?,

packages/playground/src/Antd/Antd_Card.res

@@ -1,4 +1,3 @@
-
 @deriving(abstract)
 type props
 type makeType = props => React.element

packages/playground/src/Antd/Antd_Form.res

@@ -47,6 +47,6 @@ module Item = {
         ~children:React.element=?,
         unit
       ) => props = ""
-  @module("antd")
-  external make : makeType = "Form.Item"
+  @module("antd/lib/form/FormItem")
+  external make : makeType = "default"
 }

packages/playground/src/Antd/Antd_Grid.res

@@ -1,3 +1,4 @@
+%%raw(`require("antd/lib/grid/style")`)
 
 
 module Row = {

packages/playground/src/App.res

@@ -1,60 +1,13 @@
 type route =
   | DistBuilder
-  | Home
   | NotFound
 
 let routeToPath = route =>
   switch route {
-  | DistBuilder => "/dist-builder"
-  | Home => "/"
+  | DistBuilder => "/"
   | _ => "/"
   }
 
-module Menu = {
-  module Styles = {
-    open CssJs
-    let menu = style(. [ position(#relative),
-    marginTop(em(0.25)),
-    marginBottom(em(0.25)),
-    selector(.
-      "a",
-      [ borderRadius(em(0.25)),
-      display(#inlineBlock),
-      backgroundColor(#hex("eee")),
-      padding(em(1.)),
-      cursor(#pointer),
-    ],
-    ),
-    selector(. "a:hover", [ backgroundColor(#hex("bfcad4")) ]),
-    selector(. "a:hover", [ backgroundColor(#hex("bfcad4")) ]),
-    selector(.
-      "a:not(:firstChild):not(:lastChild)",
-      [ marginRight(em(0.25)), marginLeft(em(0.25)) ],
-    ),
-  ])
-  }
-
-  module Item = {
-    @react.component
-    let make = (~href, ~children) =>
-      <a
-        href
-        onClick={e => {
-          e->ReactEvent.Synthetic.preventDefault
-          RescriptReactRouter.push(href)
-        }}>
-        children
-      </a>
-  }
-
-  @react.component
-  let make = () =>
-    <div style=Styles.menu>
-      <Item href={routeToPath(Home)} key="home"> {"Home" |> R.ste} </Item>
-      <Item href={routeToPath(DistBuilder)} key="dist-builder"> {"Dist Builder" |> R.ste} </Item>
-    </div>
-}
-
 let fixedLength = r => <div className="w-full max-w-screen-xl mx-auto px-6"> r </div>
 
 @react.component
@@ -62,16 +15,13 @@ let make = () => {
   let url = RescriptReactRouter.useUrl()
 
   let routing = switch url.path {
-  | list{"dist-builder"} => DistBuilder
-  | list{} => Home
+  | list{} => DistBuilder
   | _ => NotFound
   }
 
   <>
-    <Menu />
     {switch routing {
     | DistBuilder => <DistBuilder />
-    | Home => <Home />
     | _ => fixedLength("Page is not found" |> R.ste)
     }}
   </>

packages/playground/src/components/DistBuilder.res

@@ -59,25 +59,28 @@ module FieldFloat = {
     <Form.Field
       field
       render={({handleChange, error, value, validate}) =>
-          <Antd.Input
-            value
-            onChange={ReForm.Helpers.handleChange(handleChange)}
-            onBlur={_ => validate()}
-            style={className}
-          />
+          <Antd.Form.Item label={label}>
+            <Antd.Input
+              value
+              onChange={ReForm.Helpers.handleChange(handleChange)}
+              onBlur={_ => validate()}
+              className={className}
+            />
+          </Antd.Form.Item>
         }
     />
 }
 
 module Styles = {
   open CssJs
-  let rows = style(. [ selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
-  selector(. ">.antCol:lastChild", [ paddingLeft(em(0.125)), paddingRight(em(0.25)) ]),
-  selector(. 
-    ">.antCol:not(:firstChild):not(:lastChild)",
-    [ paddingLeft(em(0.125)), paddingRight(em(0.125)) ],
-  ),
-])
+  let rows = style(. [
+    selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
+    selector(. ">.antCol:lastChild", [ paddingLeft(em(0.125)), paddingRight(em(0.25)) ]),
+    selector(. 
+      ">.antCol:not(:firstChild):not(:lastChild)",
+      [ paddingLeft(em(0.125)), paddingRight(em(0.125)) ],
+    ),
+  ])
 let parent = style(. [ selector(. ".antInputNumber", [ width(#percent(100.)) ]),
 selector(. ".anticon", [ verticalAlign(#zero) ]),
  ])
@@ -238,14 +241,13 @@ let make = () => {
   <div className="grid grid-cols-2 gap-4">
     <div>
       <Antd.Card
-        title={"Distribution Form" |> R.ste}
-        extra={<Antd.Button icon=Antd.IconName.reload shape=#circle onClick=onReload />}>
+        title={"Distribution Form" |> R.ste}>
         <Form.Provider value=reform>
           <Antd.Form onSubmit>
-            <Row _type="flex" style=Styles.rows>
+            <Row _type="flex" className=Styles.rows>
               <Col span=24> <FieldText field=FormConfig.SquiggleString label="Program" /> </Col>
             </Row>
-            <Row _type="flex" style=Styles.rows>
+            <Row _type="flex" className=Styles.rows>
               <Col span=12> <FieldFloat field=FormConfig.SampleCount label="Sample Count" /> </Col>
               <Col span=12>
                 <FieldFloat field=FormConfig.OutputXYPoints label="Output XY-points" />

packages/playground/src/components/charts/DistPlusPlot.res

@@ -234,7 +234,7 @@ module Chart = {
       (distPlus, config),
     )
     <div
-      style={
+      className={
         open CssJs
         style(. [ minHeight(#px(DistPlusPlotReducer.heightToPix(config.height))) ])
       }>

packages/playground/src/components/charts/DistributionPlot/DistributionPlot.res

@@ -86,7 +86,7 @@ let make = (
   ~showVerticalLine=false,
   ~timeScale=?,
 ) =>
-  <div style={Styles.graph(color)}>
+  <div className={Styles.graph(color)}>
     <RawPlot
       ?maxX
       ?minX

packages/playground/src/components/charts/NumberShower.res

@@ -24,7 +24,7 @@ let make = (~number, ~precision) => {
     {JS.powerGet(numberWithPresentation) |> R.O.fmapOrNull(e =>
       <span>
         {j`\\u00b710` |> React.string}
-        <span style=sup> {e |> E.Float.toString |> React.string} </span>
+        <span className=sup> {e |> E.Float.toString |> React.string} </span>
       </span>
     )}
   </span>

packages/playground/src/index.html

@@ -6,6 +6,7 @@
   <title>Squiggle Language</title>
   <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
   <link href="./styles/index.css" rel="stylesheet">
+  <link href="./styles/antd.css" rel="stylesheet">
   <script src="./Index.bs.js" defer></script>
 </head>
 

packages/playground/src/pages/Home.res

@@ -1,19 +0,0 @@
-module Styles = {
-  open CssJs
-  let h3 = style(. [ fontSize(#em(1.5)), marginBottom(#em(1.5)) ])
-  let card = style(. [ marginTop(#em(2.)), marginBottom(#em(2.)) ])
-}
-
-module Table = {
-  module TableStyles = {
-    open CssJs
-    let row = style(. [ display(#flex), height(#em(4.)) ])
-    let col = (~f=1.0, ()) => style(. [ flex(#num(f)) ])
-  }
-
-  @react.component
-  let make = () => <> </>
-}
-
-@react.component
-let make = () => <div> <div style=Styles.card> <Table /> </div> </div>