28caf1e · rowtype-yoga/ry-blocks

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

Add button

commit28caf1e143f2a40bba2f3da9626534f6d9ec7aa4 authorMark Eibes <mark.eibes@gmail.com> dateFri 25 Dec 2020, 21:56 (6 years ago) parenta0f3e37

13 files changed+297−29

compare with main

unifiedsplit

src/Yoga/Block/Atom/Input/Placement/Types.purs → src/React/Basic/Popper/Placement/Types.pursrenamed+1−1

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

1−module Yoga.Block.Atom.Input.Placement.Types (render, Placement(..), Primary(..), Secondary(..)) where

1+module React.Basic.Popper.Placement.Types (render, Placement(..), Primary(..), Secondary(..)) where

33import Prelude

44import Data.Foldable (foldMap)

src/Yoga/Block/Atom/Button/Story.pursnew file+37

@@ -0,0 +1,37 @@

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

3+import Prelude

4+import Effect (Effect)

5+import Effect.Unsafe (unsafePerformEffect)

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

7+import React.Basic.DOM as R

8+import React.Basic.Emotion as E

9+import React.Basic.Events (handler_)

10+import Yoga.Block.Atom.Button.View as Button

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

12+

13+default ∷

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

15+ , title ∷ String

16+ }

17+default =

18+ { title: "Atom/Button"

19+ , decorators:

20+ [ \storyFn ->

21+ R.div_

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

23+ , unsafePerformEffect storyFn

24+ ]

25+ ]

26+ }

27+

28+button ∷ Effect JSX

29+button = do

30+ pure

31+ $ fragment

32+ [ R.div_

33+ [ R.h1_ [ R.text "Button Examples" ]

34+ , R.h2_ [ R.text "Generic Button" ]

35+ , element Button.component { value: "A Generic Button", onClick: handler_ mempty }

36+ ]

37+ ]

src/Yoga/Block/Atom/Button/Style.pursnew file+11

@@ -0,0 +1,11 @@

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

3+import Yoga.Prelude.Style

5+type Props f r

6+ = ( css ∷ f Style

7+ | r

8+ )

10+button :: Style

11+button = css {}

src/Yoga/Block/Atom/Button/Types.pursnew file+9

@@ -0,0 +1,9 @@

1+module Yoga.Block.Atom.Button.Types where

3+import Prelude

5+data ButtonType

6+ = Primary

7+ | Secondary

8+ | Generic

9+derive instance eqHTMLButton ∷ Eq ButtonType

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

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

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

3+import Yoga.Prelude.View

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

5+import Record.Builder as RB

6+import Yoga.Block.Atom.Button.Style as Style

7+import Yoga.Block.Atom.Button.Types (ButtonType)

8+import Yoga.Block.Internal (ButtonProps, emotionButton)

10+type PropsF f

11+ = ( buttonType ∷ f ButtonType

12+ | Style.Props f ButtonProps

13+ )

14+

15+type Props

16+ = PropsF Id

17+

18+type PropsOptional

19+ = PropsF OptionalProp

20+

21+key :: forall t1. SProxy t1

22+key = SProxy

23+

24+component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }

25+component = rawComponent

26+

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

28+rawComponent =

29+ mkForwardRefComponent "Button" do

30+ \(props ∷ { | PropsOptional }) propsRef -> React.do

31+ pure

32+ $ emotionButton propsRef

33+ ( props

34+ # RB.build

35+ ( RB.delete (key :: _ "css") >>> RB.delete (key :: _ "buttonType")

36+ )

37+ )

38+ { className: "ry-button"

39+ , css: Style.button

40+ }

src/Yoga/Block/Atom/Input/Story.purs−3

@@ -73,9 +73,6 @@ input = do

7373 , element Input.component { type: HTMLInput.Text, value: "", label: NonEmptyString "Heinzi", onChange: handler_ mempty }

7474 , R.h2_ [ R.text "Search Input" ]

7575 , element Input.component { type: HTMLInput.Search, placeholder: "Search...", onChange: handler_ mempty }

76− , R.h2_ [ R.text "Button" ]

77− , element Input.component { type: HTMLInput.Button, value: "A button", onChange: handler_ mempty }

78− , R.h2_ [ R.text "Submit" ]

7976 -- , element Input.component { type: "submit" }

8077 -- , R.h2_ [ R.text "Radio" ]

8178 -- , element Input.component { type: "radio" }

src/Yoga/Block/Atom/Input/Style.purs+4−4

@@ -4,10 +4,10 @@ import Yoga.Prelude.Style

44import Data.Interpolate (i)

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

7−type Props f r =

8− ( css ∷ f Style

9− | r

10− )

7+type Props f r

8+ = ( css ∷ f Style

9+ | r

10+ )

1111

1212leftIconSize ∷ StyleProperty

1313leftIconSize = var "--left-icon-size"

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

@@ -2,9 +2,10 @@ module Yoga.Block.Atom.Input.Types where

33import Prelude

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

6+-- HTML Element

57data HTMLInput

6− = Button

7− | Checkbox

8+ = Checkbox

89 | Color

910 | Date

1011 | DatetimeLocal

@@ -25,12 +26,10 @@ data HTMLInput

2526 | Time

2627 | Url

2728 | Week

28−

2929derive instance eqHTMLInput ∷ Eq HTMLInput

3030

3131toString ∷ HTMLInput -> String

3232toString = case _ of

33− Button -> "button"

3433 Checkbox -> "checkbox"

3534 Color -> "color"

3635 Date -> "date"

src/Yoga/Block/Atom/Input/View.purs−1

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

44import Data.String.NonEmpty (NonEmptyString)

55import Data.String.NonEmpty as NonEmptyString

66import Data.Symbol (SProxy(..))

7−import Effect.Uncurried (mkEffectFn1, runEffectFn1)

87import Foreign.Object (Object)

98import Foreign.Object as Object

109import Framer.Motion as M

src/Yoga/Block/Atom/Popover/Story.purs+2−2

@@ -22,12 +22,12 @@ import React.Basic.Emotion as E

2222import React.Basic.Events (handler, handler_)

2323import React.Basic.Hooks (reactComponent)

2424import React.Basic.Hooks as React

25+import React.Basic.Popper.Placement.Types (Placement(..))

26+import React.Basic.Popper.Placement.Types as Placement

2527import React.Basic.Popper.Types (nullRef)

2628import Unsafe.Coerce (unsafeCoerce)

2729import Yoga ((/>), (</), (</>))

2830import Yoga.Block.Atom.Input as Input

29−import Yoga.Block.Atom.Input.Placement.Types (Placement(..))

30−import Yoga.Block.Atom.Input.Placement.Types as Placement

3131import Yoga.Block.Atom.Input.Types as HTMLInput

3232import Yoga.Block.Atom.Popover as Popover

3333import Yoga.Block.Container.Style as Styles

src/Yoga/Block/Atom/Popover/Style.purs+4−4

@@ -2,10 +2,10 @@ module Yoga.Block.Atom.Popover.Style where

33import Yoga.Prelude.Style

5−type Props f r =

6− ( css ∷ f Style

7− | r

8− )

5+type Props f r

6+ = ( css ∷ f Style

7+ | r

8+ )

1010content ∷ Style

1111content =

src/Yoga/Block/Atom/Popover/View.purs+2−2

@@ -4,10 +4,10 @@ import Yoga.Prelude.View

44import Effect.Uncurried (mkEffectFn1)

55import React.Basic.Hooks as React

66import React.Basic.Popper.Hook (usePopper)

7+import React.Basic.Popper.Placement.Types (Placement)

8+import React.Basic.Popper.Placement.Types as Placement

79import React.Basic.Popper.Types (modifierOffset, nullRef)

810import Unsafe.Coerce (unsafeCoerce)

9−import Yoga.Block.Atom.Input.Placement.Types (Placement)

10−import Yoga.Block.Atom.Input.Placement.Types as Placement

1111import Yoga.Block.Atom.Popover.Style as Style

1212

1313type PropsF f

src/Yoga/Block/Internal.purs+184−8

@@ -9,9 +9,12 @@ module Yoga.Block.Internal

99 , DivPropsF

1010 , InputProps

1111 , InputPropsF

12+ , ButtonProps

13+ , ButtonPropsF

1214 , NodeRef

1315 , emotionDiv

1416 , emotionInput

17+ , emotionButton

1518 , module Yoga.Block.Internal.OptionalProp

1619 , module Yoga.Block.Internal.CSS

1720 , unsafeUnionDroppingUndefined

@@ -35,13 +38,14 @@ import Foreign.Object (Object)

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

3639import Prim.Row as Row

3740import Prim.RowList as RL

38−import React.Basic.DOM (CSS, unsafeCreateDOMComponent)

41+import React.Basic.DOM (CSS, Props_input, Props_button, unsafeCreateDOMComponent)

3942import React.Basic.Emotion (Style)

4043import React.Basic.Emotion as E

4144import React.Basic.Events (EventHandler)

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

4346import Record.Extra (class Keys, keys)

4447import Type.Data.Row (RProxy(..))

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

4549import Unsafe.Coerce (unsafeCoerce)

4650import Untagged.Union (UndefinedOr, uorToMaybe)

4751import Web.DOM (Node)

@@ -136,30 +140,31 @@ pickDefined ref = runFn3 pickDefinedFn ref ks

136140 where

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

138142

139−emotionInput_ ∷

143+-- [TODO] Delete?

144+emotionInputKeyed_ ∷

140145 ∀ props props_.

141146 Lacks "ref" props =>

142− Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node) | InputProps ) =>

147+ Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node), key ∷ String | InputProps ) =>

143148 { | InputProps } ->

144149 { className ∷ String

145150 , css ∷ Style

151+ , key ∷ String

146152 | props

147153 } ->

148154 JSX

149−emotionInput_ = unsafeEmotion unsafeInput

155+emotionInputKeyed_ = unsafeEmotionKeyed unsafeInput

150156

151−emotionInputKeyed_ ∷

157+emotionInput_ ∷

152158 ∀ props props_.

153159 Lacks "ref" props =>

154− Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node), key ∷ String | InputProps ) =>

160+ Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node) | InputProps ) =>

155161 { | InputProps } ->

156162 { className ∷ String

157163 , css ∷ Style

158− , key ∷ String

159164 | props

160165 } ->

161166 JSX

162−emotionInputKeyed_ = unsafeEmotionKeyed unsafeInput

167+emotionInput_ = unsafeEmotion unsafeInput

163168

164169emotionInput ∷

165170 ∀ props props_ more.

@@ -177,6 +182,34 @@ emotionInput ref = emotionInput_ <<< pickDefined ref

177182unsafeInput ∷ ∀ r. ReactComponent (Record r)

178183unsafeInput = dangerous "input"

179184

185+emotionButton_ ∷

186+ ∀ props props_.

187+ Lacks "ref" props =>

188+ Union props props_ ( className ∷ String, css ∷ Style | ButtonProps ) =>

189+ { | ButtonProps } ->

190+ { className ∷ String

191+ , css ∷ Style

192+ | props

193+ } ->

194+ JSX

195+emotionButton_ = unsafeEmotion unsafeButton

196+

197+emotionButton ∷

198+ ∀ props props_ more.

199+ Lacks "ref" props =>

200+ Union props props_ ( className ∷ String, css ∷ Style | ButtonProps ) =>

201+ Ref (Nullable Node) ->

202+ { | ButtonPropsF Id more } ->

203+ { className ∷ String

204+ , css ∷ Style

205+ | props

206+ } ->

207+ JSX

208+emotionButton ref = emotionButton_ <<< pickDefined ref

209+

210+unsafeButton ∷ ∀ r. ReactComponent (Record r)

211+unsafeButton = dangerous "button"

212+

180213dangerous ∷ ∀ props. String -> ReactComponent (Record props)

181214dangerous = unsafePerformEffect <<< unsafeCreateDOMComponent

182215

@@ -479,3 +512,146 @@ type InputPropsF f more

479512 , max ∷ f (String)

480513 | more

481514 )

515+

516+type ButtonProps

517+ = ButtonPropsF Id ()

518+

519+type ButtonPropsF f more

520+ = ( _aria :: f (Object String)

521+ , _data :: f (Object String)

522+ , about :: f String

523+ , acceptCharset :: f String

524+ , accessKey :: f String

525+ , allowFullScreen :: f Boolean

526+ , allowTransparency :: f Boolean

527+ , autoFocus :: f Boolean

528+ , autoPlay :: f Boolean

529+ , capture :: f Boolean

530+ , cellPadding :: f String

531+ , cellSpacing :: f String

532+ , charSet :: f String

533+ , children :: f (Array JSX)

534+ , classID :: f String

535+ , className :: f String

536+ , colSpan :: f Int

537+ , contentEditable :: f Boolean

538+ , contextMenu :: f String

539+ , crossOrigin :: f String

540+ , dangerouslySetInnerHTML :: f { __html :: String }

541+ , datatype :: f String

542+ , dateTime :: f String

543+ , dir :: f String

544+ , disabled :: f Boolean

545+ , draggable :: f Boolean

546+ , encType :: f String

547+ , form :: f String

548+ , formAction :: f String

549+ , formEncType :: f String

550+ , formMethod :: f String

551+ , formNoValidate :: f Boolean

552+ , formTarget :: f String

553+ , frameBorder :: f String

554+ , hidden :: f Boolean

555+ , hrefLang :: f String

556+ , htmlFor :: f String

557+ , httpEquiv :: f String

558+ , icon :: f String

559+ , id :: f String

560+ , inlist :: f String

561+ , inputMode :: f String

562+ , is :: f String

563+ , itemID :: f String

564+ , itemProp :: f String

565+ , itemRef :: f String

566+ , itemScope :: f Boolean

567+ , itemType :: f String

568+ , key :: f String

569+ , keyParams :: f String

570+ , keyType :: f String

571+ , lang :: f String

572+ , marginHeight :: f String

573+ , marginWidth :: f String

574+ , maxLength :: f Int

575+ , mediaGroup :: f String

576+ , minLength :: f Int

577+ , name :: f String

578+ , noValidate :: f Boolean

579+ , onAnimationEnd :: f EventHandler

580+ , onAnimationIteration :: f EventHandler

581+ , onAnimationStart :: f EventHandler

582+ , onBlur :: f EventHandler

583+ , onClick :: f EventHandler

584+ , onCompositionEnd :: f EventHandler

585+ , onCompositionStart :: f EventHandler

586+ , onCompositionUpdate :: f EventHandler

587+ , onContextMenu :: f EventHandler

588+ , onCopy :: f EventHandler

589+ , onCut :: f EventHandler

590+ , onDoubleClick :: f EventHandler

591+ , onDrag :: f EventHandler

592+ , onDragEnd :: f EventHandler

593+ , onDragEnter :: f EventHandler

594+ , onDragExit :: f EventHandler

595+ , onDragLeave :: f EventHandler

596+ , onDragOver :: f EventHandler

597+ , onDragStart :: f EventHandler

598+ , onDrop :: f EventHandler

599+ , onFocus :: f EventHandler

600+ , onGotPointerCapture :: f EventHandler

601+ , onInvalid :: f EventHandler

602+ , onKeyDown :: f EventHandler

603+ , onKeyPress :: f EventHandler

604+ , onKeyUp :: f EventHandler

605+ , onLostPointerCapture :: f EventHandler

606+ , onMouseDown :: f EventHandler

607+ , onMouseEnter :: f EventHandler

608+ , onMouseLeave :: f EventHandler

609+ , onMouseMove :: f EventHandler

610+ , onMouseOut :: f EventHandler

611+ , onMouseOver :: f EventHandler

612+ , onMouseUp :: f EventHandler

613+ , onPaste :: f EventHandler

614+ , onPointerCancel :: f EventHandler

615+ , onPointerDown :: f EventHandler

616+ , onPointerEnter :: f EventHandler

617+ , onPointerLeave :: f EventHandler

618+ , onPointerMove :: f EventHandler

619+ , onPointerOut :: f EventHandler

620+ , onPointerOver :: f EventHandler

621+ , onPointerUp :: f EventHandler

622+ , onSelect :: f EventHandler

623+ , onSubmit :: f EventHandler

624+ , onTouchCancel :: f EventHandler

625+ , onTouchEnd :: f EventHandler

626+ , onTouchMove :: f EventHandler

627+ , onTouchStart :: f EventHandler

628+ , onTransitionEnd :: f EventHandler

629+ , onWheel :: f EventHandler

630+ , prefix :: f String

631+ , property :: f String

632+ , radioGroup :: f String

633+ , readOnly :: f Boolean

634+ , ref :: f (Ref (Nullable Node))

635+ , resource :: f String

636+ , role :: f String

637+ , rowSpan :: f Int

638+ , scoped :: f Boolean

639+ , seamless :: f Boolean

640+ , security :: f String

641+ , spellCheck :: f Boolean

642+ , srcDoc :: f JSX

643+ , srcLang :: f String

644+ , srcSet :: f String

645+ , style :: f CSS

646+ , suppressContentEditableWarning :: f Boolean

647+ , tabIndex :: f Int

648+ , title :: f String

649+ , type :: f String

650+ , typeof :: f String

651+ , unselectable :: f Boolean

652+ , useMap :: f String

653+ , value :: f String

654+ , vocab :: f String

655+ , wmode :: f String

656+ | more

657+ )