Merge branch 'rescript-refactor' of github.com:QURIresearch/squiggle into rescript-refactor

* 'rescript-refactor' of github.com:QURIresearch/squiggle:
  Re-add Ant Design components
This commit is contained in:
Ozzie Gooen 2022-02-09 20:53:36 -05:00
commit 10dba97f7d
16 changed files with 42833 additions and 105 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -1,60 +1,13 @@
type route = type route =
| DistBuilder | DistBuilder
| Home
| NotFound | NotFound
let routeToPath = route => let routeToPath = route =>
switch route { switch route {
| DistBuilder => "/dist-builder" | DistBuilder => "/"
| Home => "/"
| _ => "/" | _ => "/"
} }
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> let fixedLength = r => <div className="w-full max-w-screen-xl mx-auto px-6"> r </div>
@react.component @react.component
@ -62,16 +15,13 @@ let make = () => {
let url = RescriptReactRouter.useUrl() let url = RescriptReactRouter.useUrl()
let routing = switch url.path { let routing = switch url.path {
| list{"dist-builder"} => DistBuilder | list{} => DistBuilder
| list{} => Home
| _ => NotFound | _ => NotFound
} }
<> <>
<Menu />
{switch routing { {switch routing {
| DistBuilder => <DistBuilder /> | DistBuilder => <DistBuilder />
| Home => <Home />
| _ => fixedLength("Page is not found" |> R.ste) | _ => fixedLength("Page is not found" |> R.ste)
}} }}
</> </>

View File

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

View File

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

View File

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

View File

@ -24,7 +24,7 @@ let make = (~number, ~precision) => {
{JS.powerGet(numberWithPresentation) |> R.O.fmapOrNull(e => {JS.powerGet(numberWithPresentation) |> R.O.fmapOrNull(e =>
<span> <span>
{j`\\u00b710` |> React.string} {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>
)} )}
</span> </span>

View File

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

View File

@ -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>

File diff suppressed because it is too large Load Diff