From 2015e4ab6c8dd37209b0c382b60a713a95716da8 Mon Sep 17 00:00:00 2001 From: Mark Eibes Date: Wed, 19 Apr 2023 16:51:49 +0200 Subject: [PATCH] Fix toValue in select --- .../Basic/SyntaxHighlighter/Component.purs | 179 +++---- src/React/Basic/SyntaxHighlighter/Story.purs | 54 +- src/React/DndKit.purs | 70 +-- src/Web/DOM/ResizeObserver.purs | 40 +- src/Yoga.purs | 74 +-- src/Yoga/Block.purs | 2 +- src/Yoga/Block/Atom/Button/Types.purs | 16 +- src/Yoga/Block/Atom/Button/View.purs | 26 +- src/Yoga/Block/Atom/Icon/Style.purs | 4 +- src/Yoga/Block/Atom/Icon/View.purs | 21 +- src/Yoga/Block/Atom/Image/Style.purs | 4 +- src/Yoga/Block/Atom/Image/Types.purs | 21 +- .../Input/Hook/UseTypingPlaceholders.purs | 4 +- src/Yoga/Block/Atom/Input/Story.purs | 128 +++-- src/Yoga/Block/Atom/Input/Types.purs | 44 +- src/Yoga/Block/Atom/Input/View.purs | 83 ++-- src/Yoga/Block/Atom/Input/View/HTMLInput.purs | 17 +- src/Yoga/Block/Atom/PopOver.purs | 2 - src/Yoga/Block/Atom/Range/Story.purs | 14 +- src/Yoga/Block/Atom/Segmented/Story.purs | 34 +- src/Yoga/Block/Atom/Segmented/Style.purs | 6 +- src/Yoga/Block/Atom/Segmented/View.purs | 229 ++++----- .../Atom/Segmented/View/ActiveIndicator.purs | 138 +++-- src/Yoga/Block/Atom/Select/View.purs | 2 +- src/Yoga/Block/Atom/Toggle/Spec.purs | 4 +- src/Yoga/Block/Atom/Toggle/Story.purs | 32 +- src/Yoga/Block/Atom/Toggle/Types.purs | 10 +- src/Yoga/Block/Container/Spec.purs | 5 +- src/Yoga/Block/Container/Story.purs | 82 ++- src/Yoga/Block/Hook/Key.purs | 57 +-- src/Yoga/Block/Hook/Scroll.purs | 19 +- src/Yoga/Block/Hook/UseDocumentSize.purs | 16 +- src/Yoga/Block/Hook/UseDrip.purs | 43 +- src/Yoga/Block/Hook/UseElementResize.purs | 21 +- src/Yoga/Block/Hook/UseInView.purs | 49 +- src/Yoga/Block/Hook/UseKeyDown.purs | 16 +- src/Yoga/Block/Hook/UseKeyUp.purs | 18 +- src/Yoga/Block/Hook/UseMediaQuery.purs | 8 +- src/Yoga/Block/Hook/UseResize2.purs | 24 +- src/Yoga/Block/Hook/UseStateEq.purs | 10 +- src/Yoga/Block/Hook/UseWindowResize.purs | 56 ++- src/Yoga/Block/Icon/SVG/After.purs | 28 +- src/Yoga/Block/Icon/SVG/Background.purs | 35 +- src/Yoga/Block/Icon/SVG/Before.purs | 38 +- src/Yoga/Block/Icon/SVG/Bg.purs | 17 +- src/Yoga/Block/Icon/SVG/Bin.purs | 26 +- src/Yoga/Block/Icon/SVG/Checkmark.purs | 14 +- src/Yoga/Block/Icon/SVG/Cross.purs | 11 +- .../Block/Icon/SVG/DraggableIndicator.purs | 11 +- src/Yoga/Block/Icon/SVG/Ellipsis.purs | 18 +- src/Yoga/Block/Icon/SVG/EyeClosed.purs | 15 +- src/Yoga/Block/Icon/SVG/EyeOpen.purs | 48 +- src/Yoga/Block/Icon/SVG/Filter.purs | 66 +-- src/Yoga/Block/Icon/SVG/Folder.purs | 3 +- src/Yoga/Block/Icon/SVG/GithubLogo.purs | 29 +- src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs | 5 +- src/Yoga/Block/Icon/SVG/HeroiconClock.purs | 2 +- src/Yoga/Block/Icon/SVG/HeroiconGroup.purs | 5 +- src/Yoga/Block/Icon/SVG/HeroiconMoon.purs | 5 +- src/Yoga/Block/Icon/SVG/HeroiconSun.purs | 5 +- src/Yoga/Block/Icon/SVG/Key.purs | 26 +- src/Yoga/Block/Icon/SVG/LogoNew.purs | 11 +- src/Yoga/Block/Icon/SVG/Moon.purs | 11 +- src/Yoga/Block/Icon/SVG/Murmuras.purs | 8 +- src/Yoga/Block/Icon/SVG/MurmurasLogos.purs | 59 ++- src/Yoga/Block/Icon/SVG/Off.purs | 18 +- src/Yoga/Block/Icon/SVG/On.purs | 14 +- src/Yoga/Block/Icon/SVG/Pixel4.purs | 106 ++-- src/Yoga/Block/Icon/SVG/Plus.purs | 11 +- src/Yoga/Block/Icon/SVG/QuestionMark.purs | 11 +- src/Yoga/Block/Icon/SVG/SimpleKey.purs | 31 +- src/Yoga/Block/Icon/SVG/Spd.purs | 42 +- src/Yoga/Block/Icon/SVG/Spinner2.purs | 79 +-- src/Yoga/Block/Icon/SVG/Sun.purs | 23 +- src/Yoga/Block/Icon/SVG/Tmp.purs | 356 +++++++------ src/Yoga/Block/Icon/SVG/Warn.purs | 3 +- src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs | 153 +++--- src/Yoga/Block/Icon/SVG/Yoga1.purs | 470 ++++++++++-------- src/Yoga/Block/Internal/CSS.purs | 13 +- src/Yoga/Block/Internal/OptionalProp.purs | 52 +- src/Yoga/Block/Layout/Box/Spec.purs | 4 +- src/Yoga/Block/Layout/Box/Story.purs | 116 +++-- src/Yoga/Block/Layout/Box/Style.purs | 4 +- src/Yoga/Block/Layout/Box/View.purs | 12 +- src/Yoga/Block/Layout/Centre/Spec.purs | 4 +- src/Yoga/Block/Layout/Centre/Story.purs | 23 +- src/Yoga/Block/Layout/Cluster/Spec.purs | 4 +- src/Yoga/Block/Layout/Cluster/Story.purs | 19 +- src/Yoga/Block/Layout/Cluster/Style.purs | 20 +- src/Yoga/Block/Layout/Cluster/View.purs | 16 +- src/Yoga/Block/Layout/Cover/Spec.purs | 4 +- src/Yoga/Block/Layout/Cover/Story.purs | 36 +- src/Yoga/Block/Layout/Cover/View.purs | 75 ++- src/Yoga/Block/Layout/Grid/Spec.purs | 6 +- src/Yoga/Block/Layout/Grid/Story.purs | 31 +- src/Yoga/Block/Layout/Grid/Style.purs | 8 +- src/Yoga/Block/Layout/Imposter/Story.purs | 17 +- src/Yoga/Block/Layout/Imposter/Style.purs | 28 +- src/Yoga/Block/Layout/Imposter/View.purs | 4 +- src/Yoga/Block/Layout/Sidebar/Spec.purs | 6 +- src/Yoga/Block/Layout/Sidebar/Story.purs | 76 ++- src/Yoga/Block/Layout/Sidebar/Style.purs | 5 +- src/Yoga/Block/Layout/Stack/Spec.purs | 6 +- src/Yoga/Block/Layout/Stack/Story.purs | 74 ++- src/Yoga/Block/Layout/Story.purs | 75 ++- src/Yoga/Block/Layout/Switcher/Spec.purs | 4 +- src/Yoga/Block/Layout/Switcher/Story.purs | 3 +- src/Yoga/Block/Layout/Switcher/View.purs | 13 +- src/Yoga/Block/Layout/Types.purs | 26 +- src/Yoga/Block/Molecule/DatePicker.purs | 39 +- src/Yoga/Block/Molecule/DatePicker/View.purs | 32 +- src/Yoga/Block/Molecule/ReadMore/Story.purs | 27 +- src/Yoga/Block/Molecule/ReadMore/Style.purs | 9 +- src/Yoga/Block/Molecule/ReadMore/View.purs | 133 ++--- src/Yoga/Block/Molecule/Sheet/Story.purs | 84 ++-- src/Yoga/Block/Molecule/Sheet/Style.purs | 6 +- src/Yoga/Block/Molecule/Sheet/View.purs | 92 ++-- src/Yoga/Block/Molecule/Tooltip/View.purs | 33 +- src/Yoga/Block/Organism/Form/Defaults.purs | 18 +- src/Yoga/Block/Organism/Form/Internal.purs | 192 ++++--- .../Block/Organism/NotificationCentre.purs | 24 +- .../Notification/Story.purs | 17 +- .../NotificationCentre/Notification/View.purs | 15 +- src/Yoga/Block/Quark/Drip/View.purs | 30 +- src/Yoga/Block/Typography.purs | 5 +- src/Yoga/Prelude/Default.purs | 2 +- test/Main.purs | 2 +- 127 files changed, 2846 insertions(+), 2193 deletions(-) diff --git a/src/React/Basic/SyntaxHighlighter/Component.purs b/src/React/Basic/SyntaxHighlighter/Component.purs index 15062c5..e70b5ad 100644 --- a/src/React/Basic/SyntaxHighlighter/Component.purs +++ b/src/React/Basic/SyntaxHighlighter/Component.purs @@ -46,119 +46,124 @@ mkHighlighterTheme ∷ { grey ∷ Color , highlightColour ∷ Color , textColour ∷ Color - } -> + } → HighlighterTheme mkHighlighterTheme theme = { hljs: - css - { display: "inline" - , overflowX: "auto" - , color: Color.cssStringRGBA $ Color.mix HSL (Color.desaturate 0.5 theme.highlightColour) (Color.desaturate 0.3 theme.textColour) 0.4 - } + css + { display: "inline" + , overflowX: "auto" + , color: Color.cssStringRGBA $ Color.mix HSL + (Color.desaturate 0.5 theme.highlightColour) + (Color.desaturate 0.3 theme.textColour) + 0.4 + } , "hljs-keyword": - css - { color: "var(--highlight)" - , fontWeight: "normal" - } + css + { color: "var(--highlight)" + , fontWeight: "normal" + } , "hljs-symbol": - css - { color: Color.cssStringRGBA $ theme.highlightColour - } + css + { color: Color.cssStringRGBA $ theme.highlightColour + } , "hljs-type": - css - { color: Color.cssStringRGBA theme.highlightColour - , fontWeight: "normal" - } + css + { color: Color.cssStringRGBA theme.highlightColour + , fontWeight: "normal" + } , "hljs-string": - css - { color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue (-15.0) - } + css + { color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue + (-15.0) + } , "hljs-title": - css - { color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue 15.0 - } + css + { color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue + 15.0 + } , "hljs-comment": - css - { color: Color.cssStringRGBA $ theme.grey - } + css + { color: Color.cssStringRGBA $ theme.grey + } , "hljs-selector-tag": - css - { color: "yellow" - , fontWeight: "bold" - } + css + { color: "yellow" + , fontWeight: "bold" + } , "hljs-literal": - css - { color: "green" - , fontWeight: "bold" - } + css + { color: "green" + , fontWeight: "bold" + } , "hljs-section": - css - { color: "darkslateblue" - , fontWeight: "bold" - } + css + { color: "darkslateblue" + , fontWeight: "bold" + } , "hljs-link": - css - { color: "yellow" - } + css + { color: "yellow" + } , "hljs-subst": - css - { color: "#ddd" - } + css + { color: "#ddd" + } , "hljs-name": - css - { color: "#d88" - , fontWeight: "bold" - } + css + { color: "#d88" + , fontWeight: "bold" + } , "hljs-attribute": - css - { color: "hotpink" - } + css + { color: "hotpink" + } , "hljs-bullet": - css - { color: "#d88" - } + css + { color: "#d88" + } , "hljs-built_in": - css - { color: "#d88" - } + css + { color: "#d88" + } , "hljs-addition": - css - { color: "#d88" - } + css + { color: "#d88" + } , "hljs-variable": - css - { color: "#d88" - } + css + { color: "#d88" + } , "hljs-template-tag": - css - { color: "#d88" - } + css + { color: "#d88" + } , "hljs-template-variable": - css - { color: "#d88" - } + css + { color: "#d88" + } , "hljs-quote": - css - { color: "#777" - } + css + { color: "#777" + } , "hljs-deletion": - css - { color: "#777" - } + css + { color: "#777" + } , "hljs-meta": - css - { color: "#777" - } + css + { color: "#777" + } , "hljs-doctag": - css - { fontWeight: "bold" - } + css + { fontWeight: "bold" + } , "hljs-strong": - css - { fontWeight: "bold" - } + css + { fontWeight: "bold" + } , "hljs-emphasis": - css - { fontStyle: "italic" - } + css + { fontStyle: "italic" + } } diff --git a/src/React/Basic/SyntaxHighlighter/Story.purs b/src/React/Basic/SyntaxHighlighter/Story.purs index 65eac17..26c01aa 100644 --- a/src/React/Basic/SyntaxHighlighter/Story.purs +++ b/src/React/Basic/SyntaxHighlighter/Story.purs @@ -11,18 +11,18 @@ import React.Basic.SyntaxHighlighter.Component as SH import Yoga.Block.Container.Style as Styles default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "React Syntax Highlighter" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } syntaxHighlighter ∷ Effect JSX @@ -33,42 +33,42 @@ syntaxHighlighter = do , element SH.syntaxHighlighter { language: "purescript" , style: - mkHighlighterTheme - { grey: Color.rgb 80 80 80 - , highlightColour: Color.rgb 30 220 190 - , textColour: Color.rgb 220 220 220 - } + mkHighlighterTheme + { grey: Color.rgb 80 80 80 + , highlightColour: Color.rgb 30 220 190 + , textColour: Color.rgb 220 220 220 + } , children: exampleCode } , R.h2_ [ R.text "Javascript Example" ] , element SH.syntaxHighlighter { language: "javascript" , style: - mkHighlighterTheme - { grey: Color.rgb 50 50 50 - , highlightColour: Color.rgb 230 20 90 - , textColour: Color.rgb 250 250 250 - } + mkHighlighterTheme + { grey: Color.rgb 50 50 50 + , highlightColour: Color.rgb 230 20 90 + , textColour: Color.rgb 250 250 250 + } , children: - """undefined is not a function""" + """undefined is not a function""" } , R.h2_ [ R.text "Go Example" ] , element SH.syntaxHighlighter { language: "golang" , style: - mkHighlighterTheme - { grey: Color.rgb 50 50 50 - , highlightColour: Color.rgb 200 70 190 - , textColour: Color.rgb 250 250 250 - } + mkHighlighterTheme + { grey: Color.rgb 50 50 50 + , highlightColour: Color.rgb 200 70 190 + , textColour: Color.rgb 250 250 250 + } , children: - """if err != nil { log.Fatalf("hohoho") }""" + """if err != nil { log.Fatalf("hohoho") }""" } ] where - exampleCode ∷ String - exampleCode = - """module Main where + exampleCode ∷ String + exampleCode = + """module Main where import Prelude import Effect (Effect) import Effect.Console (log) diff --git a/src/React/DndKit.purs b/src/React/DndKit.purs index ac7ba65..e45aba2 100644 --- a/src/React/DndKit.purs +++ b/src/React/DndKit.purs @@ -40,14 +40,14 @@ foreign import closestCorners ∷ CollisionDetection foreign import data SensorDescriptor ∷ Type -dndContext ∷ ∀ p q. Union p q DndContextProps => ReactComponent { | p } +dndContext ∷ ∀ p q. Union p q DndContextProps ⇒ ReactComponent { | p } dndContext = dndContextImpl active ∷ EventFn SyntheticEvent (Maybe Draggable) -active = unsafeEventFn \e -> toMaybe (unsafeCoerce e).active +active = unsafeEventFn \e → toMaybe (unsafeCoerce e).active over ∷ EventFn SyntheticEvent (Maybe Draggable) -over = unsafeEventFn \e -> toMaybe (unsafeCoerce e).over +over = unsafeEventFn \e → toMaybe (unsafeCoerce e).over type Draggable = { id ∷ String } @@ -61,16 +61,16 @@ type SortableContextProps = -- | `items` is the sorted array of the unique ids associated to each sortable item foreign import sortableContextImpl ∷ ∀ props. ReactComponent { | props } -sortableContext ∷ ∀ p q. Union p q SortableContextProps => ReactComponent { | p } +sortableContext ∷ ∀ p q. Union p q SortableContextProps ⇒ ReactComponent { | p } sortableContext = sortableContextImpl -useSortable ∷ SortableArgs -> Hook (UseSortable SortableArgs) SortableResult +useSortable ∷ SortableArgs → Hook (UseSortable SortableArgs) SortableResult useSortable args = map toSortableResult $ unsafeHook $ runEffectFn1 useSortableImpl args -foreign import data UseSortable ∷ Type -> Type -> Type +foreign import data UseSortable ∷ Type → Type → Type foreign import useSortableImpl ∷ EffectFn1 @@ -83,16 +83,16 @@ type SortableArgs = type SortableResultImpl = { attributes ∷ - { "aria-describedby" ∷ String - , "aria-pressed" ∷ String - , "aria-roledescription" ∷ String - , role ∷ String - , tabIndex ∷ Int - } + { "aria-describedby" ∷ String + , "aria-pressed" ∷ String + , "aria-roledescription" ∷ String + , role ∷ String + , tabIndex ∷ Int + } , listeners ∷ - { onKeyDown ∷ EventHandler - , onPointerDown ∷ EventHandler - } + { onKeyDown ∷ EventHandler + , onPointerDown ∷ EventHandler + } , setNodeRef ∷ Ref (Nullable Node) , transform ∷ Foreign , transition ∷ Foreign @@ -100,20 +100,20 @@ type SortableResultImpl = type SortableResult = { attributes ∷ - { _aria ∷ Object String - , role ∷ String - , tabIndex ∷ Int - } + { _aria ∷ Object String + , role ∷ String + , tabIndex ∷ Int + } , listeners ∷ - { onKeyDown ∷ EventHandler - , onPointerDown ∷ EventHandler - } + { onKeyDown ∷ EventHandler + , onPointerDown ∷ EventHandler + } , setNodeRef ∷ Ref (Nullable Node) , transform ∷ Foreign , transition ∷ Foreign } -toSortableResult ∷ SortableResultImpl -> SortableResult +toSortableResult ∷ SortableResultImpl → SortableResult toSortableResult sri = Builder.build ( Builder.modify (Proxy ∷ _ "attributes") @@ -123,12 +123,12 @@ toSortableResult sri = <<< Builder.delete (Proxy ∷ _ "aria-pressed") <<< Builder.delete (Proxy ∷ _ "aria-roledescription") <<< Builder.insert (Proxy ∷ _ "_aria") - ( Object.fromHomogeneous - { describedby: sri.attributes."aria-describedby" - , pressed: sri.attributes."aria-pressed" - , roledescription: sri.attributes."aria-roledescription" - } - ) + ( Object.fromHomogeneous + { describedby: sri.attributes."aria-describedby" + , pressed: sri.attributes."aria-pressed" + , roledescription: sri.attributes."aria-roledescription" + } + ) ) ) ) @@ -146,12 +146,12 @@ foreign import restrictToFirstScrollableAncestor ∷ Modifier foreign import restrictToWindowEdges ∷ Modifier -arrayMove ∷ ∀ a. Int -> Int -> Array a -> Array a +arrayMove ∷ ∀ a. Int → Int → Array a → Array a arrayMove source target arr = runFn3 arrayMoveImpl arr source target foreign import arrayMoveImpl ∷ ∀ a. Fn3 (Array a) Int Int (Array a) -foreign import cssToString ∷ Foreign -> String +foreign import cssToString ∷ Foreign → String foreign import data Sensor ∷ Type @@ -161,18 +161,18 @@ foreign import keyboardSensor ∷ Sensor foreign import pointerSensor ∷ Sensor -foreign import data UseSensor ∷ Type -> Type +foreign import data UseSensor ∷ Type → Type foreign import useSensorImpl ∷ ∀ args. Fn2 Sensor { | args } SensorDescriptor -useSensor ∷ ∀ r. Sensor -> Record r -> SensorDescriptor +useSensor ∷ ∀ r. Sensor → Record r → SensorDescriptor useSensor sensor args = runFn2 useSensorImpl sensor args -foreign import data UseSensors ∷ Type -> Type +foreign import data UseSensors ∷ Type → Type foreign import useSensorsImpl ∷ EffectFn1 (Array SensorDescriptor) Sensors -useSensors ∷ ∀ hooks. Array SensorDescriptor -> Hook hooks Sensors +useSensors ∷ ∀ hooks. Array SensorDescriptor → Hook hooks Sensors useSensors args = unsafeHook $ runEffectFn1 useSensorsImpl args diff --git a/src/Web/DOM/ResizeObserver.purs b/src/Web/DOM/ResizeObserver.purs index 43230ed..98167e4 100644 --- a/src/Web/DOM/ResizeObserver.purs +++ b/src/Web/DOM/ResizeObserver.purs @@ -36,32 +36,32 @@ data ResizeObserverBoxOptions | ContentBox | DevicePixelContentBox -optionsToFFI ∷ ResizeObserverBoxOptions -> String +optionsToFFI ∷ ResizeObserverBoxOptions → String optionsToFFI BorderBox = "border-box" optionsToFFI ContentBox = "content-box" optionsToFFI DevicePixelContentBox = "device-pixel-content-box" -foreign import resizeObserver - ∷ ( Array ResizeObserverEntry - -> ResizeObserver - -> Effect Unit - ) - -> Effect ResizeObserver +foreign import resizeObserver ∷ + ( Array ResizeObserverEntry → + ResizeObserver → + Effect Unit + ) → + Effect ResizeObserver -foreign import _observe ∷ ∀ r. Record r -> ResizeObserver -> Element -> Effect Unit +foreign import _observe ∷ ∀ r. Record r → ResizeObserver → Element → Effect Unit -observe - ∷ ResizeObserverBoxOptions - -> ResizeObserver - -> Element - -> Effect Unit +observe ∷ + ResizeObserverBoxOptions → + ResizeObserver → + Element → + Effect Unit observe options = _observe { box: optionsToFFI options } -foreign import unobserve - ∷ ResizeObserver - -> Element - -> Effect Unit +foreign import unobserve ∷ + ResizeObserver → + Element → + Effect Unit -foreign import disconnect - ∷ ResizeObserver - -> Effect Unit +foreign import disconnect ∷ + ResizeObserver → + Effect Unit diff --git a/src/Yoga.purs b/src/Yoga.purs index 976fac6..1bb40e3 100644 --- a/src/Yoga.purs +++ b/src/Yoga.purs @@ -11,27 +11,27 @@ import Record as Record import Type.Proxy (Proxy(..)) import Unsafe.Coerce (unsafeCoerce) -div' - ∷ ∀ attrs attrs_. Union attrs attrs_ Props_div ⇒ ReactComponent (Record attrs) +div' ∷ + ∀ attrs attrs_. Union attrs attrs_ Props_div ⇒ ReactComponent (Record attrs) div' = R.div' -span' - ∷ ∀ attrs attrs_. Union attrs attrs_ Props_span ⇒ ReactComponent (Record attrs) +span' ∷ + ∀ attrs attrs_. Union attrs attrs_ Props_span ⇒ ReactComponent (Record attrs) span' = R.span' -button' - ∷ ∀ attrs attrs_ - . Union attrs attrs_ Props_button - ⇒ ReactComponent (Record attrs) +button' ∷ + ∀ attrs attrs_. + Union attrs attrs_ Props_button ⇒ + ReactComponent (Record attrs) button' = R.button' -el - ∷ ∀ props - . Lacks "children" props - ⇒ ReactComponent { children ∷ Array JSX | props } - → Record props - → Array JSX - → JSX +el ∷ + ∀ props. + Lacks "children" props ⇒ + ReactComponent { children ∷ Array JSX | props } → + Record props → + Array JSX → + JSX el x props children = Hooks.element x (Record.insert (Proxy ∷ Proxy "children") children props) @@ -39,39 +39,39 @@ infixl 5 el as -leaf - ∷ ∀ props - . Lacks "children" props - ⇒ ReactComponent { | props } - → Record props - → JSX +leaf ∷ + ∀ props. + Lacks "children" props ⇒ + ReactComponent { | props } → + Record props → + JSX leaf x props = Hooks.element x props infixl 5 leaf as -styled - ∷ ∀ props - . Lacks "children" props - ⇒ ReactComponent { children ∷ Array JSX | props } - → { css ∷ Emotion.Style | props } - → Array JSX - → JSX +styled ∷ + ∀ props. + Lacks "children" props ⇒ + ReactComponent { children ∷ Array JSX | props } → + { css ∷ Emotion.Style | props } → + Array JSX → + JSX styled x props children = - ( unsafeCoerce Emotion.element - ∷ ∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX + ( unsafeCoerce Emotion.element ∷ + ∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX ) x (Record.insert (Proxy ∷ Proxy "children") children props) infixl 5 styled as diff --git a/src/Yoga/Block.purs b/src/Yoga/Block.purs index b28ca94..c7d46ba 100644 --- a/src/Yoga/Block.purs +++ b/src/Yoga/Block.purs @@ -142,7 +142,7 @@ icon' = Icon.component input' ∷ ∀ p q. Union p q Input.Props ⇒ ReactComponent { | p } input' = Input.component -input ∷ ∀ p q. Union p q Input.Props ⇒ { | p } → JSX +input ∷ ∀ p q. Union p q Input.Props ⇒ { | p } → JSX input = React.element input' image ∷ ∀ p q. Union p q Image.Props ⇒ { | p } → JSX diff --git a/src/Yoga/Block/Atom/Button/Types.purs b/src/Yoga/Block/Atom/Button/Types.purs index ae6a628..512b14b 100644 --- a/src/Yoga/Block/Atom/Button/Types.purs +++ b/src/Yoga/Block/Atom/Button/Types.purs @@ -29,11 +29,11 @@ instance BoundedEnum ButtonType where fromEnum = genericFromEnum toEnum = genericToEnum -renderButtonType ∷ ButtonType -> String +renderButtonType ∷ ButtonType → String renderButtonType = case _ of - Primary -> "primary" - Generic -> "generic" - Dangerous -> "dangerous" + Primary → "primary" + Generic → "generic" + Dangerous → "dangerous" data ButtonShape = Rounded @@ -57,8 +57,8 @@ instance BoundedEnum ButtonShape where fromEnum = genericFromEnum toEnum = genericToEnum -renderButtonShape ∷ ButtonShape -> String +renderButtonShape ∷ ButtonShape → String renderButtonShape = case _ of - Rounded -> "rounded" - Pill -> "pill" - Flat -> "flat" + Rounded → "rounded" + Pill → "pill" + Flat → "flat" diff --git a/src/Yoga/Block/Atom/Button/View.purs b/src/Yoga/Block/Atom/Button/View.purs index 9839abd..da1c9e2 100644 --- a/src/Yoga/Block/Atom/Button/View.purs +++ b/src/Yoga/Block/Atom/Button/View.purs @@ -19,7 +19,7 @@ import Yoga.Block.Hook.UseDrip (useDrip) import Yoga.Block.Internal (ButtonWritablePropsNoChildrenF, objectToStyle, toStyleObject) import Yoga.Block.Quark.Drip.View as Drip -type PropsF :: forall k. (Type -> k) -> Row k -> Row k +type PropsF ∷ ∀ k. (Type → k) → Row k → Row k type PropsF f r = ( buttonType ∷ f ButtonType , buttonShape ∷ f ButtonShape @@ -36,30 +36,30 @@ type Props = type PropsOptional = PropsF OptionalProp (ButtonReadableProps) -component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p } +component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Button" do - \(props ∷ { | PropsOptional }) propsRef -> React.do - backupRef <- React.useRef null + \(props ∷ { | PropsOptional }) propsRef → React.do + backupRef ← React.useRef null let ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef let buttonType = props.buttonType ?|| Button.Generic let buttonShape = props.buttonShape ?|| Button.Rounded let rippleʔ = props.ripple # opToMaybe # case buttonShape of - Button.Flat -> case buttonType of - Button.Primary -> + Button.Flat → case buttonType of + Button.Primary → fromMaybe colour.highlightLighter >>> Just - _ -> fromMaybe colour.highlightAlpha50 >>> Just - _ -> identity - dripValues <- useDrip ref + _ → fromMaybe colour.highlightAlpha50 >>> Just + _ → identity + dripValues ← useDrip ref let propsChildren = unsafeGet "children" props # reactChildrenToArray let children = reactChildrenFromArray case rippleʔ of - Nothing -> propsChildren - Just rippleColour -> do + Nothing → propsChildren + Just rippleColour → do Array.cons ( Drip.component @@ -76,11 +76,11 @@ rawComponent = let onClick = case unsafeGet "onClick" props # uorToMaybe of - Just givenHandler -> handler syntheticEvent \e -> do + Just givenHandler → handler syntheticEvent \e → do void $ runEffectFn1 givenHandler e void $ runEffectFn1 dripValues.onClick e - Nothing -> dripValues.onClick + Nothing → dripValues.onClick let props' = props # unsafeSet "onClick" onClick diff --git a/src/Yoga/Block/Atom/Icon/Style.purs b/src/Yoga/Block/Atom/Icon/Style.purs index c7fe034..6f9c836 100644 --- a/src/Yoga/Block/Atom/Icon/Style.purs +++ b/src/Yoga/Block/Atom/Icon/Style.purs @@ -3,7 +3,7 @@ module Yoga.Block.Atom.Icon.Style where import Yoga.Prelude.Style import Yoga.Block.Container.Style (colour) -type Props ∷ forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style , colour ∷ f StyleProperty @@ -16,7 +16,7 @@ type Props f r = | r ) -span ∷ ∀ r. { | Props OptionalProp r } -> Style +span ∷ ∀ r. { | Props OptionalProp r } → Style span props = inlineFlex <> css diff --git a/src/Yoga/Block/Atom/Icon/View.purs b/src/Yoga/Block/Atom/Icon/View.purs index 55799a6..8b9c2af 100644 --- a/src/Yoga/Block/Atom/Icon/View.purs +++ b/src/Yoga/Block/Atom/Icon/View.purs @@ -16,17 +16,18 @@ type PropsF f = | Style.Props f (MandatoryProps ()) ) -component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p } +component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | MandatoryProps p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = - mkForwardRefComponent "Yoga Icon" \(props ∷ { | PropsF OptionalProp }) ref -> React.do - pure - $ span' - ? props.className - , css: Style.span props - , ref - } - /> [ props.icon ] + mkForwardRefComponent "Yoga Icon" \(props ∷ { | PropsF OptionalProp }) ref → + React.do + pure + $ span' + ? props.className + , css: Style.span props + , ref + } + /> [ props.icon ] diff --git a/src/Yoga/Block/Atom/Image/Style.purs b/src/Yoga/Block/Atom/Image/Style.purs index 77159b6..38a5a9e 100644 --- a/src/Yoga/Block/Atom/Image/Style.purs +++ b/src/Yoga/Block/Atom/Image/Style.purs @@ -2,11 +2,11 @@ module Yoga.Block.Atom.Image.Style where import Yoga.Prelude.Style -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style | r ) -style :: forall r. { | Props OptionalProp r } -> Style +style ∷ ∀ r. { | Props OptionalProp r } → Style style props = css {} <>? props.css \ No newline at end of file diff --git a/src/Yoga/Block/Atom/Image/Types.purs b/src/Yoga/Block/Atom/Image/Types.purs index 44abc9d..bceb2a6 100644 --- a/src/Yoga/Block/Atom/Image/Types.purs +++ b/src/Yoga/Block/Atom/Image/Types.purs @@ -29,10 +29,10 @@ derive instance Eq CrossOrigin derive instance Ord CrossOrigin derive newtype instance Show CrossOrigin -crossOriginAnonymous :: CrossOrigin +crossOriginAnonymous ∷ CrossOrigin crossOriginAnonymous = CrossOrigin "anonymous" -crossOriginUseCredentials :: CrossOrigin +crossOriginUseCredentials ∷ CrossOrigin crossOriginUseCredentials = CrossOrigin "use-credentials" newtype Decoding = Decoding String @@ -41,10 +41,10 @@ derive instance Eq Decoding derive instance Ord Decoding derive newtype instance Show Decoding -decodingSync :: Decoding +decodingSync ∷ Decoding decodingSync = Decoding "sync" -decodingAsync :: Decoding +decodingAsync ∷ Decoding decodingAsync = Decoding "async" newtype Loading = Loading String @@ -53,10 +53,10 @@ derive instance Eq Loading derive instance Ord Loading derive newtype instance Show Loading -loadingEager :: Loading +loadingEager ∷ Loading loadingEager = Loading "eager" -loadingLazy :: Loading +loadingLazy ∷ Loading loadingLazy = Loading "lazy" newtype ReferrerPolicy = ReferrerPolicy String @@ -69,7 +69,8 @@ referrerPolicyNoReferrer ∷ ReferrerPolicy referrerPolicyNoReferrer = ReferrerPolicy "no-referrer" refererPolicyNoReferrerWhenDowngrade ∷ ReferrerPolicy -refererPolicyNoReferrerWhenDowngrade = ReferrerPolicy "no-referrer-when-downgrade" +refererPolicyNoReferrerWhenDowngrade = ReferrerPolicy + "no-referrer-when-downgrade" referrerPolicyOrigin ∷ ReferrerPolicy referrerPolicyOrigin = ReferrerPolicy "origin" @@ -84,13 +85,15 @@ referrerPolicyStrictOrigin ∷ ReferrerPolicy referrerPolicyStrictOrigin = ReferrerPolicy "strict-origin" referrerPolicyStrictOriginWhenCrossOrigin ∷ ReferrerPolicy -referrerPolicyStrictOriginWhenCrossOrigin = ReferrerPolicy "strict-origin-when-cross-origin" +referrerPolicyStrictOriginWhenCrossOrigin = ReferrerPolicy + "strict-origin-when-cross-origin" referrerPolicySameOrigin ∷ ReferrerPolicy referrerPolicySameOrigin = ReferrerPolicy "same-origin" referrerPolicySameOriginWhenCrossOrigin ∷ ReferrerPolicy -referrerPolicySameOriginWhenCrossOrigin = ReferrerPolicy "same-origin-when-cross-origin" +referrerPolicySameOriginWhenCrossOrigin = ReferrerPolicy + "same-origin-when-cross-origin" referrerPolicyNever ∷ ReferrerPolicy referrerPolicyNever = ReferrerPolicy "never" diff --git a/src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs b/src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs index f688a8a..04e1f7a 100644 --- a/src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs +++ b/src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs @@ -27,8 +27,8 @@ newtype UseTypingPlaceholders hooks = UseTypingPlaceholders derive instance Newtype (UseTypingPlaceholders hooks) _ -useTypingPlaceholders - ∷ String → Array String → Hook UseTypingPlaceholders NodeRef +useTypingPlaceholders ∷ + String → Array String → Hook UseTypingPlaceholders NodeRef useTypingPlaceholders defaultPlaceholder otherPlaceholders = coerceHook React.do let placeholders = NEA.cons' defaultPlaceholder otherPlaceholders inputRef ← React.useRef Nullable.null diff --git a/src/Yoga/Block/Atom/Input/Story.purs b/src/Yoga/Block/Atom/Input/Story.purs index 02a0825..8923b3a 100644 --- a/src/Yoga/Block/Atom/Input/Story.purs +++ b/src/Yoga/Block/Atom/Input/Story.purs @@ -24,14 +24,14 @@ import Yoga.Block.Atom.Input.View (passwordIcon) import Yoga.Block.Container.Style (colour) import Yoga.Block.Container.Style as Styles -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Atom/Input" , decorators: - [ \storyFn -> + [ \storyFn → R.div_ [ element E.global { styles: Styles.global } , unsafePerformEffect storyFn @@ -47,16 +47,36 @@ input = do [ R.h1_ [ R.text "Input Examples" ] , R.h3_ [ R.text "With a label" ] , Block.cluster {} - [ element Input.component { label: nes (Proxy ∷ _ "This has a label"), value: "And text", onChange: handler_ mempty } - , element Input.component { label: nes (Proxy ∷ _ "This z` gggj"), value: "", onChange: handler_ mempty } - , element Input.component { label: nes (Proxy ∷ _ "This has a label"), placeholder: "A j very g long y placeholder, too..." } - , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" } - , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), trailing: R.text "🤫" } - , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🌭" } - , element Input.component { sizeVariant: SizeSmall, label: nes (Proxy ∷ _ "Small") } - , element Input.component { sizeVariant: SizeTiny, label: nes (Proxy ∷ _ "Tiny") } - , element Input.component { sizeVariant: SizeSmall, placeholder: "Small without label" } - , element Input.component { sizeVariant: SizeTiny, placeholder: "Tiny without label" } + [ element Input.component + { label: nes (Proxy ∷ _ "This has a label") + , value: "And text" + , onChange: handler_ mempty + } + , element Input.component + { label: nes (Proxy ∷ _ "This z` gggj") + , value: "" + , onChange: handler_ mempty + } + , element Input.component + { label: nes (Proxy ∷ _ "This has a label") + , placeholder: "A j very g long y placeholder, too..." + } + , element Input.component + { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" } + , element Input.component + { label: nes (Proxy ∷ _ "Pig nose"), trailing: R.text "🤫" } + , element Input.component + { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🌭" } + , element Input.component + { sizeVariant: SizeSmall, label: nes (Proxy ∷ _ "Small") } + , element Input.component + { sizeVariant: SizeTiny, label: nes (Proxy ∷ _ "Tiny") } + , element Input.component + { sizeVariant: SizeSmall + , placeholder: "Small without label" + } + , element Input.component + { sizeVariant: SizeTiny, placeholder: "Tiny without label" } , Block.box { background: colour.backgroundLayer3 } @@ -77,13 +97,30 @@ input = do , leading: R.text "🌭" } ] - , element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "⭐", trailing: R.text "🔮" } + , element Input.component + { label: nes (Proxy ∷ _ "Pig nose") + , leading: R.text "⭐" + , trailing: R.text "🔮" + } ] , R.h2_ [ R.text "Generic Input" ] - , Input.component { value: "A Generic Input", onChange: handler_ mempty } + , Input.component + { value: "A Generic Input", onChange: handler_ mempty } , R.h2_ [ R.text "Validation on text Input" ] - , element Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "Is undefined a function?"), value: "Yes, why not?", onChange: handler_ mempty, _aria: Object.singleton "invalid" "true" } - , element Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "What's the type of null?"), value: "object", onChange: handler_ mempty, _aria: Object.singleton "invalid" "false" } + , element Input.component + { type: HTMLInput.Text + , label: nes (Proxy ∷ _ "Is undefined a function?") + , value: "Yes, why not?" + , onChange: handler_ mempty + , _aria: Object.singleton "invalid" "true" + } + , element Input.component + { type: HTMLInput.Text + , label: nes (Proxy ∷ _ "What's the type of null?") + , value: "object" + , onChange: handler_ mempty + , _aria: Object.singleton "invalid" "false" + } , R.h2_ [ R.text "Required fields" ] , element Input.component { type: HTMLInput.Text @@ -95,21 +132,49 @@ input = do { type: HTMLInput.Text , label: nes (Proxy ∷ _ "Is undefined really a function?") } - , Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "Now this is really just excessively long and you should avoid it.") } + , Input.component + { type: HTMLInput.Text + , label: nes + ( Proxy ∷ + _ + "Now this is really just excessively long and you should avoid it." + ) + } , Input.component { css: E.css { width: E.str "500px" } , type: HTMLInput.Text - , label: nes (Proxy ∷ _ "You can avoid this problem by setting a custom width") + , label: nes + ( Proxy ∷ + _ + "You can avoid this problem by setting a custom width" + ) } , R.h2_ [ R.text "Password" ] , passComponent {} , R.h2_ [ R.text "Text Input" ] - , element Input.component { type: HTMLInput.Text, value: "Some text", onChange: handler_ mempty } - , element Input.component { type: HTMLInput.Text, placeholder: "Placeholder", onChange: handler_ mempty } - , element Input.component { type: HTMLInput.Text, value: "", label: NonEmptyString "Heinzi", onChange: handler_ mempty } + , element Input.component + { type: HTMLInput.Text + , value: "Some text" + , onChange: handler_ mempty + } + , element Input.component + { type: HTMLInput.Text + , placeholder: "Placeholder" + , onChange: handler_ mempty + } + , element Input.component + { type: HTMLInput.Text + , value: "" + , label: NonEmptyString "Heinzi" + , onChange: handler_ mempty + } , R.h2_ [ R.text "Search Input" ] - , element Input.component { type: HTMLInput.Search, placeholder: "Search...", onChange: handler_ mempty } + , element Input.component + { type: HTMLInput.Search + , placeholder: "Search..." + , onChange: handler_ mempty + } -- , element Input.component { type: "submit" } -- , R.h2_ [ R.text "Radio" ] -- , element Input.component { type: "radio" } @@ -127,14 +192,17 @@ input = do passComponent = unsafePerformEffect $ reactComponent "Password Example" do - \{} -> React.do - password /\ setPassword <- React.useState' "" - hidePassword /\ modifyHidePassword <- React.useState true + \{} → React.do + password /\ setPassword ← React.useState' "" + hidePassword /\ modifyHidePassword ← React.useState true pure $ Input.component - { type: if hidePassword then HTMLInput.Password else HTMLInput.Text - , trailing: passwordIcon { hidePassword, modifyHidePassword } + { type: + if hidePassword then HTMLInput.Password + else HTMLInput.Text + , trailing: passwordIcon + { hidePassword, modifyHidePassword } , value: password , onChange: handler targetValue (traverse_ setPassword) , label: nes (Proxy ∷ _ "Password") diff --git a/src/Yoga/Block/Atom/Input/Types.purs b/src/Yoga/Block/Atom/Input/Types.purs index b52026c..0a1346a 100644 --- a/src/Yoga/Block/Atom/Input/Types.purs +++ b/src/Yoga/Block/Atom/Input/Types.purs @@ -29,26 +29,26 @@ data HTMLInputType derive instance eqHTMLInput ∷ Eq HTMLInputType -toString ∷ HTMLInputType -> String +toString ∷ HTMLInputType → String toString = case _ of - Checkbox -> "checkbox" - Color -> "color" - Date -> "date" - DatetimeLocal -> "datetime-local" - Email -> "email" - File -> "file" - Hidden -> "hidden" - Image -> "image" - Month -> "month" - Number -> "number" - Password -> "password" - Radio -> "radio" - Range -> "range" - Reset -> "reset" - Search -> "search" - Submit -> "submit" - Tel -> "tel" - Text -> "text" - Time -> "time" - Url -> "url" - Week -> "week" + Checkbox → "checkbox" + Color → "color" + Date → "date" + DatetimeLocal → "datetime-local" + Email → "email" + File → "file" + Hidden → "hidden" + Image → "image" + Month → "month" + Number → "number" + Password → "password" + Radio → "radio" + Range → "range" + Reset → "reset" + Search → "search" + Submit → "submit" + Tel → "tel" + Text → "text" + Time → "time" + Url → "url" + Week → "week" diff --git a/src/Yoga/Block/Atom/Input/View.purs b/src/Yoga/Block/Atom/Input/View.purs index 505df50..fba0a93 100644 --- a/src/Yoga/Block/Atom/Input/View.purs +++ b/src/Yoga/Block/Atom/Input/View.purs @@ -24,7 +24,7 @@ import Yoga.Block.Atom.Input.View.Label as Label import Yoga.Block.Container.Style (colour) import Yoga.Block.Icon.SVG as SVGIcon -type PropsF ∷ ∀ k. (Type -> k) -> Row k -> Row k +type PropsF ∷ ∀ k. (Type → k) → Row k → Row k type PropsF f r = ( leading ∷ f JSX , trailing ∷ f JSX @@ -41,10 +41,10 @@ type Props = type PropsOptional = PropsF OptionalProp (InputReadableProps) -component ∷ ∀ p q. Union p q Props => ReactComponent { | p } +component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p } component = rawComponent -mkLeftIcon ∷ JSX -> JSX +mkLeftIcon ∷ JSX → JSX mkLeftIcon icon = div' React.do - backupId <- useId - hasFocus /\ setHasFocus <- useState' false - inputBackupRef ∷ NodeRef <- useRef null + \(props ∷ { | PropsOptional }) propsRef → React.do + backupId ← useId + hasFocus /\ setHasFocus ← useState' false + inputBackupRef ∷ NodeRef ← useRef null let inputRef = props.inputRef ?|| inputBackupRef - backupRef ∷ NodeRef <- useRef null + backupRef ∷ NodeRef ← useRef null let ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef let maybeValue ∷ Maybe String maybeValue = props.value # opToMaybe - internalValue /\ setValue <- useState' "" + internalValue /\ setValue ← useState' "" let hasValue = case maybeValue of - Just v -> v /= "" - Nothing -> internalValue /= "" + Just v → v /= "" + Nothing → internalValue /= "" aria ∷ Object String aria = props._aria # opToMaybe # fold labelId ∷ String labelId = props.id ?|| backupId # (_ <> "-label") - renderSmallLabel = isTruthy props.forceSmallLabel || hasFocus || hasValue + renderSmallLabel = isTruthy props.forceSmallLabel || hasFocus || + hasValue renderLargeLabel ∷ Boolean renderLargeLabel = not renderSmallLabel @@ -85,7 +86,7 @@ rawComponent = maybeLabelText ∷ Maybe NonEmptyString maybeLabelText = props.label # opToMaybe - mkLabel ∷ NonEmptyString -> JSX + mkLabel ∷ NonEmptyString → JSX mkLabel labelText = Label.component @@ -117,15 +118,15 @@ rawComponent = maybePlaceholder ∷ Maybe String maybePlaceholder = do - given <- props.placeholder # opToMaybe + given ← props.placeholder # opToMaybe if isJust maybeLabelText && hasFocus then Just given else Nothing onBlur = handler_ do when hasFocus $ setHasFocus false - el <- getHTMLElementFromRef ref + el ← getHTMLElementFromRef ref let inputEl = InputElement.fromHTMLElement =<< el - for_ inputEl \ie -> do - v <- InputElement.value ie + for_ inputEl \ie → do + v ← InputElement.value ie setValue v onFocus = handler_ (unless hasFocus $ setHasFocus true) @@ -148,7 +149,12 @@ rawComponent = theInput = HTMLInput.componentOptional - ( ( (cast ∷ _ -> { | HTMLInput.PropsF OptionalProp (InputWritablePropsF OptionalProp ()) }) + ( ( ( cast ∷ + _ → + { | HTMLInput.PropsF OptionalProp + (InputWritablePropsF OptionalProp ()) + } + ) ( ( inputProps # RB.build ( RB.delete (Proxy ∷ _ "leading") @@ -166,7 +172,8 @@ rawComponent = Container.rawContainer (_ == "true") # maybeToOp + , isInvalid: aria # Object.lookup "invalid" <#> (_ == "true") # + maybeToOp , css: props.css , background: props.background , borderColour: props.borderColour @@ -176,29 +183,29 @@ rawComponent = , sizeVariant: props.sizeVariant } /> - [ leading # foldMap \l -> div' [ l ] + [ leading # foldMap \l → div' [ l ] , theInput - , trailing # foldMap \t -> div' [ t ] + , trailing # foldMap \t → div' [ t ] ] pure $ case maybeLabelText of - Nothing -> inputContainer - Just labelText -> + Nothing → inputContainer + Just labelText → div "ry-label-and-input-wrapper" (Style.labelAndInputWrapper <>? props.css) [ inputContainer, mkLabel labelText ] -passwordIcon - ∷ ReactComponent - { hidePassword ∷ Boolean - , modifyHidePassword ∷ (Boolean -> Boolean) -> Effect Unit - } +passwordIcon ∷ + ReactComponent + { hidePassword ∷ Boolean + , modifyHidePassword ∷ (Boolean → Boolean) → Effect Unit + } passwordIcon = unsafePerformEffect - $ reactComponent "Password Icon" \props -> React.do + $ reactComponent "Password Icon" \props → React.do pure $ div' props.modifyHidePassword not + { onClick: handler preventDefault \_ → props.modifyHidePassword not , className: "ry-input-right-icon-container" , css: Style.rightIconContainer } @@ -215,7 +222,13 @@ passwordIcon = , initial: M.initial $ css { scaleY: 0.2 } , animate: M.animate $ css { scaleY: 1.0 } , exit: M.exit $ css {} - , transition: M.transition { scaleY: { type: "spring", duration: 0.12, bounce: 0.00 } } + , transition: M.transition + { scaleY: + { type: "spring" + , duration: 0.12 + , bounce: 0.00 + } + } } /> [ Icon.component @@ -231,7 +244,13 @@ passwordIcon = , initial: M.initial $ css { scaleY: 1.0 } , animate: M.animate $ css { scaleY: 0.4 } , exit: M.exit $ css { scaleY: 0.2 } - , transition: M.transition { scaleY: { type: "spring", duration: 0.12, bounce: 0.00 } } + , transition: M.transition + { scaleY: + { type: "spring" + , duration: 0.12 + , bounce: 0.00 + } + } } /> [ Icon.component diff --git a/src/Yoga/Block/Atom/Input/View/HTMLInput.purs b/src/Yoga/Block/Atom/Input/View/HTMLInput.purs index aad0eda..e723a21 100644 --- a/src/Yoga/Block/Atom/Input/View/HTMLInput.purs +++ b/src/Yoga/Block/Atom/Input/View/HTMLInput.purs @@ -12,7 +12,7 @@ import Yoga.Block.Atom.Input.Style as Style import Yoga.Block.Atom.Input.Types (HTMLInputType) import Yoga.Block.Atom.Input.Types as HTMLInput -type PropsF :: forall k. (Type -> k) -> Row k -> Row k +type PropsF ∷ ∀ k. (Type → k) → Row k → Row k type PropsF f r = ( type ∷ f HTMLInputType | Style.Props f r @@ -24,18 +24,23 @@ type Props = type PropsOptional = PropsF OptionalProp (InputReadableProps) -component ∷ ∀ p q. Union p q Props => ReactComponent { | p } +component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p } component = rawComponent -componentOptional ∷ ∀ p q. Union p q (PropsF OptionalProp (InputWritablePropsF OptionalProp ())) => ReactComponent { | p } +componentOptional ∷ + ∀ p q. + Union p q (PropsF OptionalProp (InputWritablePropsF OptionalProp ())) ⇒ + ReactComponent { | p } componentOptional = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Input" do - \(props ∷ { | PropsOptional }) ref -> React.do + \(props ∷ { | PropsOptional }) ref → React.do let - inputWrapper = div' props.type } pure do inputWrapper [ input ] diff --git a/src/Yoga/Block/Atom/PopOver.purs b/src/Yoga/Block/Atom/PopOver.purs index 15e30a8..f41c339 100644 --- a/src/Yoga/Block/Atom/PopOver.purs +++ b/src/Yoga/Block/Atom/PopOver.purs @@ -1,4 +1,2 @@ module Yoga.Block.Atom.PopOver where - - diff --git a/src/Yoga/Block/Atom/Range/Story.purs b/src/Yoga/Block/Atom/Range/Story.purs index 0805cf5..e722121 100644 --- a/src/Yoga/Block/Atom/Range/Story.purs +++ b/src/Yoga/Block/Atom/Range/Story.purs @@ -11,18 +11,18 @@ import React.Basic.DOM as R import React.Basic.Emotion as E default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Atom/Range" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } range ∷ Effect JSX diff --git a/src/Yoga/Block/Atom/Segmented/Story.purs b/src/Yoga/Block/Atom/Segmented/Story.purs index 2e2b194..a25d8db 100644 --- a/src/Yoga/Block/Atom/Segmented/Story.purs +++ b/src/Yoga/Block/Atom/Segmented/Story.purs @@ -14,33 +14,33 @@ import Yoga.Block.Atom.Segmented as Segmented import Yoga.Block.Container.Style as Styles default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Atom/Segmented" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } segmented ∷ Effect JSX segmented = do - demoComponent <- makeDemoComponent + demoComponent ← makeDemoComponent pure $ element demoComponent {} where - makeDemoComponent = - reactComponent "Segmented Demo" \{} -> React.do - activeIndex /\ setElementIndex <- useState' 2 - pure - $ element Segmented.component - { activeIndex - , updateActiveItem: const setElementIndex - , buttonContents: + makeDemoComponent = + reactComponent "Segmented Demo" \{} → React.do + activeIndex /\ setElementIndex ← useState' 2 + pure + $ element Segmented.component + { activeIndex + , updateActiveItem: const setElementIndex + , buttonContents: twoOrMore { id: "gag", value: "2" } { id: "nag", value: "1" } @@ -48,4 +48,4 @@ segmented = do , { id: "four", value: "2" } , { id: "one", value: "1" } ] - } + } diff --git a/src/Yoga/Block/Atom/Segmented/Style.purs b/src/Yoga/Block/Atom/Segmented/Style.purs index 4aededa..bff32f1 100644 --- a/src/Yoga/Block/Atom/Segmented/Style.purs +++ b/src/Yoga/Block/Atom/Segmented/Style.purs @@ -4,7 +4,7 @@ import Yoga.Prelude.Style import Data.Interpolate (i) import Yoga.Block.Container.Style (colour) -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style | r @@ -65,7 +65,7 @@ activeElement = , zIndex: str "3" } -button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style +button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } → Style button _ = css { background: color transparent @@ -89,7 +89,7 @@ button _ = , userSelect: none } -buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style +buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } → Style buttonContent { isFirst, isLast } = flex <> css diff --git a/src/Yoga/Block/Atom/Segmented/View.purs b/src/Yoga/Block/Atom/Segmented/View.purs index 6ee28c1..33f08fc 100644 --- a/src/Yoga/Block/Atom/Segmented/View.purs +++ b/src/Yoga/Block/Atom/Segmented/View.purs @@ -29,135 +29,140 @@ import Yoga.Block.Hook.UseWindowResize (useWindowResize) type Props = { buttonContents ∷ TwoOrMore Item , activeIndex ∷ Int - , updateActiveItem ∷ Item -> Int -> Effect Unit + , updateActiveItem ∷ Item → Int → Effect Unit } component ∷ ReactComponent Props component = unsafePerformEffect - $ reactComponent "Segmented" \({ buttonContents, activeIndex, updateActiveItem } ∷ Props) -> React.do - ------------------------------------------- - -- Store button refs for animation purposes - itemRefs /\ setItemRefs ∷ Maybe (TwoOrMore _) /\ _ <- useState' Nothing - useLayoutEffectOnce do - refs <- traverse (const createRef) buttonContents - setItemRefs (Just refs) - mempty - windowSize /\ setWindowSize <- useState' zero - ------------------------------------------- - -- Support keyboard input - let - maxIndex = TwoOrMore.length buttonContents - 1 - updateIndex idx = do - let - newItem = fromMaybe' - (\_ -> TwoOrMore.head buttonContents) - (buttonContents TwoOrMore.!! idx) - updateActiveItem newItem idx - - updateTo toIndex = do - for_ itemRefs do blurAtIndex activeIndex - updateIndex toIndex - for_ itemRefs do focusAtIndex toIndex - useKeyDown $ \_ _ -> case _ of - Key.Right -> - when (activeIndex < maxIndex) do - updateTo (activeIndex + 1) - Key.Left -> - when (activeIndex > 0) do - updateTo (activeIndex - 1) - Key.End -> updateTo maxIndex - Key.Home -> updateTo 0 - _ -> pure unit - ------------------------------------------- - -- Ensure redraw on window resize - newWindowSize <- useWindowResize - useAff newWindowSize do - let δw = abs (newWindowSize.innerWidth - windowSize.innerWidth) - let δh = abs (newWindowSize.innerHeight - windowSize.innerHeight) - delay - if δw < 10.0 || δh < 10.0 then - 100.0 # Milliseconds - else - 10.0 # Milliseconds - liftEffect do -- force rerender - refs <- traverse (const createRef) buttonContents + $ reactComponent "Segmented" + \({ buttonContents, activeIndex, updateActiveItem } ∷ Props) → React.do + ------------------------------------------- + -- Store button refs for animation purposes + itemRefs /\ setItemRefs ∷ Maybe (TwoOrMore _) /\ _ ← useState' Nothing + useLayoutEffectOnce do + refs ← traverse (const createRef) buttonContents setItemRefs (Just refs) - setWindowSize windowSize - let - children ∷ Array JSX - children = refsAndContents <#> mapWithIndex contentToChild # maybe mempty TwoOrMore.toArray + mempty + windowSize /\ setWindowSize ← useState' zero + ------------------------------------------- + -- Support keyboard input + let + maxIndex = TwoOrMore.length buttonContents - 1 + updateIndex idx = do + let + newItem = fromMaybe' + (\_ → TwoOrMore.head buttonContents) + (buttonContents TwoOrMore.!! idx) + updateActiveItem newItem idx - refsAndContents ∷ Maybe (TwoOrMore (Item /\ Ref (Nullable Node))) - refsAndContents = TwoOrMore.zip buttonContents <$> itemRefs + updateTo toIndex = do + for_ itemRefs do blurAtIndex activeIndex + updateIndex toIndex + for_ itemRefs do focusAtIndex toIndex + useKeyDown $ \_ _ → case _ of + Key.Right → + when (activeIndex < maxIndex) do + updateTo (activeIndex + 1) + Key.Left → + when (activeIndex > 0) do + updateTo (activeIndex - 1) + Key.End → updateTo maxIndex + Key.Home → updateTo 0 + _ → pure unit + ------------------------------------------- + -- Ensure redraw on window resize + newWindowSize ← useWindowResize + useAff newWindowSize do + let δw = abs (newWindowSize.innerWidth - windowSize.innerWidth) + let δh = abs (newWindowSize.innerHeight - windowSize.innerHeight) + delay + if δw < 10.0 || δh < 10.0 then + 100.0 # Milliseconds + else + 10.0 # Milliseconds + liftEffect do -- force rerender + refs ← traverse (const createRef) buttonContents + setItemRefs (Just refs) + setWindowSize windowSize + let + children ∷ Array JSX + children = refsAndContents <#> mapWithIndex contentToChild # maybe + mempty + TwoOrMore.toArray - contentToChild ∷ Int -> (Item /\ Ref (Nullable Node)) -> JSX - contentToChild idx ({ id, value } /\ ref) = do - let isLast = idx + 1 == TwoOrMore.length buttonContents - let isFirst = idx == 0 - button' - itemRefs + + contentToChild ∷ Int → (Item /\ Ref (Nullable Node)) → JSX + contentToChild idx ({ id, value } /\ ref) = do + let isLast = idx + 1 == TwoOrMore.length buttonContents + let isFirst = idx == 0 + button' + - [ span' - + [ span' + + [ R.text value + ] + ] + pure + $ E.element R.div' + $ + { css: Style.cluster + , className: "ry-segmented-container" + , children: + [ E.element R.div' + { className: "ry-segmented" + , css: Style.segmented + , role: "tablist" + , children: + itemRefs + # foldMap \activeItemRefs → + React.element ActiveIndicator.component + { activeItemRefs + , activeItemIndex: activeIndex + , buttonContents + , updateActiveItem + , windowSize + } + A.: children } - /> - [ R.text value - ] - ] - pure - $ E.element R.div' - $ - { css: Style.cluster - , className: "ry-segmented-container" - , children: - [ E.element R.div' - { className: "ry-segmented" - , css: Style.segmented - , role: "tablist" - , children: - itemRefs - # foldMap \activeItemRefs -> - React.element ActiveIndicator.component - { activeItemRefs - , activeItemIndex: activeIndex - , buttonContents - , updateActiveItem - , windowSize - } - A.: children - } - ] - } + ] + } -getHTMLElementAtIndex ∷ Int -> TwoOrMore (NodeRef) -> Effect (Maybe HTMLElement) +getHTMLElementAtIndex ∷ Int → TwoOrMore (NodeRef) → Effect (Maybe HTMLElement) getHTMLElementAtIndex idx refs = runMaybeT do - ref <- refs TwoOrMore.!! idx # pure >>> wrap - node <- React.readRefMaybe ref # wrap + ref ← refs TwoOrMore.!! idx # pure >>> wrap + node ← React.readRefMaybe ref # wrap HTMLElement.fromNode node # pure >>> wrap -blurAtIndex ∷ Int -> TwoOrMore (Ref (Nullable Node)) -> Effect Unit +blurAtIndex ∷ Int → TwoOrMore (Ref (Nullable Node)) → Effect Unit blurAtIndex idx refs = do getHTMLElementAtIndex idx refs >>= traverse_ blur -focusAtIndex ∷ Int -> TwoOrMore (Ref (Nullable Node)) -> Effect Unit +focusAtIndex ∷ Int → TwoOrMore (Ref (Nullable Node)) → Effect Unit focusAtIndex idx refs = do getHTMLElementAtIndex idx refs >>= traverse_ focus diff --git a/src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs b/src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs index 290bc22..264b471 100644 --- a/src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs +++ b/src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs @@ -29,7 +29,7 @@ type Props = { activeItemRefs ∷ TwoOrMore (Ref (Nullable Node)) , buttonContents ∷ TwoOrMore Item , activeItemIndex ∷ Int - , updateActiveItem ∷ Item -> Int -> Effect Unit + , updateActiveItem ∷ Item → Int → Effect Unit , windowSize ∷ UseWindowResize.Sizes } @@ -37,29 +37,34 @@ component ∷ ReactComponent Props component = unsafePerformEffect $ reactComponent "SegmentedActive" do - \(props ∷ Props) -> React.do - maybeAnimationVariants /\ setVariants <- useState' Nothing - variantIndex /\ modVariantIndex <- useState props.activeItemIndex - maybeDragXRef <- useRef Nothing - { scrollX, scrollY } <- useScrollPosition - activeLeft <- useMotionValue 0.0 - activeWidth <- useMotionValue 0.0 + \(props ∷ Props) → React.do + maybeAnimationVariants /\ setVariants ← useState' Nothing + variantIndex /\ modVariantIndex ← useState props.activeItemIndex + maybeDragXRef ← useRef Nothing + { scrollX, scrollY } ← useScrollPosition + activeLeft ← useMotionValue 0.0 + activeWidth ← useMotionValue 0.0 useEffectAlways do - _ <- do - styles <- getStyles props.activeItemRefs + _ ← do + styles ← getStyles props.activeItemRefs unless (maybeAnimationVariants == Just styles) do setVariants (Just styles) mempty let setDragXRef new = do writeRef maybeDragXRef new - maybeDragX <- readRef maybeDragXRef + maybeDragX ← readRef maybeDragXRef case maybeDragX, maybeAnimationVariants of - Just x, Just animationVariants -> do - let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x } + Just x, Just animationVariants → do + let + { left, width } = handleDrag + { activeItemIndex: props.activeItemIndex + , animationVariants + , x + } activeLeft # MotionValue.set left activeWidth # MotionValue.set width - _, _ -> mempty + _, _ → mempty useEffect props.activeItemIndex do modVariantIndex (const props.activeItemIndex) mempty @@ -74,14 +79,14 @@ component = let variants ∷ Motion.Variants variants = case maybeAnimationVariants of - Just animationVariants -> + Just animationVariants → animationVariants # foldMapWithIndex - (\i s -> Object.singleton (show i) (css s)) + (\i s → Object.singleton (show i) (css s)) # Motion.variantsFromObject - Nothing -> cast undefined + Nothing → cast undefined pure $ maybeAnimationVariants - # foldMap \animationVariants -> + # foldMap \animationVariants → Emotion.element R.div' { className: "ry-active-segmented-element-wrapper" , css: Style.activeElementWrapper @@ -89,57 +94,76 @@ component = [ Emotion.element Motion.div { css: Style.activeElement , layout: Motion.layout true - , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom) + , custom: Motion.customProp + ( ( { childRefs: props.activeItemRefs + , scrollX + , scrollY + } + ) ∷ Custom + ) , variants , className: "ry-active-segmented-element" - , initial: Motion.initial $ indexToVariant props.activeItemIndex + , initial: Motion.initial $ indexToVariant + props.activeItemIndex , drag: Motion.drag "x" , dragMomentum: Motion.dragMomentum false - , animate: Motion.animate $ indexToVariant variantIndex + , animate: Motion.animate $ indexToVariant + variantIndex , style: css { left: activeLeft , width: activeWidth } - , whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 } + , whileTap: Motion.whileTap $ css + { scaleY: 0.8, scaleX: 0.95, y: -1.0 } , onDragStart: - Motion.onDragStart \_ pi -> do - maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs) - for_ maybeBbox \bbox -> + Motion.onDragStart \_ pi → do + maybeBbox ← getBoundingBoxFromRef + (TwoOrMore.head props.activeItemRefs) + for_ maybeBbox \bbox → setDragXRef (Just (pi.point.x - bbox.left)) , onDrag: - Motion.onDrag \_ pi -> do - maybeDragX <- readRef maybeDragXRef + Motion.onDrag \_ pi → do + maybeDragX ← readRef maybeDragXRef when (isJust maybeDragX) do - maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs) - for_ maybeBbox \bbox -> + maybeBbox ← getBoundingBoxFromRef + (TwoOrMore.head props.activeItemRefs) + for_ maybeBbox \bbox → setDragXRef (Just (pi.point.x - bbox.left)) , onDragEnd: - Motion.onDragEnd \_ _ -> do - maybeDragX <- readRef maybeDragXRef + Motion.onDragEnd \_ _ → do + maybeDragX ← readRef maybeDragXRef let - x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x" + x = maybeDragX # fromMaybe' \_ → + unsafeCrashWith "no x" newIdx = findOverlapping props.activeItemIndex animationVariants x newItem = fromMaybe' - (\_ -> TwoOrMore.head props.buttonContents) + (\_ → TwoOrMore.head props.buttonContents) (props.buttonContents TwoOrMore.!! newIdx) v = animationVariants TwoOrMore.!! newIdx - # fromMaybe' \_ -> unsafeCrashWith "omg" + # fromMaybe' \_ → unsafeCrashWith "omg" activeLeft # MotionValue.set v.left activeWidth # MotionValue.set v.width props.updateActiveItem newItem newIdx writeRef maybeDragXRef Nothing , dragElastic: Motion.dragElastic false - , dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 } + , dragConstraints: Motion.dragConstraintsBoundingBox + { left: 0, right: 0, top: 0, bottom: 0 } , transition: Motion.transition { type: "tween" - , duration: if isJust (unsafePerformEffect (readRef maybeDragXRef)) then 0.0 else 0.167 + , duration: + if + isJust + ( unsafePerformEffect + (readRef maybeDragXRef) + ) then 0.0 + else 0.167 , ease: "easeOut" } , _aria: Object.fromHomogeneous { hidden: "true" } @@ -147,13 +171,15 @@ component = ] } -getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox) +getStyles ∷ TwoOrMore (Ref (Nullable Node)) → Effect (TwoOrMore BBox) getStyles itemRefs = do - maybeBBs ∷ TwoOrMore (Maybe DOMRect) <- traverse getBoundingBoxFromRef itemRefs - let boundingBoxes = maybeBBs <#> (_ # fromMaybe' \_ -> unsafeCrashWith "something's wrong") + maybeBBs ∷ TwoOrMore (Maybe DOMRect) ← traverse getBoundingBoxFromRef itemRefs + let + boundingBoxes = maybeBBs <#> + (_ # fromMaybe' \_ → unsafeCrashWith "something's wrong") pure (boundingBoxes # map (fn boundingBoxes)) where - fn ∷ TwoOrMore DOMRect -> DOMRect -> BBox + fn ∷ TwoOrMore DOMRect → DOMRect → BBox fn boundingBoxes bb = do let first = TwoOrMore.head boundingBoxes { width: bb.width @@ -165,34 +191,36 @@ getStyles itemRefs = do type Custom = { childRefs ∷ TwoOrMore NodeRef, scrollX ∷ Number, scrollY ∷ Number } -indexToVariant ∷ Int -> VariantLabel +indexToVariant ∷ Int → VariantLabel indexToVariant = show >>> unsafeCoerce type BBox = { top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number } -findOverlapping ∷ Int -> TwoOrMore BBox -> Number -> Int +findOverlapping ∷ Int → TwoOrMore BBox → Number → Int findOverlapping activeIndex styles x = fromMaybe activeIndex do let fst = TwoOrMore.head styles let lst = TwoOrMore.last styles let inside e = (e.left < x) && (e.left + e.width) >= x let tooFarLeft = Alternative.guard (x <= fst.left + fst.width) $> 0 - let tooFarRight = Alternative.guard (x >= lst.left) $> TwoOrMore.length styles - 1 + let + tooFarRight = Alternative.guard (x >= lst.left) $> TwoOrMore.length styles + - 1 TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight -handleDrag - ∷ { activeItemIndex ∷ Int - , animationVariants ∷ TwoOrMore BBox - , x ∷ Number - } - -> { left ∷ Number, width ∷ Number } +handleDrag ∷ + { activeItemIndex ∷ Int + , animationVariants ∷ TwoOrMore BBox + , x ∷ Number + } → + { left ∷ Number, width ∷ Number } handleDrag { x, activeItemIndex, animationVariants } = do let idx = findOverlapping activeItemIndex animationVariants x let av = animationVariants let firstVariant = av # TwoOrMore.head let lastVariant = av # TwoOrMore.last - let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit" + let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ → unsafeCrashWith "shit" let closestVariant = if x >= (baseVariant.left + (baseVariant.width / 2.0)) then @@ -210,17 +238,21 @@ handleDrag { x, activeItemIndex, animationVariants } = do let rangeEnd = greater.left + greater.width / 2.0 let range = rangeEnd - rangeStart let ratio = ((x - rangeStart) / range) - let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio) + let + interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio) -- Right let rangeStartRight = smaller.left + smaller.width let rangeEndRight = greater.left + greater.width let rangeRight = rangeEndRight - rangeStartRight - let ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight) + let + ratioRight = + ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight) -- Left let rangeStartLeft = smaller.left let rangeEndLeft = greater.left let rangeLeft = rangeEndLeft - rangeStartLeft - let ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft) + let + ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft) -- Individual let left = rangeStartLeft + (ratioLeft * rangeLeft) let right = rangeStartRight + (ratioRight * rangeRight) diff --git a/src/Yoga/Block/Atom/Select/View.purs b/src/Yoga/Block/Atom/Select/View.purs index ec1b222..b37f2de 100644 --- a/src/Yoga/Block/Atom/Select/View.purs +++ b/src/Yoga/Block/Atom/Select/View.purs @@ -30,7 +30,7 @@ component = unsafePerformEffect do , onChange: handler targetValue \maybeVal → traverse_ onChange do val ← maybeVal - choices # Array.find (toString >>> (_ == val)) + choices # Array.find (toValue >>> (_ == val)) } /> diff --git a/src/Yoga/Block/Atom/Toggle/Spec.purs b/src/Yoga/Block/Atom/Toggle/Spec.purs index 65f2042..5f914b0 100644 --- a/src/Yoga/Block/Atom/Toggle/Spec.purs +++ b/src/Yoga/Block/Atom/Toggle/Spec.purs @@ -15,12 +15,12 @@ spec = , ariaLabel: "Example Toggle" } it "has an aria-label" do - { findByRole } <- + { findByRole } ← renderComponent Toggle.component { value: ToggleIsLeft , ariaLabel: "Example Toggle" } - elem <- findByRole "switch" + elem ← findByRole "switch" shouldHaveAttributeWithValue elem "aria-label" diff --git a/src/Yoga/Block/Atom/Toggle/Story.purs b/src/Yoga/Block/Atom/Toggle/Story.purs index 0ffaefe..4a6978e 100644 --- a/src/Yoga/Block/Atom/Toggle/Story.purs +++ b/src/Yoga/Block/Atom/Toggle/Story.purs @@ -23,8 +23,8 @@ default = toggle ∷ Effect JSX toggle = do - example <- mkBasicExample - darkLight <- mkDarkLightToggle + example ← mkBasicExample + darkLight ← mkDarkLightToggle pure $ fragment [ R.div_ @@ -36,8 +36,8 @@ toggle = do ] where mkBasicExample = - React.reactComponent "Toggle example" \_p -> React.do - togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight + React.reactComponent "Toggle example" \_p → React.do + togglePosition /\ setTogglePosition ← React.useState' ToggleIsRight pure $ element Toggle.component { value: togglePosition @@ -46,28 +46,28 @@ toggle = do } mkDarkLightToggle = - React.reactComponent "Toggle dark night example" \_p -> React.do - togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft - theme /\ setTheme <- React.useState' Nothing + React.reactComponent "Toggle dark night example" \_p → React.do + togglePosition /\ setTogglePosition ← React.useState' ToggleIsLeft + theme /\ setTheme ← React.useState' Nothing let content = element Toggle.component { value: togglePosition , ariaLabel: "dark-light-toggle" , onChange: - \newTogglePosition -> do - setTogglePosition newTogglePosition - setTheme case newTogglePosition of - ToggleIsRight -> Just DarkMode - ToggleIsLeft -> Just LightMode + \newTogglePosition → do + setTogglePosition newTogglePosition + setTheme case newTogglePosition of + ToggleIsRight → Just DarkMode + ToggleIsLeft → Just LightMode , left: R.text "🌒" , right: R.text "🌞" , backgroundLeft: - Color.hsl 205.0 1.0 0.83 + Color.hsl 205.0 1.0 0.83 , backgroundRight: - Color.hsl 260.0 0.7 0.45 + Color.hsl 260.0 0.7 0.45 } pure $ Block.container - [ content ] + [ content ] diff --git a/src/Yoga/Block/Atom/Toggle/Types.purs b/src/Yoga/Block/Atom/Toggle/Types.purs index 6fede17..3be05c4 100644 --- a/src/Yoga/Block/Atom/Toggle/Types.purs +++ b/src/Yoga/Block/Atom/Toggle/Types.purs @@ -10,10 +10,10 @@ derive instance eqTogglePosition ∷ Eq TogglePosition instance showTogglePosition ∷ Show TogglePosition where show = case _ of - ToggleIsLeft -> "ToggleIsLeft" - ToggleIsRight -> "ToggleIsRight" + ToggleIsLeft → "ToggleIsLeft" + ToggleIsRight → "ToggleIsRight" -flipToggle ∷ TogglePosition -> TogglePosition +flipToggle ∷ TogglePosition → TogglePosition flipToggle = case _ of - ToggleIsLeft -> ToggleIsRight - ToggleIsRight -> ToggleIsLeft + ToggleIsLeft → ToggleIsRight + ToggleIsRight → ToggleIsLeft diff --git a/src/Yoga/Block/Container/Spec.purs b/src/Yoga/Block/Container/Spec.purs index 8e8f501..5e4c07f 100644 --- a/src/Yoga/Block/Container/Spec.purs +++ b/src/Yoga/Block/Container/Spec.purs @@ -12,6 +12,7 @@ spec = void $ renderComponent Container.component {} it "displays its children" do let content = R.text "Test Text" - { findByText } <- renderComponent Container.component { children: [ content ] } - elem <- findByText "Test Text" + { findByText } ← renderComponent Container.component + { children: [ content ] } + elem ← findByText "Test Text" elem `textContentShouldEqual` "Test Text" diff --git a/src/Yoga/Block/Container/Story.purs b/src/Yoga/Block/Container/Story.purs index 719f1e4..e84da7b 100644 --- a/src/Yoga/Block/Container/Story.purs +++ b/src/Yoga/Block/Container/Story.purs @@ -23,16 +23,39 @@ container = pure ( element Container.component { children: - [ el Box.component { style: css { background: colour.backgroundLayer1 } } - [ el Box.component { style: css { background: colour.backgroundLayer2 } } - [ el Box.component { style: css { background: colour.backgroundLayer3 } } - [ el Box.component { style: css { background: colour.backgroundLayer4 } } - [ el Box.component { style: css { background: colour.backgroundLayer5 } } - [ R.div { style: css { color: colour.text }, children: [ R.text "Text" ] } - , R.div { style: css { color: colour.textPaler1 }, children: [ R.text "Text Paler 1" ] } - , R.div { style: css { color: colour.textPaler2 }, children: [ R.text "Text Paler 2" ] } - , R.div { style: css { color: colour.textPaler3 }, children: [ R.text "Text Paler 3" ] } - , R.div { style: css { color: colour.textPaler4 }, children: [ R.text "Text Paler 4" ] } + [ el Box.component + { style: css { background: colour.backgroundLayer1 } } + [ el Box.component + { style: css { background: colour.backgroundLayer2 } } + [ el Box.component + { style: css { background: colour.backgroundLayer3 } } + [ el Box.component + { style: css { background: colour.backgroundLayer4 } + } + [ el Box.component + { style: css + { background: colour.backgroundLayer5 } + } + [ R.div + { style: css { color: colour.text } + , children: [ R.text "Text" ] + } + , R.div + { style: css { color: colour.textPaler1 } + , children: [ R.text "Text Paler 1" ] + } + , R.div + { style: css { color: colour.textPaler2 } + , children: [ R.text "Text Paler 2" ] + } + , R.div + { style: css { color: colour.textPaler3 } + , children: [ R.text "Text Paler 3" ] + } + , R.div + { style: css { color: colour.textPaler4 } + , children: [ R.text "Text Paler 4" ] + } ] ] ] @@ -63,7 +86,11 @@ container = { style: css { background: - "linear-gradient(90deg," <> colour.highlightRotatedForwards <> "," <> colour.highlightRotatedBackwards <> ")" + "linear-gradient(90deg," + <> colour.highlightRotatedForwards + <> "," + <> colour.highlightRotatedBackwards + <> ")" , color: colour.highlightText } } @@ -73,34 +100,42 @@ container = , padding: E.px 1 , css: E.css - { background: E.str "linear-gradient(90deg, rgb(32, 37, 63) 0%, rgb(118, 74, 151) 15%, rgb(71, 107, 169) 20%, rgb(85, 167, 177) 29%, rgb(85, 167, 177) 32%, rgb(32, 37, 63) 40%, rgb(32, 37, 63) 50%, rgb(118, 74, 151) 60%, rgb(71, 107, 169) 70%, rgb(85, 167, 177) 80%, rgb(32, 37, 63) 100%)" + { background: E.str + "linear-gradient(90deg, rgb(32, 37, 63) 0%, rgb(118, 74, 151) 15%, rgb(71, 107, 169) 20%, rgb(85, 167, 177) 29%, rgb(85, 167, 177) 32%, rgb(32, 37, 63) 40%, rgb(32, 37, 63) 50%, rgb(118, 74, 151) 60%, rgb(71, 107, 169) 70%, rgb(85, 167, 177) 80%, rgb(32, 37, 63) 100%)" , backgroundSize: E.percent 500.0 - , animation: E.str "15s linear 0s infinite normal none running" + , animation: E.str + "15s linear 0s infinite normal none running" , animationName: E.keyframes - { "0%": E.css { backgroundPosition: E.str "0% center" } - , "100%": E.css { backgroundPosition: E.str "500% center" } + { "0%": E.css + { backgroundPosition: E.str "0% center" } + , "100%": E.css + { backgroundPosition: E.str "500% center" } } , color: E.str colour.highlightText , overflow: E.hidden , "&::before": E.nested $ E.css - { content: E.str $ "'" <> (power "Shiny boy " 50 <> "'") + { content: E.str $ "'" <> + (power "Shiny boy " 50 <> "'") , letterSpacing: E.str "4px" , backgroundRepeat: E.str "repeat-x" , whiteSpace: E.nowrap , fontSize: E.str "12px" , overflow: E.hidden - , animation: E.str "5s linear 0s infinite normal none running" + , animation: E.str + "5s linear 0s infinite normal none running" , left: E.px 0 , fontWeight: E.str "800" , position: E.relative , height: E.px 20 , animationName: E.keyframes - { "100%": E.css { left: E.str "calc(-100%)" } - , "0%": E.css { left: E.str "calc(0%)" } + { "100%": E.css + { left: E.str "calc(-100%)" } + , "0%": E.css + { left: E.str "calc(0%)" } } } } @@ -137,12 +172,17 @@ container = , psParagraph , R.h3_ [ R.text "Third largest heading (h3)" ] , psParagraph - , R.p_ [ R.text "Make sure to have the following meta tag in your head" ] + , R.p_ + [ R.text "Make sure to have the following meta tag in your head" + ] , R.code_ [ R.text """""" ] - , R.h1_ [ R.text "Very long largest heading that can result in multiple lines" ] + , R.h1_ + [ R.text + "Very long largest heading that can result in multiple lines" + ] ] } ) diff --git a/src/Yoga/Block/Hook/Key.purs b/src/Yoga/Block/Hook/Key.purs index 574a1ce..4db21fd 100644 --- a/src/Yoga/Block/Hook/Key.purs +++ b/src/Yoga/Block/Hook/Key.purs @@ -10,12 +10,13 @@ import Data.Tuple.Nested ((/\)) import Web.UIEvent.KeyboardEvent (KeyboardEvent) import Web.UIEvent.KeyboardEvent as KeyboardEvent -foreign import getKeyImpl ∷ ∀ a. (a -> Maybe a) -> Maybe a -> KeyboardEvent -> Maybe Int +foreign import getKeyImpl ∷ + ∀ a. (a → Maybe a) → Maybe a → KeyboardEvent → Maybe Int -getKeyCode ∷ KeyboardEvent -> Maybe Int +getKeyCode ∷ KeyboardEvent → Maybe Int getKeyCode = getKeyImpl Just Nothing -getModifiers :: KeyboardEvent -> Set Modifier +getModifiers ∷ KeyboardEvent → Set Modifier getModifiers event = foldl fn Set.empty [ KeyboardEvent.metaKey /\ Command @@ -54,31 +55,31 @@ data KeyCode derive instance Eq KeyCode derive instance Ord KeyCode -keyCodeToInt ∷ KeyCode -> Int +keyCodeToInt ∷ KeyCode → Int keyCodeToInt = case _ of - Backspace -> 8 - Tab -> 9 - Return -> 13 - Escape -> 27 - End -> 35 - Home -> 36 - Left -> 37 - Up -> 38 - Right -> 39 - Down -> 40 - Delete -> 46 + Backspace → 8 + Tab → 9 + Return → 13 + Escape → 27 + End → 35 + Home → 36 + Left → 37 + Up → 38 + Right → 39 + Down → 40 + Delete → 46 -intToKeyCode ∷ Int -> Maybe KeyCode +intToKeyCode ∷ Int → Maybe KeyCode intToKeyCode = case _ of - 8 -> Just Backspace - 9 -> Just Tab - 13 -> Just Return - 27 -> Just Escape - 35 -> Just End - 36 -> Just Home - 37 -> Just Left - 38 -> Just Up - 39 -> Just Right - 40 -> Just Down - 46 -> Just Delete - _ -> Nothing + 8 → Just Backspace + 9 → Just Tab + 13 → Just Return + 27 → Just Escape + 35 → Just End + 36 → Just Home + 37 → Just Left + 38 → Just Up + 39 → Just Right + 40 → Just Down + 46 → Just Delete + _ → Nothing diff --git a/src/Yoga/Block/Hook/Scroll.purs b/src/Yoga/Block/Hook/Scroll.purs index 3cdd448..432efad 100644 --- a/src/Yoga/Block/Hook/Scroll.purs +++ b/src/Yoga/Block/Hook/Scroll.purs @@ -14,25 +14,26 @@ import Web.HTML.Window (toEventTarget) eventType ∷ EventType eventType = EventType "scroll" -registerListener ∷ EventListener -> Effect (Effect Unit) +registerListener ∷ EventListener → Effect (Effect Unit) registerListener listener = do - target <- window <#> toEventTarget + target ← window <#> toEventTarget addEventListener eventType listener false target pure $ removeEventListener eventType listener false target -newtype UseScrollPosition hooks - = UseScrollPosition (UseLayoutEffect Unit (UseState ScrollPosition hooks)) +newtype UseScrollPosition hooks = UseScrollPosition + (UseLayoutEffect Unit (UseState ScrollPosition hooks)) + derive instance ntUseScrollPosition ∷ Newtype (UseScrollPosition hooks) _ -type ScrollPosition - = { scrollX ∷ Number, scrollY ∷ Number } +type ScrollPosition = { scrollX ∷ Number, scrollY ∷ Number } useScrollPosition ∷ Hook UseScrollPosition ScrollPosition useScrollPosition = coerceHook React.do - scroll /\ setScroll <- useState' zero + scroll /\ setScroll ← useState' zero useLayoutEffectAlways $ makeListener setScroll >>= registerListener pure scroll -makeListener ∷ (ScrollPosition -> Effect Unit) -> Effect EventListener -makeListener setScroll = eventListener (const (window <#> unsafeCoerce >>= setScroll)) +makeListener ∷ (ScrollPosition → Effect Unit) → Effect EventListener +makeListener setScroll = eventListener + (const (window <#> unsafeCoerce >>= setScroll)) diff --git a/src/Yoga/Block/Hook/UseDocumentSize.purs b/src/Yoga/Block/Hook/UseDocumentSize.purs index eb579d2..2211803 100644 --- a/src/Yoga/Block/Hook/UseDocumentSize.purs +++ b/src/Yoga/Block/Hook/UseDocumentSize.purs @@ -24,17 +24,17 @@ derive instance newtypeUseDocumentSize ∷ Newtype (UseDocumentSize hooks) _ useDocumentSize ∷ Hook UseDocumentSize DocumentSize useDocumentSize = coerceHook React.do - scrollDimensions /\ setScrollDimensions <- React.useState' one + scrollDimensions /\ setScrollDimensions ← React.useState' one React.useLayoutEffectAlways do - window <- HTML.window - htmlDocument <- Window.document window + window ← HTML.window + htmlDocument ← Window.document window let document = HTMLDocument.toDocument htmlDocument - scrollDimensions' <- do - maybeDocumentElement <- Document.documentElement document + scrollDimensions' ← do + maybeDocumentElement ← Document.documentElement document maybeDocumentElement - # maybe (pure zero) \documentElement -> do - scrollWidth <- Element.scrollWidth documentElement - scrollHeight <- Element.scrollHeight documentElement + # maybe (pure zero) \documentElement → do + scrollWidth ← Element.scrollWidth documentElement + scrollHeight ← Element.scrollHeight documentElement pure { scrollWidth, scrollHeight } unless (scrollDimensions' == scrollDimensions) do setScrollDimensions scrollDimensions' diff --git a/src/Yoga/Block/Hook/UseDrip.purs b/src/Yoga/Block/Hook/UseDrip.purs index 4f2da35..f0e5052 100644 --- a/src/Yoga/Block/Hook/UseDrip.purs +++ b/src/Yoga/Block/Hook/UseDrip.purs @@ -7,11 +7,11 @@ import React.Basic.DOM.Events (clientX, clientY) import React.Basic.Hooks as React type DripReturn = - { visible :: Boolean - , x :: Number - , y :: Number - , onClick :: EventHandler - , onComplete :: Effect Unit + { visible ∷ Boolean + , x ∷ Number + , y ∷ Number + , onClick ∷ EventHandler + , onComplete ∷ Effect Unit } newtype UseDrip hooks = UseDrip @@ -19,11 +19,11 @@ newtype UseDrip hooks = UseDrip derive instance Newtype (UseDrip hooks) _ -useDrip :: NodeRef -> Hook UseDrip DripReturn +useDrip ∷ NodeRef → Hook UseDrip DripReturn useDrip ref = coerceHook React.do - visible /\ setVisible <- React.useState' false - x /\ setX <- React.useState' zero - y /\ setY <- React.useState' zero + visible /\ setVisible ← React.useState' false + x /\ setX ← React.useState' zero + y /\ setY ← React.useState' zero let dripCompletedHandle = do @@ -32,18 +32,19 @@ useDrip ref = coerceHook React.do setY zero let - clickHandler = handler (merge { clientX, clientY }) \{ clientX, clientY } -> do - bbʔ <- getBoundingBoxFromRef ref - let - valuesʔ = ado - { left, top } <- bbʔ - cx <- clientX - cy <- clientY - in { left, top, cx, cy } - for_ valuesʔ \{ cx, cy, left, top } -> do - setVisible true - setX (cx - left) - setY (cy - top) + clickHandler = handler (merge { clientX, clientY }) \{ clientX, clientY } → + do + bbʔ ← getBoundingBoxFromRef ref + let + valuesʔ = ado + { left, top } ← bbʔ + cx ← clientX + cy ← clientY + in { left, top, cx, cy } + for_ valuesʔ \{ cx, cy, left, top } → do + setVisible true + setX (cx - left) + setY (cy - top) pure { visible: visible diff --git a/src/Yoga/Block/Hook/UseElementResize.purs b/src/Yoga/Block/Hook/UseElementResize.purs index 2648787..3b8d297 100644 --- a/src/Yoga/Block/Hook/UseElementResize.purs +++ b/src/Yoga/Block/Hook/UseElementResize.purs @@ -15,18 +15,19 @@ newtype UseOnElementResizeWithRef hooks = UseOnElementResizeWithRef derive instance Newtype (UseOnElementResizeWithRef hooks) _ -type OnResize = { old :: DOMRect, new :: DOMRect } -> Effect Unit +type OnResize = { old ∷ DOMRect, new ∷ DOMRect } → Effect Unit -useOnElementResizeWithRef ∷ NodeRef -> OnResize -> Hook UseOnElementResizeWithRef Unit +useOnElementResizeWithRef ∷ + NodeRef → OnResize → Hook UseOnElementResizeWithRef Unit useOnElementResizeWithRef ref onResize = coerceHook React.do useLayoutEffectOnce do - elʔ <- getElementFromRef ref + elʔ ← getElementFromRef ref case elʔ of - Nothing -> mempty - Just elem -> do - observer <- resizeObserver \entries _ -> do - Array.head entries # traverse_ \{ contentRect: new } -> do - getBoundingClientRect elem >>= \old -> + Nothing → mempty + Just elem → do + observer ← resizeObserver \entries _ → do + Array.head entries # traverse_ \{ contentRect: new } → do + getBoundingClientRect elem >>= \old → onResize { old, new } observe ContentBox observer elem pure (unobserve observer elem) @@ -36,8 +37,8 @@ newtype UseOnElementResize hooks = UseOnElementResize derive instance Newtype (UseOnElementResize hooks) _ -useOnElementResize ∷ OnResize -> Hook UseOnElementResize NodeRef +useOnElementResize ∷ OnResize → Hook UseOnElementResize NodeRef useOnElementResize onResize = coerceHook React.do - ref <- React.useRef null + ref ← React.useRef null useOnElementResizeWithRef ref onResize pure ref diff --git a/src/Yoga/Block/Hook/UseInView.purs b/src/Yoga/Block/Hook/UseInView.purs index 9adc2e2..1c53c19 100644 --- a/src/Yoga/Block/Hook/UseInView.purs +++ b/src/Yoga/Block/Hook/UseInView.purs @@ -16,36 +16,37 @@ foreign import data IntersectionObserverEntry ∷ Type foreign import data UseInView ∷ Type → Type -type IntersectionOptions - = ( root :: Element - , rootMargin :: String - , threshold :: Number - , triggerOnce :: Boolean - , skip :: Boolean - , initialInView :: Boolean - , trackVisibility :: Boolean - , delay :: Milliseconds - ) +type IntersectionOptions = + ( root ∷ Element + , rootMargin ∷ String + , threshold ∷ Number + , triggerOnce ∷ Boolean + , skip ∷ Boolean + , initialInView ∷ Boolean + , trackVisibility ∷ Boolean + , delay ∷ Milliseconds + ) -type InViewResultImpl - = { inView :: Boolean - , ref :: NodeRef -- not true - , entry :: UndefinedOr (Nullable IntersectionObserverEntry) - } +type InViewResultImpl = + { inView ∷ Boolean + , ref ∷ NodeRef -- not true + , entry ∷ UndefinedOr (Nullable IntersectionObserverEntry) + } -type InViewResult - = { inView :: Boolean - , ref :: NodeRef -- not true - , entry :: Maybe IntersectionObserverEntry - } +type InViewResult = + { inView ∷ Boolean + , ref ∷ NodeRef -- not true + , entry ∷ Maybe IntersectionObserverEntry + } -foreign import useInViewImpl :: forall r. EffectFn1 { | r } InViewResultImpl +foreign import useInViewImpl ∷ ∀ r. EffectFn1 { | r } InViewResultImpl -useInView :: +useInView ∷ ∀ p p_. Union p p_ IntersectionOptions ⇒ - { | p } -> Hook UseInView InViewResult + { | p } → + Hook UseInView InViewResult useInView props = unsafeHook $ runEffectFn1 useInViewImpl props - <#> \x -> x { entry = uorToMaybe x.entry >>= Nullable.toMaybe } + <#> \x → x { entry = uorToMaybe x.entry >>= Nullable.toMaybe } diff --git a/src/Yoga/Block/Hook/UseKeyDown.purs b/src/Yoga/Block/Hook/UseKeyDown.purs index f916983..3c3b13a 100644 --- a/src/Yoga/Block/Hook/UseKeyDown.purs +++ b/src/Yoga/Block/Hook/UseKeyDown.purs @@ -21,19 +21,21 @@ newtype UseKeyDown hooks = UseKeyDown derive instance Newtype (UseKeyDown hooks) _ -useKeyDown ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyDown Unit +useKeyDown ∷ + (KeyboardEvent → Set Modifier → KeyCode → Effect Unit) → Hook UseKeyDown Unit useKeyDown doWhat = do coerceHook React.do useEffectAlways do - listener <- - eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do + listener ← + eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event → do let modifiers = getModifiers event case getKeyCode event >>= intToKeyCode of - Just keyCode -> doWhat event modifiers keyCode - Nothing -> pure unit - win <- window + Just keyCode → doWhat event modifiers keyCode + Nothing → pure unit + win ← window addEventListener eventTypeKeyDown listener false (Win.toEventTarget win) - pure $ removeEventListener eventTypeKeyDown listener false (Win.toEventTarget win) + pure $ removeEventListener eventTypeKeyDown listener false + (Win.toEventTarget win) eventTypeKeyDown ∷ EventType eventTypeKeyDown = EventType "keydown" diff --git a/src/Yoga/Block/Hook/UseKeyUp.purs b/src/Yoga/Block/Hook/UseKeyUp.purs index 517e017..fffb7e2 100644 --- a/src/Yoga/Block/Hook/UseKeyUp.purs +++ b/src/Yoga/Block/Hook/UseKeyUp.purs @@ -21,19 +21,23 @@ newtype UseKeyUp hooks = UseKeyUp derive instance Newtype (UseKeyUp hooks) _ -useKeyUp ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyUp Unit +useKeyUp ∷ + (KeyboardEvent → Set Modifier → KeyCode → Effect Unit) → Hook UseKeyUp Unit useKeyUp doWhat = do coerceHook React.do useEffectOnce do - listener <- - eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do + listener ← + eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event → do let modifiers = getModifiers event case getKeyCode event >>= intToKeyCode of - Just keyCode -> doWhat event modifiers keyCode - Nothing -> pure unit - win <- window + Just keyCode → doWhat event modifiers keyCode + Nothing → pure unit + win ← window addEventListener eventTypeKeyUp listener false (Win.toEventTarget win) - pure (removeEventListener eventTypeKeyUp listener false (Win.toEventTarget win)) + pure + ( removeEventListener eventTypeKeyUp listener false + (Win.toEventTarget win) + ) eventTypeKeyUp ∷ EventType eventTypeKeyUp = EventType "keyup" diff --git a/src/Yoga/Block/Hook/UseMediaQuery.purs b/src/Yoga/Block/Hook/UseMediaQuery.purs index 9ce8475..8424341 100644 --- a/src/Yoga/Block/Hook/UseMediaQuery.purs +++ b/src/Yoga/Block/Hook/UseMediaQuery.purs @@ -18,17 +18,17 @@ newtype UseMediaQuery hooks = UseMediaQuery derive instance Newtype (UseMediaQuery hooks) _ -useMediaQuery :: String -> Hook UseMediaQuery Boolean +useMediaQuery ∷ String → Hook UseMediaQuery Boolean useMediaQuery query = coerceHook React.do let check = window >>= matchMedia query >>= matches - queryMatches /\ setMatches <- + queryMatches /\ setMatches ← React.useState' (unsafePerformEffect check) React.useEffect query do - queryList <- window >>= matchMedia query + queryList ← window >>= matchMedia query let target = MQL.toEventTarget queryList - listener <- eventListener (const (check >>= setMatches)) + listener ← eventListener (const (check >>= setMatches)) addEventListener Event.change listener true target pure do removeEventListener Event.change listener true target diff --git a/src/Yoga/Block/Hook/UseResize2.purs b/src/Yoga/Block/Hook/UseResize2.purs index e949231..a66e8f6 100644 --- a/src/Yoga/Block/Hook/UseResize2.purs +++ b/src/Yoga/Block/Hook/UseResize2.purs @@ -67,18 +67,18 @@ newtype UseOnResize hooks = UseOnResize derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _ -useOnResize - ∷ ∀ d - . Duration d - ⇒ d - → ( { innerWidth ∷ Number - , innerHeight ∷ Number - , deltaWidth ∷ Number - , deltaHeight ∷ Number - } - → Effect Unit - ) - → Hook UseOnResize Unit +useOnResize ∷ + ∀ d. + Duration d ⇒ + d → + ( { innerWidth ∷ Number + , innerHeight ∷ Number + , deltaWidth ∷ Number + , deltaHeight ∷ Number + } → + Effect Unit + ) → + Hook UseOnResize Unit useOnResize debounceBy callback = coerceHook React.do fiberRef ← React.useRef Nothing diff --git a/src/Yoga/Block/Hook/UseStateEq.purs b/src/Yoga/Block/Hook/UseStateEq.purs index 36bf7d2..828ddbc 100644 --- a/src/Yoga/Block/Hook/UseStateEq.purs +++ b/src/Yoga/Block/Hook/UseStateEq.purs @@ -9,11 +9,11 @@ import React.Basic.Hooks (UseState, Hook, coerceHook) import React.Basic.Hooks as React -- Thanks to -useStateEq :: forall a. Eq a => a -> Hook (UseStateEq a) (a /\ ((a -> a) -> Effect Unit)) +useStateEq ∷ ∀ a. Eq a ⇒ a → Hook (UseStateEq a) (a /\ ((a → a) → Effect Unit)) useStateEq initialValue = coerceHook React.do - value /\ setValue <- React.useState initialValue + value /\ setValue ← React.useState initialValue let - updateEq f = setValue \value' -> do + updateEq f = setValue \value' → do let newValue = f value' if newValue /= value' then newValue else value' pure (value /\ updateEq) @@ -22,8 +22,8 @@ newtype UseStateEq a hooks = UseStateEq (UseState a hooks) derive instance Newtype (UseStateEq a hooks) _ -useStateEq' :: forall a. Eq a => a -> Hook (UseStateEq a) (a /\ (a -> Effect Unit)) +useStateEq' ∷ ∀ a. Eq a ⇒ a → Hook (UseStateEq a) (a /\ (a → Effect Unit)) useStateEq' initialValue = coerceHook React.do - value /\ setValue <- React.useState' initialValue + value /\ setValue ← React.useState' initialValue let updateEq newValue = when (newValue /= value) (setValue newValue) pure (value /\ updateEq) \ No newline at end of file diff --git a/src/Yoga/Block/Hook/UseWindowResize.purs b/src/Yoga/Block/Hook/UseWindowResize.purs index 86b2ab3..4e49618 100644 --- a/src/Yoga/Block/Hook/UseWindowResize.purs +++ b/src/Yoga/Block/Hook/UseWindowResize.purs @@ -22,37 +22,38 @@ import Web.HTML.Window as Window eventType ∷ EventType eventType = EventType "resize" -registerListener ∷ EventListener -> Effect (Effect Unit) +registerListener ∷ EventListener → Effect (Effect Unit) registerListener listener = do - target <- HTML.window <#> Window.toEventTarget + target ← HTML.window <#> Window.toEventTarget addEventListener eventType listener false target pure $ removeEventListener eventType listener false target type Sizes = { innerWidth ∷ Number, innerHeight ∷ Number } -newtype UseWindowResize hooks = UseWindowResize (UseLayoutEffect Unit (UseState Sizes hooks)) +newtype UseWindowResize hooks = UseWindowResize + (UseLayoutEffect Unit (UseState Sizes hooks)) derive instance Newtype (UseWindowResize hooks) _ useWindowResize ∷ Hook UseWindowResize Sizes useWindowResize = coerceHook React.do - size /\ setSize <- React.useState' zero + size /\ setSize ← React.useState' zero useLayoutEffect unit do setSizeFromWindow setSize - listener <- makeListener setSize + listener ← makeListener setSize registerListener listener pure size -setSizeFromWindow ∷ (Sizes -> Effect Unit) -> Effect Unit +setSizeFromWindow ∷ (Sizes → Effect Unit) → Effect Unit setSizeFromWindow setSize = do - window <- HTML.window - innerWidth <- Window.innerWidth window <#> toNumber - innerHeight <- Window.innerHeight window <#> toNumber + window ← HTML.window + innerWidth ← Window.innerWidth window <#> toNumber + innerHeight ← Window.innerHeight window <#> toNumber setSize { innerWidth, innerHeight } -makeListener ∷ (Sizes -> Effect Unit) -> Effect EventListener +makeListener ∷ (Sizes → Effect Unit) → Effect EventListener makeListener setSize = do eventListener $ const (setSizeFromWindow setSize) @@ -66,22 +67,28 @@ newtype UseOnResize hooks = UseOnResize derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _ -useOnResize - ∷ ∀ d - . Duration d - => d - -> ({ innerWidth ∷ Number, innerHeight ∷ Number, deltaWidth ∷ Number, deltaHeight ∷ Number } -> Effect Unit) - -> Hook UseOnResize Unit +useOnResize ∷ + ∀ d. + Duration d ⇒ + d → + ( { innerWidth ∷ Number + , innerHeight ∷ Number + , deltaWidth ∷ Number + , deltaHeight ∷ Number + } → + Effect Unit + ) → + Hook UseOnResize Unit useOnResize debounceBy callback = coerceHook React.do - mbFiber /\ setFiber <- React.useState' Nothing - size /\ setSize <- React.useState' (zero ∷ Sizes) + mbFiber /\ setFiber ← React.useState' Nothing + size /\ setSize ← React.useState' (zero ∷ Sizes) let layoutEffect ∷ Effect (Effect Unit) layoutEffect = do - setSizeFromWindow (setSize ∷ Sizes -> Effect Unit) - listener ∷ EventListener <- - makeListener \(dimensions ∷ Sizes) -> do + setSizeFromWindow (setSize ∷ Sizes → Effect Unit) + listener ∷ EventListener ← + makeListener \(dimensions ∷ Sizes) → do let aff ∷ Aff Unit aff = do @@ -91,10 +98,11 @@ useOnResize debounceBy callback = let deltaWidth = abs (size.innerWidth - innerWidth) let deltaHeight = abs (size.innerHeight - innerWidth) setSize dimensions # liftEffect - callback { innerWidth, innerHeight, deltaWidth, deltaHeight } # liftEffect - fiber ∷ Fiber _ <- launchAff aff + callback { innerWidth, innerHeight, deltaWidth, deltaHeight } # + liftEffect + fiber ∷ Fiber _ ← launchAff aff setFiber (Just fiber) - target ∷ EventTarget <- HTML.window <#> Window.toEventTarget + target ∷ EventTarget ← HTML.window <#> Window.toEventTarget addEventListener eventType listener false target pure $ launchAff_ diff --git a/src/Yoga/Block/Icon/SVG/After.purs b/src/Yoga/Block/Icon/SVG/After.purs index fc2a911..fc47c09 100644 --- a/src/Yoga/Block/Icon/SVG/After.purs +++ b/src/Yoga/Block/Icon/SVG/After.purs @@ -4,15 +4,21 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -after :: JSX +after ∷ JSX after = SVG.svg - { viewBox: "0 0 64 44" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.path - { d: "M22.2 30.776h19.6v4.17H22.2zM22.2 19.904h19.6v4.17H22.2zM22.2 9.031h19.6v4.172H22.2zM18.2 9.203 6.943 20.46A2.155 2.155 0 0 0 6.308 22c-.001.576.228 1.13.635 1.539L18.2 34.797v-6.162l-6.638-6.644 6.638-6.632V9.203zM45.8 9.203 57.058 20.46c.409.408.639.962.635 1.54a2.178 2.178 0 0 1-.636 1.539L45.8 34.797v-6.162l6.639-6.644-6.639-6.632V9.203z" - } - ] - } \ No newline at end of file + { viewBox: "0 0 64 44" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.path + { d: + "M22.2 30.776h19.6v4.17H22.2zM22.2 19.904h19.6v4.17H22.2zM22.2 9.031h19.6v4.172H22.2zM18.2 9.203 6.943 20.46A2.155 2.155 0 0 0 6.308 22c-.001.576.228 1.13.635 1.539L18.2 34.797v-6.162l-6.638-6.644 6.638-6.632V9.203zM45.8 9.203 57.058 20.46c.409.408.639.962.635 1.54a2.178 2.178 0 0 1-.636 1.539L45.8 34.797v-6.162l6.639-6.644-6.639-6.632V9.203z" + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Background.purs b/src/Yoga/Block/Icon/SVG/Background.purs index 86f81c1..15eae7c 100644 --- a/src/Yoga/Block/Icon/SVG/Background.purs +++ b/src/Yoga/Block/Icon/SVG/Background.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.Background where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -background :: JSX +background ∷ JSX background = SVG.svg { width: "1200" , height: "2011" @@ -13,67 +13,78 @@ background = SVG.svg [ SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , d: "m0 0 18 4.628c18 4.628 55 13.884 91 18.512s73 4.628 109 6.171c37 1.543 73 4.628 109 7.714 37 3.085 73 6.17 109 10.798 37 4.628 73 10.8 109 9.256 37-1.542 73-10.798 110-18.512 36-7.713 72-13.884 109-12.341 36 1.542 72 10.799 109 12.341 36 1.543 72-4.628 109-10.799 36-6.17 73-12.341 109-9.256 36 3.086 73 15.427 91 21.598l18 6.17V336H0V0z" + , d: + "m0 0 18 4.628c18 4.628 55 13.884 91 18.512s73 4.628 109 6.171c37 1.543 73 4.628 109 7.714 37 3.085 73 6.17 109 10.798 37 4.628 73 10.8 109 9.256 37-1.542 73-10.798 110-18.512 36-7.713 72-13.884 109-12.341 36 1.542 72 10.799 109 12.341 36 1.543 72-4.628 109-10.799 36-6.17 73-12.341 109-9.256 36 3.086 73 15.427 91 21.598l18 6.17V336H0V0z" , fill: "url(#a)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , d: "m1200 236.211-50-4.654c-50-4.655-150-13.965-250-41.895-100-27.929-200-74.478-300-83.788-100-9.31-200 18.619-300 27.929-100 9.31-200 0-250-4.655l-50-4.655V455h1200V236.211z" + , d: + "m1200 236.211-50-4.654c-50-4.655-150-13.965-250-41.895-100-27.929-200-74.478-300-83.788-100-9.31-200 18.619-300 27.929-100 9.31-200 0-250-4.655l-50-4.655V455h1200V236.211z" , fill: "url(#b)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , d: "m0 144 50 32.386c50 32.385 150 97.156 250 106.409s200-37.012 300-41.638c100-4.627 200 32.385 300 50.891s200 18.506 250 18.506h50V528H0V144z" + , d: + "m0 144 50 32.386c50 32.385 150 97.156 250 106.409s200-37.012 300-41.638c100-4.627 200 32.385 300 50.891s200 18.506 250 18.506h50V528H0V144z" , fill: "url(#c)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , d: "m0 266 33 28.488c34 28.487 100 85.462 167 85.462s133-56.975 200-47.479c67 9.496 133 85.463 200 104.455 67 18.991 133-18.992 200-18.992s133 37.983 200 56.975c67 18.992 133 18.992 167 18.992h33V649H0V266z" + , d: + "m0 266 33 28.488c34 28.487 100 85.462 167 85.462s133-56.975 200-47.479c67 9.496 133 85.463 200 104.455 67 18.991 133-18.992 200-18.992s133 37.983 200 56.975c67 18.992 133 18.992 167 18.992h33V649H0V266z" , fill: "url(#d)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , 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.227V911H0V503.083z" + , 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.227V911H0V503.083z" , fill: "url(#e)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , 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.9V968H0V655.221z" + , 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.9V968H0V655.221z" , fill: "url(#f)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , 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.22V1107H0V848.096z" + , 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.22V1107H0V848.096z" , fill: "url(#g)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , d: "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1363H0V925.667z" + , d: + "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1363H0V925.667z" , fill: "url(#h)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , 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.68V1409H0v-352.75z" + , 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.68V1409H0v-352.75z" , fill: "url(#i)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , d: "M0 1216.77v-8.62c28.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.88V1457H0v-240.23z" + , d: + "M0 1216.77v-8.62c28.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.88V1457H0v-240.23z" , fill: "url(#j)" } , SVG.path { fillRule: "evenodd" , clipRule: "evenodd" - , 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" + , 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" , fill: "#5C0BC2" } , SVG.defs diff --git a/src/Yoga/Block/Icon/SVG/Before.purs b/src/Yoga/Block/Icon/SVG/Before.purs index cbf4305..b72ee1a 100644 --- a/src/Yoga/Block/Icon/SVG/Before.purs +++ b/src/Yoga/Block/Icon/SVG/Before.purs @@ -4,20 +4,26 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -before :: JSX +before ∷ JSX before = SVG.svg - { viewBox: "0 0 64 44" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.path - { style: R.css { fill: "none" } - , d: "M0 0h64v64H0z" - , transform: "scale(1 .67406)" - } - , SVG.path - { d: "m17.894 17.332-2.95-2.952L4.003 25.32c-.392.391-.612.922-.608 1.476-.001.552.218 1.083.608 1.475l10.941 10.941 2.95-2.95-9.465-9.475 9.465-9.455zM39.571 29.936H19.96l4.467 4.171H44.04l-4.47-4.17zM59.994 14.87 49.058 3.927l-2.95 2.95 9.46 9.475-9.46 9.465 2.95 2.95L59.994 17.83c.394-.394.615-.93.611-1.488a2.076 2.076 0 0 0-.611-1.473zM19.959 23.655h19.612l4.467-4.17H24.424l-4.465 4.17zM39.571 9.031H19.96l4.465 4.172h19.612l-4.465-4.172z" - } - ] - } \ No newline at end of file + { viewBox: "0 0 64 44" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.path + { style: R.css { fill: "none" } + , d: "M0 0h64v64H0z" + , transform: "scale(1 .67406)" + } + , SVG.path + { d: + "m17.894 17.332-2.95-2.952L4.003 25.32c-.392.391-.612.922-.608 1.476-.001.552.218 1.083.608 1.475l10.941 10.941 2.95-2.95-9.465-9.475 9.465-9.455zM39.571 29.936H19.96l4.467 4.171H44.04l-4.47-4.17zM59.994 14.87 49.058 3.927l-2.95 2.95 9.46 9.475-9.46 9.465 2.95 2.95L59.994 17.83c.394-.394.615-.93.611-1.488a2.076 2.076 0 0 0-.611-1.473zM19.959 23.655h19.612l4.467-4.17H24.424l-4.465 4.17zM39.571 9.031H19.96l4.465 4.172h19.612l-4.465-4.172z" + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Bg.purs b/src/Yoga/Block/Icon/SVG/Bg.purs index 7dcecdd..4fa2856 100644 --- a/src/Yoga/Block/Icon/SVG/Bg.purs +++ b/src/Yoga/Block/Icon/SVG/Bg.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.Bg where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -bg :: JSX +bg ∷ JSX bg = SVG.svg { xmlns: "http://www.w3.org/2000/svg" , width: "200" @@ -20,19 +20,24 @@ bg = SVG.svg , strokeWidth: "4.1" , children: [ SVG.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" + { 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" } , SVG.path - { d: "m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141" + { d: + "m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141" } , SVG.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" + { 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" } , SVG.path - { d: "m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102" + { d: + "m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102" } , SVG.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" + { 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" } ] } diff --git a/src/Yoga/Block/Icon/SVG/Bin.purs b/src/Yoga/Block/Icon/SVG/Bin.purs index 500e239..356a689 100644 --- a/src/Yoga/Block/Icon/SVG/Bin.purs +++ b/src/Yoga/Block/Icon/SVG/Bin.purs @@ -13,16 +13,18 @@ bin = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.g - { fill: "var(--stroke-colour)" - , children: - [ SVG.path - { d: "M38.488 9.364C40.623 5.175 44.979 2.303 50 2.303c5.021 0 9.377 2.872 11.512 7.061 11.679 1.276 19.955 4.435 19.955 8.127l1.258 4.867c.204.392.31.793.31 1.2 0 4.819-14.803 8.731-33.035 8.731-18.232 0-33.035-3.912-33.035-8.731 0-.407.106-.808.31-1.2l1.258-4.867c0-3.692 8.276-6.851 19.955-8.127zm18.743-.372A111.616 111.616 0 0050 8.76c-2.489 0-4.91.081-7.231.232A9.523 9.523 0 0150 5.674a9.523 9.523 0 017.231 3.318z" - } - , SVG.path - { d: "M80.438 30.325l-7.057 58.81c0 4.725-10.477 8.562-23.381 8.562s-23.381-3.837-23.381-8.562l-7.057-58.81C24.581 33.459 36.326 35.66 50 35.66s25.419-2.201 30.438-5.335z" - } - ] - } - ] + [ SVG.g + { fill: "var(--stroke-colour)" + , children: + [ SVG.path + { d: + "M38.488 9.364C40.623 5.175 44.979 2.303 50 2.303c5.021 0 9.377 2.872 11.512 7.061 11.679 1.276 19.955 4.435 19.955 8.127l1.258 4.867c.204.392.31.793.31 1.2 0 4.819-14.803 8.731-33.035 8.731-18.232 0-33.035-3.912-33.035-8.731 0-.407.106-.808.31-1.2l1.258-4.867c0-3.692 8.276-6.851 19.955-8.127zm18.743-.372A111.616 111.616 0 0050 8.76c-2.489 0-4.91.081-7.231.232A9.523 9.523 0 0150 5.674a9.523 9.523 0 017.231 3.318z" + } + , SVG.path + { d: + "M80.438 30.325l-7.057 58.81c0 4.725-10.477 8.562-23.381 8.562s-23.381-3.837-23.381-8.562l-7.057-58.81C24.581 33.459 36.326 35.66 50 35.66s25.419-2.201 30.438-5.335z" + } + ] + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Checkmark.purs b/src/Yoga/Block/Icon/SVG/Checkmark.purs index a669a6c..afe0ed9 100644 --- a/src/Yoga/Block/Icon/SVG/Checkmark.purs +++ b/src/Yoga/Block/Icon/SVG/Checkmark.purs @@ -14,11 +14,11 @@ checkmark = , strokeLinejoin: "round" , strokeMiterlimit: "1.5" , children: - [ SVG.path - { d: "M16.073 57.774l21.285 21.868 52.637-52.637" - , fill: "none" - , stroke: "var(--stroke-colour)" - , strokeWidth: "13" - } - ] + [ SVG.path + { d: "M16.073 57.774l21.285 21.868 52.637-52.637" + , fill: "none" + , stroke: "var(--stroke-colour)" + , strokeWidth: "13" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Cross.purs b/src/Yoga/Block/Icon/SVG/Cross.purs index 43759b2..0445414 100644 --- a/src/Yoga/Block/Icon/SVG/Cross.purs +++ b/src/Yoga/Block/Icon/SVG/Cross.purs @@ -13,9 +13,10 @@ cross = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.path - { d: "M50 2.339c26.305 0 47.661 21.356 47.661 47.661S76.305 97.661 50 97.661 2.339 76.305 2.339 50 23.695 2.339 50 2.339zm0 38.773L31.838 22.949l-8.889 8.889L41.112 50 22.949 68.162l8.889 8.889L50 58.888l18.162 18.163 8.889-8.889L58.888 50l18.163-18.162-8.889-8.889L50 41.112z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.path + { d: + "M50 2.339c26.305 0 47.661 21.356 47.661 47.661S76.305 97.661 50 97.661 2.339 76.305 2.339 50 23.695 2.339 50 2.339zm0 38.773L31.838 22.949l-8.889 8.889L41.112 50 22.949 68.162l8.889 8.889L50 58.888l18.162 18.163 8.889-8.889L58.888 50l18.163-18.162-8.889-8.889L50 41.112z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/DraggableIndicator.purs b/src/Yoga/Block/Icon/SVG/DraggableIndicator.purs index ba24211..af79c85 100644 --- a/src/Yoga/Block/Icon/SVG/DraggableIndicator.purs +++ b/src/Yoga/Block/Icon/SVG/DraggableIndicator.purs @@ -13,9 +13,10 @@ draggableIndicator = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.path - { d: "M12.582 55h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 38.019h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 71.981h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.path + { d: + "M12.582 55h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 38.019h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 71.981h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Ellipsis.purs b/src/Yoga/Block/Icon/SVG/Ellipsis.purs index 13099bb..897c2eb 100644 --- a/src/Yoga/Block/Icon/SVG/Ellipsis.purs +++ b/src/Yoga/Block/Icon/SVG/Ellipsis.purs @@ -13,13 +13,13 @@ ellipsis = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.g - { fill: "var(--stroke-colour)" - , children: - [ SVG.circle { cx: "50", cy: "50", r: "10" } - , SVG.circle { cx: "80", cy: "50", r: "10" } - , SVG.circle { cx: "20", cy: "50", r: "10" } - ] - } - ] + [ SVG.g + { fill: "var(--stroke-colour)" + , children: + [ SVG.circle { cx: "50", cy: "50", r: "10" } + , SVG.circle { cx: "80", cy: "50", r: "10" } + , SVG.circle { cx: "20", cy: "50", r: "10" } + ] + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/EyeClosed.purs b/src/Yoga/Block/Icon/SVG/EyeClosed.purs index de1a340..5694777 100644 --- a/src/Yoga/Block/Icon/SVG/EyeClosed.purs +++ b/src/Yoga/Block/Icon/SVG/EyeClosed.purs @@ -13,11 +13,12 @@ eyeClosed = , strokeLinejoin: "round" , strokeMiterlimit: "1.5" , children: - [ SVG.path - { d: "M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z" - , fill: "var(--stroke-colour)" - , stroke: "var(--stroke-colour)" - , strokeWidth: "8" - } - ] + [ SVG.path + { d: + "M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z" + , fill: "var(--stroke-colour)" + , stroke: "var(--stroke-colour)" + , strokeWidth: "8" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/EyeOpen.purs b/src/Yoga/Block/Icon/SVG/EyeOpen.purs index 6a3fa04..acca7ea 100644 --- a/src/Yoga/Block/Icon/SVG/EyeOpen.purs +++ b/src/Yoga/Block/Icon/SVG/EyeOpen.purs @@ -13,27 +13,29 @@ eyeOpen = , strokeLinejoin: "round" , strokeMiterlimit: "1.5" , children: - [ SVG.path - { fill: "none" - , d: "M0 0h100v100H0z" - } - , SVG.path - { d: "M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z" - , fill: "none" - , stroke: "var(--stroke-colour)" - , strokeWidth: "8" - } - , SVG.circle - { cx: "49.963" - , cy: "50.087" - , r: "19.869" - , fill: "none" - , stroke: "var(--stroke-colour)" - , strokeWidth: "6" - } - , SVG.path - { d: "M49.963 40.748c5.155 0 9.339 4.184 9.339 9.339 0 5.154-4.184 9.339-9.339 9.339-5.154 0-9.339-4.185-9.339-9.339 0-5.155 4.185-9.339 9.339-9.339zm2.405 2.279a3.517 3.517 0 013.516 3.515 3.517 3.517 0 01-3.516 3.516 3.517 3.517 0 010-7.031z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.path + { fill: "none" + , d: "M0 0h100v100H0z" + } + , SVG.path + { d: + "M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z" + , fill: "none" + , stroke: "var(--stroke-colour)" + , strokeWidth: "8" + } + , SVG.circle + { cx: "49.963" + , cy: "50.087" + , r: "19.869" + , fill: "none" + , stroke: "var(--stroke-colour)" + , strokeWidth: "6" + } + , SVG.path + { d: + "M49.963 40.748c5.155 0 9.339 4.184 9.339 9.339 0 5.154-4.184 9.339-9.339 9.339-5.154 0-9.339-4.185-9.339-9.339 0-5.155 4.185-9.339 9.339-9.339zm2.405 2.279a3.517 3.517 0 013.516 3.515 3.517 3.517 0 01-3.516 3.516 3.517 3.517 0 010-7.031z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Filter.purs b/src/Yoga/Block/Icon/SVG/Filter.purs index e4f60a5..002aecc 100644 --- a/src/Yoga/Block/Icon/SVG/Filter.purs +++ b/src/Yoga/Block/Icon/SVG/Filter.purs @@ -4,37 +4,37 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -filter :: JSX +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" - } - ] - } - ] - } \ No newline at end of file + { 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" + } + ] + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Folder.purs b/src/Yoga/Block/Icon/SVG/Folder.purs index addfd62..ab80c75 100644 --- a/src/Yoga/Block/Icon/SVG/Folder.purs +++ b/src/Yoga/Block/Icon/SVG/Folder.purs @@ -14,7 +14,8 @@ folder = , strokeMiterlimit: "2" , children: [ SVG.path - { d: "M56.073 25.246c-6.361 0-7.669-12.345-14.898-12.345L26.127 12.9c-13.082 0-23.703 10.62-23.703 23.702v37.405c0 13.082 10.621 23.702 23.703 23.702h47.404c13.082 0 23.703-10.62 23.703-23.702 0 0-.003-28.648-.01-41.806a6.727 6.727 0 00-6.635-6.565c-9.924-.142-28.155-.39-34.516-.39zm34.277 9.768H9.304v34.062c0 12.92 6.079 21.409 17.262 21.409h46.526c11.183 0 17.262-8.489 17.262-21.409 0 0-.001-20.917-.004-34.062z" + { d: + "M56.073 25.246c-6.361 0-7.669-12.345-14.898-12.345L26.127 12.9c-13.082 0-23.703 10.62-23.703 23.702v37.405c0 13.082 10.621 23.702 23.703 23.702h47.404c13.082 0 23.703-10.62 23.703-23.702 0 0-.003-28.648-.01-41.806a6.727 6.727 0 00-6.635-6.565c-9.924-.142-28.155-.39-34.516-.39zm34.277 9.768H9.304v34.062c0 12.92 6.079 21.409 17.262 21.409h46.526c11.183 0 17.262-8.489 17.262-21.409 0 0-.001-20.917-.004-34.062z" , fill: "var(--stroke-colour)" } ] diff --git a/src/Yoga/Block/Icon/SVG/GithubLogo.purs b/src/Yoga/Block/Icon/SVG/GithubLogo.purs index 62ddb5b..0e44756 100644 --- a/src/Yoga/Block/Icon/SVG/GithubLogo.purs +++ b/src/Yoga/Block/Icon/SVG/GithubLogo.purs @@ -4,18 +4,19 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -githubLogo :: JSX +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" - } - ] - } \ No newline at end of file + { 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" + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs b/src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs index 03ee348..6ad9128 100644 --- a/src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs +++ b/src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconCalendar where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -heroiconCalendar :: JSX +heroiconCalendar ∷ JSX heroiconCalendar = SVG.svg { xmlns: "http://www.w3.org/2000/svg" , className: "h-6 w-6" @@ -15,7 +15,8 @@ heroiconCalendar = SVG.svg { strokeLinecap: "round" , strokeLinejoin: "round" , strokeWidth: "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" + , 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" } ] } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/HeroiconClock.purs b/src/Yoga/Block/Icon/SVG/HeroiconClock.purs index cf6331b..2755a5f 100644 --- a/src/Yoga/Block/Icon/SVG/HeroiconClock.purs +++ b/src/Yoga/Block/Icon/SVG/HeroiconClock.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconClock where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -heroiconClock :: JSX +heroiconClock ∷ JSX heroiconClock = SVG.svg { xmlns: "http://www.w3.org/2000/svg" , className: "h-6 w-6" diff --git a/src/Yoga/Block/Icon/SVG/HeroiconGroup.purs b/src/Yoga/Block/Icon/SVG/HeroiconGroup.purs index e81cfa4..f24e64c 100644 --- a/src/Yoga/Block/Icon/SVG/HeroiconGroup.purs +++ b/src/Yoga/Block/Icon/SVG/HeroiconGroup.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconGroup where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -heroiconGroup :: JSX +heroiconGroup ∷ JSX heroiconGroup = SVG.svg { xmlns: "http://www.w3.org/2000/svg" , className: "h-6 w-6" @@ -15,7 +15,8 @@ heroiconGroup = SVG.svg { strokeLinecap: "round" , strokeLinejoin: "round" , strokeWidth: "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" + , 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" } ] } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/HeroiconMoon.purs b/src/Yoga/Block/Icon/SVG/HeroiconMoon.purs index ac00abc..f599f19 100644 --- a/src/Yoga/Block/Icon/SVG/HeroiconMoon.purs +++ b/src/Yoga/Block/Icon/SVG/HeroiconMoon.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconMoon where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -heroiconMoon :: JSX +heroiconMoon ∷ JSX heroiconMoon = SVG.svg { xmlns: "http://www.w3.org/2000/svg" , className: "h-6 w-6" @@ -15,7 +15,8 @@ heroiconMoon = SVG.svg { strokeLinecap: "round" , strokeLinejoin: "round" , strokeWidth: "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" + , 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" } ] } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/HeroiconSun.purs b/src/Yoga/Block/Icon/SVG/HeroiconSun.purs index ad2c743..30dfb01 100644 --- a/src/Yoga/Block/Icon/SVG/HeroiconSun.purs +++ b/src/Yoga/Block/Icon/SVG/HeroiconSun.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconSun where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -heroiconSun :: JSX +heroiconSun ∷ JSX heroiconSun = SVG.svg { xmlns: "http://www.w3.org/2000/svg" , className: "h-6 w-6" @@ -15,7 +15,8 @@ heroiconSun = SVG.svg { strokeLinecap: "round" , strokeLinejoin: "round" , strokeWidth: "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" + , 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" } ] } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Key.purs b/src/Yoga/Block/Icon/SVG/Key.purs index c8e72e9..d8930c1 100644 --- a/src/Yoga/Block/Icon/SVG/Key.purs +++ b/src/Yoga/Block/Icon/SVG/Key.purs @@ -13,16 +13,18 @@ key = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.g - { fill: "var(--stroke-colour)" - , children: - [ SVG.path - { d: "M30.65 43.906c14.689 0 26.614 11.937 26.614 26.64 0 14.702-11.925 26.639-26.614 26.639-14.688 0-26.614-11.937-26.614-26.639 0-14.703 11.926-26.64 26.614-26.64zm-9.215 28.741a6.454 6.454 0 010 12.907 6.454 6.454 0 010-12.907z" - } - , SVG.path - { d: "M79.123 7.855h10.701l.833.776-47.719 44.401 2.491 2.286 45.494-43.326v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z" - } - ] - } - ] + [ SVG.g + { fill: "var(--stroke-colour)" + , children: + [ SVG.path + { d: + "M30.65 43.906c14.689 0 26.614 11.937 26.614 26.64 0 14.702-11.925 26.639-26.614 26.639-14.688 0-26.614-11.937-26.614-26.639 0-14.703 11.926-26.64 26.614-26.64zm-9.215 28.741a6.454 6.454 0 010 12.907 6.454 6.454 0 010-12.907z" + } + , SVG.path + { d: + "M79.123 7.855h10.701l.833.776-47.719 44.401 2.491 2.286 45.494-43.326v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z" + } + ] + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/LogoNew.purs b/src/Yoga/Block/Icon/SVG/LogoNew.purs index 977c59c..2483b89 100644 --- a/src/Yoga/Block/Icon/SVG/LogoNew.purs +++ b/src/Yoga/Block/Icon/SVG/LogoNew.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.LogoNew where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -logoNew :: JSX +logoNew ∷ JSX logoNew = SVG.svg { viewBox: "0 0 101 100" , xmlns: "http://www.w3.org/2000/svg" @@ -27,16 +27,19 @@ logoNew = SVG.svg , d: "M6.055 10.556h9.702V89.88H6.055z" } , SVG.path - { d: "M15.601 10.556l3.221 10.638c-.093 19.349-.065 38.698 0 58.047l-3.221 10.638V10.556z" + { d: + "M15.601 10.556l3.221 10.638c-.093 19.349-.065 38.698 0 58.047l-3.221 10.638V10.556z" , fill: "#f477b9" } , SVG.path - { d: "M61.746 48.656l5.82 11.896v14.712l3.115 5.908h8.96l-3.115-20.62 19.4-39.812-6.624-1.897-3.115 1.897-14.18 28.671-14.18-28.671h-9.738l.007.016a44.369 44.369 0 00-4.52-.212l-16.051-1.897-3.115 5.249v52.992l3.115 4.284h8.96l-3.39-24.528 2.511-2.614 17.391 24.733 6.004 2.213h10.362L45.915 54.647c7.178-.707 14.007-.214 15.831-5.991zm-18.17-19.854c8.259 0 10.362 2.26 10.362 10.44 0 9.194-2.103 10.44-10.362 10.44H33.37v-20.88h10.206z" + { d: + "M61.746 48.656l5.82 11.896v14.712l3.115 5.908h8.96l-3.115-20.62 19.4-39.812-6.624-1.897-3.115 1.897-14.18 28.671-14.18-28.671h-9.738l.007.016a44.369 44.369 0 00-4.52-.212l-16.051-1.897-3.115 5.249v52.992l3.115 4.284h8.96l-3.39-24.528 2.511-2.614 17.391 24.733 6.004 2.213h10.362L45.915 54.647c7.178-.707 14.007-.214 15.831-5.991zm-18.17-19.854c8.259 0 10.362 2.26 10.362 10.44 0 9.194-2.103 10.44-10.362 10.44H33.37v-20.88h10.206z" , fill: "#f477b9" , fillRule: "nonzero" } , SVG.path - { d: "M64.861 46.759l5.82 11.897v22.516h8.96V58.656L99.04 18.843h-9.738l-14.18 28.672-14.18-28.672s-12.628-.196-14.251-.196H27.525v62.329h8.96V56.044h4.986l17.53 24.932h10.362L51.755 55.81c7.178-.706 11.282-3.273 13.106-9.051zm-18.17-19.853c8.258 0 10.362 2.259 10.362 10.44 0 9.193-2.104 10.44-10.362 10.44H36.485v-20.88h10.206z" + { d: + "M64.861 46.759l5.82 11.897v22.516h8.96V58.656L99.04 18.843h-9.738l-14.18 28.672-14.18-28.672s-12.628-.196-14.251-.196H27.525v62.329h8.96V56.044h4.986l17.53 24.932h10.362L51.755 55.81c7.178-.706 11.282-3.273 13.106-9.051zm-18.17-19.853c8.258 0 10.362 2.259 10.362 10.44 0 9.193-2.104 10.44-10.362 10.44H36.485v-20.88h10.206z" , fill: "#aaffef" , fillRule: "nonzero" } diff --git a/src/Yoga/Block/Icon/SVG/Moon.purs b/src/Yoga/Block/Icon/SVG/Moon.purs index c2f47c8..6d85ebb 100644 --- a/src/Yoga/Block/Icon/SVG/Moon.purs +++ b/src/Yoga/Block/Icon/SVG/Moon.purs @@ -13,9 +13,10 @@ moon = , strokeLinejoin: "round" , strokeMiterlimit: "1.5" , children: - [ SVG.path - { d: "M53.984 14.646c1.707.195 3.42.519 5.128.977 18.733 5.019 29.867 24.303 24.847 43.036-5.019 18.732-24.303 29.866-43.036 24.846-13.577-3.638-23.163-14.769-25.499-27.753a28.518 28.518 0 008.408 3.788c15.237 4.082 30.921-4.973 35.004-20.21 2.376-8.867.302-17.887-4.852-24.684z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.path + { d: + "M53.984 14.646c1.707.195 3.42.519 5.128.977 18.733 5.019 29.867 24.303 24.847 43.036-5.019 18.732-24.303 29.866-43.036 24.846-13.577-3.638-23.163-14.769-25.499-27.753a28.518 28.518 0 008.408 3.788c15.237 4.082 30.921-4.973 35.004-20.21 2.376-8.867.302-17.887-4.852-24.684z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Murmuras.purs b/src/Yoga/Block/Icon/SVG/Murmuras.purs index 9b1e19e..ba0facc 100644 --- a/src/Yoga/Block/Icon/SVG/Murmuras.purs +++ b/src/Yoga/Block/Icon/SVG/Murmuras.purs @@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.Murmuras where import React.Basic (JSX) import React.Basic.DOM.SVG as SVG -murmuras :: JSX +murmuras ∷ JSX murmuras = SVG.svg { width: "800" , height: "110" @@ -12,11 +12,13 @@ murmuras = SVG.svg , children: [ SVG.path { fill: "#2872b0" - , d: "M85.91 20.398c-9.269 0-17.187 3.649-22.548 9.607a.166.166 0 0 1-.261-.016c-4.537-6.35-11.233-9.59-20.091-9.59-7.672 0-14.422 2.635-18.96 7.259a.168.168 0 0 1-.29-.118v-5.456a.174.174 0 0 0-.174-.173H6.882a.174.174 0 0 0-.173.173v67.718c0 .095.078.173.173.173H25.1a.174.174 0 0 0 .173-.173V50.374c0-8.113 4.95-13.2 12.513-13.2 7.287 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173v-39.84c0-7.563 5.225-12.788 12.513-12.788 7.287 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.216a.174.174 0 0 0 .174-.173v-42.04c0-16.501-9.763-27.364-25.713-27.364m83.637 1.513a.173.173 0 0 0-.173.173v39.428c0 7.838-5.5 13.063-12.65 13.063-7.563 0-12.926-5.225-12.926-13.063V22.084a.173.173 0 0 0-.174-.173H125.41a.173.173 0 0 0-.173.173V60c0 18.975 13.338 31.625 31.488 31.625 17.738 0 31.214-12.65 31.214-31.625V22.084a.173.173 0 0 0-.175-.173H169.55zm68.441-.825c-7.397 0-13.873 3.157-18.4 8.57a.17.17 0 0 1-.301-.107v-7.465a.174.174 0 0 0-.173-.173h-16.704a.174.174 0 0 0-.173.173v67.718c0 .095.077.173.173.173h18.216a.174.174 0 0 0 .173-.173v-33.79c0-11.688 7.15-17.738 18.288-17.738h4.777a.173.173 0 0 0 .174-.174V22.042a.176.176 0 0 0-.126-.169c-1.752-.525-3.641-.787-5.925-.787m93.356-.688c-9.27 0-17.179 3.649-22.539 9.607a.167.167 0 0 1-.262-.016c-4.536-6.35-11.233-9.59-20.091-9.59-7.672 0-14.42 2.635-18.959 7.259a.168.168 0 0 1-.291-.118v-5.456a.174.174 0 0 0-.174-.173h-16.704a.174.174 0 0 0-.173.173v67.718c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173V50.374c0-8.113 4.95-13.2 12.513-13.2 7.288 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173v-39.84c0-7.563 5.225-12.788 12.504-12.788 7.287 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173v-42.04c0-16.501-9.763-27.364-25.713-27.364m83.647 1.513a.173.173 0 0 0-.173.173v39.428c0 7.838-5.5 13.063-12.65 13.063-7.563 0-12.926-5.225-12.926-13.063V22.084a.173.173 0 0 0-.174-.173h-18.215a.173.173 0 0 0-.173.173V60c0 18.975 13.337 31.625 31.488 31.625 17.738 0 31.204-12.65 31.204-31.625V22.084a.173.173 0 0 0-.174-.173h-18.207zm68.432-.825c-7.397 0-13.872 3.156-18.39 8.569a.17.17 0 0 1-.301-.106v-7.465a.174.174 0 0 0-.174-.173h-16.703a.174.174 0 0 0-.174.173v67.718c0 .095.078.173.174.173h18.215a.174.174 0 0 0 .174-.173v-33.79c0-11.688 7.141-17.738 18.279-17.738h4.776a.173.173 0 0 0 .174-.174V22.042a.177.177 0 0 0-.125-.169c-1.752-.525-3.642-.787-5.925-.787m40.701-.688c-11.914 0-21.782 4.638-29.605 13.911a.179.179 0 0 0 0 .228l9.405 11.152c.067.079.188.08.26.004 5.988-6.361 10.917-9.207 17.877-9.207 8.25 0 12.65 4.4 12.65 11.963v16.088c0 7.838-6.187 13.475-14.3 13.475-5.912 0-9.762-2.887-9.762-7.425s3.437-6.875 9.487-6.875h7.985a.173.173 0 0 0 .174-.173V51.647a.174.174 0 0 0-.174-.173h-10.46c-15.813 0-25.713 7.563-25.713 19.8 0 11.963 9.075 20.351 23.513 20.351 8.494 0 15.535-3.04 20.473-7.956a.17.17 0 0 1 .29.12v6.013c0 .095.078.173.173.173h16.703a.174.174 0 0 0 .175-.173V49.549c0-18.838-11.413-29.15-29.151-29.15m73.015 28.738-6.601-2.75c-5.363-2.2-7.15-3.438-7.15-6.05 0-3.163 2.75-4.813 7.287-4.813 5.583 0 10.626 2.157 15.13 6.337a.171.171 0 0 0 .249-.015l9.136-11.153a.178.178 0 0 0-.007-.233c-6.174-6.663-14.253-10.062-24.37-10.062-14.85 0-25.026 7.563-25.026 20.35 0 10.039 6.05 15.676 18.563 20.764l7.288 3.025c5.088 2.2 7.013 3.3 7.013 6.188 0 3.712-3.713 5.637-8.663 5.637-6.687 0-13.103-2.979-18.98-9.072a.172.172 0 0 0-.256.007l-9.138 11.02a.176.176 0 0 0-.005.22c6.194 8.183 16.195 13.088 28.104 13.088 7.7 0 14.025-1.925 18.975-5.775 5.088-3.85 7.563-9.213 7.563-15.95 0-10.038-5.913-15.4-19.113-20.763m84.136 16.106a3.895 3.895 0 0 1-2.823-1.219l-3.015-3.199a1.418 1.418 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.2 15.2 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.05 4.05 0 0 1-1.072.145 4.066 4.066 0 0 1-2.94-1.265l-17.703-18.796a.171.171 0 0 0-.07-.046l-18.234-6.13a.174.174 0 0 0-.19.275l17.9 22.232a4.018 4.018 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.876 3.876 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.172.172 0 0 0 .006-.225l-24.694-30.671a4.056 4.056 0 0 1-.165-4.839 4.038 4.038 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.202 23.202 0 0 1 22.933 9.964l1.063 1.58a4.04 4.04 0 0 1 .443 3.643 4.047 4.047 0 0 1-2.7 2.494l-37.834 10.61a3.894 3.894 0 0 1-1.048.145M660.78 76.944a3.606 3.606 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.044 13.044 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.619 3.619 0 0 1-3.598-1.006l-15.311-16.254a.17.17 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872zm-22.957 28.48a3.598 3.598 0 0 1-3.07-1.701 3.64 3.64 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.638 3.638 0 0 1-.15-4.338 3.621 3.621 0 0 1 4.12-1.36l28.489 9.577a3.627 3.627 0 0 1 1.48.948l14.502 15.395a.17.17 0 0 0 .149.051 20.22 20.22 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.635 3.635 0 0 1-.977.134" + , d: + "M85.91 20.398c-9.269 0-17.187 3.649-22.548 9.607a.166.166 0 0 1-.261-.016c-4.537-6.35-11.233-9.59-20.091-9.59-7.672 0-14.422 2.635-18.96 7.259a.168.168 0 0 1-.29-.118v-5.456a.174.174 0 0 0-.174-.173H6.882a.174.174 0 0 0-.173.173v67.718c0 .095.078.173.173.173H25.1a.174.174 0 0 0 .173-.173V50.374c0-8.113 4.95-13.2 12.513-13.2 7.287 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173v-39.84c0-7.563 5.225-12.788 12.513-12.788 7.287 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.216a.174.174 0 0 0 .174-.173v-42.04c0-16.501-9.763-27.364-25.713-27.364m83.637 1.513a.173.173 0 0 0-.173.173v39.428c0 7.838-5.5 13.063-12.65 13.063-7.563 0-12.926-5.225-12.926-13.063V22.084a.173.173 0 0 0-.174-.173H125.41a.173.173 0 0 0-.173.173V60c0 18.975 13.338 31.625 31.488 31.625 17.738 0 31.214-12.65 31.214-31.625V22.084a.173.173 0 0 0-.175-.173H169.55zm68.441-.825c-7.397 0-13.873 3.157-18.4 8.57a.17.17 0 0 1-.301-.107v-7.465a.174.174 0 0 0-.173-.173h-16.704a.174.174 0 0 0-.173.173v67.718c0 .095.077.173.173.173h18.216a.174.174 0 0 0 .173-.173v-33.79c0-11.688 7.15-17.738 18.288-17.738h4.777a.173.173 0 0 0 .174-.174V22.042a.176.176 0 0 0-.126-.169c-1.752-.525-3.641-.787-5.925-.787m93.356-.688c-9.27 0-17.179 3.649-22.539 9.607a.167.167 0 0 1-.262-.016c-4.536-6.35-11.233-9.59-20.091-9.59-7.672 0-14.42 2.635-18.959 7.259a.168.168 0 0 1-.291-.118v-5.456a.174.174 0 0 0-.174-.173h-16.704a.174.174 0 0 0-.173.173v67.718c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173V50.374c0-8.113 4.95-13.2 12.513-13.2 7.288 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173v-39.84c0-7.563 5.225-12.788 12.504-12.788 7.287 0 12.1 5.087 12.1 13.2v39.428c0 .095.078.173.173.173h18.217a.174.174 0 0 0 .173-.173v-42.04c0-16.501-9.763-27.364-25.713-27.364m83.647 1.513a.173.173 0 0 0-.173.173v39.428c0 7.838-5.5 13.063-12.65 13.063-7.563 0-12.926-5.225-12.926-13.063V22.084a.173.173 0 0 0-.174-.173h-18.215a.173.173 0 0 0-.173.173V60c0 18.975 13.337 31.625 31.488 31.625 17.738 0 31.204-12.65 31.204-31.625V22.084a.173.173 0 0 0-.174-.173h-18.207zm68.432-.825c-7.397 0-13.872 3.156-18.39 8.569a.17.17 0 0 1-.301-.106v-7.465a.174.174 0 0 0-.174-.173h-16.703a.174.174 0 0 0-.174.173v67.718c0 .095.078.173.174.173h18.215a.174.174 0 0 0 .174-.173v-33.79c0-11.688 7.141-17.738 18.279-17.738h4.776a.173.173 0 0 0 .174-.174V22.042a.177.177 0 0 0-.125-.169c-1.752-.525-3.642-.787-5.925-.787m40.701-.688c-11.914 0-21.782 4.638-29.605 13.911a.179.179 0 0 0 0 .228l9.405 11.152c.067.079.188.08.26.004 5.988-6.361 10.917-9.207 17.877-9.207 8.25 0 12.65 4.4 12.65 11.963v16.088c0 7.838-6.187 13.475-14.3 13.475-5.912 0-9.762-2.887-9.762-7.425s3.437-6.875 9.487-6.875h7.985a.173.173 0 0 0 .174-.173V51.647a.174.174 0 0 0-.174-.173h-10.46c-15.813 0-25.713 7.563-25.713 19.8 0 11.963 9.075 20.351 23.513 20.351 8.494 0 15.535-3.04 20.473-7.956a.17.17 0 0 1 .29.12v6.013c0 .095.078.173.173.173h16.703a.174.174 0 0 0 .175-.173V49.549c0-18.838-11.413-29.15-29.151-29.15m73.015 28.738-6.601-2.75c-5.363-2.2-7.15-3.438-7.15-6.05 0-3.163 2.75-4.813 7.287-4.813 5.583 0 10.626 2.157 15.13 6.337a.171.171 0 0 0 .249-.015l9.136-11.153a.178.178 0 0 0-.007-.233c-6.174-6.663-14.253-10.062-24.37-10.062-14.85 0-25.026 7.563-25.026 20.35 0 10.039 6.05 15.676 18.563 20.764l7.288 3.025c5.088 2.2 7.013 3.3 7.013 6.188 0 3.712-3.713 5.637-8.663 5.637-6.687 0-13.103-2.979-18.98-9.072a.172.172 0 0 0-.256.007l-9.138 11.02a.176.176 0 0 0-.005.22c6.194 8.183 16.195 13.088 28.104 13.088 7.7 0 14.025-1.925 18.975-5.775 5.088-3.85 7.563-9.213 7.563-15.95 0-10.038-5.913-15.4-19.113-20.763m84.136 16.106a3.895 3.895 0 0 1-2.823-1.219l-3.015-3.199a1.418 1.418 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.2 15.2 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.05 4.05 0 0 1-1.072.145 4.066 4.066 0 0 1-2.94-1.265l-17.703-18.796a.171.171 0 0 0-.07-.046l-18.234-6.13a.174.174 0 0 0-.19.275l17.9 22.232a4.018 4.018 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.876 3.876 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.172.172 0 0 0 .006-.225l-24.694-30.671a4.056 4.056 0 0 1-.165-4.839 4.038 4.038 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.202 23.202 0 0 1 22.933 9.964l1.063 1.58a4.04 4.04 0 0 1 .443 3.643 4.047 4.047 0 0 1-2.7 2.494l-37.834 10.61a3.894 3.894 0 0 1-1.048.145M660.78 76.944a3.606 3.606 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.044 13.044 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.619 3.619 0 0 1-3.598-1.006l-15.311-16.254a.17.17 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872zm-22.957 28.48a3.598 3.598 0 0 1-3.07-1.701 3.64 3.64 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.638 3.638 0 0 1-.15-4.338 3.621 3.621 0 0 1 4.12-1.36l28.489 9.577a3.627 3.627 0 0 1 1.48.948l14.502 15.395a.17.17 0 0 0 .149.051 20.22 20.22 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.635 3.635 0 0 1-.977.134" } , SVG.path { fill: "#2872b0" - , d: "M740.866 49.008a4.316 4.316 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.732 16.732 0 0 0-10.891-4.05 16.7 16.7 0 0 0-4.462.608 4.352 4.352 0 0 1-1.154.156 4.346 4.346 0 0 1-3.152-1.36l-19.398-20.592a.171.171 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.307 4.307 0 0 1-3.674-2.037 4.351 4.351 0 0 1 .44-5.175l22.908-25.701a.174.174 0 0 0 .005-.225L704.638 17.82a4.355 4.355 0 0 1-.178-5.191A4.334 4.334 0 0 1 709.39 11l35.999 12.102a4.337 4.337 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.31 25.31 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162" + , d: + "M740.866 49.008a4.316 4.316 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.732 16.732 0 0 0-10.891-4.05 16.7 16.7 0 0 0-4.462.608 4.352 4.352 0 0 1-1.154.156 4.346 4.346 0 0 1-3.152-1.36l-19.398-20.592a.171.171 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.307 4.307 0 0 1-3.674-2.037 4.351 4.351 0 0 1 .44-5.175l22.908-25.701a.174.174 0 0 0 .005-.225L704.638 17.82a4.355 4.355 0 0 1-.178-5.191A4.334 4.334 0 0 1 709.39 11l35.999 12.102a4.337 4.337 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.31 25.31 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162" } ] } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/MurmurasLogos.purs b/src/Yoga/Block/Icon/SVG/MurmurasLogos.purs index 852ce01..2a54feb 100644 --- a/src/Yoga/Block/Icon/SVG/MurmurasLogos.purs +++ b/src/Yoga/Block/Icon/SVG/MurmurasLogos.purs @@ -4,30 +4,37 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -murmurasLogos :: JSX +murmurasLogos ∷ JSX murmurasLogos = SVG.svg - { viewBox: "0 0 400 400" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.path - { style: R.css { fill: "none" } - , d: "M0 0h400v400H0z" - } - , SVG.path - { style: R.css { fill: "#f7f7f7" } - , d: "M0 0h400v400H0z" - } - , SVG.path - { d: "M681.275 65.243a3.897 3.897 0 0 1-2.823-1.219l-3.015-3.199a1.42 1.42 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.207 15.207 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.045 4.045 0 0 1-4.012-1.12l-17.703-18.796a.165.165 0 0 0-.07-.046l-18.234-6.13a.175.175 0 0 0-.19.275l17.9 22.232a4.03 4.03 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.884 3.884 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.173.173 0 0 0 .006-.225l-24.694-30.671a4.066 4.066 0 0 1-.165-4.839 4.048 4.048 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.236 23.236 0 0 1 22.933 9.964l1.063 1.58a4.042 4.042 0 0 1 .443 3.643 4.05 4.05 0 0 1-2.7 2.494l-37.834 10.61a3.87 3.87 0 0 1-1.048.145M660.78 76.944a3.617 3.617 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.046 13.046 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.623 3.623 0 0 1-3.598-1.006l-15.311-16.254a.163.163 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872h.001zm-22.957 28.48a3.603 3.603 0 0 1-3.07-1.701 3.648 3.648 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.646 3.646 0 0 1-.15-4.338 3.63 3.63 0 0 1 4.12-1.36l28.489 9.577a3.62 3.62 0 0 1 1.48.948l14.502 15.395c.038.04.094.059.149.051a20.25 20.25 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.626 3.626 0 0 1-.977.134" - , style: R.css { fill: "#002340", fillRule: "nonzero" } - , transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)" - } - , SVG.path - { d: "M740.866 49.008a4.33 4.33 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.737 16.737 0 0 0-10.891-4.05c-1.508 0-3.009.205-4.462.608a4.35 4.35 0 0 1-4.306-1.204l-19.398-20.592a.163.163 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.31 4.31 0 0 1-3.674-2.037 4.362 4.362 0 0 1 .44-5.175l22.908-25.701a.175.175 0 0 0 .005-.225L704.638 17.82a4.365 4.365 0 0 1-.178-5.191A4.343 4.343 0 0 1 709.39 11l35.999 12.102a4.344 4.344 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.347 25.347 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162" - , style: R.css { fill: "#002340", fillRule: "nonzero" } - , transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)" - } - ] - } \ No newline at end of file + { viewBox: "0 0 400 400" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.path + { style: R.css { fill: "none" } + , d: "M0 0h400v400H0z" + } + , SVG.path + { style: R.css { fill: "#f7f7f7" } + , d: "M0 0h400v400H0z" + } + , SVG.path + { d: + "M681.275 65.243a3.897 3.897 0 0 1-2.823-1.219l-3.015-3.199a1.42 1.42 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.207 15.207 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.045 4.045 0 0 1-4.012-1.12l-17.703-18.796a.165.165 0 0 0-.07-.046l-18.234-6.13a.175.175 0 0 0-.19.275l17.9 22.232a4.03 4.03 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.884 3.884 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.173.173 0 0 0 .006-.225l-24.694-30.671a4.066 4.066 0 0 1-.165-4.839 4.048 4.048 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.236 23.236 0 0 1 22.933 9.964l1.063 1.58a4.042 4.042 0 0 1 .443 3.643 4.05 4.05 0 0 1-2.7 2.494l-37.834 10.61a3.87 3.87 0 0 1-1.048.145M660.78 76.944a3.617 3.617 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.046 13.046 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.623 3.623 0 0 1-3.598-1.006l-15.311-16.254a.163.163 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872h.001zm-22.957 28.48a3.603 3.603 0 0 1-3.07-1.701 3.648 3.648 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.646 3.646 0 0 1-.15-4.338 3.63 3.63 0 0 1 4.12-1.36l28.489 9.577a3.62 3.62 0 0 1 1.48.948l14.502 15.395c.038.04.094.059.149.051a20.25 20.25 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.626 3.626 0 0 1-.977.134" + , style: R.css { fill: "#002340", fillRule: "nonzero" } + , transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)" + } + , SVG.path + { d: + "M740.866 49.008a4.33 4.33 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.737 16.737 0 0 0-10.891-4.05c-1.508 0-3.009.205-4.462.608a4.35 4.35 0 0 1-4.306-1.204l-19.398-20.592a.163.163 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.31 4.31 0 0 1-3.674-2.037 4.362 4.362 0 0 1 .44-5.175l22.908-25.701a.175.175 0 0 0 .005-.225L704.638 17.82a4.365 4.365 0 0 1-.178-5.191A4.343 4.343 0 0 1 709.39 11l35.999 12.102a4.344 4.344 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.347 25.347 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162" + , style: R.css { fill: "#002340", fillRule: "nonzero" } + , transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)" + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Off.purs b/src/Yoga/Block/Icon/SVG/Off.purs index d18501b..74925e1 100644 --- a/src/Yoga/Block/Icon/SVG/Off.purs +++ b/src/Yoga/Block/Icon/SVG/Off.purs @@ -13,13 +13,13 @@ off = , strokeLinejoin: "round" , strokeMiterlimit: "1.5" , children: - [ SVG.circle - { cx: "50" - , cy: "50" - , r: "32" - , fill: "none" - , stroke: "var(--stroke-colour)" - , strokeWidth: "17" - } - ] + [ SVG.circle + { cx: "50" + , cy: "50" + , r: "32" + , fill: "none" + , stroke: "var(--stroke-colour)" + , strokeWidth: "17" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/On.purs b/src/Yoga/Block/Icon/SVG/On.purs index 59daffa..341b7cc 100644 --- a/src/Yoga/Block/Icon/SVG/On.purs +++ b/src/Yoga/Block/Icon/SVG/On.purs @@ -14,11 +14,11 @@ on = , strokeLinejoin: "round" , strokeMiterlimit: "1.5" , children: - [ SVG.path - { d: "M50 10v80" - , fill: "none" - , stroke: "var(--stroke-colour)" - , strokeWidth: "17" - } - ] + [ SVG.path + { d: "M50 10v80" + , fill: "none" + , stroke: "var(--stroke-colour)" + , strokeWidth: "17" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Pixel4.purs b/src/Yoga/Block/Icon/SVG/Pixel4.purs index 0337db7..ef02ba8 100644 --- a/src/Yoga/Block/Icon/SVG/Pixel4.purs +++ b/src/Yoga/Block/Icon/SVG/Pixel4.purs @@ -4,57 +4,57 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -pixel4 :: JSX +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" - } - ] - } \ No newline at end of file + { 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" + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Plus.purs b/src/Yoga/Block/Icon/SVG/Plus.purs index 858d503..f9883d3 100644 --- a/src/Yoga/Block/Icon/SVG/Plus.purs +++ b/src/Yoga/Block/Icon/SVG/Plus.purs @@ -13,9 +13,10 @@ plus = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.path - { d: "M50.302 2.596c26.33 0 47.707 21.376 47.707 47.706 0 26.33-21.377 47.707-47.707 47.707-26.33 0-47.706-21.377-47.706-47.707 0-26.33 21.376-47.706 47.706-47.706zm8.466 38.248V17.378H40.456v23.466H16.99v18.312h23.466v23.466h18.312V59.156h23.466V40.844H58.768z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.path + { d: + "M50.302 2.596c26.33 0 47.707 21.376 47.707 47.706 0 26.33-21.377 47.707-47.707 47.707-26.33 0-47.706-21.377-47.706-47.707 0-26.33 21.376-47.706 47.706-47.706zm8.466 38.248V17.378H40.456v23.466H16.99v18.312h23.466v23.466h18.312V59.156h23.466V40.844H58.768z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/QuestionMark.purs b/src/Yoga/Block/Icon/SVG/QuestionMark.purs index 4d2024a..a0e4f49 100644 --- a/src/Yoga/Block/Icon/SVG/QuestionMark.purs +++ b/src/Yoga/Block/Icon/SVG/QuestionMark.purs @@ -13,9 +13,10 @@ questionMark = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.path - { d: "M50 10.037c22.056 0 39.963 17.907 39.963 39.963S72.056 89.963 50 89.963 10.037 72.056 10.037 50 27.944 10.037 50 10.037zM48.871 77.03c2.87 0 5.326-2.384 5.351-5.351-.025-2.918-2.481-5.301-5.351-5.301-2.967 0-5.374 2.383-5.35 5.301-.024 2.967 2.383 5.351 5.35 5.351zm-4.255-15.176h8.098v-.632c.049-5.156 1.727-7.515 5.691-9.947 4.474-2.675 7.271-6.323 7.271-11.892 0-8.22-6.396-13.375-15.686-13.375-8.512 0-15.418 4.718-15.661 13.959h8.657c.219-4.572 3.526-6.761 6.955-6.761 3.721 0 6.713 2.481 6.713 6.299 0 3.405-2.262 5.739-5.205 7.587-4.304 2.676-6.785 5.375-6.833 14.13v.632z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.path + { d: + "M50 10.037c22.056 0 39.963 17.907 39.963 39.963S72.056 89.963 50 89.963 10.037 72.056 10.037 50 27.944 10.037 50 10.037zM48.871 77.03c2.87 0 5.326-2.384 5.351-5.351-.025-2.918-2.481-5.301-5.351-5.301-2.967 0-5.374 2.383-5.35 5.301-.024 2.967 2.383 5.351 5.35 5.351zm-4.255-15.176h8.098v-.632c.049-5.156 1.727-7.515 5.691-9.947 4.474-2.675 7.271-6.323 7.271-11.892 0-8.22-6.396-13.375-15.686-13.375-8.512 0-15.418 4.718-15.661 13.959h8.657c.219-4.572 3.526-6.761 6.955-6.761 3.721 0 6.713 2.481 6.713 6.299 0 3.405-2.262 5.739-5.205 7.587-4.304 2.676-6.785 5.375-6.833 14.13v.632z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/SimpleKey.purs b/src/Yoga/Block/Icon/SVG/SimpleKey.purs index 7461461..2206b1e 100644 --- a/src/Yoga/Block/Icon/SVG/SimpleKey.purs +++ b/src/Yoga/Block/Icon/SVG/SimpleKey.purs @@ -13,19 +13,20 @@ simpleKey = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.g - { fill: "var(--stroke-colour)" - , children: - [ SVG.ellipse - { cx: "30.65" - , cy: "70.546" - , rx: "26.614" - , ry: "26.639" - } - , SVG.path - { d: "M79.123 7.855h10.701l.833.776.266 3.361v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z" - } - ] - } - ] + [ SVG.g + { fill: "var(--stroke-colour)" + , children: + [ SVG.ellipse + { cx: "30.65" + , cy: "70.546" + , rx: "26.614" + , ry: "26.639" + } + , SVG.path + { d: + "M79.123 7.855h10.701l.833.776.266 3.361v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z" + } + ] + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Spd.purs b/src/Yoga/Block/Icon/SVG/Spd.purs index 3c83c30..534feb8 100644 --- a/src/Yoga/Block/Icon/SVG/Spd.purs +++ b/src/Yoga/Block/Icon/SVG/Spd.purs @@ -4,22 +4,28 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -spd :: JSX +spd ∷ JSX spd = SVG.svg - { viewBox: "0 0 1184 1184" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.path - { style: R.css { fill: "#ed1c24", fillRule: "nonzero" } - , d: "M.346.347H283.81V283.81H.346z" - , transform: "scale(4.16667)" - } - , SVG.path - { d: "M92.653 175.291h38.716c22.255 0 28.062 16.116 28.062 28.852 0 17.125-7.125 29.783-29.155 29.783h-12.692v28.865H92.653v-87.5zm24.71 39.777h1.931c8.261 0 16.404.477 16.404-10.227 0-10.209-7.562-10.215-16.404-10.215h-1.931v20.442zM164.923 175.291h36.95c24.309 0 39.089 19.1 39.089 43.64 0 24.541-14.896 43.86-39.089 43.86h-36.95v-87.5zm25.073 67.497h2.709c13.544 0 23.689-7.974 23.689-23.857 0-13.346-8.872-22.876-23.458-22.876h-2.94v46.733zM72.959 199.508c-4.767-3.084-12.477-4.907-16.122-4.907-4.463 0-10.181 1.251-10.181 6.113 0 5.093 5.65 6.062 10.786 7.435 0 0 6.304 1.377 8.995 2.26C78.039 214.214 86.7 218.3 86.7 233.732c0 8.681-2.231 17.117-9.67 23.021-7.314 5.788-17.109 8.696-26.531 8.696-11.777 0-23.466-2.855-33.33-10.909l10.891-18.29c6.075 4.978 13.265 9.506 21.572 9.506 5.702 0 11.3-1.708 11.3-7.844 0-6.366-9.054-6.712-14.276-8.047-11.268-2.879-25.291-6.664-25.291-27.04 0-17.711 13.513-29.287 32.234-29.287 9.422 0 21.427 4.328 29.734 8.727l-10.374 17.243z" - , style: R.css { fill: "#fff", fillRule: "nonzero" } - , transform: "scale(4.16667)" - } - ] - } \ No newline at end of file + { viewBox: "0 0 1184 1184" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.path + { style: R.css { fill: "#ed1c24", fillRule: "nonzero" } + , d: "M.346.347H283.81V283.81H.346z" + , transform: "scale(4.16667)" + } + , SVG.path + { d: + "M92.653 175.291h38.716c22.255 0 28.062 16.116 28.062 28.852 0 17.125-7.125 29.783-29.155 29.783h-12.692v28.865H92.653v-87.5zm24.71 39.777h1.931c8.261 0 16.404.477 16.404-10.227 0-10.209-7.562-10.215-16.404-10.215h-1.931v20.442zM164.923 175.291h36.95c24.309 0 39.089 19.1 39.089 43.64 0 24.541-14.896 43.86-39.089 43.86h-36.95v-87.5zm25.073 67.497h2.709c13.544 0 23.689-7.974 23.689-23.857 0-13.346-8.872-22.876-23.458-22.876h-2.94v46.733zM72.959 199.508c-4.767-3.084-12.477-4.907-16.122-4.907-4.463 0-10.181 1.251-10.181 6.113 0 5.093 5.65 6.062 10.786 7.435 0 0 6.304 1.377 8.995 2.26C78.039 214.214 86.7 218.3 86.7 233.732c0 8.681-2.231 17.117-9.67 23.021-7.314 5.788-17.109 8.696-26.531 8.696-11.777 0-23.466-2.855-33.33-10.909l10.891-18.29c6.075 4.978 13.265 9.506 21.572 9.506 5.702 0 11.3-1.708 11.3-7.844 0-6.366-9.054-6.712-14.276-8.047-11.268-2.879-25.291-6.664-25.291-27.04 0-17.711 13.513-29.287 32.234-29.287 9.422 0 21.427 4.328 29.734 8.727l-10.374 17.243z" + , style: R.css { fill: "#fff", fillRule: "nonzero" } + , transform: "scale(4.16667)" + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Spinner2.purs b/src/Yoga/Block/Icon/SVG/Spinner2.purs index 7d7add4..f1a7923 100644 --- a/src/Yoga/Block/Icon/SVG/Spinner2.purs +++ b/src/Yoga/Block/Icon/SVG/Spinner2.purs @@ -4,43 +4,44 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -spinner2 :: JSX +spinner2 ∷ JSX spinner2 = SVG.svg - { width: "24" - , height: "24" - , xmlns: "http://www.w3.org/2000/svg" - , children: - [ SVG.style - { children: - [ R.text "@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}" - ] - } - , SVG.circle - { className:"spinner_nOfF" - , cx: "4" - , cy: "12" - , r: "3" - } - , SVG.circle - { className:"spinner_nOfF" - , cx: "4" - , cy: "12" - , r: "3" - , style: R.css { animationDelay: "-.5s" } - } - , SVG.circle - { className:"spinner_nOfF" - , cx: "4" - , cy: "12" - , r: "3" - , style: R.css { animationDelay: "-1s" } - } - , SVG.circle - { className:"spinner_nOfF" - , cx: "4" - , cy: "12" - , r: "3" - , style: R.css { animationDelay: "-1.5s" } - } - ] - } \ No newline at end of file + { width: "24" + , height: "24" + , xmlns: "http://www.w3.org/2000/svg" + , children: + [ SVG.style + { children: + [ R.text + "@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}" + ] + } + , SVG.circle + { className: "spinner_nOfF" + , cx: "4" + , cy: "12" + , r: "3" + } + , SVG.circle + { className: "spinner_nOfF" + , cx: "4" + , cy: "12" + , r: "3" + , style: R.css { animationDelay: "-.5s" } + } + , SVG.circle + { className: "spinner_nOfF" + , cx: "4" + , cy: "12" + , r: "3" + , style: R.css { animationDelay: "-1s" } + } + , SVG.circle + { className: "spinner_nOfF" + , cx: "4" + , cy: "12" + , r: "3" + , style: R.css { animationDelay: "-1.5s" } + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Sun.purs b/src/Yoga/Block/Icon/SVG/Sun.purs index 114edfe..10feed1 100644 --- a/src/Yoga/Block/Icon/SVG/Sun.purs +++ b/src/Yoga/Block/Icon/SVG/Sun.purs @@ -13,15 +13,16 @@ sun = , strokeLinejoin: "round" , strokeMiterlimit: "2" , children: - [ SVG.circle - { cx: "50" - , cy: "49.997" - , r: "24.82" - , fill: "var(--stroke-colour)" - } - , SVG.path - { d: "M2.239 51.966c0 1.64 1.33 2.971 2.971 2.971h13.417a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H5.21a2.97 2.97 0 00-2.971 2.971v3.823zM78.415 51.966a2.972 2.972 0 002.971 2.971h13.418a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H81.386a2.971 2.971 0 00-2.971 2.971v3.823zM17.581 85.183a2.972 2.972 0 004.202 0l9.487-9.488a2.97 2.97 0 000-4.201l-2.703-2.703a2.97 2.97 0 00-4.202 0l-9.487 9.487a2.972 2.972 0 000 4.202l2.703 2.703zM71.446 31.318a2.972 2.972 0 004.202 0l9.487-9.488a2.969 2.969 0 000-4.201l-2.703-2.704a2.97 2.97 0 00-4.201 0l-9.488 9.488a2.972 2.972 0 000 4.202l2.703 2.703zM14.878 17.629a2.97 2.97 0 000 4.201l9.487 9.488a2.972 2.972 0 004.202 0l2.703-2.703a2.972 2.972 0 000-4.202l-9.487-9.488a2.972 2.972 0 00-4.202 0l-2.703 2.704zM68.743 71.494a2.97 2.97 0 000 4.201l9.488 9.488a2.97 2.97 0 004.201 0l2.703-2.703a2.97 2.97 0 000-4.202l-9.487-9.487a2.97 2.97 0 00-4.202 0l-2.703 2.703zM48.095 2.286a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V5.257a2.97 2.97 0 00-2.971-2.971h-3.823zM48.095 78.463a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V81.434a2.97 2.97 0 00-2.971-2.971h-3.823z" - , fill: "var(--stroke-colour)" - } - ] + [ SVG.circle + { cx: "50" + , cy: "49.997" + , r: "24.82" + , fill: "var(--stroke-colour)" + } + , SVG.path + { d: + "M2.239 51.966c0 1.64 1.33 2.971 2.971 2.971h13.417a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H5.21a2.97 2.97 0 00-2.971 2.971v3.823zM78.415 51.966a2.972 2.972 0 002.971 2.971h13.418a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H81.386a2.971 2.971 0 00-2.971 2.971v3.823zM17.581 85.183a2.972 2.972 0 004.202 0l9.487-9.488a2.97 2.97 0 000-4.201l-2.703-2.703a2.97 2.97 0 00-4.202 0l-9.487 9.487a2.972 2.972 0 000 4.202l2.703 2.703zM71.446 31.318a2.972 2.972 0 004.202 0l9.487-9.488a2.969 2.969 0 000-4.201l-2.703-2.704a2.97 2.97 0 00-4.201 0l-9.488 9.488a2.972 2.972 0 000 4.202l2.703 2.703zM14.878 17.629a2.97 2.97 0 000 4.201l9.487 9.488a2.972 2.972 0 004.202 0l2.703-2.703a2.972 2.972 0 000-4.202l-9.487-9.488a2.972 2.972 0 00-4.202 0l-2.703 2.704zM68.743 71.494a2.97 2.97 0 000 4.201l9.488 9.488a2.97 2.97 0 004.201 0l2.703-2.703a2.97 2.97 0 000-4.202l-9.487-9.487a2.97 2.97 0 00-4.202 0l-2.703 2.703zM48.095 2.286a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V5.257a2.97 2.97 0 00-2.971-2.971h-3.823zM48.095 78.463a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V81.434a2.97 2.97 0 00-2.971-2.971h-3.823z" + , fill: "var(--stroke-colour)" + } + ] } diff --git a/src/Yoga/Block/Icon/SVG/Tmp.purs b/src/Yoga/Block/Icon/SVG/Tmp.purs index cd7fa73..351bfbb 100644 --- a/src/Yoga/Block/Icon/SVG/Tmp.purs +++ b/src/Yoga/Block/Icon/SVG/Tmp.purs @@ -4,169 +4,195 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -tmp :: JSX +tmp ∷ JSX tmp = SVG.svg - { viewBox: "0 0 1200 1527" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.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: R.css { fill: "url(#a)" } - , transform: "translate(0 -484)" - } - , SVG.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: R.css { fill: "url(#b)" } - , transform: "translate(0 -484)" - } - , SVG.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: R.css { fill: "url(#c)" } - , transform: "translate(0 -484)" - } - , SVG.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: R.css { fill: "url(#d)" } - , transform: "translate(0 -484)" - } - , SVG.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: R.css { fill: "url(#e)" } - , transform: "translate(0 -484)" - } - , SVG.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: R.css { fill: "url(#f)" } - , transform: "translate(0 -484)" - } - , SVG.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: R.css { fill: "#5c0bc2" } - , transform: "translate(0 -484)" - } - , SVG.defs - { children: - [ SVG.linearGradient - { id: "a" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "rotate(90 58 542) scale(427)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#e683ff", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#ff97f5", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "b" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "matrix(0 124.08 -124.08 0 600 649)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#cc60ff", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#e062ff", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "c" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "matrix(0 238.356 -238.356 0 600 731.658)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#a32eff", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#c03cff", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "d" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "matrix(0 452 -452 0 600 911)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#8600f0", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#b659ff", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "e" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "matrix(0 359 -359 0 600 1050)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#ca33ff", stopOpacity: "1" } - } - , SVG.stop - { offset: "0" - , style: R.css { stopColor: "#7d17ff", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#843dde", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "f" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "matrix(0 121.48 -121.48 0 600 1362.52)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#6706e3", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#682de7", stopOpacity: "1" } - } - ] - } - ] - } - ] - } \ No newline at end of file + { viewBox: "0 0 1200 1527" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.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: R.css { fill: "url(#a)" } + , transform: "translate(0 -484)" + } + , SVG.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: R.css { fill: "url(#b)" } + , transform: "translate(0 -484)" + } + , SVG.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: R.css { fill: "url(#c)" } + , transform: "translate(0 -484)" + } + , SVG.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: R.css { fill: "url(#d)" } + , transform: "translate(0 -484)" + } + , SVG.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: R.css { fill: "url(#e)" } + , transform: "translate(0 -484)" + } + , SVG.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: R.css { fill: "url(#f)" } + , transform: "translate(0 -484)" + } + , SVG.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: R.css { fill: "#5c0bc2" } + , transform: "translate(0 -484)" + } + , SVG.defs + { children: + [ SVG.linearGradient + { id: "a" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "rotate(90 58 542) scale(427)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#e683ff", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#ff97f5", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "b" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "matrix(0 124.08 -124.08 0 600 649)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#cc60ff", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#e062ff", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "c" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: + "matrix(0 238.356 -238.356 0 600 731.658)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#a32eff", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#c03cff", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "d" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "matrix(0 452 -452 0 600 911)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#8600f0", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#b659ff", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "e" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "matrix(0 359 -359 0 600 1050)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#ca33ff", stopOpacity: "1" } + } + , SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#7d17ff", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#843dde", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "f" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "matrix(0 121.48 -121.48 0 600 1362.52)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#6706e3", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#682de7", stopOpacity: "1" } + } + ] + } + ] + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Warn.purs b/src/Yoga/Block/Icon/SVG/Warn.purs index f35539c..6713f5d 100644 --- a/src/Yoga/Block/Icon/SVG/Warn.purs +++ b/src/Yoga/Block/Icon/SVG/Warn.purs @@ -14,7 +14,8 @@ warn = , strokeMiterlimit: "2" , children: [ SVG.path - { d: "M41.478 15.313a9.704 9.704 0 0117.044 0L91.27 75.397a9.706 9.706 0 01-8.522 14.351H17.252A9.705 9.705 0 018.73 75.397l32.748-60.084zM50 77.357c2.909 0 5.432-2.432 5.455-5.455-.023-2.977-2.546-5.409-5.455-5.409-3 0-5.477 2.432-5.454 5.409C44.523 74.925 47 77.357 50 77.357zm5.046-44.137H44.932l.909 29.591h8.318l.887-29.591z" + { d: + "M41.478 15.313a9.704 9.704 0 0117.044 0L91.27 75.397a9.706 9.706 0 01-8.522 14.351H17.252A9.705 9.705 0 018.73 75.397l32.748-60.084zM50 77.357c2.909 0 5.432-2.432 5.455-5.455-.023-2.977-2.546-5.409-5.455-5.409-3 0-5.477 2.432-5.454 5.409C44.523 74.925 47 77.357 50 77.357zm5.046-44.137H44.932l.909 29.591h8.318l.887-29.591z" , fill: "var(--stroke-colour)" } ] diff --git a/src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs b/src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs index bc3bed3..19021d0 100644 --- a/src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs +++ b/src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs @@ -4,74 +4,87 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -whatsAppLogo :: JSX +whatsAppLogo ∷ JSX whatsAppLogo = SVG.svg - { viewBox: "0 0 1281 1067" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.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: R.css { fill: "#fff", fillRule: "nonzero" } - , transform: "translate(546.49 392.227)" - } - , SVG.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: R.css { fill: "url(#a)", fillRule: "nonzero" } - , transform: "matrix(0 -406.194 -406.194 0 640.266 738.97)" - } - , SVG.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: R.css { fill: "url(#b)", fillRule: "nonzero" } - , transform: "matrix(0 -420.76 -420.76 0 640.264 746.25)" - } - , SVG.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: R.css { fill: "#fff" } - , transform: "translate(588.995 628.453)" - } - , SVG.defs - { children: - [ SVG.linearGradient - { id: "a" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "scale(1 -1)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#20b038", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#60d66a", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "b" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "scale(1 -1)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#f9f9f9", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "white", stopOpacity: "1" } - } - ] - } - ] - } - ] - } \ No newline at end of file + { viewBox: "0 0 1281 1067" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.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: R.css { fill: "#fff", fillRule: "nonzero" } + , transform: "translate(546.49 392.227)" + } + , SVG.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: R.css { fill: "url(#a)", fillRule: "nonzero" } + , transform: "matrix(0 -406.194 -406.194 0 640.266 738.97)" + } + , SVG.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: R.css { fill: "url(#b)", fillRule: "nonzero" } + , transform: "matrix(0 -420.76 -420.76 0 640.264 746.25)" + } + , SVG.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: R.css { fill: "#fff" } + , transform: "translate(588.995 628.453)" + } + , SVG.defs + { children: + [ SVG.linearGradient + { id: "a" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "scale(1 -1)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#20b038", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#60d66a", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "b" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "scale(1 -1)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#f9f9f9", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "white", stopOpacity: "1" } + } + ] + } + ] + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Icon/SVG/Yoga1.purs b/src/Yoga/Block/Icon/SVG/Yoga1.purs index 22a960d..e70e96b 100644 --- a/src/Yoga/Block/Icon/SVG/Yoga1.purs +++ b/src/Yoga/Block/Icon/SVG/Yoga1.purs @@ -4,220 +4,258 @@ import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.DOM.SVG as SVG -yoga1 :: JSX +yoga1 ∷ JSX yoga1 = SVG.svg - { viewBox: "0 0 2000 2000" - , xmlns: "http://www.w3.org/2000/svg" - , xmlSpace: "preserve" - , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" } - , children: - [ SVG.path - { d: "M1514.4 1322.9c-12.9-7.3-28.1-11.2-43.7-11.2l-444.8-.9-444.8.9c-15.6 0-30.8 3.9-43.7 11.2l-280 158.1c-10.9 6.1-5.7 20.4 7.4 20.4H1787c13.1 0 18.3-14.3 7.4-20.4l-280-158.1z" - , style: R.css { fill: "url(#a)", fillRule: "nonzero" } - } - , SVG.path - { d: "M1308 1318.9c-.6-2.5-1.2-5.1-1.8-7.6l-42-.1c14.9 62.4 31.8 124.4 50.7 185.9.4 1.4.9 2.9 1.3 4.3h42.7c-18.9-60.3-35.9-121.1-50.9-182.5zM1143.7 1328l.3-17-40.9-.1c-1.1 60-.2 120.1 2.7 180.1.2 3.5.4 7 .5 10.5h41c-3.1-57.8-4.3-115.6-3.6-173.5zM1509.3 1447.7c-31.1-41.1-61-83.1-89.7-125.7-2.3-3.4-4.6-6.9-6.9-10.3l-48.4-.1c42.6 65.1 87.9 128.5 135.9 190h50.8c-14.1-17.9-28.1-35.8-41.7-53.9zM958.8 1310.9c-4.5 59-8.9 117.9-13.4 176.9-.3 4.6-.7 9.1-1 13.7h40.9c4.3-56.8 8.6-113.7 12.9-170.5.5-6.7 1-13.4 1.5-20.2l-40.9.1zM652.1 1371.6c17.6-19.6 34.5-39.7 51-60.1l-51.7.1c-.6.8-1.3 1.5-1.9 2.3-7.4 8.8-15 17.5-22.6 26.1-14.9 16.8-30.3 33.2-46 49.2-32.2 32.7-66 64-101.5 93.5-7.6 6.4-15.4 12.6-23.1 18.8h62.4c47.3-40.4 92-83.8 133.4-129.9zM884.7 1354.4c8.5-14.5 16.9-28.9 25.4-43.4l-46.9.1c-33.1 56.6-66.2 113.2-99.3 169.7-4 6.9-8 13.8-12.1 20.6h46.9c28.7-48.9 57.3-98 86-147z" - , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } - } - , SVG.g - { children: - [ SVG.path - { d: "M660.2 670.2c-3.3-17-16.9-29.1-29.4-40-1.9-1.7-4.4-.5-5.2 1.3-14.6.8-29.8 16.2-30.7 29.6-.5 8.2 1.3 16.5 3.4 24.4 1.7 6.4 4 13 8.6 18 9.9 10.7 28.4 7.9 39.7 1.2 12.3-7.1 16.2-21.3 13.6-34.5zM631.4 799.7c-8.2-8-23.3-14.4-23.2-27.7 0-3.6-4.6-4.3-6.2-1.9-1-.3-2.2-.1-3.2.8-3.6 3.4-9.4 1.6-13.7.8-4.7-.9-9.3-1.4-14.1-.5-9.1 1.8-16.8 8.3-21.9 15.9-6.2 9.2-8.1 20.5-8.4 31.3-.2 5.8.1 11.5.5 17.3.3 5.4.6 11.2 3.6 15.9 2.5 3.9 6.8 6.9 11.6 6.8 4.9-.1 8.7-3.2 12.6-5.8 10.4-6.7 22 .3 32.1 3.9 9.9 3.5 20.2 3.6 29-2.7 7.7-5.5 12.5-14 13.4-23.4 1-11.2-4.1-22.8-12.1-30.7z" - , style: R.css { fill: "#151b35", fillRule: "nonzero" } - } - , SVG.path - { d: "M799.8 1183.9c2.9-1.9 215.9-207.9 243-212.1 41.8-6.5 430.3 21 430.3 21l-270.7 56.3-165.9 27.5-159.1 200.5-77.6-93.2z" - , style: R.css { fill: "#5b94cb", fillRule: "nonzero" } - } - , SVG.path - { d: "M578.5 801.6s-10.2 63.8 10.2 78.5c20.3 14.7 116.9 49.2 124.6 85.4 7.6 36.2-3.8 70.7 5.1 94 8.9 23.3 95.8 142.1 122.4 133.7 26.7-8.4 190.7-212.2 225.6-211.5 35 .6 252.1 3.9 329.6-3.9 77.5-7.8 139.6-30.2 191.7-37.3 52.1-7.1 79.9-5.8 81.8 7.8 1.9 13.6 2.8 22.6-37.8 34.9-40.7 12.3-83.5 17.4-88 38.8-4.4 21.3-25 59.7-57.4 35.1s-29-35.7-49.4-28.5c-20.3 7.1-201.7 78.9-253.2 76-49.4-2.8-76.7-18.6-84.9-9.5-8.2 9.1-89.6 136.5-107.4 172.1-17.8 35.6-66.8 133.6-135.4 136.8-68.6 3.2-106.8 8.4-136-33-29.2-41.4-45.8-127.4-83.3-168.2-37.5-40.7-115-138.4-132.8-177.9-17.8-39.5-24-87.5-17-117.3 7-29.8 26.5-76.7 28.4-150.5l63.2 44.5z" - , style: R.css { fill: "url(#b)", fillRule: "nonzero" } - } - , SVG.path - { d: "M636.5 694.8c-2.1-55.1-50.1-71.3-50.1-71.3-116.6 16.7-97 102.8-79.5 148.8 17.5 46 62.7 47.2 96.5 47.1 20.4-.1 29.1-25.7 32.4-60.1 3.7-.7 17.6-5.3 17.5-9.3-.1-3.7-11.2-23.2-15.3-30.3-.7-8.3-1.2-16.7-1.5-24.9z" - , style: R.css { fill: "url(#c)", fillRule: "nonzero" } - } - , SVG.path - { d: "M718.3 1059.5c-8.9-23.3 2.5-57.8-5.1-94-3-14.5-20.3-28.6-41.2-41.4-28.7 13-47.9-13.9-104.2-31.4-3.7-1.1-7.2-2-10.6-2.7-25.4-5.2-51.6 6.2-64.3 28.8-5.4 9.7-8.8 22.1-7.4 37.8.1 1.5.2 2.9.2 4.1 2.8 21.3 8.9 43.9 18.1 64.3 17.8 39.5 95.3 137.1 132.8 177.9 3.2 3.5 6.2 7.2 9.1 11.3 88.8-20.6 126.8-76.2 126.8-76.2-26-31.6-49.8-66.9-54.2-78.5zm-185.9-39.8c-47.1-58.3-12.6-97-12.6-97l135.9 110.5s-76 44.9-123.3-13.5z" - , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } - } - , SVG.path - { d: "M512.8 934.5c3.3-7.6 7-11.8 7-11.8l5.9 4.8c.3-1 .5-2 .5-3 0-5.8-4.7-10.4-10.4-10.4-5.8 0-10.4 4.7-10.4 10.4-.1 4.7 3.1 8.7 7.4 10z" - , style: R.css { fill: "#f6b734", fillRule: "nonzero" } - } - , SVG.circle - { cx: "576.8" - , cy: "1092.1" - , r: "10.4" - , style: R.css { fill: "#f6b734" } - } - , SVG.path - { d: "M526.2 1021.3c2.2 0 4.3-.7 6-1.9-4.8-5.9-8.7-11.6-11.9-17.1-2.7 1.9-4.5 5-4.5 8.6 0 5.7 4.6 10.4 10.4 10.4zM618.5 1170.2c-3 0-5.6 1.2-7.5 3.2 4.7 5.6 9.2 10.9 13.5 15.8 2.7-1.9 4.5-5 4.5-8.5 0-5.9-4.7-10.5-10.5-10.5z" - , style: R.css { fill: "#f6b734", fillRule: "nonzero" } - } - , SVG.circle - { cx: "720.3" - , cy: "1124" - , r: "10.4" - , style: R.css { fill: "#f6b734" } - } - , SVG.circle - { cx: "660.3" - , cy: "1081.7" - , r: "10.4" - , style: R.css { fill: "#f6b734" } - } - , SVG.circle - { cx: "670.8" - , cy: "1144.8" - , r: "10.4" - , style: R.css { fill: "#f6b734" } - } - , SVG.path - { d: "M692.9 1188.7c-5.8 0-10.4 4.7-10.4 10.4 0 1.2.2 2.3.6 3.4 6.7-2.7 13-5.5 19-8.5-1.9-3.1-5.3-5.3-9.2-5.3z" - , style: R.css { fill: "#f6b734", fillRule: "nonzero" } - } - , SVG.circle - { cx: "682.5" - , cy: "965.5" - , r: "10.4" - , style: R.css { fill: "#f6b734" } - } - , SVG.g - { children: - [ SVG.path - { d: "M655.7 1159.6c.6-4.5 0-10-5.2-11.2-2.8-.7-5.6.6-8.5-.1-3.3-.8-5.7-3.4-6.6-6.5-.8-2.8-5.2-1.6-4.4 1.2 1.3 4.7 5 8.5 9.8 9.7 2.7.7 5-.2 7.7 0 3.6.3 3.1 4.2 2.7 6.9-.4 2.8 4.1 2.8 4.5 0zM555.7 1063.9c4.1-4.4.7-10.2-4.3-11.8-3.3-1-7-.3-10.2-1.5-3.6-1.4-5.6-4.8-6.2-8.4-.5-2.9-4.9-1.7-4.4 1.2.8 4.6 3.5 8.8 7.7 10.9 2.3 1.2 4.8 1.4 7.3 1.6 1.7.1 10.3 1.2 6.9 4.8-2 2.1 1.2 5.3 3.2 3.2zM624.4 1077.8c3-1.8 5.2-4.8 5.9-8.3.4-2.1.3-4.2.5-6.3.1-1.7 1.7-7.6 4.5-5 2.1 2 5.3-1.2 3.2-3.2-2.1-1.9-5-2.4-7.6-1-3.2 1.7-4.3 5.3-4.6 8.7-.4 4.7-.1 9.5-5.1 11.7-4.3 1.9-8.7-.7-10.5-4.7-1.2-2.7-5.1-.4-3.9 2.3 2.9 6.6 11.2 9.6 17.6 5.8zM632.4 944.3c-1.5 2.2-1.9 4.8-2.5 7.4-.3 1.3-2.7 8.6-4.9 5-1.5-2.5-5.5-.2-3.9 2.3 2.8 4.5 9 3.3 11.5-1 1.6-2.8 1.6-5.9 2.5-8.9 1.2-3.9 4.8-5.8 8.7-5.3 2.9.4 2.9-4.2 0-4.5-4.3-.6-8.8 1.3-11.4 5zM755.4 1130.6c-7.7 1.1-13.3 7.6-15.7 14.7-1 2.8 3.4 3.9 4.4 1.2 1.5-4.4 4.5-8.5 8.8-10.5 5.3-2.4 10.2.3 15.3 1.8 1.3.4 2.6.7 4 .9.4-.5.5-.7.5-.7-1.3-1.5-2.5-3.1-3.8-4.6-.2-.1-.4-.1-.6-.2-4.3-1.5-8.4-3.3-12.9-2.6zM651.4 1186.3c-1.7-2.4-5.6-.1-3.9 2.3 4.4 6.1-3.2 12-8.4 16.8.9 1.1 1.9 2.2 2.8 3.4 1.1-1.2 2.3-2.3 3.6-3.4 5.1-4.6 10.8-12.2 5.9-19.1zM500.1 934.9c-3.9 2.5-6.6 6.4-7.3 11-.4 2.4 0 4.6.6 7 .4 1.5 2.6 8.8-1.4 7.3-2.7-1-3.9 3.4-1.2 4.4 5.3 1.9 8.7-3.6 8.1-8.2-.3-3-1.9-5.8-1.8-8.9.2-3.6 2.2-6.7 5.2-8.6 2.6-1.7.3-5.6-2.2-4zM705 977.4c.4-2.9-4.2-2.9-4.5 0-.8 6.5 5.8 10.3 11.6 9.4 1.3-.2 2.5-.6 3.7-1.1-.1-1.6-.2-3.3-.3-5-3.8 2-11.3 3.1-10.5-3.3zM579.4 922c0-3.3 1.8-6.3 4.9-7.6 3.6-1.4 6.7.2 9.7 2.1 4.3 2.8 9.6 5.6 14.5 2.4 2.4-1.6.2-5.5-2.3-3.9-3.9 2.6-8.1-1.3-11.3-3.3-2.8-1.7-5.8-2.7-9-2.4-6.5.7-10.9 6.2-11 12.6-.1 3.1 4.4 3.1 4.5.1zM694.5 1096.8c3.9-4.4 7-9.6 5.4-15.6-.8-2.8-5.1-1.6-4.4 1.2 2.3 8.3-8.3 13.8-11.3 20.6-2.5 5.6-1 12.4 5.1 14.7 2.7 1 3.9-3.3 1.2-4.4-3.2-1.2-3.5-5.2-2.4-8 1.2-3.3 4-5.8 6.4-8.5zM724.6 1170.7c-6.2.5-14.4.4-15.6-7.4-.4-2.9-4.8-1.7-4.4 1.2 1.4 8.9 10.7 11.5 18.4 10.8 2.1-.2 4.3-.6 6.3-.2 1 .2 1.8.6 2.4 1.1 1.3-.9 2.5-1.8 3.8-2.7-2.7-2.7-6.9-3.1-10.9-2.8zM726.4 1180.1c.8-.5 1.5-1 2.3-1.5-1.1-.3-2 .5-2.3 1.5zM679.4 942c.5-5.6 8.2-.7 10.2.8 2.6 1.9 5.2 3.5 8.2 4.6 1.8.6 3.7.9 5.5.9-2-2.2-4.3-4.5-6.8-6.7-2.7-1.5-5.3-3.5-7.7-4.8-5.4-3-13.3-2.1-13.9 5.3-.3 2.8 4.3 2.7 4.5-.1zM587.4 1144.7c1 1.3 2.1 2.6 3.1 3.8 2.5-.9 4.7-2.8 6-5.7 1.9-4.2.5-8.3-1.2-12.2-1-2.3-2.4-5-1.7-7.6.8-2.7 3.5-4 6.2-3.7 2.9.3 2.9-4.2 0-4.5-8-.8-12.5 7-10.1 14 1.3 3.8 4.6 8.1 2.6 12.2-1 2.4-2.9 3.5-4.9 3.7z" - , style: R.css { fill: "#a36da7", fillRule: "nonzero" } - } - ] - } - , SVG.path - { d: "M793.6 1161.7c-33.1 75.4-127.1 89.2-127.1 89.2 5.7 12.4 11 25.5 16.1 38.6 10 3.3 18.8 6 19.4 5.7 1.3-.6 95-92.7 114.6-112-7.1-5.5-14.9-13-23-21.5z" - , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } - } - , SVG.path - { d: "M1066.4 981.6c-35-.6-198.9 203.1-225.6 211.5-8.3 2.6-22.2-7-37.9-22.1-10.3 21.4-44.7 76.2-130.8 92.5 16.5 38.7 29.7 81.7 47.9 107.5 29.2 41.4 67.4 36.2 136 33 68.6-3.2 117.6-101.5 135.4-137.1 17.8-35.6 99.1-163 107.4-172.1 8.3-9.1 35.5 6.8 84.9 9.5 45 2.5 189.4-52 238.5-70.5 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-77.5 7.8-294.6 4.6-329.5 3.9z" - , style: R.css { fill: "url(#d)", fillRule: "nonzero" } - } - , SVG.path - { d: "M1395.8 1043.7c10.4-3.8 19.3-7.2 26.4-9.9 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-3.4.3-7 .7-10.9 1 6 12.9 15.9 39.5 10.8 65z" - , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } - } - , SVG.path - { d: "M716.5 1244.8c20.9 9.8 27.9 34.4 39.4 52.5 6.4 10.1 14.4 18.7 24.9 24.6 10.6 6 22.6 9.1 34.7 9.9 57 3.4 98.7-46.2 126.8-89.5 31.2-48.2 54.3-102.2 94.7-143.9 18.4-19 40.2-35.2 65.3-44.1 29.6-10.4 61.2-8.8 92.1-7.5 31.2 1.3 62.2.4 93.2-4 31.3-4.4 62.1-12 91.8-22.7 7.1-2.6 14.2-5.3 21.2-8.2 3.8-1.6 2.1-7.8-1.7-6.2-57.8 23.9-120.2 36-182.7 35.3-31.2-.4-62.7-4.1-93.7 1.4-26.2 4.6-49.9 16.9-70.5 33.5-44 35.6-70 86.7-97.9 134.7-14.7 25.3-30.4 50.4-50.4 71.9-18 19.4-40.5 36.4-67 41.5-24 4.6-51.3-1.1-67.9-20-14.8-16.8-20-40.2-36.2-55.9-3.7-3.6-8-6.6-12.7-8.8-3.8-1.8-7.1 3.7-3.4 5.5z" - , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } - } - , SVG.path - { d: "M772.6 1213.6c15.4 33.9 20.7 71.5 13.9 108.1-.8 4.1 5.5 5.8 6.2 1.7 7.2-38.5 1.6-77.5-14.5-113.1-1.8-3.7-7.3-.4-5.6 3.3z" - , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } - } - , SVG.path - { d: "M519.8 922.7s31-36.9 85.4 4.9c54.3 41.7 152.3 114.5 165.9 122.2 13.6 7.8 93.1 26.2 150.4 46.6 57.2 20.4 107.7 25.2 140.7 24.3 33-1 65 19.4 71.8 23.3 6.8 3.9-1 35.9-15.5 36.9-14.6 1-63.1 14.6-87.3 3.9-24.3-10.7-40.7-27.5-67.9-25.9-27.2 1.6-103.8-13.9-142.6-25.5s-124.2-35.9-146.5-47.5c-22.3-11.6-118.4-54.3-142.6-78.6-24.4-24.4-27.3-65.2-11.8-84.6z" - , style: R.css { fill: "url(#e)", fillRule: "nonzero" } - } - , SVG.path - { d: "M632.6 631.6c-24.1-19-58.1-26.8-88.2-21.7-31.1 5.3-52.2 33.5-66.7 59.3-7.6 13.5-11.4 29.6-21.8 41.4-9 10.2-26.4 16.7-26.8 32.3-.2 7.9 4.4 14.6 6.6 21.9 2.3 7.4-.5 12.7-5.1 18.5-3.9 4.9-8.4 10-9.1 16.5-.8 7.2 3.5 12.9 7.8 18.3 2.6 3.2 5 6.4 6.1 10.5 1.1 3.9 1.3 8 1.8 12 1 7.8 3.9 15.4 11.8 18.5 8.6 3.4 17.7.2 25.6-3.6 9.9-4.8 19.8-9 30.9-5.2.5.2 1 .2 1.4.2 8.2 2.6 17.5.9 23.7-5.4 6.9-6.9 8.2-16.9 5.1-25.9-2.8-7.8-9.9-16.5-8.5-25.2 1.5-9.1 13.1-12.6 19.5-17.6 7.5-5.9 12.7-14.9 14.2-24.4 1.7-10.7-2-20-5.1-30.1-1.6-5.1-2.7-10.5-1.6-15.8 1-4.6 3.5-8.8 6.6-12.3 7.1-7.9 16.9-12.3 26.7-15.9 11.4-4.2 23.2-8 32.5-16 8-6.8 13.9-16.5 13.5-27.2.4-.9.3-2.1-.9-3.1z" - , style: R.css { fill: "#1c2246", fillRule: "nonzero" } - } - ] - } - , SVG.defs - { children: - [ SVG.linearGradient - { id: "b" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "rotate(-135.047 935.926 373.35) scale(962.362)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#ff956e", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#e87054", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "c" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "rotate(-135.047 483.856 263.204) scale(185.823)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#ff956e", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#e87054", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "d" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "scale(178.61) rotate(86.92 -.587 6.444)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#8aadd7", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#5b94cb", stopOpacity: "1" } - } - ] - } - , SVG.linearGradient - { id: "e" - , x1: "0" - , y1: "0" - , x2: "1" - , y2: "0" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "scale(-608.847) rotate(44.953 1.68 -3.09)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#ff956e", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#e87054", stopOpacity: "1" } - } - ] - } - , SVG.radialGradient - { id: "a" - , cx: "0" - , cy: "0" - , r: "1" - , gradientUnits: "userSpaceOnUse" - , gradientTransform: "matrix(678.54 0 0 569.293 786.739 1406.13)" - , children: - [ SVG.stop - { offset: "0" - , style: R.css { stopColor: "#944e9b", stopOpacity: "1" } - } - , SVG.stop - { offset: "1" - , style: R.css { stopColor: "#a36da7", stopOpacity: "1" } - } - ] - } - ] - } - ] - } \ No newline at end of file + { viewBox: "0 0 2000 2000" + , xmlns: "http://www.w3.org/2000/svg" + , xmlSpace: "preserve" + , style: R.css + { fillRule: "evenodd" + , clipRule: "evenodd" + , strokeLinejoin: "round" + , strokeMiterlimit: "2" + } + , children: + [ SVG.path + { d: + "M1514.4 1322.9c-12.9-7.3-28.1-11.2-43.7-11.2l-444.8-.9-444.8.9c-15.6 0-30.8 3.9-43.7 11.2l-280 158.1c-10.9 6.1-5.7 20.4 7.4 20.4H1787c13.1 0 18.3-14.3 7.4-20.4l-280-158.1z" + , style: R.css { fill: "url(#a)", fillRule: "nonzero" } + } + , SVG.path + { d: + "M1308 1318.9c-.6-2.5-1.2-5.1-1.8-7.6l-42-.1c14.9 62.4 31.8 124.4 50.7 185.9.4 1.4.9 2.9 1.3 4.3h42.7c-18.9-60.3-35.9-121.1-50.9-182.5zM1143.7 1328l.3-17-40.9-.1c-1.1 60-.2 120.1 2.7 180.1.2 3.5.4 7 .5 10.5h41c-3.1-57.8-4.3-115.6-3.6-173.5zM1509.3 1447.7c-31.1-41.1-61-83.1-89.7-125.7-2.3-3.4-4.6-6.9-6.9-10.3l-48.4-.1c42.6 65.1 87.9 128.5 135.9 190h50.8c-14.1-17.9-28.1-35.8-41.7-53.9zM958.8 1310.9c-4.5 59-8.9 117.9-13.4 176.9-.3 4.6-.7 9.1-1 13.7h40.9c4.3-56.8 8.6-113.7 12.9-170.5.5-6.7 1-13.4 1.5-20.2l-40.9.1zM652.1 1371.6c17.6-19.6 34.5-39.7 51-60.1l-51.7.1c-.6.8-1.3 1.5-1.9 2.3-7.4 8.8-15 17.5-22.6 26.1-14.9 16.8-30.3 33.2-46 49.2-32.2 32.7-66 64-101.5 93.5-7.6 6.4-15.4 12.6-23.1 18.8h62.4c47.3-40.4 92-83.8 133.4-129.9zM884.7 1354.4c8.5-14.5 16.9-28.9 25.4-43.4l-46.9.1c-33.1 56.6-66.2 113.2-99.3 169.7-4 6.9-8 13.8-12.1 20.6h46.9c28.7-48.9 57.3-98 86-147z" + , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } + } + , SVG.g + { children: + [ SVG.path + { d: + "M660.2 670.2c-3.3-17-16.9-29.1-29.4-40-1.9-1.7-4.4-.5-5.2 1.3-14.6.8-29.8 16.2-30.7 29.6-.5 8.2 1.3 16.5 3.4 24.4 1.7 6.4 4 13 8.6 18 9.9 10.7 28.4 7.9 39.7 1.2 12.3-7.1 16.2-21.3 13.6-34.5zM631.4 799.7c-8.2-8-23.3-14.4-23.2-27.7 0-3.6-4.6-4.3-6.2-1.9-1-.3-2.2-.1-3.2.8-3.6 3.4-9.4 1.6-13.7.8-4.7-.9-9.3-1.4-14.1-.5-9.1 1.8-16.8 8.3-21.9 15.9-6.2 9.2-8.1 20.5-8.4 31.3-.2 5.8.1 11.5.5 17.3.3 5.4.6 11.2 3.6 15.9 2.5 3.9 6.8 6.9 11.6 6.8 4.9-.1 8.7-3.2 12.6-5.8 10.4-6.7 22 .3 32.1 3.9 9.9 3.5 20.2 3.6 29-2.7 7.7-5.5 12.5-14 13.4-23.4 1-11.2-4.1-22.8-12.1-30.7z" + , style: R.css { fill: "#151b35", fillRule: "nonzero" } + } + , SVG.path + { d: + "M799.8 1183.9c2.9-1.9 215.9-207.9 243-212.1 41.8-6.5 430.3 21 430.3 21l-270.7 56.3-165.9 27.5-159.1 200.5-77.6-93.2z" + , style: R.css { fill: "#5b94cb", fillRule: "nonzero" } + } + , SVG.path + { d: + "M578.5 801.6s-10.2 63.8 10.2 78.5c20.3 14.7 116.9 49.2 124.6 85.4 7.6 36.2-3.8 70.7 5.1 94 8.9 23.3 95.8 142.1 122.4 133.7 26.7-8.4 190.7-212.2 225.6-211.5 35 .6 252.1 3.9 329.6-3.9 77.5-7.8 139.6-30.2 191.7-37.3 52.1-7.1 79.9-5.8 81.8 7.8 1.9 13.6 2.8 22.6-37.8 34.9-40.7 12.3-83.5 17.4-88 38.8-4.4 21.3-25 59.7-57.4 35.1s-29-35.7-49.4-28.5c-20.3 7.1-201.7 78.9-253.2 76-49.4-2.8-76.7-18.6-84.9-9.5-8.2 9.1-89.6 136.5-107.4 172.1-17.8 35.6-66.8 133.6-135.4 136.8-68.6 3.2-106.8 8.4-136-33-29.2-41.4-45.8-127.4-83.3-168.2-37.5-40.7-115-138.4-132.8-177.9-17.8-39.5-24-87.5-17-117.3 7-29.8 26.5-76.7 28.4-150.5l63.2 44.5z" + , style: R.css { fill: "url(#b)", fillRule: "nonzero" } + } + , SVG.path + { d: + "M636.5 694.8c-2.1-55.1-50.1-71.3-50.1-71.3-116.6 16.7-97 102.8-79.5 148.8 17.5 46 62.7 47.2 96.5 47.1 20.4-.1 29.1-25.7 32.4-60.1 3.7-.7 17.6-5.3 17.5-9.3-.1-3.7-11.2-23.2-15.3-30.3-.7-8.3-1.2-16.7-1.5-24.9z" + , style: R.css { fill: "url(#c)", fillRule: "nonzero" } + } + , SVG.path + { d: + "M718.3 1059.5c-8.9-23.3 2.5-57.8-5.1-94-3-14.5-20.3-28.6-41.2-41.4-28.7 13-47.9-13.9-104.2-31.4-3.7-1.1-7.2-2-10.6-2.7-25.4-5.2-51.6 6.2-64.3 28.8-5.4 9.7-8.8 22.1-7.4 37.8.1 1.5.2 2.9.2 4.1 2.8 21.3 8.9 43.9 18.1 64.3 17.8 39.5 95.3 137.1 132.8 177.9 3.2 3.5 6.2 7.2 9.1 11.3 88.8-20.6 126.8-76.2 126.8-76.2-26-31.6-49.8-66.9-54.2-78.5zm-185.9-39.8c-47.1-58.3-12.6-97-12.6-97l135.9 110.5s-76 44.9-123.3-13.5z" + , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } + } + , SVG.path + { d: + "M512.8 934.5c3.3-7.6 7-11.8 7-11.8l5.9 4.8c.3-1 .5-2 .5-3 0-5.8-4.7-10.4-10.4-10.4-5.8 0-10.4 4.7-10.4 10.4-.1 4.7 3.1 8.7 7.4 10z" + , style: R.css { fill: "#f6b734", fillRule: "nonzero" } + } + , SVG.circle + { cx: "576.8" + , cy: "1092.1" + , r: "10.4" + , style: R.css { fill: "#f6b734" } + } + , SVG.path + { d: + "M526.2 1021.3c2.2 0 4.3-.7 6-1.9-4.8-5.9-8.7-11.6-11.9-17.1-2.7 1.9-4.5 5-4.5 8.6 0 5.7 4.6 10.4 10.4 10.4zM618.5 1170.2c-3 0-5.6 1.2-7.5 3.2 4.7 5.6 9.2 10.9 13.5 15.8 2.7-1.9 4.5-5 4.5-8.5 0-5.9-4.7-10.5-10.5-10.5z" + , style: R.css { fill: "#f6b734", fillRule: "nonzero" } + } + , SVG.circle + { cx: "720.3" + , cy: "1124" + , r: "10.4" + , style: R.css { fill: "#f6b734" } + } + , SVG.circle + { cx: "660.3" + , cy: "1081.7" + , r: "10.4" + , style: R.css { fill: "#f6b734" } + } + , SVG.circle + { cx: "670.8" + , cy: "1144.8" + , r: "10.4" + , style: R.css { fill: "#f6b734" } + } + , SVG.path + { d: + "M692.9 1188.7c-5.8 0-10.4 4.7-10.4 10.4 0 1.2.2 2.3.6 3.4 6.7-2.7 13-5.5 19-8.5-1.9-3.1-5.3-5.3-9.2-5.3z" + , style: R.css { fill: "#f6b734", fillRule: "nonzero" } + } + , SVG.circle + { cx: "682.5" + , cy: "965.5" + , r: "10.4" + , style: R.css { fill: "#f6b734" } + } + , SVG.g + { children: + [ SVG.path + { d: + "M655.7 1159.6c.6-4.5 0-10-5.2-11.2-2.8-.7-5.6.6-8.5-.1-3.3-.8-5.7-3.4-6.6-6.5-.8-2.8-5.2-1.6-4.4 1.2 1.3 4.7 5 8.5 9.8 9.7 2.7.7 5-.2 7.7 0 3.6.3 3.1 4.2 2.7 6.9-.4 2.8 4.1 2.8 4.5 0zM555.7 1063.9c4.1-4.4.7-10.2-4.3-11.8-3.3-1-7-.3-10.2-1.5-3.6-1.4-5.6-4.8-6.2-8.4-.5-2.9-4.9-1.7-4.4 1.2.8 4.6 3.5 8.8 7.7 10.9 2.3 1.2 4.8 1.4 7.3 1.6 1.7.1 10.3 1.2 6.9 4.8-2 2.1 1.2 5.3 3.2 3.2zM624.4 1077.8c3-1.8 5.2-4.8 5.9-8.3.4-2.1.3-4.2.5-6.3.1-1.7 1.7-7.6 4.5-5 2.1 2 5.3-1.2 3.2-3.2-2.1-1.9-5-2.4-7.6-1-3.2 1.7-4.3 5.3-4.6 8.7-.4 4.7-.1 9.5-5.1 11.7-4.3 1.9-8.7-.7-10.5-4.7-1.2-2.7-5.1-.4-3.9 2.3 2.9 6.6 11.2 9.6 17.6 5.8zM632.4 944.3c-1.5 2.2-1.9 4.8-2.5 7.4-.3 1.3-2.7 8.6-4.9 5-1.5-2.5-5.5-.2-3.9 2.3 2.8 4.5 9 3.3 11.5-1 1.6-2.8 1.6-5.9 2.5-8.9 1.2-3.9 4.8-5.8 8.7-5.3 2.9.4 2.9-4.2 0-4.5-4.3-.6-8.8 1.3-11.4 5zM755.4 1130.6c-7.7 1.1-13.3 7.6-15.7 14.7-1 2.8 3.4 3.9 4.4 1.2 1.5-4.4 4.5-8.5 8.8-10.5 5.3-2.4 10.2.3 15.3 1.8 1.3.4 2.6.7 4 .9.4-.5.5-.7.5-.7-1.3-1.5-2.5-3.1-3.8-4.6-.2-.1-.4-.1-.6-.2-4.3-1.5-8.4-3.3-12.9-2.6zM651.4 1186.3c-1.7-2.4-5.6-.1-3.9 2.3 4.4 6.1-3.2 12-8.4 16.8.9 1.1 1.9 2.2 2.8 3.4 1.1-1.2 2.3-2.3 3.6-3.4 5.1-4.6 10.8-12.2 5.9-19.1zM500.1 934.9c-3.9 2.5-6.6 6.4-7.3 11-.4 2.4 0 4.6.6 7 .4 1.5 2.6 8.8-1.4 7.3-2.7-1-3.9 3.4-1.2 4.4 5.3 1.9 8.7-3.6 8.1-8.2-.3-3-1.9-5.8-1.8-8.9.2-3.6 2.2-6.7 5.2-8.6 2.6-1.7.3-5.6-2.2-4zM705 977.4c.4-2.9-4.2-2.9-4.5 0-.8 6.5 5.8 10.3 11.6 9.4 1.3-.2 2.5-.6 3.7-1.1-.1-1.6-.2-3.3-.3-5-3.8 2-11.3 3.1-10.5-3.3zM579.4 922c0-3.3 1.8-6.3 4.9-7.6 3.6-1.4 6.7.2 9.7 2.1 4.3 2.8 9.6 5.6 14.5 2.4 2.4-1.6.2-5.5-2.3-3.9-3.9 2.6-8.1-1.3-11.3-3.3-2.8-1.7-5.8-2.7-9-2.4-6.5.7-10.9 6.2-11 12.6-.1 3.1 4.4 3.1 4.5.1zM694.5 1096.8c3.9-4.4 7-9.6 5.4-15.6-.8-2.8-5.1-1.6-4.4 1.2 2.3 8.3-8.3 13.8-11.3 20.6-2.5 5.6-1 12.4 5.1 14.7 2.7 1 3.9-3.3 1.2-4.4-3.2-1.2-3.5-5.2-2.4-8 1.2-3.3 4-5.8 6.4-8.5zM724.6 1170.7c-6.2.5-14.4.4-15.6-7.4-.4-2.9-4.8-1.7-4.4 1.2 1.4 8.9 10.7 11.5 18.4 10.8 2.1-.2 4.3-.6 6.3-.2 1 .2 1.8.6 2.4 1.1 1.3-.9 2.5-1.8 3.8-2.7-2.7-2.7-6.9-3.1-10.9-2.8zM726.4 1180.1c.8-.5 1.5-1 2.3-1.5-1.1-.3-2 .5-2.3 1.5zM679.4 942c.5-5.6 8.2-.7 10.2.8 2.6 1.9 5.2 3.5 8.2 4.6 1.8.6 3.7.9 5.5.9-2-2.2-4.3-4.5-6.8-6.7-2.7-1.5-5.3-3.5-7.7-4.8-5.4-3-13.3-2.1-13.9 5.3-.3 2.8 4.3 2.7 4.5-.1zM587.4 1144.7c1 1.3 2.1 2.6 3.1 3.8 2.5-.9 4.7-2.8 6-5.7 1.9-4.2.5-8.3-1.2-12.2-1-2.3-2.4-5-1.7-7.6.8-2.7 3.5-4 6.2-3.7 2.9.3 2.9-4.2 0-4.5-8-.8-12.5 7-10.1 14 1.3 3.8 4.6 8.1 2.6 12.2-1 2.4-2.9 3.5-4.9 3.7z" + , style: R.css + { fill: "#a36da7", fillRule: "nonzero" } + } + ] + } + , SVG.path + { d: + "M793.6 1161.7c-33.1 75.4-127.1 89.2-127.1 89.2 5.7 12.4 11 25.5 16.1 38.6 10 3.3 18.8 6 19.4 5.7 1.3-.6 95-92.7 114.6-112-7.1-5.5-14.9-13-23-21.5z" + , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } + } + , SVG.path + { d: + "M1066.4 981.6c-35-.6-198.9 203.1-225.6 211.5-8.3 2.6-22.2-7-37.9-22.1-10.3 21.4-44.7 76.2-130.8 92.5 16.5 38.7 29.7 81.7 47.9 107.5 29.2 41.4 67.4 36.2 136 33 68.6-3.2 117.6-101.5 135.4-137.1 17.8-35.6 99.1-163 107.4-172.1 8.3-9.1 35.5 6.8 84.9 9.5 45 2.5 189.4-52 238.5-70.5 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-77.5 7.8-294.6 4.6-329.5 3.9z" + , style: R.css { fill: "url(#d)", fillRule: "nonzero" } + } + , SVG.path + { d: + "M1395.8 1043.7c10.4-3.8 19.3-7.2 26.4-9.9 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-3.4.3-7 .7-10.9 1 6 12.9 15.9 39.5 10.8 65z" + , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } + } + , SVG.path + { d: + "M716.5 1244.8c20.9 9.8 27.9 34.4 39.4 52.5 6.4 10.1 14.4 18.7 24.9 24.6 10.6 6 22.6 9.1 34.7 9.9 57 3.4 98.7-46.2 126.8-89.5 31.2-48.2 54.3-102.2 94.7-143.9 18.4-19 40.2-35.2 65.3-44.1 29.6-10.4 61.2-8.8 92.1-7.5 31.2 1.3 62.2.4 93.2-4 31.3-4.4 62.1-12 91.8-22.7 7.1-2.6 14.2-5.3 21.2-8.2 3.8-1.6 2.1-7.8-1.7-6.2-57.8 23.9-120.2 36-182.7 35.3-31.2-.4-62.7-4.1-93.7 1.4-26.2 4.6-49.9 16.9-70.5 33.5-44 35.6-70 86.7-97.9 134.7-14.7 25.3-30.4 50.4-50.4 71.9-18 19.4-40.5 36.4-67 41.5-24 4.6-51.3-1.1-67.9-20-14.8-16.8-20-40.2-36.2-55.9-3.7-3.6-8-6.6-12.7-8.8-3.8-1.8-7.1 3.7-3.4 5.5z" + , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } + } + , SVG.path + { d: + "M772.6 1213.6c15.4 33.9 20.7 71.5 13.9 108.1-.8 4.1 5.5 5.8 6.2 1.7 7.2-38.5 1.6-77.5-14.5-113.1-1.8-3.7-7.3-.4-5.6 3.3z" + , style: R.css { fill: "#fffdfd", fillRule: "nonzero" } + } + , SVG.path + { d: + "M519.8 922.7s31-36.9 85.4 4.9c54.3 41.7 152.3 114.5 165.9 122.2 13.6 7.8 93.1 26.2 150.4 46.6 57.2 20.4 107.7 25.2 140.7 24.3 33-1 65 19.4 71.8 23.3 6.8 3.9-1 35.9-15.5 36.9-14.6 1-63.1 14.6-87.3 3.9-24.3-10.7-40.7-27.5-67.9-25.9-27.2 1.6-103.8-13.9-142.6-25.5s-124.2-35.9-146.5-47.5c-22.3-11.6-118.4-54.3-142.6-78.6-24.4-24.4-27.3-65.2-11.8-84.6z" + , style: R.css { fill: "url(#e)", fillRule: "nonzero" } + } + , SVG.path + { d: + "M632.6 631.6c-24.1-19-58.1-26.8-88.2-21.7-31.1 5.3-52.2 33.5-66.7 59.3-7.6 13.5-11.4 29.6-21.8 41.4-9 10.2-26.4 16.7-26.8 32.3-.2 7.9 4.4 14.6 6.6 21.9 2.3 7.4-.5 12.7-5.1 18.5-3.9 4.9-8.4 10-9.1 16.5-.8 7.2 3.5 12.9 7.8 18.3 2.6 3.2 5 6.4 6.1 10.5 1.1 3.9 1.3 8 1.8 12 1 7.8 3.9 15.4 11.8 18.5 8.6 3.4 17.7.2 25.6-3.6 9.9-4.8 19.8-9 30.9-5.2.5.2 1 .2 1.4.2 8.2 2.6 17.5.9 23.7-5.4 6.9-6.9 8.2-16.9 5.1-25.9-2.8-7.8-9.9-16.5-8.5-25.2 1.5-9.1 13.1-12.6 19.5-17.6 7.5-5.9 12.7-14.9 14.2-24.4 1.7-10.7-2-20-5.1-30.1-1.6-5.1-2.7-10.5-1.6-15.8 1-4.6 3.5-8.8 6.6-12.3 7.1-7.9 16.9-12.3 26.7-15.9 11.4-4.2 23.2-8 32.5-16 8-6.8 13.9-16.5 13.5-27.2.4-.9.3-2.1-.9-3.1z" + , style: R.css { fill: "#1c2246", fillRule: "nonzero" } + } + ] + } + , SVG.defs + { children: + [ SVG.linearGradient + { id: "b" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: + "rotate(-135.047 935.926 373.35) scale(962.362)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#ff956e", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#e87054", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "c" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: + "rotate(-135.047 483.856 263.204) scale(185.823)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#ff956e", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#e87054", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "d" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: "scale(178.61) rotate(86.92 -.587 6.444)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#8aadd7", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#5b94cb", stopOpacity: "1" } + } + ] + } + , SVG.linearGradient + { id: "e" + , x1: "0" + , y1: "0" + , x2: "1" + , y2: "0" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: + "scale(-608.847) rotate(44.953 1.68 -3.09)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#ff956e", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#e87054", stopOpacity: "1" } + } + ] + } + , SVG.radialGradient + { id: "a" + , cx: "0" + , cy: "0" + , r: "1" + , gradientUnits: "userSpaceOnUse" + , gradientTransform: + "matrix(678.54 0 0 569.293 786.739 1406.13)" + , children: + [ SVG.stop + { offset: "0" + , style: R.css + { stopColor: "#944e9b", stopOpacity: "1" } + } + , SVG.stop + { offset: "1" + , style: R.css + { stopColor: "#a36da7", stopOpacity: "1" } + } + ] + } + ] + } + ] + } \ No newline at end of file diff --git a/src/Yoga/Block/Internal/CSS.purs b/src/Yoga/Block/Internal/CSS.purs index c6fa788..dcd713a 100644 --- a/src/Yoga/Block/Internal/CSS.purs +++ b/src/Yoga/Block/Internal/CSS.purs @@ -20,13 +20,20 @@ left = str "left" _100percent ∷ StyleProperty _100percent = percent 100.0 -nest ∷ ∀ r rl. RowToList r rl => HomogeneousRowList rl StyleProperty => Record r -> StyleProperty +nest ∷ + ∀ r rl. + RowToList r rl ⇒ + HomogeneousRowList rl StyleProperty ⇒ + Record r → + StyleProperty nest = nested <<< css nestDynamic ∷ ∀ r. - Homogeneous r StyleProperty => - String -> { | r } -> Style + Homogeneous r StyleProperty ⇒ + String → + { | r } → + Style nestDynamic key sp = unsafeCoerce $ Object.singleton key (css sp) diff --git a/src/Yoga/Block/Internal/OptionalProp.purs b/src/Yoga/Block/Internal/OptionalProp.purs index 91f11f2..49c04a3 100644 --- a/src/Yoga/Block/Internal/OptionalProp.purs +++ b/src/Yoga/Block/Internal/OptionalProp.purs @@ -17,55 +17,55 @@ import Unsafe.Coerce (unsafeCoerce) import Untagged.Castable (class Castable, cast) import Untagged.Union (UndefinedOr, defined, fromUndefinedOr, maybeToUor, uorToMaybe) -type Id :: forall k. k -> k +type Id ∷ ∀ k. k → k type Id a = a newtype OptionalProp a = OptionalProp (UndefinedOr a) -setOrDelete - ∷ ∀ r a rNoA key - . IsSymbol key - => Cons key a rNoA r - => Proxy key - -> OptionalProp a - -> { | r } - -> { | r } +setOrDelete ∷ + ∀ r a rNoA key. + IsSymbol key ⇒ + Cons key a rNoA r ⇒ + Proxy key → + OptionalProp a → + { | r } → + { | r } setOrDelete key v = case opToMaybe v of - Nothing -> unsafeDelete (reflectSymbol key) - Just v' -> set key v' + Nothing → unsafeDelete (reflectSymbol key) + Just v' → set key v' -asOptional ∷ ∀ a. a -> OptionalProp a +asOptional ∷ ∀ a. a → OptionalProp a asOptional = cast -asMaybe ∷ ∀ a. a -> Maybe a +asMaybe ∷ ∀ a. a → Maybe a asMaybe = asOptional >>> opToMaybe -composeHandler ∷ EventHandler -> OptionalProp EventHandler -> EventHandler +composeHandler ∷ EventHandler → OptionalProp EventHandler → EventHandler composeHandler handler propsHandler = - mkEffectFn1 \a -> do + mkEffectFn1 \a → do for_ (handler # asMaybe) $ flip runEffectFn1 a for_ (propsHandler # opToMaybe) $ flip runEffectFn1 a -unsafeUnOptional ∷ ∀ a. OptionalProp a -> a +unsafeUnOptional ∷ ∀ a. OptionalProp a → a unsafeUnOptional = unsafeCoerce -unsafeUnMaybe ∷ ∀ a. Maybe a -> a +unsafeUnMaybe ∷ ∀ a. Maybe a → a unsafeUnMaybe = maybeToOp >>> unsafeUnOptional -opToMaybe ∷ ∀ a. OptionalProp a -> Maybe a +opToMaybe ∷ ∀ a. OptionalProp a → Maybe a opToMaybe (OptionalProp x) = uorToMaybe x -maybeToOp ∷ ∀ a. Maybe a -> OptionalProp a +maybeToOp ∷ ∀ a. Maybe a → OptionalProp a maybeToOp mb = OptionalProp (maybeToUor mb) derive instance ntOptionalProp ∷ Newtype (OptionalProp a) _ -instance semigroupOptionalProp ∷ Semigroup a => Semigroup (OptionalProp a) where +instance semigroupOptionalProp ∷ Semigroup a ⇒ Semigroup (OptionalProp a) where append (OptionalProp a) (OptionalProp b) = OptionalProp (maybeToUor (uorToMaybe a <> uorToMaybe b)) -instance monoidOptionalProp ∷ Monoid a => Monoid (OptionalProp a) where +instance monoidOptionalProp ∷ Monoid a ⇒ Monoid (OptionalProp a) where mempty = OptionalProp (defined mempty) instance foldableOptionalProp ∷ Foldable OptionalProp where @@ -81,21 +81,21 @@ instance altOptionalProp ∷ Alt OptionalProp where instance castableOptionalProp ∷ Castable a (OptionalProp a) -getOr ∷ ∀ a. a -> OptionalProp a -> a +getOr ∷ ∀ a. a → OptionalProp a → a getOr default (OptionalProp o) = fromUndefinedOr default o -getOrFlipped ∷ ∀ a. OptionalProp a -> a -> a +getOrFlipped ∷ ∀ a. OptionalProp a → a → a getOrFlipped = flip getOr -ifTrue ∷ ∀ a. a -> a -> OptionalProp Boolean -> a +ifTrue ∷ ∀ a. a → a → OptionalProp Boolean → a ifTrue v alt x = if (x ?|| false) then v else alt -isTruthy ∷ OptionalProp Boolean -> Boolean +isTruthy ∷ OptionalProp Boolean → Boolean isTruthy = getOr false infixr 5 getOrFlipped as ?|| -appendIfDefined ∷ ∀ a. (Semigroup a) => a -> OptionalProp a -> a +appendIfDefined ∷ ∀ a. (Semigroup a) ⇒ a → OptionalProp a → a appendIfDefined a undefOrA = maybe a (a <> _) (opToMaybe undefOrA) infixr 7 appendIfDefined as <>? diff --git a/src/Yoga/Block/Layout/Box/Spec.purs b/src/Yoga/Block/Layout/Box/Spec.purs index a1b8fbc..c712dcb 100644 --- a/src/Yoga/Block/Layout/Box/Spec.purs +++ b/src/Yoga/Block/Layout/Box/Spec.purs @@ -12,10 +12,10 @@ spec = void $ renderComponent Box.component {} it "accepts div props" do - { findByText } <- + { findByText } ← renderComponent Box.component { role: "Heinz" , children: [ R.text "Find me!" ] } - elem <- findByText "Find me!" + elem ← findByText "Find me!" elem `shouldHaveAttribute` "role" diff --git a/src/Yoga/Block/Layout/Box/Story.purs b/src/Yoga/Block/Layout/Box/Story.purs index a00631e..796e159 100644 --- a/src/Yoga/Block/Layout/Box/Story.purs +++ b/src/Yoga/Block/Layout/Box/Story.purs @@ -16,14 +16,14 @@ import Yoga.Block.Container.Style (colour) import Yoga.Block.Container.Style as Styles import Yoga.Block.Layout.Box as Box -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Layout/Box" , decorators: - [ \storyFn -> + [ \storyFn → R.div_ [ element E.global { styles: Styles.global } , unsafePerformEffect storyFn @@ -39,59 +39,92 @@ box = , Block.stack {} [ Box.component [ R.text "Shadow" ] , cluster - [ Box.component [ colText1 F.pink._300 "text" ] - , Box.component [ colText1 F.pink._500 "text" ] - , Box.component [ colText1 F.pink._700 "text" ] + [ Box.component + [ colText1 F.pink._300 "text" ] + , Box.component + [ colText1 F.pink._500 "text" ] + , Box.component + [ colText1 F.pink._700 "text" ] ] , cluster - [ Box.component [ colText1 F.purple._300 "text" ] - , Box.component [ colText1 F.purple._500 "text" ] - , Box.component [ colText1 F.purple._700 "text" ] + [ Box.component + [ colText1 F.purple._300 "text" ] + , Box.component + [ colText1 F.purple._500 "text" ] + , Box.component + [ colText1 F.purple._700 "text" ] ] , cluster - [ Box.component [ colText1 F.violet._300 "text" ] - , Box.component [ colText1 F.violet._500 "text" ] - , Box.component [ colText1 F.violet._700 "text" ] + [ Box.component + [ colText1 F.violet._300 "text" ] + , Box.component + [ colText1 F.violet._500 "text" ] + , Box.component + [ colText1 F.violet._700 "text" ] ] , cluster - [ Box.component [ colText1 F.blue._700 "text" ] - , Box.component [ colText1 F.blue._500 "text" ] - , Box.component [ colText1 F.blue._700 "text" ] + [ Box.component + [ colText1 F.blue._700 "text" ] + , Box.component + [ colText1 F.blue._500 "text" ] + , Box.component + [ colText1 F.blue._700 "text" ] ] , cluster - [ Box.component [ colText1 F.lightBlue._700 "text" ] - , Box.component [ colText1 F.lightBlue._500 "text" ] - , Box.component [ colText1 F.lightBlue._700 "text" ] + [ Box.component + [ colText1 F.lightBlue._700 "text" ] + , Box.component + [ colText1 F.lightBlue._500 "text" ] + , Box.component + [ colText1 F.lightBlue._700 "text" ] ] , cluster - [ Box.component [ colText1 F.teal._300 "text" ] - , Box.component [ colText1 F.teal._500 "text" ] - , Box.component [ colText1 F.teal._700 "text" ] + [ Box.component + [ colText1 F.teal._300 "text" ] + , Box.component + [ colText1 F.teal._500 "text" ] + , Box.component + [ colText1 F.teal._700 "text" ] ] , cluster - [ Box.component [ colText1 F.emerald._300 "text" ] - , Box.component [ colText1 F.emerald._500 "text" ] - , Box.component [ colText1 F.emerald._700 "text" ] + [ Box.component + [ colText1 F.emerald._300 "text" ] + , Box.component + [ colText1 F.emerald._500 "text" ] + , Box.component + [ colText1 F.emerald._700 "text" ] ] , cluster - [ Box.component [ colText1 F.lime._300 "text" ] - , Box.component [ colText1 F.lime._500 "text" ] - , Box.component [ colText1 F.lime._700 "text" ] + [ Box.component + [ colText1 F.lime._300 "text" ] + , Box.component + [ colText1 F.lime._500 "text" ] + , Box.component + [ colText1 F.lime._700 "text" ] ] , cluster - [ Box.component [ colText1 F.yellow._300 "text" ] - , Box.component [ colText1 F.yellow._500 "text" ] - , Box.component [ colText1 F.yellow._700 "text" ] + [ Box.component + [ colText1 F.yellow._300 "text" ] + , Box.component + [ colText1 F.yellow._500 "text" ] + , Box.component + [ colText1 F.yellow._700 "text" ] ] , cluster - [ Box.component [ colText1 F.red._300 "text" ] - , Box.component [ colText1 F.red._500 "text" ] - , Box.component [ colText1 F.red._700 "text" ] + [ Box.component + [ colText1 F.red._300 "text" ] + , Box.component + [ colText1 F.red._500 "text" ] + , Box.component + [ colText1 F.red._700 "text" ] ] , cluster - [ Box.component [ colText1 F.rose._300 "text" ] - , Box.component [ colText1 F.rose._500 "text" ] - , Box.component [ colText1 F.rose._700 "text" ] + [ Box.component + [ colText1 F.rose._300 "text" ] + , Box.component + [ colText1 F.rose._500 "text" ] + , Box.component + [ colText1 F.rose._700 "text" ] ] ] ] @@ -123,5 +156,10 @@ box = (myBox depth) { background = cssStringRGBA col1 , borderRadius = E.str "var(--s1)" - , style = R.css { width: "33%", padding: "20px", textAlign: "center", fontWeight: 500 } + , style = R.css + { width: "33%" + , padding: "20px" + , textAlign: "center" + , fontWeight: 500 + } } diff --git a/src/Yoga/Block/Layout/Box/Style.purs b/src/Yoga/Block/Layout/Box/Style.purs index 3cf5701..8049d35 100644 --- a/src/Yoga/Block/Layout/Box/Style.purs +++ b/src/Yoga/Block/Layout/Box/Style.purs @@ -2,7 +2,7 @@ module Yoga.Block.Layout.Box.Style where import Yoga.Prelude.Style -type Props ∷ forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style , padding ∷ f StyleProperty @@ -18,7 +18,7 @@ type Props f r = | r ) -box ∷ ∀ p. { | Props OptionalProp p } -> Style +box ∷ ∀ p. { | Props OptionalProp p } → Style box props = styles <>? props.css where styles = diff --git a/src/Yoga/Block/Layout/Box/View.purs b/src/Yoga/Block/Layout/Box/View.purs index 18cc81e..861fd8b 100644 --- a/src/Yoga/Block/Layout/Box/View.purs +++ b/src/Yoga/Block/Layout/Box/View.purs @@ -1,4 +1,10 @@ -module Yoga.Block.Layout.Box.View (component, Props, PropsNoChildren, PropsNoChildrenF, PropsF) where +module Yoga.Block.Layout.Box.View + ( component + , Props + , PropsNoChildren + , PropsNoChildrenF + , PropsF + ) where import Yoga.Prelude.View import Yoga.Block.Internal (DivPropsNoChildren) @@ -23,13 +29,13 @@ type PropsNoChildren = type PropsOptional = PropsF OptionalProp -component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p } +component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Box" do - \(props ∷ { | PropsOptional }) ref -> React.do + \(props ∷ { | PropsOptional }) ref → React.do pure $ emotionDiv ref diff --git a/src/Yoga/Block/Layout/Centre/Spec.purs b/src/Yoga/Block/Layout/Centre/Spec.purs index 5862455..4c0c5da 100644 --- a/src/Yoga/Block/Layout/Centre/Spec.purs +++ b/src/Yoga/Block/Layout/Centre/Spec.purs @@ -12,10 +12,10 @@ spec = void $ renderComponent Centre.component {} it "accepts div props" do - { findByText } <- + { findByText } ← renderComponent Centre.component { role: "Heinz" , children: [ R.text "Find me!" ] } - elem <- findByText "Find me!" + elem ← findByText "Find me!" elem `shouldHaveAttribute` "role" diff --git a/src/Yoga/Block/Layout/Centre/Story.purs b/src/Yoga/Block/Layout/Centre/Story.purs index d52414f..93bef38 100644 --- a/src/Yoga/Block/Layout/Centre/Story.purs +++ b/src/Yoga/Block/Layout/Centre/Story.purs @@ -13,14 +13,14 @@ import React.Basic.Emotion as E import Yoga.Block.Container.Style as Styles import Yoga.Block.Layout.Centre as Centre -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Layout/Centre" , decorators: - [ \storyFn -> + [ \storyFn → R.div { children: [ element E.global { styles: Styles.global } @@ -42,17 +42,24 @@ centre = , element Centre.component { children: [ R.text "Default" ] , style: - css { backgroundColor: cssStringRGBA F.orange._500, color: "black" } + css + { backgroundColor: cssStringRGBA F.orange._500 + , color: "black" + } } , element Centre.component { children: [ R.text "Text Centred" ] , style: - css { backgroundColor: cssStringRGBA F.violet._500, color: "white" } + css + { backgroundColor: cssStringRGBA F.violet._500 + , color: "white" + } , andText: true } , element Centre.component { children: [ R.text "With gutters" ] - , style: css { backgroundColor: cssStringRGBA F.pink._700, color: "white" } + , style: css + { backgroundColor: cssStringRGBA F.pink._700, color: "white" } , gutters: 3.0 # E.em } , E.element Centre.component diff --git a/src/Yoga/Block/Layout/Cluster/Spec.purs b/src/Yoga/Block/Layout/Cluster/Spec.purs index c01b292..1e80b95 100644 --- a/src/Yoga/Block/Layout/Cluster/Spec.purs +++ b/src/Yoga/Block/Layout/Cluster/Spec.purs @@ -13,11 +13,11 @@ spec = void $ renderComponent Cluster.component {} it "accepts div props" do - { findByTestId } <- + { findByTestId } ← renderComponent Cluster.component { role: "Heinz" , _data: Object.fromHomogeneous { testid: "cluster" } , children: [ R.text "Find me!" ] } - elem <- findByTestId "cluster" + elem ← findByTestId "cluster" shouldHaveAttributeWithValue elem "role" "Heinz" diff --git a/src/Yoga/Block/Layout/Cluster/Story.purs b/src/Yoga/Block/Layout/Cluster/Story.purs index 8fdbde8..4a25616 100644 --- a/src/Yoga/Block/Layout/Cluster/Story.purs +++ b/src/Yoga/Block/Layout/Cluster/Story.purs @@ -16,14 +16,14 @@ import Yoga.Block.Container.Style (colour) import Yoga.Block.Container.Style as Styles import Yoga.Block.Layout.Cluster as Cluster -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Layout/Cluster" , decorators: - [ \storyFn -> + [ \storyFn → R.div_ [ element E.global { styles: Styles.global } , unsafePerformEffect storyFn @@ -40,7 +40,8 @@ cluster = , children: [ R.h2_ [ R.text "No Options" ] , el Cluster.component - { style: css { backgroundColor: cssStringRGBA F.blue._500 } } + { style: css { backgroundColor: cssStringRGBA F.blue._500 } + } [ power ( R.div { children: [ R.text "Content" ] @@ -63,11 +64,13 @@ cluster = } [ R.div { children: [ R.text "Child 1" ] - , style: css { backgroundColor: cssStringRGBA F.pink._500 } + , style: css + { backgroundColor: cssStringRGBA F.pink._500 } } , R.div { children: [ R.text "Child 2" ] - , style: css { backgroundColor: cssStringRGBA F.emerald._700 } + , style: css + { backgroundColor: cssStringRGBA F.emerald._700 } } ] ] diff --git a/src/Yoga/Block/Layout/Cluster/Style.purs b/src/Yoga/Block/Layout/Cluster/Style.purs index afa4fbf..532b9a9 100644 --- a/src/Yoga/Block/Layout/Cluster/Style.purs +++ b/src/Yoga/Block/Layout/Cluster/Style.purs @@ -4,29 +4,33 @@ import Yoga.Prelude.Style import Yoga.Block.Layout.Types (AlignItems, JustifyContent, alignToString, justifyToString) -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style , space ∷ f String - , rowSpace :: f String - , justifyContent :: f JustifyContent - , alignItems :: f AlignItems + , rowSpace ∷ f String + , justifyContent ∷ f JustifyContent + , alignItems ∷ f AlignItems , justify ∷ f String , align ∷ f String | r ) -cluster ∷ ∀ p. { | Props OptionalProp p } -> Style +cluster ∷ ∀ p. { | Props OptionalProp p } → Style cluster props = styles <>? props.css where - space = (props.space <#> \x -> if x == "0" then "0px" else x) ?|| "var(--s1)" + space = (props.space <#> \x → if x == "0" then "0px" else x) ?|| "var(--s1)" styles = css { display: str "flex" , flexWrap: wrap - , alignItems: ((str <<< alignToString) <$> props.alignItems) ?|| (str <$> props.align) ?|| center - , justifyContent: ((str <<< justifyToString) <$> props.justifyContent) ?|| (str <$> props.justify) ?|| flexStart + , alignItems: ((str <<< alignToString) <$> props.alignItems) + ?|| (str <$> props.align) + ?|| center + , justifyContent: ((str <<< justifyToString) <$> props.justifyContent) + ?|| (str <$> props.justify) + ?|| flexStart , gap: str space , rowGap: (str <$> props.rowSpace) ?|| str space } diff --git a/src/Yoga/Block/Layout/Cluster/View.purs b/src/Yoga/Block/Layout/Cluster/View.purs index d027514..ca4995b 100644 --- a/src/Yoga/Block/Layout/Cluster/View.purs +++ b/src/Yoga/Block/Layout/Cluster/View.purs @@ -1,4 +1,10 @@ -module Yoga.Block.Layout.Cluster.View (component, Props, PropsF, PropsNoChildren, PropsNoChildrenF) where +module Yoga.Block.Layout.Cluster.View + ( component + , Props + , PropsF + , PropsNoChildren + , PropsNoChildrenF + ) where import Yoga.Prelude.View @@ -9,8 +15,8 @@ import Yoga.Block.Layout.Cluster.Style as Style type PropsNoChildrenF f = ( className ∷ f String - , wrapper ∷ f (Array JSX -> JSX) - , childWrapper ∷ f (Array JSX -> JSX) + , wrapper ∷ f (Array JSX → JSX) + , childWrapper ∷ f (Array JSX → JSX) | Style.Props f + DivPropsNoChildren ) @@ -28,13 +34,13 @@ type PropsNoChildren = type PropsOptional = PropsF OptionalProp -component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p } +component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Cluster" do - \(props ∷ { | PropsOptional }) ref -> React.do + \(props ∷ { | PropsOptional }) ref → React.do -- Must be careful here because React fiddles with children let safeChildren = reactChildrenToArray (unsafeCoerce props.children) let wrappedChildren = safeChildren diff --git a/src/Yoga/Block/Layout/Cover/Spec.purs b/src/Yoga/Block/Layout/Cover/Spec.purs index 3d17e3b..486702a 100644 --- a/src/Yoga/Block/Layout/Cover/Spec.purs +++ b/src/Yoga/Block/Layout/Cover/Spec.purs @@ -12,10 +12,10 @@ spec = void $ renderComponent Cover.component {} it "accepts div props" do - { findByText } <- + { findByText } ← renderComponent Cover.component { role: "Heinz" , children: [ R.text "Find me!" ] } - elem <- findByText "Find me!" + elem ← findByText "Find me!" elem `shouldHaveAttribute` "role" diff --git a/src/Yoga/Block/Layout/Cover/Story.purs b/src/Yoga/Block/Layout/Cover/Story.purs index 2b15daf..9263965 100644 --- a/src/Yoga/Block/Layout/Cover/Story.purs +++ b/src/Yoga/Block/Layout/Cover/Story.purs @@ -14,14 +14,14 @@ import Yoga.Block as Block import Yoga.Block.Container.Style as Styles import Yoga.Block.Layout.Cover as Cover -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Layout/Cover" , decorators: - [ \storyFn -> + [ \storyFn → R.div { children: [ element E.global { styles: Styles.global } @@ -42,12 +42,14 @@ cover = [ R.h2_ [ R.text "The Cover" ] , element Cover.component { children: [ R.text "Default" ] - , style: css { backgroundColor: cssStringRGBA F.orange._500, color: "black" } + , style: css + { backgroundColor: cssStringRGBA F.orange._500, color: "black" } , minHeight: E.px 300 } , element Cover.component { children: [ R.text "With Header and Footer" ] - , style: css { backgroundColor: cssStringRGBA F.violet._500, color: "white" } + , style: css + { backgroundColor: cssStringRGBA F.violet._500, color: "white" } , header: R.text "Header" , footer: R.text "Footer" , minHeight: E.px 300 @@ -55,13 +57,19 @@ cover = , Block.cluster_ [ element Cover.component { children: [ R.text "With Header only" ] - , style: css { backgroundColor: cssStringRGBA F.violet._600, color: "white" } + , style: css + { backgroundColor: cssStringRGBA F.violet._600 + , color: "white" + } , header: R.text "Header" , minHeight: E.px 300 } , element Cover.component { children: [ R.text "With Header only centre in remaining" ] - , style: css { backgroundColor: cssStringRGBA F.violet._600, color: "white" } + , style: css + { backgroundColor: cssStringRGBA F.violet._600 + , color: "white" + } , header: R.text "Header" , minHeight: E.px 300 , centreInRemaining: true @@ -70,13 +78,19 @@ cover = , Block.cluster_ [ element Cover.component { children: [ R.text "With Footer only" ] - , style: css { backgroundColor: cssStringRGBA F.emerald._700, color: "white" } + , style: css + { backgroundColor: cssStringRGBA F.emerald._700 + , color: "white" + } , footer: R.text "Footer" , minHeight: E.px 300 } , element Cover.component { children: [ R.text "With Footer only centre in remaining" ] - , style: css { backgroundColor: cssStringRGBA F.teal._600, color: "white" } + , style: css + { backgroundColor: cssStringRGBA F.teal._600 + , color: "white" + } , footer: R.text "Footer" , minHeight: E.px 300 , centreInRemaining: true diff --git a/src/Yoga/Block/Layout/Cover/View.purs b/src/Yoga/Block/Layout/Cover/View.purs index 1018b07..a1324ab 100644 --- a/src/Yoga/Block/Layout/Cover/View.purs +++ b/src/Yoga/Block/Layout/Cover/View.purs @@ -1,4 +1,10 @@ -module Yoga.Block.Layout.Cover.View (component, Props, PropsF, PropsNoChildrenF, PropsNoChildren) where +module Yoga.Block.Layout.Cover.View + ( component + , Props + , PropsF + , PropsNoChildrenF + , PropsNoChildren + ) where import Yoga.Prelude.View @@ -28,36 +34,59 @@ type Props = type PropsOptional = PropsF OptionalProp -component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p } +component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Cover" do - \(props ∷ { | PropsOptional }) ref -> React.do - let - { header, footer } = if props.centreInRemaining # isTruthy then - { header: props.header # foldMap \jsx -> R.div' [ jsx ] - , footer: props.footer # foldMap \jsx -> R.div' [ jsx ] + \(props ∷ { | PropsOptional }) ref → React.do + let + { header, footer } = + if props.centreInRemaining # isTruthy then + { header: props.header # foldMap \jsx → R.div' + [ jsx ] + , footer: props.footer # foldMap \jsx → R.div' + [ jsx ] } else case opToMaybe props.header, opToMaybe props.footer of - Just headerJSX, Just footerJSX -> - { header: R.div' [ headerJSX ] - , footer: R.div' [ footerJSX ] - } - Just headerJSX, Nothing -> - { header: R.div' [ headerJSX ] - , footer: R.div' Style.invisible } /> [ headerJSX ] - } - Nothing, Just footerJSX -> - { header: R.div' Style.invisible } /> [ footerJSX ] - , footer: R.div' [ footerJSX ] - } - Nothing, Nothing -> mempty - - main = - R.div' props.children + Just headerJSX, Just footerJSX → + { header: R.div' + [ headerJSX ] + , footer: R.div' + [ footerJSX ] + } + Just headerJSX, Nothing → + { header: R.div' + [ headerJSX ] + , footer: R.div' + Style.invisible + } + /> [ headerJSX ] + } + Nothing, Just footerJSX → + { header: R.div' + Style.invisible + } + /> [ footerJSX ] + , footer: R.div' + [ footerJSX ] + } + Nothing, Nothing → mempty + + main = + R.div' props.children pure $ emotionDiv ref diff --git a/src/Yoga/Block/Layout/Grid/Spec.purs b/src/Yoga/Block/Layout/Grid/Spec.purs index cafa4f2..de8b476 100644 --- a/src/Yoga/Block/Layout/Grid/Spec.purs +++ b/src/Yoga/Block/Layout/Grid/Spec.purs @@ -12,11 +12,11 @@ spec = void $ renderComponent Grid.component { children: [] } it "accepts div props" do - { findByText } <- + { findByText } ← renderComponent Grid.component { role: "Heinz" , children: [ R.text "Find me!" ] } - elem <- findByText "Find me!" - parent <- elem # getParentOrFailWith "Grid has no parent" + elem ← findByText "Find me!" + parent ← elem # getParentOrFailWith "Grid has no parent" parent `shouldHaveAttribute` "role" diff --git a/src/Yoga/Block/Layout/Grid/Story.purs b/src/Yoga/Block/Layout/Grid/Story.purs index ec93762..d71426a 100644 --- a/src/Yoga/Block/Layout/Grid/Story.purs +++ b/src/Yoga/Block/Layout/Grid/Story.purs @@ -12,18 +12,18 @@ import React.Basic.DOM as R import React.Basic.Emotion as E default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Layout/Grid" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } grid ∷ Effect JSX @@ -34,10 +34,19 @@ grid = [ R.h2_ [ R.text "No Options" ] , element Grid.component { children: - [ R.div { children: [ R.text "Grid" ], style: css { backgroundColor: "teal" } } - , R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } } - , R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } } - ] + [ R.div + { children: [ R.text "Grid" ] + , style: css { backgroundColor: "teal" } + } + , R.div + { children: [ R.text $ power "Content " 10 ] + , style: css { backgroundColor: "darkslateblue" } + } + , R.div + { children: [ R.text $ power "Content " 10 ] + , style: css { backgroundColor: "darkslateblue" } + } + ] , style: css { backgroundColor: "oldlace" } } ] diff --git a/src/Yoga/Block/Layout/Grid/Style.purs b/src/Yoga/Block/Layout/Grid/Style.purs index e0ab258..c74ef69 100644 --- a/src/Yoga/Block/Layout/Grid/Style.purs +++ b/src/Yoga/Block/Layout/Grid/Style.purs @@ -2,7 +2,7 @@ module Yoga.Block.Layout.Grid.Style where import Yoga.Prelude.Style -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style , min ∷ f String @@ -10,12 +10,14 @@ type Props f r = | r ) -grid ∷ ∀ p. { | Props OptionalProp p } -> Style +grid ∷ ∀ p. { | Props OptionalProp p } → Style grid props = styles <>? props.css where styles = css { display: str "grid" , gridGap: props.gridGap ?|| var "--s1" - , gridTemplateColumns: str $ "repeat(auto-fit, minmax(min(" <> (props.min ?|| "20rem") <> ", 100%), 1fr))" + , gridTemplateColumns: str $ "repeat(auto-fit, minmax(min(" + <> (props.min ?|| "20rem") + <> ", 100%), 1fr))" } diff --git a/src/Yoga/Block/Layout/Imposter/Story.purs b/src/Yoga/Block/Layout/Imposter/Story.purs index 713c9c3..4760d4c 100644 --- a/src/Yoga/Block/Layout/Imposter/Story.purs +++ b/src/Yoga/Block/Layout/Imposter/Story.purs @@ -13,18 +13,18 @@ import React.Basic.Emotion as E import Yoga (el) default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Layout/Imposter" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } imposter ∷ Effect JSX @@ -37,7 +37,8 @@ imposter = { style: css { backgroundColor: "hotpink" } } [ R.div_ - $ [ power + $ + [ power ( R.div { children: [ R.text "Content" ] , style: css { backgroundColor: "teal" } diff --git a/src/Yoga/Block/Layout/Imposter/Style.purs b/src/Yoga/Block/Layout/Imposter/Style.purs index fdbe3c8..5326921 100644 --- a/src/Yoga/Block/Layout/Imposter/Style.purs +++ b/src/Yoga/Block/Layout/Imposter/Style.purs @@ -3,7 +3,7 @@ module Yoga.Block.Layout.Imposter.Style where import Yoga.Prelude.Style import Data.Interpolate (i) -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style , margin ∷ f String @@ -12,20 +12,22 @@ type Props f r = | r ) -imposter ∷ ∀ p. { | Props OptionalProp p } -> Style +imposter ∷ ∀ p. { | Props OptionalProp p } → Style imposter props = styles <>? props.css where - styles = - css - { position: (props.fixed <#> if _ then fixed else absolute) ?|| absolute - , top: 50.0 # percent - , left: 50.0 # percent - , transform: str "translate(-50%,-50%)" - , zIndex: str "5" - , "&:.contain": + styles = + css + { position: (props.fixed <#> if _ then fixed else absolute) ?|| absolute + , top: 50.0 # percent + , left: 50.0 # percent + , transform: str "translate(-50%,-50%)" + , zIndex: str "5" + , "&:.contain": nest { overflow: auto - , maxWidth: str $ i "calc(100% - (" (getOr "0px" props.margin) " * 2))" - , maxHeight: str $ i "calc(100% - (" (getOr "0px" props.margin) " * 2))" + , maxWidth: str $ i "calc(100% - (" (getOr "0px" props.margin) + " * 2))" + , maxHeight: str $ i "calc(100% - (" (getOr "0px" props.margin) + " * 2))" } - } + } diff --git a/src/Yoga/Block/Layout/Imposter/View.purs b/src/Yoga/Block/Layout/Imposter/View.purs index af0f9ff..764f063 100644 --- a/src/Yoga/Block/Layout/Imposter/View.purs +++ b/src/Yoga/Block/Layout/Imposter/View.purs @@ -14,13 +14,13 @@ type Props = type PropsOptional = PropsF OptionalProp -component ∷ ∀ p q. Union p q Props => ReactComponent { | p } +component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Imposter" do - \(props ∷ { | PropsOptional }) ref -> React.do + \(props ∷ { | PropsOptional }) ref → React.do pure $ emotionDiv ref props { className: "ry-imposter " <>? props.className diff --git a/src/Yoga/Block/Layout/Sidebar/Spec.purs b/src/Yoga/Block/Layout/Sidebar/Spec.purs index 4e887d8..11e9e2b 100644 --- a/src/Yoga/Block/Layout/Sidebar/Spec.purs +++ b/src/Yoga/Block/Layout/Sidebar/Spec.purs @@ -12,12 +12,12 @@ spec = void $ renderComponent Sidebar.component { sidebar: mempty, children: [] } it "accepts div props" do - { findByText } <- + { findByText } ← renderComponent Sidebar.component { role: "Heinz" , children: [ R.text "Find me!" ] , sidebar: mempty } - elem <- findByText "Find me!" - parent <- elem # getParentOrFailWith "Sidebar has no parent" + elem ← findByText "Find me!" + parent ← elem # getParentOrFailWith "Sidebar has no parent" parent `shouldHaveAttribute` "role" diff --git a/src/Yoga/Block/Layout/Sidebar/Story.purs b/src/Yoga/Block/Layout/Sidebar/Story.purs index 565cb8c..c4170af 100644 --- a/src/Yoga/Block/Layout/Sidebar/Story.purs +++ b/src/Yoga/Block/Layout/Sidebar/Story.purs @@ -14,18 +14,18 @@ import Yoga.Block.Layout.Sidebar as Sidebar import Yoga.Block.Layout.Sidebar.Style (SidebarSide(..)) default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Layout/Sidebar" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } sidebar ∷ Effect JSX @@ -35,35 +35,61 @@ sidebar = [ R.div_ [ R.h2_ [ R.text "No Options" ] , element Sidebar.component - { sidebar: R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } } + { sidebar: R.div + { children: [ R.text "Sidebar" ] + , style: css { backgroundColor: "teal" } + } , children: - [ R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } } - ] + [ R.div + { children: [ R.text $ power "Content " 10 ] + , style: css { backgroundColor: "darkslateblue" } + } + ] , style: css { backgroundColor: "oldlace" } } , R.h2_ [ R.text "Zero Space" ] , element Sidebar.component - { sidebar: R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } } + { sidebar: R.div + { children: [ R.text "Child 1" ] + , style: css { backgroundColor: "teal" } + } , children: - [ R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "darkslateblue" } } - ] + [ R.div + { children: [ R.text "Child 2" ] + , style: css { backgroundColor: "darkslateblue" } + } + ] , style: css { backgroundColor: "oldlace" } , space: "0" } , R.h2_ [ R.text "Wide Side" ] , element Sidebar.component - { sidebar: R.div { contentEditable: true, children: [ R.text $ power "Side " 12 ], style: css { backgroundColor: colour.backgroundLayer4 } } + { sidebar: R.div + { contentEditable: true + , children: [ R.text $ power "Side " 12 ] + , style: css { backgroundColor: colour.backgroundLayer4 } + } , children: - [ R.div { children: [ R.text "Content" ], style: css { backgroundColor: colour.backgroundLayer4 } } - ] + [ R.div + { children: [ R.text "Content" ] + , style: css + { backgroundColor: colour.backgroundLayer4 } + } + ] , style: css { backgroundColor: colour.backgroundLayer2 } } , R.h2_ [ R.text "Sidebar Right" ] , element Sidebar.component - { sidebar: R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } } + { sidebar: R.div + { children: [ R.text $ power "Content " 50 ] + , style: css { backgroundColor: "darkslateblue" } + } , children: - [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } } - ] + [ R.div + { children: [ R.text "Sidebar" ] + , style: css { backgroundColor: "teal" } + } + ] , style: css { backgroundColor: "oldlace" } , sideWidth: "40px" , contentMin: "80%" @@ -72,10 +98,16 @@ sidebar = } , R.h2_ [ R.text "No Stretch" ] , element Sidebar.component - { sidebar: R.div { children: [ R.text $ power "Content " 50 ], style: css { backgroundColor: "darkslateblue" } } + { sidebar: R.div + { children: [ R.text $ power "Content " 50 ] + , style: css { backgroundColor: "darkslateblue" } + } , children: - [ R.div { children: [ R.text "Sidebar" ], style: css { backgroundColor: "teal" } } - ] + [ R.div + { children: [ R.text "Sidebar" ] + , style: css { backgroundColor: "teal" } + } + ] , style: css { backgroundColor: "oldlace" } , noStretch: true , side: SidebarRight diff --git a/src/Yoga/Block/Layout/Sidebar/Style.purs b/src/Yoga/Block/Layout/Sidebar/Style.purs index 8cba1ee..680129c 100644 --- a/src/Yoga/Block/Layout/Sidebar/Style.purs +++ b/src/Yoga/Block/Layout/Sidebar/Style.purs @@ -37,8 +37,9 @@ sidebarContainer props = styles <>? props.css } sidebar ∷ ∀ p. { | Props OptionalProp p } → Style -sidebar props = css { flexBasis: str (props.sideWidth ?|| "20rem"), flexGrow: int 1 } - <>? props.sideBarCss +sidebar props = + css { flexBasis: str (props.sideWidth ?|| "20rem"), flexGrow: int 1 } + <>? props.sideBarCss notSidebar ∷ ∀ p. { | Props OptionalProp p } → Style notSidebar props = css diff --git a/src/Yoga/Block/Layout/Stack/Spec.purs b/src/Yoga/Block/Layout/Stack/Spec.purs index aab046b..64c68d3 100644 --- a/src/Yoga/Block/Layout/Stack/Spec.purs +++ b/src/Yoga/Block/Layout/Stack/Spec.purs @@ -12,11 +12,11 @@ spec = void $ renderComponent Stack.component { children: [] } it "accepts div props" do - { findByText } <- + { findByText } ← renderComponent Stack.component { role: "Heinz" , children: [ R.text "Find me!" ] } - elem <- findByText "Find me!" - parent <- elem # getParentOrFailWith "No parent!" + elem ← findByText "Find me!" + parent ← elem # getParentOrFailWith "No parent!" parent `shouldHaveAttribute` "role" diff --git a/src/Yoga/Block/Layout/Stack/Story.purs b/src/Yoga/Block/Layout/Stack/Story.purs index 2d6f1e2..e9befc1 100644 --- a/src/Yoga/Block/Layout/Stack/Story.purs +++ b/src/Yoga/Block/Layout/Stack/Story.purs @@ -12,18 +12,18 @@ import React.Basic.Emotion as E import Yoga.Block.Internal (_0) default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Layout/Stack" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } stack ∷ Effect JSX @@ -34,17 +34,29 @@ stack = [ R.h2_ [ R.text "No Options" ] , element Stack.component { children: - [ R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } } - , R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "rebeccapurple" } } - ] + [ R.div + { children: [ R.text "Child 1" ] + , style: css { backgroundColor: "teal" } + } + , R.div + { children: [ R.text "Child 2" ] + , style: css { backgroundColor: "rebeccapurple" } + } + ] , style: css { backgroundColor: "darkslateblue" } } , R.h2_ [ R.text "Zero Space" ] , element Stack.component { children: - [ R.div { children: [ R.text "Child 1" ], style: css { backgroundColor: "teal" } } - , R.div { children: [ R.text "Child 2" ], style: css { backgroundColor: "rebeccapurple" } } - ] + [ R.div + { children: [ R.text "Child 1" ] + , style: css { backgroundColor: "teal" } + } + , R.div + { children: [ R.text "Child 2" ] + , style: css { backgroundColor: "rebeccapurple" } + } + ] , style: css { backgroundColor: "darkslateblue" } , space: _0 } @@ -52,17 +64,31 @@ stack = , R.div { style: css { height: "300px", backgroundColor: "tomato" } , children: - [ element Stack.component - { children: - [ R.div { children: [ R.div_ [ R.text "Child 1" ] ], style: css { backgroundColor: "teal" } } - , R.div { children: [ R.div_ [ R.text "Child 2" ] ], style: css { backgroundColor: "rebeccapurple" } } - , R.div { children: [ R.div_ [ R.text "Child 3" ] ], style: css { backgroundColor: "teal" } } - , R.div { children: [ R.div_ [ R.text "Child 4" ] ], style: css { backgroundColor: "rebeccapurple" } } - ] - , style: css { backgroundColor: "darkslateblue" } - , splitAfter: 2 - } - ] + [ element Stack.component + { children: + [ R.div + { children: [ R.div_ [ R.text "Child 1" ] ] + , style: css { backgroundColor: "teal" } + } + , R.div + { children: [ R.div_ [ R.text "Child 2" ] ] + , style: css + { backgroundColor: "rebeccapurple" } + } + , R.div + { children: [ R.div_ [ R.text "Child 3" ] ] + , style: css { backgroundColor: "teal" } + } + , R.div + { children: [ R.div_ [ R.text "Child 4" ] ] + , style: css + { backgroundColor: "rebeccapurple" } + } + ] + , style: css { backgroundColor: "darkslateblue" } + , splitAfter: 2 + } + ] } ] ] diff --git a/src/Yoga/Block/Layout/Story.purs b/src/Yoga/Block/Layout/Story.purs index e46c05e..b073ce2 100644 --- a/src/Yoga/Block/Layout/Story.purs +++ b/src/Yoga/Block/Layout/Story.purs @@ -22,7 +22,7 @@ import Storybook default = meta { title: "Layout" , decorators: - [ metaDecorator $ \story -> do + [ metaDecorator $ \story → do R.div_ [ element E.global { styles: Styles.global } , story @@ -32,7 +32,7 @@ default = meta layout ∷ Effect JSX layout = do - postPreview <- mkPostPreview + postPreview ← mkPostPreview let post1 = postPreview @@ -40,23 +40,28 @@ layout = do , date: "16th May 2021" , author: "Someone W. Knowles" , image: "https://source.unsplash.com/3ujVzg9i2EI/105x130" - , previewText: "When I was a young girl wrestling with 'undefined' not being a function my mother used to come up to me and say: 'Use PureScript'. Now, a mere twenty years later..." + , previewText: + "When I was a young girl wrestling with 'undefined' not being a function my mother used to come up to me and say: 'Use PureScript'. Now, a mere twenty years later..." } post2 = postPreview { title: "The Big Beat Manifesto" , date: "2nd May 2008" , author: "Simon S. Hans" - , image: "https://metro.co.uk/wp-content/uploads/2016/03/super-hans-006.jpg?quality=90&strip=all&zoom=1&resize=644%2C386" - , previewText: "Have you read the Big Beat Manifesto lately? The Big Beat Manifesto goes \"Big Beats are the best, Get high all the time\"." + , image: + "https://metro.co.uk/wp-content/uploads/2016/03/super-hans-006.jpg?quality=90&strip=all&zoom=1&resize=644%2C386" + , previewText: + "Have you read the Big Beat Manifesto lately? The Big Beat Manifesto goes \"Big Beats are the best, Get high all the time\"." } post3 = postPreview { title: "Here's my pitch: New management consultancy" , date: "9th Oct. 2009" , author: "Alan Johnson" - , image: "https://preview.redd.it/3wsbjepf9yt11.png?width=960&crop=smart&auto=webp&s=d9989616ba615464b0a4a9e060250f8858c8a1f9" - , previewText: "In. Fire 30% of the workforce. New logo. Boom! Out! You are now a fully trained management consultant." + , image: + "https://preview.redd.it/3wsbjepf9yt11.png?width=960&crop=smart&auto=webp&s=d9989616ba615464b0a4a9e060250f8858c8a1f9" + , previewText: + "In. Fire 30% of the workforce. New logo. Boom! Out! You are now a fully trained management consultant." } pure $ fragment @@ -73,26 +78,40 @@ layout = do ] ] -mkPostPreview :: Component { title :: String, date :: String, author :: String, image :: String, previewText :: String } +mkPostPreview ∷ + Component + { title ∷ String + , date ∷ String + , author ∷ String + , image ∷ String + , previewText ∷ String + } mkPostPreview = do - component "PostPreview" \{ title, date, author, previewText, image } -> React.do - pure $ - Block.box - { padding: E.str $ size.l <> " " <> size.l <> " " <> size.xl - , className: "post-preview" - , css: boxCss - } - [ Block.stack { space: E.str size.s, splitAfter: 2 } - [ Block.stack { space: E.str size.m } - [ Block.sidebar { sidebar: avatar image, side: SidebarRight, reverseOnWrap: true, contentMin: "30ch", space: size.l } - [ postTitle title ] - , Block.cluster { justify: "space-between", space: size.m } - [ postDate date, postAuthor author ] - ] - , hr - , preview previewText - ] - ] + component "PostPreview" \{ title, date, author, previewText, image } → + React.do + pure $ + Block.box + { padding: E.str $ size.l <> " " <> size.l <> " " <> size.xl + , className: "post-preview" + , css: boxCss + } + [ Block.stack { space: E.str size.s, splitAfter: 2 } + [ Block.stack { space: E.str size.m } + [ Block.sidebar + { sidebar: avatar image + , side: SidebarRight + , reverseOnWrap: true + , contentMin: "30ch" + , space: size.l + } + [ postTitle title ] + , Block.cluster { justify: "space-between", space: size.m } + [ postDate date, postAuthor author ] + ] + , hr + , preview previewText + ] + ] where hr = R.hr' @@ -138,7 +157,9 @@ mkPostPreview = do } avatar image = - Block.centre { css: E.css { width: E.str $ i "calc(" size.xxl " + " size.xxs " * 2)" } } + Block.centre + { css: E.css { width: E.str $ i "calc(" size.xxl " + " size.xxs " * 2)" } + } [ R.div' k) -> Row k -> Row k +type PropsF ∷ ∀ k. (Type → k) → Row k → Row k type PropsF f r = ( className ∷ f String | Style.Props f r @@ -21,13 +26,13 @@ type Props = type PropsOptional = PropsF OptionalProp (DivProps) -component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p } +component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = mkForwardRefComponent "Switcher" do - \(props ∷ { | PropsOptional }) ref -> React.do + \(props ∷ { | PropsOptional }) ref → React.do pure $ emotionDiv ref props { className: "ry-switcher " <>? props.className diff --git a/src/Yoga/Block/Layout/Types.purs b/src/Yoga/Block/Layout/Types.purs index cbde6c6..9c0e2bc 100644 --- a/src/Yoga/Block/Layout/Types.purs +++ b/src/Yoga/Block/Layout/Types.purs @@ -4,19 +4,19 @@ data JustifyContent = JStart | JEnd | JCenter | JBetween | JAround | JEvenly data AlignItems = AStart | AEnd | ACenter | AStretch | ABaseline -justifyToString :: JustifyContent -> String +justifyToString ∷ JustifyContent → String justifyToString = case _ of - JStart -> "flex-start" - JEnd -> "flex-end" - JCenter -> "center" - JBetween -> "space-between" - JAround -> "space-around" - JEvenly -> "space-evenly" + JStart → "flex-start" + JEnd → "flex-end" + JCenter → "center" + JBetween → "space-between" + JAround → "space-around" + JEvenly → "space-evenly" -alignToString :: AlignItems -> String +alignToString ∷ AlignItems → String alignToString = case _ of - AStart -> "flex-start" - AEnd -> "flex-end" - ACenter -> "center" - AStretch -> "stretch" - ABaseline -> "baseline" + AStart → "flex-start" + AEnd → "flex-end" + ACenter → "center" + AStretch → "stretch" + ABaseline → "baseline" diff --git a/src/Yoga/Block/Molecule/DatePicker.purs b/src/Yoga/Block/Molecule/DatePicker.purs index 00bef9b..e65f9eb 100644 --- a/src/Yoga/Block/Molecule/DatePicker.purs +++ b/src/Yoga/Block/Molecule/DatePicker.purs @@ -10,10 +10,10 @@ import React.Basic.Hooks (mkReducer) import React.Basic.Hooks as React type Props = - { dateʔ :: Maybe Date - , show :: Boolean - , showingMonthʔ :: Maybe (Month /\ Year) - , onChange :: Maybe Date -> Effect Unit + { dateʔ ∷ Maybe Date + , show ∷ Boolean + , showingMonthʔ ∷ Maybe (Month /\ Year) + , onChange ∷ Maybe Date → Effect Unit } data Action = DateViewAction DateView.Action @@ -27,39 +27,44 @@ defaultState = { datePickerState: DateView.defaultState } reduce ∷ State → Action → State reduce = case _, _ of - s, DateViewAction a → s { datePickerState = DateView.reduce (s.datePickerState) a } + s, DateViewAction a → s + { datePickerState = DateView.reduce (s.datePickerState) a } mkDatePicker ∷ React.Component Props mkDatePicker = do - dateView <- mkDatePickerView - reducer <- mkReducer reduce - React.component "DatePicker" \(props :: Props) → React.do - state /\ dispatch <- React.useReducer defaultState reducer + dateView ← mkDatePickerView + reducer ← mkReducer reduce + React.component "DatePicker" \(props ∷ Props) → React.do + state /\ dispatch ← React.useReducer defaultState reducer useEffect props.show do if props.show then do - currentDate <- nowDate - dispatch (DateViewAction $ DateView.Open { selectedDateʔ: props.dateʔ, currentDate }) + currentDate ← nowDate + dispatch + ( DateViewAction $ DateView.Open + { selectedDateʔ: props.dateʔ, currentDate } + ) else dispatch (DateViewAction DateView.Dismiss) mempty useEffect props.dateʔ do case props.dateʔ of - Nothing -> mempty - Just date -> dispatch $ DateViewAction $ DateView.DateSelected date + Nothing → mempty + Just date → dispatch $ DateViewAction $ DateView.DateSelected date mempty useEffect (state.datePickerState <#> _.selectedDateʔ) do case state.datePickerState of - Nothing -> mempty - Just { selectedDateʔ } -> unless (selectedDateʔ == props.dateʔ) do + Nothing → mempty + Just { selectedDateʔ } → unless (selectedDateʔ == props.dateʔ) do props.onChange selectedDateʔ mempty useEffect props.showingMonthʔ do case props.showingMonthʔ of - Nothing -> mempty - Just monthAndYear -> dispatch $ DateViewAction $ DateView.ShowMonthAndYear monthAndYear + Nothing → mempty + Just monthAndYear → dispatch $ DateViewAction $ + DateView.ShowMonthAndYear monthAndYear mempty pure diff --git a/src/Yoga/Block/Molecule/DatePicker/View.purs b/src/Yoga/Block/Molecule/DatePicker/View.purs index 1a82c70..4c814f7 100644 --- a/src/Yoga/Block/Molecule/DatePicker/View.purs +++ b/src/Yoga/Block/Molecule/DatePicker/View.purs @@ -85,14 +85,14 @@ mkDatePickerView = do Just s → renderDate ({ dispatch } `disjointUnion` s) Nothing → mempty -renderDate - ∷ { dispatch ∷ Action → Effect Unit - , currentDate ∷ Date - , selectedDateʔ ∷ Maybe Date - , showingMonth ∷ Month /\ Year - , transitioningʔ ∷ Maybe TransitionDirection - } - → JSX +renderDate ∷ + { dispatch ∷ Action → Effect Unit + , currentDate ∷ Date + , selectedDateʔ ∷ Maybe Date + , showingMonth ∷ Month /\ Year + , transitioningʔ ∷ Maybe TransitionDirection + } → + JSX renderDate { dispatch , currentDate @@ -206,14 +206,14 @@ renderDate } ] -renderMonthNumbers - ∷ { currentDateʔ ∷ Maybe Date - , date ∷ Date - , dispatch ∷ Action → Effect Unit - , selectedDateʔ ∷ Maybe Date - , showingMonth ∷ Month - } - → Array JSX +renderMonthNumbers ∷ + { currentDateʔ ∷ Maybe Date + , date ∷ Date + , dispatch ∷ Action → Effect Unit + , selectedDateʔ ∷ Maybe Date + , showingMonth ∷ Month + } → + Array JSX renderMonthNumbers { date, selectedDateʔ, currentDateʔ, showingMonth, dispatch } = do let firstDay = firstMondayBefore $ setDay Bounded.bottom date diff --git a/src/Yoga/Block/Molecule/ReadMore/Story.purs b/src/Yoga/Block/Molecule/ReadMore/Story.purs index 6cc25f2..06ad81f 100644 --- a/src/Yoga/Block/Molecule/ReadMore/Story.purs +++ b/src/Yoga/Block/Molecule/ReadMore/Story.purs @@ -14,18 +14,18 @@ import Yoga.Block.Container.Style as Styles import Yoga.Block.Molecule.ReadMore as ReadMore default ∷ - { decorators ∷ Array (Effect JSX -> JSX) + { decorators ∷ Array (Effect JSX → JSX) , title ∷ String } default = { title: "Molecule/Read More" , decorators: - [ \storyFn -> - R.div_ - [ element E.global { styles: Styles.global } - , unsafePerformEffect storyFn - ] - ] + [ \storyFn → + R.div_ + [ element E.global { styles: Styles.global } + , unsafePerformEffect storyFn + ] + ] } readMore ∷ Effect JSX @@ -34,19 +34,24 @@ readMore = do where compo = unsafePerformEffect - $ reactComponent "ReadMore Story" \{} -> React.do + $ reactComponent "ReadMore Story" \{} → React.do pure $ fragment [ R.h2_ [ R.text "Long text" ] , ReadMore.component - [ R.text (power "A very long text " 20) ] , R.h2_ [ R.text "Short text" ] , ReadMore.component - [ R.text "Quite a short text that probably fits on one line" ] + /> + [ R.text + "Quite a short text that probably fits on one line" + ] ] diff --git a/src/Yoga/Block/Molecule/ReadMore/Style.purs b/src/Yoga/Block/Molecule/ReadMore/Style.purs index 8e6b0c2..99f033d 100644 --- a/src/Yoga/Block/Molecule/ReadMore/Style.purs +++ b/src/Yoga/Block/Molecule/ReadMore/Style.purs @@ -4,13 +4,13 @@ import Yoga.Prelude.Style import Yoga.Block.Container.Style (colour, withAlpha) -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style | r ) -container :: Style +container ∷ Style container = styles where styles = @@ -28,7 +28,7 @@ contractedText = styles , minWidth: _0 } -fadeBlock :: OptionalProp Color -> Style +fadeBlock ∷ OptionalProp Color → Style fadeBlock background = css { zIndex: str $ "1" , position: relative @@ -52,7 +52,8 @@ fadeBlock background = css } where bg = (cssStringRGBA <$> background) ?|| colour.background - bgTransparent = ((withAlpha 0.0 >>> cssStringRGBA) <$> background) ?|| colour.backgroundAlpha0 + bgTransparent = ((withAlpha 0.0 >>> cssStringRGBA) <$> background) ?|| + colour.backgroundAlpha0 expandedText ∷ Style expandedText = styles diff --git a/src/Yoga/Block/Molecule/ReadMore/View.purs b/src/Yoga/Block/Molecule/ReadMore/View.purs index 51c9131..c94fd21 100644 --- a/src/Yoga/Block/Molecule/ReadMore/View.purs +++ b/src/Yoga/Block/Molecule/ReadMore/View.purs @@ -8,7 +8,7 @@ import React.Basic.DOM as R import React.Basic.Hooks as React import Yoga.Block.Molecule.ReadMore.Style as Style -type PropsR ∷ forall k. (Type -> k) -> Row k +type PropsR ∷ ∀ k. (Type → k) → Row k type PropsR f = ( children ∷ f (Array JSX) , moreLabel ∷ f JSX @@ -26,66 +26,81 @@ type PropsOptional = PropsR OptionalProp -- TODO: handle resize gracefully -component ∷ ∀ p q. Union p q Props => ReactComponent { | p } +component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p } component = rawComponent rawComponent ∷ ∀ p. ReactComponent { | p } rawComponent = - mkForwardRefComponent "Read More" \(props@{ children, moreLabel, lessLabel } ∷ Record PropsOptional) ref -> React.do - expanded /\ modifyExpanded <- useState false - overflows /\ setOverflows <- useState' false - textRef <- useRef null - useLayoutEffectAlways do - unless expanded do - ow <- getOffsetWidthFromRef textRef - sw <- getScrollWidthFromRef textRef - when (sw > ow && not overflows) do - setOverflows true - when (sw < ow && overflows) do - setOverflows false - mempty - let showLabel = overflows - pure - $ Motion.span - [ Motion.span - [ if (overflows && not expanded) then - Motion.div - (children ?|| mempty) - else - fragment (children ?|| mempty) - ] - , guard showLabel $ Motion.span - [ R.a' - [ if expanded then - lessLabel ?|| (R.text "less") + mkForwardRefComponent "Read More" + \(props@{ children, moreLabel, lessLabel } ∷ Record PropsOptional) ref → + React.do + expanded /\ modifyExpanded ← useState false + overflows /\ setOverflows ← useState' false + textRef ← useRef null + useLayoutEffectAlways do + unless expanded do + ow ← getOffsetWidthFromRef textRef + sw ← getScrollWidthFromRef textRef + when (sw > ow && not overflows) do + setOverflows true + when (sw < ow && overflows) do + setOverflows false + mempty + let showLabel = overflows + pure + $ Motion.span + + [ Motion.span + + [ if (overflows && not expanded) then + Motion.div + (children ?|| mempty) + else + fragment (children ?|| mempty) + ] + , guard showLabel $ Motion.span + + [ R.a' + + [ if expanded then + lessLabel ?|| (R.text "less") + else + moreLabel ?|| (R.text "more") + ] + ] + ] diff --git a/src/Yoga/Block/Molecule/Sheet/Story.purs b/src/Yoga/Block/Molecule/Sheet/Story.purs index a313af2..dca6188 100644 --- a/src/Yoga/Block/Molecule/Sheet/Story.purs +++ b/src/Yoga/Block/Molecule/Sheet/Story.purs @@ -20,14 +20,14 @@ import Yoga.Block.Atom.Button.Types as ButtonType import Yoga.Block.Container.Style as Styles import Yoga.Block.Molecule.Sheet as Sheet -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Molecule/Sheet" , decorators: - [ \storyFn -> + [ \storyFn → R.div_ [ element E.global { styles: Styles.global } , unsafePerformEffect storyFn @@ -41,43 +41,53 @@ sheet = do where compo = unsafePerformEffect - $ reactComponent "Sheet Story" \{} -> React.do - text /\ setText <- React.useState' "In order to spy on you we need your consent. Will you give it?" - isOpen /\ setIsOpen <- React.useState' true + $ reactComponent "Sheet Story" \{} → React.do + text /\ setText ← React.useState' + "In order to spy on you we need your consent. Will you give it?" + isOpen /\ setIsOpen ← React.useState' true pure $ fragment [ R.h2_ [ R.text "No Options" ] - , R.div { id: "clickaway-container", style: R.css { userSelect: "none" } } - , R.div { id: "modal-container", style: R.css { userSelect: "none" } } + , R.div + { id: "clickaway-container" + , style: R.css { userSelect: "none" } + } + , R.div + { id: "modal-container" + , style: R.css { userSelect: "none" } + } , element Sheet.component { header: R.h2_ [ R.text "Would you like us to track you?" ] - , footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" } - /> - [ Block.button - { buttonType: ButtonType.Primary - , onClick: - handler_ do - launchAff_ do - delay (fromDuration $ (2.0 # Seconds)) - liftEffect do - setText "Thanks, that's very nice of you" - setIsOpen true - setIsOpen false - } - [ R.text "Yes" ] - , Block.button - { buttonType: ButtonType.Dangerous - , onClick: - handler_ do - launchAff_ do - delay (fromDuration $ (2.0 # Seconds)) - liftEffect do - setText (power "Oh, but please! " 200) - setIsOpen true - setIsOpen false - } - [ R.text "No" ] - ] + , footer: + Block.cluster + { justify: "flex-end", space: "var(--s-1)" } + /> + [ Block.button + { buttonType: ButtonType.Primary + , onClick: + handler_ do + launchAff_ do + delay (fromDuration $ (2.0 # Seconds)) + liftEffect do + setText + "Thanks, that's very nice of you" + setIsOpen true + setIsOpen false + } + [ R.text "Yes" ] + , Block.button + { buttonType: ButtonType.Dangerous + , onClick: + handler_ do + launchAff_ do + delay (fromDuration $ (2.0 # Seconds)) + liftEffect do + setText (power "Oh, but please! " 200) + setIsOpen true + setIsOpen false + } + [ R.text "No" ] + ] , children: [ R.p_ [ R.text text ] ] , isOpen diff --git a/src/Yoga/Block/Molecule/Sheet/Style.purs b/src/Yoga/Block/Molecule/Sheet/Style.purs index b222138..cd4bc46 100644 --- a/src/Yoga/Block/Molecule/Sheet/Style.purs +++ b/src/Yoga/Block/Molecule/Sheet/Style.purs @@ -6,7 +6,7 @@ import Fahrtwind (maxHeight', overflowYScroll, pX', pY') import Fahrtwind.Style.ScrollBar (scrollBar') import Yoga.Block.Container.Style (col, colour) -type Props :: forall k. (Type -> k) -> Row k -> Row k +type Props ∷ ∀ k. (Type → k) → Row k → Row k type Props f r = ( css ∷ f Style , clickawayBackground ∷ f StyleProperty @@ -40,7 +40,7 @@ sheetContent = styles } <> maxHeight' (vh 90.0) -sheetBody :: Style +sheetBody ∷ Style sheetBody = overflowYScroll <> scrollBar' @@ -51,7 +51,7 @@ sheetBody = , borderWidth: str "var(--s-3)" } -clickaway ∷ forall r. { | Props OptionalProp r } -> Style +clickaway ∷ ∀ r. { | Props OptionalProp r } → Style clickaway { clickawayBackground } = css { width: 100.0 # vw diff --git a/src/Yoga/Block/Molecule/Sheet/View.purs b/src/Yoga/Block/Molecule/Sheet/View.purs index 5fa244e..f66584b 100644 --- a/src/Yoga/Block/Molecule/Sheet/View.purs +++ b/src/Yoga/Block/Molecule/Sheet/View.purs @@ -29,12 +29,12 @@ import Yoga.Block.Molecule.Sheet.Style as Style type PropsNoChildrenF f = ( className ∷ f String - , header :: f JSX - , footer :: f JSX + , header ∷ f JSX + , footer ∷ f JSX , isOpen ∷ Boolean , onDismiss ∷ f (Effect Unit) , containerId ∷ String - , clickAwayId :: String + , clickAwayId ∷ String | Style.Props OptionalProp () ) @@ -52,35 +52,38 @@ type PropsOptional = component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p } component = rawComponent -rawComponent ∷ forall p. ReactComponent (Record p) +rawComponent ∷ ∀ p. ReactComponent (Record p) rawComponent = - mkForwardRefComponent "SheetWrapper" \props ref -> React.do - let { header, children, footer, isOpen, onDismiss, containerId } = props :: { | PropsOptional } - windowRef <- useRef null - renderInPortal <- useRenderInPortal containerId - useKeyDown $ \_ _ -> case _ of - KeyCode.Escape -> onDismiss ?|| mempty - _ -> mempty + mkForwardRefComponent "SheetWrapper" \props ref → React.do + let + { header, children, footer, isOpen, onDismiss, containerId } = + props ∷ { | PropsOptional } + windowRef ← useRef null + renderInPortal ← useRenderInPortal containerId + useKeyDown $ \_ _ → case _ of + KeyCode.Escape → onDismiss ?|| mempty + _ → mempty let toRender ∷ JSX toRender = R.div' [ Motion.animatePresence [ guard isOpen $ element clickaway props ] - , element window { onDismiss, header, children, footer, ref: windowRef, isOpen } + , element window + { onDismiss, header, children, footer, ref: windowRef, isOpen } ] pure (renderInPortal toRender) -clickaway ∷ forall p. ReactComponent (Record p) +clickaway ∷ ∀ p. ReactComponent (Record p) clickaway = - mkForwardRefComponent "SheetClickaway" \props_ ref -> React.do - let props@{ containerId, onDismiss } = props_ :: { | PropsOptional } - renderInPortal <- useRenderInPortal containerId + mkForwardRefComponent "SheetClickaway" \props_ ref → React.do + let props@{ containerId, onDismiss } = props_ ∷ { | PropsOptional } + renderInPortal ← useRenderInPortal containerId pure $ renderInPortal $ Emotion.elementKeyed Motion.div $ { key: "ry-modal-clickaway" , ref - , onClick: handler_ (onDismiss ?|| mempty :: Effect Unit) + , onClick: handler_ (onDismiss ?|| mempty ∷ Effect Unit) , className: "ry-modal-clickaway" , css: Style.clickaway props , initial: Motion.prop $ css { opacity: 0.0 } @@ -89,8 +92,8 @@ clickaway = } type WindowPropsR = - ( header :: OptionalProp JSX - , footer :: OptionalProp JSX + ( header ∷ OptionalProp JSX + , footer ∷ OptionalProp JSX , children ∷ Array JSX , isOpen ∷ Boolean , onDismiss ∷ OptionalProp (Effect Unit) @@ -100,23 +103,25 @@ type WindowProps = { ref ∷ NodeRef | WindowPropsR } window ∷ ReactComponent WindowProps window = - mkForwardRefComponent "SheetWindow" \props ref -> React.do - let { header, children, footer, onDismiss, isOpen } = props ∷ { | WindowPropsR } - contentRef <- useRef null - velocityRef <- useRef 0.0 - animationRef <- useRef Nothing - top <- useMotionValue 0.0 + mkForwardRefComponent "SheetWindow" \props ref → React.do + let + { header, children, footer, onDismiss, isOpen } = + props ∷ { | WindowPropsR } + contentRef ← useRef null + velocityRef ← useRef 0.0 + animationRef ← useRef Nothing + top ← useMotionValue 0.0 let getWindowHeight = do HTML.window >>= innerHeight <#> Int.toNumber getMaxHeight ∷ Effect Number getMaxHeight = do - wh <- getWindowHeight - maybeOffsetHeight <- getOffsetHeightFromRef contentRef - pure $ maybe (0.0) (\x -> min wh (wh - x)) maybeOffsetHeight + wh ← getWindowHeight + maybeOffsetHeight ← getOffsetHeightFromRef contentRef + pure $ maybe (0.0) (\x → min wh (wh - x)) maybeOffsetHeight useEffectAlways do - maxHeight <- getMaxHeight + maxHeight ← getMaxHeight MotionValue.set maxHeight top mempty pure @@ -143,32 +148,35 @@ window = } , exit: Motion.exit $ css { top: "100%" } , onPanStart: - Motion.onPanStart \_ _ -> do - maybeRunningAnimation <- React.readRef animationRef + Motion.onPanStart \_ _ → do + maybeRunningAnimation ← React.readRef animationRef for_ maybeRunningAnimation MotionValue.stopAnimation React.writeRef animationRef Nothing , onPan: - Motion.onPan \_ pi -> do - oldY <- MotionValue.get top - maxHeight <- getMaxHeight + Motion.onPan \_ pi → do + oldY ← MotionValue.get top + maxHeight ← getMaxHeight React.writeRef velocityRef pi.velocity.y let newNaiveValue = pi.delta.y + oldY newY = if (newNaiveValue < maxHeight) && (pi.delta.y < zero) then negate (pow (negate pi.delta.y) 0.33) + oldY - else if (newNaiveValue < maxHeight) && (pi.delta.y > zero) then + else if + (newNaiveValue < maxHeight) && (pi.delta.y > zero) then (pow (pi.delta.y) 0.33) + oldY else newNaiveValue MotionValue.set newY top , onPanEnd: - Motion.onPanEnd \_ pi -> do - velocity <- React.readRef velocityRef - yValue <- MotionValue.get top - maxHeight <- getMaxHeight - windowHeight <- getWindowHeight - let percentPosition = ((yValue - maxHeight) / (windowHeight - maxHeight)) + Motion.onPanEnd \_ pi → do + velocity ← React.readRef velocityRef + yValue ← MotionValue.get top + maxHeight ← getMaxHeight + windowHeight ← getWindowHeight + let + percentPosition = + ((yValue - maxHeight) / (windowHeight - maxHeight)) let target = if percentPosition > 0.7 then @@ -179,7 +187,7 @@ window = windowHeight else maxHeight - animation <- + animation ← MotionValue.animate target { type: "spring" , velocity: pi.velocity.y diff --git a/src/Yoga/Block/Molecule/Tooltip/View.purs b/src/Yoga/Block/Molecule/Tooltip/View.purs index 70879d2..e774684 100644 --- a/src/Yoga/Block/Molecule/Tooltip/View.purs +++ b/src/Yoga/Block/Molecule/Tooltip/View.purs @@ -8,20 +8,27 @@ import Yoga.Block.Hook.UsePopOver (usePopOver) import React.Basic.DOM as R import React.Basic.Hooks as React -tooltip - ∷ { containerId ∷ String, placement ∷ Placement, fallbackPlacements :: Array Placement, tooltip ∷ JSX } → JSX → JSX -tooltip props@{ containerId, placement, fallbackPlacements } child = rawComponent - - { placement - , fallbackPlacements - , containerId - , child - , tooltipContent: props.tooltip - } +tooltip ∷ + { containerId ∷ String + , placement ∷ Placement + , fallbackPlacements ∷ Array Placement + , tooltip ∷ JSX + } → + JSX → + JSX +tooltip props@{ containerId, placement, fallbackPlacements } child = + rawComponent + + { placement + , fallbackPlacements + , containerId + , child + , tooltipContent: props.tooltip + } type Props = { placement ∷ Placement - , fallbackPlacements :: Array Placement + , fallbackPlacements ∷ Array Placement , containerId ∷ String , child ∷ JSX , tooltipContent ∷ JSX @@ -29,7 +36,9 @@ type Props = rawComponent ∷ ReactComponent Props rawComponent = unsafePerformEffect $ React.reactComponent "Tooltip" $ - \({ placement, containerId, child, tooltipContent, fallbackPlacements } ∷ Props) → React.do + \( { placement, containerId, child, tooltipContent, fallbackPlacements } ∷ + Props + ) → React.do { hidePopOver , renderInPopOver , targetRef diff --git a/src/Yoga/Block/Organism/Form/Defaults.purs b/src/Yoga/Block/Organism/Form/Defaults.purs index f297b62..dfc2523 100644 --- a/src/Yoga/Block/Organism/Form/Defaults.purs +++ b/src/Yoga/Block/Organism/Form/Defaults.purs @@ -59,29 +59,31 @@ instance formDefaultsSet ∷ FormDefaults (Set a) where instance formDefaultsMap ∷ FormDefaults (Map k a) where formDefaults = Map.empty -instance formDefaultsNonEmptyArray ∷ FormDefaults a => FormDefaults (NonEmptyArray a) where +instance formDefaultsNonEmptyArray ∷ + FormDefaults a ⇒ + FormDefaults (NonEmptyArray a) where formDefaults = pure formDefaults instance formDefaultsMaybe ∷ FormDefaults (Maybe a) where formDefaults = Nothing -instance formDefaultsEither ∷ FormDefaults a => FormDefaults (Either a b) where +instance formDefaultsEither ∷ FormDefaults a ⇒ FormDefaults (Either a b) where formDefaults = Left formDefaults -instance formDefaultsValidated ∷ FormDefaults a => FormDefaults (Validated a) where +instance formDefaultsValidated ∷ FormDefaults a ⇒ FormDefaults (Validated a) where formDefaults = Fresh formDefaults instance formDefaultsRecord ∷ ( RowToList r rl , FormDefaultsRecord rl () r - ) => + ) ⇒ FormDefaults (Record r) where formDefaults = Builder.build (formDefaultsRecordBuilder (Proxy ∷ Proxy rl)) {} -- -class FormDefaultsRecord :: forall k. k -> Row Type -> Row Type -> Constraint -class FormDefaultsRecord rl r_ r | rl -> r_ r where - formDefaultsRecordBuilder ∷ Proxy rl -> Builder { | r_ } { | r } +class FormDefaultsRecord ∷ ∀ k. k → Row Type → Row Type → Constraint +class FormDefaultsRecord rl r_ r | rl → r_ r where + formDefaultsRecordBuilder ∷ Proxy rl → Builder { | r_ } { | r } instance formDefaultsRecordNil ∷ FormDefaultsRecord Nil () () where formDefaultsRecordBuilder _ = identity @@ -92,7 +94,7 @@ instance formDefaultsRecordCons ∷ , FormDefaultsRecord tail r_ tailR , Lacks l tailR , Cons l a tailR r - ) => + ) ⇒ FormDefaultsRecord (Cons l a tail) r_ r where formDefaultsRecordBuilder _ = head <<< tail where diff --git a/src/Yoga/Block/Organism/Form/Internal.purs b/src/Yoga/Block/Organism/Form/Internal.purs index 3392b18..4f0ac89 100644 --- a/src/Yoga/Block/Organism/Form/Internal.purs +++ b/src/Yoga/Block/Organism/Form/Internal.purs @@ -19,7 +19,7 @@ data Tree } | Wrapper { key ∷ Maybe String - , wrap ∷ Array JSX -> JSX + , wrap ∷ Array JSX → JSX , children ∷ Forest } | Node @@ -49,54 +49,61 @@ type Forest = -- | -- | should be pruned, but a top-down operation would not be able to identify -- | such a subtree as prunable. -pruneTree ∷ Tree -> Maybe Tree +pruneTree ∷ Tree → Maybe Tree pruneTree = case _ of - t@(Child _) -> Just t - Wrapper r@{ children } -> case Array.mapMaybe pruneTree children of - [] -> Nothing - children' -> Just (Wrapper r { children = children' }) - Node r@{ children } -> case Array.mapMaybe pruneTree children of - [] -> Nothing - children' -> Just (Node r { children = children' }) + t@(Child _) → Just t + Wrapper r@{ children } → case Array.mapMaybe pruneTree children of + [] → Nothing + children' → Just (Wrapper r { children = children' }) + Node r@{ children } → case Array.mapMaybe pruneTree children of + [] → Nothing + children' → Just (Node r { children = children' }) -- | An applicative functor which can be used to build forms. -- | Forms can be turned into components using the `build` function. newtype FormBuilder' ui props unvalidated result = FormBuilder - ( props {- ^ additional props -} - -> unvalidated {- ^ the current value -} - -> { edit ∷ ((unvalidated -> unvalidated) -> Effect Unit) -> ui - , validate ∷ Maybe result - } + ( props {- ^ additional props -} → + unvalidated {- ^ the current value -} → + { edit ∷ ((unvalidated → unvalidated) → Effect Unit) → ui + , validate ∷ Maybe result + } ) type FormBuilder props unvalidated result = FormBuilder' Forest props unvalidated result -derive instance newtypeFormBuilder ∷ Newtype (FormBuilder' ui props unvalidated result) _ +derive instance newtypeFormBuilder ∷ + Newtype (FormBuilder' ui props unvalidated result) _ + derive instance functorFormBuilder ∷ Functor (FormBuilder' ui props unvalidated) -instance applyFormBuilder ∷ Semigroup ui => Apply (FormBuilder' ui props unvalidated) where +instance applyFormBuilder ∷ + Semigroup ui ⇒ + Apply (FormBuilder' ui props unvalidated) where apply (FormBuilder f) (FormBuilder x) = - FormBuilder \props unvalidated -> do + FormBuilder \props unvalidated → do let { edit: editF, validate: validateF } = f props unvalidated let { edit: editX, validate: validateX } = x props unvalidated - { edit: \k -> editF k <> editX k + { edit: \k → editF k <> editX k , validate: validateF <*> validateX } -instance applicativeFormBuilder ∷ Monoid ui => Applicative (FormBuilder' ui props unvalidated) where +instance applicativeFormBuilder ∷ + Monoid ui ⇒ + Applicative (FormBuilder' ui props unvalidated) where pure a = - FormBuilder \_ _ -> + FormBuilder \_ _ → { edit: mempty , validate: pure a } -parallel ∷ ∀ props value. String -> SeqFormBuilder props value ~> FormBuilder props value +parallel ∷ + ∀ props value. String → SeqFormBuilder props value ~> FormBuilder props value parallel key (SeqFormBuilder (FormBuilder f)) = - FormBuilder \props value -> do + FormBuilder \props value → do let { edit, validate } = f props value { edit: - \onChange -> + \onChange → [ Wrapper { key: Just key , wrap: keyed key <<< fragment @@ -106,13 +113,14 @@ parallel key (SeqFormBuilder (FormBuilder f)) = , validate: validate } -sequential ∷ ∀ props value. String -> FormBuilder props value ~> SeqFormBuilder props value +sequential ∷ + ∀ props value. String → FormBuilder props value ~> SeqFormBuilder props value sequential key (FormBuilder f) = SeqFormBuilder - $ FormBuilder \props value -> do + $ FormBuilder \props value → do let { edit, validate } = f props value { edit: - \onChange -> + \onChange → [ Wrapper { key: Just key , wrap: keyed key <<< fragment @@ -125,73 +133,95 @@ sequential key (FormBuilder f) = -- | A form builder where each field depends on the validity of the previous ones. -- | That is, every field is only displayed if all the previous ones are valid. -- | Forms can be turned into components using the `build` function. -newtype SeqFormBuilder' ui props unvalidated result = SeqFormBuilder (FormBuilder' ui props unvalidated result) +newtype SeqFormBuilder' ui props unvalidated result = SeqFormBuilder + (FormBuilder' ui props unvalidated result) type SeqFormBuilder props unvalidated result = SeqFormBuilder' Forest props unvalidated result -derive instance newtypeSeqFormBuilder ∷ Newtype (SeqFormBuilder' ui props unvalidated result) _ -derive newtype instance functorSeqFormBuilder ∷ Functor (SeqFormBuilder' ui props unvalidated) +derive instance newtypeSeqFormBuilder ∷ + Newtype (SeqFormBuilder' ui props unvalidated result) _ -instance applySeqFormBuilder ∷ Monoid ui => Apply (SeqFormBuilder' ui props unvalidated) where +derive newtype instance functorSeqFormBuilder ∷ + Functor (SeqFormBuilder' ui props unvalidated) + +instance applySeqFormBuilder ∷ + Monoid ui ⇒ + Apply (SeqFormBuilder' ui props unvalidated) where apply = ap -derive newtype instance applicativeSeqFormBuilder ∷ Monoid ui => Applicative (SeqFormBuilder' ui props unvalidated) +derive newtype instance applicativeSeqFormBuilder ∷ + Monoid ui ⇒ + Applicative (SeqFormBuilder' ui props unvalidated) -instance bindSeqFormBuilder ∷ Monoid ui => Bind (SeqFormBuilder' ui props unvalidated) where +instance bindSeqFormBuilder ∷ + Monoid ui ⇒ + Bind (SeqFormBuilder' ui props unvalidated) where bind (SeqFormBuilder f) g = SeqFormBuilder - $ FormBuilder \props unvalidated -> + $ FormBuilder \props unvalidated → let - { edit: editF, validate: validateF } = (un FormBuilder f) props unvalidated + { edit: editF, validate: validateF } = (un FormBuilder f) props + unvalidated in case g <$> validateF of - Nothing -> { edit: editF, validate: Nothing } - Just (SeqFormBuilder x) -> + Nothing → { edit: editF, validate: Nothing } + Just (SeqFormBuilder x) → let - { edit: editX, validate: validateX } = (un FormBuilder x) props unvalidated + { edit: editX, validate: validateX } = (un FormBuilder x) + props + unvalidated in - { edit: \k -> editF k <> editX k + { edit: \k → editF k <> editX k , validate: validateX } -instance monadSeqFormBuilder ∷ Monoid ui => Monad (SeqFormBuilder' ui props unvalidated) +instance monadSeqFormBuilder ∷ + Monoid ui ⇒ + Monad (SeqFormBuilder' ui props unvalidated) -instance altSeqFormBuilder ∷ Monoid ui => Alt (SeqFormBuilder' ui props unvalidated) where +instance altSeqFormBuilder ∷ + Monoid ui ⇒ + Alt (SeqFormBuilder' ui props unvalidated) where alt (SeqFormBuilder f) (SeqFormBuilder g) = SeqFormBuilder - $ FormBuilder \props unvalidated -> + $ FormBuilder \props unvalidated → let rf@{ validate: validateF } = un FormBuilder f props unvalidated rg@{ validate: validateG } = un FormBuilder g props unvalidated in case validateF, validateG of - Just _, _ -> rf - _, _ -> rg + Just _, _ → rf + _, _ → rg -instance plusSeqFormBuilder ∷ Monoid ui => Plus (SeqFormBuilder' ui props unvalidated) where - empty = SeqFormBuilder $ FormBuilder \_ _ -> { edit: mempty, validate: Nothing } +instance plusSeqFormBuilder ∷ + Monoid ui ⇒ + Plus (SeqFormBuilder' ui props unvalidated) where + empty = SeqFormBuilder $ FormBuilder \_ _ → + { edit: mempty, validate: Nothing } -instance alternativeSeqFormBuilder ∷ Monoid ui => Alternative (SeqFormBuilder' ui props unvalidated) +instance alternativeSeqFormBuilder ∷ + Monoid ui ⇒ + Alternative (SeqFormBuilder' ui props unvalidated) -- | Create a `FormBuilder` from a function which produces a form -- | element as `JSX` and a validated result. -formBuilder - ∷ ∀ props unvalidated a - . ( props - -> unvalidated - -> { edit ∷ ((unvalidated -> unvalidated) -> Effect Unit) -> JSX - , validate ∷ Maybe a - } - ) - -> FormBuilder props unvalidated a +formBuilder ∷ + ∀ props unvalidated a. + ( props → + unvalidated → + { edit ∷ ((unvalidated → unvalidated) → Effect Unit) → JSX + , validate ∷ Maybe a + } + ) → + FormBuilder props unvalidated a formBuilder f = - FormBuilder \props value -> + FormBuilder \props value → let { edit, validate } = f props value in { edit: - \onChange -> + \onChange → [ Child { key: Nothing , child: edit onChange @@ -203,50 +233,54 @@ formBuilder f = -- | The simplest way to create a `FormBuilder`. Create a `FormBuilder` -- | provided a function that, given the current value and a change callback, -- | renders a form element as `JSX`. -formBuilder_ - ∷ ∀ props a - . (props -> a -> (a -> Effect Unit) -> JSX) - -> FormBuilder props a a +formBuilder_ ∷ + ∀ props a. + (props → a → (a → Effect Unit) → JSX) → + FormBuilder props a a formBuilder_ f = - formBuilder \props value -> + formBuilder \props value → { edit: f props value <<< (_ <<< const) , validate: pure value } -- | Invalidate a form, keeping its user interface but discarding the result -- | and possibly changing its type. -invalidate ∷ ∀ ui props unvalidated a b. FormBuilder' ui props unvalidated a -> FormBuilder' ui props unvalidated b +invalidate ∷ + ∀ ui props unvalidated a b. + FormBuilder' ui props unvalidated a → + FormBuilder' ui props unvalidated b invalidate (FormBuilder f) = - FormBuilder \props value -> + FormBuilder \props value → { edit: (f props value).edit , validate: Nothing } -- | Revalidate the form, in order to display error messages or create -- | a validated result. -revalidate - ∷ ∀ ui props unvalidated result - . FormBuilder' ui props unvalidated result - -> props - -> unvalidated - -> Maybe result +revalidate ∷ + ∀ ui props unvalidated result. + FormBuilder' ui props unvalidated result → + props → + unvalidated → + Maybe result revalidate editor props value = (un FormBuilder editor props value).validate -- | Listens for changes in a form's value and allows for performing -- | asynchronous effects and additional value changes. -listen - ∷ ∀ ui props unvalidated result - . (unvalidated -> Aff (unvalidated -> unvalidated)) - -> FormBuilder' ui props unvalidated result - -> FormBuilder' ui props unvalidated result +listen ∷ + ∀ ui props unvalidated result. + (unvalidated → Aff (unvalidated → unvalidated)) → + FormBuilder' ui props unvalidated result → + FormBuilder' ui props unvalidated result listen cb (FormBuilder f) = - FormBuilder \props unvalidated -> + FormBuilder \props unvalidated → let { edit, validate } = f props unvalidated in { edit: - \onChange -> - edit \update -> - runAff_ (either throwException onChange) (map (_ <<< update) (cb (update unvalidated))) + \onChange → + edit \update → + runAff_ (either throwException onChange) + (map (_ <<< update) (cb (update unvalidated))) , validate } diff --git a/src/Yoga/Block/Organism/NotificationCentre.purs b/src/Yoga/Block/Organism/NotificationCentre.purs index 62dca4e..f87e7f7 100644 --- a/src/Yoga/Block/Organism/NotificationCentre.purs +++ b/src/Yoga/Block/Organism/NotificationCentre.purs @@ -17,10 +17,10 @@ mkNotificationCentre = do subscribe ← mkSubscribe subscribersRef pure (NotificationCentre { enqueueNotification, subscribe }) -mkEnqueueNotification - ∷ Ref.Ref (Map NotificationId Notification) - → Ref.Ref (Map SubscriberId OnNotification) - → Effect (Notification → Effect Unit) +mkEnqueueNotification ∷ + Ref.Ref (Map NotificationId Notification) → + Ref.Ref (Map SubscriberId OnNotification) → + Effect (Notification → Effect Unit) mkEnqueueNotification notificationsRef subscribersRef = do generateId ← mkGenerateId pure \n → do @@ -33,20 +33,20 @@ mkEnqueueNotification notificationsRef subscribersRef = do for_ n.autoHideAfter \hideAfter → launchAff_ (delay hideAfter *> do remove # liftEffect) -removeNotification - ∷ Ref.Ref (Map NotificationId Notification) - → Ref.Ref (Map SubscriberId OnNotification) - → NotificationId - → Effect Unit +removeNotification ∷ + Ref.Ref (Map NotificationId Notification) → + Ref.Ref (Map SubscriberId OnNotification) → + NotificationId → + Effect Unit removeNotification notificationsRef subscribersRef id = do Ref.modify_ (Map.delete id) notificationsRef subscribers ← Ref.read subscribersRef subscribers # traverse_ (_ $ NotificationDismissed id) -mkSubscribe - ∷ Ref.Ref (Map SubscriberId OnNotification) - → Effect (OnNotification → Effect (Effect Unit)) +mkSubscribe ∷ + Ref.Ref (Map SubscriberId OnNotification) → + Effect (OnNotification → Effect (Effect Unit)) mkSubscribe subscribersRef = do generateId ← mkGenerateId pure \callback → do diff --git a/src/Yoga/Block/Organism/NotificationCentre/Notification/Story.purs b/src/Yoga/Block/Organism/NotificationCentre/Notification/Story.purs index cbbf07d..f7696d8 100644 --- a/src/Yoga/Block/Organism/NotificationCentre/Notification/Story.purs +++ b/src/Yoga/Block/Organism/NotificationCentre/Notification/Story.purs @@ -1,4 +1,7 @@ -module Yoga.Block.Organism.NotificationCentre.Notification.Story (default, notificationCentre) where +module Yoga.Block.Organism.NotificationCentre.Notification.Story + ( default + , notificationCentre + ) where import Prelude @@ -19,14 +22,14 @@ import Yoga.Prelude.View (handler_) storyNotificationCentre ∷ NotificationCentre storyNotificationCentre = unsafePerformEffect mkNotificationCentre -default - ∷ { decorators ∷ Array (Effect JSX -> JSX) - , title ∷ String - } +default ∷ + { decorators ∷ Array (Effect JSX → JSX) + , title ∷ String + } default = { title: "Organism/NotificationCentre" , decorators: - [ \storyFn -> + [ \storyFn → Block.container @@ -40,7 +43,7 @@ notificationCentre ∷ Effect JSX notificationCentre = do let containerId = "notifications" let nc@(NotificationCentre { enqueueNotification }) = storyNotificationCentre - notificationsView <- mkNotificationCentreView nc + notificationsView ← mkNotificationCentreView nc { containerId , renderNotifications: renderAnimatedNotifications } diff --git a/src/Yoga/Block/Organism/NotificationCentre/Notification/View.purs b/src/Yoga/Block/Organism/NotificationCentre/Notification/View.purs index cde7956..cd2c074 100644 --- a/src/Yoga/Block/Organism/NotificationCentre/Notification/View.purs +++ b/src/Yoga/Block/Organism/NotificationCentre/Notification/View.purs @@ -19,8 +19,8 @@ type Args = , renderNotifications ∷ Array (NotificationId /\ JSX) → JSX } -mkNotificationCentreView - ∷ NotificationCentre → Args → Effect JSX +mkNotificationCentreView ∷ + NotificationCentre → Args → Effect JSX mkNotificationCentreView (NotificationCentre { subscribe }) { containerId, renderNotifications } = @@ -91,9 +91,9 @@ notificationDismissButton dismiss = R.button' } /> [ Heroicons.cross ] -autoHideNotification - ∷ { autoHideAfter ∷ Milliseconds, body ∷ JSX, title ∷ String } - → Notification +autoHideNotification ∷ + { autoHideAfter ∷ Milliseconds, body ∷ JSX, title ∷ String } → + Notification autoHideNotification { autoHideAfter, title, body } = { render: \{ dismiss } → R.div' @@ -105,8 +105,9 @@ autoHideNotification { autoHideAfter, title, body } = "ms" + { "--auto-hide-duration": + show (un Milliseconds autoHideAfter) + <> "ms" } } /> [] diff --git a/src/Yoga/Block/Quark/Drip/View.purs b/src/Yoga/Block/Quark/Drip/View.purs index a82da28..a43d678 100644 --- a/src/Yoga/Block/Quark/Drip/View.purs +++ b/src/Yoga/Block/Quark/Drip/View.purs @@ -14,15 +14,19 @@ import Yoga.Block.Quark.Drip.Style as Style -- This is taken from Next UI type Props = - { visible :: Boolean - , x :: Number - , y :: Number - , onComplete :: Effect Unit - , colour :: String - , className :: String + { visible ∷ Boolean + , x ∷ Number + , y ∷ Number + , onComplete ∷ Effect Unit + , colour ∷ String + , className ∷ String } -defaultProps ∷ ∀ (a6 ∷ Type) (a7 ∷ Type). Semiring a6 ⇒ Semiring a7 ⇒ { className ∷ String, visible ∷ Boolean, x ∷ a6, y ∷ a7 } +defaultProps ∷ + ∀ (a6 ∷ Type) (a7 ∷ Type). + Semiring a6 ⇒ + Semiring a7 ⇒ + { className ∷ String, visible ∷ Boolean, x ∷ a6, y ∷ a7 } defaultProps = { visible: false , x: zero @@ -31,22 +35,22 @@ defaultProps = } component ∷ ReactComponent Props -component = mkForwardRefComponent "Drip" \(props :: Props) propsRef -> React.do - backupRef <- React.useRef null +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 ref + nʔ ← React.readRefMaybe ref nʔ # case _ of - Just n -> do + Just n → do let target = toEventTarget n let et = EventType "animationend" - listener <- eventListener (const props.onComplete) + listener ← eventListener (const props.onComplete) addEventListener et listener false target pure $ removeEventListener et listener false target - Nothing -> + Nothing → pure (pure unit) pure $ guard props.visible do diff --git a/src/Yoga/Block/Typography.purs b/src/Yoga/Block/Typography.purs index e4b9c4d..6b3a0b3 100644 --- a/src/Yoga/Block/Typography.purs +++ b/src/Yoga/Block/Typography.purs @@ -50,7 +50,7 @@ rightAlign = css { textAlign: str "end" } -- Ellipsis -- [FIXME]: Buggy (still shows a third line, does not seem to hide overflow) -maxLines ∷ Int -> Style +maxLines ∷ Int → Style maxLines n = css { overflow: hidden @@ -80,7 +80,8 @@ fontSizeH2 = } fontSizeH3 ∷ Style -fontSizeH3 = css { fontSize: str size.text.heading.h3, marginTop: _0, marginBottom: _0 } +fontSizeH3 = css + { fontSize: str size.text.heading.h3, marginTop: _0, marginBottom: _0 } fontSizeH4 ∷ Style fontSizeH4 = css { fontSize: str size.text.heading.h4 } diff --git a/src/Yoga/Prelude/Default.purs b/src/Yoga/Prelude/Default.purs index d3d89df..6d1484f 100644 --- a/src/Yoga/Prelude/Default.purs +++ b/src/Yoga/Prelude/Default.purs @@ -27,5 +27,5 @@ import Data.Monoid (guard) import Effect (Effect) import Effect.Class (liftEffect) -runMaybeT_ ∷ ∀ f a. Functor f => MaybeT f a -> f Unit +runMaybeT_ ∷ ∀ f a. Functor f ⇒ MaybeT f a → f Unit runMaybeT_ = void <<< runMaybeT diff --git a/test/Main.purs b/test/Main.purs index a949517..da24a3b 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -10,5 +10,5 @@ import Test.Spec.Runner (runSpec) main ∷ Effect Unit main = launchAff_ do - specs <- discover ".*Spec" + specs ← discover ".*Spec" runSpec [ consoleReporter ] specs