56087af...main · rowtype-yoga/ry-blocks

packages.dhall+20

since splitsnapshots

unifiedsplit

@@ -172,3 +172,23 @@ in upstream

172 [ "heterogeneous", "lists", "prelude", "record", "typelevel-prelude" ]

173 }

174 with react-basic-storybook = ../purescript-react-basic-storybook/spago.dhall as Location

175+ with react-aria =

176+ { repo = "https://github.com/rowtype-yoga/purescript-react-aria"

177+ , version = "v0.2.0"

178+ , dependencies =

179+ [ "aff"

180+ , "effect"

181+ , "foreign"

182+ , "foreign-object"

183+ , "nullable"

184+ , "ordered-collections"

185+ , "prelude"

186+ , "react-basic"

187+ , "react-basic-dom"

188+ , "react-basic-hooks"

189+ , "unsafe-coerce"

190+ , "untagged-union"

191+ , "web-dom"

192+ , "web-html"

193+ ]

194+ }

spago.dhall+1

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

36 , "prelude"

37 , "profunctor-lenses"

38 , "random"

39+ , "react-aria"

39 , "react-basic"

40 , "react-basic"

40 , "react-basic-dom"

41 , "react-basic-dom"

41 , "react-basic-emotion"

42 , "react-basic-emotion"

src/React/Aria/Interactions.jsdeleted−4

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

1−import { useFocusWithin, useFocus } from "@react-aria/interactions"

2−

3−export const useFocusWithinImpl = useFocusWithin

4−export const useFocusImpl = useFocus

src/React/Aria/Interactions.pursdeleted−56

@@ -1,56 +0,0 @@

1−module React.Aria.Interactions where

2−

3−import Prelude

4−

5−import Effect.Uncurried (EffectFn1, runEffectFn1)

6−import Prim.Row (class Union)

7−import React.Basic.Events (EventHandler)

8−import React.Basic.Hooks (Hook, unsafeHook)

9−

10−-- UseFocusWithin

11−

12−type FocusWithinProps =

13− ( isDisabled ∷ Boolean

14− , onFocusWithin ∷ EventHandler

15− , onBlurWithin ∷ EventHandler

16− , onFocusWithinChange ∷ EffectFn1 Boolean Unit

17− )

18−

19−type FocusWithinResult =

20− { focusWithinProps ∷

21− { onBlur ∷ EventHandler, onFocus ∷ EventHandler }

22− }

23−

24−foreign import useFocusWithinImpl ∷ ∀ props. EffectFn1 props FocusWithinResult

25−

26−newtype UseFocusWithin a = UseFocusWithin a

27−

28−useFocusWithin

29− ∷ ∀ props props_

30− . Union props props_ FocusWithinProps

31− ⇒ { | props }

32− → Hook UseFocusWithin FocusWithinResult

33−useFocusWithin = unsafeHook <<< runEffectFn1 useFocusWithinImpl

34−

35−-- UseFocus

36−

37−type FocusProps =

38− ( isDisabled ∷ Boolean

39− , onFocus ∷ EventHandler

40− , onBlur ∷ EventHandler

41− , onFocusChange ∷ EffectFn1 Boolean Unit

42− )

43−

44−type FocusResult =

45− { focusProps ∷ { onBlur ∷ EventHandler, onFocus ∷ EventHandler } }

46−

47−foreign import useFocusImpl ∷ ∀ props. EffectFn1 props FocusResult

48−

49−newtype UseFocus a = UseFocus a

50−

51−useFocus

52− ∷ ∀ props props_

53− . Union props props_ FocusProps

54− ⇒ { | props }

55− → Hook UseFocus FocusResult

56−useFocus = unsafeHook <<< runEffectFn1 useFocusImpl

src/React/Aria/Utils.jsdeleted−7

@@ -1,7 +0,0 @@

1−import { mergeProps, useId } from "@react-aria/utils"

2−

3−export function mergePropsImpl(args) {

4− return mergeProps(...args)

5−}

6−

7−export const useIdImpl = useId

src/React/Aria/Utils.pursdeleted−19

@@ -1,19 +0,0 @@

1−module React.Aria.Utils where

2−

3−import Foreign (Foreign, unsafeFromForeign, unsafeToForeign)

4−import Prim.Row (class Union)

5−import React.Basic.Hooks (Hook, unsafeHook)

6−import Effect (Effect)

7−

8−foreign import useIdImpl ∷ Effect String

9−

10−newtype UseId a = UseId a

11−

12−useId ∷ Hook UseId String

13−useId = unsafeHook useIdImpl

14−

15−foreign import mergePropsImpl ∷ Array Foreign → Foreign

16−

17−mergeProps ∷ ∀ r1 r2 r3. Union r1 r2 r3 ⇒ { | r1 } → { | r2 } → { | r3 }

18−mergeProps r1 r2 = unsafeFromForeign

19− (mergePropsImpl [ unsafeToForeign r1, unsafeToForeign r2 ])

src/Yoga/Block.purs+7

@@ -10,6 +10,7 @@ import Yoga.Block.Atom.Icon as Icon

10import Yoga.Block.Atom.Image as Image

11import Yoga.Block.Atom.Input as Input

12import Yoga.Block.Atom.Range as Range

13+import Yoga.Block.Atom.Select as Select

13import Yoga.Block.Atom.Segmented as Segmented

14import Yoga.Block.Atom.Segmented as Segmented

14import Yoga.Block.Atom.Toggle as Toggle

15import Yoga.Block.Atom.Toggle as Toggle

15import Yoga.Block.Container as Container

16import Yoga.Block.Container as Container

@@ -152,6 +153,12 @@ layer = React.element layer'

152range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }

153range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }

153range = Range.component

154range = Range.component

154

155

156+select' ∷ ∀ a. ReactComponent (Select.Props a)

157+select' = Select.component

158+

159+select ∷ ∀ a. (Select.Props a) → JSX

160+select = React.element select'

161+

155segmented' ∷ ReactComponent Segmented.Props

162segmented' ∷ ReactComponent Segmented.Props

156segmented' = Segmented.component

163segmented' = Segmented.component

157

164

src/Yoga/Block/Atom/Select.pursnew file+6

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

1+module Yoga.Block.Atom.Select

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

3+ ) where

4+

5+import Yoga.Block.Atom.Select.View

6+

src/Yoga/Block/Atom/Select/Style.pursnew file+53

@@ -0,0 +1,53 @@

1+module Yoga.Block.Atom.Select.Style where

2+

3+import Yoga.Prelude.Style

4+

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

6+

7+container ∷ Style

8+container =

9+ width' auto

10+ <> flexRow

11+ <> itemsCenter

12+ <> positionRelative

13+ <> borderSolid

14+ <> roundedMd

15+ <> textSm

16+ <> css { borderWidth: str "1.5px" }

17+ <> borderCol' (col.inputBorder)

18+ <> background' (col.inputBackground)

19+ <> textCol' col.text

20+ <> focusWithin (borderCol' col.highlight)

21+

22+select ∷ Style

23+select =

24+ css { appearance: none }

25+ <> pR 8

26+ <> borderNone

27+ <> widthFull

28+ <> rounded (7 # px)

29+ <> outlineNone

30+ <> pY' sizeStyle.xxs

31+ <> pL' sizeStyle.s

32+ <> textDefault

33+ <> textCol' col.text

34+ <> background transparent

35+ <> svgBackgroundImage

36+ ( SVG.svg

37+ { viewBox: "0 0 24 24"

38+ , xmlns: "http://www.w3.org/2000/svg"

39+ , stroke: cssStringRGBA gray._400

40+ , fill: "none"

41+ , children:

42+ [ SVG.path

43+ { strokeLinecap: "round"

44+ , strokeLinejoin: "round"

45+ , strokeWidth: "4"

46+ , d: "M19 9l-7 7-7-7"

47+ }

48+ ]

49+ }

50+ )

51+ <> backgroundPosition ("right " <> size.s <> " center")

52+ <> backgroundNoRepeat

53+ <> backgroundSize "10px"

src/Yoga/Block/Atom/Select/View.pursnew file+40

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

1+module Yoga.Block.Atom.Select.View where

2+

3+import Yoga.Prelude.View

4+

5+import Data.Array as Array

6+import Effect.Unsafe (unsafePerformEffect)

7+import React.Basic.DOM as R

8+import React.Basic.Hooks as React

9+import Yoga.Block.Atom.Select.Style as Style

10+

11+type Props a =

12+ { choice ∷ a

13+ , choices ∷ Array a

14+ , onChange ∷ a → Effect Unit

15+ , toString ∷ a → String

16+ , toValue ∷ a → String

17+ }

18+

19+component ∷ ∀ a. ReactComponent (Props a)

20+component = unsafePerformEffect do

21+ React.reactComponent "Select" \{ toString, toValue, choices, onChange } →

22+ React.do

23+ pure $

24+ div "input-container" Style.container

25+ [ R.select'

26+ </*

27+ { className: "select"

28+ , role: "listbox"

29+ , css: Style.select

30+ , onChange: handler targetValue

31+ \maybeVal → traverse_ onChange do

32+ val ← maybeVal

33+ choices # Array.find (toString >>> (_ == val))

34+

35+ }

36+ />

37+ ( choices <#> \c → R.option' </ { value: toValue c } />

38+ [ R.text $ toString c ]

39+ )

40+ ]

src/Yoga/Block/Molecule/Typeahead.purs+5−1

@@ -1 +1,5 @@

1+module Yoga.Block.Molecule.Typeahead

1−module Plumage.Molecule.Typeahead where

2+ ( module Yoga.Block.Molecule.Typeahead.View

3+ ) where

4+

5+import Yoga.Block.Molecule.Typeahead.View (Args, InputProps, Props, ScrollSeekConfiguration, inputProps, mkDefaultArgs, mkTypeahead, mkTypeaheadView)

stories/Story/Yoga/Block/Atom/Select.pursnew file+44

@@ -0,0 +1,44 @@

1+module Story.Yoga.Block.Atom.Select where

2+

3+import Prelude

4+

5+import Effect (Effect)

6+import Effect.Unsafe (unsafePerformEffect)

7+import React.Basic (JSX, element, fragment)

8+import React.Basic.DOM (css)

9+import React.Basic.DOM as R

10+import React.Basic.Emotion as E

11+import Storybook.Addon.Actions (action)

12+import Yoga.Block.Atom.Select as Select

13+import Yoga.Block.Container.Style as Styles

14+

15+default ∷

16+ { decorators ∷ Array (Effect JSX → JSX)

17+ , title ∷ String

18+ }

19+default =

20+ { title: "Atom/Select"

21+ , decorators:

22+ [ \storyFn →

23+ R.div_

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

25+ , unsafePerformEffect storyFn

26+ ]

27+ ]

28+ }

29+

30+select ∷ Effect JSX

31+select =

32+ pure

33+ $ fragment

34+ [ R.div_

35+ [ R.h2_ [ R.text "Select" ]

36+ , element Select.component

37+ { choice: 1

38+ , choices: [ 1, 2, 3 ]

39+ , onChange: action "changed"

40+ , toString: show

41+ , toValue: show

42+ }

43+ ]

44+ ]