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",
"@rescript/react",
"bs-css",
"bs-css-dom",
"bs-css-emotion",
"@foretold-app/squiggle",
"rationale",
"bs-moment",

View File

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

View File

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

View File

@ -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=?,

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -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)
}}
</>

View File

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

View File

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

View File

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

View File

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

View File

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

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