Fix some stuff

2024-09-11 16:25:36 +03:00 · 2020-05-08 12:34:21 +02:00 · 2020-05-08 12:34:21 +02:00 · 3d6eb2fd95
commit 3d6eb2fd95
parent c8302a6470
17 changed files with 139 additions and 160 deletions
--- a/blog/src/components/PSLayout.purs
+++ b/blog/src/components/PSLayout.purs
@ -215,7 +215,6 @@ mkMdxProviderComponent compiler = do
        , pre:
          mkFn2 \(props ∷ PreProps) other -> do
            let
-              _ = spy "other" other

              childrenQ = Nullable.toMaybe props.children

--- a/blog/static/fonts/PragmataProLiga-Regular.woff
+++ b/blog/static/fonts/PragmataProLiga-Regular.woff
--- a/blog/static/fonts/PragmataProLiga-Regular.woff2
+++ b/blog/static/fonts/PragmataProLiga-Regular.woff2
--- a/client/src/Container/Component.purs
+++ b/client/src/Container/Component.purs
@ -13,6 +13,7 @@ import React.Basic.DOM as R
 import React.Basic.Hooks (ReactComponent, component, element, useRef, useState, (/\))
 import React.Basic.Hooks as React
 import Yoga.CompileEditor.Component (mkCompileEditor)
+import Yoga.Compiler.Api (apiCompiler)
 import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)
 import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
 import Yoga.Theme.Provider (mkThemeProvider)
@ -40,8 +41,7 @@ mkContainerContent = do
      $ jssClasses \(theme ∷ CSSTheme) ->
          { container:
            jss
-              { fontFamily: theme.textFontFamily
-              , color: theme.textColour
+              { color: theme.textColour
              , display: "flex"
              , flexDirection: "column"
              , width: "100%"
@ -55,13 +55,13 @@ mkContainerContent = do
              , paddingLeft: "100px"
              , zIndex: 0
              }
-          , icon: jss { fill: "theme.textColour" }
+          , icon: jss { fill: theme.textColour }
          }
  landingPage <- mkLandingPage
  sidebar <- mkSidebar
  header <- mkHeader
  sidebarLink <- mkSidebarLink
-  editor <- mkCompileEditor windowFetch
+  editor <- mkCompileEditor (apiCompiler windowFetch)
  component "ContainerContent" \{ kids } -> React.do
    classes <- useStyles {}
    collapsed /\ modifyCollapsed <- useState true
--- a/client/src/Container/Header.purs
+++ b/client/src/Container/Header.purs
@ -1,6 +1,7 @@
 module Container.Header where

 import Prelude
+import Data.Foldable (intercalate)
 import Data.Int (toNumber)
 import Data.Maybe (Maybe(..))
 import Data.Monoid (guard)
@ -34,7 +35,7 @@ mkHeader = do
            jss
              { backgroundColor: theme.interfaceColour
              , borderBottom: "0"
-              , fontFamily: theme.headingFontFamily
+              , fontFamily: intercalate ", " theme.headingFontFamily
              , gridArea: "header"
              , display: "flex"
              , alignItems: "center"
--- a/client/src/Container/Landing.purs
+++ b/client/src/Container/Landing.purs
@ -8,6 +8,7 @@ import Effect.Uncurried (runEffectFn1)
 import JSS (jss, jssClasses)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
+import React.Basic.Helpers (jsx)
 import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
 import React.Basic.Hooks as React
 import Unsafe.Coerce (unsafeCoerce)
@ -82,6 +83,7 @@ mkLandingPage = do
          , landingImage:
            jss
              { position: "absolute"
+              , maxWidth: "none"
              , width: "100%"
              , height: "100%"
              }
@ -112,21 +114,19 @@ mkLandingPage = do
                  , R.div
                      { className: classes.actionButton
                      , children:
-                        [ element button
-                            { buttonProps:
-                              { onClick:
-                                handler_ do
-                                  maybeNode <- readRefMaybe ref
-                                  for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
-                                    height <- getBoundingClientRect n <#> _.height
-                                    win <- window
-                                    runEffectFn1 ((unsafeCoerce win).scrollTo)
-                                      { top: height, left: 0, behavior: "smooth" }
-                              }
+                        [ jsx button
+                            { onClick:
+                              handler_ do
+                                maybeNode <- readRefMaybe ref
+                                for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
+                                  height <- getBoundingClientRect n <#> _.height
+                                  win <- window
+                                  runEffectFn1 ((unsafeCoerce win).scrollTo)
+                                    { top: height, left: 0, behavior: "smooth" }
                            , buttonType: HighlightedButton
-                            , kids: [ R.text buttonText ]
                            , className: classes.actualActionButton
                            }
+                            [ R.text buttonText ]
                        ]
                      }
                  ]
--- a/client/src/Container/Sidebar.purs
+++ b/client/src/Container/Sidebar.purs
@ -1,6 +1,7 @@
 module Container.Sidebar where

 import Prelude
+import Data.Foldable (intercalate)
 import Data.Monoid (guard)
 import Effect (Effect)
 import JSS (jss, jssClasses)
@ -28,7 +29,7 @@ mkSidebar = do
          { sidebar:
            jss
              { background: theme.interfaceColourLighter
-              , fontFamily: theme.textFontFamily
+              , fontFamily: intercalate ", " theme.textFontFamily
              , borderRadius: "0 12px 12px 0"
              , color: theme.textColour
              , position: "absolute"
@ -86,7 +87,7 @@ mkSidebarLink = do
      $ jssClasses \(theme ∷ CSSTheme) ->
          { sidebarEntry:
            jss
-              { fontFamily: theme.headingFontFamily
+              { fontFamily: intercalate ", " theme.headingFontFamily
              , alignSelf: "flex-end"
              , justifyContent: "space-between"
              , alignContent: "stretch"
@ -106,7 +107,7 @@ mkSidebarLink = do
              }
          , label:
            jss
-              { fontFamily: theme.textFontFamily
+              { fontFamily: intercalate ", " theme.textFontFamily
              , color: theme.textColour
              , paddingLeft: "20px"
              , textTransform: "uppercase"
@ -121,7 +122,7 @@ mkSidebarLink = do
              , transition: "0.2s ease-in-out"
              , transitionDelay: "0.1s"
              , alignSelf: "flex-end"
-              , fill: theme.textColour <> " !important"
+              , fill: theme.textColour
              }
          }
  component "SidebarLink" \{ name, icon, collapsed } -> React.do
--- a/client/src/Container/Stories.purs
+++ b/client/src/Container/Stories.purs
@ -2,10 +2,10 @@ module Container.Stories where

 import Prelude hiding (add)
 import Container.Component (mkContainer)
-import Decorator.FullScreen (fullScreenDecorator)
 import Effect (Effect)
 import React.Basic.Hooks (component, element)
 import React.Basic.Hooks as React
+import Storybook.Decorator.FullScreen (fullScreenDecorator)
 import Storybook.React (Storybook, add, addDecorator, storiesOf)
 import Yoga.Theme.Styles (useTheme)

--- a/client/src/Decorator/FullScreen.purs
+++ b/client/src/Decorator/FullScreen.purs
@ -1,119 +0,0 @@
-module Decorator.FullScreen where
-
-import Prelude
-import Data.Array (find)
-import Data.Map (Map)
-import Data.Maybe (Maybe, fromMaybe)
-import Data.Traversable (traverse_)
-import Effect (Effect)
-import JSS (jss, jssClasses)
-import React.Basic (JSX)
-import React.Basic.DOM (css)
-import React.Basic.DOM as R
-import React.Basic.DOM.Events (targetValue)
-import React.Basic.Events (handler)
-import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))
-import React.Basic.Hooks as React
-import Simple.JSON (readJSON_, writeJSON)
-import Web.HTML (window)
-import Web.HTML.Window (localStorage)
-import Web.Storage.Storage (getItem, setItem)
-import Yoga.Font.Rubik as Rubik
-import Yoga.Font.VictorMono as VictorMono
-import Yoga.Theme (fromTheme)
-import Yoga.Theme.Default (darkTheme, lightTheme)
-import Yoga.Theme.Provider (mkThemeProvider)
-import Yoga.Theme.Styles (makeStylesJSS)
-import Yoga.Theme.Types (CSSTheme)
-
-fullScreenDecorator ∷ Effect JSX -> Effect JSX
-fullScreenDecorator mkChild = do
-  let
-    dark = fromTheme darkTheme
-
-    light = fromTheme lightTheme
-  child <- mkChild
-  themeSwitcher <- mkThemeSwitcher
-  pure
-    $ R.div
-        { style:
-          css
-            { minWidth: "100vw"
-            , height: "100vh"
-            }
-        , children:
-          [ element themeSwitcher
-              { kids: [ child ]
-              , defaultTheme: { name: "Dark", theme: dark }
-              , themes:
-                [ { name: "Dark", theme: dark }
-                , { name: "Light", theme: light }
-                ]
-              }
-          ]
-        }
-
-type ThemesWithNames
-  = Map String CSSTheme
-
-type DefaultTheme
-  = { name ∷ String, theme ∷ CSSTheme }
-
-mkThemeSwitcher ∷
-  Effect
-    ( ReactComponent { defaultTheme ∷ DefaultTheme, themes ∷ Array DefaultTheme, kids ∷ Array JSX }
-    )
-mkThemeSwitcher = do
-  themeProvider <- mkThemeProvider
-  useStyles <-
-    makeStylesJSS
-      $ jssClasses \_ ->
-          { selector:
-            jss
-              { position: "fixed"
-              , zIndex: 20
-              , top: 10
-              , right: 10
-              }
-          , "@font-face": jss $ Rubik.fontFamilies <> VictorMono.fontFamilies
-          }
-  storage <- window >>= localStorage
-  saved ∷ (Maybe DefaultTheme) <- getItem "theme" storage <#> (_ >>= readJSON_)
-  component "ThemeSwitcher" \{ defaultTheme, themes, kids } -> React.do
-    classes <- useStyles {}
-    { theme, name } /\ modTheme <- useState $ fromMaybe defaultTheme saved
-    let
-      setTheme newTheme = do
-        setItem "theme" (writeJSON newTheme) storage
-        modTheme (const newTheme)
-    let
-      handleClicked maybeValue =
-        traverse_ setTheme do
-          value <- maybeValue
-          themes # find \x -> x.name == value
-    let
-      themeSelect =
-        R.select
-          { onChange: handler targetValue handleClicked
-          , value: name
-          , className: classes.selector
-          , children:
-            themes
-              <#> \x ->
-                  R.option
-                    { value: x.name
-                    , key: x.name
-                    , children: [ R.text x.name ]
-                    }
-          }
-    pure
-      $ element themeProvider
-          { theme
-          , children:
-            [ R.div
-                { style: css { backgroundColor: theme.backgroundColour, width: "100%", height: "100%" }
-                , children:
-                  [ themeSelect ] <> kids
-                }
-            ]
-          }
--- a/components/src/React/Basic/Hooks/Spring.js
+++ b/components/src/React/Basic/Hooks/Spring.js
@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_spring_1 = require("react-spring");
+exports.interpolateImpl = react_spring_1.interpolate;
 exports.useSpringImpl = function (mkStyles) { return function () {
    var result = react_spring_1.useSpring(mkStyles);
    return { style: result[0], set: result[1], stop: result[2] };
 }; };
 exports.useSpringsImpl = function (n) { return function (fn) { return function () {
    var result = react_spring_1.useSprings(n, fn);
-    console.log("REEEEEEEEESLUT", result);
    return { styles: result[0], set: result[1], stop: result[2] };
 }; }; };
 exports.useTransitionImpl = react_spring_1.useTransition;
--- a/components/src/Yoga/Grimoire/Component.purs
+++ b/components/src/Yoga/Grimoire/Component.purs
@ -6,18 +6,19 @@ import Data.Array as Array
 import Data.FoldableWithIndex (findWithIndex)
 import Data.Lens (set)
 import Data.Lens.Index (ix)
-import Data.Maybe (Maybe(..), fromMaybe, isJust)
+import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Nullable (Nullable)
 import Data.Nullable as Nullable
 import Data.Traversable (for, sequence)
 import Data.Tuple.Nested ((/\), type (/\))
 import Debug.Trace (spy)
 import Effect (Effect)
+import Effect.Aff (Milliseconds(..), delay, launchAff_)
 import Justifill (justifill)
 import React.Basic (ReactComponent)
 import React.Basic.DOM (css)
 import React.Basic.Helpers (jsx)
-import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)
+import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Spring (animatedDiv, useSprings)
 import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
@ -30,6 +31,7 @@ import Yoga.Grid.Component as Grid
 import Yoga.Grimoire.Spell.Component as GrimoireSpell
 import Yoga.Grimoire.Styles (styles)
 import Yoga.Helpers ((?||))
+import Yoga.Resize.Hook (useResize)
 import Yoga.Spell.Types (Spell)
 import Yoga.Theme.Styles (makeStylesJSS, useTheme)
 import Yoga.Theme.Types (CSSTheme)
@ -83,14 +85,28 @@ makeComponent = do
    nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))
    positionsRef <- useRef ([] ∷ _ DOMRect)
    originalPositionsRef <- useRef ([] ∷ _ DOMRect)
-    useLayoutEffect unit do
-      rects <- getRects nodeRefs
-      writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
-      writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
+    initialisedRef <- useRef false
+    windowSize <- useResize
+    let
+      init = do
+        initialised <- readRef initialisedRef
+        unless initialised do
+          rects <- getRects nodeRefs
+          writeRef positionsRef (rects <#> fromMaybe emptyDomRect)
+          writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)
+          writeRef initialisedRef true
+    useEffect windowSize do
+      writeRef initialisedRef false
+      positions <- readRef positionsRef
+      let
+        newOriginalPositions = positions
+      writeRef positionsRef newOriginalPositions
+      init
      mempty
    theme ∷ CSSTheme <- useTheme
    bindDragProps <-
-      useDrag (justifill {}) \{ arg, down, movement: mx /\ my, xy: x /\ y } -> do
+      useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do
+        init
        rects <- getRects nodeRefs
        originalPositions <- readRef originalPositionsRef
        positionsBefore <- readRef positionsRef
@ -101,7 +117,10 @@ makeComponent = do

          overlapsOtherBefore = positionsBefore # findWithIndex \i' pos -> i' /= arg && overlaps currentPosDraggedBefore pos
        case down, overlapsOtherBefore of
-          false, Just { index, value } -> writeRef positionsRef (swap arg index positionsBefore ?|| positionsBefore)
+          false, Just { index, value } -> do
+            let
+              swapped = swap arg index positionsBefore ?|| positionsBefore
+            writeRef positionsRef swapped
          _, _ -> mempty
        positions <- readRef positionsRef
        let
@ -121,9 +140,27 @@ makeComponent = do
            topOffset = if iPos == origIPos then 0.0 else iPos.top - origIPos.top
          case i == arg, down, overlapsOther of
            false, true, Just { index, value }
-              | index == i -> { x: originalPosDragged.left - value.left + leftOffset, y: originalPosDragged.top - value.top + topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }
-            true, true, _ -> { x: mx + leftOffset, y: my + topOffset, zIndex: 1, transform: "scale3d(1.1, 1.1, 1.1)", immediate: \n -> n == "x" || n == "y" || n == "zIndex" }
-            _, _, _ -> { x: leftOffset, y: topOffset, zIndex: 0, transform: "scale3d(1.0, 1.0, 1.0)", immediate: const false }
+              | index == i ->
+                { x: originalPosDragged.left - value.left + leftOffset
+                , y: originalPosDragged.top - value.top + topOffset
+                , zIndex: 0
+                , transform: "scale3d(1.0, 1.0, 1.0)"
+                , immediate: const false
+                }
+            true, true, _ ->
+              { x: mx + leftOffset
+              , y: my + topOffset
+              , zIndex: 1
+              , transform: "scale3d(1.1, 1.1, 1.1)"
+              , immediate: \n -> n == "x" || n == "y" || n == "zIndex"
+              }
+            _, _, _ ->
+              { x: leftOffset
+              , y: topOffset
+              , zIndex: 0
+              , transform: "scale3d(1.0, 1.0, 1.0)"
+              , immediate: const false
+              }
    let
      renderSpells =
        mapWithIndex \i (spell /\ style) ->
--- a/components/src/Yoga/Grimoire/Spell/Component.purs
+++ b/components/src/Yoga/Grimoire/Spell/Component.purs
@ -56,7 +56,7 @@ makeComponent = do
              ]
          ]
    pure
-      $ jsx card { divRef: props.cardRef }
+      $ jsx card { divRef: props.cardRef, className: style.card }
          [ jsx box { className: style.container, padding: "var(--s-1)" }
              [ jsx stack { space: "var(--s-3)" }
                  [ headerCluster
--- a/components/src/Yoga/Grimoire/Spell/Spec.purs
+++ b/components/src/Yoga/Grimoire/Spell/Spec.purs
@ -1,4 +1,4 @@
-module Yoga.Grimoire.Spell.Spec where
+module Yoga.Spell.Spec where

 import Prelude
 import Justifill (justifill)
--- a/components/src/Yoga/Grimoire/Spell/Styles.purs
+++ b/components/src/Yoga/Grimoire/Spell/Styles.purs
@ -1,11 +1,10 @@
 module Yoga.Grimoire.Spell.Styles where

 import Prelude hiding (top)
-import CSS (ColorSpace(..), backgroundColor, border, borderRadius, color, fontFamily, fontSize, fontStyle, height, mix, pct, sansSerif, solid, width)
+import CSS (backgroundColor, color, fontFamily, fontSize, fontStyle, height, pct, sansSerif, width)
 import CSS.FontStyle (italic)
 import CSS.TextAlign (rightTextAlign, textAlign)
 import Data.Array (fromFoldable)
-import Data.NonEmpty (NonEmpty(..))
 import Data.NonEmpty as NonEmpty
 import JSS (JSSClasses, JSSElem, jss, jssClasses)
 import Yoga.Theme.Types (YogaTheme)
@ -20,13 +19,18 @@ type Classes a
  = ( container ∷ a
    , signature ∷ a
    , description ∷ a
+    , card ∷ a
    , name ∷ a
    )

 styles ∷ JSSClasses YogaTheme Props (Classes (JSSElem Props))
 styles =
  jssClasses \theme@{ s0, s1, s4, s5, s_5 } ->
-    { container:
+    { card:
+      do
+        width (100.0 # pct)
+        height (100.0 # pct)
+    , container:
      jss { userSelect: "none" }
        <> jss do
            backgroundColor theme.backgroundColourLighter
--- a/components/src/Yoga/Resize/Hook.purs
+++ b/components/src/Yoga/Resize/Hook.purs
@ -0,0 +1,39 @@
+module Yoga.Resize.Hook where
+
+import Prelude
+import Data.Int (toNumber)
+import Data.Newtype (class Newtype)
+import Effect (Effect)
+import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))
+import React.Basic.Hooks as React
+import Web.Event.EventTarget (EventListener, eventListener)
+import Web.HTML (window)
+import Web.HTML.Window (innerHeight, innerWidth)
+import Yoga.Resize.Listener as Resize
+
+newtype UseResize hooks
+  = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
+
+derive instance ntUseResize ∷ Newtype (UseResize hooks) _
+useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }
+useResize =
+  coerceHook React.do
+    size /\ updateSize <- useState { width: 0.0, height: 0.0 }
+    let
+      setSize = updateSize <<< const
+    useLayoutEffect unit do
+      setSizeFromWindow setSize
+      listener <- makeListener setSize
+      Resize.registerListener listener
+    pure size
+
+setSizeFromWindow setSize = do
+  win <- window
+  width <- innerWidth win <#> toNumber
+  height <- innerHeight win <#> toNumber
+  setSize { width, height }
+
+makeListener ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect EventListener
+makeListener setSize = do
+  eventListener
+    $ const (setSizeFromWindow setSize)
--- a/components/src/Yoga/Resize/Listener.purs
+++ b/components/src/Yoga/Resize/Listener.purs
@ -0,0 +1,17 @@
+module Yoga.Resize.Listener (registerListener) where
+
+import Prelude
+import Effect (Effect)
+import Web.Event.Event (EventType(..))
+import Web.Event.EventTarget (EventListener, addEventListener, removeEventListener)
+import Web.HTML (window)
+import Web.HTML.Window (toEventTarget)
+
+eventType ∷ EventType
+eventType = EventType "resize"
+
+registerListener ∷ EventListener -> Effect (Effect Unit)
+registerListener listener = do
+  target <- window <#> toEventTarget
+  addEventListener eventType listener false target
+  pure $ removeEventListener eventType listener false target
--- a/components/src/Yoga/Theme/Default.purs
+++ b/components/src/Yoga/Theme/Default.purs
@ -49,7 +49,7 @@ lightTheme =
    { textColour = Color.hsl 220.0 0.18 0.30
    , backgroundColour = Color.hsl 30.0 0.50 0.96
    , interfaceColour = Color.hsl 210.0 0.10 0.89
-    , highlightColour = Color.hsl 350.0 0.93 0.62
+    , highlightColour = Color.hsl 350.0 0.93 0.67
    , altHighlightColour = Color.hsl 84.0 0.617 0.631
    , green = Color.hsl 170.0 0.39 0.40
    , purple = Color.hsl 284.0 0.64 0.60