Opening salvo of regretful turds

Author: Daniel Harvey

.gitignore

@@ -0,0 +1,10 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago

packages.dhall

@@ -0,0 +1,35 @@
+let mkPackage =
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.2-20190725/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
+
+let upstream =
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.2-20190725/src/packages.dhall sha256:60cc03d2c3a99a0e5eeebb16a22aac219fa76fe6a1686e8c2bd7a11872527ea3
+
+let overrides = {=}
+
+let additions =
+  { cssom =
+        mkPackage
+        [ "effect", "console" ]
+        "https://github.com/danieljharvey/purescript-cssom.git"
+        "v0.0.2"
+    , styling =
+        mkPackage
+        [ "console"
+        , "debug"
+        , "effect"
+        , "foreign"
+        , "generics-rep"
+        , "ordered-collections"
+        , "prelude"
+        , "psci-support"
+        , "refs"
+        , "test-unit"
+        , "unordered-collections"
+        , "cssom"
+        ]
+        "../purs-cssom"
+        "v0.0.1"
+    }
+
+
+in  upstream // overrides // additions

spago.dhall

@@ -0,0 +1,11 @@
+{-
+Welcome to a Spago project!
+You can edit this file as you like.
+-}
+{ name =
+    "my-project"
+, dependencies =
+    [ "effect", "console", "psci-support", "react", "cssom", "styling" ]
+, packages =
+    ./packages.dhall
+}

src/Internal/Consumer.purs

@@ -0,0 +1,38 @@
+module React.Stylesheet.Internal.Consumer where
+
+import Prelude (($))
+import Effect.Unsafe (unsafePerformEffect)
+
+import Data.Maybe (Maybe(..))
+import Data.Symbol (class IsSymbol)
+
+import React as React
+import PursUI (CSSRuleSet, PursUI, addStyle)
+
+import React.Stylesheet.Internal.Types
+
+-- | Internal function that creates a Purescript React class which allows
+-- | consumption of the Radox store via React Context
+styleConsumer
+  :: forall props label localState
+   . IsSymbol label
+  => React.Context (Maybe (PursUI label))
+  -> props
+  -> localState
+  -> CSSRuleSet props
+  -> StyleRenderMethod props localState 
+  -> React.ReactElement
+styleConsumer context props localState cssRules renderer = do
+  let render stylesheet 
+        = let classNames = case stylesheet of
+                Just stylesheet' 
+                  -> unsafePerformEffect $ addStyle stylesheet' cssRules props
+                _ -> []
+          in renderer { props: props
+                      , localState: localState
+                      , classNames: classNames
+                      }
+  React.createLeafElement context.consumer
+          { children: render }
+
+

src/Internal/Provider.purs

@@ -0,0 +1,36 @@
+module React.Stylesheet.Internal.Provider where
+
+import Prelude (bind, pure, ($))
+import Data.Maybe (Maybe(..))
+import Data.Symbol (class IsSymbol)
+import React as React
+import PursUI
+
+-- | Internal function for creating a Purescript React class that providers the
+-- | Radox store through React Context
+styleProvider 
+  :: forall label
+   . IsSymbol label
+  => React.Context (Maybe (PursUI label))
+  -> React.ReactClass { children :: Array React.ReactElement }
+styleProvider context 
+  = React.pureComponent "Provider" component
+  where
+    component this = do
+        (stylesheet :: PursUI label) <- createBlankStyleSheet
+        pure $ { state  : { }
+               , render : render' this stylesheet
+               }
+
+    render' this stylesheet = do
+        props <- React.getProps this
+        state <- React.getState this
+        pure $ 
+            React.createElement 
+              context.provider 
+              { value: Just stylesheet 
+              }
+              props.children
+
+
+

src/Internal/StyleContext.purs

@@ -0,0 +1,24 @@
+module React.Stylesheet.Internal.StyleContext where
+
+import Data.Maybe (Maybe(..))
+import Data.Symbol (class IsSymbol, SProxy)
+import React as React
+import PursUI (PursUI)
+import React.Stylesheet.Internal.Types
+import React.Stylesheet.Internal.Provider (styleProvider)
+import React.Stylesheet.Internal.Consumer (styleConsumer)
+
+-- | Takes a CombinedReducer and a default state, and returns both a root-level
+-- | provider and connect component for using the Radox store
+createStyleContext
+  :: forall label
+   . IsSymbol label
+  => SProxy label
+  -> StyleContext label
+createStyleContext label =
+  let myContext = React.createContext (Nothing :: Maybe (PursUI label))
+  in  { provider : styleProvider myContext
+      , consumer : styleConsumer myContext
+      }
+
+

src/Internal/Types.purs

@@ -0,0 +1,24 @@
+module React.Stylesheet.Internal.Types where
+
+import React as React
+import PursUI
+
+type StyleRenderMethod props localState 
+  = (
+      { props      :: props
+      , localState :: localState
+      , classNames :: Array CSSSelector
+      } -> React.ReactElement
+    ) 
+
+type StyleContext (label :: Symbol)
+  = { provider :: React.ReactClass { children :: Array React.ReactElement }
+    , consumer :: (forall props localState
+                . props
+               -> localState
+               -> CSSRuleSet props
+               -> StyleRenderMethod props localState 
+               -> React.ReactElement)
+    }
+
+

src/Main.purs

@@ -0,0 +1,10 @@
+module Main where
+
+import Prelude
+
+import Effect (Effect)
+import Effect.Console (log)
+
+main :: Effect Unit
+main = do
+  log "🍝"

src/StyleProvider.purs

@@ -0,0 +1,97 @@
+module StyleProvider where
+
+import Prelude (bind, pure, ($))
+import Effect.Unsafe (unsafePerformEffect)
+
+import Data.Maybe (Maybe(..))
+import Data.Symbol (class IsSymbol, SProxy(..))
+
+import React as React
+import PursUI
+
+styleContext :: StyleContext "horse" 
+styleContext = createStyleContext (SProxy :: SProxy "horse")
+
+type StyleRenderMethod props localState 
+  = (
+      { props      :: props
+      , localState :: localState
+      , classNames :: Array CSSSelector
+      } -> React.ReactElement
+    ) 
+
+type StyleContext (label :: Symbol)
+  = { provider :: React.ReactClass { children :: Array React.ReactElement }
+    , consumer :: (forall props localState
+                . props
+               -> localState
+               -> CSSRuleSet props
+               -> StyleRenderMethod props localState 
+               -> React.ReactElement)
+    }
+
+-- | Takes a CombinedReducer and a default state, and returns both a root-level
+-- | provider and connect component for using the Radox store
+createStyleContext
+  :: forall label
+   . IsSymbol label
+  => SProxy label
+  -> StyleContext label
+createStyleContext label =
+  let myContext = React.createContext (Nothing :: Maybe (PursUI label))
+  in  { provider : styleProvider myContext
+      , consumer : styleConsumer myContext
+      }
+
+-- | Internal function for creating a Purescript React class that providers the
+-- | Radox store through React Context
+styleProvider 
+  :: forall label
+   . IsSymbol label
+  => React.Context (Maybe (PursUI label))
+  -> React.ReactClass { children :: Array React.ReactElement }
+styleProvider context 
+  = React.pureComponent "Provider" component
+  where
+    component this = do
+        (stylesheet :: PursUI label) <- createBlankStyleSheet
+        pure $ { state  : { }
+               , render : render' this stylesheet
+               }
+
+    render' this stylesheet = do
+        props <- React.getProps this
+        state <- React.getState this
+        pure $ 
+            React.createElement 
+              context.provider 
+              { value: Just stylesheet 
+              }
+              props.children
+
+
+-- | Internal function that creates a Purescript React class which allows
+-- | consumption of the Radox store via React Context
+styleConsumer
+  :: forall props label localState
+   . IsSymbol label
+  => React.Context (Maybe (PursUI label))
+  -> props
+  -> localState
+  -> CSSRuleSet props
+  -> StyleRenderMethod props localState 
+  -> React.ReactElement
+styleConsumer context props localState cssRules renderer = do
+  let render stylesheet 
+        = let classNames = case stylesheet of
+                Just stylesheet' 
+                  -> unsafePerformEffect $ addStyle stylesheet' cssRules props
+                _ -> []
+          in renderer { props: props
+                      , localState: localState
+                      , classNames: classNames
+                      }
+  React.createLeafElement context.consumer
+          { children: render }
+
+

src/Styled/Div.purs

@@ -0,0 +1,39 @@
+module App.Components.Styled.Div (div) where
+
+import Prelude (map, ($))
+import Data.Array (intercalate)
+import React.DOM.Props as Props
+import React as React
+import React.DOM as RDom
+
+import StyleProvider
+
+import PursUI (CSSRuleSet, CSSSelector(..))
+
+construct
+  :: forall props
+   . (Array Props.Props -> Array React.ReactElement -> React.ReactElement) 
+  -> CSSRuleSet props
+  -> props
+  -> Array React.ReactElement 
+  -> React.ReactElement
+construct element cssRule props children
+  = styleContext.consumer props {} cssRule renderDiv
+  where 
+     renderDiv { classNames }
+        = RDom.div [ Props.className (toClassNames classNames) ]
+                      children
+
+div 
+  :: forall props
+   . CSSRuleSet props 
+  -> props 
+  -> Array React.ReactElement 
+  -> React.ReactElement
+div = construct RDom.div
+
+toClassNames :: Array CSSSelector -> String
+toClassNames as
+  = intercalate " " $ map unwrap as
+  where
+    unwrap (CSSClassSelector s) = s