purescript-react-basic-emotion/examples/basic/src/Basic.purs at v4.2.0 · purescript-react/purescript-react-basic-emotion · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
module Basic where

import Prelude
import Effect (Effect)
import React.Basic.DOM as R
import React.Basic.Emotion as E
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment)

data Size
  = S
  | M
  | L

border :: forall r. { borderSize :: Size, borderColor :: String | r } -> E.Style
border { borderSize, borderColor } =
  E.css
    { borderWidth:
      E.int case borderSize of
        S -> 1
        M -> 2
        L -> 4
    , borderColor: E.str borderColor
    , borderRadius: E.int 4
    , borderStyle: E.str "solid"
    , padding: E.str "16px 24px"
    }

text :: Size -> E.Style
text size =
  E.css
    { fontFamily: E.str "sans-serif"
    , fontSize:
      E.int case size of
        S -> 14
        M -> 18
        L -> 32
    , fontWeight:
      E.int case size of
        S -> 400
        M -> 500
        L -> 800
    }

type SlatProps
  = { borderSize :: Size
    , borderColor :: String
    , className :: String
    , content :: Array JSX
    , css :: E.Style
    }

slatDefaults :: SlatProps
slatDefaults =
  { borderSize: M
  , borderColor: "grey"
  , className: ""
  , content: mempty
  , css: mempty
  }

mkSlat :: Effect (ReactComponent SlatProps)
mkSlat = do
  box <- mkBox
  component "Slat" \props ->
    pure
      $ E.element
          box
          { className: props.className
          , css:
            E.merge
              [ border props
              , text L
              , E.css { flexDirection: E.str "row" }
              , spaceChildrenEvenly
              ]
          , content: props.content
          }

mkEx :: Effect (ReactComponent {})
mkEx = do
  slat <- mkSlat
  component "BasicEx" \props -> React.do
    pure
      $ fragment
          [ element slat
              slatDefaults
                { content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
                }
          , E.element
              slat
              slatDefaults
                { content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
                , css =
                  E.merge
                    [ E.css
                        { padding: E.int 4
                        , maxWidth: E.int 200
                        }
                    , text S
                    ]
                }
          ]

type BoxProps
  = { className :: String
    , content :: Array JSX
    }

boxDefaults :: BoxProps
boxDefaults =
  { className: ""
  , content: mempty
  }

boxStyle :: E.Style
boxStyle =
  E.css
    { display: E.str "flex"
    , flexDirection: E.str "column"
    , justifyContent: E.str "center"
    , alignItems: E.str "stretch"
    }

mkBox :: Effect (ReactComponent BoxProps)
mkBox = do
  component "Box" \props ->
    pure
      $ E.element R.div'
          { className: props.className
          , css: boxStyle
          , children: props.content
          }

spaceChildrenEvenly :: E.Style
spaceChildrenEvenly =
  E.css
    { "& > *":
      E.nested
        $ E.css
            { flex: E.str "1 0 auto"
            }
    }