988aa67 · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

Updates for 0.15

commit988aa6724ecd53a2f6f6a527ed0322f470933b7c authorMark Eibes <mark.eibes@gmail.com> dateThu 21 Apr 2022, 13:04 (4 years ago) parent44a8975

17 files changed+711−748

compare with main

unifiedsplit

.vscode/settings.json+1−1 packages.dhall+297−380 spago.dhall−1 src/Web/DOM/ResizeObserver.purs+9−9 src/Yoga.purs+29−22 src/Yoga/Block/Atom/Input/Story.purs+39−36 src/Yoga/Block/Atom/Segmented/View.purs+39−32 src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs+3−4 src/Yoga/Block/Hook/UseResize.purs+10−9 src/Yoga/Block/Internal.purs+6−6 src/Yoga/Block/Internal/OptionalProp.purs+4−2 src/Yoga/Block/Molecule/Sheet/View.purs+67−63 src/Yoga/Block/Organism/Form.purs+1−1 src/Yoga/Block/Organism/Form/Internal.purs+68−66 src/Yoga/Block/Organism/Form/Validation.purs+111−95 src/Yoga/Block/Palette/Story.purs+24−20 src/Yoga/Prelude/View.purs+3−1

.vscode/settings.json+1−1

@@ -1,6 +1,6 @@

11{

22 "editor.formatOnSave": true,

3− "workbench.colorTheme": "Irul Theme",

3+ "workbench.colorTheme": "Horizon Bright",

44 "search.useGlobalIgnoreFiles": true,

55 "files.watcherExclude": {

66 "**/.spago/**": true,

packages.dhall+297−380

@@ -99,161 +99,74 @@ in upstream

9999-------------------------------

100100-}

101101let upstream =

102− https://github.com/purescript/package-sets/releases/download/psc-0.14.5-20211116/packages.dhall

103− sha256:7ba810597a275e43c83411d2ab0d4b3c54d0b551436f4b1632e9ff3eb62e327a

102+ https://raw.githubusercontent.com/purescript/package-sets/prepare-0.15/src/packages.dhall

103+ sha256:b1c6d06132b7cbf1e93b1e5343044fba1604b50bfbe02d8f80a3002e71569c59

104104

105105in upstream

106− with metadata.version = "v0.15.0"

107− with prelude.repo = "https://github.com/kl0tl/purescript-prelude.git"

108− with prelude.version = "es-modules"

109− with effect.repo = "https://github.com/kl0tl/purescript-effect.git"

110− with effect.version = "es-modules"

111− with console.repo = "https://github.com/kl0tl/purescript-console.git"

112− with console.version = "es-modules"

113− with web-html.repo = "https://github.com/kl0tl/purescript-web-html.git"

114− with web-html.version = "es-modules"

115− with decimals.repo = "https://github.com/kl0tl/purescript-decimals.git"

116− with decimals.version = "es-modules"

117− with js-uri.repo = "https://github.com/kl0tl/purescript-js-uri.git"

118− with js-uri.version = "es-modules"

119− with unsafe-reference.repo

120− = "https://github.com/kl0tl/purescript-unsafe-reference.git"

121− with unsafe-reference.version = "es-modules"

122− with affjax.repo = "https://github.com/kl0tl/purescript-affjax.git"

123− with affjax.version = "es-modules"

124− with halogen-vdom.repo

125− = "https://github.com/kl0tl/purescript-halogen-vdom.git"

126− with halogen-vdom.version = "es-modules"

127− with formatters.repo = "https://github.com/kl0tl/purescript-formatters.git"

128− with formatters.version = "es-modules"

129− with web-clipboard.repo

130− = "https://github.com/kl0tl/purescript-web-clipboard.git"

131− with web-clipboard.version = "es-modules"

132− with web-xhr.repo = "https://github.com/kl0tl/purescript-web-xhr.git"

133− with web-xhr.version = "es-modules"

134− with argonaut-core.repo

135− = "https://github.com/kl0tl/purescript-argonaut-core.git"

136− with argonaut-core.version = "es-modules"

137− with avar.repo = "https://github.com/kl0tl/purescript-avar.git"

138− with avar.version = "es-modules"

139− with numbers.repo = "https://github.com/kl0tl/purescript-numbers.git"

140− with numbers.version = "es-modules"

141− with arrays.repo = "https://github.com/kl0tl/purescript-arrays.git"

142− with arrays.version = "es-modules"

143− with react-basic-classic.repo

144− = "https://github.com/kl0tl/purescript-react-basic-classic.git"

145− with react-basic-classic.version = "es-modules"

146− with aff.repo = "https://github.com/kl0tl/purescript-aff.git"

147− with aff.version = "es-modules"

148− with st.repo = "https://github.com/kl0tl/purescript-st.git"

149− with st.version = "es-modules"

150− with exceptions.repo = "https://github.com/kl0tl/purescript-exceptions.git"

151− with exceptions.version = "es-modules"

152− with simple-json.repo = "https://github.com/kl0tl/purescript-simple-json.git"

153− with simple-json.version = "es-modules"

154− with foreign-generic.repo

155− = "https://github.com/kl0tl/purescript-foreign-generic.git"

156− with foreign-generic.version = "es-modules"

157− with integers.repo = "https://github.com/kl0tl/purescript-integers.git"

158− with integers.version = "es-modules"

159− with math.repo = "https://github.com/kl0tl/purescript-math.git"

160− with math.version = "es-modules"

161− with now.repo = "https://github.com/kl0tl/purescript-now.git"

162− with now.version = "es-modules"

163− with js-date.repo = "https://github.com/kl0tl/purescript-js-date.git"

164− with js-date.version = "es-modules"

165− with partial.repo = "https://github.com/kl0tl/purescript-partial.git"

166− with partial.version = "es-modules"

167− with web-storage.repo = "https://github.com/kl0tl/purescript-web-storage.git"

168− with web-storage.version = "es-modules"

169− with web-file.repo = "https://github.com/kl0tl/purescript-web-file.git"

170− with web-file.version = "es-modules"

171− with web-events.repo = "https://github.com/kl0tl/purescript-web-events.git"

172− with web-events.version = "es-modules"

173− with web-dom.repo = "https://github.com/kl0tl/purescript-web-dom.git"

174− with web-dom.version = "es-modules"

175− with web-uievents.repo

176− = "https://github.com/kl0tl/purescript-web-uievents.git"

177− with web-uievents.version = "es-modules"

178− with web-touchevents.repo

179− = "https://github.com/kl0tl/purescript-web-touchevents.git"

180− with web-touchevents.version = "es-modules"

181− with unfoldable.repo = "https://github.com/kl0tl/purescript-unfoldable.git"

182− with unfoldable.version = "es-modules"

183− with unsafe-coerce.repo

184− = "https://github.com/kl0tl/purescript-unsafe-coerce.git"

185− with unsafe-coerce.version = "es-modules"

186− with strings.repo = "https://github.com/kl0tl/purescript-strings.git"

187− with strings.version = "es-modules"

188− with refs.repo = "https://github.com/kl0tl/purescript-refs.git"

189− with refs.version = "es-modules"

190− with record.repo = "https://github.com/kl0tl/purescript-record.git"

191− with record.version = "es-modules"

192− with nullable.repo = "https://github.com/kl0tl/purescript-nullable.git"

193− with nullable.version = "es-modules"

194− with lazy.repo = "https://github.com/kl0tl/purescript-lazy.git"

195− with lazy.version = "es-modules"

196− with functions.repo = "https://github.com/kl0tl/purescript-functions.git"

197− with functions.version = "es-modules"

198− with foreign.repo = "https://github.com/kl0tl/purescript-foreign.git"

199− with foreign.version = "es-modules"

200− with foreign-object.repo

201− = "https://github.com/kl0tl/purescript-foreign-object.git"

202− with foreign-object.version = "es-modules"

203− with foldable-traversable.repo

204− = "https://github.com/kl0tl/purescript-foldable-traversable.git"

205− with foldable-traversable.version = "es-modules"

206− with enums.repo = "https://github.com/kl0tl/purescript-enums.git"

207− with enums.version = "es-modules"

208− with debug.repo = "https://github.com/kl0tl/purescript-debug.git"

209− with debug.version = "es-modules"

210− with datetime.repo = "https://github.com/kl0tl/purescript-datetime.git"

211− with datetime.version = "es-modules"

212− with control.repo = "https://github.com/kl0tl/purescript-control.git"

213− with control.version = "es-modules"

214− with aff-promise.repo

215− =

216− "https://github.com/working-group-purescript-es/purescript-aff-promise.git"

217− with aff-promise.version = "es-modules"

218− with formatters.repo

219− =

220− "https://github.com/working-group-purescript-es/purescript-formatters.git"

221− with formatters.version = "es-modules"

222− with literals.repo

223− =

224− "https://github.com/working-group-purescript-es/purescript-literals.git"

225− with literals.version = "es-modules"

226− with lists.repo

227− = "https://github.com/working-group-purescript-es/purescript-lists.git"

228− with lists.version = "es-modules"

229− with react-basic.repo

230− =

231− "https://github.com/working-group-purescript-es/purescript-react-basic.git"

232− with milkis.repo

233− = "https://github.com/working-group-purescript-es/purescript-milkis.git"

234− with milkis.version = "es-modules"

235− with react-basic.version = "es-modules"

236− with react-basic-dom.repo

237− =

238− "https://github.com/working-group-purescript-es/purescript-react-basic-dom.git"

239− with react-basic-dom.version = "es-modules"

240− with react-basic-hooks.repo

241− =

242− "https://github.com/working-group-purescript-es/purescript-react-basic-hooks.git"

243− with react-basic-hooks.version = "es-modules"

244− with react-basic-emotion.repo

245− =

246− "https://github.com/working-group-purescript-es/purescript-react-basic-emotion.git"

247− with react-basic-emotion.version = "es-modules"

248− with stringutils.repo

249− =

250− "https://github.com/working-group-purescript-es/purescript-stringutils.git"

251− with stringutils.version = "es-modules"

252− with untagged-union.repo

253− =

254− "https://github.com/working-group-purescript-es/purescript-untagged-union.git"

255− with untagged-union.version = "es-modules"

256− with framer-motion.version = "es-modules"

106+ with framer-motion =

107+ { version = "es-modules"

108+ , repo = "https://github.com/i-am-the-slime/purescript-framer-motion.git"

109+ , dependencies =

110+ [ "aff"

111+ , "aff-promise"

112+ , "arrays"

113+ , "console"

114+ , "effect"

115+ , "foreign"

116+ , "foreign-object"

117+ , "heterogeneous"

118+ , "literals"

119+ , "maybe"

120+ , "nullable"

121+ , "prelude"

122+ , "psci-support"

123+ , "react-basic"

124+ , "react-basic-dom"

125+ , "react-basic-hooks"

126+ , "record"

127+ , "tuples"

128+ , "two-or-more"

129+ , "typelevel-prelude"

130+ , "unsafe-coerce"

131+ , "untagged-union"

132+ , "web-dom"

133+ , "web-events"

134+ , "web-uievents"

135+ ]

136+ }

137+ with spec =

138+ { repo = "https://github.com/purescript-spec/purescript-spec.git"

139+ , version = "master"

140+ , dependencies =

141+ [ "aff"

142+ , "ansi"

143+ , "avar"

144+ , "console"

145+ , "exceptions"

146+ , "foldable-traversable"

147+ , "fork"

148+ , "now"

149+ , "pipes"

150+ , "prelude"

151+ , "strings"

152+ , "transformers"

153+ ]

154+ }

155+ with spec-discovery =

156+ { repo = "https://github.com/purescript-spec/purescript-spec-discovery.git"

157+ , version = "master"

158+ , dependencies =

159+ [ "aff"

160+ , "aff-promise"

161+ , "arrays"

162+ , "console"

163+ , "effect"

164+ , "foldable-traversable"

165+ , "node-fs"

166+ , "prelude"

167+ , "spec"

168+ ]

169+ }

257170 with playwright =

258171 { repo =

259172 "https://github.com/working-group-purescript-es/purescript-playwright.git"

@@ -284,6 +197,29 @@ in upstream

284197 , "transformers"

285198 ]

286199 }

200+ with milkis =

201+ { repo =

202+ "https://github.com/working-group-purescript-es/purescript-milkis.git"

203+ , version = "es-modules"

204+ , dependencies =

205+ [ "aff-promise"

206+ , "arraybuffer-types"

207+ , "foreign-object"

208+ , "prelude"

209+ , "typelevel-prelude"

210+ ]

211+ }

212+ with debug =

213+ { dependencies = [ "prelude", "functions" ]

214+ , repo =

215+ "https://github.com/working-group-purescript-es/purescript-debug.git"

216+ , version = "es-modules"

217+ }

218+ with checked-exceptions =

219+ { dependencies = [ "prelude", "transformers", "variant" ]

220+ , repo = "https://github.com/natefaubion/purescript-checked-exceptions.git"

221+ , version = "v3.1.1"

222+ }

287223 with language-cst-parser =

288224 { dependencies =

289225 [ "arrays"

@@ -304,38 +240,37 @@ in upstream

304240 , repo = "https://github.com/natefaubion/purescript-language-cst-parser.git"

305241 , version = "v0.9.3"

306242 }

307− with plumage =

243+ with stringutils =

308244 { dependencies =

309245 [ "arrays"

310− , "colors"

311− , "console"

312− , "debug"

313− , "effect"

314− , "foldable-traversable"

315− , "foreign"

316− , "foreign-object"

317− , "framer-motion"

246+ , "either"

318247 , "integers"

319− , "literals"

320248 , "maybe"

321− , "nullable"

249+ , "partial"

322250 , "prelude"

323− , "psci-support"

324− , "react-basic"

325− , "react-basic-dom"

326− , "react-basic-emotion"

327− , "react-basic-hooks"

251+ , "strings"

252+ ]

253+ , repo =

254+ "https://github.com/working-group-purescript-es/purescript-stringutils.git"

255+ , version = "es-modules"

256+ }

257+ with routing-duplex =

258+ { dependencies =

259+ [ "arrays"

260+ , "control"

261+ , "either"

262+ , "js-uri"

263+ , "lazy"

264+ , "numbers"

265+ , "prelude"

266+ , "profunctor"

328267 , "record"

329− , "refs"

330− , "tuples"

268+ , "strings"

331269 , "typelevel-prelude"

332− , "unsafe-coerce"

333− , "untagged-union"

334− , "web-dom"

335− , "web-html"

336270 ]

337− , repo = "https://github.com/murmuras-tech/plumage.git"

338− , version = "es-modules"

271+ , repo =

272+ "https://github.com/working-group-purescript-es/purescript-routing-duplex.git"

273+ , version = "v0.15.0-update"

339274 }

340275 with web-router =

341276 { dependencies =

@@ -350,288 +285,270 @@ in upstream

350285 , repo = "https://github.com/robertdp/purescript-web-router.git"

351286 , version = "v0.3.0"

352287 }

353− with postgresql-client =

354− { dependencies =

355− [ "aff"

356− , "argonaut"

357− , "arrays"

358− , "assert"

359− , "bifunctors"

360− , "bytestrings"

288+ with framer-motion.version = "24dc0a89dd65458b768f3731c886f9911898788d"

289+ with visx =

290+ { repo = "https://github.com/i-am-the-slime/purescript-visx.git"

291+ , version = "es-modules"

292+ , dependencies =

293+ [ "arrays"

294+ , "console"

361295 , "datetime"

362− , "decimals"

363− , "dotenv"

296+ , "debug"

364297 , "effect"

365298 , "either"

366− , "enums"

367− , "exceptions"

368299 , "foldable-traversable"

369300 , "foreign"

370− , "foreign-generic"

371301 , "foreign-object"

372− , "identity"

302+ , "functions"

373303 , "integers"

374304 , "js-date"

305+ , "justifill"

375306 , "lists"

376− , "math"

377307 , "maybe"

378308 , "newtype"

379− , "node-process"

380309 , "nullable"

381− , "ordered-collections"

382− , "partial"

383− , "polyform"

384− , "polyform-batteries-core"

385− , "polyform-batteries-env"

310+ , "orders"

386311 , "prelude"

387312 , "psci-support"

388− , "string-parsers"

389− , "strings"

390− , "test-unit"

313+ , "react-basic"

314+ , "react-basic-dom"

315+ , "react-basic-hooks"

316+ , "record"

317+ , "record-extra"

391318 , "transformers"

392319 , "tuples"

393320 , "typelevel-prelude"

394− , "validation"

321+ , "unsafe-coerce"

322+ , "untagged-union"

323+ , "web-dom"

395324 ]

396− , repo =

397− "https://github.com/jordanmartinez/purescript-postgresql-client.git"

398− , version = "3ac9c1eace4fc707c274d065f01c5ec81d201757"

399325 }

400− with polyform =

326+ with graphql-fundeps =

401327 { dependencies =

402− [ "arrays"

403− , "bifunctors"

404− , "control"

328+ [ "aff"

329+ , "affjax"

330+ , "console"

405331 , "effect"

406332 , "either"

407− , "enums"

408− , "functors"

409− , "identity"

410− , "invariant"

411− , "lists"

333+ , "http-methods"

412334 , "maybe"

413− , "newtype"

414− , "parallel"

415− , "partial"

335+ , "media-types"

416336 , "prelude"

417− , "profunctor"

418337 , "psci-support"

419− , "quickcheck"

420− , "quickcheck-laws"

338+ , "simple-json"

339+ , "strings"

340+ ]

341+ , repo = "https://github.com/meeshkan/purescript-graphql-fundeps.git"

342+ , version = "b83fcc13d5f9b1c28baeede35319f34084ec7f3c"

343+ }

344+ with foreign-generic =

345+ { repo =

346+ "https://github.com/working-group-purescript-es/purescript-foreign-generic.git"

347+ , version = "v0.15.0-updates"

348+ , dependencies =

349+ [ "effect"

350+ , "exceptions"

351+ , "foreign"

352+ , "foreign-object"

353+ , "identity"

354+ , "ordered-collections"

421355 , "record"

422− , "transformers"

423− , "tuples"

424− , "typelevel-prelude"

425− , "unsafe-coerce"

426− , "validation"

427− , "variant"

428356 ]

429− , repo = "https://github.com/jordanmartinez/purescript-polyform.git"

430− , version = "updateTov0.14.1"

431357 }

432− with polyform-batteries-core =

358+ with heterogeneous =

433359 { dependencies =

434− [ "arrays"

435− , "decimals"

360+ [ "either", "functors", "prelude", "record", "tuples", "variant" ]

361+ , repo = "https://github.com/natefaubion/purescript-heterogeneous.git"

362+ , version = "v0.5.1"

363+ }

364+ with interpolate =

365+ { dependencies = [ "prelude" ]

366+ , repo = "https://github.com/jordanmartinez/purescript-interpolate.git"

367+ , version = "v3.0.1"

368+ }

369+ with interpolate.version = "patch-1"

370+ with interpolate.repo

371+ = "https://github.com/i-am-the-slime/purescript-interpolate.git"

372+ with justifill =

373+ { dependencies = [ "record", "spec", "typelevel-prelude" ]

374+ , repo = "https://github.com/i-am-the-slime/purescript-justifill.git"

375+ , version = "v0.2.1"

376+ }

377+ with morello =

378+ { dependencies =

379+ [ "console", "debug", "effect", "heterogeneous", "strings", "validation" ]

380+ , repo = "https://github.com/sigma-andex/purescript-morello.git"

381+ , version = "v0.2.0"

382+ }

383+ with react-basic =

384+ { dependencies = [ "prelude", "effect", "record" ]

385+ , repo = "https://github.com/lumihq/purescript-react-basic.git"

386+ , version = "v16.0.0"

387+ }

388+ with react-basic-dom =

389+ { dependencies =

390+ [ "prelude"

391+ , "console"

436392 , "effect"

437− , "enums"

438− , "integers"

439− , "lazy"

440− , "maybe"

441− , "numbers"

442− , "partial"

443− , "polyform"

444− , "prelude"

393+ , "foreign-object"

445394 , "psci-support"

446− , "quickcheck"

447− , "strings"

448− , "test-unit"

449− , "typelevel-prelude"

450− , "validation"

451− , "variant"

395+ , "react-basic"

396+ , "unsafe-coerce"

397+ , "web-dom"

398+ , "web-events"

399+ , "web-file"

400+ , "web-html"

452401 ]

453− , repo =

454− "https://github.com/jordanmartinez/purescript-polyform-validators.git"

455− , version = "updateTov0.14.1"

402+ , repo = "https://github.com/lumihq/purescript-react-basic-dom.git"

403+ , version = "v4.2.0"

456404 }

457− with polyform-batteries-env =

405+ with react-basic-emotion =

458406 { dependencies =

459− [ "arrays"

460− , "identity"

461− , "maybe"

462− , "ordered-collections"

463− , "polyform"

464− , "polyform-batteries-core"

407+ [ "colors"

408+ , "console"

409+ , "effect"

410+ , "foreign"

411+ , "foreign-object"

412+ , "numbers"

465413 , "prelude"

466− , "psci-support"

414+ , "react-basic"

415+ , "react-basic-hooks"

467416 , "typelevel-prelude"

417+ , "unsafe-reference"

468418 ]

469− , repo = "https://github.com/jordanmartinez/batteries-env.git"

470− , version = "updateTov0.14.1"

419+ , repo = "https://github.com/lumihq/purescript-react-basic-emotion.git"

420+ , version = "v6.0.0"

471421 }

472− with selda =

473− { name = "selda"

474− , version = "ae8bf03413e24a53f474a9f7f198b1c7b11bf6ff"

475− , repo = "https://github.com/Kamirus/purescript-selda.git"

476− , dependencies =

422+ with uuid =

423+ { dependencies = [ "effect", "maybe", "foreign-generic", "console", "spec" ]

424+ , repo = "https://github.com/spicydonuts/purescript-uuid.git"

425+ , version = "v8.0.0"

426+ }

427+ with react-basic-hooks =

428+ { dependencies =

477429 [ "aff"

478− , "arrays"

430+ , "aff-promise"

479431 , "bifunctors"

480432 , "console"

433+ , "control"

481434 , "datetime"

482− , "dodo-printer"

483− , "dotenv"

484435 , "effect"

485436 , "either"

486− , "enums"

487437 , "exceptions"

488− , "exists"

489438 , "foldable-traversable"

490− , "foreign"

491− , "foreign-object"

492− , "heterogeneous"

493− , "leibniz"

494− , "lists"

439+ , "functions"

440+ , "indexed-monad"

441+ , "integers"

495442 , "maybe"

496443 , "newtype"

497− , "node-process"

498− , "node-sqlite3"

444+ , "now"

445+ , "nullable"

499446 , "ordered-collections"

500− , "partial"

501− , "polyform"

502− , "polyform-batteries-core"

503− , "polyform-batteries-env"

504− , "postgresql-client"

505447 , "prelude"

506− , "record"

507− , "simple-json"

508− , "strings"

509− , "test-unit"

510− , "transformers"

448+ , "psci-support"

449+ , "react-basic"

450+ , "refs"

511451 , "tuples"

512− , "typelevel-prelude"

452+ , "type-equality"

513453 , "unsafe-coerce"

514− , "validation"

515− , "variant"

454+ , "unsafe-reference"

455+ , "web-html"

516456 ]

457+ , repo = "https://github.com/spicydonuts/purescript-react-basic-hooks.git"

458+ , version = "v7.0.1"

517459 }

518− with framer-motion.version = "es-modules"

519− with visx =

520− { repo = "https://github.com/i-am-the-slime/purescript-visx.git"

521− , version = "es-modules"

522− , dependencies =

523− [ "arrays"

460+ with react-basic.repo

461+ =

462+ "https://github.com/working-group-purescript-es/purescript-react-basic.git"

463+ with react-basic.version = "es-modules"

464+ with react-basic-dom.repo

465+ =

466+ "https://github.com/working-group-purescript-es/purescript-react-basic-dom.git"

467+ with react-basic-dom.version = "es-modules"

468+ with react-basic-hooks.repo

469+ =

470+ "https://github.com/working-group-purescript-es/purescript-react-basic-hooks.git"

471+ with react-basic-hooks.version = "es-modules"

472+ with react-basic-emotion.repo

473+ =

474+ "https://github.com/working-group-purescript-es/purescript-react-basic-emotion.git"

475+ with react-basic-emotion.version = "es-modules"

476+ with literals =

477+ { dependencies =

478+ [ "assert"

479+ , "effect"

480+ , "console"

481+ , "integers"

482+ , "numbers"

483+ , "partial"

484+ , "psci-support"

485+ , "unsafe-coerce"

486+ , "typelevel-prelude"

487+ ]

488+ , repo = "https://github.com/jvliwanag/purescript-literals.git"

489+ , version = "v0.2.0"

490+ }

491+ with literals.repo

492+ =

493+ "https://github.com/working-group-purescript-es/purescript-literals.git"

494+ with literals.version = "es-modules"

495+ with untagged-union =

496+ { dependencies =

497+ [ "assert"

524498 , "console"

525− , "datetime"

526− , "debug"

527499 , "effect"

528− , "either"

529− , "foldable-traversable"

530500 , "foreign"

531501 , "foreign-object"

532− , "functions"

533− , "integers"

534− , "js-date"

535− , "justifill"

536− , "lists"

502+ , "literals"

537503 , "maybe"

538504 , "newtype"

539− , "nullable"

540− , "orders"

541− , "prelude"

542505 , "psci-support"

543− , "react-basic"

544− , "react-basic-dom"

545− , "react-basic-hooks"

546− , "record"

547− , "record-extra"

548− , "transformers"

549506 , "tuples"

550− , "typelevel-prelude"

551507 , "unsafe-coerce"

552− , "untagged-union"

553− , "web-dom"

554508 ]

509+ , repo = "https://github.com/jvliwanag/purescript-untagged-union.git"

510+ , version = "v0.3.0"

511+ }

512+ with untagged-union.repo

513+ =

514+ "https://github.com/working-group-purescript-es/purescript-untagged-union.git"

515+ with untagged-union.version = "es-modules"

516+ with react-testing-library =

517+ { name = "react-testing-library"

518+ , dependencies = [ "react-basic", "react-basic-hooks", "react-basic-dom" ]

519+ , repo =

520+ "https://github.com/i-am-the-slime/purescript-react-testing-library.git"

521+ , version = "main"

555522 }

556− with ry-blocks =

557− { repo = "https://github.com/rowtype-yoga/ry-blocks.git"

558− , version = "d01d028329f434cf903d713f9fa3f940114cfa64"

523+ with record-extra =

524+ { repo =

525+ "https://github.com/working-group-purescript-es/purescript-record-extra.git"

526+ , version = "v0.15.0-update"

559527 , dependencies =

560− [ "aff"

561− , "aff-promise"

562− , "arrays"

563− , "colors"

528+ [ "arrays"

564529 , "console"

565− , "control"

566− , "datetime"

567− , "debug"

568530 , "effect"

569− , "either"

570− , "enums"

571− , "exceptions"

572− , "foldable-traversable"

573− , "foreign"

574− , "foreign-generic"

575− , "foreign-object"

576− , "framer-motion"

577− , "free"

578531 , "functions"

579− , "heterogeneous"

580− , "integers"

581− , "interpolate"

582532 , "lists"

583− , "literals"

584− , "math"

585533 , "maybe"

586− , "newtype"

587− , "nullable"

588− , "numbers"

589− , "ordered-collections"

590− , "partial"

591534 , "prelude"

592− , "profunctor-lenses"

593− , "psci-support"

594− , "react-basic"

595− , "react-basic-dom"

596− , "react-basic-emotion"

597− , "react-basic-hooks"

598− , "react-testing-library"

599535 , "record"

600− , "record-extra"

601− , "routing"

602− , "routing-duplex"

603− , "spec"

604− , "spec-discovery"

605− , "strings"

606− , "tailrec"

607− , "transformers"

608536 , "tuples"

609− , "two-or-more"

610− , "typelevel-peano"

611537 , "typelevel-prelude"

612− , "unsafe-coerce"

613− , "untagged-union"

614− , "web-dom"

615− , "web-events"

616− , "web-html"

617− , "web-uievents"

618538 ]

619539 }

620− with graphql-fundeps =

540+ with variant =

621541 { dependencies =

622− [ "aff"

623− , "affjax"

624− , "console"

625− , "effect"

626− , "either"

627− , "http-methods"

542+ [ "enums"

543+ , "lists"

628544 , "maybe"

629− , "media-types"

545+ , "partial"

630546 , "prelude"

631− , "psci-support"

632− , "simple-json"

633− , "strings"

547+ , "record"

548+ , "tuples"

549+ , "unsafe-coerce"

634550 ]

635− , repo = "https://github.com/meeshkan/purescript-graphql-fundeps.git"

636− , version = "b83fcc13d5f9b1c28baeede35319f34084ec7f3c"

551+ , repo =

552+ "https://github.com/working-group-purescript-es/purescript-variant.git"

553+ , version = "v0.15.0-update"

637554 }

spago.dhall−1

@@ -28,7 +28,6 @@ You can edit this file as you like.

2828 , "interpolate"

2929 , "lists"

3030 , "literals"

31− , "math"

3231 , "maybe"

3332 , "newtype"

3433 , "nullable"

src/Web/DOM/ResizeObserver.purs+9−9

@@ -15,7 +15,7 @@ module Web.DOM.ResizeObserver

1515import Prelude

1616import Effect (Effect)

1717import Web.DOM (Element)

18−import Web.HTML.HTMLElement (DOMRect)

18+import Web.DOM.Element (DOMRect)

1919

2020foreign import data ResizeObserver ∷ Type

2121

@@ -44,17 +44,17 @@ optionsToFFI ContentBox = "content-box"

4444

4545optionsToFFI DevicePixelContentBox = "device-pixel-content-box"

4646

47−foreign import resizeObserver ∷

48− (Array ResizeObserverEntry -> ResizeObserver -> Effect Unit) ->

49− Effect ResizeObserver

47+foreign import resizeObserver

48+ ∷ (Array ResizeObserverEntry -> ResizeObserver -> Effect Unit)

49+ -> Effect ResizeObserver

5050

5151foreign import _observe ∷ ∀ r. Element -> Record r -> ResizeObserver -> Effect Unit

5252

53−observe ∷

54− Element ->

55− ResizeObserverBoxOptions ->

56− ResizeObserver ->

57− Effect Unit

53+observe

54+ ∷ Element

55+ -> ResizeObserverBoxOptions

56+ -> ResizeObserver

57+ -> Effect Unit

5858observe element options = _observe element { box: optionsToFFI options }

5959

6060foreign import unobserve ∷ Element -> ResizeObserver -> Effect Unit

src/Yoga.purs+29−22

@@ -1,7 +1,6 @@

11module Yoga where

33import Data.Function as DF

4−import Data.Symbol (SProxy(..))

54import Prim.Row (class Lacks, class Union)

65import React.Basic.DOM (Props_div, Props_span, Props_button)

76import React.Basic.DOM as R

@@ -9,6 +8,7 @@ import React.Basic.Emotion as Emotion

98import React.Basic.Hooks (JSX, ReactComponent)

109import React.Basic.Hooks as Hooks

1110import Record as Record

11+import Type.Proxy (Proxy(..))

1212import Unsafe.Coerce (unsafeCoerce)

1313

1414div ∷ ∀ attrs attrs_. Union attrs attrs_ Props_div ⇒ ReactComponent (Record attrs)

@@ -20,43 +20,50 @@ span = R.span'

2020button ∷ ∀ attrs attrs_. Union attrs attrs_ Props_button ⇒ ReactComponent (Record attrs)

2121button = R.button'

2222

23−el ∷

24− ∀ props.

25− Lacks "children" props ⇒

26− ReactComponent { children ∷ Array JSX | props } →

27− Record props → Array JSX → JSX

23+el

24+ ∷ ∀ props

25+ . Lacks "children" props

26+ ⇒ ReactComponent { children ∷ Array JSX | props }

27+ → Record props

28+ → Array JSX

29+ → JSX

2830el x props children =

2931 (Hooks.element)

30− x (Record.insert (SProxy ∷ SProxy "children") children props)

32+ x

33+ (Record.insert (Proxy ∷ Proxy "children") children props)

3134

3235infixl 5 el as </

3336

3437infixr 0 DF.apply as />

3538

36−leaf ∷

37− ∀ props.

38− Lacks "children" props ⇒

39− ReactComponent { | props } →

40− Record props → JSX

39+leaf

40+ ∷ ∀ props

41+ . Lacks "children" props

42+ ⇒ ReactComponent { | props }

43+ → Record props

44+ → JSX

4145leaf x props = Hooks.element x props

4246

4347infixl 5 leaf as </>

4448

45−styled ∷

46− ∀ props.

47− Lacks "children" props ⇒

48− ReactComponent { children ∷ Array JSX | props } →

49− { css ∷ Emotion.Style | props } → Array JSX → JSX

49+styled

50+ ∷ ∀ props

51+ . Lacks "children" props

52+ ⇒ ReactComponent { children ∷ Array JSX | props }

53+ → { css ∷ Emotion.Style | props }

54+ → Array JSX

55+ → JSX

5056styled x props children =

5157 (unsafeCoerce Emotion.element ∷ ∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX) x

52− (Record.insert (SProxy ∷ SProxy "children") children props)

58+ (Record.insert (Proxy ∷ Proxy "children") children props)

5359

5460infixl 5 styled as </*

5561

56−styledLeaf ∷

57− ∀ props.

58− ReactComponent { className ∷ String | props } →

59− { className ∷ String, css ∷ Emotion.Style | props } → JSX

62+styledLeaf

63+ ∷ ∀ props

64+ . ReactComponent { className ∷ String | props }

65+ → { className ∷ String, css ∷ Emotion.Style | props }

66+ → JSX

6067styledLeaf = Emotion.element

6168

6269infixl 5 styledLeaf as </*>

src/Yoga/Block/Atom/Input/Story.purs+39−36

@@ -3,7 +3,6 @@ module Yoga.Block.Atom.Input.Story where

33import Prelude

44import Data.Foldable (traverse_)

55import Data.String.NonEmpty.Internal (NonEmptyString(..), nes)

6−import Data.Symbol (SProxy(..))

76import Effect (Effect)

87import Effect.Unsafe (unsafePerformEffect)

98import Foreign.Object as Object

@@ -23,19 +22,19 @@ import Yoga.Block.Atom.Input.View (passwordIcon)

2322import Yoga.Block.Container.Style (colour)

2423import Yoga.Block.Container.Style as Styles

2524

26−default ∷

27− { decorators ∷ Array (Effect JSX -> JSX)

28− , title ∷ String

29− }

25+default

26+ ∷ { decorators ∷ Array (Effect JSX -> JSX)

27+ , title ∷ String

28+ }

3029default =

3130 { title: "Atom/Input"

3231 , decorators:

33− [ \storyFn ->

34− R.div_

35− [ element E.global { styles: Styles.global }

36− , unsafePerformEffect storyFn

37− ]

38− ]

32+ [ \storyFn ->

33+ R.div_

34+ [ element E.global { styles: Styles.global }

35+ , unsafePerformEffect storyFn

36+ ]

37+ ]

3938 }

4039

4140input ∷ Effect JSX

@@ -46,17 +45,17 @@ input = do

4645 [ R.h1_ [ R.text "Input Examples" ]

4746 , R.h3_ [ R.text "With a label" ]

4847 , Block.cluster {}

49− [ element Input.component { label: nes (SProxy ∷ _ "This has a label"), value: "And text", onChange: handler_ mempty }

50− , element Input.component { label: nes (SProxy ∷ _ "This has a label"), value: "", onChange: handler_ mempty }

51− , element Input.component { label: nes (SProxy ∷ _ "This has a label"), placeholder: "A very long placeholder, too..." }

52− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" }

53− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), trailing: R.text "🤫" }

54− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "🌭" }

48+ [ element Input.component { label: nes (Proxy ∷ _ "This has a label"), value: "And text", onChange: handler_ mempty }

49+ , element Input.component { label: nes (Proxy ∷ _ "This has a label"), value: "", onChange: handler_ mempty }

50+ , element Input.component { label: nes (Proxy ∷ _ "This has a label"), placeholder: "A very long placeholder, too..." }

51+ , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" }

52+ , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), trailing: R.text "🤫" }

53+ , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🌭" }

5554 , Block.box

5655 { background: colour.backgroundLayer3

5756 }

5857 [ element Input.component

59− { label: nes (SProxy ∷ _ "Different background")

58+ { label: nes (Proxy ∷ _ "Different background")

6059 , leading: R.text "🌭"

6160 , forceSmallLabel: true

6261 }

@@ -65,36 +64,37 @@ input = do

6564 { background: colour.backgroundLayer1

6665 }

6766 [ element Input.component

68− { label: nes (SProxy ∷ _ "Another background")

67+ { label: nes (Proxy ∷ _ "Another background")

6968 , background: colour.backgroundLayer3

7069 , textColour: "blue"

7170 , placeholderColour: colour.backgroundLayer4

7271 , leading: R.text "🌭"

7372 }

7473 ]

75− , element Input.component { label: nes (SProxy ∷ _ "Pig nose"), leading: R.text "⭐", trailing: R.text "🔮" }

74+ , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "⭐", trailing: R.text "🔮" }

7675 ]

7776 , R.h2_ [ R.text "Generic Input" ]

7877 , Input.component </> { value: "A Generic Input", onChange: handler_ mempty }

7978 , R.h2_ [ R.text "Validation on text Input" ]

80− , element Input.component { type: HTMLInput.Text, label: nes (SProxy ∷ _ "Is undefined a function?"), value: "Yes, why not?", onChange: handler_ mempty, _aria: Object.singleton "invalid" "true" }

81− , element Input.component { type: HTMLInput.Text, label: nes (SProxy ∷ _ "What's the type of null?"), value: "object", onChange: handler_ mempty, _aria: Object.singleton "invalid" "false" }

79+ , element Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "Is undefined a function?"), value: "Yes, why not?", onChange: handler_ mempty, _aria: Object.singleton "invalid" "true" }

80+ , element Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "What's the type of null?"), value: "object", onChange: handler_ mempty, _aria: Object.singleton "invalid" "false" }

8281 , R.h2_ [ R.text "Required fields" ]

8382 , element Input.component

8483 { type: HTMLInput.Text

85− , label: nes (SProxy ∷ _ "I am so important")

84+ , label: nes (Proxy ∷ _ "I am so important")

8685 , _aria: Object.singleton "required" "true"

8786 }

8887 , R.h2_ [ R.text "Overflowing label" ]

8988 , element Input.component

9089 { type: HTMLInput.Text

91− , label: nes (SProxy ∷ _ "Is undefined really a function?")

90+ , label: nes (Proxy ∷ _ "Is undefined really a function?")

9291 }

93− , Input.component </> { type: HTMLInput.Text, label: nes (SProxy ∷ _ "Now this is really just excessively long and you should avoid it.") }

92+ , Input.component </> { type: HTMLInput.Text, label: nes (Proxy ∷ _ "Now this is really just excessively long and you should avoid it.") }

9493 , Input.component

95− </> { css: E.css { width: E.str "500px" }

94+ </>

95+ { css: E.css { width: E.str "500px" }

9696 , type: HTMLInput.Text

97− , label: nes (SProxy ∷ _ "You can avoid this problem by setting a custom width")

97+ , label: nes (Proxy ∷ _ "You can avoid this problem by setting a custom width")

9898 }

9999 , R.h2_ [ R.text "Password" ]

100100 , passComponent </> {}

@@ -126,12 +126,15 @@ input = do

126126 hidePassword /\ modifyHidePassword <- React.useState true

127127 pure

128128 $ Input.component

129− </> { type: if hidePassword then HTMLInput.Password else HTMLInput.Text

130− , trailing:

131− Block.tooltip

132− </> { target: passwordIcon </> { hidePassword, modifyHidePassword }, theTip: R.text if hidePassword then "Show Password" else "Hide Password"

133− }

134− , value: password

135− , onChange: handler targetValue (traverse_ setPassword)

136− , label: nes (Proxy ∷ _ "Password")

137− }

129+ </>

130+ { type: if hidePassword then HTMLInput.Password else HTMLInput.Text

131+ , trailing:

132+ Block.tooltip

133+ </>

134+ { target: passwordIcon </> { hidePassword, modifyHidePassword }

135+ , theTip: R.text if hidePassword then "Show Password" else "Hide Password"

136+ }

137+ , value: password

138+ , onChange: handler targetValue (traverse_ setPassword)

139+ , label: nes (Proxy ∷ _ "Password")

140+ }

src/Yoga/Block/Atom/Segmented/View.purs+39−32

@@ -4,6 +4,7 @@ import Yoga.Prelude.View

55import Data.Array as A

66import Data.Newtype (wrap)

7+import Data.Ord (abs)

78import Data.Time.Duration (Milliseconds(..))

89import Data.Traversable (traverse)

910import Data.TwoOrMore (TwoOrMore)

@@ -11,7 +12,6 @@ import Data.TwoOrMore as TwoOrMore

1112import Effect.Aff (delay)

1213import Effect.Unsafe (unsafePerformEffect)

1314import Foreign.Object as Object

14−import Math as Math

1515import React.Basic.DOM (css)

1616import React.Basic.DOM as R

1717import React.Basic.Emotion as E

@@ -49,12 +49,12 @@ component =

4949 let

5050 maxIndex = TwoOrMore.length buttonContents - 1

5151 updateIndex idx = do

52− let

52+ let

5353 newItem = fromMaybe'

54− (\_ -> TwoOrMore.head buttonContents)

55− (buttonContents TwoOrMore.!! idx)

54+ (\_ -> TwoOrMore.head buttonContents)

55+ (buttonContents TwoOrMore.!! idx)

5656 updateActiveItem newItem idx

57−

57+

5858 updateTo toIndex = do

5959 for_ itemRefs do blurAtIndex activeIndex

6060 updateIndex toIndex

@@ -73,8 +73,8 @@ component =

7373 -- Ensure redraw on window resize

7474 newWindowSize <- useResize

7575 useAff newWindowSize do

76− let δw = Math.abs (newWindowSize.innerWidth - windowSize.innerWidth)

77− let δh = Math.abs (newWindowSize.innerHeight - windowSize.innerHeight)

76+ let δw = abs (newWindowSize.innerWidth - windowSize.innerWidth)

77+ let δh = abs (newWindowSize.innerHeight - windowSize.innerHeight)

7878 delay

7979 if δw < 10.0 || δh < 10.0 then

8080 100.0 # Milliseconds

@@ -87,14 +87,17 @@ component =

8787 let

8888 children ∷ Array JSX

8989 children = refsAndContents <#> mapWithIndex contentToChild # maybe mempty TwoOrMore.toArray

90+

9091 refsAndContents ∷ Maybe (TwoOrMore (Item /\ Ref (Nullable Node)))

9192 refsAndContents = TwoOrMore.zip buttonContents <$> itemRefs

93+

9294 contentToChild ∷ Int -> (Item /\ Ref (Nullable Node)) -> JSX

9395 contentToChild idx ({ id, value } /\ ref) = do

9496 let isLast = idx + 1 == TwoOrMore.length buttonContents

9597 let isFirst = idx == 0

9698 button

97− </* { key: show idx

99+ </*

100+ { key: show idx

98101 , ref

99102 , css: Style.button { isFirst, isLast }

100103 , className: "ry-segmented-button"

@@ -104,40 +107,44 @@ component =

104107 , tabIndex: if idx == activeIndex then 0 else -1

105108 , id

106109 , _aria:

107− Object.fromHomogeneous

108− { selected: show (idx == activeIndex)

109− }

110+ Object.fromHomogeneous

111+ { selected: show (idx == activeIndex)

112+ }

110113 }

111− /> [ span

112− </* { className: "ry-segmented-button__content"

114+ />

115+ [ span

116+ </*

117+ { className: "ry-segmented-button__content"

113118 , css: Style.buttonContent { isFirst, isLast }

114119 , tabIndex: if idx == activeIndex then 0 else -1

115120 }

116− /> [ R.text value

121+ />

122+ [ R.text value

117123 ]

118124 ]

119125 pure

120126 $ E.element R.div'

121− $ { css: Style.cluster

127+ $

128+ { css: Style.cluster

122129 , className: "ry-segmented-container"

123130 , children:

124− [ E.element R.div'

125− { className: "ry-segmented"

126− , css: Style.segmented

127− , role: "tablist"

128− , children:

129− itemRefs

130− # foldMap \activeItemRefs ->

131− React.element ActiveIndicator.component

132− { activeItemRefs

133− , activeItemIndex: activeIndex

134− , buttonContents

135− , updateActiveItem

136− , windowSize

137− }

138− A.: children

139− }

140− ]

131+ [ E.element R.div'

132+ { className: "ry-segmented"

133+ , css: Style.segmented

134+ , role: "tablist"

135+ , children:

136+ itemRefs

137+ # foldMap \activeItemRefs ->

138+ React.element ActiveIndicator.component

139+ { activeItemRefs

140+ , activeItemIndex: activeIndex

141+ , buttonContents

142+ , updateActiveItem

143+ , windowSize

144+ }

145+ A.: children

146+ }

147+ ]

141148 }

142149

143150getHTMLElementAtIndex ∷ Int -> TwoOrMore (NodeRef) -> Effect (Maybe HTMLElement)

src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs+3−4

@@ -2,11 +2,10 @@ module Yoga.Block.Atom.Segmented.View.ActiveIndicator (Props, component) where

33import Yoga.Prelude.View

5−import Control.MonadZero as MZ

5+import Control.Alternative as Alternative

66import Data.Traversable (traverse)

77import Data.TwoOrMore (TwoOrMore)

88import Data.TwoOrMore as TwoOrMore

9−import Effect.Class.Console as Console

109import Effect.Unsafe (unsafePerformEffect)

1110import Foreign.Object as Object

1211import Framer.Motion (VariantLabel)

@@ -178,8 +177,8 @@ findOverlapping activeIndex styles x =

178177 let fst = TwoOrMore.head styles

179178 let lst = TwoOrMore.last styles

180179 let inside e = (e.left < x) && (e.left + e.width) >= x

181− let tooFarLeft = MZ.guard (x <= fst.left + fst.width) $> 0

182− let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1

180+ let tooFarLeft = Alternative.guard (x <= fst.left + fst.width) $> 0

181+ let tooFarRight = Alternative.guard (x >= lst.left) $> TwoOrMore.length styles - 1

183182 TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight

184183

185184handleDrag

src/Yoga/Block/Hook/UseResize.purs+10−9

@@ -1,16 +1,17 @@

11module Yoga.Block.Hook.UseResize where

33import Prelude

45import Data.Foldable (for_)

56import Data.Int (toNumber)

67import Data.Maybe (Maybe(..))

78import Data.Newtype (class Newtype)

9+import Data.Ord (abs)

810import Data.Time.Duration (class Duration)

911import Data.Time.Duration as Milliseconds

1012import Effect (Effect)

1113import Effect.Aff (Aff, Fiber, delay, error, killFiber, launchAff, launchAff_)

1214import Effect.Class (liftEffect)

13−import Math as Math

1415import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useLayoutEffectOnce, (/\))

1516import React.Basic.Hooks as React

1617import Web.Event.Event (EventType(..))

@@ -65,12 +66,12 @@ newtype UseOnResize hooks = UseOnResize

6566

6667derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _

6768

68−useOnResize ∷

69− ∀ d.

70− Duration d =>

71− d ->

72− ({ innerWidth ∷ Number, innerHeight ∷ Number, deltaWidth ∷ Number, deltaHeight ∷ Number } -> Effect Unit) ->

73− Hook UseOnResize Unit

69+useOnResize

70+ ∷ ∀ d

71+ . Duration d

72+ => d

73+ -> ({ innerWidth ∷ Number, innerHeight ∷ Number, deltaWidth ∷ Number, deltaHeight ∷ Number } -> Effect Unit)

74+ -> Hook UseOnResize Unit

7475useOnResize debounceBy callback =

7576 coerceHook React.do

7677 mbFiber /\ setFiber <- React.useState' Nothing

@@ -87,8 +88,8 @@ useOnResize debounceBy callback =

8788 for_ mbFiber (killFiber (error "Fiber cancelled"))

8889 delay (Milliseconds.fromDuration debounceBy)

8990 let { innerWidth, innerHeight } = dimensions

90− let deltaWidth = Math.abs (size.innerWidth - innerWidth)

91− let deltaHeight = Math.abs (size.innerHeight - innerWidth)

91+ let deltaWidth = abs (size.innerWidth - innerWidth)

92+ let deltaHeight = abs (size.innerHeight - innerWidth)

9293 setSize dimensions # liftEffect

9394 callback { innerWidth, innerHeight, deltaWidth, deltaHeight } # liftEffect

9495 fiber ∷ Fiber _ <- launchAff aff

src/Yoga/Block/Internal.purs+6−6

@@ -64,16 +64,16 @@ import React.Basic.Emotion as E

6464import React.Basic.Events (EventHandler)

6565import React.Basic.Hooks (JSX, ReactComponent, Ref, Render, readRefMaybe)

6666import Record.Extra (class Keys, keys)

67−import Type.Data.Row (RProxy(..))

67+import Type.Proxy (Proxy(..))

6868import Unsafe.Coerce (unsafeCoerce)

6969import Untagged.Union (UndefinedOr, uorToMaybe)

7070import Web.DOM (Element, Node)

71−import Web.DOM.Element (scrollHeight, scrollWidth)

71+import Web.DOM.Element (scrollHeight, scrollWidth, DOMRect, getBoundingClientRect)

7272import Web.DOM.Element as Element

7373import Web.DOM.NonElementParentNode (getElementById)

7474import Web.HTML (window)

7575import Web.HTML.HTMLDocument as HTMLDocument

76−import Web.HTML.HTMLElement (DOMRect, HTMLElement, focus, getBoundingClientRect, offsetHeight, offsetWidth)

76+import Web.HTML.HTMLElement (HTMLElement, focus, offsetHeight, offsetWidth)

7777import Web.HTML.HTMLElement as HTMLElement

7878import Web.HTML.Window (document)

7979import Yoga.Block.Internal.CSS (_0)

@@ -113,8 +113,8 @@ findElementByIdInDocument id = do

113113

114114getBoundingBoxFromRef ∷ NodeRef -> Effect (Maybe DOMRect)

115115getBoundingBoxFromRef itemRef = do

116− htmlElem <- getHTMLElementFromRef itemRef

117− for htmlElem getBoundingClientRect

116+ elem <- getElementFromRef itemRef

117+ for elem getBoundingClientRect

118118

119119getOffsetWidthFromRef ∷ NodeRef -> Effect (Maybe Number)

120120getOffsetWidthFromRef itemRef = do

@@ -221,7 +221,7 @@ pickDefined

221221 -> { ref ∷ Ref (Nullable Node) | b }

222222pickDefined ref = runFn3 pickDefinedFn ref ks

223223 where

224− ks = Array.fromFoldable $ keys (RProxy ∷ RProxy b)

224+ ks = Array.fromFoldable $ keys (Proxy ∷ Proxy b)

225225

226226emotionInput_

227227 ∷ ∀ props props_

src/Yoga/Block/Internal/OptionalProp.purs+4−2

@@ -1,16 +1,18 @@

11module Yoga.Block.Internal.OptionalProp where

33import Prelude

45import Control.Alt (class Alt, (<|>))

56import Data.Foldable (class Foldable, foldMap, foldl, foldr, for_)

67import Data.Maybe (Maybe(..), maybe)

78import Data.Newtype (class Newtype)

8−import Data.Symbol (class IsSymbol, SProxy, reflectSymbol)

9+import Data.Symbol (class IsSymbol, reflectSymbol)

910import Effect.Uncurried (mkEffectFn1, runEffectFn1)

1011import Prim.Row (class Cons)

1112import React.Basic.Events (EventHandler)

1213import Record (set)

1314import Record.Unsafe (unsafeDelete)

15+import Type.Proxy (Proxy(..))

1416import Unsafe.Coerce (unsafeCoerce)

1517import Untagged.Castable (class Castable, cast)

1618import Untagged.Union (UndefinedOr, defined, fromUndefinedOr, maybeToUor, uorToMaybe)

@@ -24,7 +26,7 @@ setOrDelete

2426 ∷ ∀ r a rNoA key

2527 . IsSymbol key

2628 => Cons key a rNoA r

27− => SProxy key

29+ => Proxy key

2830 -> OptionalProp a

2931 -> { | r }

3032 -> { | r }

src/Yoga/Block/Molecule/Sheet/View.purs+67−63

@@ -2,11 +2,11 @@ module Yoga.Block.Molecule.Sheet.View (component, Props) where

33import Yoga.Prelude.View

44import Data.Int as Int

5+import Data.Number (pow)

56import Data.Nullable as Nullable

67import Effect.Class.Console (log)

78import Effect.Unsafe (unsafePerformEffect)

89import Framer.Motion as Motion

9−import Math as Math

1010import MotionValue (useMotionValue)

1111import MotionValue as MotionValue

1212import React.Basic.DOM (createPortal, css)

@@ -41,7 +41,8 @@ component =

4141 toRender ∷ JSX

4242 toRender =

4343 R.div' </ {}

44− /> [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

44+ />

45+ [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

4546 , element window { onDismiss, content, isOpen }

4647 ]

4748 pure (createPortal toRender target)

@@ -51,7 +52,8 @@ clickaway =

5152 unsafePerformEffect

5253 $ reactComponent "Sheet Clickaway" \{ theRef, onDismiss } -> React.do

5354 pure $ Emotion.elementKeyed Motion.div

54− $ { key: "ry-modal-clickaway"

55+ $

56+ { key: "ry-modal-clickaway"

5557 , onClick: handler_ onDismiss

5658 , className: "ry-modal-clickaway"

5759 , css: Style.clickaway

@@ -76,6 +78,7 @@ window =

7678 let

7779 getWindowHeight = do

7880 HTML.window >>= innerHeight <#> Int.toNumber

81+

7982 getMaxHeight ∷ Effect Number

8083 getMaxHeight = do

8184 wh <- getWindowHeight

@@ -88,82 +91,83 @@ window =

8891 pure

8992 $ Motion.animatePresence

9093 </ {}

91− /> [ guard isOpen $ Motion.div

92− </* { className: "ry-sheet-background"

94+ />

95+ [ guard isOpen $ Motion.div

96+ </*

97+ { className: "ry-sheet-background"

9398 , css: Style.sheet

9499 , layout: Motion.layout true

95100 , style: css { top }

96101 , ref

97102 , initial: Motion.initial $ css { y: "100%" }

98103 , animate:

99− Motion.animate

100− $ css

101− { y: "0%"

102− , transition:

103− { type: "spring"

104− , stiffness: 1200.0

105− , damping: 90.0

104+ Motion.animate

105+ $ css

106+ { y: "0%"

107+ , transition:

108+ { type: "spring"

109+ , stiffness: 1200.0

110+ , damping: 90.0

111+ }

106112 }

107− }

108113 , exit: Motion.exit $ css { top: "100%" }

109114 , onPanStart:

110− Motion.onPanStart \_ _ -> do

111− maybeRunningAnimation <- React.readRef animationRef

112− for_ maybeRunningAnimation MotionValue.stopAnimation

113− React.writeRef animationRef Nothing

115+ Motion.onPanStart \_ _ -> do

116+ maybeRunningAnimation <- React.readRef animationRef

117+ for_ maybeRunningAnimation MotionValue.stopAnimation

118+ React.writeRef animationRef Nothing

114119 , onPan:

115− Motion.onPan \_ pi -> do

116− oldY <- MotionValue.get top

117− maxHeight <- getMaxHeight

118− React.writeRef velocityRef pi.velocity.y

119− let

120− newNaiveValue = pi.delta.y + oldY

121− newY =

122− if (newNaiveValue < maxHeight) && (pi.delta.y < zero) then

123− negate (Math.pow (negate pi.delta.y) 0.33) + oldY

124− else

125− if (newNaiveValue < maxHeight) && (pi.delta.y > zero) then

126− (Math.pow (pi.delta.y) 0.33) + oldY

120+ Motion.onPan \_ pi -> do

121+ oldY <- MotionValue.get top

122+ maxHeight <- getMaxHeight

123+ React.writeRef velocityRef pi.velocity.y

124+ let

125+ newNaiveValue = pi.delta.y + oldY

126+ newY =

127+ if (newNaiveValue < maxHeight) && (pi.delta.y < zero) then

128+ negate (pow (negate pi.delta.y) 0.33) + oldY

129+ else if (newNaiveValue < maxHeight) && (pi.delta.y > zero) then

130+ (pow (pi.delta.y) 0.33) + oldY

127131 else

128132 newNaiveValue

129− MotionValue.set newY top

133+ MotionValue.set newY top

130134 , onPanEnd:

131− Motion.onPanEnd \_ pi -> do

132− velocity <- React.readRef velocityRef

133− yValue <- MotionValue.get top

134− maxHeight <- getMaxHeight

135− windowHeight <- getWindowHeight

136− let percentPosition = ((yValue - maxHeight) / (windowHeight - maxHeight))

137− let

138− target =

139− if percentPosition > 0.7 then

140− windowHeight

141− else

142− if percentPosition < 0.2 then

135+ Motion.onPanEnd \_ pi -> do

136+ velocity <- React.readRef velocityRef

137+ yValue <- MotionValue.get top

138+ maxHeight <- getMaxHeight

139+ windowHeight <- getWindowHeight

140+ let percentPosition = ((yValue - maxHeight) / (windowHeight - maxHeight))

141+ let

142+ target =

143+ if percentPosition > 0.7 then

144+ windowHeight

145+ else if percentPosition < 0.2 then

143146 maxHeight

147+ else if velocity > 70.0 then

148+ windowHeight

144149 else

145− if velocity > 70.0 then

146− windowHeight

147− else

148− maxHeight

149− animation <-

150− MotionValue.animate target

151− { type: "spring"

152− , velocity: pi.velocity.y

153− , stiffness: 1200.0

154− , damping: 90.0

155− , onComplete:

156− do

157− log "complete"

158− React.writeRef animationRef Nothing

159− when (target == windowHeight) do

160− onDismiss

161− }

162− top

163− React.writeRef animationRef (Just animation)

150+ maxHeight

151+ animation <-

152+ MotionValue.animate target

153+ { type: "spring"

154+ , velocity: pi.velocity.y

155+ , stiffness: 1200.0

156+ , damping: 90.0

157+ , onComplete:

158+ do

159+ log "complete"

160+ React.writeRef animationRef Nothing

161+ when (target == windowHeight) do

162+ onDismiss

163+ }

164+ top

165+ React.writeRef animationRef (Just animation)

164166 }

165− /> [ R.div'

166− </* { ref: contentRef

167+ />

168+ [ R.div'

169+ </*

170+ { ref: contentRef

167171 , css: Style.sheetContent

168172 , className: "ry-sheet-content"

169173 }

src/Yoga/Block/Organism/Form.purs+1−1

@@ -392,7 +392,7 @@ indent label required editor =

392392 $ Node

393393 { label: R.text label

394394 , key: Nothing

395− , required: required

395+ , required

396396 , validationError: Nothing

397397 , children: edit k

398398 }

src/Yoga/Block/Organism/Form/Internal.purs+68−66

@@ -2,7 +2,9 @@

22module Yoga.Block.Organism.Form.Internal where

44import Yoga.Prelude.View

5−import Control.MonadZero (class Alt, class Alternative, class Plus)

6+import Control.Alt (class Alt)

7+import Control.Alternative (class Alternative, class Plus)

68import Data.Array as Array

79import Data.Either (either)

810import Data.Newtype (class Newtype, un)

@@ -12,21 +14,21 @@ import Yoga.Block.Organism.Form.Types (RequiredField)

1214

1315data Tree

1416 = Child

15− { key ∷ Maybe String

16− , child ∷ JSX

17− }

17+ { key ∷ Maybe String

18+ , child ∷ JSX

19+ }

1820 | Wrapper

19− { key ∷ Maybe String

20− , wrap ∷ Array JSX -> JSX

21− , children ∷ Forest

22− }

21+ { key ∷ Maybe String

22+ , wrap ∷ Array JSX -> JSX

23+ , children ∷ Forest

24+ }

2325 | Node

24− { label ∷ JSX

25− , key ∷ Maybe String

26− , required ∷ RequiredField

27− , validationError ∷ Maybe String

28− , children ∷ Forest

29− }

26+ { label ∷ JSX

27+ , key ∷ Maybe String

28+ , required ∷ RequiredField

29+ , validationError ∷ Maybe String

30+ , children ∷ Forest

31+ }

3032

3133type Forest =

3234 Array Tree

@@ -60,11 +62,11 @@ pruneTree = case _ of

6062-- | An applicative functor which can be used to build forms.

6163-- | Forms can be turned into components using the `build` function.

6264newtype FormBuilder' ui props unvalidated result = FormBuilder

63− ( props {- ^ additional props -} ->

64− unvalidated {- ^ the current value -} ->

65− { edit ∷ ((unvalidated -> unvalidated) -> Effect Unit) -> ui

66− , validate ∷ Maybe result

67− }

65+ ( props {- ^ additional props -}

66+ -> unvalidated {- ^ the current value -}

67+ -> { edit ∷ ((unvalidated -> unvalidated) -> Effect Unit) -> ui

68+ , validate ∷ Maybe result

69+ }

6870 )

6971

7072type FormBuilder props unvalidated result =

@@ -94,13 +96,13 @@ parallel key (SeqFormBuilder (FormBuilder f)) =

9496 FormBuilder \props value -> do

9597 let { edit, validate } = f props value

9698 { edit:

97− \onChange ->

98− [ Wrapper

99− { key: Just key

100− , wrap: keyed key <<< fragment

101− , children: edit onChange

102− }

103− ]

99+ \onChange ->

100+ [ Wrapper

101+ { key: Just key

102+ , wrap: keyed key <<< fragment

103+ , children: edit onChange

104+ }

105+ ]

104106 , validate: validate

105107 }

106108

@@ -110,13 +112,13 @@ sequential key (FormBuilder f) =

110112 $ FormBuilder \props value -> do

111113 let { edit, validate } = f props value

112114 { edit:

113− \onChange ->

114− [ Wrapper

115− { key: Just key

116− , wrap: keyed key <<< fragment

117− , children: edit onChange

118− }

119− ]

115+ \onChange ->

116+ [ Wrapper

117+ { key: Just key

118+ , wrap: keyed key <<< fragment

119+ , children: edit onChange

120+ }

121+ ]

120122 , validate

121123 }

122124

@@ -174,37 +176,37 @@ instance alternativeSeqFormBuilder ∷ Monoid ui => Alternative (SeqFormBuilder'

174176

175177-- | Create a `FormBuilder` from a function which produces a form

176178-- | element as `JSX` and a validated result.

177−formBuilder ∷

178− ∀ props unvalidated a.

179− ( props ->

180− unvalidated ->

181− { edit ∷ ((unvalidated -> unvalidated) -> Effect Unit) -> JSX

182− , validate ∷ Maybe a

183− }

184− ) ->

185− FormBuilder props unvalidated a

179+formBuilder

180+ ∷ ∀ props unvalidated a

181+ . ( props

182+ -> unvalidated

183+ -> { edit ∷ ((unvalidated -> unvalidated) -> Effect Unit) -> JSX

184+ , validate ∷ Maybe a

185+ }

186+ )

187+ -> FormBuilder props unvalidated a

186188formBuilder f =

187189 FormBuilder \props value ->

188190 let

189191 { edit, validate } = f props value

190192 in

191193 { edit:

192− \onChange ->

193− [ Child

194− { key: Nothing

195− , child: edit onChange

196− }

197− ]

194+ \onChange ->

195+ [ Child

196+ { key: Nothing

197+ , child: edit onChange

198+ }

199+ ]

198200 , validate: validate

199201 }

200202

201203-- | The simplest way to create a `FormBuilder`. Create a `FormBuilder`

202204-- | provided a function that, given the current value and a change callback,

203205-- | renders a form element as `JSX`.

204−formBuilder_ ∷

205− ∀ props a.

206− (props -> a -> (a -> Effect Unit) -> JSX) ->

207− FormBuilder props a a

206+formBuilder_

207+ ∷ ∀ props a

208+ . (props -> a -> (a -> Effect Unit) -> JSX)

209+ -> FormBuilder props a a

208210formBuilder_ f =

209211 formBuilder \props value ->

210212 { edit: f props value <<< (_ <<< const)

@@ -222,29 +224,29 @@ invalidate (FormBuilder f) =

222224

223225-- | Revalidate the form, in order to display error messages or create

224226-- | a validated result.

225−revalidate ∷

226− ∀ ui props unvalidated result.

227− FormBuilder' ui props unvalidated result ->

228− props ->

229− unvalidated ->

230− Maybe result

227+revalidate

228+ ∷ ∀ ui props unvalidated result

229+ . FormBuilder' ui props unvalidated result

230+ -> props

231+ -> unvalidated

232+ -> Maybe result

231233revalidate editor props value = (un FormBuilder editor props value).validate

232234

233235-- | Listens for changes in a form's value and allows for performing

234236-- | asynchronous effects and additional value changes.

235−listen ∷

236− ∀ ui props unvalidated result.

237− (unvalidated -> Aff (unvalidated -> unvalidated)) ->

238− FormBuilder' ui props unvalidated result ->

239− FormBuilder' ui props unvalidated result

237+listen

238+ ∷ ∀ ui props unvalidated result

239+ . (unvalidated -> Aff (unvalidated -> unvalidated))

240+ -> FormBuilder' ui props unvalidated result

241+ -> FormBuilder' ui props unvalidated result

240242listen cb (FormBuilder f) =

241243 FormBuilder \props unvalidated ->

242244 let

243245 { edit, validate } = f props unvalidated

244246 in

245247 { edit:

246− \onChange ->

247− edit \update ->

248− runAff_ (either throwException onChange) (map (_ <<< update) (cb (update unvalidated)))

248+ \onChange ->

249+ edit \update ->

250+ runAff_ (either throwException onChange) (map (_ <<< update) (cb (update unvalidated)))

249251 , validate

250252 }

src/Yoga/Block/Organism/Form/Validation.purs+111−95

@@ -130,30 +130,36 @@ validNumber name = validNumber' (name <> " must be a number")

130130validNumber' ∷ String -> Validator String Number

131131validNumber' msg = note msg <<< Number.fromString

132132

133−-- | A `Validator`, which ensures a number is inclusively between two positive

133+-- | A `Validator`, which ensures a number is inclusively between two positive

134134-- | integers

135−validNatBetween ∷

136− ∀ minStr maxStr min max subtracted.

137− Peano.ParseNat minStr min =>

138− Peano.ParseNat maxStr max =>

139− Peano.IsNat min =>

140− Peano.IsNat max =>

141− Peano.IsNat subtracted =>

142− Peano.SumInt (Peano.Pos max) (Peano.Neg min) (Peano.Pos subtracted) =>

143− Proxy minStr -> Proxy maxStr -> String -> Validator String Int

135+validNatBetween

136+ ∷ ∀ minStr maxStr min max subtracted

137+ . Peano.ParseNat minStr min

138+ => Peano.ParseNat maxStr max

139+ => Peano.IsNat min

140+ => Peano.IsNat max

141+ => Peano.IsNat subtracted

142+ => Peano.SumInt (Peano.Pos max) (Peano.Neg min) (Peano.Pos subtracted)

143+ => Proxy minStr

144+ -> Proxy maxStr

145+ -> String

146+ -> Validator String Int

144147validNatBetween minProxy maxProxy name = do

145148 validNatBetween' minProxy maxProxy \min max ->

146149 name <> " must be between " <> show min <> " and " <> show max

147150

148−validNatBetween' ∷

149− ∀ minSymbol maxSymbol min max subtracted.

150− Peano.ParseNat minSymbol min =>

151− Peano.ParseNat maxSymbol max =>

152− Peano.IsNat min =>

153− Peano.IsNat max =>

154− Peano.IsNat subtracted =>

155− Peano.SumInt (Peano.Pos max) (Peano.Neg min) (Peano.Pos subtracted) =>

156− Proxy minSymbol -> Proxy maxSymbol -> (Int -> Int -> String) -> Validator String Int

151+validNatBetween'

152+ ∷ ∀ minSymbol maxSymbol min max subtracted

153+ . Peano.ParseNat minSymbol min

154+ => Peano.ParseNat maxSymbol max

155+ => Peano.IsNat min

156+ => Peano.IsNat max

157+ => Peano.IsNat subtracted

158+ => Peano.SumInt (Peano.Pos max) (Peano.Neg min) (Peano.Pos subtracted)

159+ => Proxy minSymbol

160+ -> Proxy maxSymbol

161+ -> (Int -> Int -> String)

162+ -> Validator String Int

157163validNatBetween' minSymbolProxy maxSymbolProxy msg rawString = case Int.fromString rawString of

158164 Just parseableInt

159165 | between minInt maxInt parseableInt -> Right parseableInt

@@ -259,20 +265,20 @@ _Modified =

259265

260266-- | Sets all `Validated` fields in a record to `Fresh`, hiding all validation

261267-- | messages.

262−setFresh ∷

263− ∀ value.

264− Mapping ModifyValidated value value =>

265− value ->

266− value

268+setFresh

269+ ∷ ∀ value

270+ . Mapping ModifyValidated value value

271+ => value

272+ -> value

267273setFresh = mapping (ModifyValidated (Fresh <<< view _Validated))

268274

269275-- | Sets all `Validated` fields in a record to `Modified`, showing all

270276-- | validation messages.

271−setModified ∷

272− ∀ value.

273− Mapping ModifyValidated value value =>

274− value ->

275− value

277+setModified

278+ ∷ ∀ value

279+ . Mapping ModifyValidated value value

280+ => value

281+ -> value

276282setModified = mapping (ModifyValidated (Modified <<< view _Validated))

277283

278284-- | Internal utility type for modifying the validated state of fields in

@@ -308,7 +314,9 @@ class CustomModifyValidated a where

308314instance modifyValidated ∷ Mapping ModifyValidated a a => Mapping ModifyValidated (Validated a) (Validated a) where

309315 mapping m@(ModifyValidated f) = over _Validated (mapping m) <<< f

310316else instance modifyValidatedRecord ∷

311− (RL.RowToList r xs, MapRecordWithIndex xs (ConstMapping ModifyValidated) r r) =>

317+ ( RL.RowToList r xs

318+ , MapRecordWithIndex xs (ConstMapping ModifyValidated) r r

319+ ) =>

312320 Mapping ModifyValidated { | r } { | r } where

313321 mapping d = hmap d

314322else instance modifyValidatedArray ∷ Mapping ModifyValidated a a => Mapping ModifyValidated (Array a) (Array a) where

@@ -343,12 +351,12 @@ else instance canValidateAny ∷ CanValidate a a where

343351-- | This `Validated` data type describes a form field as either `Fresh` or

344352-- | `Modified`, so that validation messages are only displayed if the field

345353-- | is `Modified`.

346−validated ∷

347− ∀ props unvalidated validated result result_.

348− CanValidate unvalidated validated =>

349− Validator result_ result ->

350− FormBuilder { readOnly ∷ Boolean, validationError ∷ Maybe (Maybe String) | props } unvalidated result_ ->

351− FormBuilder { readOnly ∷ Boolean | props } (Validated validated) result

354+validated

355+ ∷ ∀ props unvalidated validated result result_

356+ . CanValidate unvalidated validated

357+ => Validator result_ result

358+ -> FormBuilder { readOnly ∷ Boolean, validationError ∷ Maybe (Maybe String) | props } unvalidated result_

359+ -> FormBuilder { readOnly ∷ Boolean | props } (Validated validated) result

352360validated runValidator editor =

353361 FormBuilder \props@{ readOnly } (v ∷ Validated validated) -> do

354362 let

@@ -359,16 +367,17 @@ validated runValidator editor =

359367 { className: "ry-form-inner-column"

360368 , space: E.str "0"

361369 , css:

362− E.css

363− { maxWidth: E.str "100%"

364− , margin: E.str "0"

365− }

370+ E.css

371+ { maxWidth: E.str "100%"

372+ , margin: E.str "0"

373+ }

366374 }

367375 -- validationMessage ∷ Maybe validated

368376 -- validationMessage = case v of

369377 -- Fresh _ -> Nothing

370378 -- Modified m -> Just m

371379 { validate } = un FormBuilder editor (props # upsert (Proxy ∷ _ "validationError") (Nothing)) value

380+

372381 modify ∷ Maybe String -> Forest -> Forest

373382 modify message forest = case Array.unsnoc forest of

374383 Nothing -> [ Child { key: Nothing, child: errChild } ]

@@ -379,6 +388,7 @@ validated runValidator editor =

379388 errLine = guard (not readOnly) message # foldMap R.text

380389

381390 errChild = errorChild </> { errorLine: errLine, message }

391+

382392 -- The validation can produce either a valid result, an error message, or

383393 -- none in the case where the form is Fresh.

384394 res ∷ Maybe (Either String result)

@@ -390,13 +400,13 @@ validated runValidator editor =

390400 err = either pure (const Nothing) =<< res

391401 finalResult = un FormBuilder editor (props # upsert (Proxy ∷ _ "validationError") (res <#> either Just (const Nothing))) value

392402 { edit:

393− \onChange ->

394− (modify err <<< finalResult.edit)

395− ( onChange

396− <<< \f -> case _ of

403+ \onChange ->

404+ (modify err <<< finalResult.edit)

405+ ( onChange

406+ <<< \f -> case _ of

397407 v'@(Fresh _) -> review modified (f (fromValidated v'))

398408 v'@(Modified _) -> review modified (f (fromValidated v'))

399− )

409+ )

400410 , validate: hush =<< res

401411 }

402412

@@ -408,75 +418,81 @@ errorChild =

408418 let

409419 variants =

410420 { hidden:

411− const

412− { y: "-100%"

413− , height: "auto"

421+ const

422+ { y: "-100%"

423+ , height: "auto"

424+ , transition: { type: "tween", delay: 0.75 }

425+ }

426+ , visible:

427+ { y: "0%"

414428 , transition: { type: "tween", delay: 0.75 }

415429 }

416− , visible:

417− { y: "0%"

418− , transition: { type: "tween", delay: 0.75 }

419− }

420430 }

421431 let variant = makeVariantLabels variants

422432 pure

423433 $ R.div'

424− </* { className: "ry-validation-error"

434+ </*

435+ { className: "ry-validation-error"

425436 , css:

426− E.css

427− { fontSize: E.str "calc(var(--s0) * 0.8)"

428− , fontWeight: E.str "400"

429− , height: E.str "calc(var(--s0) + var(--s-3))"

430− , margin: E.str "0 var(--s-1) 0 var(--s-1)"

431− , overflow: E.str $ if expanded then "visible" else "hidden"

432− }

437+ E.css

438+ { fontSize: E.str "calc(var(--s0) * 0.8)"

439+ , fontWeight: E.str "400"

440+ , height: E.str "calc(var(--s0) + var(--s-3))"

441+ , margin: E.str "0 var(--s-1) 0 var(--s-1)"

442+ , overflow: E.str $ if expanded then "visible" else "hidden"

443+ }

433444 }

434− /> [ Motion.animatePresence </ {}

445+ />

446+ [ Motion.animatePresence </ {}

435447 /> case message of

436− Just _ ->

437− [ Motion.div

438− </* { variants: Motion.variants variants

439− , initial: Motion.initial variant.hidden

440− , animate: Motion.animate variant.visible

441− , exit: Motion.exit $ variant.hidden

442− , className: "ry-validation-error"

443− , css:

448+ Just _ ->

449+ [ Motion.div

450+ </*

451+ { variants: Motion.variants variants

452+ , initial: Motion.initial variant.hidden

453+ , animate: Motion.animate variant.visible

454+ , exit: Motion.exit $ variant.hidden

455+ , className: "ry-validation-error"

456+ , css:

444457 E.css

445458 { color: E.str colour.invalidText

446459 , background: E.color Palette.pink.dark

447460 , padding: E.str "var(--s-5) var(--s-3) var(--s-4) var(--s-3)"

448461 , borderRadius: E.str "0 0 var(--s-3) var(--s-3)"

449462 }

450− }

451− /> [ motionReadMore

452− </ Motion.withMotion

453− { background: Palette.pink.dark

454− , onMoreClicked: setExpanded true

455− , onLessClicked: setExpanded false

456− }

457− { layout: Motion.layout false

458− }

459− /> [ R.span'

460− </* { className: "ry-validation-error"

461− , css: E.css {}

462− }

463− /> [ errorLine ]

464− ]

465− ]

466− ]

467− _ -> mempty

463+ }

464+ />

465+ [ motionReadMore

466+ </ Motion.withMotion

467+ { background: Palette.pink.dark

468+ , onMoreClicked: setExpanded true

469+ , onLessClicked: setExpanded false

470+ }

471+ { layout: Motion.layout false

472+ }

473+ />

474+ [ R.span'

475+ </*

476+ { className: "ry-validation-error"

477+ , css: E.css {}

478+ }

479+ /> [ errorLine ]

480+ ]

481+ ]

482+ ]

483+ _ -> mempty

468484 ]

469485 where

470486 motionReadMore = unsafePerformEffect $ Motion.custom Block.readMore

471487

472−upsert ∷

473− ∀ proxy r1 r2 r l a.

474− IsSymbol l =>

475− Cons l a r r2 =>

476− proxy l ->

477− a ->

478− Record r1 ->

479− Record r2

488+upsert

489+ ∷ ∀ r1 r2 r l a

490+ . IsSymbol l

491+ => Cons l a r r2

492+ => Proxy l

493+ -> a

494+ -> Record r1

495+ -> Record r2

480496upsert l a r = unsafeSet (reflectSymbol l) a r

481497

482498-- -- | Attach a validation function to a `FormBuilder p u a`, producing a new

src/Yoga/Block/Palette/Story.purs+24−20

@@ -19,10 +19,10 @@ import Yoga.Block.Layout.Box as Box

1919import Yoga.Block.Palette (ColourVariants)

2020import Yoga.Block.Palette as Palette

2121

22−default ∷

23− { decorators ∷ Array (Effect JSX -> JSX)

24− , title ∷ String

25− }

22+default

23+ ∷ { decorators ∷ Array (Effect JSX -> JSX)

24+ , title ∷ String

25+ }

2626default =

2727 { title: "Palette"

2828 , decorators:

@@ -39,16 +39,16 @@ box =

3939 pure

4040 $ fragment

4141 [ Block.grid { min: "100px" }

42− $ colourBoxes "Pink" Palette.pink

43− <> colourBoxes "Mauve" Palette.mauve

44− <> colourBoxes "Violet" Palette.violet

45− <> colourBoxes "Blue" Palette.blue

46− <> colourBoxes "Azure" Palette.azure

47− <> colourBoxes "Capri" Palette.capri

48− <> colourBoxes "Sea Green" Palette.seaGreen

49− <> colourBoxes "Malachite" Palette.malachite

50− <> colourBoxes "Yellow" Palette.yellow

51− <> colourBoxes "Mango" Palette.mango

42+ $ colourBoxes "Pink" Palette.pink

43+ <> colourBoxes "Mauve" Palette.mauve

44+ <> colourBoxes "Violet" Palette.violet

45+ <> colourBoxes "Blue" Palette.blue

46+ <> colourBoxes "Azure" Palette.azure

47+ <> colourBoxes "Capri" Palette.capri

48+ <> colourBoxes "Sea Green" Palette.seaGreen

49+ <> colourBoxes "Malachite" Palette.malachite

50+ <> colourBoxes "Yellow" Palette.yellow

51+ <> colourBoxes "Mango" Palette.mango

5252 ]

5353

5454colourBoxes ∷ String -> ColourVariants -> Array JSX

@@ -58,14 +58,18 @@ colourBoxes name colours =

5858 , colourBox name (Proxy ∷ _ "dark") colours

5959 ]

6060

61−colourBox ∷

62− ∀ t13 t14 t15 colourVariant.

63− IsSymbol colourVariant =>

64− Cons colourVariant Color t15 t14 =>

65− String -> t13 colourVariant -> Record t14 -> JSX

61+colourBox

62+ ∷ ∀ t14 t15 colourVariant

63+ . IsSymbol colourVariant

64+ => Cons colourVariant Color t15 t14

65+ => String

66+ -> Proxy colourVariant

67+ -> Record t14

68+ -> JSX

6669colourBox name proxy colours =

6770 Box.component

68− </ { background: cssStringRGBA colour

71+ </

72+ { background: cssStringRGBA colour

6973 , css: E.css { color: E.str if isLight colour then "black" else "white" }

7074 , borderRadius: E.var "--s0"

7175 , boxShadow: E.str $ "0 1px 6px " <> Style.colour.boxShadow

src/Yoga/Prelude/View.purs+3−1

@@ -12,6 +12,7 @@ module Yoga.Prelude.View

1212 , module Web.HTML.HTMLElement

1313 , module Data.Nullable

1414 , module Untagged.Castable

15+ , module Web.DOM.Element

1516 ) where

1617

1718import Yoga.Prelude.Default hiding (div)

@@ -25,6 +26,7 @@ import React.Basic.Hooks (type (/\), Component, Hook, JSX, Pure, ReactChildren,

2526import Type.Row (type (+))

2627import Untagged.Castable (cast)

2728import Web.DOM (Node)

28−import Web.HTML.HTMLElement (HTMLElement, DOMRect, blur, focus, getBoundingClientRect)

29+import Web.DOM.Element (DOMRect, getBoundingClientRect)

30+import Web.HTML.HTMLElement (HTMLElement, blur, focus)

2931import Yoga ((/>), (</), (</*), (</*>), (</>), div, span, button)

3032import Yoga.Block.Internal (ButtonReadableProps, ButtonReadablePropsF, ButtonWritableProps, ButtonWritablePropsF, DivProps, DivPropsF, Id, InputReadableProps, InputReadablePropsF, InputWritableProps, InputWritablePropsF, NodeRef, OptionalProp(..), _0, appendIfDefined, asOptional, composeHandler, createRef, dangerous, deleteUndefineds, emotionButton, emotionDiv, emotionInput, forwardedRefAsMaybe, getBoundingBoxFromRef, getHTMLElementFromRef, getOffsetDimensionsFromRef, getOffsetHeightFromRef, getOffsetWidthFromRef, getOr, getOrFlipped, getScrollDimensionsFromRef, getScrollHeightFromRef, getScrollWidthFromRef, ifTrue, isTruthy, maybeToOp, mkForwardRefComponent, mkForwardRefComponentEffect, opToMaybe, setOrDelete, unsafeAddProps, unsafeDiv, unsafeEmotion, unsafeMergeSecond, unsafeUnMaybe, unsafeUnOptional, unsafeUnionDroppingUndefined, (<>?), (?||))