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