34d0921 · rowtype-yoga/psfp

assets/icons/trianglelogo2.afdesign

compare with master

unifiedsplit

Binary file not shown.

blog/.psc-ide-port+1−1

@@ -1 +1 @@

1−15982

1+15106

blog/gatsby-config.js+4−2

@@ -5,7 +5,8 @@ module.exports = {

5 siteMetadata: {

6 title: "Rowtype Yoga",

7 description: "Rowtype Yoga",

8− author: "Mark Eibes"

8+ author: "Mark Eibes",

9+ menuLinks: [{ name: "home", link: "/" }]

9 },

10 },

10 developMiddleware: app => {

11 developMiddleware: app => {

11 app.use(

12 app.use(

@@ -20,6 +21,7 @@ module.exports = {

20 },

21 },

21 plugins: [

22 plugins: [

22 "gatsby-plugin-purescript",

23 "gatsby-plugin-purescript",

24+ { resolve: "gatsby-plugin-react-svg" },

23 {

25 {

24 resolve: `gatsby-plugin-mdx`,

26 resolve: `gatsby-plugin-mdx`,

25 options: {

27 options: {

@@ -73,7 +75,7 @@ module.exports = {

73 display: "minimal-ui",

75 display: "minimal-ui",

74 icon: "src/images/logo.png" // This path is relative to the root of the site.

76 icon: "src/images/logo.png" // This path is relative to the root of the site.

75 }

77 }

76− },

78+ }

77 // this (optional) plugin enables Progressive Web App + Offline functionality

79 // this (optional) plugin enables Progressive Web App + Offline functionality

78 // To learn more, visit: https://gatsby.app/offline

80 // To learn more, visit: https://gatsby.app/offline

79 // 'gatsby-plugin-offline',

81 // 'gatsby-plugin-offline',

blog/package-lock.json+101−3

@@ -1775,9 +1775,9 @@

1775 }

1776 },

1777 "acorn": {

1778− "version": "7.1.0",

1778+ "version": "7.1.1",

1779− "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",

1779+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",

1780− "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="

1780+ "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg=="

1781 },

1782 "acorn-jsx": {

1783 "version": "5.1.0",

@@ -4307,6 +4307,24 @@

4307 "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",

4308 "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="

4309 },

4310+ "css": {

4311+ "version": "2.2.4",

4312+ "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",

4313+ "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",

4314+ "requires": {

4315+ "inherits": "^2.0.3",

4316+ "source-map": "^0.6.1",

4317+ "source-map-resolve": "^0.5.2",

4318+ "urix": "^0.1.0"

4319+ },

4320+ "dependencies": {

4321+ "source-map": {

4322+ "version": "0.6.1",

4323+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

4324+ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="

4325+ }

4326+ }

4327+ },

4310 "css-color-names": {

4328 "css-color-names": {

4311 "version": "0.0.4",

4329 "version": "0.0.4",

4312 "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",

4330 "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",

@@ -8027,6 +8045,14 @@

8027 "@babel/runtime": "^7.7.6"

8045 "@babel/runtime": "^7.7.6"

8028 }

8046 }

8029 },

8047 },

8048+ "gatsby-plugin-react-svg": {

8049+ "version": "3.0.0",

8050+ "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.0.0.tgz",

8051+ "integrity": "sha512-myZl5NjVZwLLn4ovwSDM7cufa8yjaRiU5KoufJrz8FEalRroZ/hFSCCKNVna3blTwxcS0rZgISigYn9/xY7rkw==",

8052+ "requires": {

8053+ "svg-react-loader": "^0.4.4"

8054+ }

8055+ },

8030 "gatsby-plugin-sharp": {

8056 "gatsby-plugin-sharp": {

8031 "version": "2.4.5",

8057 "version": "2.4.5",

8032 "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.4.5.tgz",

8058 "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.4.5.tgz",

@@ -13828,6 +13854,11 @@

13828 "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",

13854 "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",

13829 "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="

13855 "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="

13830 },

13856 },

13857+ "ramda": {

13858+ "version": "0.21.0",

13859+ "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz",

13860+ "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU="

13861+ },

13831 "randombytes": {

13862 "randombytes": {

13832 "version": "2.1.0",

13863 "version": "2.1.0",

13833 "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

13864 "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

@@ -14858,6 +14889,11 @@

14858 "aproba": "^1.1.1"

14889 "aproba": "^1.1.1"

14859 }

14890 }

14860 },

14891 },

14892+ "rx": {

14893+ "version": "4.1.0",

14894+ "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",

14895+ "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="

14896+ },

14861 "rx-lite": {

14897 "rx-lite": {

14862 "version": "4.0.8",

14898 "version": "4.0.8",

14863 "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",

14899 "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",

@@ -16222,6 +16258,63 @@

16222 "has-flag": "^3.0.0"

16258 "has-flag": "^3.0.0"

16223 }

16259 }

16224 },

16260 },

16261+ "svg-react-loader": {

16262+ "version": "0.4.6",

16263+ "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz",

16264+ "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==",

16265+ "requires": {

16266+ "css": "2.2.4",

16267+ "loader-utils": "1.1.0",

16268+ "ramda": "0.21.0",

16269+ "rx": "4.1.0",

16270+ "traverse": "0.6.6",

16271+ "xml2js": "0.4.17"

16272+ },

16273+ "dependencies": {

16274+ "big.js": {

16275+ "version": "3.2.0",

16276+ "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",

16277+ "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="

16278+ },

16279+ "emojis-list": {

16280+ "version": "2.1.0",

16281+ "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",

16282+ "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="

16283+ },

16284+ "json5": {

16285+ "version": "0.5.1",

16286+ "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",

16287+ "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="

16288+ },

16289+ "loader-utils": {

16290+ "version": "1.1.0",

16291+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",

16292+ "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",

16293+ "requires": {

16294+ "big.js": "^3.1.3",

16295+ "emojis-list": "^2.0.0",

16296+ "json5": "^0.5.0"

16297+ }

16298+ },

16299+ "xml2js": {

16300+ "version": "0.4.17",

16301+ "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz",

16302+ "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=",

16303+ "requires": {

16304+ "sax": ">=0.6.0",

16305+ "xmlbuilder": "^4.1.0"

16306+ }

16307+ },

16308+ "xmlbuilder": {

16309+ "version": "4.2.1",

16310+ "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz",

16311+ "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=",

16312+ "requires": {

16313+ "lodash": "^4.0.0"

16314+ }

16315+ }

16316+ }

16317+ },

16225 "svgo": {

16318 "svgo": {

16226 "version": "1.3.2",

16319 "version": "1.3.2",

16227 "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",

16320 "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",

@@ -16617,6 +16710,11 @@

16617 "punycode": "^2.1.1"

16710 "punycode": "^2.1.1"

16618 }

16711 }

16619 },

16712 },

16713+ "traverse": {

16714+ "version": "0.6.6",

16715+ "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",

16716+ "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="

16717+ },

16620 "trim": {

16718 "trim": {

16621 "version": "0.0.1",

16719 "version": "0.0.1",

16622 "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",

16720 "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",

blog/package.json+1

@@ -15,6 +15,7 @@

15 "gatsby-plugin-offline": "^2.2.4",

16 "gatsby-plugin-purescript": "^2.0.0",

17 "gatsby-plugin-react-helmet": "^3.1.3",

18+ "gatsby-plugin-react-svg": "^3.0.0",

18 "gatsby-plugin-sharp": "^2.2.9",

19 "gatsby-plugin-sharp": "^2.2.9",

19 "gatsby-plugin-web-font-loader": "^1.0.4",

20 "gatsby-plugin-web-font-loader": "^1.0.4",

20 "gatsby-source-filesystem": "^2.1.8",

21 "gatsby-source-filesystem": "^2.1.8",

blog/src/components/PSLayout.purs+56−25

@@ -1,32 +1,39 @@

1module PSLayout where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5−import CSSBaseline (mkCssBaseline)

5+import Yoga.Theme.CSSBaseline (mkCssBaseline)

6−import CompileEditor.Component (mkCompileEditor)

6+import Yoga.CompileEditor.Component (mkCompileEditor)

7import Data.Array as Array

8import Data.Maybe (Maybe(..), fromMaybe)

9import Data.Nullable (Nullable)

10import Data.Nullable as Nullable

11import Data.String as String

12import Effect (Effect)

13+import Yoga.Header.Component (mkHeader)

13import Milkis.Impl (FetchImpl)

14import Milkis.Impl (FetchImpl)

15+import Yoga.Panel.Component (makeComponent) as Panel

14import React.Basic (JSX, ReactComponent)

16import React.Basic (JSX, ReactComponent)

15import React.Basic.DOM (unsafeCreateDOMComponent)

17import React.Basic.DOM (unsafeCreateDOMComponent)

16import React.Basic.DOM as R

18import React.Basic.DOM as R

17−import React.Basic.Hooks (ReactChildren, componentWithChildren, element)

19+import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, reactChildrenFromArray, reactChildrenToArray)

18import React.Basic.Hooks as React

20import React.Basic.Hooks as React

19−import Theme (fromTheme)

21+import Yoga.Theme (fromTheme)

20−import Theme.Default (darkTheme)

22+import Yoga.Theme.Default (darkTheme)

21−import Theme.Provider (mkThemeProvider)

23+import Yoga.Theme.Provider (mkThemeProvider)

22−import Theme.Styles (makeStyles)

24+import Yoga.Theme.Styles (makeStyles)

23−import Theme.Types (CSSTheme)

25+import Yoga.Theme.Types (CSSTheme)

24−import Typography.Header (HeadingLevel(..), mkH)

26+import Yoga.Typography.Header (HeadingLevel(..), mkH)

25−import Typography.Paragraph (mkP)

27+import Yoga.Typography.Paragraph (mkP)

26−import Unsafe.Coerce (unsafeCoerce)

27

28

28type SiteQueryResult

29type SiteQueryResult

30+ = { site ∷

29− = { site ∷ { siteMetadata ∷ { title ∷ String } } }

31+ { siteMetadata ∷

32+ { title ∷ String

33+ , menuLinks ∷ Array { name ∷ String, link ∷ String }

34+ }

35+ }

36+ }

30

37

31type PreProps

38type PreProps

32 = { children ∷

39 = { children ∷

@@ -41,11 +48,10 @@ type PreProps

41 }

48 }

42

49

43mkLayout ∷

50mkLayout ∷

44− ∀ children.

45 FetchImpl ->

51 FetchImpl ->

46 Effect

52 Effect

47 ( ReactComponent

53 ( ReactComponent

48− { children ∷ ReactChildren children

54+ { children ∷ ReactChildren JSX

49 , siteInfo ∷ SiteQueryResult

55 , siteInfo ∷ SiteQueryResult

50 }

56 }

51 )

57 )

@@ -64,18 +70,19 @@ mkLayout fetchImpl = do

64 ]

70 ]

65 }

71 }

66

72

67−mkMdxProviderComponent ::

73+mkMdxProviderComponent ∷

68− ∀ children.

69 FetchImpl ->

74 FetchImpl ->

70 Effect

75 Effect

71 ( ReactComponent

76 ( ReactComponent

72− { children ∷ ReactChildren children

77+ { children ∷ ReactChildren JSX

73 , siteInfo ∷ SiteQueryResult

78 , siteInfo ∷ SiteQueryResult

74 }

79 }

75 )

80 )

76mkMdxProviderComponent fetchImpl = do

81mkMdxProviderComponent fetchImpl = do

77 cssBaseline <- mkCssBaseline

82 cssBaseline <- mkCssBaseline

78 editor <- mkCompileEditor fetchImpl

83 editor <- mkCompileEditor fetchImpl

84+ sidebar <- mkSidebar

85+ header <- mkHeader

79 h <- mkH

86 h <- mkH

80 p <- mkP

87 p <- mkP

81 useStyles <-

88 useStyles <-

@@ -94,6 +101,11 @@ mkMdxProviderComponent fetchImpl = do

94 { marginLeft: "35px"

101 { marginLeft: "35px"

95 , marginRight: "35px"

102 , marginRight: "35px"

96 }

103 }

104+ , flexer:

105+ cssSafer

106+ { display: "flex"

107+ , flexDirection: "row"

108+ }

97 }

109 }

98 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do

110 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do

99 classes <- useStyles

111 classes <- useStyles

@@ -103,12 +115,9 @@ mkMdxProviderComponent fetchImpl = do

103 siteInfoJSX =

115 siteInfoJSX =

104 R.div

116 R.div

105 { children:

117 { children:

106− [ element h

107− { level: H1

108− , text: siteInfo.site.siteMetadata.title

118+ [ element header { kids: [ R.text siteInfo.site.siteMetadata.title ], className: "" }

109− , className: Nothing

119+ , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }

110− }

111− , R.div_ (unsafeCoerce children)

120+ , R.div_ (reactChildrenToArray children)

112 ]

121 ]

113 }

122 }

114

123

@@ -170,11 +179,33 @@ mkMdxProviderComponent fetchImpl = do

170 pure

179 pure

171 $ baseline

180 $ baseline

172 [ element mdxProvider

181 [ element mdxProvider

182+ { children:

173− { children: [ siteInfoJSX ]

183+ [ siteInfoJSX

184+ ]

174 , components: mdxComponents

185 , components: mdxComponents

175 }

186 }

176 ]

187 ]

177

188

189+mkSidebar = do

190+ panel <- Panel.makeComponent

191+ useStyles <-

192+ makeStyles \(theme :: CSSTheme) ->

193+ { flexer:

194+ cssSafer

195+ { display: "flex"

196+ , flexDirection: "row"

197+ , width: "300px"

198+ , height: "300px"

199+ }

200+ }

201+ component "Sidebar" \{ links } -> React.do

202+ classes <- useStyles

203+ pure

204+ $ element panel

205+ { kids: [ R.div_ [ R.text "hahahaha"] ]

206+ , className: Just classes.flexer

207+ }

208+

178foreign import mdxProvider ∷

209foreign import mdxProvider ∷

179 ∀ r.

210 ∀ r.

180 ReactComponent

211 ReactComponent

blog/src/components/layout.js+4

@@ -13,6 +13,10 @@ const Layout = ({ children }) => {

13 site {

14 siteMetadata {

15 title

16+ menuLinks {

17+ name

18+ link

19+ }

16 }

20 }

17 }

21 }

18 }

22 }

client/.vscode/settings.json+2−1

@@ -1,4 +1,5 @@

1{

2 "editor.formatOnSave": true,

3− "purescript.buildCommand": "spago build --purs-args '--json-errors'"

3+ "purescript.buildCommand": "npx spago build --purs-args '--json-errors'",

4+ "search.exclude": { "**/.history": true }

4}

5}

client/spago.dhall+17−16

@@ -4,22 +4,23 @@ You can edit this file as you like.

4-}

5{ name = "my-project"

6, dependencies =

7− [ "console"

7+ [ "console"

8− , "css"

8+ , "css"

9− , "debug"

9+ , "debug"

10− , "effect"

10+ , "effect"

11− , "interpolate"

11+ , "interpolate"

12− , "milkis"

12+ , "milkis"

13− , "psci-support"

13+ , "psci-support"

14− , "pseudo-random"

14+ , "pseudo-random"

15− , "react-basic"

15+ , "react-basic"

16− , "react-basic-hooks"

16+ , "react-basic-hooks"

17− , "react-testing-library"

17+ , "react-testing-library"

18− , "record-extra"

18+ , "record-extra"

19− , "spec-discovery"

19+ , "spec-discovery"

20− , "string-parsers"

20+ , "string-parsers"

21− , "web-html"

21+ , "web-html"

22+ , "yoga-components"

22− ]

23+ ]

23, packages = ./packages.dhall

24, packages = ./packages.dhall

24, sources = [ "src/**/*.purs", "test/**/*.purs" ]

25, sources = [ "src/**/*.purs", "test/**/*.purs" ]

25}

26}

client/src/Container/Component.purs+8−8

@@ -1,23 +1,23 @@

1module Container.Component where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5−import CompileEditor.Component (mkCompileEditor)

5+import Yoga.CompileEditor.Component (mkCompileEditor)

6import Container.Header (mkHeader)

7import Container.Landing (mkLandingPage)

8import Container.Sidebar (mkSidebar, mkSidebarLink)

9import Data.Nullable as Nullable

10import Effect (Effect)

11import Milkis.Impl.Window (windowFetch)

12−import Polyfill.SmoothScrolling (smoothScrollPolyfill)

12+import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)

13import React.Basic (JSX)

14import React.Basic.DOM as R

15import React.Basic.Hooks (ReactComponent, component, element, useRef, useState, (/\))

16import React.Basic.Hooks as React

17−import SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)

17+import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)

18−import Theme.Provider (mkThemeProvider)

18+import Yoga.Theme.Provider (mkThemeProvider)

19−import Theme.Styles (makeStyles)

19+import Yoga.Theme.Styles (makeStyles)

20−import Theme.Types (CSSTheme)

20+import Yoga.Theme.Types (CSSTheme)

21

22mkContainer ∷ Effect (ReactComponent { theme ∷ CSSTheme, kids ∷ Array JSX })

23mkContainer = do

@@ -84,7 +84,7 @@ mkContainerContent = do

84 }

85 , R.div

86 { className: classes.content

87− , children: [ element editor { initialCode, height: "50vh" } ] <> kids

87+ , children: [ element editor { initialCode, height: "50vh", language: "purescript" } ] <> kids

88 }

89 ]

90 }

client/src/Container/Header.purs+6−6

@@ -1,7 +1,7 @@

1module Container.Header where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Int (toNumber)

6import Data.Maybe (Maybe(..))

7import Data.Monoid (guard)

@@ -12,11 +12,11 @@ import Effect.Class.Console (log)

12import React.Basic.DOM as R

13import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseLayoutEffect, UseRef, UseState, coerceHook, component, element, readRefMaybe, useLayoutEffect, useRef, useState, (/\))

14import React.Basic.Hooks as React

15−import SVG.Icon (trianglelogoIcon)

15+import Yoga.SVG.Icon (trianglelogoIcon)

16−import Scroll.Listener as Scroll

16+import Yoga.Scroll.Listener as Scroll

17−import Theme.Styles (makeStyles)

17+import Yoga.Theme.Styles (makeStyles)

18−import Theme.Types (CSSTheme)

18+import Yoga.Theme.Types (CSSTheme)

19−import Typography.Header (HeadingLevel(..), mkH)

19+import Yoga.Typography.Header (HeadingLevel(..), mkH)

20import Web.DOM (Node)

21import Web.Event.EventTarget (EventListener, eventListener)

22import Web.HTML (HTMLElement, window)

client/src/Container/Landing.purs+8−8

@@ -1,8 +1,8 @@

1module Container.Landing where

2

3import Prelude

4−import Button.Component (ButtonType(..), mkButton)

4+import Yoga.Button.Component (ButtonType(..), mkButton)

5−import CSS.Safer (cssSafer)

5+import Yoga.CSS.Safer (cssSafer)

6import Data.Foldable (for_)

7import Data.Nullable (null)

8import Effect (Effect)

@@ -11,12 +11,12 @@ import React.Basic.DOM as R

11import React.Basic.Events (handler_)

12import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)

13import React.Basic.Hooks as React

14−import SVG.Icon (trianglelogoIcon)

14+import Yoga.SVG.Icon (trianglelogoIcon)

15−import SVG.Image (mkLandingPageBackground)

15+import Yoga.SVG.Image (mkLandingPageBackground)

16−import Scroll.Hook (useScrollYPosition)

16+import Yoga.Scroll.Hook (useScrollYPosition)

17−import Theme.Styles (makeStyles, useTheme)

17+import Yoga.Theme.Styles (makeStyles, useTheme)

18−import Theme.Types (CSSTheme)

18+import Yoga.Theme.Types (CSSTheme)

19−import Typography.Header (mkH)

19+import Yoga.Typography.Header (mkH)

20import Unsafe.Coerce (unsafeCoerce)

21import Web.HTML (window)

22import Web.HTML.HTMLElement (getBoundingClientRect)

client/src/Container/Sidebar.purs+4−4

@@ -1,7 +1,7 @@

1module Container.Sidebar where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Monoid (guard)

6import Effect (Effect)

7import React.Basic (JSX)

@@ -9,9 +9,9 @@ import React.Basic.DOM as R

9import React.Basic.Events (handler_)

10import React.Basic.Hooks (ReactComponent, component, element)

11import React.Basic.Hooks as React

12−import SVG.Icon (ActiveArrowDirection(..), mkMenu)

12+import Yoga.SVG.Icon (ActiveArrowDirection(..), mkMenu)

13−import Theme.Styles (classNames, makeStyles)

13+import Yoga.Theme.Styles (classNames, makeStyles)

14−import Theme.Types (CSSTheme)

14+import Yoga.Theme.Types (CSSTheme)

15

16mkSidebar ∷

17 Effect

client/src/Container/Stories.purs+1−1

@@ -7,7 +7,7 @@ import Effect (Effect)

7import React.Basic.Hooks (component, element)

8import React.Basic.Hooks as React

9import Storybook.React (Storybook, add, addDecorator, storiesOf)

10−import Theme.Styles (useTheme)

10+import Yoga.Theme.Styles (useTheme)

11

12stories ∷ Effect Storybook

13stories = do

client/src/Decorator/FullScreen.purs+6−6

@@ -1,7 +1,7 @@

1module Decorator.FullScreen where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Array (find)

6import Data.Map (Map)

7import Data.Maybe (Maybe, fromMaybe)

@@ -15,11 +15,11 @@ import React.Basic.Events (handler)

15import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))

16import React.Basic.Hooks as React

17import Simple.JSON (readJSON_, writeJSON)

18−import Theme (fromTheme)

18+import Yoga.Theme (fromTheme)

19−import Theme.Default (darkTheme, lightTheme)

19+import Yoga.Theme.Default (darkTheme, lightTheme)

20−import Theme.Provider (mkThemeProvider)

20+import Yoga.Theme.Provider (mkThemeProvider)

21−import Theme.Styles (makeStyles_)

21+import Yoga.Theme.Styles (makeStyles_)

22−import Theme.Types (CSSTheme)

22+import Yoga.Theme.Types (CSSTheme)

23import Web.HTML (window)

24import Web.HTML.Window (localStorage)

25import Web.Storage.Storage (getItem, setItem)

client/src/Example.purs+2−2

@@ -8,8 +8,8 @@ import Effect.Console (log)

8import Partial.Unsafe (unsafePartial)

9import React.Basic (JSX, element)

10import React.Basic.DOM as ReactDOM

11−import Theme (fromTheme)

11+import Yoga.Theme (fromTheme)

12−import Theme.Default (darkTheme)

12+import Yoga.Theme.Default (darkTheme)

13import Web.DOM.NonElementParentNode (getElementById) as DOM

14import Web.HTML (window) as DOM

15import Web.HTML.HTMLDocument (toNonElementParentNode) as DOM

client/src/Shareddeleted−1

@@ -1 +0,0 @@

1−../../shared/Shared/

client/src/Storybook/React.pursdeleted−43

@@ -1,43 +0,0 @@

1−module Storybook.React

2− ( storiesOf

3− , Storybook

4− , add

5− , addDecorator

6− ) where

7−

8−import Prelude hiding (add)

9−import Control.Monad.Reader (ReaderT, ask, lift, local, runReaderT)

10−import Effect (Effect)

11−import React.Basic (JSX, ReactComponent, element, fragment)

12−

13−foreign import data Storybook ∷ Type

14−

15−foreign import storiesOfImpl ∷ String -> Storybook

16−

17−foreign import addImpl ∷ Storybook -> Effect JSX -> String -> Effect Storybook

18−

19−foreign import addDecoratorImpl ∷

20− Storybook ->

21− (Effect JSX -> Effect JSX) ->

22− Effect Storybook

23−

24−add ∷ ∀ props. String -> Effect (ReactComponent { | props }) -> Array { | props } -> ReaderT Storybook Effect Unit

25−add name mkComponent propsArray = do

26− sb <- ask

27− let

28− component = do

29− comp <- mkComponent

30− pure $ fragment $ propsArray <#> element comp

31− newBook <- lift $ addImpl sb component name

32− local (const newBook) (pure unit)

33−

34−addDecorator ∷ (Effect JSX -> Effect JSX) -> ReaderT Storybook Effect Unit

35−addDecorator decorate = do

36− sb <- ask

37− newBook <-

38− lift

39− $ addDecoratorImpl sb decorate

40− local (const newBook) (pure unit)

41−

42−storiesOf ∷ ∀ a. String -> ReaderT Storybook Effect a -> Effect Storybook

43−storiesOf name program = runReaderT (program *> ask) (storiesOfImpl name)

client/src/Yogadeleted−1

@@ -1 +0,0 @@

1−../../components/src/Yoga/

components/.storybook/config.js+5−6

@@ -1,12 +1,11 @@

1−import { configure, forceReRender } from '@storybook/react';

1+import { configure, forceReRender } from "@storybook/react";

2−import equal from 'deep-equal';

3

2

4−const req = require.context('../stories/', true, /Stories\.purs$/);

3+const localStories = require.context("../src/", true, /Stories\.purs$/);

5

4

6function loadStories() {

5function loadStories() {

7− req.keys().forEach(filename => {

6+ localStories.keys().forEach(filename => {

8− req(filename).stories();

7+ localStories(filename).stories();

9− })

8+ });

10}

9}

11

10

12configure(loadStories, module);

11configure(loadStories, module);

components/.vscode/settings.json+2−1

@@ -1,4 +1,5 @@

1{

2 "editor.formatOnSave": true,

3− "purescript.buildCommand": "npx spago build --purs-args '--json-errors'"

3+ "purescript.buildCommand": "npx spago build --purs-args '--json-errors'",

4+ "search.exclude": { "**/.history": true }

4}

5}

components/package.json+1−1

@@ -56,7 +56,7 @@

56 "react-monaco-editor": "^0.33.0",

57 "react-svg-loader": "^3.0.3",

58 "smoothscroll-polyfill": "^0.4.4",

59− "spago": "^0.13.1",

59+ "spago": "^0.14.0",

60 "typescript": "^3.7.5",

61 "webpack": "^4.41.0",

62 "webpack-cli": "^3.3.6",

components/stories/Decorator/FullScreen.purs → components/src/Storybook/Decorator/FullScreen.pursrenamed+7−7

@@ -1,7 +1,7 @@

1−module Decorator.FullScreen where

1+module Storybook.Decorator.FullScreen where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Array (find)

6import Data.Map (Map)

7import Data.Maybe (Maybe, fromMaybe)

@@ -15,11 +15,11 @@ import React.Basic.Events (handler)

15import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))

16import React.Basic.Hooks as React

17import Simple.JSON (readJSON_, writeJSON)

18−import Theme (fromTheme)

18+import Yoga.Theme (fromTheme)

19−import Theme.Default (darkTheme, lightTheme)

19+import Yoga.Theme.Default (darkTheme, lightTheme)

20−import Theme.Provider (mkThemeProvider)

20+import Yoga.Theme.Provider (mkThemeProvider)

21−import Theme.Styles (makeStyles_)

21+import Yoga.Theme.Styles (makeStyles_)

22−import Theme.Types (CSSTheme)

22+import Yoga.Theme.Types (CSSTheme)

23import Web.HTML (window)

24import Web.HTML.Window (localStorage)

25import Web.Storage.Storage (getItem, setItem)

client/src/Storybook/React.js → components/src/Storybook/React.jsrenamed

The content is the same.

components/stories/Storybook/React.purs → components/src/Storybook/React.pursrenamed

The content is the same.

components/src/Yoga/Button/Component.purs+6−6

@@ -1,8 +1,8 @@

1−module Button.Component where

1+module Yoga.Button.Component where

2

3import Prelude

4−import CSS (ColorSpace(..), contentBox, mix, toHexString)

4+import CSS (ColorSpace(..), mix, toHexString)

5−import CSS.Safer (cssSafer)

5+import Yoga.CSS.Safer (cssSafer)

6import Color (fromHexString)

7import Data.Foldable (intercalate)

8import Data.Interpolate (i)

@@ -16,9 +16,9 @@ import React.Basic.DOM as R

16import React.Basic.Hooks (ReactComponent, component, element)

17import React.Basic.Hooks as React

18import Record (union)

19−import Theme (increaseContrast)

19+import Yoga.Theme (increaseContrast)

20−import Theme.Styles (classNames, makeStyles)

20+import Yoga.Theme.Styles (classNames, makeStyles)

21−import Theme.Types (CSSTheme)

21+import Yoga.Theme.Types (CSSTheme)

22

23data ButtonType

24 = PlainButton

components/stories/ButtonStories.purs → components/src/Yoga/Button/Stories.pursrenamed+5−6

@@ -1,18 +1,17 @@

1−module ButtonStories where

1+module Yoga.Button.Stories where

2

3import Prelude hiding (add)

4−import Button.Component (ButtonType(..), mkButton)

4+import Yoga.Button.Component (ButtonType(..), mkButton)

5−import Decorator.FullScreen (fullScreenDecorator)

5+import Storybook.Decorator.FullScreen (fullScreenDecorator)

6import Effect (Effect)

7import Effect.Console (log)

8−import Foreign (Foreign)

9import React.Basic.DOM as R

8import React.Basic.DOM as R

10import React.Basic.Events (handler_)

9import React.Basic.Events (handler_)

11import React.Basic.Hooks (component, element)

10import React.Basic.Hooks (component, element)

12import Storybook.React (Storybook, add, addDecorator, storiesOf)

11import Storybook.React (Storybook, add, addDecorator, storiesOf)

13

12

14−stories ∷ Foreign -> Effect Storybook

13+stories ∷ Effect Storybook

15−stories mod =

14+stories =

16 storiesOf "Button" do

15 storiesOf "Button" do

17 addDecorator fullScreenDecorator

16 addDecorator fullScreenDecorator

18 add "Button" mkExample

17 add "Button" mkExample

components/src/Yoga/CSS/Safer.purs+1−2

@@ -1,8 +1,7 @@

1−module CSS.Safer where

1+module Yoga.CSS.Safer where

2

3import React.Basic.DOM (CSS, css)

4import Simple.JSON (class WriteForeign)

5

6cssSafer ∷ ∀ r. WriteForeign { | r } => { | r } -> CSS

7cssSafer = css

8−

components/src/Yoga/Card/Component.purs+4−4

@@ -1,15 +1,15 @@

1−module Card.Component where

1+module Yoga.Card.Component where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Interpolate (i)

6import Effect (Effect)

7import React.Basic (JSX)

8import React.Basic.DOM as R

9import React.Basic.Hooks (ReactComponent, component)

10import React.Basic.Hooks as React

11−import Theme.Styles (classNames, makeStyles)

11+import Yoga.Theme.Styles (classNames, makeStyles)

12−import Theme.Types (CSSTheme)

12+import Yoga.Theme.Types (CSSTheme)

13

14mkCard ∷

15 Effect

components/stories/CardStories.purs → components/src/Yoga/Card/Stories.pursrenamed+3−3

@@ -1,8 +1,8 @@

1−module CardStories where

1+module Yoga.Card.Stories where

2

3import Prelude hiding (add)

4−import Card.Component (mkCard, mkCardContent, mkCardSubtitle, mkCardTitle)

4+import Yoga.Card.Component (mkCard, mkCardContent, mkCardSubtitle, mkCardTitle)

5−import Decorator.FullScreen (fullScreenDecorator)

5+import Storybook.Decorator.FullScreen (fullScreenDecorator)

6import Effect (Effect)

7import React.Basic.DOM (css)

8import React.Basic.DOM as R

components/src/Yoga/CompileEditor/Component.purs+7−7

@@ -1,16 +1,16 @@

1−module CompileEditor.Component where

1+module Yoga.CompileEditor.Component where

2

3import Prelude hiding (add)

4−import Button.Component (ButtonType(..), mkButton)

4+import Yoga.Button.Component (ButtonType(..), mkButton)

5−import CSS.Safer (cssSafer)

5+import Yoga.CSS.Safer (cssSafer)

6−import Card.Component (mkCard)

6+import Yoga.Card.Component (mkCard)

7import Data.Array (intercalate)

8import Data.Either (Either(..))

9import Data.Foldable (for_)

10import Data.Interpolate (i)

11import Data.Maybe (Maybe(..))

12import Data.Tuple.Nested ((/\))

13−import Editor (getValue, mkEditor, setValue)

13+import Yoga.Editor (getValue, mkEditor, setValue)

14import Effect (Effect)

15import Effect.Aff (Aff, attempt, error, launchAff_, message, throwError)

16import Effect.Class (liftEffect)

@@ -24,8 +24,8 @@ import React.Basic.Hooks as React

24import Shared.Json (readAff)

25import Shared.Models.Body as Body

26import Simple.JSON (writeJSON)

27−import Theme.Styles (makeStyles)

27+import Yoga.Theme.Styles (makeStyles)

28−import Theme.Types (CSSTheme)

28+import Yoga.Theme.Types (CSSTheme)

29

30type Props

31 = { initialCode :: String, height :: String, language :: String }

components/stories/EditorStories.purs → components/src/Yoga/CompileEditor/Stories.pursrenamed+3−3

@@ -1,8 +1,8 @@

1−module EditorStories where

1+module Yoga.CompileEditor.Stories where

2

3import Prelude hiding (add)

4−import CompileEditor.Component (mkCompileEditor)

4+import Yoga.CompileEditor.Component (mkCompileEditor)

5−import Decorator.FullScreen (fullScreenDecorator)

5+import Storybook.Decorator.FullScreen (fullScreenDecorator)

6import Effect (Effect)

7import Milkis.Impl.Window (windowFetch)

8import Storybook.React (Storybook, add, addDecorator, storiesOf)

components/src/Yoga/DOM/Hook.purs+7−7

@@ -1,7 +1,6 @@

1−module DOM.Hook where

1+module Yoga.DOM.Hook where

2

3import Prelude

4−

5import Data.Maybe (Maybe(..))

4import Data.Maybe (Maybe(..))

6import Data.Newtype (class Newtype)

5import Data.Newtype (class Newtype)

7import Data.Nullable (Nullable)

6import Data.Nullable (Nullable)

@@ -37,14 +36,14 @@ useBoundingBox =

37 bb /\ modifyBb <- useState Nothing

36 bb /\ modifyBb <- useState Nothing

38 useLayoutEffect unit do

37 useLayoutEffect unit do

39 maybeRef <- readRefMaybe nullableRef

38 maybeRef <- readRefMaybe nullableRef

39+ let

40− let toHTMLOrSVGElement = unsafeCoerce -- [TODO] Make a bit safer?

40+ toHTMLOrSVGElement = unsafeCoerce -- [TODO] Make a bit safer?

41 for_ (maybeRef <#> toHTMLOrSVGElement) \elem -> do

42− rect <- getBoundingClientRect elem

42+ rect <- getBoundingClientRect elem

43− modifyBb (const $ Just rect)

43+ modifyBb (const $ Just rect)

44 pure (pure unit)

45 pure (bb /\ nullableRef)

46

47−

48newtype UseViewportHeight hooks

47newtype UseViewportHeight hooks

49 = UseViewportHeight (UseLayoutEffect Unit (UseState (Maybe Number) hooks))

48 = UseViewportHeight (UseLayoutEffect Unit (UseState (Maybe Number) hooks))

50

49

@@ -56,7 +55,8 @@ useViewportHeight =

56 viewportHeight /\ modifyViewportHeight <- useState Nothing

55 viewportHeight /\ modifyViewportHeight <- useState Nothing

57 useLayoutEffect unit do

56 useLayoutEffect unit do

58 doc <- window >>= document

57 doc <- window >>= document

58+ let

59− let maybeElem = Document.toNode doc # HTMLElement.fromNode

59+ maybeElem = Document.toNode doc # HTMLElement.fromNode

60 case maybeElem of

61 Nothing -> pure unit

62 Just elem -> do

components/src/Yoga/Header/Component.pursnew file+57

@@ -0,0 +1,57 @@

1+module Yoga.Header.Component where

2+

3+import Prelude

4+import Yoga.CSS.Safer (cssSafer)

5+import Data.Interpolate (i)

6+import Effect (Effect)

7+import React.Basic (JSX)

8+import React.Basic.DOM as R

9+import React.Basic.Hooks (ReactComponent, component, element)

10+import React.Basic.Hooks as React

11+import Yoga.SVG.Icon (trianglelogoIcon)

12+import Yoga.Theme.Styles (classNames, makeStyles)

13+import Yoga.Theme.Types (CSSTheme)

14+

15+mkHeader ∷

16+ Effect

17+ ( ReactComponent

18+ { kids :: Array JSX

19+ , className :: String

20+ }

21+ )

22+mkHeader = do

23+ useStyles <-

24+ makeStyles \(theme ∷ CSSTheme) ->

25+ { card:

26+ cssSafer

27+ { background: theme.backgroundColour

28+ , borderBottom: "1px solid " <> theme.backgroundColourLightest

29+ , borderRight: "1px solid " <> theme.backgroundColourLightest

30+ , borderLeft: "1px solid " <> theme.backgroundColourLightest

31+ , color: theme.textColour

32+ , fontFamily: theme.textFontFamily

33+ , fontSize: "2em"

34+ , padding: "20px"

35+ , display: "flex"

36+ , flex: "0 0 100%"

37+ , boxShadow:

38+ (i "30px 30px 60px " theme.backgroundColourDarker ", -30px -30px 60px " theme.backgroundColourLighter ";") :: String

39+ }

40+ , logo:

41+ cssSafer

42+ { fill: theme.textColour

43+ , marginRight: "10px"

44+ , marginBottom: "5px"

45+ }

46+ }

47+ component "Header" \{ kids, className } -> React.do

48+ rawClasses <- useStyles

49+ let

50+ classes = flip classNames rawClasses

51+ pure

52+ $ R.div

53+ { className: classes [ _.card ] <> " " <> className

54+ , children:

55+ [ element trianglelogoIcon { width: 36, className: rawClasses.logo } ]

56+ <> kids

57+ }

components/src/Yoga/Header/Stories.pursnew file+20

@@ -0,0 +1,20 @@

1+module Yoga.Header.Stories where

2+

3+import Prelude hiding (add)

4+import Storybook.Decorator.FullScreen (fullScreenDecorator)

5+import Effect (Effect)

6+import Yoga.Header.Component (mkHeader)

7+import React.Basic.DOM as R

8+import Storybook.React (Storybook, add, addDecorator, storiesOf)

9+

10+stories ∷ Effect Storybook

11+stories = do

12+ storiesOf "Header" do

13+ addDecorator fullScreenDecorator

14+ add "The Header" mkHeader

15+ [ { kids:

16+ [ R.text "Rowtype Yoga"

17+ ]

18+ , className: ""

19+ }

20+ ]

components/src/Yoga/Monaco/Editor.purs+4−4

@@ -1,7 +1,7 @@

1−module Editor where

1+module Yoga.Editor where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Control.Promise (Promise)

6import Control.Promise as Promise

7import Data.Maybe (Maybe(..), maybe)

@@ -19,8 +19,8 @@ import React.Basic.DOM as R

19import React.Basic.Hooks (component, useState)

20import React.Basic.Hooks as React

21import React.Basic.Hooks.Aff (useAff)

22−import Theme.Styles (makeStyles, useTheme)

22+import Yoga.Theme.Styles (makeStyles, useTheme)

23−import Theme.Types (CSSTheme)

23+import Yoga.Theme.Types (CSSTheme)

24import Web.DOM (Node)

25import Web.HTML (HTMLElement)

26

components/src/Yoga/Panel/Component.pursnew file+46

@@ -0,0 +1,46 @@

1+module Yoga.Panel.Component where

2+

3+import Prelude

4+import Data.Array (foldMap)

5+import Data.Maybe (Maybe)

6+import Effect (Effect)

7+import Yoga.Panel.Styles as Panel

8+import Prim.Row (class Nub, class Union)

9+import React.Basic (JSX)

10+import React.Basic.DOM as R

11+import React.Basic.Hooks (ReactComponent, component)

12+import React.Basic.Hooks as React

13+import Record (disjointUnion)

14+import Yoga.Theme.Styles (makeStyles)

15+

16+type Props

17+ = Record PropsR

18+

19+type PropsR

20+ = OptionalProps ()

21+

22+type OptionalProps r

23+ = ( kids :: Array JSX

24+ , className :: Maybe String

25+ | r

26+ )

27+

28+withDefaults ∷

29+ forall r missing props.

30+ Union r missing props =>

31+ Nub props props =>

32+ Monoid { | missing } =>

33+ { | r } ->

34+ { | props }

35+withDefaults x = disjointUnion x mempty

36+

37+makeComponent ∷ Effect (ReactComponent Props)

38+makeComponent = do

39+ useStyles <- makeStyles Panel.styles

40+ component "Panel" \{ kids, className } -> React.do

41+ classes <- useStyles

42+ pure

43+ $ R.div

44+ { className: classes.panel <> foldMap (" " <> _) className

45+ , children: kids

46+ }

components/src/Yoga/Panel/Spec.pursnew file+14

@@ -0,0 +1,14 @@

1+module Panel.Spec where

2+

3+import Prelude

4+import Yoga.Panel.Component as Panel

5+import React.TestingLibrary (describeComponent, renderComponent)

6+import Test.Spec (Spec, it)

7+

8+spec :: Spec Unit

9+spec =

10+ describeComponent Panel.makeComponent

11+ "The Panel Component" do

12+ it "renders without problems" \panel -> do

13+ _ <- renderComponent panel (Panel.withDefaults {})

14+ pure unit

components/src/Yoga/Panel/Stories.pursnew file+22

@@ -0,0 +1,22 @@

1+module Panel.Stories where

2+

3+import Prelude hiding (add)

4+import Storybook.Decorator.FullScreen (fullScreenDecorator)

5+import Effect (Effect)

6+import Yoga.Panel.Component as Panel

7+import React.Basic.DOM as R

8+import Record (disjointUnion)

9+import Storybook.React (Storybook, add, addDecorator, storiesOf)

10+

11+stories ∷ Effect Storybook

12+stories = do

13+ storiesOf "Panel" do

14+ addDecorator fullScreenDecorator

15+ add "The Panel" Panel.makeComponent

16+ [ { kids:

17+ [ R.text "Rowtype Yoga"

18+ ]

19+ }

20+ `disjointUnion`

21+ mempty

22+ ]

components/src/Yoga/Panel/Styles.pursnew file+28

@@ -0,0 +1,28 @@

1+module Yoga.Panel.Styles where

2+

3+import Prelude

4+import Yoga.CSS.Safer (cssSafer)

5+import Data.Interpolate (i)

6+import React.Basic.DOM (CSS)

7+import Yoga.Theme.Types (CSSTheme)

8+

9+styles ::

10+ CSSTheme ->

11+ { panel :: CSS

12+ }

13+styles theme =

14+ { panel:

15+ cssSafer

16+ { background: theme.backgroundColour

17+ , borderRight: "1px solid " <> theme.backgroundColourLightest

18+ , color: theme.textColour

19+ , fontFamily: theme.textFontFamily

20+ , fontSize: "1em"

21+ , padding: "20px"

22+ , display: "flex"

23+ , flexDirection: "column"

24+ , height: "100%"

25+ , boxShadow:

26+ (i "30px 30px 60px " theme.backgroundColourDarker ", -30px -30px 60px " theme.backgroundColourLighter ";") :: String

27+ }

28+ }

components/src/Yoga/Polyfill/SmoothScrolling.purs+1−1

@@ -1,4 +1,4 @@

1−module Polyfill.SmoothScrolling where

1+module Yoga.Polyfill.SmoothScrolling where

2

3import Prelude

4import Effect (Effect)

components/src/Yoga/SVG/Icon.purs+4−4

@@ -1,15 +1,15 @@

1−module SVG.Icon where

1+module Yoga.SVG.Icon where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Monoid (guard)

6import Effect (Effect)

7import Prim.Row (class Union)

8import React.Basic.DOM.SVG as SVG

9import React.Basic.Hooks (ReactComponent, component)

10import React.Basic.Hooks as React

11−import Theme.Styles (makeStyles)

11+import Yoga.Theme.Styles (makeStyles)

12−import Theme.Types (CSSTheme)

12+import Yoga.Theme.Types (CSSTheme)

13import Unsafe.Coerce (unsafeCoerce)

14

15type ImageProps

components/src/Yoga/SVG/Image.purs+7−7

@@ -1,8 +1,8 @@

1−module SVG.Image where

1+module Yoga.SVG.Image where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5−import DOM.Hook (useBoundingBox)

5+import Yoga.DOM.Hook (useBoundingBox)

6import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))

7import Data.Int (round, toNumber)

8import Data.Maybe (Maybe(..), maybe)

@@ -17,10 +17,10 @@ import React.Basic.DOM as HTML

17import React.Basic.DOM.SVG as SVG

18import React.Basic.Hooks (ReactComponent)

19import React.Basic.Hooks as React

20−import SVG.Icon (Raw)

20+import Yoga.SVG.Icon (Raw)

21−import Scroll.Hook (useScrollYPosition)

21+import Yoga.Scroll.Hook (useScrollYPosition)

22−import Theme.Styles (makeStyles, useTheme)

22+import Yoga.Theme.Styles (makeStyles, useTheme)

23−import Theme.Types (CSSTheme)

23+import Yoga.Theme.Types (CSSTheme)

24

25foreign import landingPageDarkRaw ∷ ∀ r. Raw r

26

components/src/Yoga/Scroll/Hook.purs+12−10

@@ -1,12 +1,11 @@

1−module Scroll.Hook where

1+module Yoga.Scroll.Hook where

2

3import Prelude

4−

5import Data.Newtype (class Newtype)

4import Data.Newtype (class Newtype)

6import Effect (Effect)

5import Effect (Effect)

7import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))

6import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))

8import React.Basic.Hooks as React

7import React.Basic.Hooks as React

9−import Scroll.Listener as Scroll

8+import Yoga.Scroll.Listener as Scroll

10import Unsafe.Coerce (unsafeCoerce)

9import Unsafe.Coerce (unsafeCoerce)

11import Web.Event.EventTarget (EventListener, eventListener)

10import Web.Event.EventTarget (EventListener, eventListener)

12import Web.HTML (window)

11import Web.HTML (window)

@@ -20,15 +19,18 @@ useScrollYPosition ∷ Hook UseScrollYPosition Number

20useScrollYPosition =

19useScrollYPosition =

21 coerceHook React.do

20 coerceHook React.do

22 scrollY /\ modifyScrollY <- useState 0.0

21 scrollY /\ modifyScrollY <- useState 0.0

22+ let

23− let setScrollY = modifyScrollY <<< const

23+ setScrollY = modifyScrollY <<< const

24 useLayoutEffect unit do

25− listener <- makeListener setScrollY

25+ listener <- makeListener setScrollY

26− Scroll.registerListener listener

26+ Scroll.registerListener listener

27 pure scrollY

28

29makeListener ∷ (Number -> Effect Unit) -> Effect EventListener

30makeListener setPosition = do

31− eventListener $ const do

31+ eventListener

32+ $ const do

32− win <- window

33+ win <- window

34+ let

33− let yPos = (unsafeCoerce win).scrollY

35+ yPos = (unsafeCoerce win).scrollY

34− setPosition yPos

36+ setPosition yPos

components/src/Yoga/Scroll/Listener.purs+1−4

@@ -1,9 +1,6 @@

1−module Scroll.Listener

1+module Yoga.Scroll.Listener (registerListener) where

2− ( registerListener )

3− where

4

2

5import Prelude

3import Prelude

6−

7import Effect (Effect)

4import Effect (Effect)

8import Web.Event.Event (EventType(..))

5import Web.Event.Event (EventType(..))

9import Web.Event.EventTarget (EventListener, addEventListener, removeEventListener)

6import Web.Event.EventTarget (EventListener, addEventListener, removeEventListener)

components/src/Yoga/Theme.purs+2−2

@@ -1,4 +1,4 @@

1−module Theme where

1+module Yoga.Theme where

2

3import Prelude

4import CSS (contrast, darken, isLight, lighten, rotateHue, toHexString)

@@ -6,7 +6,7 @@ import Color (Color)

6import Data.Foldable (intercalate)

7import Data.Symbol (SProxy(..))

8import Record.Builder as RB

9−import Theme.Types (Theme, CSSTheme)

9+import Yoga.Theme.Types (Theme, CSSTheme)

10

11increaseContrast ∷ Color -> Color -> Color

12increaseContrast contrastWith = go 0

components/src/Yoga/Theme/CSSBaseline.purs+7−4

@@ -1,15 +1,15 @@

1−module CSSBaseline where

1+module Yoga.Theme.CSSBaseline where

2

3import Prelude hiding (add)

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Effect (Effect)

6import Effect.Uncurried (runEffectFn1)

7import React.Basic (ReactComponent)

8import React.Basic.DOM (CSS)

9import React.Basic.Hooks (JSX, component, fragment)

10import React.Basic.Hooks as React

11−import Theme.Styles (unsafeMakeStyles)

11+import Yoga.Theme.Styles (unsafeMakeStyles)

12−import Theme.Types (CSSTheme)

12+import Yoga.Theme.Types (CSSTheme)

13import Unsafe.Coerce (unsafeCoerce)

14

15mkCssBaseline ::

@@ -57,4 +57,7 @@ styles theme =

57 }

58 }

59 }

60+ , ".textColouredIcon":

61+ { fill: theme.textColour

62+ }

60 }

63 }

components/src/Yoga/Theme/Default.purs+2−2

@@ -1,10 +1,10 @@

1−module Theme.Default where

1+module Yoga.Theme.Default where

2

3import Prelude

4import Color as Color

5import Data.Maybe (fromMaybe')

6import Partial.Unsafe (unsafeCrashWith)

7−import Theme.Types (Theme)

7+import Yoga.Theme.Types (Theme)

8

9systemFontStack ∷ Array String

10systemFontStack = [ "-apple-system", "BlinkMacSystemFont", "Helvetica", "Arial", "sans-serif" ]

components/src/Yoga/Theme/Provider.purs+3−3

@@ -1,10 +1,10 @@

1−module Theme.Provider

1+module Yoga.Theme.Provider

2 ( mkThemeProvider

3 ) where

4

5import Effect (Effect)

6import React.Basic (JSX, ReactComponent)

7−import Theme.Types (CSSTheme)

7+import Yoga.Theme.Types (CSSTheme)

8

9foreign import mkThemeProviderImpl ∷

10 ∀ theme.

@@ -12,4 +12,4 @@ foreign import mkThemeProviderImpl ∷

12

13mkThemeProvider ∷

14 Effect (ReactComponent { children ∷ Array JSX, theme ∷ CSSTheme })

15−mkThemeProvider = mkThemeProviderImpl

15+mkThemeProvider = mkThemeProviderImpl

components/src/Yoga/Theme/Styles.purs+2−2

@@ -1,4 +1,4 @@

1−module Theme.Styles

1+module Yoga.Theme.Styles

2 ( makeStyles_

3 , makeStyles

4 , useTheme

@@ -16,7 +16,7 @@ import Prim.RowList (class RowToList)

16import React.Basic.DOM (CSS)

17import React.Basic.Hooks (Hook)

18import Record.Extra (class MapRecord)

19−import Theme.Types (CSSTheme)

19+import Yoga.Theme.Types (CSSTheme)

20import Type.Row.Homogeneous (class Homogeneous)

21

22foreign import data UseStyles ∷ Type -> Type -> Type

components/stories/ThemeStories.purs → components/src/Yoga/Theme/ThemeStories.pursrenamed+5−6

@@ -1,14 +1,13 @@

1−module ThemeStories where

1+module Yoga.Theme.Stories where

2

3import Prelude hiding (add)

4−

5import Effect (Effect)

4import Effect (Effect)

6import React.Basic.DOM (css)

5import React.Basic.DOM (css)

7import React.Basic.DOM as R

6import React.Basic.DOM as R

8import React.Basic.Hooks (component, element)

7import React.Basic.Hooks (component, element)

9import Storybook.React (Storybook, add, storiesOf)

8import Storybook.React (Storybook, add, storiesOf)

10−import Theme (fromTheme)

9+import Yoga.Theme (fromTheme)

11−import Theme.Default (darkTheme, lightTheme)

10+import Yoga.Theme.Default (darkTheme, lightTheme)

12

11

13stories ∷ Effect Storybook

12stories ∷ Effect Storybook

14stories = do

13stories = do

@@ -72,11 +71,11 @@ stories = do

72 component "Swatch" \{ name, colour, fontFamily } -> React.do

71 component "Swatch" \{ name, colour, fontFamily } -> React.do

73 pure

72 pure

74 $ R.div

73 $ R.div

75− { style: css{ display: "flex", flexDirection: "column", alignItems: "center" }

74+ { style: css { display: "flex", flexDirection: "column", alignItems: "center" }

76 , children:

75 , children:

77 [ R.div

76 [ R.div

78 { children: [ R.text name ]

77 { children: [ R.text name ]

79− , style: css{ fontFamily, paddingBottom: "5px" }

78+ , style: css { fontFamily, paddingBottom: "5px" }

80 }

79 }

81 , R.div

80 , R.div

82 { style:

81 { style:

components/src/Yoga/Theme/Types.purs+1−1

@@ -1,4 +1,4 @@

1−module Theme.Types where

1+module Yoga.Theme.Types where

2

3import Color (Color)

4

components/src/Yoga/Typography/Header.purs+4−4

@@ -1,7 +1,7 @@

1−module Typography.Header where

1+module Yoga.Typography.Header where

2

3import Prelude

4−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

5import Data.Array as Array

6import Data.Foldable (intercalate)

7import Data.Maybe (Maybe)

@@ -9,8 +9,8 @@ import Effect (Effect)

9import React.Basic.DOM as R

10import React.Basic.Hooks (ReactComponent, component)

11import React.Basic.Hooks as React

12−import Theme.Styles (makeStyles)

12+import Yoga.Theme.Styles (makeStyles)

13−import Theme.Types (CSSTheme)

13+import Yoga.Theme.Types (CSSTheme)

14

15data HeadingLevel

16 = H1

components/src/Yoga/Typography/Paragraph.purs+4−5

@@ -1,14 +1,13 @@

1−module Typography.Paragraph where

1+module Yoga.Typography.Paragraph where

2

3import Prelude

4−

5−import CSS.Safer (cssSafer)

4+import Yoga.CSS.Safer (cssSafer)

6import Effect (Effect)

5import Effect (Effect)

7import React.Basic.DOM as R

6import React.Basic.DOM as R

8import React.Basic.Hooks (ReactComponent, component)

7import React.Basic.Hooks (ReactComponent, component)

9import React.Basic.Hooks as React

8import React.Basic.Hooks as React

10−import Theme.Styles (makeStyles)

9+import Yoga.Theme.Styles (makeStyles)

11−import Theme.Types (CSSTheme)

10+import Yoga.Theme.Types (CSSTheme)

12

11

13mkP ∷ Effect (ReactComponent { text ∷ String })

12mkP ∷ Effect (ReactComponent { text ∷ String })

14mkP = do

13mkP = do

components/stories/TypographyStories.purs → components/src/Yoga/Typography/Stories.pursrenamed+8−9

@@ -1,12 +1,11 @@

1−module TypographyStories where

1+module Yoga.Typography.Stories where

2

3import Prelude hiding (add)

4−

5import Data.Maybe (Maybe(..))

4import Data.Maybe (Maybe(..))

6−import Decorator.FullScreen (fullScreenDecorator)

5+import Storybook.Decorator.FullScreen (fullScreenDecorator)

7import Effect (Effect)

6import Effect (Effect)

8import Storybook.React (Storybook, add, addDecorator, storiesOf)

7import Storybook.React (Storybook, add, addDecorator, storiesOf)

9−import Typography.Header (HeadingLevel(..), mkH)

8+import Yoga.Typography.Header (HeadingLevel(..), mkH)

10

9

11stories ∷ Effect Storybook

10stories ∷ Effect Storybook

12stories = do

11stories = do

@@ -32,8 +31,8 @@ stories = do

32

31

33loremIpsum ∷ String

32loremIpsum ∷ String

34loremIpsum =

33loremIpsum =

35− """PureScript is a strongly-typed, purely-functional programming language that compiles""" <>

34+ """PureScript is a strongly-typed, purely-functional programming language that compiles"""

36− """to JavaScript. It can be used to develop web applications, server side apps, and als""" <>

35+ <> """to JavaScript. It can be used to develop web applications, server side apps, and als"""

37− """o desktop applications with use of Electron. Its syntax is mostly comparable to that""" <>

36+ <> """o desktop applications with use of Electron. Its syntax is mostly comparable to that"""

38− """of Haskell. In addition, it introduces row polymorphism and extensible records.[2] A""" <>

37+ <> """of Haskell. In addition, it introduces row polymorphism and extensible records.[2] A"""

39− """lso, contrary to Haskell, PureScript adheres to a strict evaluation strategy."""

38+ <> """lso, contrary to Haskell, PureScript adheres to a strict evaluation strategy."""

components/stories/Storybook/React.jsdeleted−25

@@ -1,25 +0,0 @@

1−var storybook = require('@storybook/react');

2−

3−exports.storiesOfImpl = function(stories) {

4− return storybook.storiesOf(stories, module.parent);

5−}

6−

7−exports.addImpl = function(sb) {

8− return function(render) {

9− return function(name) {

10− return function() {

11− return sb.add(name, render);

12− }

13− }

14− }

15−}

16−

17−exports.addDecoratorImpl = function(sb) {

18− return function(addDeco) {

19− return function() {

20− return sb.addDecorator(function(storyFn) {

21− return addDeco(storyFn)();

22− });

23− }

24− }

25−}

components/test/Main.purs+8−5

@@ -1,11 +1,14 @@

1module Test.Main where

2

3import Prelude

4−

5import Effect (Effect)

4import Effect (Effect)

6−import Effect.Class.Console (log)

5+import Effect.Aff (launchAff_)

6+import Test.Spec.Discovery (discover)

7+import Test.Spec.Reporter (consoleReporter)

8+import Test.Spec.Runner (runSpec)

7

9

8main :: Effect Unit

10main :: Effect Unit

9−main = do

11+main =

10− log "🍝"

12+ launchAff_ do

11− log "You should add some tests."

13+ specs <- discover ".*Spec"

14+ runSpec [ consoleReporter ] specs

packages.dhall+29−24

@@ -119,47 +119,52 @@ let additions =

119

120

121let upstream =

122− https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200123/packages.dhall sha256:687bb9a2d38f2026a89772c47390d02939340b01e31aaa22de9247eadd64af05

122+ https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200226/packages.dhall sha256:3a52562e05b31a7b51d12d5b228ccbe567c527781a88e9028ab42374ab55c0f1

123

124let overrides =

125 { react-basic-hooks =

126− upstream.react-basic-hooks

126+ upstream.react-basic-hooks

127− ⫽ { repo =

127+ // { repo =

128− "https://github.com/i-am-the-slime/purescript-react-basic-hooks.git"

128+ "https://github.com/i-am-the-slime/purescript-react-basic-hooks.git"

129− , version = "e04b106ab2dfda3f9a1407420c434a908ff72b90"

129+ , version = "e04b106ab2dfda3f9a1407420c434a908ff72b90"

130− }

130+ }

131 }

132

133let additions =

134 { react-testing-library =

135 { dependencies =

136− [ "aff-promise"

136+ [ "aff-promise"

137− , "console"

137+ , "console"

138− , "debug"

138+ , "debug"

139− , "effect"

139+ , "effect"

140− , "foreign"

140+ , "foreign"

141− , "foreign-object"

141+ , "foreign-object"

142− , "psci-support"

142+ , "psci-support"

143− , "react-basic-hooks"

143+ , "react-basic-hooks"

144− , "remotedata"

144+ , "remotedata"

145− , "run"

145+ , "run"

146− , "simple-json"

146+ , "simple-json"

147− , "spec"

147+ , "spec"

148− , "spec-discovery"

148+ , "spec-discovery"

149− ]

149+ ]

150 , repo =

151 "https://github.com/i-am-the-slime/purescript-react-testing-library.git"

152− , version = "b872928414a887ccefbe857038af4e57227dad16"

152+ , version = "5a10027deeeee12de3ccfeecfdb033d1e53f8d05"

153 }

154 , pseudo-random =

155 { dependencies =

156− [ "prelude", "console", "effect", "lcg", "arrays", "st" ]

156+ [ "prelude", "console", "effect", "lcg", "arrays", "st" ]

157 , repo = "https://github.com/opyapeus/purescript-pseudo-random.git"

158 , version = "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"

159 }

160 , matryoshka =

161 { dependencies =

162+ [ "prelude"

163+ , "fixed-points"

164+ , "free"

162− [ "prelude", "fixed-points", "free", "transformers", "profunctor" ]

165+ , "transformers"

166+ , "profunctor"

167+ ]

163 , repo = "https://github.com/slamdata/purescript-matryoshka.git"

168 , repo = "https://github.com/slamdata/purescript-matryoshka.git"

164 , version = "caaca2d836d52159ba7963333996286a00428394"

169 , version = "caaca2d836d52159ba7963333996286a00428394"

165 }

170 }

@@ -172,4 +177,4 @@ let additions =

172 , yoga-components = ../components/spago.dhall as Location

177 , yoga-components = ../components/spago.dhall as Location

173 }

178 }

174

179

175−in upstream ⫽ overrides ⫽ additions

180+in upstream // overrides // additions