mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Drip around
This commit is contained in:
parent
cc8d6be5cd
commit
d19d606fb8
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,6 +1,6 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"workbench.colorTheme": "Night Owl Light",
|
||||
"workbench.colorTheme": "Halcyon",
|
||||
"search.useGlobalIgnoreFiles": true,
|
||||
"files.watcherExclude": {
|
||||
"**/.spago/**": true,
|
||||
|
@ -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" ]
|
||||
}
|
||||
|
39
src/Yoga/Block/Atom/Checkbox/Story.purs
Normal file
39
src/Yoga/Block/Atom/Checkbox/Story.purs
Normal file
@ -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 </> {}
|
24
src/Yoga/Block/Atom/Checkbox/Style.purs
Normal file
24
src/Yoga/Block/Atom/Checkbox/Style.purs
Normal file
@ -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 } }
|
||||
}
|
||||
}
|
44
src/Yoga/Block/Atom/Checkbox/View.purs
Normal file
44
src/Yoga/Block/Atom/Checkbox/View.purs
Normal file
@ -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"
|
||||
}
|
||||
|
||||
]
|
@ -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
|
||||
|
40
src/Yoga/Block/Icon/SVG/Filter.purs
Normal file
40
src/Yoga/Block/Icon/SVG/Filter.purs
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
21
src/Yoga/Block/Icon/SVG/GithubLogo.purs
Normal file
21
src/Yoga/Block/Icon/SVG/GithubLogo.purs
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
1
src/Yoga/Block/Icon/SVG/GithubLogo.svg
Normal file
1
src/Yoga/Block/Icon/SVG/GithubLogo.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 982 B |
60
src/Yoga/Block/Icon/SVG/Pixel4.purs
Normal file
60
src/Yoga/Block/Icon/SVG/Pixel4.purs
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
1
src/Yoga/Block/Icon/SVG/filter.svg
Normal file
1
src/Yoga/Block/Icon/SVG/filter.svg
Normal file
@ -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)"/>
|
1
src/Yoga/Block/Icon/SVG/pixel4.svg
Normal file
1
src/Yoga/Block/Icon/SVG/pixel4.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 612 B |
@ -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'
|
||||
|
Loading…
Reference in New Issue
Block a user