Drip around

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "workbench.colorTheme": "Night Owl Light",
+  "workbench.colorTheme": "Halcyon",
   "search.useGlobalIgnoreFiles": true,
   "files.watcherExclude": {
     "**/.spago/**": true,

spago.dhall

@@ -61,5 +61,5 @@ You can edit this file as you like.
   , "web-html"
   ]
 , packages = ./packages.dhall
-, sources = [ "src/**/*.purs", "test/**/*.purs" ]
+, sources = [ "src/**/*.purs" ]
 }

src/Yoga/Block/Atom/Checkbox/Story.purs

@@ -0,0 +1,39 @@
+module Yoga.Block.Atom.Checkbox.Story (default, checkbox) where
+
+import Prelude hiding (div)
+
+import Color (cssStringRGBA)
+import Effect (Effect)
+import Effect.Unsafe (unsafePerformEffect)
+import Fahrtwind as F
+import React.Basic (JSX, element, fragment)
+import React.Basic.DOM as R
+import React.Basic.Emotion (str)
+import React.Basic.Emotion as E
+import Yoga ((</>))
+import Yoga.Block as Block
+import Yoga.Block.Atom.Button.Types as ButtonType
+import Yoga.Block.Atom.Checkbox.View as Checkbox
+import Yoga.Block.Container.Style (colour, size)
+import Yoga.Block.Container.Style as Styles
+import Yoga.Block.Icon.SVG as Icon
+import Yoga.Block.Internal.CSS (nest)
+
+default
+  ∷ { decorators ∷ Array (Effect JSX -> JSX)
+    , title ∷ String
+    }
+default =
+  { title: "Atom/Checkbox"
+  , decorators:
+      [ \storyFn ->
+          R.div_
+            [ element E.global { styles: Styles.global }
+            , unsafePerformEffect storyFn
+            ]
+      ]
+  }
+
+checkbox ∷ Effect JSX
+checkbox = do
+  pure $ Checkbox.component </> {}

src/Yoga/Block/Atom/Checkbox/Style.purs

@@ -0,0 +1,24 @@
+module Yoga.Block.Atom.Checkbox.Style where
+
+import Yoga.Prelude.Style
+
+type Props :: forall k. (Type -> k) -> Row k -> Row k
+type Props f r =
+  ( css ∷ f Style
+  | r
+  )
+
+checkmark ∷ Style
+checkmark =
+  css
+    { display: block
+    , path: nested $ css
+        { transformOrigin: str "50% 50%"
+        , strokeDasharray: int 48
+        , strokeDashoffset: int 48
+        , animation: str
+            "checkmarkAnimation .25s cubic-bezier(0.65, 0, 0.45, 1) forwards"
+        , animationName: keyframes
+            { to: css { strokeDashoffset: int 0 } }
+        }
+    }

src/Yoga/Block/Atom/Checkbox/View.purs

@@ -0,0 +1,44 @@
+module Yoga.Block.Atom.Checkbox.View where
+
+import Yoga.Prelude.View
+
+import React.Basic.DOM.SVG as SVG
+import Yoga.Block.Atom.Checkbox.Style as Style
+
+type Props = PropsF Id
+
+type MandatoryProps :: forall k. k -> k
+type MandatoryProps r = (| r)
+
+type PropsF :: forall k. (Type -> k) -> Row k
+type PropsF f =
+  ( ticked ∷ f Boolean
+  , size ∷ f Number
+  , stroke :: f String
+  , strokeWidth :: f Number
+  | Style.Props f (MandatoryProps ())
+  )
+
+component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
+component = rawComponent
+
+rawComponent :: forall p. ReactComponent { | p }
+rawComponent = mkForwardRefComponent "Checkbox" \(props :: { | PropsF OptionalProp }) ref -> React.do
+  pure $ SVG.svg'
+    </*
+      { ref
+      , className: "ry-checkmark"
+      , css: Style.checkmark
+      , width: show (props.size ?|| 24.0)
+      , xmlns: "http://www.w3.org/2000/svg"
+      , viewBox: "0 0 52 52"
+      }
+    />
+      [ SVG.path' </>
+          { stroke: props.stroke ?|| "currentColor"
+          , strokeWidth: show (props.strokeWidth ?|| 3.0)
+          , fill: "none"
+          , d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+          }
+
+      ]

src/Yoga/Block/Atom/Input/Style.purs

@@ -201,10 +201,6 @@ inputContainer props = theCss <>? props.css
             , borderColor: str colour.highlight
             , marginTop: str "-1px"
             , transition: str "border-color 0s linear 0.1s"
-            -- , boxShadow: str $ """
-            --     0 1px 2px """ <> colour.highlightAlpha25 <> """,
-            --     0 2px 4px """ <> colour.highlightAlpha25 <> """,
-            --     0 4px 12px """ <> colour.highlightAlpha25
             , animation: plopAnimation <> str " 260ms ease-in"
             }
       , alignItems: center

src/Yoga/Block/Icon/SVG/Filter.purs

@@ -0,0 +1,40 @@
+module Yoga.Block.Icon.SVG.Filter where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+filter :: JSX
+filter = SVG.filter
+     { id: "a"
+     , height: "130%"
+     , children: 
+     [ SVG.feGaussianBlur
+       { in: "SourceAlpha"
+       , stdDeviation: "3"
+       }
+     , SVG.feOffset
+       { dx: "2"
+       , dy: "2"
+       , result: "offsetblur"
+       }
+     , SVG.feComponentTransfer
+       { children: 
+       [ SVG.feFuncA
+         { type: "linear"
+         , slope: ".5"
+         }
+       ]
+       }
+     , SVG.feMerge
+       { children: 
+       [ SVG.feMergeNode
+         { 
+         }
+       , SVG.feMergeNode
+         { in: "SourceGraphic"
+         }
+       ]
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/GithubLogo.purs

@@ -0,0 +1,21 @@
+module Yoga.Block.Icon.SVG.GithubLogo where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+githubLogo :: JSX
+githubLogo = SVG.svg
+     { width: "1024"
+     , height: "1024"
+     , fill: "none"
+     , xmlns: "http://www.w3.org/2000/svg"
+     , children: 
+     [ SVG.path
+       { fillRule: "evenodd"
+       , clipRule: "evenodd"
+       , d: "M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
+       , fill: "#1B1F23"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/GithubLogo.svg

@@ -0,0 +1 @@
+<svg width="1024" height="1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z" fill="#1B1F23"/></svg>

src/Yoga/Block/Icon/SVG/Pixel4.purs

@@ -0,0 +1,60 @@
+module Yoga.Block.Icon.SVG.Pixel4 where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+pixel4 :: JSX
+pixel4 = SVG.svg
+     { xmlns: "http://www.w3.org/2000/svg"
+     , height: "1475"
+     , width: "690"
+     , children: 
+     [ SVG.rect
+       { strokeLinejoin: "round"
+       , fillRule: "evenodd"
+       , rx: "100"
+       , ry: "100"
+       , height: "1467"
+       , width: "684"
+       , stroke: "#ddd"
+       , strokeLinecap: "round"
+       , y: "4"
+       , x: "4"
+       , strokeWidth: "4"
+       }
+     , SVG.rect
+       { fillRule: "evenodd"
+       , rx: "55"
+       , ry: "55"
+       , height: "1310"
+       , width: "630"
+       , y: "105"
+       , x: "29"
+       , fill: "#ddd"
+       }
+     , SVG.circle
+       { strokeLinejoin: "round"
+       , cx: "190.56"
+       , strokeLinecap: "round"
+       , stroke: "#444"
+       , cy: "68.889"
+       , r: "10"
+       , strokeWidth: "3"
+       , fill: "none"
+       }
+     , SVG.rect
+       { strokeLinejoin: "round"
+       , rx: "5"
+       , ry: "5"
+       , height: "12.5"
+       , width: "80"
+       , stroke: "#444"
+       , strokeLinecap: "round"
+       , y: "61.5"
+       , x: "309"
+       , strokeWidth: "3"
+       , fill: "none"
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/filter.svg

@@ -0,0 +1 @@
+<filter id="a" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/><feOffset dx="2" dy="2" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope=".5"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><circle r="10" style="filter:url(#a)"/>

src/Yoga/Block/Icon/SVG/pixel4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1475" width="690"><rect stroke-linejoin="round" fill-rule="evenodd" rx="100" ry="100" height="1467" width="684" stroke="#ddd" stroke-linecap="round" y="4" x="4" stroke-width="4"/><rect fill-rule="evenodd" rx="55" ry="55" height="1310" width="630" y="105" x="29" fill="#ddd"/><circle stroke-linejoin="round" cx="190.56" stroke-linecap="round" stroke="#444" cy="68.889" r="10" stroke-width="3" fill="none"/><rect stroke-linejoin="round" rx="5" ry="5" height="12.5" width="80" stroke="#444" stroke-linecap="round" y="61.5" x="309" stroke-width="3" fill="none"/></svg>

src/Yoga/Block/Quark/Drip/View.purs

@@ -3,10 +3,8 @@ module Yoga.Block.Quark.Drip.View where
 import Yoga.Prelude.View
 
 import Data.Number (nan)
-import Effect.Unsafe (unsafePerformEffect)
 import React.Basic.DOM as R
 import React.Basic.DOM.SVG as SVG
-import React.Basic.Hooks (reactComponent)
 import React.Basic.Hooks as React
 import Web.DOM.Node (toEventTarget)
 import Web.Event.Event (EventType(..))
@@ -32,14 +30,15 @@ defaultProps =
   , className: ""
   }
 
-component :: ReactComponent Props
-component = unsafePerformEffect $ reactComponent "Drip" \(props :: Props) -> React.do
-  dripRef <- useRef null
+component ∷ ReactComponent Props
+component = mkForwardRefComponent "Drip" \(props :: Props) propsRef -> React.do
+  backupRef <- React.useRef null
+  let ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef
   let left = if props.x == nan then zero else props.x - 10.0
   let top = if props.y == nan then zero else props.y - 10.0
 
   useEffectAlways do
-    nʔ <- React.readRefMaybe dripRef
+    nʔ <- React.readRefMaybe ref
     nʔ # foldMap \n -> do
       let target = toEventTarget n
       let et = EventType "animationend"
@@ -52,7 +51,7 @@ component = unsafePerformEffect $ reactComponent "Drip" \(props :: Props) -> Rea
       </*
         { css: Style.drip
         , className: "ry-drip"
-        , ref: dripRef
+        , ref
         }
       />
         [ SVG.svg'