a571217 · rowtype-yoga/ry-blocks

src/Framer/Motion.js−14

compare with main

unifiedsplit

@@ -1,19 +1,5 @@

1const framerMotion = require("framer-motion")

2

3−exports.divImpl = framerMotion.motion.div

4−exports.spanImpl = framerMotion.motion.span

5−exports.buttonImpl = framerMotion.motion.button

6−exports.h1Impl = framerMotion.motion.h1

7−exports.svgImpl = framerMotion.motion.svg

8−exports.pathImpl = framerMotion.motion.path

9−exports.rectImpl = framerMotion.motion.rect

10−

11−exports.infinity = Infinity

12−

13−exports.custom = (component) => () => {

14− return framerMotion.motion.custom(component)

15−}

16−

17exports.animatePresence = () => framerMotion.AnimatePresence

3exports.animatePresence = () => framerMotion.AnimatePresence

18

4

19exports.animateSharedLayout = () => framerMotion.AnimateSharedLayout

5exports.animateSharedLayout = () => framerMotion.AnimateSharedLayout

src/Framer/Motion.purs+8−547

@@ -1,393 +1,19 @@

1module Framer.Motion

2− ( animate

2+ ( motion

3− , makeVariantLabels

4− , WhileTap

5− , whileTap

6− , callback

7− , class EffectFnMaker

8− , toEffectFn

9− , OnHoverStart

10− , span

11− , onHoverStart

12− , LayoutId

13− , layoutId

14− , customProp

15− , OnHoverEnd

16− , onHoverEnd

17− , whileHover

18− , WhileHover

19− , EventInfo

20− , OnTap

21− , TapInfo

22− , OnTapStart

23− , OnTapEnd

24− , onTapStart

25− , onTapEnd

26− , onTapCancel

27− , onTap

28− , OnTapCancel

29− , TargetAndTransition

30− , MakeVariantLabel

31− , div

32− , h1

33− , variantsFromObject

34− , custom

35− , Exit

36− , exit

37− , MotionProps

38− , initial

39− , MotionPropsF

40− , prop

41− , Drag

42− , DragMomentum

43− , button

44− , dragMomentum

45− , DragPropagation

46− , DragElastic

47− , dragElastic

48− , dragPropagation

49− , drag

50− , Transition

51− , transition

52− , Initial

53− , BoundingBox2D

54− , boundingBox2D

55− , dragConstraints

56− , (>>)

57− , variants

58− , Animate

59− , Infinity

60− , infinity

61− , VariantLabel

62− , Variants

63− , layout

64− , Layout

65− , AnimationControls

66 , withMotion

3 , withMotion

67− , motion

68− , animateSharedLayout

69− , AnimateSharedLayoutProps

70− , AnimateSharedLayoutType

71− , OnDragEnd

72− , onDragEnd

73− , OnDragStart

74− , onDragStart

75− , OnDrag

76− , onDrag

77− , PanInfo

78− , Point2D

79− , switch

80− , crossfade

81− , AnimatePresenceProps

82− , DragConstraints

83 , animatePresence

4 , animatePresence

84− , svg

5+ , animateSharedLayout

85− , path

6+ , module Framer.Motion.Types

86− , rect

7+ , module Framer.Motion.MotionComponent

87 ) where

8 ) where

88

9

89−import Prelude

10+import Prelude hiding (div, map, sub)

90−import Data.Nullable (Nullable)

11+import Framer.Motion.Types (class EffectFnMaker, Animate, AnimatePresenceProps, AnimateSharedLayoutProps, AnimateSharedLayoutType(..), AnimationControls, BoundingBox2D, Drag, DragConstraints, DragElastic, DragMomentum, DragPropagation, EventInfo, Exit, Infinity, Initial, Layout, LayoutId, LayoutTransition, MakeVariantLabel(..), MotionProps, MotionPropsF, OnDrag, OnDragEnd, OnDragStart, OnHoverEnd, OnHoverStart, OnTap, OnTapCancel, OnTapEnd, OnTapStart, PanInfo, Point2D, TapInfo, Target(..), TargetAndTransition, Transition, VariantLabel(..), Variants, WhileHover, WhileTap, animate, boundingBox2D, callback, crossfade, customProp, drag, dragConstraints, dragElastic, dragMomentum, dragPropagation, exit, infinity, initial, layout, layoutId, makeVariantLabels, onDrag, onDragEnd, onDragStart, onHoverEnd, onHoverStart, onTap, onTapCancel, onTapEnd, onTapStart, prop, switch, toEffectFn, transition, variants, variantsFromObject, whileHover, whileTap)

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

92−import Effect (Effect)

93−import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, mkEffectFn2)

94−import Foreign (Foreign, unsafeToForeign)

95−import Foreign.Object (Object)

96−import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmapWithIndex)

97−import Literals.Undefined (Undefined)

98import Prim.Row (class Nub, class Union)

12import Prim.Row (class Nub, class Union)

99−import React.Basic (JSX, ReactComponent)

13+import React.Basic (ReactComponent)

100−import React.Basic.DOM (CSS, Props_button, Props_div, Props_h1, Props_span, css)

101−import React.Basic.DOM.Internal (SharedSVGProps)

102−import React.Basic.DOM.SVG (Props_svg, Props_rect, Props_path)

103−import React.Basic.Events (EventHandler)

104−import React.Basic.Hooks (Ref)

105import Record (disjointUnion)

14import Record (disjointUnion)

106−import Type.Row (type (+))

107−import Unsafe.Coerce (unsafeCoerce)

108import Untagged.Castable (class Castable, cast)

15import Untagged.Castable (class Castable, cast)

109−import Untagged.Union (type (|+|))

16+import Framer.Motion.MotionComponent (_data, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, custom, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, menuitem, meta, metadata, meter, motionComponentImpl, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, svgAnimate, svgSwitch, symbol, table, tbody, td, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, var, video, view, wbr)

110−import Web.DOM (Node)

111−import Web.Event.Internal.Types (Event)

112−import Web.UIEvent.MouseEvent (MouseEvent)

113−import Yoga.Block.Internal (Id)

114−

115−foreign import divImpl ∷ ∀ a. ReactComponent { | a }

116−

117−foreign import spanImpl ∷ ∀ a. ReactComponent { | a }

118−

119−foreign import buttonImpl ∷ ∀ a. ReactComponent { | a }

120−

121−foreign import h1Impl ∷ ∀ a. ReactComponent { | a }

122−

123−foreign import svgImpl ∷ ∀ a. ReactComponent { | a }

124−

125−foreign import pathImpl ∷ ∀ a. ReactComponent { | a }

126−

127−foreign import rectImpl ∷ ∀ a. ReactComponent { | a }

128−

129−type Transition =

130− CSS |+| Undefined

131−

132−newtype VariantLabel = VariantLabel String

133−

134−data Target

135− = Target

136−

137−type Exit =

138− CSS |+| VariantLabel |+| Array VariantLabel |+| Undefined

139−

140−foreign import data AnimationControls ∷ Type

141−

142−prop ∷ ∀ a b. Castable a b => a -> b

143−prop = cast

144−

145−type Animate =

146− CSS

147− |+| VariantLabel

148− |+| Array VariantLabel

149− |+| AnimationControls

150− |+| Undefined

151−

152−type Initial =

153− Boolean |+| CSS |+| VariantLabel |+| Array VariantLabel |+| Undefined

154−

155−type Layout =

156− Boolean |+| Undefined

157−

158−type Variants =

159− CSS |+| Undefined

160−

161−type LayoutTransition =

162− Boolean |+| Undefined

163−

164−type Drag =

165− Boolean |+| String |+| Undefined

166−

167−type DragMomentum =

168− Boolean |+| Undefined

169−

170−dragMomentum ∷ ∀ c. Castable c DragMomentum => c -> DragMomentum

171−dragMomentum = cast

172−

173−type DragConstraints =

174− Ref (Nullable Node) |+| BoundingBox2D |+| Undefined

175−

176−type DragElastic =

177− Boolean |+| Number |+| Undefined

178−

179−dragElastic ∷ ∀ c. Castable c DragElastic => c -> DragElastic

180−dragElastic = cast

181−

182−type BoundingBox2D =

183− { left ∷ Int |+| Number |+| Undefined

184− , right ∷ Int |+| Number |+| Undefined

185− , top ∷ Int |+| Number |+| Undefined

186− , bottom ∷ Int |+| Number |+| Undefined

187− }

188−

189−boundingBox2D ∷ ∀ c. Castable c BoundingBox2D => c -> BoundingBox2D

190−boundingBox2D = cast

191−

192−type Point2D =

193− { x ∷ Number, y ∷ Number }

194−

195−type PanInfo =

196− { point ∷ Point2D, delta ∷ Point2D, offset ∷ Point2D, velocity ∷ Point2D }

197−

198−type OnDragStart =

199− (EffectFn2 Event PanInfo Unit |+| Undefined)

200−

201−type OnDragEnd =

202− (EffectFn2 Event PanInfo Unit |+| Undefined)

203−

204−type OnDrag =

205− (EffectFn2 Event PanInfo Unit |+| Undefined)

206−

207−type WhileTap =

208− TargetAndTransition |+| String |+| Undefined

209−

210−type OnTap =

211− (EffectFn2 Event TapInfo Unit |+| Undefined)

212−

213−type OnTapStart =

214− (EffectFn2 Event TapInfo Unit |+| Undefined)

215−

216−type OnTapEnd =

217− (EffectFn2 Event TapInfo Unit |+| Undefined)

218−

219−type OnTapCancel =

220− (EffectFn2 Event TapInfo Unit |+| Undefined)

221−

222−onTapStart ∷ (Event -> TapInfo -> Effect Unit) -> OnTapStart

223−onTapStart = cast <<< toEffectFn

224−

225−onTapEnd ∷ (Event -> TapInfo -> Effect Unit) -> OnTapEnd

226−onTapEnd = cast <<< toEffectFn

227−

228−onTap ∷ (Event -> TapInfo -> Effect Unit) -> OnTap

229−onTap fn2 = cast (mkEffectFn2 fn2)

230−

231−onTapCancel ∷ (Event -> TapInfo -> Effect Unit) -> OnTap

232−onTapCancel fn2 = cast (mkEffectFn2 fn2)

233−

234−type EventInfo =

235− { point ∷ { x ∷ Number, y ∷ Number }

236− }

237−

238−type WhileHover =

239− (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

240−

241−type OnHoverEnd =

242− (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

243−

244−type OnHoverStart =

245− (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

246−

247−onHoverStart ∷ (MouseEvent -> EventInfo -> Effect Unit) -> OnHoverStart

248−onHoverStart = cast <<< toEffectFn

249−

250−onHoverEnd ∷ (MouseEvent -> EventInfo -> Effect Unit) -> OnHoverEnd

251−onHoverEnd = cast <<< toEffectFn

252−

253−whileHover ∷ ∀ c. Castable c WhileHover => c -> WhileHover

254−whileHover = cast

255−

256−type TapInfo =

257− { x ∷ Number, y ∷ Number }

258−

259−-- Can contain "transition" and "transitionEnd"

260−type TargetAndTransition =

261− CSS

262−

263−type DragPropagation =

264− Boolean |+| Undefined

265−

266−whileTap ∷ ∀ c. Castable c WhileTap => c -> WhileTap

267−whileTap = cast

268−

269−class EffectFnMaker fn effectFn | fn -> effectFn where

270− toEffectFn ∷ fn -> effectFn

271−

272−instance callbackableEffectFn2 ∷ EffectFnMaker (a -> b -> Effect c) (EffectFn2 a b c) where

273− toEffectFn = mkEffectFn2

274−

275−instance callbackableEffectFn1 ∷ EffectFnMaker (a -> Effect b) (EffectFn1 a b) where

276− toEffectFn = mkEffectFn1

277−

278−callback ∷ ∀ a c f. Castable c a => EffectFnMaker f c => f -> a

279−callback = cast <<< toEffectFn

280−

281−onDragStart ∷ (Event -> PanInfo -> Effect Unit) -> OnDragStart

282−onDragStart = cast <<< toEffectFn

283−

284−onDragEnd ∷ (Event -> PanInfo -> Effect Unit) -> OnDragEnd

285−onDragEnd = cast <<< toEffectFn

286−

287−onDrag ∷ (Event -> PanInfo -> Effect Unit) -> OnDrag

288−onDrag fn2 = cast (mkEffectFn2 fn2)

289−

290−customProp ∷ ∀ a. a -> Foreign

291−customProp = unsafeToForeign

292−

293−type LayoutId =

294− String |+| Undefined

295−

296−layoutId ∷ ∀ a. Castable a LayoutId => a -> LayoutId

297−layoutId = cast

298−

299−type MotionPropsF f r =

300− ( initial ∷ f Initial

301− , animate ∷ f Animate

302− , custom ∷ f Foreign

303− , drag ∷ f Drag

304− , dragMomentum ∷ f DragMomentum

305− , dragElastic ∷ f DragElastic

306− , onDragStart ∷ f OnDragStart

307− , onDrag ∷ f OnDrag

308− , onDragEnd ∷ f OnDragEnd

309− , dragConstraints ∷ f DragConstraints

310− , dragPropagation ∷ f DragPropagation

311− , variants ∷ f Variants

312− , transition ∷ f Transition

313− , layout ∷ f Layout

314− , layoutId ∷ f LayoutId

315− , whileTap ∷ f WhileTap

316− , onTap ∷ f OnTap

317− , onTapStart ∷ f OnTapStart

318− , onTapEnd ∷ f OnTapEnd

319− , onTapCancel ∷ f OnTapCancel

320− , whileHover ∷ f WhileHover

321− , onHoverStart ∷ f OnHoverStart

322− , onHoverEnd ∷ f OnHoverEnd

323− , exit ∷ f Exit

324− | r

325− )

326−

327−type MotionProps r =

328− MotionPropsF Id r

329−

330−animate ∷ ∀ a. Castable a Animate => a -> Animate

331−animate = cast

332−

333−initial ∷ ∀ a. Castable a Initial => a -> Initial

334−initial = cast

335−

336−transition ∷ ∀ r. { | r } -> Transition

337−transition = cast <<< css

338−

339−drag ∷ ∀ a. Castable a Drag => a -> Drag

340−drag = cast

341−

342−dragConstraints ∷ ∀ a. Castable a BoundingBox2D => a -> DragConstraints

343−dragConstraints x = cast ((cast x) ∷ BoundingBox2D)

344−

345−dragPropagation ∷ ∀ a. Castable a DragPropagation => a -> DragPropagation

346−dragPropagation = cast

347−

348−exit ∷ ∀ a. Castable a Exit => a -> Exit

349−exit = cast

350−

351−variants ∷ ∀ r. { | r } -> Variants

352−variants = cast <<< css

353−

354−variantsFromObject ∷ ∀ o. Object o -> Variants

355−variantsFromObject = cast <<< (unsafeCoerce ∷ _ -> CSS)

356−

357−layout ∷ ∀ a. Castable a Layout => a -> Layout

358−layout = cast

359−

360−data MakeVariantLabel

361− = MakeVariantLabel

362−

363−instance makeVariantLabels' ∷

364− (IsSymbol sym) =>

365− MappingWithIndex MakeVariantLabel (SProxy sym) a VariantLabel where

366− mappingWithIndex MakeVariantLabel prop' _ = VariantLabel (reflectSymbol prop')

367−

368−makeVariantLabels ∷ ∀ a b. HMapWithIndex MakeVariantLabel a b => a -> b

369−makeVariantLabels = hmapWithIndex MakeVariantLabel

370−

371−div ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + Props_div) => ReactComponent { | attrs }

372−div = divImpl

373−

374−span ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + Props_span) => ReactComponent { | attrs }

375−span = spanImpl

376−

377−button ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + Props_button) => ReactComponent { | attrs }

378−button = buttonImpl

379−

380−svg ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + (SharedSVGProps Props_svg)) => ReactComponent { | attrs }

381−svg = svgImpl

382−

383−path ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + (SharedSVGProps Props_path)) => ReactComponent { | attrs }

384−path = pathImpl

385−

386−rect ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + (SharedSVGProps Props_rect)) => ReactComponent { | attrs }

387−rect = rectImpl

388−

389−h1 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + Props_h1) => ReactComponent { | attrs }

390−h1 = h1Impl

391

17

392withMotion ∷

18withMotion ∷

393 ∀ result baseProps motionSubset.

19 ∀ result baseProps motionSubset.

@@ -399,177 +25,12 @@ motion ∷

399 Union baseProps (MotionProps ()) result => Nub result result => Castable motionSubset { | MotionProps () } => motionSubset -> Record baseProps -> Record result

25 Union baseProps (MotionProps ()) result => Nub result result => Castable motionSubset { | MotionProps () } => motionSubset -> Record baseProps -> Record result

400motion = flip withMotion

26motion = flip withMotion

401

27

402−infixr 7 withMotion as >>

403−

404−foreign import data Infinity ∷ Type

405−

406−foreign import infinity ∷ Infinity

407−

408−foreign import custom ∷

409− ∀ old.

410− ReactComponent { | old } ->

411− Effect (ReactComponent { | MotionProps old })

412−

413−type AnimatePresenceProps =

414− ( initial ∷ Boolean

415− , custom ∷ ∀ a. a

416− , exitBeforeEnter ∷ Boolean

417− , onExitComplete ∷ Effect Unit

418− , children ∷ Array JSX

419− )

420−

421foreign import animatePresence ∷

28foreign import animatePresence ∷

422 ∀ attrs attrs_.

29 ∀ attrs attrs_.

423 Union attrs attrs_ AnimatePresenceProps =>

30 Union attrs attrs_ AnimatePresenceProps =>

424 ReactComponent { | attrs }

31 ReactComponent { | attrs }

425

32

426−type AnimateSharedLayoutProps =

427− ( type ∷ AnimateSharedLayoutType

428− , children ∷ Array JSX

429− )

430−

431−newtype AnimateSharedLayoutType = AnimateSharedLayoutType String

432−

433−switch ∷ AnimateSharedLayoutType

434−switch = AnimateSharedLayoutType "switch"

435−

436−crossfade ∷ AnimateSharedLayoutType

437−crossfade = AnimateSharedLayoutType "crossfade"

438−

439foreign import animateSharedLayout ∷

33foreign import animateSharedLayout ∷

440 ∀ attrs attrs_.

34 ∀ attrs attrs_.

441 Union attrs attrs_ AnimateSharedLayoutProps =>

35 Union attrs attrs_ AnimateSharedLayoutProps =>

442 ReactComponent { | attrs }

36 ReactComponent { | attrs }

443−

444−type Props_div_no_key =

445− ( _aria ∷ Object String

446− , _data ∷ Object String

447− , about ∷ String

448− , acceptCharset ∷ String

449− , accessKey ∷ String

450− , allowFullScreen ∷ Boolean

451− , allowTransparency ∷ Boolean

452− , autoFocus ∷ Boolean

453− , autoPlay ∷ Boolean

454− , capture ∷ Boolean

455− , cellPadding ∷ String

456− , cellSpacing ∷ String

457− , charSet ∷ String

458− , children ∷ Array JSX

459− , classID ∷ String

460− , className ∷ String

461− , colSpan ∷ Int

462− , contentEditable ∷ Boolean

463− , contextMenu ∷ String

464− , crossOrigin ∷ String

465− , dangerouslySetInnerHTML ∷ { __html ∷ String }

466− , datatype ∷ String

467− , dateTime ∷ String

468− , dir ∷ String

469− , draggable ∷ Boolean

470− , encType ∷ String

471− , formAction ∷ String

472− , formEncType ∷ String

473− , formMethod ∷ String

474− , formNoValidate ∷ Boolean

475− , formTarget ∷ String

476− , frameBorder ∷ String

477− , hidden ∷ Boolean

478− , hrefLang ∷ String

479− , htmlFor ∷ String

480− , httpEquiv ∷ String

481− , icon ∷ String

482− , id ∷ String

483− , inlist ∷ String

484− , inputMode ∷ String

485− , is ∷ String

486− , itemID ∷ String

487− , itemProp ∷ String

488− , itemRef ∷ String

489− , itemScope ∷ Boolean

490− , itemType ∷ String

491− , keyParams ∷ String

492− , keyType ∷ String

493− , lang ∷ String

494− , marginHeight ∷ String

495− , marginWidth ∷ String

496− , maxLength ∷ Int

497− , mediaGroup ∷ String

498− , minLength ∷ Int

499− , noValidate ∷ Boolean

500− , onAnimationEnd ∷ EventHandler

501− , onAnimationIteration ∷ EventHandler

502− , onAnimationStart ∷ EventHandler

503− , onBlur ∷ EventHandler

504− , onClick ∷ EventHandler

505− , onCompositionEnd ∷ EventHandler

506− , onCompositionStart ∷ EventHandler

507− , onCompositionUpdate ∷ EventHandler

508− , onContextMenu ∷ EventHandler

509− , onCopy ∷ EventHandler

510− , onCut ∷ EventHandler

511− , onDoubleClick ∷ EventHandler

512− , onDrag ∷ EventHandler

513− , onDragEnd ∷ EventHandler

514− , onDragEnter ∷ EventHandler

515− , onDragExit ∷ EventHandler

516− , onDragLeave ∷ EventHandler

517− , onDragOver ∷ EventHandler

518− , onDragStart ∷ EventHandler

519− , onDrop ∷ EventHandler

520− , onFocus ∷ EventHandler

521− , onGotPointerCapture ∷ EventHandler

522− , onInvalid ∷ EventHandler

523− , onKeyDown ∷ EventHandler

524− , onKeyPress ∷ EventHandler

525− , onKeyUp ∷ EventHandler

526− , onLostPointerCapture ∷ EventHandler

527− , onMouseDown ∷ EventHandler

528− , onMouseEnter ∷ EventHandler

529− , onMouseLeave ∷ EventHandler

530− , onMouseMove ∷ EventHandler

531− , onMouseOut ∷ EventHandler

532− , onMouseOver ∷ EventHandler

533− , onMouseUp ∷ EventHandler

534− , onPaste ∷ EventHandler

535− , onPointerCancel ∷ EventHandler

536− , onPointerDown ∷ EventHandler

537− , onPointerEnter ∷ EventHandler

538− , onPointerLeave ∷ EventHandler

539− , onPointerMove ∷ EventHandler

540− , onPointerOut ∷ EventHandler

541− , onPointerOver ∷ EventHandler

542− , onPointerUp ∷ EventHandler

543− , onSelect ∷ EventHandler

544− , onSubmit ∷ EventHandler

545− , onTouchCancel ∷ EventHandler

546− , onTouchEnd ∷ EventHandler

547− , onTouchMove ∷ EventHandler

548− , onTouchStart ∷ EventHandler

549− , onTransitionEnd ∷ EventHandler

550− , onWheel ∷ EventHandler

551− , prefix ∷ String

552− , property ∷ String

553− , radioGroup ∷ String

554− , readOnly ∷ Boolean

555− , ref ∷ Ref (Nullable Node)

556− , resource ∷ String

557− , role ∷ String

558− , rowSpan ∷ Int

559− , scoped ∷ Boolean

560− , seamless ∷ Boolean

561− , security ∷ String

562− , spellCheck ∷ Boolean

563− , srcDoc ∷ JSX

564− , srcLang ∷ String

565− , srcSet ∷ String

566− , style ∷ CSS

567− , suppressContentEditableWarning ∷ Boolean

568− , tabIndex ∷ Int

569− , title ∷ String

570− , typeof ∷ String

571− , unselectable ∷ Boolean

572− , useMap ∷ String

573− , vocab ∷ String

574− , wmode ∷ String

575− )

src/Framer/Motion/MotionComponent.jsnew file+14

@@ -0,0 +1,14 @@

1+const framerMotion = require("framer-motion")

2+

3+exports.motionComponentImpl = (str) => {

4+ const html = ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"]

5+ const svg = ["animate", "circle", "clipPath", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use", "view"]

6+ if (html.indexOf(str) === -1 && svg.indexOf(str) === -1) {

7+ console.error("Tried to use non-existing motion component " + str)

8+ }

9+ return framerMotion.motion[str]

10+}

11+

12+exports.custom = (component) => () => {

13+ return framerMotion.motion.custom(component)

14+}

src/Framer/Motion/MotionComponent.pursnew file+521

@@ -0,0 +1,521 @@

1+module Framer.Motion.MotionComponent where

2+

3+import Effect (Effect)

4+import Framer.Motion.Types (MotionProps)

5+import Prim.Row (class Union)

6+import React.Basic (ReactComponent)

7+import React.Basic.DOM as DOM

8+import React.Basic.DOM.SVG as SVG

9+import Type.Row (type (+))

10+

11+foreign import motionComponentImpl ∷ ∀ a. String -> ReactComponent { | a }

12+

13+foreign import custom ∷

14+ ∀ old.

15+ ReactComponent { | old } ->

16+ Effect (ReactComponent { | MotionProps old })

17+

18+-- DOM

19+abbr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_abbr) => ReactComponent { | attrs }

20+abbr = motionComponentImpl "abbr"

21+

22+address :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_address) => ReactComponent { | attrs }

23+address = motionComponentImpl "address"

24+

25+area :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_area) => ReactComponent { | attrs }

26+area = motionComponentImpl "area"

27+

28+article :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_article) => ReactComponent { | attrs }

29+article = motionComponentImpl "article"

30+

31+aside :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_aside) => ReactComponent { | attrs }

32+aside = motionComponentImpl "aside"

33+

34+audio :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_audio) => ReactComponent { | attrs }

35+audio = motionComponentImpl "audio"

36+

37+b :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_b) => ReactComponent { | attrs }

38+b = motionComponentImpl "b"

39+

40+base :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_base) => ReactComponent { | attrs }

41+base = motionComponentImpl "base"

42+

43+bdi :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdi) => ReactComponent { | attrs }

44+bdi = motionComponentImpl "bdi"

45+

46+bdo :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdo) => ReactComponent { | attrs }

47+bdo = motionComponentImpl "bdo"

48+

49+-- No support in React Basic Hooks

50+-- big :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_big) => ReactComponent { | attrs }

51+-- big = motionComponentImpl "big"

52+blockquote :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_blockquote) => ReactComponent { | attrs }

53+blockquote = motionComponentImpl "blockquote"

54+

55+body :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_body) => ReactComponent { | attrs }

56+body = motionComponentImpl "body"

57+

58+br :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_br) => ReactComponent { | attrs }

59+br = motionComponentImpl "br"

60+

61+button :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_button) => ReactComponent { | attrs }

62+button = motionComponentImpl "button"

63+

64+canvas :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_canvas) => ReactComponent { | attrs }

65+canvas = motionComponentImpl "canvas"

66+

67+caption :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_caption) => ReactComponent { | attrs }

68+caption = motionComponentImpl "caption"

69+

70+cite :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_cite) => ReactComponent { | attrs }

71+cite = motionComponentImpl "cite"

72+

73+code :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_code) => ReactComponent { | attrs }

74+code = motionComponentImpl "code"

75+

76+col :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_col) => ReactComponent { | attrs }

77+col = motionComponentImpl "col"

78+

79+colgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_colgroup) => ReactComponent { | attrs }

80+colgroup = motionComponentImpl "colgroup"

81+

82+_data :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_data) => ReactComponent { | attrs }

83+_data = motionComponentImpl "data"

84+

85+datalist :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_datalist) => ReactComponent { | attrs }

86+datalist = motionComponentImpl "datalist"

87+

88+dd :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dd) => ReactComponent { | attrs }

89+dd = motionComponentImpl "dd"

90+

91+del :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_del) => ReactComponent { | attrs }

92+del = motionComponentImpl "del"

93+

94+details :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_details) => ReactComponent { | attrs }

95+details = motionComponentImpl "details"

96+

97+dfn :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dfn) => ReactComponent { | attrs }

98+dfn = motionComponentImpl "dfn"

99+

100+dialog :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dialog) => ReactComponent { | attrs }

101+dialog = motionComponentImpl "dialog"

102+

103+div :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_div) => ReactComponent { | attrs }

104+div = motionComponentImpl "div"

105+

106+dl :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dl) => ReactComponent { | attrs }

107+dl = motionComponentImpl "dl"

108+

109+dt :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dt) => ReactComponent { | attrs }

110+dt = motionComponentImpl "dt"

111+

112+em :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_em) => ReactComponent { | attrs }

113+em = motionComponentImpl "em"

114+

115+embed :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_embed) => ReactComponent { | attrs }

116+embed = motionComponentImpl "embed"

117+

118+fieldset :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_fieldset) => ReactComponent { | attrs }

119+fieldset = motionComponentImpl "fieldset"

120+

121+figcaption :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figcaption) => ReactComponent { | attrs }

122+figcaption = motionComponentImpl "figcaption"

123+

124+figure :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figure) => ReactComponent { | attrs }

125+figure = motionComponentImpl "figure"

126+

127+footer :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_footer) => ReactComponent { | attrs }

128+footer = motionComponentImpl "footer"

129+

130+form :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_form) => ReactComponent { | attrs }

131+form = motionComponentImpl "form"

132+

133+h1 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h1) => ReactComponent { | attrs }

134+h1 = motionComponentImpl "h1"

135+

136+h2 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h2) => ReactComponent { | attrs }

137+h2 = motionComponentImpl "h2"

138+

139+h3 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h3) => ReactComponent { | attrs }

140+h3 = motionComponentImpl "h3"

141+

142+h4 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h4) => ReactComponent { | attrs }

143+h4 = motionComponentImpl "h4"

144+

145+h5 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h5) => ReactComponent { | attrs }

146+h5 = motionComponentImpl "h5"

147+

148+h6 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h6) => ReactComponent { | attrs }

149+h6 = motionComponentImpl "h6"

150+

151+head :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_head) => ReactComponent { | attrs }

152+head = motionComponentImpl "head"

153+

154+header :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_header) => ReactComponent { | attrs }

155+header = motionComponentImpl "header"

156+

157+hgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hgroup) => ReactComponent { | attrs }

158+hgroup = motionComponentImpl "hgroup"

159+

160+hr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hr) => ReactComponent { | attrs }

161+hr = motionComponentImpl "hr"

162+

163+html :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_html) => ReactComponent { | attrs }

164+html = motionComponentImpl "html"

165+

166+i :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_i) => ReactComponent { | attrs }

167+i = motionComponentImpl "i"

168+

169+iframe :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_iframe) => ReactComponent { | attrs }

170+iframe = motionComponentImpl "iframe"

171+

172+img :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_img) => ReactComponent { | attrs }

173+img = motionComponentImpl "img"

174+

175+input :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_input) => ReactComponent { | attrs }

176+input = motionComponentImpl "input"

177+

178+ins :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ins) => ReactComponent { | attrs }

179+ins = motionComponentImpl "ins"

180+

181+kbd :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_kbd) => ReactComponent { | attrs }

182+kbd = motionComponentImpl "kbd"

183+

184+keygen :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_keygen) => ReactComponent { | attrs }

185+keygen = motionComponentImpl "keygen"

186+

187+label :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_label) => ReactComponent { | attrs }

188+label = motionComponentImpl "label"

189+

190+legend :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_legend) => ReactComponent { | attrs }

191+legend = motionComponentImpl "legend"

192+

193+li :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_li) => ReactComponent { | attrs }

194+li = motionComponentImpl "li"

195+

196+link :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_link) => ReactComponent { | attrs }

197+link = motionComponentImpl "link"

198+

199+main :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_main) => ReactComponent { | attrs }

200+main = motionComponentImpl "main"

201+

202+map :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_map) => ReactComponent { | attrs }

203+map = motionComponentImpl "map"

204+

205+mark :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_mark) => ReactComponent { | attrs }

206+mark = motionComponentImpl "mark"

207+

208+menu :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menu) => ReactComponent { | attrs }

209+menu = motionComponentImpl "menu"

210+

211+menuitem :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menuitem) => ReactComponent { | attrs }

212+menuitem = motionComponentImpl "menuitem"

213+

214+meta :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meta) => ReactComponent { | attrs }

215+meta = motionComponentImpl "meta"

216+

217+meter :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meter) => ReactComponent { | attrs }

218+meter = motionComponentImpl "meter"

219+

220+nav :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_nav) => ReactComponent { | attrs }

221+nav = motionComponentImpl "nav"

222+

223+noscript :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_noscript) => ReactComponent { | attrs }

224+noscript = motionComponentImpl "noscript"

225+

226+object :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_object) => ReactComponent { | attrs }

227+object = motionComponentImpl "object"

228+

229+ol :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ol) => ReactComponent { | attrs }

230+ol = motionComponentImpl "ol"

231+

232+optgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_optgroup) => ReactComponent { | attrs }

233+optgroup = motionComponentImpl "optgroup"

234+

235+option :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_option) => ReactComponent { | attrs }

236+option = motionComponentImpl "option"

237+

238+output :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_output) => ReactComponent { | attrs }

239+output = motionComponentImpl "output"

240+

241+p :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_p) => ReactComponent { | attrs }

242+p = motionComponentImpl "p"

243+

244+param :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_param) => ReactComponent { | attrs }

245+param = motionComponentImpl "param"

246+

247+picture :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_picture) => ReactComponent { | attrs }

248+picture = motionComponentImpl "picture"

249+

250+pre :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_pre) => ReactComponent { | attrs }

251+pre = motionComponentImpl "pre"

252+

253+progress :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_progress) => ReactComponent { | attrs }

254+progress = motionComponentImpl "progress"

255+

256+q :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_q) => ReactComponent { | attrs }

257+q = motionComponentImpl "q"

258+

259+rp :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rp) => ReactComponent { | attrs }

260+rp = motionComponentImpl "rp"

261+

262+rt :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rt) => ReactComponent { | attrs }

263+rt = motionComponentImpl "rt"

264+

265+ruby :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ruby) => ReactComponent { | attrs }

266+ruby = motionComponentImpl "ruby"

267+

268+s :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_s) => ReactComponent { | attrs }

269+s = motionComponentImpl "s"

270+

271+samp :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_samp) => ReactComponent { | attrs }

272+samp = motionComponentImpl "samp"

273+

274+script :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_script) => ReactComponent { | attrs }

275+script = motionComponentImpl "script"

276+

277+section :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_section) => ReactComponent { | attrs }

278+section = motionComponentImpl "section"

279+

280+select :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_select) => ReactComponent { | attrs }

281+select = motionComponentImpl "select"

282+

283+small :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_small) => ReactComponent { | attrs }

284+small = motionComponentImpl "small"

285+

286+source :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_source) => ReactComponent { | attrs }

287+source = motionComponentImpl "source"

288+

289+span :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_span) => ReactComponent { | attrs }

290+span = motionComponentImpl "span"

291+

292+strong :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_strong) => ReactComponent { | attrs }

293+strong = motionComponentImpl "strong"

294+

295+style :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_style) => ReactComponent { | attrs }

296+style = motionComponentImpl "style"

297+

298+sub :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sub) => ReactComponent { | attrs }

299+sub = motionComponentImpl "sub"

300+

301+summary :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_summary) => ReactComponent { | attrs }

302+summary = motionComponentImpl "summary"

303+

304+sup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sup) => ReactComponent { | attrs }

305+sup = motionComponentImpl "sup"

306+

307+table :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_table) => ReactComponent { | attrs }

308+table = motionComponentImpl "table"

309+

310+tbody :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tbody) => ReactComponent { | attrs }

311+tbody = motionComponentImpl "tbody"

312+

313+td :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_td) => ReactComponent { | attrs }

314+td = motionComponentImpl "td"

315+

316+textarea :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_textarea) => ReactComponent { | attrs }

317+textarea = motionComponentImpl "textarea"

318+

319+tfoot :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tfoot) => ReactComponent { | attrs }

320+tfoot = motionComponentImpl "tfoot"

321+

322+th :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_th) => ReactComponent { | attrs }

323+th = motionComponentImpl "th"

324+

325+thead :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_thead) => ReactComponent { | attrs }

326+thead = motionComponentImpl "thead"

327+

328+time :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_time) => ReactComponent { | attrs }

329+time = motionComponentImpl "time"

330+

331+title :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_title) => ReactComponent { | attrs }

332+title = motionComponentImpl "title"

333+

334+tr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tr) => ReactComponent { | attrs }

335+tr = motionComponentImpl "tr"

336+

337+track :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_track) => ReactComponent { | attrs }

338+track = motionComponentImpl "track"

339+

340+u :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_u) => ReactComponent { | attrs }

341+u = motionComponentImpl "u"

342+

343+ul :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ul) => ReactComponent { | attrs }

344+ul = motionComponentImpl "ul"

345+

346+var :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_var) => ReactComponent { | attrs }

347+var = motionComponentImpl "var"

348+

349+video :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_video) => ReactComponent { | attrs }

350+video = motionComponentImpl "video"

351+

352+wbr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_wbr) => ReactComponent { | attrs }

353+wbr = motionComponentImpl "wbr"

354+

355+-- No support in React.Basic.Hooks

356+-- webview :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_webview) => ReactComponent { | attrs }

357+-- webview = motionComponentImpl "webview"

358+svgAnimate :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_animate) => ReactComponent { | attrs }

359+svgAnimate = motionComponentImpl "animate"

360+

361+circle :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_circle) => ReactComponent { | attrs }

362+circle = motionComponentImpl "circle"

363+

364+clipPath :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_clipPath) => ReactComponent { | attrs }

365+clipPath = motionComponentImpl "clipPath"

366+

367+defs :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_defs) => ReactComponent { | attrs }

368+defs = motionComponentImpl "defs"

369+

370+desc :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_desc) => ReactComponent { | attrs }

371+desc = motionComponentImpl "desc"

372+

373+ellipse :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_ellipse) => ReactComponent { | attrs }

374+ellipse = motionComponentImpl "ellipse"

375+

376+feBlend :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feBlend) => ReactComponent { | attrs }

377+feBlend = motionComponentImpl "feBlend"

378+

379+feColorMatrix :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feColorMatrix) => ReactComponent { | attrs }

380+feColorMatrix = motionComponentImpl "feColorMatrix"

381+

382+feComponentTransfer :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComponentTransfer) => ReactComponent { | attrs }

383+feComponentTransfer = motionComponentImpl "feComponentTransfer"

384+

385+feComposite :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComposite) => ReactComponent { | attrs }

386+feComposite = motionComponentImpl "feComposite"

387+

388+feConvolveMatrix :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feConvolveMatrix) => ReactComponent { | attrs }

389+feConvolveMatrix = motionComponentImpl "feConvolveMatrix"

390+

391+feDiffuseLighting :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDiffuseLighting) => ReactComponent { | attrs }

392+feDiffuseLighting = motionComponentImpl "feDiffuseLighting"

393+

394+feDisplacementMap :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDisplacementMap) => ReactComponent { | attrs }

395+feDisplacementMap = motionComponentImpl "feDisplacementMap"

396+

397+feDistantLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDistantLight) => ReactComponent { | attrs }

398+feDistantLight = motionComponentImpl "feDistantLight"

399+

400+feDropShadow :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDropShadow) => ReactComponent { | attrs }

401+feDropShadow = motionComponentImpl "feDropShadow"

402+

403+feFlood :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFlood) => ReactComponent { | attrs }

404+feFlood = motionComponentImpl "feFlood"

405+

406+feFuncA :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncA) => ReactComponent { | attrs }

407+feFuncA = motionComponentImpl "feFuncA"

408+

409+feFuncB :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncB) => ReactComponent { | attrs }

410+feFuncB = motionComponentImpl "feFuncB"

411+

412+feFuncG :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncG) => ReactComponent { | attrs }

413+feFuncG = motionComponentImpl "feFuncG"

414+

415+feFuncR :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncR) => ReactComponent { | attrs }

416+feFuncR = motionComponentImpl "feFuncR"

417+

418+feGaussianBlur :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feGaussianBlur) => ReactComponent { | attrs }

419+feGaussianBlur = motionComponentImpl "feGaussianBlur"

420+

421+feImage :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feImage) => ReactComponent { | attrs }

422+feImage = motionComponentImpl "feImage"

423+

424+feMerge :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMerge) => ReactComponent { | attrs }

425+feMerge = motionComponentImpl "feMerge"

426+

427+feMergeNode :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMergeNode) => ReactComponent { | attrs }

428+feMergeNode = motionComponentImpl "feMergeNode"

429+

430+feMorphology :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMorphology) => ReactComponent { | attrs }

431+feMorphology = motionComponentImpl "feMorphology"

432+

433+feOffset :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feOffset) => ReactComponent { | attrs }

434+feOffset = motionComponentImpl "feOffset"

435+

436+fePointLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_fePointLight) => ReactComponent { | attrs }

437+fePointLight = motionComponentImpl "fePointLight"

438+

439+feSpecularLighting :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpecularLighting) => ReactComponent { | attrs }

440+feSpecularLighting = motionComponentImpl "feSpecularLighting"

441+

442+feSpotLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpotLight) => ReactComponent { | attrs }

443+feSpotLight = motionComponentImpl "feSpotLight"

444+

445+feTile :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTile) => ReactComponent { | attrs }

446+feTile = motionComponentImpl "feTile"

447+

448+feTurbulence :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTurbulence) => ReactComponent { | attrs }

449+feTurbulence = motionComponentImpl "feTurbulence"

450+

451+filter :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_filter) => ReactComponent { | attrs }

452+filter = motionComponentImpl "filter"

453+

454+foreignObject :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_foreignObject) => ReactComponent { | attrs }

455+foreignObject = motionComponentImpl "foreignObject"

456+

457+g :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_g) => ReactComponent { | attrs }

458+g = motionComponentImpl "g"

459+

460+image :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_image) => ReactComponent { | attrs }

461+image = motionComponentImpl "image"

462+

463+line :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_line) => ReactComponent { | attrs }

464+line = motionComponentImpl "line"

465+

466+linearGradient :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_linearGradient) => ReactComponent { | attrs }

467+linearGradient = motionComponentImpl "linearGradient"

468+

469+marker :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_marker) => ReactComponent { | attrs }

470+marker = motionComponentImpl "marker"

471+

472+mask :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_mask) => ReactComponent { | attrs }

473+mask = motionComponentImpl "mask"

474+

475+metadata :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_metadata) => ReactComponent { | attrs }

476+metadata = motionComponentImpl "metadata"

477+

478+path :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_path) => ReactComponent { | attrs }

479+path = motionComponentImpl "path"

480+

481+pattern :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_pattern) => ReactComponent { | attrs }

482+pattern = motionComponentImpl "pattern"

483+

484+polygon :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polygon) => ReactComponent { | attrs }

485+polygon = motionComponentImpl "polygon"

486+

487+polyline :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polyline) => ReactComponent { | attrs }

488+polyline = motionComponentImpl "polyline"

489+

490+radialGradient :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_radialGradient) => ReactComponent { | attrs }

491+radialGradient = motionComponentImpl "radialGradient"

492+

493+rect :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_rect) => ReactComponent { | attrs }

494+rect = motionComponentImpl "rect"

495+

496+stop :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_stop) => ReactComponent { | attrs }

497+stop = motionComponentImpl "stop"

498+

499+svg :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_svg) => ReactComponent { | attrs }

500+svg = motionComponentImpl "svg"

501+

502+svgSwitch :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_switch) => ReactComponent { | attrs }

503+svgSwitch = motionComponentImpl "switch"

504+

505+symbol :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_symbol) => ReactComponent { | attrs }

506+symbol = motionComponentImpl "symbol"

507+

508+text :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_text) => ReactComponent { | attrs }

509+text = motionComponentImpl "text"

510+

511+textPath :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_textPath) => ReactComponent { | attrs }

512+textPath = motionComponentImpl "textPath"

513+

514+tspan :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_tspan) => ReactComponent { | attrs }

515+tspan = motionComponentImpl "tspan"

516+

517+use :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_use) => ReactComponent { | attrs }

518+use = motionComponentImpl "use"

519+

520+view :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_view) => ReactComponent { | attrs }

521+view = motionComponentImpl "view"

src/Framer/Motion/Types.jsnew file+4

@@ -0,0 +1,4 @@

1+const framerMotion = require("framer-motion")

2+

3+exports.infinity = Infinity

4+

src/Framer/Motion/Types.pursnew file+290

@@ -0,0 +1,290 @@

1+module Framer.Motion.Types where

2+

3+import Prelude

4+import Data.Nullable (Nullable)

5+import Data.Symbol (class IsSymbol, SProxy, reflectSymbol)

6+import Effect (Effect)

7+import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, mkEffectFn2)

8+import Foreign (Foreign, unsafeToForeign)

9+import Foreign.Object (Object)

10+import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmapWithIndex)

11+import Literals.Undefined (Undefined)

12+import React.Basic (JSX)

13+import React.Basic.DOM (CSS, css)

14+import React.Basic.Hooks (Ref)

15+import Unsafe.Coerce (unsafeCoerce)

16+import Untagged.Castable (class Castable, cast)

17+import Untagged.Union (type (|+|))

18+import Web.DOM (Node)

19+import Web.Event.Internal.Types (Event)

20+import Web.UIEvent.MouseEvent (MouseEvent)

21+import Yoga.Block.Internal (Id)

22+

23+type Transition

24+ = CSS |+| Undefined

25+

26+newtype VariantLabel

27+ = VariantLabel String

28+

29+data Target

30+ = Target

31+

32+type Exit

33+ = CSS |+| VariantLabel |+| Array VariantLabel |+| Undefined

34+

35+foreign import data AnimationControls ∷ Type

36+

37+prop ∷ ∀ a b. Castable a b => a -> b

38+prop = cast

39+

40+type Animate

41+ = CSS

42+ |+| VariantLabel

43+ |+| Array VariantLabel

44+ |+| AnimationControls

45+ |+| Undefined

46+

47+type Initial

48+ = Boolean |+| CSS |+| VariantLabel |+| Array VariantLabel |+| Undefined

49+

50+type Layout

51+ = Boolean |+| Undefined

52+

53+type Variants

54+ = CSS |+| Undefined

55+

56+type LayoutTransition

57+ = Boolean |+| Undefined

58+

59+type Drag

60+ = Boolean |+| String |+| Undefined

61+

62+type DragMomentum

63+ = Boolean |+| Undefined

64+

65+dragMomentum ∷ ∀ c. Castable c DragMomentum => c -> DragMomentum

66+dragMomentum = cast

67+

68+type DragConstraints

69+ = Ref (Nullable Node) |+| BoundingBox2D |+| Undefined

70+

71+type DragElastic

72+ = Boolean |+| Number |+| Undefined

73+

74+dragElastic ∷ ∀ c. Castable c DragElastic => c -> DragElastic

75+dragElastic = cast

76+

77+type BoundingBox2D

78+ = { left ∷ Int |+| Number |+| Undefined

79+ , right ∷ Int |+| Number |+| Undefined

80+ , top ∷ Int |+| Number |+| Undefined

81+ , bottom ∷ Int |+| Number |+| Undefined

82+ }

83+

84+boundingBox2D ∷ ∀ c. Castable c BoundingBox2D => c -> BoundingBox2D

85+boundingBox2D = cast

86+

87+type Point2D

88+ = { x ∷ Number, y ∷ Number }

89+

90+type PanInfo

91+ = { point ∷ Point2D, delta ∷ Point2D, offset ∷ Point2D, velocity ∷ Point2D }

92+

93+type OnDragStart

94+ = (EffectFn2 Event PanInfo Unit |+| Undefined)

95+

96+type OnDragEnd

97+ = (EffectFn2 Event PanInfo Unit |+| Undefined)

98+

99+type OnDrag

100+ = (EffectFn2 Event PanInfo Unit |+| Undefined)

101+

102+type WhileTap

103+ = TargetAndTransition |+| String |+| Undefined

104+

105+type OnTap

106+ = (EffectFn2 Event TapInfo Unit |+| Undefined)

107+

108+type OnTapStart

109+ = (EffectFn2 Event TapInfo Unit |+| Undefined)

110+

111+type OnTapEnd

112+ = (EffectFn2 Event TapInfo Unit |+| Undefined)

113+

114+type OnTapCancel

115+ = (EffectFn2 Event TapInfo Unit |+| Undefined)

116+

117+onTapStart ∷ (Event -> TapInfo -> Effect Unit) -> OnTapStart

118+onTapStart = cast <<< toEffectFn

119+

120+onTapEnd ∷ (Event -> TapInfo -> Effect Unit) -> OnTapEnd

121+onTapEnd = cast <<< toEffectFn

122+

123+onTap ∷ (Event -> TapInfo -> Effect Unit) -> OnTap

124+onTap fn2 = cast (mkEffectFn2 fn2)

125+

126+onTapCancel ∷ (Event -> TapInfo -> Effect Unit) -> OnTap

127+onTapCancel fn2 = cast (mkEffectFn2 fn2)

128+

129+type EventInfo

130+ = { point ∷ { x ∷ Number, y ∷ Number }

131+ }

132+

133+type WhileHover

134+ = (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

135+

136+type OnHoverEnd

137+ = (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

138+

139+type OnHoverStart

140+ = (EffectFn2 MouseEvent EventInfo Unit |+| Undefined)

141+

142+onHoverStart ∷ (MouseEvent -> EventInfo -> Effect Unit) -> OnHoverStart

143+onHoverStart = cast <<< toEffectFn

144+

145+onHoverEnd ∷ (MouseEvent -> EventInfo -> Effect Unit) -> OnHoverEnd

146+onHoverEnd = cast <<< toEffectFn

147+

148+whileHover ∷ ∀ c. Castable c WhileHover => c -> WhileHover

149+whileHover = cast

150+

151+type TapInfo

152+ = { x ∷ Number, y ∷ Number }

153+

154+-- Can contain "transition" and "transitionEnd"

155+type TargetAndTransition

156+ = CSS

157+

158+type DragPropagation

159+ = Boolean |+| Undefined

160+

161+whileTap ∷ ∀ c. Castable c WhileTap => c -> WhileTap

162+whileTap = cast

163+

164+class EffectFnMaker fn effectFn | fn -> effectFn where

165+ toEffectFn ∷ fn -> effectFn

166+

167+instance callbackableEffectFn2 ∷ EffectFnMaker (a -> b -> Effect c) (EffectFn2 a b c) where

168+ toEffectFn = mkEffectFn2

169+

170+instance callbackableEffectFn1 ∷ EffectFnMaker (a -> Effect b) (EffectFn1 a b) where

171+ toEffectFn = mkEffectFn1

172+

173+callback ∷ ∀ a c f. Castable c a => EffectFnMaker f c => f -> a

174+callback = cast <<< toEffectFn

175+

176+onDragStart ∷ (Event -> PanInfo -> Effect Unit) -> OnDragStart

177+onDragStart = cast <<< toEffectFn

178+

179+onDragEnd ∷ (Event -> PanInfo -> Effect Unit) -> OnDragEnd

180+onDragEnd = cast <<< toEffectFn

181+

182+onDrag ∷ (Event -> PanInfo -> Effect Unit) -> OnDrag

183+onDrag fn2 = cast (mkEffectFn2 fn2)

184+

185+customProp ∷ ∀ a. a -> Foreign

186+customProp = unsafeToForeign

187+

188+type LayoutId

189+ = String |+| Undefined

190+

191+layoutId ∷ ∀ a. Castable a LayoutId => a -> LayoutId

192+layoutId = cast

193+

194+type MotionPropsF f r

195+ = ( initial ∷ f Initial

196+ , animate ∷ f Animate

197+ , custom ∷ f Foreign

198+ , drag ∷ f Drag

199+ , dragMomentum ∷ f DragMomentum

200+ , dragElastic ∷ f DragElastic

201+ , onDragStart ∷ f OnDragStart

202+ , onDrag ∷ f OnDrag

203+ , onDragEnd ∷ f OnDragEnd

204+ , dragConstraints ∷ f DragConstraints

205+ , dragPropagation ∷ f DragPropagation

206+ , variants ∷ f Variants

207+ , transition ∷ f Transition

208+ , layout ∷ f Layout

209+ , layoutId ∷ f LayoutId

210+ , whileTap ∷ f WhileTap

211+ , onTap ∷ f OnTap

212+ , onTapStart ∷ f OnTapStart

213+ , onTapEnd ∷ f OnTapEnd

214+ , onTapCancel ∷ f OnTapCancel

215+ , whileHover ∷ f WhileHover

216+ , onHoverStart ∷ f OnHoverStart

217+ , onHoverEnd ∷ f OnHoverEnd

218+ , exit ∷ f Exit

219+ | r

220+ )

221+

222+type MotionProps r

223+ = MotionPropsF Id r

224+

225+animate ∷ ∀ a. Castable a Animate => a -> Animate

226+animate = cast

227+

228+initial ∷ ∀ a. Castable a Initial => a -> Initial

229+initial = cast

230+

231+transition ∷ ∀ r. { | r } -> Transition

232+transition = cast <<< css

233+

234+drag ∷ ∀ a. Castable a Drag => a -> Drag

235+drag = cast

236+

237+dragConstraints ∷ ∀ a. Castable a BoundingBox2D => a -> DragConstraints

238+dragConstraints x = cast ((cast x) ∷ BoundingBox2D)

239+

240+dragPropagation ∷ ∀ a. Castable a DragPropagation => a -> DragPropagation

241+dragPropagation = cast

242+

243+exit ∷ ∀ a. Castable a Exit => a -> Exit

244+exit = cast

245+

246+variants ∷ ∀ r. { | r } -> Variants

247+variants = cast <<< css

248+

249+variantsFromObject ∷ ∀ o. Object o -> Variants

250+variantsFromObject = cast <<< (unsafeCoerce ∷ _ -> CSS)

251+

252+layout ∷ ∀ a. Castable a Layout => a -> Layout

253+layout = cast

254+

255+data MakeVariantLabel

256+ = MakeVariantLabel

257+

258+instance makeVariantLabels' ∷

259+ (IsSymbol sym) =>

260+ MappingWithIndex MakeVariantLabel (SProxy sym) a VariantLabel where

261+ mappingWithIndex MakeVariantLabel prop' _ = VariantLabel (reflectSymbol prop')

262+

263+makeVariantLabels ∷ ∀ a b. HMapWithIndex MakeVariantLabel a b => a -> b

264+makeVariantLabels = hmapWithIndex MakeVariantLabel

265+

266+foreign import data Infinity ∷ Type

267+

268+foreign import infinity ∷ Infinity

269+

270+type AnimatePresenceProps

271+ = ( initial ∷ Boolean

272+ , custom ∷ ∀ a. a

273+ , exitBeforeEnter ∷ Boolean

274+ , onExitComplete ∷ Effect Unit

275+ , children ∷ Array JSX

276+ )

277+

278+type AnimateSharedLayoutProps

279+ = ( type ∷ AnimateSharedLayoutType

280+ , children ∷ Array JSX

281+ )

282+

283+newtype AnimateSharedLayoutType

284+ = AnimateSharedLayoutType String

285+

286+switch ∷ AnimateSharedLayoutType

287+switch = AnimateSharedLayoutType "switch"

288+

289+crossfade ∷ AnimateSharedLayoutType

290+crossfade = AnimateSharedLayoutType "crossfade"

src/Yoga/Block.purs+12

@@ -2,9 +2,11 @@ module Yoga.Block where

2

3import Prim.Row (class Union)

4import React.Basic (ReactComponent)

5+import Yoga.Block.Atom.Button as Button

5import Yoga.Block.Atom.Icon as Icon

6import Yoga.Block.Atom.Icon as Icon

6import Yoga.Block.Atom.Range as Range

7import Yoga.Block.Atom.Range as Range

7import Yoga.Block.Atom.Segmented as Segmented

8import Yoga.Block.Atom.Segmented as Segmented

9+import Yoga.Block.Atom.Toggle as Toggle

8import Yoga.Block.Container as Container

10import Yoga.Block.Container as Container

9import Yoga.Block.Layout.Box as Box

11import Yoga.Block.Layout.Box as Box

10import Yoga.Block.Layout.Centre as Centre

12import Yoga.Block.Layout.Centre as Centre

@@ -12,11 +14,15 @@ import Yoga.Block.Layout.Cluster as Cluster

12import Yoga.Block.Layout.Imposter as Imposter

14import Yoga.Block.Layout.Imposter as Imposter

13import Yoga.Block.Layout.Sidebar as Sidebar

15import Yoga.Block.Layout.Sidebar as Sidebar

14import Yoga.Block.Layout.Stack as Stack

16import Yoga.Block.Layout.Stack as Stack

17+import Yoga.Block.Layout.Switcher as Switcher

15import Yoga.Block.Modal as Modal

18import Yoga.Block.Modal as Modal

16

19

17box ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

20box ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

18box = Box.component

21box = Box.component

19

22

23+button ∷ ∀ p q. Union p q Button.Props => ReactComponent { | p }

24+button = Button.component

25+

20centre ∷ ∀ p q. Union p q Centre.Props => ReactComponent { | p }

26centre ∷ ∀ p q. Union p q Centre.Props => ReactComponent { | p }

21centre = Centre.component

27centre = Centre.component

22

28

@@ -46,3 +52,9 @@ sidebar = Sidebar.component

46

52

47stack ∷ ∀ p q. Union p q Stack.Props => ReactComponent { | p }

53stack ∷ ∀ p q. Union p q Stack.Props => ReactComponent { | p }

48stack = Stack.component

54stack = Stack.component

55+

56+switcher ∷ ∀ p q. Union p q Switcher.Props => ReactComponent { | p }

57+switcher = Switcher.component

58+

59+toggle ∷ ∀ p q. Union p q Toggle.Props => ReactComponent { | Toggle.MandatoryProps p }

60+toggle = Toggle.component

src/Yoga/Block/Atom/Button.pursnew file+5

@@ -0,0 +1,5 @@

1+module Yoga.Block.Atom.Button

2+ ( module Yoga.Block.Atom.Button.View

3+ ) where

4+

5+import Yoga.Block.Atom.Button.View (component, Props)

src/Yoga/Block/Atom/Button/Style.purs+1−1

@@ -70,7 +70,7 @@ button =

70 , color: str colour.highlightText

71 , """&:focus-visible""":

72 nest

73− { borderColor: str $ colour.background0

73+ { borderColor: str "inherit"

74 }

75 , """&:active""":

76 nest

src/Yoga/Block/Atom/CodeInput/Style.purs+6−2

@@ -24,12 +24,16 @@ codeInput props = styles <>? props.css

24 , fontSize: str "var(--s0)"

25 , lineHeight: str "var(--s0)"

26 , width: str $ i "calc(" (props.maxLength ?|| 10) "ch + 4.3 * var(--s-5))"

27− , padding: str "calc(var(--s-5) - 1px)"

27+ , padding: str "calc(var(--s-4) - 1px)"

28 , color: str colour.text

29 , "&:focus":

30+ nest

31+ { outline: none

32+ }

33+ , "&:focus-visible":

30 nest

34 nest

31 { animation: plopAnimation <> str " 260ms ease-in"

35 { animation: plopAnimation <> str " 260ms ease-in"

32− , border: str $ "solid var(--s-5) " <> colour.highlight

36+ , border: str $ "solid var(--s-4) " <> colour.highlight

33 , padding: _0

37 , padding: _0

34 }

38 }

35 }

39 }

src/Yoga/Block/Atom/Icon/Story.purs+2

@@ -33,5 +33,7 @@ icon = do

33 [ R.h2_ [ R.text "Icon" ]

34 , element Icon.component { icon: SVGIcon.on }

35 , element Icon.component { icon: SVGIcon.off }

36+ , element Icon.component { icon: SVGIcon.sun }

37+ , element Icon.component { icon: SVGIcon.moon }

36 ]

38 ]

37 ]

39 ]

src/Yoga/Block/Atom/Icon/Style.purs+3−5

@@ -19,9 +19,7 @@ span props =

19 css

20 { "--stroke-colour": (props.stroke <|> props.colour) ?|| (str colour.text)

21 , "--fill-colour": (props.fill <|> props.colour) ?|| (str "transparent")

22− , display: inlineFlex

22+ , display: inlineBlock

23− , justifyContent: center

24− , alignItems: center

25 , margin: _0

23 , margin: _0

26 , padding: _0

24 , padding: _0

27 , width

25 , width

@@ -36,6 +34,6 @@ span props =

36 }

34 }

37 }

35 }

38 where

36 where

39− width = (props.width <|> props.size) ?|| (str "auto")

37+ width = (props.width <|> props.size) ?|| (str "1em")

40

38

41− height = (props.height <|> props.size) ?|| (str "1ch")

39+ height = (props.height <|> props.size) ?|| (str "1em")

src/Yoga/Block/Atom/Input/Types.purs+4−3

@@ -4,7 +4,7 @@ import Prelude

4

5-- No support for "button" because of the dedicated

6-- HTML Element

7−data HTMLInput

7+data HTMLInputType

8 = Checkbox

9 | Color

10 | Date

@@ -26,9 +26,10 @@ data HTMLInput

26 | Time

27 | Url

28 | Week

29−derive instance eqHTMLInput ∷ Eq HTMLInput

30

29

30+derive instance eqHTMLInput ∷ Eq HTMLInputType

31+

31−toString ∷ HTMLInput -> String

32+toString ∷ HTMLInputType -> String

32toString = case _ of

33toString = case _ of

33 Checkbox -> "checkbox"

34 Checkbox -> "checkbox"

34 Color -> "color"

35 Color -> "color"

src/Yoga/Block/Atom/Input/View.purs+30−40

@@ -2,19 +2,21 @@ module Yoga.Block.Atom.Input.View where

2

3import Yoga.Prelude.View

4import Data.String.NonEmpty (NonEmptyString)

5+import Data.Symbol (SProxy(..))

5import Foreign.Object (Object)

6import Foreign.Object (Object)

6import Foreign.Object as Object

7import Foreign.Object as Object

7import Framer.Motion as M

8import Framer.Motion as M

8import React.Basic.DOM (css)

9import React.Basic.DOM (css)

9import React.Basic.DOM as R

10import React.Basic.DOM as R

10import React.Basic.Hooks as React

11import React.Basic.Hooks as React

11−import Unsafe.Coerce (unsafeCoerce)

12+import Record.Builder as RB

12import Web.HTML.HTMLInputElement as InputElement

13import Web.HTML.HTMLInputElement as InputElement

13import Yoga.Block.Atom.Icon as Icon

14import Yoga.Block.Atom.Icon as Icon

14import Yoga.Block.Atom.Input.Style as Style

15import Yoga.Block.Atom.Input.Style as Style

15−import Yoga.Block.Atom.Input.Types (HTMLInput)

16+import Yoga.Block.Atom.Input.Types (HTMLInputType)

16−import Yoga.Block.Atom.Input.Types as HTMLInput

17+import Yoga.Block.Atom.Input.Types as InputTypes

17import Yoga.Block.Atom.Input.View.Container (rawContainer)

18import Yoga.Block.Atom.Input.View.Container (rawContainer)

19+import Yoga.Block.Atom.Input.View.HTMLInput as HTMLInput

18import Yoga.Block.Atom.Input.View.Label as Label

20import Yoga.Block.Atom.Input.View.Label as Label

19import Yoga.Block.Icon.SVG as SVGIcon

21import Yoga.Block.Icon.SVG as SVGIcon

20

22

@@ -22,13 +24,10 @@ type PropsF f =

22 ( leading ∷ f JSX

24 ( leading ∷ f JSX

23 , trailing ∷ f JSX

25 , trailing ∷ f JSX

24 , label ∷ f NonEmptyString

26 , label ∷ f NonEmptyString

25− , type ∷ f HTMLInput

27+ , type ∷ f HTMLInputType

26 | Style.Props f (InputPropsF f ())

28 | Style.Props f (InputPropsF f ())

27 )

29 )

28

30

29−coerceProps ∷ { | PropsOptional } -> { | Props }

30−coerceProps = unsafeCoerce

31−

32type Props =

31type Props =

33 PropsF Id

32 PropsF Id

34

33

@@ -50,23 +49,6 @@ mkLeftIcon icon =

50 }

49 }

51 ]

50 ]

52

51

53−inputComponent ∷ ∀ p q. Union p q Props => ReactComponent { | p }

54−inputComponent = rawInput

55−

56−inputComponentOptional ∷ ∀ p q. Union p q PropsOptional => ReactComponent { | p }

57−inputComponentOptional = rawInput

58−

59−rawInput ∷ ∀ p. ReactComponent { | p }

60−rawInput =

61− mkForwardRefComponent "Input" do

62− \(props ∷ { | PropsOptional }) ref -> React.do

63− let

64− result = inputWrapper [ input ]

65− inputWrapper = div </* { className: "ry-input-wrapper", css: Style.inputWrapper }

66− input = emotionInput ref inputProps { className: "ry-input", css: Style.input }

67− inputProps = props { type = HTMLInput.toString <$> props.type }

68− pure result

69−

70rawComponent ∷ ∀ p. ReactComponent (Record p)

52rawComponent ∷ ∀ p. ReactComponent (Record p)

71rawComponent =

53rawComponent =

72 mkForwardRefComponent "InputContainer" do

54 mkForwardRefComponent "InputContainer" do

@@ -110,7 +92,7 @@ rawComponent =

110 leading ∷ Maybe JSX

92 leading ∷ Maybe JSX

111 leading =

93 leading =

112 opToMaybe props.leading

94 opToMaybe props.leading

113− <|> if (props.type <#> (_ == HTMLInput.Search)) ?|| false then

95+ <|> if (props.type <#> (_ == InputTypes.Search)) ?|| false then

114 Just $ mkLeftIcon SVGIcon.magnifyingGlass

96 Just $ mkLeftIcon SVGIcon.magnifyingGlass

115 else

97 else

116 Nothing

98 Nothing

@@ -131,20 +113,28 @@ rawComponent =

131 setHasValue (v /= "")

113 setHasValue (v /= "")

132 )

114 )

133 onFocus = handler preventDefault (const $ unless hasFocus $ setHasFocus true)

115 onFocus = handler preventDefault (const $ unless hasFocus $ setHasFocus true)

116+ inputProps =

117+ props

118+ { onFocus = composeHandler onFocus props.onFocus

119+ , onBlur = composeHandler onBlur props.onBlur

120+ , ref = ref

121+ , placeholder = maybePlaceholder # maybeToOp

122+ , _aria =

123+ if props.label # opToMaybe # isJust then

124+ aria # Object.insert "labelledby" labelId

125+ else

126+ aria

127+ }

134 theInput =

128 theInput =

135− inputComponentOptional

129+ HTMLInput.componentOptional

136− </> ( (cast ∷ _ -> { | PropsOptional })

130+ </> ( (cast ∷ _ -> { | HTMLInput.PropsOptional })

137− $ props

131+ ( inputProps

138− { onFocus = composeHandler onFocus props.onFocus

132+ # RB.build

139− , onBlur = composeHandler onBlur props.onBlur

133+ ( RB.delete (SProxy ∷ _ "leading")

140− , ref = ref

134+ >>> RB.delete (SProxy ∷ _ "label")

141− , placeholder = maybePlaceholder # maybeToOp

135+ >>> RB.delete (SProxy ∷ _ "trailing")

142− , _aria =

136+ )

143− if props.label # opToMaybe # isJust then

137+ )

144− aria # Object.insert "labelledby" labelId

145− else

146− aria

147− }

148 )

138 )

149 inputContainer =

139 inputContainer =

150 rawContainer

140 rawContainer

@@ -159,7 +149,7 @@ rawComponent =

159 ]

149 ]

160 pure

150 pure

161 $ case props.type # opToMaybe of

151 $ case props.type # opToMaybe of

162− Just HTMLInput.Password -> password </> props

152+ Just InputTypes.Password -> password </> props

163 _ -> case maybeLabelText of

153 _ -> case maybeLabelText of

164 Nothing -> inputContainer

154 Nothing -> inputContainer

165 Just labelText ->

155 Just labelText ->

@@ -221,7 +211,7 @@ password =

221 , R.div' </ {}

211 , R.div' </ {}

222 /> [ emotionInput

212 /> [ emotionInput

223 ref

213 ref

224− (props { type = HTMLInput.toString <$> props.type })

214+ (props { type = InputTypes.toString <$> props.type })

225 { className: "ry-input"

215 { className: "ry-input"

226 , css: Style.input

216 , css: Style.input

227 , type: if hidePassword then "password" else "text"

217 , type: if hidePassword then "password" else "text"

src/Yoga/Block/Atom/Input/View/Container.purs+47−42

@@ -10,33 +10,33 @@ import React.Basic.DOM (CSS, css)

10import React.Basic.Emotion (Style)

11import Yoga.Block.Atom.Input.Style as Style

12

13−type PropsF f =

13+type PropsF f

14− ( css ∷ f Style

14+ = ( css ∷ f Style

15− , isInvalid ∷ f Boolean

15+ , isInvalid ∷ f Boolean

16− | Style.Props f (MandatoryProps ())

16+ | Style.Props f (MandatoryProps ())

17− )

17+ )

18

19−type MandatoryProps r =

19+type MandatoryProps r

20− ( children ∷ Array JSX

20+ = ( children ∷ Array JSX

21− , hasFocus ∷ Boolean

21+ , hasFocus ∷ Boolean

22− | r

22+ | r

23− )

23+ )

24

25−type Props =

25+type Props

26− PropsF Id

26+ = PropsF Id

27

28−type PropsOptional =

28+type PropsOptional

29− PropsF OptionalProp

29+ = PropsF OptionalProp

30

31component ∷ ∀ p q. Union p q Props => ReactComponent { | MandatoryProps p }

32component = rawContainer

33

34−type Propski =

34+type Propski

35− { css ∷ OptionalProp Style

35+ = { css ∷ OptionalProp Style

36− , hasFocus ∷ Boolean

36+ , hasFocus ∷ Boolean

37− , isInvalid ∷ OptionalProp Boolean

37+ , isInvalid ∷ OptionalProp Boolean

38− , children ∷ Array JSX

38+ , children ∷ Array JSX

39− }

39+ }

40

41rawContainer ∷ ∀ p. ReactComponent { | p }

42rawContainer =

@@ -52,11 +52,11 @@ rawContainer =

52 { className: "ry-input-container"

53 , css: Style.inputContainer props

54 , _data:

55− props.isInvalid

55+ props.isInvalid

56− # foldMap \isInvalid ->

56+ # foldMap \isInvalid ->

57− Object.fromHomogeneous

57+ Object.fromHomogeneous

58− { "invalid": show isInvalid

58+ { "invalid": show isInvalid

59− }

59+ }

60 , ref

61 }

62 /> props.children

@@ -64,10 +64,14 @@ rawContainer =

64

65drawPathUntil ∷ Int -> Array Point -> String

66drawPathUntil idx thePath = do

67+ let

67− let fn { x, y } = i x "%" " " y "%"

68+ fn { x, y } = i x "%" " " y "%"

69+ let

68− let firstFew = Array.take idx thePath

70+ firstFew = Array.take idx thePath

71+ let

69− let lastFew = Array.drop idx thePath $> (Array.last firstFew # fromMaybe' \_ -> unsafeCrashWith "ogod")

72+ lastFew = Array.drop idx thePath $> (Array.last firstFew # fromMaybe' \_ -> unsafeCrashWith "ogod")

73+ let

70− let rendered = intercalate "," $ fn <$> (firstFew <> lastFew)

74+ rendered = intercalate "," $ fn <$> (firstFew <> lastFew)

71 i "polygon(" rendered ")"

75 i "polygon(" rendered ")"

72

76

73path ∷ Array Point

77path ∷ Array Point

@@ -83,6 +87,7 @@ mkPath borderX borderY = do

83 , {- ⌝ -} p (100 - borderX) borderY

87 , {- ⌝ -} p (100 - borderX) borderY

84 , {- ⌜ -} p borderX borderY

88 , {- ⌜ -} p borderX borderY

85 ]

89 ]

90+

86 outside =

91 outside =

87 [ {-⌜ -} p 0 0

92 [ {-⌜ -} p 0 0

88 , {-⌞ -} p 0 100

93 , {-⌞ -} p 0 100

@@ -98,8 +103,8 @@ mkPath borderX borderY = do

98 ]

103 ]

99 inside <> outside <> (Array.reverse inside)

104 inside <> outside <> (Array.reverse inside)

100 where

105 where

101− p ∷ Int -> Int -> Point

106+ p ∷ Int -> Int -> Point

102− p x y = { x, y }

107+ p x y = { x, y }

103

108

104containerVariantLabels ∷

109containerVariantLabels ∷

105 { blurred ∷ M.VariantLabel

110 { blurred ∷ M.VariantLabel

@@ -113,18 +118,18 @@ containerVariants ∷

113 }

118 }

114containerVariants =

119containerVariants =

115 { focussed:

120 { focussed:

116− css

121+ css

117− { clipPath

122+ { clipPath

118− , transition: { duration: 0.6 }

123+ , transition: { duration: 0.6 }

119− }

124+ }

120 , blurred:

125 , blurred:

121− css

126+ css

122− { clipPath:

127+ { clipPath:

123− drawPathUntil (Array.length path + 1) path

128+ drawPathUntil (Array.length path + 1) path

124− }

129+ }

125 }

130 }

126 where

131 where

127− clipPath = 6 Array... (Array.length path) <#> \ln -> drawPathUntil ln path

132+ clipPath = 6 Array... (Array.length path) <#> \ln -> drawPathUntil ln path

128

133

129−type Point =

134+type Point

130− { x ∷ Int, y ∷ Int }

135+ = { x ∷ Int, y ∷ Int }

src/Yoga/Block/Atom/Input/View/HTMLInput.pursnew file+40

@@ -0,0 +1,40 @@

1+module Yoga.Block.Atom.Input.View.HTMLInput

2+ ( Props

3+ , PropsF

4+ , PropsOptional

5+ , component

6+ , componentOptional

7+ ) where

8+

9+import Yoga.Prelude.View

10+import Yoga.Block.Atom.Input.Style as Style

11+import Yoga.Block.Atom.Input.Types (HTMLInputType)

12+import Yoga.Block.Atom.Input.Types as HTMLInput

13+

14+type PropsF f =

15+ ( type ∷ f HTMLInputType

16+ | Style.Props f (InputPropsF f ())

17+ )

18+

19+type Props =

20+ PropsF Id

21+

22+type PropsOptional =

23+ PropsF OptionalProp

24+

25+component ∷ ∀ p q. Union p q Props => ReactComponent { | p }

26+component = rawComponent

27+

28+componentOptional ∷ ∀ p q. Union p q PropsOptional => ReactComponent { | p }

29+componentOptional = rawComponent

30+

31+rawComponent ∷ ∀ p. ReactComponent { | p }

32+rawComponent =

33+ mkForwardRefComponent "Input" do

34+ \(props ∷ { | PropsOptional }) ref -> React.do

35+ let

36+ result = inputWrapper [ input ]

37+ inputWrapper = div </* { className: "ry-input-wrapper", css: Style.inputWrapper }

38+ input = emotionInput ref inputProps { className: "ry-input", css: Style.input }

39+ inputProps = props { type = HTMLInput.toString <$> props.type }

40+ pure result

src/Yoga/Block/Atom/Input/View/Label.purs+30−25

@@ -11,18 +11,18 @@ import React.Basic.Hooks (reactComponent)

11import React.Basic.Hooks as React

12import Yoga.Block.Atom.Input.Style as Style

13

14−type Props =

14+type Props

15− { onClickLargeLabel ∷ EventHandler

15+ = { onClickLargeLabel ∷ EventHandler

16− , isRequired ∷ Boolean

16+ , isRequired ∷ Boolean

17− , isInvalid ∷ Boolean

17+ , isInvalid ∷ Boolean

18− , isFocussed ∷ Boolean

18+ , isFocussed ∷ Boolean

19− , renderLargeLabel ∷ Boolean

19+ , renderLargeLabel ∷ Boolean

20− , inputRef ∷ NodeRef

20+ , inputRef ∷ NodeRef

21− , parentRef ∷ NodeRef

21+ , parentRef ∷ NodeRef

22− , labelId ∷ String

22+ , labelId ∷ String

23− , inputId ∷ String

23+ , inputId ∷ String

24− , labelText ∷ NonEmptyString

24+ , labelText ∷ NonEmptyString

25− }

25+ }

26

27component ∷ ReactComponent Props

28component =

@@ -42,6 +42,7 @@ component =

42 -- UI

43 let

44 text = R.text $ NonEmptyString.toString props.labelText

45+

45 result =

46 result =

46 container

47 container

47 [ sharedLayout

48 [ sharedLayout

@@ -51,8 +52,11 @@ component =

51 ]

52 ]

53 ]

54 ]

55+

54 container = div </* { className: "ry-input-label-container", css: Style.labelContainer }

56 container = div </* { className: "ry-input-label-container", css: Style.labelContainer }

57+

55 sharedLayout = M.animateSharedLayout </ { type: M.switch }

58 sharedLayout = M.animateSharedLayout </ { type: M.switch }

59+

56 labelContainer =

60 labelContainer =

57 guard (inputBbox /= zero && parentBbox /= zero)

61 guard (inputBbox /= zero && parentBbox /= zero)

58 $ M.div

62 $ M.div

@@ -60,23 +64,24 @@ component =

60 , layout: M.layout true

64 , layout: M.layout true

61 , layoutId: M.layoutId "ry-input-label"

65 , layoutId: M.layoutId "ry-input-label"

62 , css:

66 , css:

63− if props.renderLargeLabel then

67+ if props.renderLargeLabel then

64− Style.labelLarge

68+ Style.labelLarge

65− { left: inputBbox.left - parentBbox.left

69+ { left: inputBbox.left - parentBbox.left

66− , width: inputBbox.width

70+ , width: inputBbox.width

67− , top: inputBbox.top - parentBbox.top

71+ , top: inputBbox.top - parentBbox.top

68− }

72+ }

69− else

73+ else

70− Style.labelSmall

74+ Style.labelSmall

71 , transition: M.transition { duration: 0.18, ease: "easeOut" }

75 , transition: M.transition { duration: 0.18, ease: "easeOut" }

72 , _data:

76 , _data:

73− Object.fromHomogeneous

77+ Object.fromHomogeneous

74− { "has-focus": show props.isFocussed

78+ { "has-focus": show props.isFocussed

75− , "invalid": show props.isInvalid

79+ , "invalid": show props.isInvalid

76− , "required": show props.isRequired

80+ , "required": show props.isRequired

77− }

81+ }

78 , initial: M.initial false

82 , initial: M.initial false

79 }

83 }

84+

80 labelSpan =

85 labelSpan =

81 M.span

86 M.span

82 </ { onClick: props.onClickLargeLabel

87 </ { onClick: props.onClickLargeLabel

src/Yoga/Block/Atom/Range/Style.purs+2−2

@@ -90,7 +90,7 @@ track =

90 }

91

92disabled ∷ Style

93−disabled = css { backgroundColor: str colour.background30 }

93+disabled = css { backgroundColor: str colour.backgroundLayer2 }

94

95filled ∷ Style

96filled =

@@ -106,5 +106,5 @@ notFilled =

106 <> css

107 { width: str "calc((1 - (var(--val)/var(--max))) * 100%)"

108 , right: _0

109− , backgroundColor: str colour.background40

109+ , backgroundColor: str colour.backgroundLayer4

110 }

src/Yoga/Block/Atom/Segmented/Style.purs+9−9

@@ -29,11 +29,11 @@ segmented = styles

29 , display: flex

30 , flex: str "1"

31 , minHeight: str "min-content"

32− , background: str colour.background10

32+ , background: str colour.backgroundLayer3

33 , boxShadow: str "inset 0 1 0 rgba(0,0,0,0.1)"

34− , borderRadius: var "--s-1"

34+ , borderRadius: str "calc(var(--s-1) * 0.8)"

35− , border: str $ i "1px solid " colour.background15

35+ , border: str $ i "1px solid " colour.interfaceBackground

36− , borderBottom: str $ i "1px solid " colour.background20

36+ , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

37 , padding: _0

38 , overflow: scroll

39 , userSelect: none

@@ -43,8 +43,8 @@ activeElement ∷ Style

43activeElement =

44 css

45 { position: absolute

46− , borderRadius: str "calc(var(--s-1) * 0.75)"

46+ , borderRadius: str "calc(var(--s-1) * 0.8)"

47− , background: str colour.interfaceBackground

47+ , background: str colour.backgroundLayer5

48 , borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight

49 , borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow

50 , boxShadow: str "0 1px 2px rgba(20,20,20,0.67)"

@@ -61,11 +61,11 @@ button { isFirst, isLast } =

61 , border: none

62 , padding: _0

63 , fontSize: str "var(--s0)"

64− , marginLeft: str if isFirst then "1px" else "0"

64+ , marginLeft: _0

65− , marginRight: str if isLast then "1px" else "0"

65+ , marginRight: _0

66 , boxSizing: borderBox

67 , zIndex: str "3"

68− , minWidth: var "--s3"

68+ , minWidth: var "--s2"

69 , "&:active": nest { outline: str "0" }

70 , "&:focus": nest { outline: none }

71 , "&:focus > .ry-segmented-button__content":

src/Yoga/Block/Atom/Segmented/View.purs+15−15

@@ -8,11 +8,9 @@ import Data.Traversable (traverse)

8import Data.TwoOrMore (TwoOrMore)

9import Data.TwoOrMore as TwoOrMore

10import Effect.Aff (delay)

11+import Effect.Class.Console (log)

11import Effect.Unsafe (unsafePerformEffect)

12import Effect.Unsafe (unsafePerformEffect)

12import Foreign.Object as Object

13import Foreign.Object as Object

13−import Yoga.Block.Hook.Key as Key

14−import Yoga.Block.Hook.UseResize (useResize)

15−import Yoga.Block.Hook.UseKeyDown (useKeyDown)

16import Math as Math

14import Math as Math

17import React.Basic.DOM (css)

15import React.Basic.DOM (css)

18import React.Basic.DOM as R

16import React.Basic.DOM as R

@@ -23,15 +21,18 @@ import React.Basic.Hooks.Aff (useAff)

23import Web.HTML.HTMLElement as HTMLElement

21import Web.HTML.HTMLElement as HTMLElement

24import Yoga.Block.Atom.Segmented.Style as Style

22import Yoga.Block.Atom.Segmented.Style as Style

25import Yoga.Block.Atom.Segmented.View.ActiveIndicator as ActiveIndicator

23import Yoga.Block.Atom.Segmented.View.ActiveIndicator as ActiveIndicator

24+import Yoga.Block.Hook.Key as Key

25+import Yoga.Block.Hook.UseKeyDown (useKeyDown)

26+import Yoga.Block.Hook.UseResize (useResize)

26

27

27−type Item

28+type Item =

28− = { id ∷ String, value ∷ String }

29+ { id ∷ String, value ∷ String }

29

30

30−type Props

31+type Props =

31− = { buttonContents ∷ TwoOrMore Item

32+ { buttonContents ∷ TwoOrMore Item

32− , activeIndex ∷ Int

33+ , activeIndex ∷ Int

33− , updateActiveIndex ∷ Int -> Effect Unit

34+ , updateActiveIndex ∷ Int -> Effect Unit

34− }

35+ }

35

36

36component ∷ ReactComponent Props

37component ∷ ReactComponent Props

37component =

38component =

@@ -68,13 +69,14 @@ component =

68 -------------------------------------------

69 -------------------------------------------

69 -- Ensure redraw on window resize

70 -- Ensure redraw on window resize

70 windowSize <- useResize

71 windowSize <- useResize

71− useAff { windowSize } do

72+ useAff windowSize.width do

72 delay

73 delay

73 if Math.abs (windowWidth - windowSize.width) < 10.0 then

74 if Math.abs (windowWidth - windowSize.width) < 10.0 then

74 100.0 # Milliseconds

75 100.0 # Milliseconds

75 else

76 else

76 10.0 # Milliseconds

77 10.0 # Milliseconds

77 liftEffect do -- force rerender

78 liftEffect do -- force rerender

79+ log "Forcing rerender"

78 refs <- traverse (const createRef) buttonContents

80 refs <- traverse (const createRef) buttonContents

79 setItemRefs (Just refs)

81 setItemRefs (Just refs)

80 setWindowWidth windowSize.width

82 setWindowWidth windowSize.width

@@ -85,10 +87,8 @@ component =

85 refsAndContents = TwoOrMore.zip buttonContents <$> itemRefs

87 refsAndContents = TwoOrMore.zip buttonContents <$> itemRefs

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

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

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

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

88− let

89− isLast = idx + 1 == TwoOrMore.length buttonContents

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

90− let

91− isFirst = idx == 0

91+ let isFirst = idx == 0

92 button

93 </* { key: show idx

94 , ref

src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs+57−76

@@ -9,7 +9,6 @@ import Effect.Unsafe (unsafePerformEffect)

9import Foreign.Object as Object

10import Framer.Motion (VariantLabel)

11import Framer.Motion as Motion

12−import Yoga.Block.Hook.Scroll (useScrollPosition)

13import Literals.Undefined (undefined)

12import Literals.Undefined (undefined)

14import MotionValue (useMotionValue)

13import MotionValue (useMotionValue)

15import MotionValue as MotionValue

14import MotionValue as MotionValue

@@ -20,13 +19,14 @@ import React.Basic.Hooks (reactComponent)

20import React.Basic.Hooks as React

19import React.Basic.Hooks as React

21import Unsafe.Coerce (unsafeCoerce)

20import Unsafe.Coerce (unsafeCoerce)

22import Yoga.Block.Atom.Segmented.Style as Style

21import Yoga.Block.Atom.Segmented.Style as Style

22+import Yoga.Block.Hook.Scroll (useScrollPosition)

23

24−type Props

24+type Props =

25− = { activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))

25+ { activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))

26− , activeItemIndex ∷ Int

26+ , activeItemIndex ∷ Int

27− , updateActiveIndex ∷ Int -> Effect Unit

27+ , updateActiveIndex ∷ Int -> Effect Unit

28− , windowWidth ∷ Number

28+ , windowWidth ∷ Number

29− }

29+ }

30

31component ∷ ReactComponent Props

32component =

@@ -42,16 +42,14 @@ component =

42 _ <-

43 runMaybeT do

44 rawStyles <- traverse getStyle props.activeItemRefs

45− let

46− styles = rawStyles <#> \s -> s { left = s.left + scrollX }

45+ let styles = rawStyles <#> \s -> s { left = s.left + scrollX }

47 unless (maybeAnimationVariants == Just styles) do

46 unless (maybeAnimationVariants == Just styles) do

48 setVariants (Just styles) # lift

47 setVariants (Just styles) # lift

49 mempty

48 mempty

50 useLayoutEffect maybeDragX do

49 useLayoutEffect maybeDragX do

51 case maybeDragX, maybeAnimationVariants of

50 case maybeDragX, maybeAnimationVariants of

52 Just x, Just animationVariants -> do

51 Just x, Just animationVariants -> do

53− let

54− { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }

52+ let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }

55 activeLeft # MotionValue.set left

53 activeLeft # MotionValue.set left

56 activeWidth # MotionValue.set width

54 activeWidth # MotionValue.set width

57 _, _ -> mempty

55 _, _ -> mempty

@@ -61,22 +59,22 @@ component =

61 variants = case maybeAnimationVariants of

59 variants = case maybeAnimationVariants of

62 Just animationVariants ->

60 Just animationVariants ->

63 animationVariants

61 animationVariants

62+ # foldMapWithIndex

64− # foldMapWithIndex (\i s -> Object.singleton (show i) (css s))

63+ (\i s -> Object.singleton (show i) (css s))

65 # Motion.variantsFromObject

64 # Motion.variantsFromObject

66− Nothing -> (cast undefined) ∷ Motion.Variants

65+ Nothing -> cast undefined

67 pure $ maybeAnimationVariants

66 pure $ maybeAnimationVariants

68 # foldMap \animationVariants ->

67 # foldMap \animationVariants ->

69 Emotion.elementKeyed Motion.div

68 Emotion.elementKeyed Motion.div

70 { css: Style.activeElement

69 { css: Style.activeElement

70+ , layout: Motion.layout true

71 , key: show props.windowWidth -- to force rerender

72 , variants

73 , className: "ry-active-segmented-element"

74− , initial: Motion.initial (indexToVariant props.activeItemIndex)

74+ , initial: Motion.initial $ indexToVariant props.activeItemIndex

75 , drag: Motion.drag "x"

76 , dragMomentum: Motion.dragMomentum false

77 , animate: Motion.animate $ indexToVariant props.activeItemIndex

78− , layout: Motion.layout true

79− , whileTap: Motion.whileTap $ css { scale: 0.9 }

80 , style:

78 , style:

81 css

79 css

82 { left: activeLeft

80 { left: activeLeft

@@ -91,11 +89,17 @@ component =

91 , onDragEnd:

89 , onDragEnd:

92 Motion.onDragEnd \_ pi -> do

90 Motion.onDragEnd \_ pi -> do

93 let

91 let

92+ x =

93+ maybeDragX

94− x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x should not happen"

94+ # fromMaybe' \_ -> unsafeCrashWith "no x"

95− let

95+ newIdx =

96+ findOverlapping

96− newIdx = findOverlapping props.activeItemIndex animationVariants x

97+ props.activeItemIndex

97− let

98+ animationVariants

99+ x

100+ v =

98− v = animationVariants TwoOrMore.!! newIdx # fromMaybe' \_ -> unsafeCrashWith "omg"

101+ animationVariants TwoOrMore.!! newIdx

102+ # fromMaybe' \_ -> unsafeCrashWith "omg"

99 setDragX Nothing

103 setDragX Nothing

100 activeLeft # MotionValue.set v.left

104 activeLeft # MotionValue.set v.left

101 activeWidth # MotionValue.set v.width

105 activeWidth # MotionValue.set v.width

@@ -104,7 +108,10 @@ component =

104 , dragElastic: Motion.dragElastic false

108 , dragElastic: Motion.dragElastic false

105 , transition:

109 , transition:

106 Motion.transition

110 Motion.transition

111+ { type: "tween"

107− { type: "tween", duration: if isJust maybeDragX then 0.0 else 0.167, ease: "easeOut" }

112+ , duration: if isJust maybeDragX then 0.0 else 0.167

113+ , ease: "easeOut"

114+ }

108 , _aria: Object.fromHomogeneous { hidden: "true" }

115 , _aria: Object.fromHomogeneous { hidden: "true" }

109 }

116 }

110

117

@@ -123,23 +130,18 @@ getStyle itemRef = do

123indexToVariant ∷ Int -> VariantLabel

130indexToVariant ∷ Int -> VariantLabel

124indexToVariant = show >>> unsafeCoerce

131indexToVariant = show >>> unsafeCoerce

125

132

126−type BBox

133+type BBox =

127− = { top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }

134+ { top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }

128

135

129findOverlapping ∷ Int -> TwoOrMore BBox -> Number -> Int

136findOverlapping ∷ Int -> TwoOrMore BBox -> Number -> Int

130findOverlapping activeIndex styles x =

137findOverlapping activeIndex styles x =

131 fromMaybe activeIndex do

138 fromMaybe activeIndex do

132 curr <- styles TwoOrMore.!! activeIndex

139 curr <- styles TwoOrMore.!! activeIndex

133− let

134− fst = TwoOrMore.head styles

140+ let fst = TwoOrMore.head styles

135− let

136− lst = TwoOrMore.last styles

141+ let lst = TwoOrMore.last styles

137− let

138− inside e = (e.left < x) && (e.left + e.width) >= x

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

139− let

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

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

141− let

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

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

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

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

144

146

145handleDrag ∷

147handleDrag ∷

@@ -149,16 +151,11 @@ handleDrag ∷

149 } ->

151 } ->

150 { left ∷ Number, width ∷ Number }

152 { left ∷ Number, width ∷ Number }

151handleDrag { x, activeItemIndex, animationVariants } = do

153handleDrag { x, activeItemIndex, animationVariants } = do

152− let

153− idx = findOverlapping activeItemIndex animationVariants x

154+ let idx = findOverlapping activeItemIndex animationVariants x

154− let

155− av = animationVariants

155+ let av = animationVariants

156− let

157− firstVariant = av # TwoOrMore.head

156+ let firstVariant = av # TwoOrMore.head

158− let

159− lastVariant = av # TwoOrMore.last

157+ let lastVariant = av # TwoOrMore.last

160− let

161− baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"

158+ let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"

162 let

159 let

163 closestVariant =

160 closestVariant =

164 if x >= (baseVariant.left + (baseVariant.width / 2.0)) then

161 if x >= (baseVariant.left + (baseVariant.width / 2.0)) then

@@ -172,41 +169,25 @@ handleDrag { x, activeItemIndex, animationVariants } = do

172 else

169 else

173 closestVariant /\ baseVariant

170 closestVariant /\ baseVariant

174 -- Total

171 -- Total

175− let

176− rangeStart = smaller.left + (smaller.width / 2.0)

172+ let rangeStart = smaller.left + (smaller.width / 2.0)

177− let

178− rangeEnd = greater.left + (greater.width / 2.0)

173+ let rangeEnd = greater.left + (greater.width / 2.0)

179− let

180− range = rangeEnd - rangeStart

174+ let range = rangeEnd - rangeStart

181− let

182− ratio = ((x - rangeStart) / range)

175+ let ratio = ((x - rangeStart) / range)

183− let

184− interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)

176+ let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)

185 -- Right

177 -- Right

186− let

187− rangeStartRight = smaller.left + smaller.width

178+ let rangeStartRight = smaller.left + smaller.width

188− let

189− rangeEndRight = greater.left + greater.width

179+ let rangeEndRight = greater.left + greater.width

190− let

191− rangeRight = rangeEndRight - rangeStartRight

180+ let rangeRight = rangeEndRight - rangeStartRight

192− let

193− ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)

181+ let ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)

194 -- Left

182 -- Left

195− let

196− rangeStartLeft = smaller.left

183+ let rangeStartLeft = smaller.left

197− let

198− rangeEndLeft = greater.left

184+ let rangeEndLeft = greater.left

199− let

200− rangeLeft = rangeEndLeft - rangeStartLeft

185+ let rangeLeft = rangeEndLeft - rangeStartLeft

201− let

202− ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)

186+ let ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)

203 -- Individual

187 -- Individual

204− let

205− left = rangeStartLeft + (ratioLeft * rangeLeft)

188+ let left = rangeStartLeft + (ratioLeft * rangeLeft)

206− let

207− right = rangeStartRight + (ratioRight * rangeRight)

189+ let right = rangeStartRight + (ratioRight * rangeRight)

208− let

209− width = right - left

190+ let width = right - left

210 if x < firstVariant.left then

191 if x < firstVariant.left then

211 { left: firstVariant.left, width: firstVariant.width }

192 { left: firstVariant.left, width: firstVariant.width }

212 else

193 else

src/Yoga/Block/Atom/Toggle.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Atom.Toggle

2 ( module Yoga.Block.Atom.Toggle.View

3 ) where

4

5−import Yoga.Block.Atom.Toggle.View (component, Props)

5+import Yoga.Block.Atom.Toggle.View (component, Props, MandatoryProps)

src/Yoga/Block/Atom/Toggle/Story.purs+4−7

@@ -65,10 +65,7 @@ toggle = do

65 Color.hsl 260.0 0.7 0.45

66 }

67 pure

68− $ case theme of

69− Nothing -> element Block.container { content }

68+ $ element Block.container

70− Just themeVariant ->

71− element Block.container

72− { content

69+ { content

73− , themeVariant: themeVariant

70+ , themeVariant: theme

74− }

71+ }

src/Yoga/Block/Atom/Toggle/Style.purs+24−25

@@ -14,26 +14,36 @@ button ∷ Style

14button =

15 css

16 { position: relative

17− , background: str colour.inputBackground

17+ , "&:focus": nest { outline: str "none" }

18 , border: str $ "1px solid " <> colour.inputBorder

19+ , "&:focus-visible":

20+ nest

21+ { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

22+ }

19 , borderRadius: str "calc(var(--s2) / 2)"

23 , borderRadius: str "calc(var(--s2) / 2)"

20 , height: var "--s2"

24 , height: var "--s2"

21− , width: str "calc(1.15 * var(--s3))"

25+ , width: str "calc(var(--s2) + var(--s1))"

22 , margin: _0

26 , margin: _0

23 , padding: _0

27 , padding: _0

24 }

28 }

25

29

30+toggleLeft ∷ String

31+toggleLeft = "calc(var(--s-2) * 0.3)"

32+

33+dragWidthDelta ∷ Number

34+dragWidthDelta = 10.0

35+

26theToggle ∷ Style

36theToggle ∷ Style

27theToggle =

37theToggle =

28 css

38 css

29− { width: str "calc(var(--s2) * 0.8)"

39+ { width: str "calc(var(--s2) * 0.85)"

30− , height: str "calc(var(--s2) * 0.8)"

40+ , height: str "calc(var(--s2) * 0.85)"

31 , background: str $ colour.interfaceBackground

41 , background: str $ colour.interfaceBackground

32 , border: none

42 , border: none

33 , borderRadius: str $ "calc(var(--s2) / 2)"

43 , borderRadius: str $ "calc(var(--s2) / 2)"

34 , position: absolute

44 , position: absolute

35− , top: str "3px"

45+ , top: str "calc(var(--s-2) * 0.35)"

36− , left: str "3px"

46+ , left: str toggleLeft

37 , margin: _0

47 , margin: _0

38 , boxShadow: str "0 0.5px 3px rgba(0,0,0,0.50)"

48 , boxShadow: str "0 0.5px 3px rgba(0,0,0,0.50)"

39 }

49 }

@@ -45,11 +55,16 @@ toggleTextContainer =

45 , border: none

55 , border: none

46 , fontWeight: str "bold"

56 , fontWeight: str "bold"

47 , position: absolute

57 , position: absolute

48− , top: _0

58+ , top: str "1px"

49− , fontSize: str "calc(0.6 * var(--s1))"

59+ , fontSize: str "calc(var(--s2)*0.5)"

50− , lineHeight: var "--s2"

60+ , lineHeight: str "calc(var(--s2)*0.5)"

61+ , textAlign: center

51 , height: var "--s2"

62 , height: var "--s2"

52 , display: flex

63 , display: flex

64+ , justifyContent: center

65+ , alignItems: center

66+ , margin: _0

67+ , padding: _0

53 }

68 }

54

69

55successTextColour ∷ StyleProperty

70successTextColour ∷ StyleProperty

@@ -75,19 +90,3 @@ toggleText =

75 { color: successTextColour

90 { color: successTextColour

76 }

91 }

77 }

92 }

78−

79−inputDisabled ∷ Style

80−inputDisabled =

81− css

82− { "input[type=toggle]::-webkit-slider-thumb": nested thumbStyleDisabled

83− , "input[type=toggle]::-moz-toggle-thumb": nested thumbStyleDisabled

84− }

85− where

86− thumbStyleDisabled =

87− css

88− { background: str "#fcfcfc"

89− , boxShadow: str "0 calc(var(--s-4)/2) var(--s-3) rgba(88,88,88,0.2)"

90− }

91−

92−disabled ∷ Style

93−disabled = css { backgroundColor: str colour.background30 }

src/Yoga/Block/Atom/Toggle/View.purs+75−47

@@ -1,4 +1,9 @@

1−module Yoga.Block.Atom.Toggle.View (component, MandatoryProps, Props, PropsF) where

1+module Yoga.Block.Atom.Toggle.View

2+ ( component

3+ , MandatoryProps

4+ , Props

5+ , PropsF

6+ ) where

2

7

3import Yoga.Prelude.View

8import Yoga.Prelude.View

4import Color as Color

9import Color as Color

@@ -40,6 +45,7 @@ data DragState

40 = NotDragging

45 = NotDragging

41 | Dragging { startX ∷ Number, currentX ∷ Number }

46 | Dragging { startX ∷ Number, currentX ∷ Number }

42 | DragDone { startX ∷ Number, endX ∷ Number }

47 | DragDone { startX ∷ Number, endX ∷ Number }

48+

43derive instance eqDragState ∷ Eq DragState

49derive instance eqDragState ∷ Eq DragState

44

50

45instance showDragState ∷ Show DragState where

51instance showDragState ∷ Show DragState where

@@ -85,6 +91,7 @@ rawComponent =

85 { left: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft) ?|| Emotion.str colour.inputBackground }

91 { left: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft) ?|| Emotion.str colour.inputBackground }

86 , right: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight) ?|| Emotion.str colour.success }

92 , right: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight) ?|| Emotion.str colour.success }

87 }

93 }

94+

88 buttonVariant = Motion.makeVariantLabels buttonVariants

95 buttonVariant = Motion.makeVariantLabels buttonVariants

89 -- components

96 -- components

90 let

97 let

@@ -110,16 +117,17 @@ rawComponent =

110 ]

117 ]

111 , toggle

118 , toggle

112 ]

119 ]

120+

113 container =

121 container =

114 Motion.button

122 Motion.button

115− </* { className: "ry-toggle"

123+ </* { className: "ry-toggle" <>? props.className

116− , css: Style.button

124+ , css: Style.button <>? props.css

117 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }

125 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }

118 , variants: Motion.variants buttonVariants

126 , variants: Motion.variants buttonVariants

119 , animate:

127 , animate:

120− Motion.animate case props.togglePosition of

128+ Motion.animate case props.togglePosition of

121− ToggleIsRight -> buttonVariant.right

129+ ToggleIsRight -> buttonVariant.right

122− ToggleIsLeft -> buttonVariant.left

130+ ToggleIsLeft -> buttonVariant.left

123 , value: show props.togglePosition

131 , value: show props.togglePosition

124 , onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)

132 , onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)

125 , style: props.style

133 , style: props.style

@@ -128,21 +136,25 @@ rawComponent =

128 , _aria: Object.singleton "checked" "switch"

136 , _aria: Object.singleton "checked" "switch"

129 , ref: buttonRef

137 , ref: buttonRef

130 }

138 }

139+

131 textContainer =

140 textContainer =

132 div

141 div

133 </* { className: "ry-toggle-text"

142 </* { className: "ry-toggle-text"

134 , css: Style.toggleTextContainer

143 , css: Style.toggleTextContainer

135 }

144 }

145+

136 textOnContainer =

146 textOnContainer =

137 div

147 div

138 </* { className: "ry-toggle-text-on"

148 </* { className: "ry-toggle-text-on"

139 , css: Style.toggleText

149 , css: Style.toggleText

140 }

150 }

151+

141 textOffContainer =

152 textOffContainer =

142 div

153 div

143 </* { className: "ry-toggle-text-off"

154 </* { className: "ry-toggle-text-off"

144 , css: Style.toggleText

155 , css: Style.toggleText

145 }

156 }

157+

146 textOn =

158 textOn =

147 Motion.div

159 Motion.div

148 </ { className: "ry-toggle-text-container"

160 </ { className: "ry-toggle-text-container"

@@ -151,6 +163,7 @@ rawComponent =

151 , animate: Motion.animate $ css { scale: 1, opacity: 1 }

163 , animate: Motion.animate $ css { scale: 1, opacity: 1 }

152 , exit: Motion.exit $ css { scale: 0, opacity: 0 }

164 , exit: Motion.exit $ css { scale: 0, opacity: 0 }

153 }

165 }

166+

154 textOff =

167 textOff =

155 Motion.div

168 Motion.div

156 </ { className: "ry-toggle-text-container"

169 </ { className: "ry-toggle-text-container"

@@ -159,7 +172,9 @@ rawComponent =

159 , animate: Motion.animate $ css { scale: 1, opacity: 1 }

172 , animate: Motion.animate $ css { scale: 1, opacity: 1 }

160 , exit: Motion.exit $ css { scale: 0, opacity: 0 }

173 , exit: Motion.exit $ css { scale: 0, opacity: 0 }

161 }

174 }

175+

162 animateTextPresence = Motion.animatePresence </ {}

176 animateTextPresence = Motion.animatePresence </ {}

177+

163 toggle =

178 toggle =

164 toggleCircle

179 toggleCircle

165 </> { buttonRef

180 </> { buttonRef

@@ -209,6 +224,7 @@ toggleCircle =

209 { left: { x: 0.0 }

224 { left: { x: 0.0 }

210 , right: { x: maxLeft # fromMaybe 0.0 }

225 , right: { x: maxLeft # fromMaybe 0.0 }

211 }

226 }

227+

212 toggleVariant = Motion.makeVariantLabels toggleVariants

228 toggleVariant = Motion.makeVariantLabels toggleVariants

213 pure

229 pure

214 $ Motion.div

230 $ Motion.div

@@ -223,56 +239,68 @@ toggleCircle =

223 , key: if isNothing maxLeft then "initialising" else "ready"

239 , key: if isNothing maxLeft then "initialising" else "ready"

224 , dragElastic: Motion.dragElastic false

240 , dragElastic: Motion.dragElastic false

225 , dragConstraints:

241 , dragConstraints:

226− Motion.dragConstraints

242+ Motion.dragConstraints

227− { left:

243+ { left:

228− case togglePosition of

244+ case togglePosition of

229− ToggleIsLeft -> zero

245+ ToggleIsLeft -> zero

230− ToggleIsRight -> negate (maxLeft # fromMaybe 0.0)

246+ ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)

231− , right:

247+ , right:

232− case togglePosition of

248+ case togglePosition of

233− ToggleIsRight -> zero

249+ ToggleIsRight -> zero

234− ToggleIsLeft -> maxLeft # fromMaybe 0.0

250+ ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0

235− }

251+ }

236 , variants: Motion.variants toggleVariants

252 , variants: Motion.variants toggleVariants

237 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }

253 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }

254+ , whileTap:

255+ Motion.prop

256+ $ css

257+ { width: "calc(var(--s2)*0.85 + 10px)"

258+ , left:

259+ case togglePosition of

260+ ToggleIsLeft -> Style.toggleLeft

261+ ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"

238− , whileTap: Motion.prop $ css { scale: 1.1, transition: { type: "tween", duration: 0.10, ease: "easeInOut" } }

262+ , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }

263+ }

239 , onTapStart: Motion.onTapStart \_ _ -> writeRef tapState TapAllowed

264 , onTapStart: Motion.onTapStart \_ _ -> writeRef tapState TapAllowed

240 , onTap:

265 , onTap:

241− Motion.onTap \_ pi -> do

266+ Motion.onTap \_ pi -> do

242− ts <- readRef tapState

267+ ts <- readRef tapState

243− case ts of

268+ case ts of

244− TapAllowed -> setTogglePosition (flipToggle togglePosition)

269+ TapAllowed -> setTogglePosition (flipToggle togglePosition)

245− _ -> mempty

270+ _ -> mempty

246− mempty

271+ mempty

247 , onTapCancel:

272 , onTapCancel:

248− Motion.onTapCancel \_ pi -> do

273+ Motion.onTapCancel \_ pi -> do

249− writeRef tapState TapNotAllowed

274+ writeRef tapState TapNotAllowed

250− mempty

275+ mempty

251 , initial: Motion.initial false

276 , initial: Motion.initial false

252 , animate:

277 , animate:

253− Motion.animate case togglePosition of

278+ Motion.animate case togglePosition of

254− ToggleIsLeft -> toggleVariant.left

279+ ToggleIsLeft -> toggleVariant.left

255− ToggleIsRight -> toggleVariant.right

280+ ToggleIsRight -> toggleVariant.right

256 , onDragStart:

281 , onDragStart:

257− Motion.onDragStart \_ pi -> do

282+ Motion.onDragStart \_ pi -> do

258− maybeBBox <- getBoundingBoxFromRef toggleRef

283+ maybeBBox <- getBoundingBoxFromRef toggleRef

259− let

284+ let

260− x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)

285+ x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)

286+ setDragState

287+ $ Dragging

261− setDragState $ Dragging { startX: x # fromMaybe pi.point.x, currentX: pi.point.x }

288+ { startX: x # fromMaybe pi.point.x, currentX: pi.point.x

289+ }

262 , onDrag:

290 , onDrag:

263− Motion.onDrag \_ pi -> do

291+ Motion.onDrag \_ pi -> do

264− case dragState of

292+ case dragState of

265− Dragging { startX } -> do

293+ Dragging { startX } -> do

266− setDragState $ Dragging { startX, currentX: pi.point.x }

294+ setDragState $ Dragging { startX, currentX: pi.point.x }

267− other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"

295+ other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"

268 , onDragEnd:

296 , onDragEnd:

269− Motion.onDragEnd \_ pi -> do

297+ Motion.onDragEnd \_ pi -> do

270− case dragState of

298+ case dragState of

271− Dragging { startX } -> do

299+ Dragging { startX } -> do

272− maybeBBox <- getBoundingBoxFromRef toggleRef

300+ maybeBBox <- getBoundingBoxFromRef toggleRef

273− let

301+ let

274− x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)

302+ x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)

275− setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })

303+ setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })

276− other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"

304+ other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"

277 , ref: toggleRef

305 , ref: toggleRef

278 }

306 }

src/Yoga/Block/Atom/Tooltip/Style.purs+1−1

@@ -38,7 +38,7 @@ content props =

38 , minWidth: str "50px"

39 , padding: str "6px"

40 , zIndex: str "-1"

41− , color: str colour.background0

41+ , color: str colour.background

42 , boxShadow: str "0 1px 8px rgba(0,0,0,0.33)"

43 , borderRadius: var "--s-2"

44 }

src/Yoga/Block/Atom/Tooltip/View.purs+11−3

@@ -45,9 +45,9 @@ rawComponent =

45 { styles, attributes } <-

46 usePopper referenceElement popperElement

47 { modifiers:

48− [ modifierArrow arrowElement

48+ [ modifierArrow arrowElement

49− , modifierOffset { x: 0.0, y: 12.0 }

49+ , modifierOffset { x: 0.0, y: 12.0 }

50− ]

50+ ]

51 }

52 visible /\ setVisible <- React.useState' false

53 touching /\ setTouching <- React.useState' false

@@ -68,8 +68,11 @@ rawComponent =

68 -- Handlers

69 let

70 hoveredIn = setHovering true

71+

71 hoveredOut = setHovering false

72 hoveredOut = setHovering false

73+

72 touchStarted = setTouching true

74 touchStarted = setTouching true

75+

73 touchEnded = setTouching false

76 touchEnded = setTouching false

74 -- Elements

77 -- Elements

75 let

78 let

@@ -86,7 +89,9 @@ rawComponent =

86 ]

89 ]

87 ]

90 ]

88 ]

91 ]

92+

89 animatePresence = Motion.animatePresence </ { initial: false }

93 animatePresence = Motion.animatePresence </ { initial: false }

94+

90 content =

95 content =

91 Motion.div

96 Motion.div

92 </* { className: "popper-element-content"

97 </* { className: "popper-element-content"

@@ -97,6 +102,7 @@ rawComponent =

97 , transition: Motion.transition { duration: 0.2 }

102 , transition: Motion.transition { duration: 0.2 }

98 , key: "container"

103 , key: "container"

99 }

104 }

105+

100 popperEl =

106 popperEl =

101 div

107 div

102 </* { className: "popper-element"

108 </* { className: "popper-element"

@@ -105,6 +111,7 @@ rawComponent =

105 , style: styles.popper

111 , style: styles.popper

106 , _data: attributes.popper

112 , _data: attributes.popper

107 }

113 }

114+

108 arrow =

115 arrow =

109 div

116 div

110 </*> { className: "popper-arrow"

117 </*> { className: "popper-arrow"

@@ -114,6 +121,7 @@ rawComponent =

114 , style: styles.arrow

121 , style: styles.arrow

115 , _data: attributes.arrow

122 , _data: attributes.arrow

116 }

123 }

124+

117 refElem =

125 refElem =

118 Motion.div

126 Motion.div

119 </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)

127 </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)

src/Yoga/Block/Container/Story.purs+33−2

@@ -3,10 +3,12 @@ module Yoga.Block.Container.Story where

3import Prelude

4import Effect (Effect)

5import React.Basic (JSX, element, fragment)

6+import React.Basic.DOM (css)

6import React.Basic.DOM as R

7import React.Basic.DOM as R

7import Yoga (el, styledLeaf)

8import Yoga (el, styledLeaf)

8import Yoga.Block.Container as Container

9import Yoga.Block.Container as Container

9−import Yoga.Block.Container.Style (inputFocus)

10+import Yoga.Block.Container.Style (colour, inputFocus)

11+import Yoga.Block.Layout.Box as Box

10import Yoga.Block.Layout.Cluster as Cluster

12import Yoga.Block.Layout.Cluster as Cluster

11import Yoga.Block.Layout.Stack as Stack

13import Yoga.Block.Layout.Stack as Stack

12

14

@@ -19,7 +21,17 @@ container =

19 ( element Container.component

21 ( element Container.component

20 { content:

22 { content:

21 fragment

23 fragment

24+ [ el Box.component { style: css { background: colour.backgroundLayer1 } }

25+ [ el Box.component { style: css { background: colour.backgroundLayer2 } }

26+ [ el Box.component { style: css { background: colour.backgroundLayer3 } }

27+ [ el Box.component { style: css { background: colour.backgroundLayer4 } }

28+ [ el Box.component { style: css { background: colour.backgroundLayer5 } }

29+ []

30+ ]

31+ ]

32+ ]

33+ ]

22− [ R.text "Content"

34+ , R.text "Content"

23 , el Stack.component {}

35 , el Stack.component {}

24 [ el Cluster.component {}

36 [ el Cluster.component {}

25 [ R.input { value: "Text" }

37 [ R.input { value: "Text" }

@@ -44,6 +56,25 @@ container =

44 ]

56 ]

45 , R.input { type: "range" }

57 , R.input { type: "range" }

46 ]

58 ]

59+ , R.h1_ [ R.text "Largest heading (h1)" ]

60+ , psParagraph

61+ , R.h2_ [ R.text "Second largest heading (h2)" ]

62+ , psParagraph

63+ , R.h3_ [ R.text "Third largest heading (h3)" ]

64+ , psParagraph

65+ , R.p_ [ R.text "Make sure to have the following meta tag in your head" ]

66+ , R.code_

67+ [ R.text

68+ """<meta name="viewport" content="width=device-width, initial-scale=1.0">"""

69+ ]

70+ , R.h1_ [ R.text "Very long largest heading that can result in multiple lines" ]

47 ]

71 ]

48 }

72 }

49 )

73 )

74+

75+psParagraph ∷ JSX

76+psParagraph =

77+ R.p_

78+ [ R.text

79+ """PureScript is a strongly-typed, purely-functional programming language that compiles to JavaScript. It can be used to develop web applications, server side apps, and also desktop applications with use of Electron. Its syntax is mostly comparable to that of Haskell. In addition, it introduces row polymorphism and extensible records.[2] Also, contrary to Haskell, PureScript adheres to a strict evaluation strategy. """

80+ ]

src/Yoga/Block/Container/Style.purs+258−258

@@ -31,267 +31,264 @@ mkGlobal ∷ Maybe DarkOrLightMode -> Style

31mkGlobal maybeMode =

32 css

33 { "body, html":

34− nested

34+ nested

35− $ css

35+ $ css

36− { minHeight: 100.0 # vh

36+ { minHeight: 100.0 # vh

37− , minWidth: 100.0 # vw

37+ , minWidth: 100.0 # vw

38− , lineHeight: str "1.15"

38+ , lineHeight: str "1.15"

39− , "WebkitTextSizeAdjust": _100percent

39+ , "WebkitTextSizeAdjust": _100percent

40− , transition: str "background,color 0.33s ease-in"

40+ , transition: str "background,color 0.33s ease-in"

41− }

41+ }

42 , ":root":

43− nested $ variables

43+ nested $ variables

44− <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }

44+ <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }

45 , html:

46− nested

46+ nested

47− $ css

47+ $ css

48− { boxSizing: str "border-box"

48+ { boxSizing: str "border-box"

49− }

49+ }

50 , body:

51− nested

51+ nested

52− $ css

52+ $ css

53− { fontFamily: str "var(--main-font)"

53+ { fontFamily: str "var(--main-font)"

54− , background: str colour.background0

54+ , background: str colour.background

55− , color: str colour.text

55+ , color: str colour.text

56− , margin: str "0"

56+ , margin: str "0"

57− }

57+ }

58− <> case maybeMode of

58+ <> case maybeMode of

59− Nothing -> autoSwitchColourTheme

59+ Nothing -> autoSwitchColourTheme

60− Just DarkMode -> darkModeStyle

60+ Just DarkMode -> darkModeStyle

61− Just LightMode -> lightModeStyle

61+ Just LightMode -> lightModeStyle

62 , "pre,code":

63− nest

63+ nest

64− { fontFamily: str "var(--mono-font)"

64+ { fontFamily: str "var(--mono-font)"

65+ }

66+ , "h1,h2,h3,h4":

67+ nest

68+ { lineHeight: var "--line-height-small"

69+ , fontWeight: str "700"

70+ , marginTop: str "var(--s-3)"

65− }

71+ }

66 , h1:

72 , h1:

67− nested

73+ nested

68− $ css

74+ $ css

75+ { "--h1size": str "calc( min( var(--s2) + 2vw , var(--s4) ) )"

69− { fontSize: var "--s4"

76+ , fontSize: var "--h1size"

70− , lineHeight: str "calc(var(--s4) * 1.4)"

71− , fontWeight: str "900"

72− , letterSpacing: str "calc(var(--s-5) * -1)"

77+ , letterSpacing: str "calc(var(--h1size) * -0.04)"

73− }

78+ }

74 , h2:

79 , h2:

75− nested

80+ nested

76− $ css

81+ $ css

82+ { "--h2size": str "calc( min( var(--s1) + 2vw , var(--s3) ) )"

77− { fontSize: var "--s3"

83+ , fontSize: var "--h2size"

78− , lineHeight: str "calc(var(--s3) * 1.4)"

79− , fontWeight: str "800"

80− , letterSpacing: str "calc(var(--s-5) * -0.9)"

84+ , letterSpacing: str "calc(var(--h2size) * -0.035)"

81− }

85+ }

82 , h3:

86 , h3:

83− nested

87+ nested

84− $ css

88+ $ css

89+ { "--h3size": str "calc( min( var(--s0) + 2vw , var(--s2) ) )"

85− { fontSize: var "--s2"

90+ , fontSize: var "--h3size"

86− , lineHeight: str "calc(var(--s2) * 1.4)"

91+ , letterSpacing: str "calc(var(--h3size) * -0.03)"

87− , fontWeight: str "700"

92+ }

88− , letterSpacing: str "calc(var(--s-5) * -0.8)"

93+ , p:

94+ nested

95+ $ css

96+ { "--psize": str "calc( min( var(--s-2) + 2.7vw , var(--s0)*1.1 ) )"

97+ , fontSize: var "--psize"

98+ , letterSpacing: str "calc(var(--psize) * -0.03)"

99+ }

100+ , a:

101+ nest

102+ { color: str colour.text

103+ , textDecorationColor: str colour.text

104+ , "&:hover":

105+ nest

106+ { color: str colour.text

107+ , textDecorationColor: str colour.highlight

108+ }

109+ , "&:visited":

110+ nest

111+ { color: str colour.backgroundLayer1

112+ , textDecorationColor: str colour.backgroundLayer1

113+ }

89− }

114+ }

90 , "::selection":

115 , "::selection":

91− nest

116+ nest

92− { color: str colour.highlightText

117+ { color: str colour.highlightText

93− , background: str colour.highlight

118+ , background: str colour.highlight

94− }

119+ }

95 , "*, *:before, *:after":

120 , "*, *:before, *:after":

96− nested

121+ nested

97− $ css

122+ $ css

98− { boxSizing: str "inherit"

123+ { boxSizing: str "inherit"

124+ , "::selection":

125+ nest

126+ { color: str colour.highlightText

127+ , background: str colour.highlight

128+ }

99− , fontFeatureSettings:

129+ , fontFeatureSettings:

100− str

130+ str

101− $ intercalate ","

131+ $ intercalate ","

102− $ show

132+ $ show

103− <$> [ "ss03" -- curved r

133+ <$> [ "ss03" -- curved r

104− , "cv03" -- open six

134+ , "cv03" -- open six

105− , "cv04" -- open nine

135+ , "cv04" -- open nine

106− -- , "cv05" -- lower case l with tail

136+ -- , "cv05" -- lower case l with tail

107− , "cv07" -- German double-s

137+ , "cv07" -- German double-s

108− , "cv09" -- Flat top three

138+ , "cv09" -- Flat top three

109− ]

139+ ]

110− }

140+ }

111 }

141 }

112

142

113withAlpha ∷ Number -> Color -> Color

143withAlpha ∷ Number -> Color -> Color

114withAlpha alpha c1 = Color.rgba' r g b alpha

144withAlpha alpha c1 = Color.rgba' r g b alpha

115 where

145 where

116− { r, g, b } = Color.toRGBA' c1

146+ { r, g, b } = Color.toRGBA' c1

117

147

118defaultColours ∷ Colours

148defaultColours ∷ Colours

119defaultColours =

149defaultColours =

120 { light:

150 { light:

121− { background0: lightBg

151+ { background: lightBg

122− , background02: darken 0.02 lightBg

152+ , backgroundLayer1: darken 0.20 >>> saturate 0.04 $ lightBg

123− , background05: darken 0.05 lightBg

153+ , backgroundLayer2: darken 0.15 >>> saturate 0.07 $ lightBg

124− , background07: darken 0.07 lightBg

125− , background10: darken 0.1 lightBg

154+ , backgroundLayer3: darken 0.10 >>> saturate 0.09 $ lightBg

126− , background12: darken 0.12 lightBg

155+ , backgroundLayer4: darken 0.05 >>> saturate 0.12 $ lightBg

127− , background15: darken 0.15 lightBg

156+ , backgroundLayer5: lightBg

128− , background20: darken 0.2 lightBg

129− , background25: darken 0.25 lightBg

130− , background30: darken 0.3 lightBg

131− , background40: darken 0.4 lightBg

132− , background50: darken 0.5 lightBg

133− , background60: darken 0.6 lightBg

134− , background70: darken 0.7 lightBg

135− , background80: darken 0.8 lightBg

136− , background90: darken 0.9 lightBg

137− , background100: darken 1.0 lightBg

138− , backgroundInverted: darken 0.85 lightBg

157+ , backgroundInverted: darken 0.85 lightBg

139− , textInverted: lightBg

158+ , textInverted: lightBg

140− , success

159+ , success

141− , successText

160+ , successText

142− , invalid

161+ , invalid

143− , invalidText

162+ , invalidText

144− , required

163+ , required

145− , interfaceBackground

164+ , interfaceBackground

146− , interfaceBackgroundDangerous

165+ , interfaceBackgroundDangerous

147− , interfaceDangerousText

166+ , interfaceDangerousText

148− , interfaceBackgroundDisabled: darken 0.03 lightBg

167+ , interfaceBackgroundDisabled: darken 0.03 lightBg

149− , interfaceTextDisabled: darken 0.30 lightBg

168+ , interfaceTextDisabled: darken 0.30 lightBg

150− , interfaceBackgroundHighlight: lighten 0.05 lightBg

169+ , interfaceBackgroundHighlight: lighten 0.05 lightBg

151− , highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight

170+ , highlightDisabled: (desaturate 0.80 >>> lighten 0.28) highlight

152− , interfaceBackgroundShadow: darken 0.04 lightBg

171+ , interfaceBackgroundShadow: darken 0.04 lightBg

153− , inputBackground: lightBg

172+ , inputBackground: lightBg

154− , inputBorder: darken 0.1 lightBg

173+ , inputBorder: darken 0.1 lightBg

155− , highlight

174+ , highlight

156− , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)

175+ , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlight)

157− , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)

176+ , highlightDarker: withAlpha 0.15 (Color.darken 0.5 highlight)

158− , highlightRotatedForwards: highlight # rotateHue 30.0

177+ , highlightRotatedForwards: highlight # rotateHue 30.0

159− , highlightRotatedBackwards: highlight # rotateHue (-30.0)

178+ , highlightRotatedBackwards: highlight # rotateHue (-30.0)

160− , highlightText

179+ , highlightText

161− , text: textLightTheme

180+ , text: textLightTheme

162− , placeholderText: lighten 0.4 darkBg

181+ , placeholderText: lighten 0.4 darkBg

163− }

182+ }

164 , dark:

183 , dark:

165− { background0: darkBg

184+ { background: darkBg

166− , background02: lighten 0.02 darkBg

185+ , backgroundLayer1: lighten 0.30 >>> saturate 0.07 $ darkBg

167− , background05: lighten 0.05 darkBg

186+ , backgroundLayer2: lighten 0.21 >>> saturate 0.08 $ darkBg

168− , background07: lighten 0.07 darkBg

187+ , backgroundLayer3: lighten 0.14 >>> saturate 0.12 $ darkBg

169− , background10: lighten 0.1 darkBg

188+ , backgroundLayer4: lighten 0.07 >>> saturate 0.18 $ darkBg

170− , background12: lighten 0.12 darkBg

189+ , backgroundLayer5: darkBg

171− , background15: lighten 0.15 darkBg

172− , background20: lighten 0.2 darkBg

173− , background25: lighten 0.25 darkBg

174− , background30: lighten 0.3 darkBg

175− , background40: lighten 0.4 darkBg

176− , background50: lighten 0.5 darkBg

177− , background60: lighten 0.6 darkBg

178− , background70: lighten 0.7 darkBg

179− , background80: lighten 0.8 darkBg

180− , background90: lighten 0.9 darkBg

181− , background100: lighten 1.0 darkBg

182− , textInverted: darkBg

190+ , textInverted: darkBg

183− , backgroundInverted: lightBg

191+ , backgroundInverted: lightBg

184− , interfaceBackground: interfaceBackgroundDark

192+ , interfaceBackground: interfaceBackgroundDark

185− , interfaceBackgroundDangerous: interfaceBackgroundDangerousDark

193+ , interfaceBackgroundDangerous: interfaceBackgroundDangerousDark

186− , interfaceDangerousText: interfaceDangerousTextDark

194+ , interfaceDangerousText: interfaceDangerousTextDark

187− , interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark

195+ , interfaceBackgroundDisabled: darken 0.3 interfaceBackgroundDark

188− , interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark

196+ , interfaceTextDisabled: (desaturate 0.3 >>> lighten 0.25) interfaceBackgroundDark

189− , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark

197+ , interfaceBackgroundHighlight: lighten 0.1 interfaceBackgroundDark

190− , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark

198+ , interfaceBackgroundShadow: darken 0.1 interfaceBackgroundDark

191− , inputBackground: darkBg

199+ , inputBackground: darkBg

192− , inputBorder: lighten 0.17 darkBg

200+ , inputBorder: lighten 0.17 darkBg

193− , success: successDark

201+ , success: successDark

194− , successText

202+ , successText

195− , required

203+ , required

196− , invalid

204+ , invalid

197− , invalidText

205+ , invalidText

198− , highlight: highlightDark

206+ , highlight: highlightDark

199− , highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark

207+ , highlightDisabled: (desaturate 0.76 >>> darken 0.32) highlightDark

200− , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)

208+ , highlightLighter: withAlpha 0.2 (Color.lighten 0.5 highlightDark)

201− , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)

209+ , highlightDarker: withAlpha 0.4 (Color.darken 0.5 highlightDark)

202− , highlightRotatedForwards: highlightDark # rotateHue 30.0

210+ , highlightRotatedForwards: highlightDark # rotateHue 30.0

203− , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)

211+ , highlightRotatedBackwards: highlightDark # rotateHue (-30.0)

204− , highlightText

212+ , highlightText

205− , text: lightBg

213+ , text: lightBg

206− , placeholderText: darken 0.4 lightBg

214+ , placeholderText: darken 0.4 lightBg

207− }

215+ }

208 }

216 }

209 where

217 where

210− highlight = Color.hsl 270.0 0.90 0.62

218+ highlight = Color.hsl 270.0 0.90 0.62

211−

212− highlightDark = Color.rgb 0x88 0x33 0xFF

213−

214− interfaceBackgroundDark = Color.hsl 240.0 0.10 0.33

215−

216− interfaceBackground = lightBg

217−

218− interfaceBackgroundDangerous = interfaceBackground

219−

220− interfaceDangerousText = invalid

221−

222− interfaceBackgroundDangerousDark = Color.hsl 340.0 0.55 0.30

223−

224− interfaceDangerousTextDark = Color.hsl 340.0 1.0 0.90

225−

226− highlightText = Color.rgb 0xFF 0xFF 0xFF

227−

228− success = Color.rgb 10 150 25

229−

230− successDark = Color.rgb 20 200 60

231−

232− successText = Color.rgb 250 250 250

233−

234− invalid = Color.rgb 220 40 70

235−

236− invalidText = successText

237−

238− required = Color.rgb 200 50 80

239−

240− textLightTheme = Color.rgb 16 16 32

241−

242− darkBg = Color.rgb 0 0 0

243−

244− lightBg = Color.rgb 250 250 250

245−

246−type FlatTheme a =

247− { background0 ∷ a

248− , background02 ∷ a

249− , background05 ∷ a

250− , background07 ∷ a

251− , background10 ∷ a

252− , background12 ∷ a

253− , background15 ∷ a

254− , background20 ∷ a

255− , background25 ∷ a

256− , background30 ∷ a

257− , background40 ∷ a

258− , background50 ∷ a

259− , background60 ∷ a

260− , background70 ∷ a

261− , background80 ∷ a

262− , background90 ∷ a

263− , background100 ∷ a

264− , backgroundInverted ∷ a

265− , interfaceBackground ∷ a

266− , interfaceBackgroundDangerous ∷ a

267− , interfaceDangerousText ∷ a

268− , interfaceBackgroundDisabled ∷ a

269− , interfaceTextDisabled ∷ a

270− , interfaceBackgroundHighlight ∷ a

271− , interfaceBackgroundShadow ∷ a

272− , inputBackground ∷ a

273− , inputBorder ∷ a

274− , highlight ∷ a

275− , highlightRotatedBackwards ∷ a

276− , highlightRotatedForwards ∷ a

277− , highlightDarker ∷ a

278− , highlightLighter ∷ a

279− , highlightDisabled ∷ a

280− , highlightText ∷ a

281− , success ∷ a

282− , successText ∷ a

283− , invalid ∷ a

284− , invalidText ∷ a

285− , required ∷ a

286− , text ∷ a

287− , textInverted ∷ a

288− , placeholderText ∷ a

289− }

290

219

220+ highlightDark = Color.rgb 0x88 0x33 0xFF

221+

222+ interfaceBackgroundDark = Color.hsl 240.0 0.10 0.33

223+

224+ interfaceBackground = lightBg

225+

226+ interfaceBackgroundDangerous = interfaceBackground

227+

228+ interfaceDangerousText = invalid

229+

230+ interfaceBackgroundDangerousDark = Color.hsl 340.0 0.55 0.30

231+

232+ interfaceDangerousTextDark = Color.hsl 340.0 1.0 0.90

233+

234+ highlightText = Color.rgb 0xFF 0xFF 0xFF

235+

236+ success = Color.rgb 10 150 25

237+

238+ successDark = Color.rgb 20 200 60

239+

240+ successText = Color.rgb 250 250 250

241+

242+ invalid = Color.rgb 220 40 70

243+

244+ invalidText = successText

245+

246+ required = Color.rgb 200 50 80

247+

248+ textLightTheme = Color.rgb 16 16 32

249+

250+ darkBg = Color.hsl 240.0 0.07 0.14

251+

252+ lightBg = Color.hsl 240.0 0.05 0.97

253+

254+type FlatTheme a

255+ = { background ∷ a

256+ , backgroundLayer1 ∷ a

257+ , backgroundLayer2 ∷ a

258+ , backgroundLayer3 ∷ a

259+ , backgroundLayer4 ∷ a

260+ , backgroundLayer5 ∷ a

261+ , backgroundInverted ∷ a

262+ , interfaceBackground ∷ a

263+ , interfaceBackgroundDangerous ∷ a

264+ , interfaceDangerousText ∷ a

265+ , interfaceBackgroundDisabled ∷ a

266+ , interfaceTextDisabled ∷ a

267+ , interfaceBackgroundHighlight ∷ a

268+ , interfaceBackgroundShadow ∷ a

269+ , inputBackground ∷ a

270+ , inputBorder ∷ a

271+ , highlight ∷ a

272+ , highlightRotatedBackwards ∷ a

273+ , highlightRotatedForwards ∷ a

274+ , highlightDarker ∷ a

275+ , highlightLighter ∷ a

276+ , highlightDisabled ∷ a

277+ , highlightText ∷ a

278+ , success ∷ a

279+ , successText ∷ a

280+ , invalid ∷ a

281+ , invalidText ∷ a

282+ , required ∷ a

283+ , text ∷ a

284+ , textInverted ∷ a

285+ , placeholderText ∷ a

286+ }

287+

291−type Colours =

288+type Colours

292− { dark ∷ FlatTheme Color

289+ = { dark ∷ FlatTheme Color

293− , light ∷ FlatTheme Color

290+ , light ∷ FlatTheme Color

294− }

291+ }

295

292

296data MakeCSSVarLabels

293data MakeCSSVarLabels

297 = MakeCSSVarLabels

294 = MakeCSSVarLabels

@@ -312,24 +309,25 @@ colour =

312autoSwitchColourTheme ∷ Style

309autoSwitchColourTheme ∷ Style

313autoSwitchColourTheme = lightT

310autoSwitchColourTheme = lightT

314 where

311 where

315− darkT ∷ Style

312+ darkT ∷ Style

316− darkT = unsafeCoerce darkObj

313+ darkT = unsafeCoerce darkObj

317−

314+

318− darkObj ∷ Object StyleProperty

315+ darkObj ∷ Object StyleProperty

319− darkObj =

316+ darkObj =

320− Object.fromHomogeneous defaultColours.dark

317+ Object.fromHomogeneous defaultColours.dark

321− # Object.foldMap \k v ->

318+ # Object.foldMap \k v ->

322− Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))

319+ Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))

323−

320+

324− lightObj ∷ Object StyleProperty

321+ lightObj ∷ Object StyleProperty

325− lightObj =

322+ lightObj =

326− Object.fromHomogeneous defaultColours.light

323+ Object.fromHomogeneous defaultColours.light

327− # Object.foldMap \k v ->

324+ # Object.foldMap \k v ->

328− Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))

325+ Object.singleton ("--" <> k) (str (Color.cssStringRGBA v))

329− # Object.insert "@media (prefers-color-scheme: dark)" (nested darkT)

326+ # Object.insert "@media (prefers-color-scheme: dark)" (nested darkT)

330−

327+ # Object.insert "&:th" (nested darkT)

328+

331− lightT ∷ Style

329+ lightT ∷ Style

332− lightT = unsafeCoerce lightObj

330+ lightT = unsafeCoerce lightObj

333

331

334lightModeVariables ∷ Object StyleProperty

332lightModeVariables ∷ Object StyleProperty

335lightModeVariables =

333lightModeVariables =

@@ -346,7 +344,9 @@ darkModeVariables =

346variables ∷ Style

344variables ∷ Style

347variables =

345variables =

348 css

346 css

349− { "--ratio": "1.5" # str

347+ { "--ratio": "1.61" # str

348+ , "--line-height": str "var(--ratio)"

349+ , "--line-height-small": str "calc(var(--ratio) * 0.8)"

350 , "--s-5": str "calc(var(--s-4) / var(--ratio))"

351 , "--s-4": str "calc(var(--s-3) / var(--ratio))"

352 , "--s-3": str "calc(var(--s-2) / var(--ratio))"

src/Yoga/Block/Container/View.purs+2−2

@@ -14,7 +14,7 @@ import Yoga.Block.Container.Style as Styles

14

15type PropsF f =

16 ( content ∷ JSX

17− , themeVariant ∷ f DarkOrLightMode

17+ , themeVariant ∷ f (Maybe DarkOrLightMode)

18 )

19

20type Props =

@@ -33,7 +33,7 @@ rawComponent =

33 $ Array.cons

34 ( element E.global

35 { styles:

36− case opToMaybe themeVariant of

36+ case opToMaybe themeVariant # join of

37 Nothing -> Styles.global

38 Just Styles.DarkMode -> Styles.darkMode

39 Just Styles.LightMode -> Styles.lightMode

src/Yoga/Block/Icon/SVG/Icon.purs+4

@@ -8,6 +8,8 @@ module Yoga.Block.Icon.SVG

8 , module Yoga.Block.Icon.SVG.SimpleKey

9 , module Yoga.Block.Icon.SVG.QuestionMark

10 , module Yoga.Block.Icon.SVG.Cross

11+ , module Yoga.Block.Icon.SVG.Sun

12+ , module Yoga.Block.Icon.SVG.Moon

11 ) where

13 ) where

12

14

13import Yoga.Block.Icon.SVG.On (on)

15import Yoga.Block.Icon.SVG.On (on)

@@ -19,3 +21,5 @@ import Yoga.Block.Icon.SVG.Key (key)

19import Yoga.Block.Icon.SVG.SimpleKey (simpleKey)

21import Yoga.Block.Icon.SVG.SimpleKey (simpleKey)

20import Yoga.Block.Icon.SVG.QuestionMark (questionMark)

22import Yoga.Block.Icon.SVG.QuestionMark (questionMark)

21import Yoga.Block.Icon.SVG.Cross (cross)

23import Yoga.Block.Icon.SVG.Cross (cross)

24+import Yoga.Block.Icon.SVG.Sun (sun)

25+import Yoga.Block.Icon.SVG.Moon (moon)

src/Yoga/Block/Icon/SVG/Moon.pursnew file+21

@@ -0,0 +1,21 @@

1+module Yoga.Block.Icon.SVG.Moon where

2+

3+import React.Basic (JSX)

4+import React.Basic.DOM.SVG as SVG

5+

6+moon ∷ JSX

7+moon =

8+ SVG.svg

9+ { viewBox: "0 0 100 100"

10+ , xmlns: "http://www.w3.org/2000/svg"

11+ , fillRule: "evenodd"

12+ , clipRule: "evenodd"

13+ , strokeLinejoin: "round"

14+ , strokeMiterlimit: "1.5"

15+ , children:

16+ [ SVG.path

17+ { d: "M53.984 14.646c1.707.195 3.42.519 5.128.977 18.733 5.019 29.867 24.303 24.847 43.036-5.019 18.732-24.303 29.866-43.036 24.846-13.577-3.638-23.163-14.769-25.499-27.753a28.518 28.518 0 008.408 3.788c15.237 4.082 30.921-4.973 35.004-20.21 2.376-8.867.302-17.887-4.852-24.684z"

18+ , fill: "var(--stroke-colour)"

19+ }

20+ ]

21+ }

src/Yoga/Block/Icon/SVG/Off.purs+3−8

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

1module Yoga.Block.Icon.SVG.Off where

2

3import React.Basic (JSX)

4−import React.Basic.DOM as R

5import React.Basic.DOM.SVG as SVG

4import React.Basic.DOM.SVG as SVG

6

5

7off ∷ JSX

6off ∷ JSX

@@ -14,17 +13,13 @@ off =

14 , strokeLinejoin: "round"

13 , strokeLinejoin: "round"

15 , strokeMiterlimit: "1.5"

14 , strokeMiterlimit: "1.5"

16 , children:

15 , children:

17− [ SVG.path

18− { fill: "none"

19− , d: "M0 0h100v100H0z"

20− }

21− , SVG.circle

16+ [ SVG.circle

22 { cx: "50"

17 { cx: "50"

23 , cy: "50"

18 , cy: "50"

24− , r: "37.808"

19+ , r: "32"

25 , fill: "none"

20 , fill: "none"

26 , stroke: "var(--stroke-colour)"

21 , stroke: "var(--stroke-colour)"

27− , strokeWidth: "20"

22+ , strokeWidth: "17"

28 }

23 }

29 ]

24 ]

30 }

25 }

src/Yoga/Block/Icon/SVG/On.purs+4−21

@@ -15,27 +15,10 @@ on =

15 , strokeMiterlimit: "1.5"

16 , children:

17 [ SVG.path

18− { fill: "none"

18+ { d: "M50 10v80"

19− , d: "M0 0h100v100H0z"

20− }

21− , SVG.clipPath

22− { id: "a"

23− , children:

24− [ SVG.path

25− { d: "M0 0h100v100H0z"

26− }

27− ]

28− }

29− , SVG.g

30− { clipPath: "url(#a)"

31− , children:

32− [ SVG.path

33− { d: "M50 1.921v96.261"

34− , fill: "none"

19+ , fill: "none"

35− , stroke: "var(--stroke-colour)"

20+ , stroke: "var(--stroke-colour)"

36− , strokeWidth: "20"

21+ , strokeWidth: "17"

37− }

38− ]

39 }

22 }

40 ]

23 ]

41 }

24 }

src/Yoga/Block/Icon/SVG/Sun.pursnew file+27

@@ -0,0 +1,27 @@

1+module Yoga.Block.Icon.SVG.Sun where

2+

3+import React.Basic (JSX)

4+import React.Basic.DOM.SVG as SVG

5+

6+sun ∷ JSX

7+sun =

8+ SVG.svg

9+ { viewBox: "0 0 100 100"

10+ , xmlns: "http://www.w3.org/2000/svg"

11+ , fillRule: "evenodd"

12+ , clipRule: "evenodd"

13+ , strokeLinejoin: "round"

14+ , strokeMiterlimit: "2"

15+ , children:

16+ [ SVG.circle

17+ { cx: "50"

18+ , cy: "49.997"

19+ , r: "24.82"

20+ , fill: "var(--stroke-colour)"

21+ }

22+ , SVG.path

23+ { d: "M2.239 51.966c0 1.64 1.33 2.971 2.971 2.971h13.417a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H5.21a2.97 2.97 0 00-2.971 2.971v3.823zM78.415 51.966a2.972 2.972 0 002.971 2.971h13.418a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H81.386a2.971 2.971 0 00-2.971 2.971v3.823zM17.581 85.183a2.972 2.972 0 004.202 0l9.487-9.488a2.97 2.97 0 000-4.201l-2.703-2.703a2.97 2.97 0 00-4.202 0l-9.487 9.487a2.972 2.972 0 000 4.202l2.703 2.703zM71.446 31.318a2.972 2.972 0 004.202 0l9.487-9.488a2.969 2.969 0 000-4.201l-2.703-2.704a2.97 2.97 0 00-4.201 0l-9.488 9.488a2.972 2.972 0 000 4.202l2.703 2.703zM14.878 17.629a2.97 2.97 0 000 4.201l9.487 9.488a2.972 2.972 0 004.202 0l2.703-2.703a2.972 2.972 0 000-4.202l-9.487-9.488a2.972 2.972 0 00-4.202 0l-2.703 2.704zM68.743 71.494a2.97 2.97 0 000 4.201l9.488 9.488a2.97 2.97 0 004.201 0l2.703-2.703a2.97 2.97 0 000-4.202l-9.487-9.487a2.97 2.97 0 00-4.202 0l-2.703 2.703zM48.095 2.286a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V5.257a2.97 2.97 0 00-2.971-2.971h-3.823zM48.095 78.463a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V81.434a2.97 2.97 0 00-2.971-2.971h-3.823z"

24+ , fill: "var(--stroke-colour)"

25+ }

26+ ]

27+ }

src/Yoga/Block/Icon/SVG/moon.afdesignnew file

Binary file not shown.

src/Yoga/Block/Icon/SVG/moon.svgnew file+1

@@ -0,0 +1 @@

1+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5"><path fill="none" d="M0 0h100v100H0z"/><path d="M53.984 14.646c1.707.195 3.42.519 5.128.977 18.733 5.019 29.867 24.303 24.847 43.036-5.019 18.732-24.303 29.866-43.036 24.846-13.577-3.638-23.163-14.769-25.499-27.753a28.518 28.518 0 008.408 3.788c15.237 4.082 30.921-4.973 35.004-20.21 2.376-8.867.302-17.887-4.852-24.684z" fill="#fff" stroke="#333" stroke-width="10"/></svg>

src/Yoga/Block/Icon/SVG/sun.svgnew file+1

@@ -0,0 +1 @@

1+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M0 0h100v100H0z"/><circle cx="50" cy="49.997" r="24.82" fill="#333"/><path d="M2.239 51.966c0 1.64 1.33 2.971 2.971 2.971h13.417a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H5.21a2.97 2.97 0 00-2.971 2.971v3.823zM78.415 51.966a2.972 2.972 0 002.971 2.971h13.418a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H81.386a2.971 2.971 0 00-2.971 2.971v3.823zM17.581 85.183a2.972 2.972 0 004.202 0l9.487-9.488a2.97 2.97 0 000-4.201l-2.703-2.703a2.97 2.97 0 00-4.202 0l-9.487 9.487a2.972 2.972 0 000 4.202l2.703 2.703zM71.446 31.318a2.972 2.972 0 004.202 0l9.487-9.488a2.969 2.969 0 000-4.201l-2.703-2.704a2.97 2.97 0 00-4.201 0l-9.488 9.488a2.972 2.972 0 000 4.202l2.703 2.703zM14.878 17.629a2.97 2.97 0 000 4.201l9.487 9.488a2.972 2.972 0 004.202 0l2.703-2.703a2.972 2.972 0 000-4.202l-9.487-9.488a2.972 2.972 0 00-4.202 0l-2.703 2.704zM68.743 71.494a2.97 2.97 0 000 4.201l9.488 9.488a2.97 2.97 0 004.201 0l2.703-2.703a2.97 2.97 0 000-4.202l-9.487-9.487a2.97 2.97 0 00-4.202 0l-2.703 2.703zM48.095 2.286a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V5.257a2.97 2.97 0 00-2.971-2.971h-3.823zM48.095 78.463a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V81.434a2.97 2.97 0 00-2.971-2.971h-3.823z" fill="#333"/></svg>

src/Yoga/Block/Layout/Box/Style.purs+1

@@ -18,4 +18,5 @@ box props = styles <>? props.css

18 css

19 { padding: props.padding ?|| (1.0 # em)

20 , border: str $ i ((props.borderWidth) ?|| "0") " solid"

21+ , margin: _0

21 }

22 }

src/Yoga/Block/Layout/Centre/Style.purs+1−1

@@ -16,7 +16,7 @@ centre props = styles <>? props.css

16 where

17 styles =

18 css

19− { padding: 1.0 # em

19+ { padding: props.padding ?|| (1.0 # em)

20 , boxSizing: contentBox

21 , marginLeft: auto

22 , marginRight: auto

src/Yoga/Block/Layout/Sidebar/Story.purs+8−16

@@ -35,20 +35,16 @@ sidebar =

35 [ R.h2_ [ R.text "No Options" ]

36 , element Sidebar.component

37 { children:

38− [ R.div_

39− [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

38+ [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

40− , R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } }

39+ , R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } }

41− ]

42 ]

40 ]

43 , style: css { backgroundColor: "oldlace" }

41 , style: css { backgroundColor: "oldlace" }

44 }

42 }

45 , R.h2_ [ R.text "Zero Space" ]

43 , R.h2_ [ R.text "Zero Space" ]

46 , element Sidebar.component

44 , element Sidebar.component

47 { children:

45 { children:

48− [ R.div_

49− [ R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } }

46+ [ R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } }

50− , R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "darkslateblue" } }

47+ , R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "darkslateblue" } }

51− ]

52 ]

48 ]

53 , style: css { backgroundColor: "oldlace" }

49 , style: css { backgroundColor: "oldlace" }

54 , space: "0"

50 , space: "0"

@@ -56,10 +52,8 @@ sidebar =

56 , R.h2_ [ R.text "Sidebar Right" ]

52 , R.h2_ [ R.text "Sidebar Right" ]

57 , element Sidebar.component

53 , element Sidebar.component

58 { children:

54 { children:

59− [ R.div_

60− [ R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

55+ [ R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

61− , R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

56+ , R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

62− ]

63 ]

57 ]

64 , style: css { backgroundColor: "oldlace" }

58 , style: css { backgroundColor: "oldlace" }

65 , sideWidth: "40px"

59 , sideWidth: "40px"

@@ -70,10 +64,8 @@ sidebar =

70 , R.h2_ [ R.text "No Stretch" ]

64 , R.h2_ [ R.text "No Stretch" ]

71 , element Sidebar.component

65 , element Sidebar.component

72 { children:

66 { children:

73− [ R.div_

74− [ R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

67+ [ R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } }

75− , R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

68+ , R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } }

76− ]

77 ]

69 ]

78 , style: css { backgroundColor: "oldlace" }

70 , style: css { backgroundColor: "oldlace" }

79 , noStretch: true

71 , noStretch: true

src/Yoga/Block/Layout/Sidebar/View.purs+1

@@ -25,4 +25,5 @@ rawComponent =

25 $ emotionDiv ref props

26 { className: "ry-sidebar " <>? props.className

27 , css: Style.sidebar props

28+ , children: [ div </ {} /> props.children ]

28 }

29 }

src/Yoga/Block/Layout/Stack/Style.purs+1−1

@@ -35,6 +35,6 @@ stack props = splitStyles <> styles <>? props.css

35 { "&:only-child": nest { height: 100.0 # percent }

36 }

37

38− nthChild n = "& > :nth-child(" <> show n <> ")"

38+ nthChild n = "& > div:nth-of-type(" <> show n <> ")"

39

40 nthChildStyle n = (nthChild n) ~: { marginBottom: auto }

src/Yoga/Block/Layout/Stack/View.purs+4

@@ -21,8 +21,12 @@ rawComponent ∷ ∀ p. ReactComponent { | p }

21rawComponent =

22 mkForwardRefComponent "Stack" do

23 \(props ∷ { | PropsOptional }) ref -> React.do

24+ -- Wrapping children to use `:nth-of-type` instead of `:nth-child`

25+ -- in CSS because the latter is problematic in SSR

26+ let wrappedChildren = props.children <#> \c -> div </ {} /> [ c ]

24 pure

27 pure

25 $ emotionDiv ref props

28 $ emotionDiv ref props

26 { className: "ry-stack " <>? props.className

29 { className: "ry-stack " <>? props.className

27 , css: Style.stack props

30 , css: Style.stack props

31+ , children: wrappedChildren

28 }

32 }

src/Yoga/Block/Modal/View.purs+9−9

@@ -61,15 +61,15 @@ window =

61 , css: Style.modal

62 , key: "ry-modal-window"

63 , children:

64− [ Motion.div

64+ [ Motion.div

65− </* { className: "ry-modal"

65+ </* { className: "ry-modal"

66− , css: Style.modal

66+ , css: Style.modal

67− , drag: Motion.prop true

67+ , drag: Motion.prop true

68− , dragMomentum: Motion.prop false

68+ , dragMomentum: Motion.prop false

69− , dragConstraints: Motion.prop clickAwayRef

69+ , dragConstraints: Motion.prop clickAwayRef

70− }

70+ }

71− /> [ content ]

71+ /> [ content ]

72− ]

72+ ]

73 }

74 `withMotion`

75 { initial: css { transform: "translate(-50%, -50%) scale3d(0.1,0.1,0.1)", opacity: 0 }

src/Yoga/Block/Motion/Story.purs+176−174

@@ -32,12 +32,12 @@ default ∷

32default =

33 { title: "Motion"

34 , decorators:

35− [ \storyFn ->

35+ [ \storyFn ->

36− R.div_

36+ R.div_

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

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

38− , unsafePerformEffect storyFn

38+ , unsafePerformEffect storyFn

39− ]

39+ ]

40− ]

40+ ]

41 }

42

43motion ∷ Effect JSX

@@ -45,16 +45,16 @@ motion = do

45 mc <- mkMc

46 pure $ element mc {}

47 where

48− mkMc = do

48+ mkMc = do

49− motionCentre <- M.custom Centre.component

49+ motionCentre <- M.custom Centre.component

50− reactComponent "MotionTest" \{} -> React.do

50+ reactComponent "MotionTest" \{} -> React.do

51− Tuple isOpen setIsOpen <- React.useState false

51+ Tuple isOpen setIsOpen <- React.useState false

52− pure

52+ pure

53− $ fragment

53+ $ fragment

54− [ E.element R.div'

54+ [ E.element R.div'

55− { className: "bg"

55+ { className: "bg"

56− , css: backgroundStyle

56+ , css: backgroundStyle

57− , children:

57+ , children:

58 [ E.element motionCentre

59 ( { className: "parent"

60 , css: parentStyle <> if isOpen then parentStyleOpen else mempty

@@ -66,71 +66,71 @@ motion = do

66 }

67 )

68 ]

69− }

69+ }

70− ]

70+ ]

71

72− backgroundStyle ∷ E.Style

72+ backgroundStyle ∷ E.Style

73− backgroundStyle =

73+ backgroundStyle =

74− E.css

74+ E.css

75− { background: E.str "#da36dd"

75+ { background: E.str "#da36dd"

76− , height: E.vh 88.0

76+ , height: E.vh 88.0

77− , borderRadius: E.px 8

77+ , borderRadius: E.px 8

78− , display: flex

78+ , display: flex

79− , alignItems: center

79+ , alignItems: center

80− , justifyContent: center

80+ , justifyContent: center

81− }

81+ }

82

83− parentStyle ∷ E.Style

83+ parentStyle ∷ E.Style

84− parentStyle =

84+ parentStyle =

85− E.css

85+ E.css

86− { width: E.px 100

86+ { width: E.px 100

87− , height: E.px 100

87+ , height: E.px 100

88− , padding: _0

88+ , padding: _0

89− , margin: _0

89+ , margin: _0

90− , display: flex

90+ , display: flex

91− , alignItems: center

91+ , alignItems: center

92− , justifyContent: center

92+ , justifyContent: center

93− , boxShadow: E.str "30px 30px 60px #b92ebc, -30px -30px 60px #fb3efe"

93+ , boxShadow: E.str "30px 30px 60px #b92ebc, -30px -30px 60px #fb3efe"

94− , background: E.str "linear-gradient(145deg, #e93aec, #c431c7)"

94+ , background: E.str "linear-gradient(145deg, #e93aec, #c431c7)"

95− }

95+ }

96

97− childStyle ∷ E.Style

97+ childStyle ∷ E.Style

98− childStyle =

98+ childStyle =

99− E.css

99+ E.css

100− { background: E.str "hotpink"

100+ { background: E.str "hotpink"

101− , width: E.px 40

101+ , width: E.px 40

102− , height: E.px 40

102+ , height: E.px 40

103− , borderRadius: E.percent 50.0

103+ , borderRadius: E.percent 50.0

104− , padding: _0

104+ , padding: _0

105− , margin: _0

105+ , margin: _0

106− }

106+ }

107

108− parentStyleOpen ∷ E.Style

108+ parentStyleOpen ∷ E.Style

109− parentStyleOpen =

109+ parentStyleOpen =

110− E.css

110+ E.css

111− { width: E.px 300

111+ { width: E.px 300

112− , height: E.px 300

112+ , height: E.px 300

113− , boxShadow: E.str "50px 50px 60px #b92ebc, -50px -50px 60px #fb3efe"

113+ , boxShadow: E.str "50px 50px 60px #b92ebc, -50px -50px 60px #fb3efe"

114− , background: E.str "linear-gradient(145deg, #e93aec, #c431c7)"

114+ , background: E.str "linear-gradient(145deg, #e93aec, #c431c7)"

115− }

115+ }

116

117layoutTrans ∷ Effect JSX

118layoutTrans = do

119 mc <- mkMc

120 pure $ element mc {}

121 where

122− mkMc =

122+ mkMc =

123− reactComponent "MotionTest" \{} -> React.do

123+ reactComponent "MotionTest" \{} -> React.do

124− sidebarOpen /\ setSidebarOpen <- useState true

124+ sidebarOpen /\ setSidebarOpen <- useState true

125− let

125+ let

126− ava1 =

126+ ava1 =

127− el M.div

127+ el M.div

128− { layout: cast true

128+ { layout: cast true

129− , layoutId: cast "ava"

129+ , layoutId: cast "ava"

130− , key: "ava"

130+ , key: "ava"

131− , onClick: handler_ (setSidebarOpen not)

131+ , onClick: handler_ (setSidebarOpen not)

132− , transition: M.transition { delay: 0.2, type: "spring", damping: 30, stiffness: 200 }

132+ , transition: M.transition { delay: 0.2, type: "spring", damping: 30, stiffness: 200 }

133− , style:

133+ , style:

134 css

135 { height: "200px"

136 , width: "200px"

@@ -139,15 +139,16 @@ layoutTrans = do

139 , backgroundImage: "url('https://pbs.twimg.com/profile_images/1166763324723404801/nAUqF6tX.jpg')"

140 , backgroundSize: "cover"

141 }

142− }

142+ }

143− []

143+ []

144+

144− ava2 =

145+ ava2 =

145− el M.div

146+ el M.div

146− { layout: cast true

147+ { layout: cast true

147− , layoutId: cast "ava"

148+ , layoutId: cast "ava"

148− , key: "ava"

149+ , key: "ava"

149− , onClick: handler_ (setSidebarOpen not)

150+ , onClick: handler_ (setSidebarOpen not)

150− , style:

151+ , style:

151 css

152 css

152 { height: "100px"

153 { height: "100px"

153 , width: "100px"

154 , width: "100px"

@@ -156,14 +157,15 @@ layoutTrans = do

156 , borderRadius: "50%"

157 , borderRadius: "50%"

157 , border: "2px solid darkslateblue"

158 , border: "2px solid darkslateblue"

158 }

159 }

159− }

160+ }

160− []

161+ []

162+

161− ava3 =

163+ ava3 =

162− el M.div

164+ el M.div

163− { onClick: handler_ (setSidebarOpen not)

165+ { onClick: handler_ (setSidebarOpen not)

164− , exit: M.exit (css { scale: 1.4, opacity: 0 })

166+ , exit: M.exit (css { scale: 1.4, opacity: 0 })

165− , transition: M.transition { duration: 0.19 }

167+ , transition: M.transition { duration: 0.19 }

166− , style:

168+ , style:

167 css

169 css

168 { height: "100px"

170 { height: "100px"

169 , width: "100px"

171 , width: "100px"

@@ -171,102 +173,102 @@ layoutTrans = do

171 , borderRadius: "50%"

173 , borderRadius: "50%"

172 , border: "4px solid darkslateblue"

174 , border: "4px solid darkslateblue"

173 }

175 }

174− }

176+ }

175− []

177+ []

176− pure

178+ pure

177− $ el animateSharedLayout {}

179+ $ el animateSharedLayout {}

178− [ el M.animatePresence {}

180+ [ el M.animatePresence {}

179− [ if sidebarOpen then

181+ [ if sidebarOpen then

180− ava1

182+ ava1

181− else

183+ else

182− el Stack.component {} [ ava2, ava3 ]

184+ el Stack.component {} [ ava2, ava3 ]

183− ]

185+ ]

184− ]

186+ ]

185

187

186animatedSidebar ∷ Effect JSX

188animatedSidebar ∷ Effect JSX

187animatedSidebar = do

189animatedSidebar = do

188 mc <- mkMc

190 mc <- mkMc

189 pure $ element mc {}

191 pure $ element mc {}

190 where

192 where

191− mkMc =

193+ mkMc =

192− reactComponent "MotionTest" \{} -> React.do

194+ reactComponent "MotionTest" \{} -> React.do

193− sidebarOpen /\ setSidebarOpen <- useState true

195+ sidebarOpen /\ setSidebarOpen <- useState true

194− let

196+ let

195− sb =

197+ sb =

196− styled M.div

198+ styled M.div

197− { className: "sidebar"

199+ { className: "sidebar"

198− , css: if sidebarOpen then sidebarStyleOpen else sidebarStyleHidden

200+ , css: if sidebarOpen then sidebarStyleOpen else sidebarStyleHidden

199− , onClick: handler_ (setSidebarOpen not)

201+ , onClick: handler_ (setSidebarOpen not)

200− , initial: M.initial $ css { opacity: 0 }

202+ , initial: M.initial $ css { opacity: 0 }

201− , animate: M.animate $ css { opacity: 1, width: "200px" }

203+ , animate: M.animate $ css { opacity: 1, width: "200px" }

202− , exit: M.exit $ css { opacity: 0 }

204+ , exit: M.exit $ css { opacity: 0 }

203− , key: "sidebar"

205+ , key: "sidebar"

204− }

206+ }

205− [ R.text $ if sidebarOpen then "Sidebar" else "|||" ]

207+ [ R.text $ if sidebarOpen then "Sidebar" else "|||" ]

206− pure

208+ pure

207− $ styled R.div'

209+ $ styled R.div'

208− { className: "bg"

210+ { className: "bg"

209− , css: backgroundStyle

211+ , css: backgroundStyle

210− }

212+ }

211− [ el Sidebar.component

213+ [ el Sidebar.component

212− { className: "parent"

214+ { className: "parent"

213− , css: sidebarContainerStyle

215+ , css: sidebarContainerStyle

214− }

216+ }

215− [ styled R.div'

217+ [ styled R.div'

216− { css: sidebarStyle

218+ { css: sidebarStyle

217− , className: "sidebarContainer"

219+ , className: "sidebarContainer"

218− }

220+ }

219− [ element M.animatePresence

221+ [ element M.animatePresence

220− { children: [ guard sidebarOpen sb ]

222+ { children: [ guard sidebarOpen sb ]

221− }

223+ }

222− , R.div_

224+ , R.div_

223− [ el M.h1

225+ [ el M.h1

224− { initial: M.initial (css { x: -10, opacity: 0 })

226+ { initial: M.initial (css { x: -10, opacity: 0 })

225− , animate: M.animate $ css { x: [ -10, -3, 0 ], opacity: [ 0.1, 0.2, 1.0 ] }

227+ , animate: M.animate $ css { x: [ -10, -3, 0 ], opacity: [ 0.1, 0.2, 1.0 ] }

226− , transition: M.transition { duration: 0.6, times: [ 0.1, 0.4, 1.0 ] }

228+ , transition: M.transition { duration: 0.6, times: [ 0.1, 0.4, 1.0 ] }

227− , key: "non-sidebar-heading"

229+ , key: "non-sidebar-heading"

228− }

230+ }

229− [ R.text "Non-sidebar" ]

231+ [ R.text "Non-sidebar" ]

230− ]

232+ ]

231− ]

233+ ]

232− ]

234+ ]

233− ]

235+ ]

234

236

235− variantLabels = makeVariantLabels variants

237+ variantLabels = makeVariantLabels variants

236

238

237− variants =

239+ variants =

238− { hidden: { width: 30, height: 30, borderRadius: "50%" }

240+ { hidden: { width: 30, height: 30, borderRadius: "50%" }

239− , show: { width: "inherit", height: "100%" }

241+ , show: { width: "inherit", height: "100%" }

240− }

242+ }

241

243

242− sidebarContainerStyle ∷ E.Style

244+ sidebarContainerStyle ∷ E.Style

243− sidebarContainerStyle =

245+ sidebarContainerStyle =

244− E.css

246+ E.css

245− { height: _100percent

247+ { height: _100percent

246− , zIndex: E.str "40"

248+ , zIndex: E.str "40"

247− }

249+ }

248

250

249− sidebarStyle ∷ E.Style

251+ sidebarStyle ∷ E.Style

250− sidebarStyle =

252+ sidebarStyle =

251− E.css

253+ E.css

252− { height: _100percent

254+ { height: _100percent

253− }

255+ }

254

256

255− sidebarStyleOpen ∷ E.Style

257+ sidebarStyleOpen ∷ E.Style

256− sidebarStyleOpen =

258+ sidebarStyleOpen =

257− E.css

259+ E.css

258− { background: E.str "teal"

260+ { background: E.str "teal"

259− }

261+ }

260

262

261− sidebarStyleHidden ∷ E.Style

263+ sidebarStyleHidden ∷ E.Style

262− sidebarStyleHidden =

264+ sidebarStyleHidden =

263− E.css

265+ E.css

264− { background: E.str "darkslate"

266+ { background: E.str "darkslate"

265− }

267+ }

266

268

267− backgroundStyle ∷ E.Style

269+ backgroundStyle ∷ E.Style

268− backgroundStyle =

270+ backgroundStyle =

269− E.css

271+ E.css

270− { background: E.str "darkslateblue"

272+ { background: E.str "darkslateblue"

271− , height: E.vh 80.0

273+ , height: E.vh 80.0

272− }

274+ }