git.iko.soy/rowtype-yoga/psfp
on 133b502 help sign in
rowtype-yoga/psfp/stories/ButtonStories.purs
80 lines 3.0 kB history raw
1module ButtonStories where
3import Prelude hiding (add)
5import Button.Component (ButtonType(..), mkButton)
6import Decorator.FullScreen (fullScreenDecorator)
7import Effect (Effect)
8import Effect.Console (log)
9import React.Basic.DOM as R
10import React.Basic.Events (handler_)
11import React.Basic.Hooks (component, element)
12import SVG.Icon (alternativeIcon, apIcon, appendIcon, applyIcon, applyflippedIcon, bindIcon, composeIcon, forallIcon, kleisliIcon, mapIcon, mapflippedIcon, pslogoIcon)
13import Storybook.React (Storybook, add, addDecorator, storiesOf)
15stories ∷ Effect Storybook
16stories =
17 storiesOf "Button" do
18 addDecorator fullScreenDecorator
19 add "Button" mkExample
20 [ { text: "Cancel"
21 , buttonType: PlainButton
22 , buttonProps: { onClick: handler_ (log "clicked cancel") }
23 }
24 , { text: "OK"
25 , buttonType: HighlightedButton
26 , buttonProps:
27 { onClick: handler_ (log "clicked OK")
28 }
29 }
30 , { text: "Disabled"
31 , buttonType: DisabledButton
32 , buttonProps:
33 { onClick: handler_ (log "clicked Disabled")
34 }
35 }
36 , { text: "Very long button text"
37 , buttonType: PlainButton
38 , buttonProps: { onClick: handler_ (log "clicked very long...") }
39 }
40 ]
41 add "Icon Button" mkIconButton
42 [ { icon: alternativeIcon, buttonType: PlainButton }
43 , { icon: apIcon, buttonType: HighlightedButton }
44 , { icon: appendIcon, buttonType: PlainButton }
45 , { icon: applyflippedIcon, buttonType: PlainButton }
46 , { icon: applyIcon, buttonType: PlainButton }
47 , { icon: bindIcon, buttonType: PlainButton }
48 , { icon: composeIcon, buttonType: PlainButton }
49 , { icon: forallIcon, buttonType: PlainButton }
50 , { icon: kleisliIcon, buttonType: DisabledButton }
51 , { icon: mapflippedIcon, buttonType: PlainButton }
52 , { icon: mapIcon, buttonType: PlainButton }
53 , { icon: pslogoIcon, buttonType: PlainButton }
54 ]
55 where
56 mkExample = do
57 button <- mkButton
58 component "ExampleButton" \{ text, buttonType, buttonProps } -> React.do
59 pure
60 $ element button
61 { children: [ R.text text ], buttonProps, buttonType
62 }
64 mkIconButton = do
65 button <- mkButton
66 component "ExampleIconButton" \{ icon, buttonType } -> React.do
67 pure
68 $ element button
69 { children: [ element icon { width: 30 } ]
70 , buttonProps: { }
71 , buttonType
72 }
74loremIpsum ∷ String
75loremIpsum =
76 """PureScript is a strongly-typed, purely-functional programming language that compiles"""
77 <> """ to JavaScript. It can be used to develop web applications, server side apps, and al"""
78 <> """so desktop applications with use of Electron. Its syntax is mostly comparable to tha"""
79 <> """t of Haskell. In addition, it introduces row polymorphism and extensible records.[2]"""
80 <> """ Also, contrary to Haskell, PureScript adheres to a strict evaluation strategy."""