git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Update framer motion
6802898Mark Eibes
.storybook/main.js+6−3
compare with main
unifiedsplit
@@ -1,4 +1,7 @@
1module.exports = {
1module.exports = {
2+ core: {
3+ builder: "webpack5",
4+ },
2− stories: ['../output/**/*.Story/index.js'],
5+ stories: ["../output/**/*.Story/index.js"],
3− addons: []
6+ addons: [],
4−};
7+}
.vscode/settings.json+1−1
@@ -1,6 +1,6 @@
1{
1{
2 "editor.formatOnSave": true,
2 "editor.formatOnSave": true,
3− "workbench.colorTheme": "Kai Light Accent",
3+ "workbench.colorTheme": "Abyss",
4 "search.useGlobalIgnoreFiles": true,
4 "search.useGlobalIgnoreFiles": true,
5 "files.watcherExclude": {
5 "files.watcherExclude": {
6 "**/.spago/**": true,
6 "**/.spago/**": true,
package.json+12−12
@@ -9,9 +9,11 @@
9 "devDependencies": {
9 "devDependencies": {
10 "@babel/core": "^7.10.5",
10 "@babel/core": "^7.10.5",
11 "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
11 "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
12− "@storybook/addons": "^6.3.4",
12+ "@storybook/addons": "^6.4.9",
13+ "@storybook/builder-webpack5": "^6.4.9",
14+ "@storybook/manager-webpack5": "^6.4.9",
13− "@storybook/react": "^6.3.4",
15+ "@storybook/react": "^6.4.9",
14− "@storybook/theming": "^6.3.4",
16+ "@storybook/theming": "^6.4.9",
15 "@testing-library/react": "^11.0.4",
17 "@testing-library/react": "^11.0.4",
16 "@testing-library/user-event": "^12.1.7",
18 "@testing-library/user-event": "^12.1.7",
17 "babel-loader": "^8.1.0",
19 "babel-loader": "^8.1.0",
@@ -20,17 +22,15 @@
20 "html-webpack-plugin": "^4.5.0",
22 "html-webpack-plugin": "^4.5.0",
21 "jsdom": "^16.3.0",
23 "jsdom": "^16.3.0",
22 "jsdom-global": "^3.0.2",
24 "jsdom-global": "^3.0.2",
23− "purescript": "^0.14.3",
24 "react-refresh": "^0.8.3",
25 "react-refresh": "^0.8.3",
25 "rimraf": "^3.0.2",
26 "rimraf": "^3.0.2",
26 "source-map": "GerHobbelt/source-map#patch-8",
27 "source-map": "GerHobbelt/source-map#patch-8",
27 "source-map-loader": "^1.1.2",
28 "source-map-loader": "^1.1.2",
28− "spago": "^0.20.3",
29 "svg2psreact": "^2.1.0",
29 "svg2psreact": "^2.1.0",
30− "webpack": "^4.0.0",
30+ "webpack": "^5.0.0",
31− "webpack-cli": "^4.0.0",
31+ "webpack-cli": "^4.9.1",
32− "webpack-dev-server": "^3.11.0",
32+ "webpack-dev-server": "^4.6.0",
33− "webpack-merge": "^5.0.9"
33+ "webpack-merge": "^5.8.0"
34 },
34 },
35 "scripts": {
35 "scripts": {
36 "clean": "rimraf node_modules output dce-output .spago dist/* *.lock dist",
36 "clean": "rimraf node_modules output dce-output .spago dist/* *.lock dist",
@@ -55,9 +55,9 @@
55 "@emotion/react": "^11.4.0",
55 "@emotion/react": "^11.4.0",
56 "@popperjs/core": "^2.6.0",
56 "@popperjs/core": "^2.6.0",
57 "downshift": "^6.1.2",
57 "downshift": "^6.1.2",
58− "framer-motion": "^4.0.3",
58+ "framer-motion": "^5.3.3",
59− "react": "^16.0.0",
59+ "react": "^17.0.0",
60− "react-dom": "^16.0.0",
60+ "react-dom": "^17.0.0",
61 "react-intersection-observer": "^8.32.0",
61 "react-intersection-observer": "^8.32.0",
62 "react-popper": "^2.2.4",
62 "react-popper": "^2.2.4",
63 "react-syntax-highlighter": "^15.3.1"
63 "react-syntax-highlighter": "^15.3.1"
src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs+82−77
@@ -6,6 +6,7 @@ import Control.MonadZero as MZ
6import Data.Traversable (traverse)
6import Data.Traversable (traverse)
7import Data.TwoOrMore (TwoOrMore)
7import Data.TwoOrMore (TwoOrMore)
8import Data.TwoOrMore as TwoOrMore
8import Data.TwoOrMore as TwoOrMore
9+import Effect.Class.Console as Console
9import Effect.Unsafe (unsafePerformEffect)
10import Effect.Unsafe (unsafePerformEffect)
10import Foreign.Object as Object
11import Foreign.Object as Object
11import Framer.Motion (VariantLabel)
12import Framer.Motion (VariantLabel)
@@ -40,7 +41,7 @@ component =
40 \(props ∷ Props) -> React.do
41 \(props ∷ Props) -> React.do
41 maybeAnimationVariants /\ setVariants <- useState' Nothing
42 maybeAnimationVariants /\ setVariants <- useState' Nothing
42 variantIndex /\ modVariantIndex <- useState props.activeItemIndex
43 variantIndex /\ modVariantIndex <- useState props.activeItemIndex
43− maybeDragX /\ setDragX <- useState' Nothing
44+ maybeDragXRef <- useRef Nothing
44 { scrollX, scrollY } <- useScrollPosition
45 { scrollX, scrollY } <- useScrollPosition
45 activeLeft <- useMotionValue 0.0
46 activeLeft <- useMotionValue 0.0
46 activeWidth <- useMotionValue 0.0
47 activeWidth <- useMotionValue 0.0
@@ -50,14 +51,16 @@ component =
50 unless (maybeAnimationVariants == Just styles) do
51 unless (maybeAnimationVariants == Just styles) do
51 setVariants (Just styles)
52 setVariants (Just styles)
52 mempty
53 mempty
53− useLayoutEffect maybeDragX do
54+ let
55+ setDragXRef new = do
56+ writeRef maybeDragXRef new
57+ maybeDragX <- readRef maybeDragXRef
54− case maybeDragX, maybeAnimationVariants of
58+ case maybeDragX, maybeAnimationVariants of
55− Just x, Just animationVariants -> do
59+ Just x, Just animationVariants -> do
56− let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
60+ let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
57− activeLeft # MotionValue.set left
61+ activeLeft # MotionValue.set left
58− activeWidth # MotionValue.set width
62+ activeWidth # MotionValue.set width
59− _, _ -> mempty
60− mempty
63+ _, _ -> mempty
61 useEffect props.activeItemIndex do
64 useEffect props.activeItemIndex do
62 modVariantIndex (const props.activeItemIndex)
65 modVariantIndex (const props.activeItemIndex)
63 mempty
66 mempty
@@ -84,63 +87,66 @@ component =
84 { className: "ry-active-segmented-element-wrapper"
87 { className: "ry-active-segmented-element-wrapper"
85 , css: Style.activeElementWrapper
88 , css: Style.activeElementWrapper
86 , children:
89 , children:
87− [ Emotion.element Motion.div
90+ [ Emotion.element Motion.div
88− { css: Style.activeElement
91+ { css: Style.activeElement
89− , layout: Motion.layout true
92+ , layout: Motion.layout true
90− , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
93+ , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
91− , variants
94+ , variants
92− , className: "ry-active-segmented-element"
95+ , className: "ry-active-segmented-element"
93− , initial: Motion.initial $ indexToVariant props.activeItemIndex
96+ , initial: Motion.initial $ indexToVariant props.activeItemIndex
94− , drag: Motion.drag "x"
97+ , drag: Motion.drag "x"
95− , dragMomentum: Motion.dragMomentum false
98+ , dragMomentum: Motion.dragMomentum false
96− , animate: Motion.animate $ indexToVariant variantIndex
99+ , animate: Motion.animate $ indexToVariant variantIndex
97− , style:
100+ , style:
98− css
101+ css
99− { left: activeLeft
102+ { left: activeLeft
100− , width: activeWidth
103+ , width: activeWidth
101− }
104+ }
102− , whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 }
105+ , whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 }
103− , onDragStart:
106+ , onDragStart:
104− Motion.onDragStart \_ pi -> do
107+ Motion.onDragStart \_ pi -> do
105− maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
108+ maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
106− for_ maybeBbox \bbox ->
109+ for_ maybeBbox \bbox ->
107− setDragX (Just (pi.point.x - bbox.left))
110+ setDragXRef (Just (pi.point.x - bbox.left))
108− , onDrag:
111+ , onDrag:
109− Motion.onDrag \_ pi -> do
112+ Motion.onDrag \_ pi -> do
113+ Console.log "Marlene on the wall"
114+ maybeDragX <- readRef maybeDragXRef
110− when (isJust maybeDragX) do
115+ when (isJust maybeDragX) do
111− maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
116+ maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
112− for_ maybeBbox \bbox ->
117+ for_ maybeBbox \bbox ->
113− setDragX (Just (pi.point.x - bbox.left))
118+ setDragXRef (Just (pi.point.x - bbox.left))
114− , onDragEnd:
119+ , onDragEnd:
115− Motion.onDragEnd \_ _ -> do
120+ Motion.onDragEnd \_ _ -> do
121+ maybeDragX <- readRef maybeDragXRef
116− let
122+ let
117− x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
123+ x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
118− newIdx =
124+ newIdx =
119− findOverlapping
125+ findOverlapping
120− props.activeItemIndex
126+ props.activeItemIndex
121− animationVariants
127+ animationVariants
122− x
128+ x
123− newItem = fromMaybe'
129+ newItem = fromMaybe'
124− (\_ -> TwoOrMore.head props.buttonContents)
130+ (\_ -> TwoOrMore.head props.buttonContents)
125− (props.buttonContents TwoOrMore.!! newIdx)
131+ (props.buttonContents TwoOrMore.!! newIdx)
126− v =
132+ v =
127− animationVariants TwoOrMore.!! newIdx
133+ animationVariants TwoOrMore.!! newIdx
128− # fromMaybe' \_ -> unsafeCrashWith "omg"
134+ # fromMaybe' \_ -> unsafeCrashWith "omg"
129− activeLeft # MotionValue.set v.left
135+ activeLeft # MotionValue.set v.left
130− activeWidth # MotionValue.set v.width
136+ activeWidth # MotionValue.set v.width
131− props.updateActiveItem newItem newIdx
137+ props.updateActiveItem newItem newIdx
132− setDragX Nothing
138+ writeRef maybeDragXRef Nothing
133− , dragElastic: Motion.dragElastic false
139+ , dragElastic: Motion.dragElastic false
134− , dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
140+ , dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
135− , transition:
141+ , transition:
136− Motion.transition
142+ Motion.transition
137− { type: "tween"
143+ { type: "tween"
138− , duration: if isJust maybeDragX then 0.0 else 0.167
144+ , duration: if isJust (unsafePerformEffect (readRef maybeDragXRef)) then 0.0 else 0.167
139− , ease: "easeOut"
145+ , ease: "easeOut"
140− }
146+ }
141− , _aria: Object.fromHomogeneous { hidden: "true" }
147+ , _aria: Object.fromHomogeneous { hidden: "true" }
142− }
148+ }
143− ]
149+ ]
144 }
150 }
145
151
146getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox)
152getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox)
@@ -177,12 +183,12 @@ findOverlapping activeIndex styles x =
177 let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
183 let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
178 TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
184 TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
179
185
180−handleDrag ∷
186+handleDrag
181− { activeItemIndex ∷ Int
187+ ∷ { activeItemIndex ∷ Int
182− , animationVariants ∷ TwoOrMore BBox
188+ , animationVariants ∷ TwoOrMore BBox
183− , x ∷ Number
189+ , x ∷ Number
184− } ->
190+ }
185− { left ∷ Number, width ∷ Number }
191+ -> { left ∷ Number, width ∷ Number }
186handleDrag { x, activeItemIndex, animationVariants } = do
192handleDrag { x, activeItemIndex, animationVariants } = do
187 let idx = findOverlapping activeItemIndex animationVariants x
193 let idx = findOverlapping activeItemIndex animationVariants x
188 let av = animationVariants
194 let av = animationVariants
@@ -223,8 +229,7 @@ handleDrag { x, activeItemIndex, animationVariants } = do
223 let width = right - left
229 let width = right - left
224 if x < firstVariant.left then
230 if x < firstVariant.left then
225 { left: firstVariant.left, width: firstVariant.width }
231 { left: firstVariant.left, width: firstVariant.width }
226− else
227− if x >= lastVariant.left + lastVariant.width then do
232+ else if x >= lastVariant.left + lastVariant.width then do
228− { left: lastVariant.left, width: lastVariant.width }
233+ { left: lastVariant.left, width: lastVariant.width }
229− else do
234+ else do
230− { left, width }
235+ { left, width }
src/Yoga/Block/Atom/Toggle/View.purs+119−105
@@ -71,32 +71,34 @@ rawComponent =
71 buttonRef <- useRef null
71 buttonRef <- useRef null
72 toggleRef <- useRef null
72 toggleRef <- useRef null
73 tapState <- useRef TapNotAllowed
73 tapState <- useRef TapNotAllowed
74− dragState /\ setDragState <- React.useState' NotDragging
74+ dragStateRef <- useRef NotDragging
75− useEffect dragState do
75+ let
76+ setDragState new = do
77+ writeRef dragStateRef new
78+ dragState <- readRef dragStateRef
76− case dragState of
79+ case dragState of
77− NotDragging -> mempty
80+ NotDragging -> mempty
78− Dragging _ -> do
81+ Dragging _ -> do
79− writeRef tapState TapNotAllowed
82+ writeRef tapState TapNotAllowed
80− DragDone { startX, endX } -> do
83+ DragDone { startX, endX } -> do
81− maybeBbox <- getBoundingBoxFromRef buttonRef
84+ maybeBbox <- getBoundingBoxFromRef buttonRef
82− for_ maybeBbox \bbox -> do
85+ for_ maybeBbox \bbox -> do
83− if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
86+ if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
84− setTogglePosition ToggleIsLeft
87+ setTogglePosition ToggleIsLeft
85− else do
88+ else do
86− setTogglePosition ToggleIsRight
89+ setTogglePosition ToggleIsRight
87− mempty
88 let
90 let
89 buttonVariants =
91 buttonVariants =
90 { left:
92 { left:
91− { backgroundColor:
93+ { backgroundColor:
92− (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
94+ (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
93− ?|| (Emotion.str colour.backgroundLayer3)
95+ ?|| (Emotion.str colour.backgroundLayer3)
94− }
96+ }
95 , right:
97 , right:
96− { backgroundColor:
98+ { backgroundColor:
97− (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
99+ (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
98− ?|| (Emotion.str colour.success)
100+ ?|| (Emotion.str colour.success)
99− }
101+ }
100 }
102 }
101 buttonVariant = Motion.makeVariantLabels buttonVariants
103 buttonVariant = Motion.makeVariantLabels buttonVariants
102 -- components
104 -- components
@@ -108,40 +110,43 @@ rawComponent =
108 , css: Style.button <>? props.css
110 , css: Style.button <>? props.css
109 , variants: Motion.variants buttonVariants
111 , variants: Motion.variants buttonVariants
110 , initial:
112 , initial:
111− Motion.initial case togglePosition of
113+ Motion.initial case togglePosition of
112− ToggleIsRight -> buttonVariant.right
114+ ToggleIsRight -> buttonVariant.right
113− ToggleIsLeft -> buttonVariant.left
115+ ToggleIsLeft -> buttonVariant.left
114 , animate:
116 , animate:
115− Motion.animate case togglePosition of
117+ Motion.animate case togglePosition of
116− ToggleIsRight -> buttonVariant.right
118+ ToggleIsRight -> buttonVariant.right
117− ToggleIsLeft -> buttonVariant.left
119+ ToggleIsLeft -> buttonVariant.left
118 , value: show togglePosition
120 , value: show togglePosition
119 , onClick: handler preventDefault \_ -> setTogglePosition (flipToggle togglePosition)
121 , onClick: handler preventDefault \_ -> setTogglePosition (flipToggle togglePosition)
120 , style: props.style
122 , style: props.style
121 , _data: Object.singleton "testid" "toggle-testid"
123 , _data: Object.singleton "testid" "toggle-testid"
122 , role: "switch"
124 , role: "switch"
123 , _aria:
125 , _aria:
124− Object.fromHomogeneous
126+ Object.fromHomogeneous
125− { checked:
127+ { checked:
126− case togglePosition of
128+ case togglePosition of
127− ToggleIsLeft -> "false"
129+ ToggleIsLeft -> "false"
128− ToggleIsRight -> "true"
130+ ToggleIsRight -> "true"
129− }
131+ }
130− <>? (props.ariaLabel <#> Object.singleton "label")
132+ <>? (props.ariaLabel <#> Object.singleton "label")
131 , ref: buttonRef
133 , ref: buttonRef
132 , children
134 , children
133 }
135 }
134 textContainer =
136 textContainer =
135 div
137 div
138+ </*
136− </* { className: "ry-toggle-text"
139+ { className: "ry-toggle-text"
137 , css: Style.toggleTextContainer
140 , css: Style.toggleTextContainer
138 }
141 }
139 textOnContainer =
142 textOnContainer =
140 div
143 div
144+ </*
141− </* { className: "ry-toggle-text-on"
145+ { className: "ry-toggle-text-on"
142 , css: Style.toggleText
146 , css: Style.toggleText
143 }
147 }
148+ />
144− /> [ guard (togglePosition == ToggleIsRight)
149+ [ guard (togglePosition == ToggleIsRight)
145 $ textOn
150 $ textOn
146 [ props.left
151 [ props.left
147 ?|| (Icon.component </> { icon: SVGIcon.on, stroke: Style.successTextColour })
152 ?|| (Icon.component </> { icon: SVGIcon.on, stroke: Style.successTextColour })
@@ -149,10 +154,12 @@ rawComponent =
149 ]
154 ]
150 textOffContainer =
155 textOffContainer =
151 div
156 div
157+ </*
152− </* { className: "ry-toggle-text-off"
158+ { className: "ry-toggle-text-off"
153 , css: Style.toggleText
159 , css: Style.toggleText
154 }
160 }
161+ />
155− /> [ guard (togglePosition == ToggleIsLeft)
162+ [ guard (togglePosition == ToggleIsLeft)
156 $ textOff
163 $ textOff
157 [ props.right
164 [ props.right
158 ?|| (Icon.component </> { icon: SVGIcon.off, stroke: Style.disabledTextColour })
165 ?|| (Icon.component </> { icon: SVGIcon.off, stroke: Style.disabledTextColour })
@@ -160,7 +167,8 @@ rawComponent =
160 ]
167 ]
161 textOn =
168 textOn =
162 Motion.div
169 Motion.div
170+ </
163− </ { className: "ry-toggle-text-container"
171+ { className: "ry-toggle-text-container"
164 , key: "ry-toggle-text-on-container"
172 , key: "ry-toggle-text-on-container"
165 , initial: Motion.initial $ false
173 , initial: Motion.initial $ false
166 , animate: Motion.animate $ css { scale: 1, opacity: 1 }
174 , animate: Motion.animate $ css { scale: 1, opacity: 1 }
@@ -168,7 +176,8 @@ rawComponent =
168 }
176 }
169 textOff =
177 textOff =
170 Motion.div
178 Motion.div
179+ </
171− </ { className: "ry-toggle-text-container"
180+ { className: "ry-toggle-text-container"
172 , key: "ry-toggle-text-off-container"
181 , key: "ry-toggle-text-off-container"
173 , initial: Motion.initial $ false
182 , initial: Motion.initial $ false
174 , animate: Motion.animate $ css { scale: 1, opacity: 1 }
183 , animate: Motion.animate $ css { scale: 1, opacity: 1 }
@@ -177,11 +186,12 @@ rawComponent =
177 animateTextPresence = Motion.animatePresence </ {}
186 animateTextPresence = Motion.animatePresence </ {}
178 toggle =
187 toggle =
179 toggleCircle
188 toggleCircle
189+ </>
180− </> { buttonRef
190+ { buttonRef
181 , toggleRef
191 , toggleRef
182 , togglePosition
192 , togglePosition
183 , onChange: setTogglePosition
193 , onChange: setTogglePosition
184− , dragState
194+ , dragStateRef
185 , setDragState
195 , setDragState
186 , tapState
196 , tapState
187 }
197 }
@@ -198,7 +208,7 @@ toggleCircle ∷
198 , toggleRef ∷ NodeRef
208 , toggleRef ∷ NodeRef
199 , buttonRef ∷ NodeRef
209 , buttonRef ∷ NodeRef
200 , togglePosition ∷ TogglePosition
210 , togglePosition ∷ TogglePosition
201− , dragState ∷ DragState
211+ , dragStateRef ∷ Ref DragState
202 , setDragState ∷ DragState -> Effect Unit
212 , setDragState ∷ DragState -> Effect Unit
203 , tapState ∷ Ref TappingState
213 , tapState ∷ Ref TappingState
204 }
214 }
@@ -206,14 +216,14 @@ toggleCircle =
206 unsafePerformEffect
216 unsafePerformEffect
207 $ reactComponent "ToggleCircle" do
217 $ reactComponent "ToggleCircle" do
208 \( { togglePosition
218 \( { togglePosition
209− , onChange
219+ , onChange
210− , toggleRef
220+ , toggleRef
211− , buttonRef
221+ , buttonRef
212− , dragState
222+ , dragStateRef
213− , setDragState
223+ , setDragState
214− , tapState
224+ , tapState
215− }
225+ }
216− ) -> React.do
226+ ) -> React.do
217 maxLeft /\ setMaxLeft <- useState' Nothing
227 maxLeft /\ setMaxLeft <- useState' Nothing
218 yPos /\ setYPos <- useState' Nothing
228 yPos /\ setYPos <- useState' Nothing
219 useEffectAlways do
229 useEffectAlways do
@@ -236,7 +246,8 @@ toggleCircle =
236 toggleVariant = Motion.makeVariantLabels toggleVariants
246 toggleVariant = Motion.makeVariantLabels toggleVariants
237 pure
247 pure
238 $ Motion.div
248 $ Motion.div
249+ </*>
239− </*> { className: "ry-toggle-toggle"
250+ { className: "ry-toggle-toggle"
240 , layout: Motion.layout true
251 , layout: Motion.layout true
241 , onClick: handler stopPropagation mempty
252 , onClick: handler stopPropagation mempty
242 , onTouchStart: handler stopPropagation mempty
253 , onTouchStart: handler stopPropagation mempty
@@ -247,67 +258,70 @@ toggleCircle =
247 , key: if isNothing maxLeft then "initialising" else show yPos
258 , key: if isNothing maxLeft then "initialising" else show yPos
248 , dragElastic: Motion.dragElastic false
259 , dragElastic: Motion.dragElastic false
249 , dragConstraints:
260 , dragConstraints:
250− Motion.dragConstraintsBoundingBox
261+ Motion.dragConstraintsBoundingBox
251− { left:
262+ { left:
252− case togglePosition of
263+ case togglePosition of
253− ToggleIsLeft -> zero
264+ ToggleIsLeft -> zero
254− ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
265+ ToggleIsRight -> 10.0 -- [WARN] Maybe this breaks down
255− , right:
266+ , right:
256− case togglePosition of
267+ case togglePosition of
257− ToggleIsRight -> zero
268+ ToggleIsRight -> 26.0 -- [WARN] Maybe this breaks down
258− ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
269+ ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
259− }
270+ }
260 , variants: Motion.variants toggleVariants
271 , variants: Motion.variants toggleVariants
261 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
272 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
262 , whileTap:
273 , whileTap:
263− Motion.prop
274+ Motion.prop
264− $ css
275+ $ css
265− { width: "calc(var(--s2)*0.85 + 10px)"
276+ { width: "calc(var(--s2)*0.85 + 10px)"
266− , left:
277+ , left:
267− case togglePosition of
278+ case togglePosition of
268− ToggleIsLeft -> Style.toggleLeft
279+ ToggleIsLeft -> Style.toggleLeft
269− ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
280+ ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
270− , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
281+ , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
271− }
282+ }
272 , onTapStart:
283 , onTapStart:
273− Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
284+ Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
274 , onTap:
285 , onTap:
275− Motion.onTap \_ _ -> do
286+ Motion.onTap \_ _ -> do
276− ts <- readRef tapState
287+ ts <- readRef tapState
277− case ts of
288+ case ts of
278− TapAllowed -> onChange (flipToggle togglePosition)
289+ TapAllowed -> onChange (flipToggle togglePosition)
279− _ -> mempty
290+ _ -> mempty
280− mempty
291+ mempty
281 , onTapCancel:
292 , onTapCancel:
282− Motion.onTapCancel \_ _ -> do
293+ Motion.onTapCancel \_ _ -> do
283− writeRef tapState TapNotAllowed
294+ writeRef tapState TapNotAllowed
284− mempty
295+ mempty
285 , initial: Motion.initial false
296 , initial: Motion.initial false
286 , animate:
297 , animate:
287− Motion.animate case togglePosition of
298+ Motion.animate case togglePosition of
288− ToggleIsLeft -> toggleVariant.left
299+ ToggleIsLeft -> toggleVariant.left
289− ToggleIsRight -> toggleVariant.right
300+ ToggleIsRight -> toggleVariant.right
290 , onDragStart:
301 , onDragStart:
291− Motion.onDragStart \_ pi -> do
302+ Motion.onDragStart \_ pi -> do
292− maybeBBox <- getBoundingBoxFromRef toggleRef
303+ maybeBBox <- getBoundingBoxFromRef toggleRef
293− let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
304+ let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
294− setDragState
305+ setDragState
295− $ Dragging
306+ $ Dragging
296− { startX: x # fromMaybe pi.point.x, currentX: pi.point.x
307+ { startX: x # fromMaybe pi.point.x
308+ , currentX: pi.point.x
297− }
309+ }
298 , onDrag:
310 , onDrag:
299− Motion.onDrag \_ pi -> do
311+ Motion.onDrag \_ pi -> do
312+ dragState <- readRef dragStateRef
300− case dragState of
313+ case dragState of
301− Dragging { startX } -> do
314+ Dragging { startX } -> do
302− setDragState $ Dragging { startX, currentX: pi.point.x }
315+ setDragState $ Dragging { startX, currentX: pi.point.x }
303− other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
316+ other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
304 , onDragEnd:
317 , onDragEnd:
305− Motion.onDragEnd \_ _ -> do
318+ Motion.onDragEnd \_ _ -> do
319+ dragState <- readRef dragStateRef
306− case dragState of
320+ case dragState of
307− Dragging { startX } -> do
321+ Dragging { startX } -> do
308− maybeBBox <- getBoundingBoxFromRef toggleRef
322+ maybeBBox <- getBoundingBoxFromRef toggleRef
309− let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
323+ let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
310− setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
324+ setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
311− other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEndEvent"
325+ other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEndEvent"
312 , ref: toggleRef
326 , ref: toggleRef
313 }
327 }
src/Yoga/Block/Icon/SVG/BG.svgnew file+1
@@ -0,0 +1 @@
1+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 800 800"><path fill="#303" d="M0 0h800v800H0z"/><g fill="none" stroke="#404" stroke-width="4.1"><path d="m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63"/><path d="m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"/><path d="m520 660 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143"/><path d="m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"/><path d="m-222 42 348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113"/></g><g fill="#505"><circle cx="769" cy="229" r="7"/><circle cx="539" cy="269" r="7"/><circle cx="603" cy="493" r="7"/><circle cx="731" cy="737" r="7"/><circle cx="520" cy="660" r="7"/><circle cx="309" cy="538" r="7"/><circle cx="295" cy="764" r="7"/><circle cx="40" cy="599" r="7"/><circle cx="102" cy="382" r="7"/><circle cx="127" cy="80" r="7"/><circle cx="370" cy="105" r="7"/><circle cx="578" cy="42" r="7"/><circle cx="237" cy="261" r="7"/><circle cx="390" cy="382" r="7"/></g></svg>
src/Yoga/Block/Icon/SVG/Bg.pursnew file+116
@@ -0,0 +1,116 @@
1+module Yoga.Block.Icon.SVG.Bg where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+bg :: JSX
8+bg = SVG.svg
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , width: "200"
11+ , height: "200"
12+ , viewBox: "0 0 800 800"
13+ , children:
14+ [ SVG.path
15+ { fill: "#303"
16+ , d: "M0 0h800v800H0z"
17+ }
18+ , SVG.g
19+ { fill: "none"
20+ , stroke: "#404"
21+ , strokeWidth: "4.1"
22+ , children:
23+ [ SVG.path
24+ { d: "m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63"
25+ }
26+ , SVG.path
27+ { d: "m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"
28+ }
29+ , SVG.path
30+ { d: "m520 660 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143"
31+ }
32+ , SVG.path
33+ { d: "m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"
34+ }
35+ , SVG.path
36+ { d: "m-222 42 348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113"
37+ }
38+ ]
39+ }
40+ , SVG.g
41+ { fill: "#505"
42+ , children:
43+ [ SVG.circle
44+ { cx: "769"
45+ , cy: "229"
46+ , r: "7"
47+ }
48+ , SVG.circle
49+ { cx: "539"
50+ , cy: "269"
51+ , r: "7"
52+ }
53+ , SVG.circle
54+ { cx: "603"
55+ , cy: "493"
56+ , r: "7"
57+ }
58+ , SVG.circle
59+ { cx: "731"
60+ , cy: "737"
61+ , r: "7"
62+ }
63+ , SVG.circle
64+ { cx: "520"
65+ , cy: "660"
66+ , r: "7"
67+ }
68+ , SVG.circle
69+ { cx: "309"
70+ , cy: "538"
71+ , r: "7"
72+ }
73+ , SVG.circle
74+ { cx: "295"
75+ , cy: "764"
76+ , r: "7"
77+ }
78+ , SVG.circle
79+ { cx: "40"
80+ , cy: "599"
81+ , r: "7"
82+ }
83+ , SVG.circle
84+ { cx: "102"
85+ , cy: "382"
86+ , r: "7"
87+ }
88+ , SVG.circle
89+ { cx: "127"
90+ , cy: "80"
91+ , r: "7"
92+ }
93+ , SVG.circle
94+ { cx: "370"
95+ , cy: "105"
96+ , r: "7"
97+ }
98+ , SVG.circle
99+ { cx: "578"
100+ , cy: "42"
101+ , r: "7"
102+ }
103+ , SVG.circle
104+ { cx: "237"
105+ , cy: "261"
106+ , r: "7"
107+ }
108+ , SVG.circle
109+ { cx: "390"
110+ , cy: "382"
111+ , r: "7"
112+ }
113+ ]
114+ }
115+ ]
116+ }
src/Yoga/Block/Icon/SVG/HeroiconCalendar.pursnew file+22
@@ -0,0 +1,22 @@
1+module Yoga.Block.Icon.SVG.HeroiconCalendar where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+heroiconCalendar :: JSX
8+heroiconCalendar = SVG.svg
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , className:"h-6 w-6"
11+ , fill: "none"
12+ , viewBox: "0 0 24 24"
13+ , stroke: "currentColor"
14+ , children:
15+ [ SVG.path
16+ { strokeLinecap: "round"
17+ , strokeLinejoin: "round"
18+ , strokeWidth: "2"
19+ , d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
20+ }
21+ ]
22+ }
src/Yoga/Block/Icon/SVG/HeroiconCalendar.svgnew file+1
@@ -0,0 +1 @@
1+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/></svg>
src/Yoga/Block/Icon/SVG/HeroiconClock.pursnew file+22
@@ -0,0 +1,22 @@
1+module Yoga.Block.Icon.SVG.HeroiconClock where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+heroiconClock :: JSX
8+heroiconClock = SVG.svg
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , className:"h-6 w-6"
11+ , fill: "none"
12+ , viewBox: "0 0 24 24"
13+ , stroke: "currentColor"
14+ , children:
15+ [ SVG.path
16+ { strokeLinecap: "round"
17+ , strokeLinejoin: "round"
18+ , strokeWidth: "2"
19+ , d: "M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
20+ }
21+ ]
22+ }
src/Yoga/Block/Icon/SVG/HeroiconClock.svgnew file+1
@@ -0,0 +1 @@
1+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
src/Yoga/Block/Icon/SVG/HeroiconGroup.pursnew file+22
@@ -0,0 +1,22 @@
1+module Yoga.Block.Icon.SVG.HeroiconGroup where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+heroiconGroup :: JSX
8+heroiconGroup = SVG.svg
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , className:"h-6 w-6"
11+ , fill: "none"
12+ , viewBox: "0 0 24 24"
13+ , stroke: "currentColor"
14+ , children:
15+ [ SVG.path
16+ { strokeLinecap: "round"
17+ , strokeLinejoin: "round"
18+ , strokeWidth: "2"
19+ , d: "M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
20+ }
21+ ]
22+ }
src/Yoga/Block/Icon/SVG/HeroiconGroup.svgnew file+1
@@ -0,0 +1 @@
1+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/></svg>
src/Yoga/Block/Icon/SVG/HeroiconMoon.pursnew file+22
@@ -0,0 +1,22 @@
1+module Yoga.Block.Icon.SVG.HeroiconMoon where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+heroiconMoon :: JSX
8+heroiconMoon = SVG.svg
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , className:"h-6 w-6"
11+ , fill: "none"
12+ , viewBox: "0 0 24 24"
13+ , stroke: "currentColor"
14+ , children:
15+ [ SVG.path
16+ { strokeLinecap: "round"
17+ , strokeLinejoin: "round"
18+ , strokeWidth: "2"
19+ , d: "M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z"
20+ }
21+ ]
22+ }
src/Yoga/Block/Icon/SVG/HeroiconMoon.svgnew file+1
@@ -0,0 +1 @@
1+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z"/></svg>
src/Yoga/Block/Icon/SVG/HeroiconSun.pursnew file+22
@@ -0,0 +1,22 @@
1+module Yoga.Block.Icon.SVG.HeroiconSun where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+heroiconSun :: JSX
8+heroiconSun = SVG.svg
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , className:"h-6 w-6"
11+ , fill: "none"
12+ , viewBox: "0 0 24 24"
13+ , stroke: "currentColor"
14+ , children:
15+ [ SVG.path
16+ { strokeLinecap: "round"
17+ , strokeLinejoin: "round"
18+ , strokeWidth: "2"
19+ , d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"
20+ }
21+ ]
22+ }
src/Yoga/Block/Icon/SVG/HeroiconSun.svgnew file+1
@@ -0,0 +1 @@
1+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/></svg>
src/Yoga/Block/Icon/SVG/TMP.svgnew file+1
@@ -0,0 +1 @@
1+<svg viewBox="0 0 1200 1527" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V1211H0V503.083z" style="fill:url(#a)" transform="translate(0 -484)"/><path d="m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V1318H0V655.221z" style="fill:url(#b)" transform="translate(0 -484)"/><path d="m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1377H0V848.096z" style="fill:url(#c)" transform="translate(0 -484)"/><path d="m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1683H0V925.667z" style="fill:url(#d)" transform="translate(0 -484)"/><path d="m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1669H0v-612.75z" style="fill:url(#e)" transform="translate(0 -484)"/><path d="M0 1737v-528.85c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1737H0z" style="fill:url(#f)" transform="translate(0 -484)"/><path d="m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z" style="fill:#5c0bc2" transform="translate(0 -484)"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90 58 542) scale(427)"><stop offset="0" style="stop-color:#e683ff;stop-opacity:1"/><stop offset="1" style="stop-color:#ff97f5;stop-opacity:1"/></linearGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 124.08 -124.08 0 600 649)"><stop offset="0" style="stop-color:#cc60ff;stop-opacity:1"/><stop offset="1" style="stop-color:#e062ff;stop-opacity:1"/></linearGradient><linearGradient id="c" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 238.356 -238.356 0 600 731.658)"><stop offset="0" style="stop-color:#a32eff;stop-opacity:1"/><stop offset="1" style="stop-color:#c03cff;stop-opacity:1"/></linearGradient><linearGradient id="d" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 452 -452 0 600 911)"><stop offset="0" style="stop-color:#8600f0;stop-opacity:1"/><stop offset="1" style="stop-color:#b659ff;stop-opacity:1"/></linearGradient><linearGradient id="e" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 359 -359 0 600 1050)"><stop offset="0" style="stop-color:#ca33ff;stop-opacity:1"/><stop offset="0" style="stop-color:#7d17ff;stop-opacity:1"/><stop offset="1" style="stop-color:#843dde;stop-opacity:1"/></linearGradient><linearGradient id="f" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 121.48 -121.48 0 600 1362.52)"><stop offset="0" style="stop-color:#6706e3;stop-opacity:1"/><stop offset="1" style="stop-color:#682de7;stop-opacity:1"/></linearGradient></defs></svg>
src/Yoga/Block/Icon/SVG/Tmp.pursnew file+172
@@ -0,0 +1,172 @@
1+module Yoga.Block.Icon.SVG.Tmp where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+tmp :: JSX
8+tmp = SVG.svg
9+ { viewBox: "0 0 1200 1527"
10+ , xmlns: "http://www.w3.org/2000/svg"
11+ , xmlSpace: "preserve"
12+ , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
13+ , children:
14+ [ SVG.path
15+ { d: "m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V1211H0V503.083z"
16+ , style: R.css { fill: "url(#a)" }
17+ , transform: "translate(0 -484)"
18+ }
19+ , SVG.path
20+ { d: "m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V1318H0V655.221z"
21+ , style: R.css { fill: "url(#b)" }
22+ , transform: "translate(0 -484)"
23+ }
24+ , SVG.path
25+ { d: "m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1377H0V848.096z"
26+ , style: R.css { fill: "url(#c)" }
27+ , transform: "translate(0 -484)"
28+ }
29+ , SVG.path
30+ { d: "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1683H0V925.667z"
31+ , style: R.css { fill: "url(#d)" }
32+ , transform: "translate(0 -484)"
33+ }
34+ , SVG.path
35+ { d: "m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1669H0v-612.75z"
36+ , style: R.css { fill: "url(#e)" }
37+ , transform: "translate(0 -484)"
38+ }
39+ , SVG.path
40+ { d: "M0 1737v-528.85c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1737H0z"
41+ , style: R.css { fill: "url(#f)" }
42+ , transform: "translate(0 -484)"
43+ }
44+ , SVG.path
45+ { d: "m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"
46+ , style: R.css { fill: "#5c0bc2" }
47+ , transform: "translate(0 -484)"
48+ }
49+ , SVG.defs
50+ { children:
51+ [ SVG.linearGradient
52+ { id: "a"
53+ , x1: "0"
54+ , y1: "0"
55+ , x2: "1"
56+ , y2: "0"
57+ , gradientUnits: "userSpaceOnUse"
58+ , gradientTransform: "rotate(90 58 542) scale(427)"
59+ , children:
60+ [ SVG.stop
61+ { offset: "0"
62+ , style: R.css { stopColor: "#e683ff", stopOpacity: "1" }
63+ }
64+ , SVG.stop
65+ { offset: "1"
66+ , style: R.css { stopColor: "#ff97f5", stopOpacity: "1" }
67+ }
68+ ]
69+ }
70+ , SVG.linearGradient
71+ { id: "b"
72+ , x1: "0"
73+ , y1: "0"
74+ , x2: "1"
75+ , y2: "0"
76+ , gradientUnits: "userSpaceOnUse"
77+ , gradientTransform: "matrix(0 124.08 -124.08 0 600 649)"
78+ , children:
79+ [ SVG.stop
80+ { offset: "0"
81+ , style: R.css { stopColor: "#cc60ff", stopOpacity: "1" }
82+ }
83+ , SVG.stop
84+ { offset: "1"
85+ , style: R.css { stopColor: "#e062ff", stopOpacity: "1" }
86+ }
87+ ]
88+ }
89+ , SVG.linearGradient
90+ { id: "c"
91+ , x1: "0"
92+ , y1: "0"
93+ , x2: "1"
94+ , y2: "0"
95+ , gradientUnits: "userSpaceOnUse"
96+ , gradientTransform: "matrix(0 238.356 -238.356 0 600 731.658)"
97+ , children:
98+ [ SVG.stop
99+ { offset: "0"
100+ , style: R.css { stopColor: "#a32eff", stopOpacity: "1" }
101+ }
102+ , SVG.stop
103+ { offset: "1"
104+ , style: R.css { stopColor: "#c03cff", stopOpacity: "1" }
105+ }
106+ ]
107+ }
108+ , SVG.linearGradient
109+ { id: "d"
110+ , x1: "0"
111+ , y1: "0"
112+ , x2: "1"
113+ , y2: "0"
114+ , gradientUnits: "userSpaceOnUse"
115+ , gradientTransform: "matrix(0 452 -452 0 600 911)"
116+ , children:
117+ [ SVG.stop
118+ { offset: "0"
119+ , style: R.css { stopColor: "#8600f0", stopOpacity: "1" }
120+ }
121+ , SVG.stop
122+ { offset: "1"
123+ , style: R.css { stopColor: "#b659ff", stopOpacity: "1" }
124+ }
125+ ]
126+ }
127+ , SVG.linearGradient
128+ { id: "e"
129+ , x1: "0"
130+ , y1: "0"
131+ , x2: "1"
132+ , y2: "0"
133+ , gradientUnits: "userSpaceOnUse"
134+ , gradientTransform: "matrix(0 359 -359 0 600 1050)"
135+ , children:
136+ [ SVG.stop
137+ { offset: "0"
138+ , style: R.css { stopColor: "#ca33ff", stopOpacity: "1" }
139+ }
140+ , SVG.stop
141+ { offset: "0"
142+ , style: R.css { stopColor: "#7d17ff", stopOpacity: "1" }
143+ }
144+ , SVG.stop
145+ { offset: "1"
146+ , style: R.css { stopColor: "#843dde", stopOpacity: "1" }
147+ }
148+ ]
149+ }
150+ , SVG.linearGradient
151+ { id: "f"
152+ , x1: "0"
153+ , y1: "0"
154+ , x2: "1"
155+ , y2: "0"
156+ , gradientUnits: "userSpaceOnUse"
157+ , gradientTransform: "matrix(0 121.48 -121.48 0 600 1362.52)"
158+ , children:
159+ [ SVG.stop
160+ { offset: "0"
161+ , style: R.css { stopColor: "#6706e3", stopOpacity: "1" }
162+ }
163+ , SVG.stop
164+ { offset: "1"
165+ , style: R.css { stopColor: "#682de7", stopOpacity: "1" }
166+ }
167+ ]
168+ }
169+ ]
170+ }
171+ ]
172+ }
src/Yoga/Block/Icon/SVG/WhatsAppLogo.pursnew file+77
@@ -0,0 +1,77 @@
1+module Yoga.Block.Icon.SVG.WhatsAppLogo where
2+
3+import React.Basic (JSX)
4+import React.Basic.DOM as R
5+import React.Basic.DOM.SVG as SVG
6+
7+whatsAppLogo :: JSX
8+whatsAppLogo = SVG.svg
9+ { viewBox: "0 0 1281 1067"
10+ , xmlns: "http://www.w3.org/2000/svg"
11+ , xmlSpace: "preserve"
12+ , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
13+ , children:
14+ [ SVG.path
15+ { d: "m0 287.286 6.333 3.754c26.611 15.791 57.12 24.143 88.231 24.16h.068c95.544 0 173.307-77.745 173.348-173.297.014-46.307-17.997-89.849-50.727-122.603-32.732-32.753-76.251-50.802-122.556-50.821-95.62 0-173.381 77.734-173.419 173.283-.013 32.743 9.148 64.631 26.502 92.224l4.126 6.555-17.517 63.947L0 287.286zm-115.686 66.737 29.589-108.039c-18.25-31.619-27.852-67.489-27.838-104.236.046-114.958 93.603-208.485 208.567-208.485 55.789.024 108.153 21.738 147.533 61.145 39.374 39.41 61.05 91.795 61.031 147.509-.049 114.952-93.619 208.496-208.564 208.496-.008 0 .005 0 0 0h-.09c-34.903-.014-69.202-8.768-99.664-25.381l-110.564 28.991z"
16+ , style: R.css { fill: "#fff", fillRule: "nonzero" }
17+ , transform: "translate(546.49 392.227)"
18+ }
19+ , SVG.path
20+ { d: "M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.009-.002zm0 0z"
21+ , style: R.css { fill: "url(#a)", fillRule: "nonzero" }
22+ , transform: "matrix(0 -406.194 -406.194 0 640.266 738.97)"
23+ }
24+ , SVG.path
25+ { d: "M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.27.337l.015.01a.412.412 0 1 0-.193-.349c0 .074.02.147.058.21l.009.015-.041.156L.27.337zM.009-.002zm0 0z"
26+ , style: R.css { fill: "url(#b)", fillRule: "nonzero" }
27+ , transform: "matrix(0 -420.76 -420.76 0 640.264 746.25)"
28+ }
29+ , SVG.path
30+ { d: "M0-181.636c-3.904-8.678-8.013-8.852-11.727-9.004-3.037-.13-6.515-.122-9.987-.122-3.474 0-9.121 1.305-13.895 6.52-4.778 5.215-18.242 17.821-18.242 43.46 0 25.642 18.676 50.417 21.279 53.897 2.606 3.475 36.052 57.771 89.021 78.66 44.022 17.359 52.98 13.906 62.535 13.038 9.555-.869 30.832-12.604 35.175-24.773 4.343-12.167 4.343-22.596 3.04-24.776-1.303-2.172-4.777-3.475-9.989-6.081-5.212-2.606-30.832-15.215-35.61-16.952-4.777-1.737-8.252-2.606-11.726 2.611-3.475 5.212-13.456 16.947-16.497 20.422-3.04 3.483-6.08 3.917-11.292 1.311-5.212-2.614-21.996-8.111-41.907-25.864-15.492-13.812-25.951-30.87-28.992-36.087-3.04-5.212-.325-8.035 2.289-10.633 2.34-2.335 5.212-6.083 7.818-9.126 2.6-3.043 3.469-5.215 5.206-8.69 1.737-3.48.869-6.523-.434-9.129S4.634-171.332 0-181.636"
31+ , style: R.css { fill: "#fff" }
32+ , transform: "translate(588.995 628.453)"
33+ }
34+ , SVG.defs
35+ { children:
36+ [ SVG.linearGradient
37+ { id: "a"
38+ , x1: "0"
39+ , y1: "0"
40+ , x2: "1"
41+ , y2: "0"
42+ , gradientUnits: "userSpaceOnUse"
43+ , gradientTransform: "scale(1 -1)"
44+ , children:
45+ [ SVG.stop
46+ { offset: "0"
47+ , style: R.css { stopColor: "#20b038", stopOpacity: "1" }
48+ }
49+ , SVG.stop
50+ { offset: "1"
51+ , style: R.css { stopColor: "#60d66a", stopOpacity: "1" }
52+ }
53+ ]
54+ }
55+ , SVG.linearGradient
56+ { id: "b"
57+ , x1: "0"
58+ , y1: "0"
59+ , x2: "1"
60+ , y2: "0"
61+ , gradientUnits: "userSpaceOnUse"
62+ , gradientTransform: "scale(1 -1)"
63+ , children:
64+ [ SVG.stop
65+ { offset: "0"
66+ , style: R.css { stopColor: "#f9f9f9", stopOpacity: "1" }
67+ }
68+ , SVG.stop
69+ { offset: "1"
70+ , style: R.css { stopColor: "white", stopOpacity: "1" }
71+ }
72+ ]
73+ }
74+ ]
75+ }
76+ ]
77+ }
src/Yoga/Block/Icon/SVG/WhatsAppLogo.svgnew file+1
@@ -0,0 +1 @@
1+<svg viewBox="0 0 1281 1067" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="m0 287.286 6.333 3.754c26.611 15.791 57.12 24.143 88.231 24.16h.068c95.544 0 173.307-77.745 173.348-173.297.014-46.307-17.997-89.849-50.727-122.603-32.732-32.753-76.251-50.802-122.556-50.821-95.62 0-173.381 77.734-173.419 173.283-.013 32.743 9.148 64.631 26.502 92.224l4.126 6.555-17.517 63.947L0 287.286zm-115.686 66.737 29.589-108.039c-18.25-31.619-27.852-67.489-27.838-104.236.046-114.958 93.603-208.485 208.567-208.485 55.789.024 108.153 21.738 147.533 61.145 39.374 39.41 61.05 91.795 61.031 147.509-.049 114.952-93.619 208.496-208.564 208.496-.008 0 .005 0 0 0h-.09c-34.903-.014-69.202-8.768-99.664-25.381l-110.564 28.991z" style="fill:#fff;fill-rule:nonzero" transform="translate(546.49 392.227)"/><path d="M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.009-.002zm0 0z" style="fill:url(#a);fill-rule:nonzero" transform="matrix(0 -406.194 -406.194 0 640.266 738.97)"/><path d="M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.27.337l.015.01a.412.412 0 1 0-.193-.349c0 .074.02.147.058.21l.009.015-.041.156L.27.337zM.009-.002zm0 0z" style="fill:url(#b);fill-rule:nonzero" transform="matrix(0 -420.76 -420.76 0 640.264 746.25)"/><path d="M0-181.636c-3.904-8.678-8.013-8.852-11.727-9.004-3.037-.13-6.515-.122-9.987-.122-3.474 0-9.121 1.305-13.895 6.52-4.778 5.215-18.242 17.821-18.242 43.46 0 25.642 18.676 50.417 21.279 53.897 2.606 3.475 36.052 57.771 89.021 78.66 44.022 17.359 52.98 13.906 62.535 13.038 9.555-.869 30.832-12.604 35.175-24.773 4.343-12.167 4.343-22.596 3.04-24.776-1.303-2.172-4.777-3.475-9.989-6.081-5.212-2.606-30.832-15.215-35.61-16.952-4.777-1.737-8.252-2.606-11.726 2.611-3.475 5.212-13.456 16.947-16.497 20.422-3.04 3.483-6.08 3.917-11.292 1.311-5.212-2.614-21.996-8.111-41.907-25.864-15.492-13.812-25.951-30.87-28.992-36.087-3.04-5.212-.325-8.035 2.289-10.633 2.34-2.335 5.212-6.083 7.818-9.126 2.6-3.043 3.469-5.215 5.206-8.69 1.737-3.48.869-6.523-.434-9.129S4.634-171.332 0-181.636" style="fill:#fff" transform="translate(588.995 628.453)"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(1 -1)"><stop offset="0" style="stop-color:#20b038;stop-opacity:1"/><stop offset="1" style="stop-color:#60d66a;stop-opacity:1"/></linearGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(1 -1)"><stop offset="0" style="stop-color:#f9f9f9;stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></linearGradient></defs></svg>
webpack.common.js+3−3
@@ -1,6 +1,6 @@
1−"use strict";
1+"use strict"
2
2
3−const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
4
4
5module.exports = {
5module.exports = {
6 plugins: [
6 plugins: [
@@ -8,4 +8,4 @@ module.exports = {
8 // `./dist` in our case
8 // `./dist` in our case
9 new CleanWebpackPlugin(),
9 new CleanWebpackPlugin(),
10 ],
10 ],
11−};
11+}
yarn.lock+9669−9892

This diff is too big to show here.