git.iko.soy/rowtype-yoga/psfp
on master help sign in
Rename to Yoga.
commit34d092178f660fc9bd0b1e629023fe380c1abf40 authorMark Eibes <mark.eibes@gmail.com> dateSat 7 Mar 2020, 17:23 (7 years ago) parente677d30
58 files changed+563−303
compare with master
unifiedsplit
assets/icons/trianglelogo2.afdesign blog/.psc-ide-port+1−1 blog/gatsby-config.js+4−2 blog/package-lock.json+101−3 blog/package.json+1 blog/src/components/PSLayout.purs+56−25 blog/src/components/layout.js+4 client/.vscode/settings.json+2−1 client/spago.dhall+17−16 client/src/Container/Component.purs+8−8 client/src/Container/Header.purs+6−6 client/src/Container/Landing.purs+8−8 client/src/Container/Sidebar.purs+4−4 client/src/Container/Stories.purs+1−1 client/src/Decorator/FullScreen.purs+6−6 client/src/Example.purs+2−2 client/src/Shared−1 client/src/Storybook/React.purs−43 client/src/Yoga−1 components/.storybook/config.js+5−6 components/.vscode/settings.json+2−1 components/package.json+1−1 components/stories/Decorator/FullScreen.purs → components/src/Storybook/Decorator/FullScreen.purs+7−7 client/src/Storybook/React.js → components/src/Storybook/React.js components/stories/Storybook/React.purs → components/src/Storybook/React.purs components/src/Yoga/Button/Component.purs+6−6 components/stories/ButtonStories.purs → components/src/Yoga/Button/Stories.purs+5−6 components/src/Yoga/CSS/Safer.purs+1−2 components/src/Yoga/Card/Component.purs+4−4 components/stories/CardStories.purs → components/src/Yoga/Card/Stories.purs+3−3 components/src/Yoga/CompileEditor/Component.purs+7−7 components/stories/EditorStories.purs → components/src/Yoga/CompileEditor/Stories.purs+3−3 components/src/Yoga/DOM/Hook.purs+7−7 components/src/Yoga/Header/Component.purs+57 components/src/Yoga/Header/Stories.purs+20 components/src/Yoga/Monaco/Editor.purs+4−4 components/src/Yoga/Panel/Component.purs+46 components/src/Yoga/Panel/Spec.purs+14 components/src/Yoga/Panel/Stories.purs+22 components/src/Yoga/Panel/Styles.purs+28 components/src/Yoga/Polyfill/SmoothScrolling.purs+1−1 components/src/Yoga/SVG/Icon.purs+4−4 components/src/Yoga/SVG/Image.purs+7−7 components/src/Yoga/Scroll/Hook.purs+12−10 components/src/Yoga/Scroll/Listener.purs+1−4 components/src/Yoga/Theme.purs+2−2 components/src/Yoga/Theme/CSSBaseline.purs+7−4 components/src/Yoga/Theme/Default.purs+2−2 components/src/Yoga/Theme/Provider.purs+3−3 components/src/Yoga/Theme/Styles.purs+2−2 components/stories/ThemeStories.purs → components/src/Yoga/Theme/ThemeStories.purs+5−6 components/src/Yoga/Theme/Types.purs+1−1 components/src/Yoga/Typography/Header.purs+4−4 components/src/Yoga/Typography/Paragraph.purs+4−5 components/stories/TypographyStories.purs → components/src/Yoga/Typography/Stories.purs+8−9 components/stories/Storybook/React.js−25 components/test/Main.purs+8−5 packages.dhall+29−24
assets/icons/trianglelogo2.afdesign

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 = {
55 siteMetadata: {
66 title: "Rowtype Yoga",
77 description: "Rowtype Yoga",
8− author: "Mark Eibes"
8+ author: "Mark Eibes",
9+ menuLinks: [{ name: "home", link: "/" }]
910 },
1011 developMiddleware: app => {
1112 app.use(
@@ -20,6 +21,7 @@ module.exports = {
2021 },
2122 plugins: [
2223 "gatsby-plugin-purescript",
24+ { resolve: "gatsby-plugin-react-svg" },
2325 {
2426 resolve: `gatsby-plugin-mdx`,
2527 options: {
@@ -73,7 +75,7 @@ module.exports = {
7375 display: "minimal-ui",
7476 icon: "src/images/logo.png" // This path is relative to the root of the site.
7577 }
76− },
78+ }
7779 // this (optional) plugin enables Progressive Web App + Offline functionality
7880 // To learn more, visit: https://gatsby.app/offline
7981 // 'gatsby-plugin-offline',
blog/package-lock.json+101−3
@@ -1775,9 +1775,9 @@
17751775 }
17761776 },
17771777 "acorn": {
1778− "version": "7.1.0",
1779− "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
1780− "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
1778+ "version": "7.1.1",
1779+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
1780+ "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg=="
17811781 },
17821782 "acorn-jsx": {
17831783 "version": "5.1.0",
@@ -4307,6 +4307,24 @@
43074307 "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
43084308 "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
43094309 },
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+ },
43104328 "css-color-names": {
43114329 "version": "0.0.4",
43124330 "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -8027,6 +8045,14 @@
80278045 "@babel/runtime": "^7.7.6"
80288046 }
80298047 },
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+ },
80308056 "gatsby-plugin-sharp": {
80318057 "version": "2.4.5",
80328058 "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.4.5.tgz",
@@ -13828,6 +13854,11 @@
1382813854 "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
1382913855 "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
1383013856 },
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+ },
1383113862 "randombytes": {
1383213863 "version": "2.1.0",
1383313864 "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14858,6 +14889,11 @@
1485814889 "aproba": "^1.1.1"
1485914890 }
1486014891 },
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+ },
1486114897 "rx-lite": {
1486214898 "version": "4.0.8",
1486314899 "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -16222,6 +16258,63 @@
1622216258 "has-flag": "^3.0.0"
1622316259 }
1622416260 },
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+ },
1622516318 "svgo": {
1622616319 "version": "1.3.2",
1622716320 "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -16617,6 +16710,11 @@
1661716710 "punycode": "^2.1.1"
1661816711 }
1661916712 },
16713+ "traverse": {
16714+ "version": "0.6.6",
16715+ "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
16716+ "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
16717+ },
1662016718 "trim": {
1662116719 "version": "0.0.1",
1662216720 "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
blog/package.json+1
@@ -15,6 +15,7 @@
1515 "gatsby-plugin-offline": "^2.2.4",
1616 "gatsby-plugin-purescript": "^2.0.0",
1717 "gatsby-plugin-react-helmet": "^3.1.3",
18+ "gatsby-plugin-react-svg": "^3.0.0",
1819 "gatsby-plugin-sharp": "^2.2.9",
1920 "gatsby-plugin-web-font-loader": "^1.0.4",
2021 "gatsby-source-filesystem": "^2.1.8",
blog/src/components/PSLayout.purs+56−25
@@ -1,32 +1,39 @@
11module PSLayout where
22
33import Prelude
4−import CSS.Safer (cssSafer)
5−import CSSBaseline (mkCssBaseline)
6−import CompileEditor.Component (mkCompileEditor)
4+import Yoga.CSS.Safer (cssSafer)
5+import Yoga.Theme.CSSBaseline (mkCssBaseline)
6+import Yoga.CompileEditor.Component (mkCompileEditor)
77import Data.Array as Array
88import Data.Maybe (Maybe(..), fromMaybe)
99import Data.Nullable (Nullable)
1010import Data.Nullable as Nullable
1111import Data.String as String
1212import Effect (Effect)
13+import Yoga.Header.Component (mkHeader)
1314import Milkis.Impl (FetchImpl)
15+import Yoga.Panel.Component (makeComponent) as Panel
1416import React.Basic (JSX, ReactComponent)
1517import React.Basic.DOM (unsafeCreateDOMComponent)
1618import React.Basic.DOM as R
17−import React.Basic.Hooks (ReactChildren, componentWithChildren, element)
19+import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, reactChildrenFromArray, reactChildrenToArray)
1820import React.Basic.Hooks as React
19−import Theme (fromTheme)
20−import Theme.Default (darkTheme)
21−import Theme.Provider (mkThemeProvider)
22−import Theme.Styles (makeStyles)
23−import Theme.Types (CSSTheme)
24−import Typography.Header (HeadingLevel(..), mkH)
25−import Typography.Paragraph (mkP)
26−import Unsafe.Coerce (unsafeCoerce)
21+import Yoga.Theme (fromTheme)
22+import Yoga.Theme.Default (darkTheme)
23+import Yoga.Theme.Provider (mkThemeProvider)
24+import Yoga.Theme.Styles (makeStyles)
25+import Yoga.Theme.Types (CSSTheme)
26+import Yoga.Typography.Header (HeadingLevel(..), mkH)
27+import Yoga.Typography.Paragraph (mkP)
2728
2829type SiteQueryResult
29− = { site ∷ { siteMetadata ∷ { title ∷ String } } }
30+ = { site ∷
31+ { siteMetadata ∷
32+ { title ∷ String
33+ , menuLinks ∷ Array { name ∷ String, link ∷ String }
34+ }
35+ }
36+ }
3037
3138type PreProps
3239 = { children ∷
@@ -41,11 +48,10 @@ type PreProps
4148 }
4249
4350mkLayout ∷
44− ∀ children.
4551 FetchImpl ->
4652 Effect
4753 ( ReactComponent
48− { children ∷ ReactChildren children
54+ { children ∷ ReactChildren JSX
4955 , siteInfo ∷ SiteQueryResult
5056 }
5157 )
@@ -64,18 +70,19 @@ mkLayout fetchImpl = do
6470 ]
6571 }
6672
67−mkMdxProviderComponent ::
68− ∀ children.
73+mkMdxProviderComponent ∷
6974 FetchImpl ->
7075 Effect
7176 ( ReactComponent
72− { children ∷ ReactChildren children
77+ { children ∷ ReactChildren JSX
7378 , siteInfo ∷ SiteQueryResult
7479 }
7580 )
7681mkMdxProviderComponent fetchImpl = do
7782 cssBaseline <- mkCssBaseline
7883 editor <- mkCompileEditor fetchImpl
84+ sidebar <- mkSidebar
85+ header <- mkHeader
7986 h <- mkH
8087 p <- mkP
8188 useStyles <-
@@ -94,6 +101,11 @@ mkMdxProviderComponent fetchImpl = do
94101 { marginLeft: "35px"
95102 , marginRight: "35px"
96103 }
104+ , flexer:
105+ cssSafer
106+ { display: "flex"
107+ , flexDirection: "row"
108+ }
97109 }
98110 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do
99111 classes <- useStyles
@@ -103,12 +115,9 @@ mkMdxProviderComponent fetchImpl = do
103115 siteInfoJSX =
104116 R.div
105117 { children:
106− [ element h
107− { level: H1
108− , text: siteInfo.site.siteMetadata.title
109− , className: Nothing
110− }
111− , R.div_ (unsafeCoerce children)
118+ [ element header { kids: [ R.text siteInfo.site.siteMetadata.title ], className: "" }
119+ , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }
120+ , R.div_ (reactChildrenToArray children)
112121 ]
113122 }
114123
@@ -170,11 +179,33 @@ mkMdxProviderComponent fetchImpl = do
170179 pure
171180 $ baseline
172181 [ element mdxProvider
173− { children: [ siteInfoJSX ]
182+ { children:
183+ [ siteInfoJSX
184+ ]
174185 , components: mdxComponents
175186 }
176187 ]
177188
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+
178209foreign import mdxProvider ∷
179210 ∀ r.
180211 ReactComponent
blog/src/components/layout.js+4
@@ -13,6 +13,10 @@ const Layout = ({ children }) => {
1313 site {
1414 siteMetadata {
1515 title
16+ menuLinks {
17+ name
18+ link
19+ }
1620 }
1721 }
1822 }
client/.vscode/settings.json+2−1
@@ -1,4 +1,5 @@
11{
22 "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 }
45}
client/spago.dhall+17−16
@@ -4,22 +4,23 @@ You can edit this file as you like.
44-}
55{ name = "my-project"
66, dependencies =
7− [ "console"
8− , "css"
9− , "debug"
10− , "effect"
11− , "interpolate"
12− , "milkis"
13− , "psci-support"
14− , "pseudo-random"
15− , "react-basic"
16− , "react-basic-hooks"
17− , "react-testing-library"
18− , "record-extra"
19− , "spec-discovery"
20− , "string-parsers"
21− , "web-html"
22− ]
7+ [ "console"
8+ , "css"
9+ , "debug"
10+ , "effect"
11+ , "interpolate"
12+ , "milkis"
13+ , "psci-support"
14+ , "pseudo-random"
15+ , "react-basic"
16+ , "react-basic-hooks"
17+ , "react-testing-library"
18+ , "record-extra"
19+ , "spec-discovery"
20+ , "string-parsers"
21+ , "web-html"
22+ , "yoga-components"
23+ ]
2324, packages = ./packages.dhall
2425, sources = [ "src/**/*.purs", "test/**/*.purs" ]
2526}
client/src/Container/Component.purs+8−8
@@ -1,23 +1,23 @@
11module Container.Component where
22
33import Prelude
4−import CSS.Safer (cssSafer)
5−import CompileEditor.Component (mkCompileEditor)
4+import Yoga.CSS.Safer (cssSafer)
5+import Yoga.CompileEditor.Component (mkCompileEditor)
66import Container.Header (mkHeader)
77import Container.Landing (mkLandingPage)
88import Container.Sidebar (mkSidebar, mkSidebarLink)
99import Data.Nullable as Nullable
1010import Effect (Effect)
1111import Milkis.Impl.Window (windowFetch)
12−import Polyfill.SmoothScrolling (smoothScrollPolyfill)
12+import Yoga.Polyfill.SmoothScrolling (smoothScrollPolyfill)
1313import React.Basic (JSX)
1414import React.Basic.DOM as R
1515import React.Basic.Hooks (ReactComponent, component, element, useRef, useState, (/\))
1616import React.Basic.Hooks as React
17−import SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
18−import Theme.Provider (mkThemeProvider)
19−import Theme.Styles (makeStyles)
20−import Theme.Types (CSSTheme)
17+import Yoga.SVG.Icon (appendIcon, applyflippedIcon, bindIcon, mapIcon)
18+import Yoga.Theme.Provider (mkThemeProvider)
19+import Yoga.Theme.Styles (makeStyles)
20+import Yoga.Theme.Types (CSSTheme)
2121
2222mkContainer ∷ Effect (ReactComponent { theme ∷ CSSTheme, kids ∷ Array JSX })
2323mkContainer = do
@@ -84,7 +84,7 @@ mkContainerContent = do
8484 }
8585 , R.div
8686 { className: classes.content
87− , children: [ element editor { initialCode, height: "50vh" } ] <> kids
87+ , children: [ element editor { initialCode, height: "50vh", language: "purescript" } ] <> kids
8888 }
8989 ]
9090 }
client/src/Container/Header.purs+6−6
@@ -1,7 +1,7 @@
11module Container.Header where
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Int (toNumber)
66import Data.Maybe (Maybe(..))
77import Data.Monoid (guard)
@@ -12,11 +12,11 @@ import Effect.Class.Console (log)
1212import React.Basic.DOM as R
1313import React.Basic.Hooks (type (/\), Hook, ReactComponent, Ref, UseLayoutEffect, UseRef, UseState, coerceHook, component, element, readRefMaybe, useLayoutEffect, useRef, useState, (/\))
1414import React.Basic.Hooks as React
15−import SVG.Icon (trianglelogoIcon)
16−import Scroll.Listener as Scroll
17−import Theme.Styles (makeStyles)
18−import Theme.Types (CSSTheme)
19−import Typography.Header (HeadingLevel(..), mkH)
15+import Yoga.SVG.Icon (trianglelogoIcon)
16+import Yoga.Scroll.Listener as Scroll
17+import Yoga.Theme.Styles (makeStyles)
18+import Yoga.Theme.Types (CSSTheme)
19+import Yoga.Typography.Header (HeadingLevel(..), mkH)
2020import Web.DOM (Node)
2121import Web.Event.EventTarget (EventListener, eventListener)
2222import Web.HTML (HTMLElement, window)
client/src/Container/Landing.purs+8−8
@@ -1,8 +1,8 @@
11module Container.Landing where
22
33import Prelude
4−import Button.Component (ButtonType(..), mkButton)
5−import CSS.Safer (cssSafer)
4+import Yoga.Button.Component (ButtonType(..), mkButton)
5+import Yoga.CSS.Safer (cssSafer)
66import Data.Foldable (for_)
77import Data.Nullable (null)
88import Effect (Effect)
@@ -11,12 +11,12 @@ import React.Basic.DOM as R
1111import React.Basic.Events (handler_)
1212import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
1313import React.Basic.Hooks as React
14−import SVG.Icon (trianglelogoIcon)
15−import SVG.Image (mkLandingPageBackground)
16−import Scroll.Hook (useScrollYPosition)
17−import Theme.Styles (makeStyles, useTheme)
18−import Theme.Types (CSSTheme)
19−import Typography.Header (mkH)
14+import Yoga.SVG.Icon (trianglelogoIcon)
15+import Yoga.SVG.Image (mkLandingPageBackground)
16+import Yoga.Scroll.Hook (useScrollYPosition)
17+import Yoga.Theme.Styles (makeStyles, useTheme)
18+import Yoga.Theme.Types (CSSTheme)
19+import Yoga.Typography.Header (mkH)
2020import Unsafe.Coerce (unsafeCoerce)
2121import Web.HTML (window)
2222import Web.HTML.HTMLElement (getBoundingClientRect)
client/src/Container/Sidebar.purs+4−4
@@ -1,7 +1,7 @@
11module Container.Sidebar where
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Monoid (guard)
66import Effect (Effect)
77import React.Basic (JSX)
@@ -9,9 +9,9 @@ import React.Basic.DOM as R
99import React.Basic.Events (handler_)
1010import React.Basic.Hooks (ReactComponent, component, element)
1111import React.Basic.Hooks as React
12−import SVG.Icon (ActiveArrowDirection(..), mkMenu)
13−import Theme.Styles (classNames, makeStyles)
14−import Theme.Types (CSSTheme)
12+import Yoga.SVG.Icon (ActiveArrowDirection(..), mkMenu)
13+import Yoga.Theme.Styles (classNames, makeStyles)
14+import Yoga.Theme.Types (CSSTheme)
1515
1616mkSidebar ∷
1717 Effect
client/src/Container/Stories.purs+1−1
@@ -7,7 +7,7 @@ import Effect (Effect)
77import React.Basic.Hooks (component, element)
88import React.Basic.Hooks as React
99import Storybook.React (Storybook, add, addDecorator, storiesOf)
10−import Theme.Styles (useTheme)
10+import Yoga.Theme.Styles (useTheme)
1111
1212stories ∷ Effect Storybook
1313stories = do
client/src/Decorator/FullScreen.purs+6−6
@@ -1,7 +1,7 @@
11module Decorator.FullScreen where
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Array (find)
66import Data.Map (Map)
77import Data.Maybe (Maybe, fromMaybe)
@@ -15,11 +15,11 @@ import React.Basic.Events (handler)
1515import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))
1616import React.Basic.Hooks as React
1717import Simple.JSON (readJSON_, writeJSON)
18−import Theme (fromTheme)
19−import Theme.Default (darkTheme, lightTheme)
20−import Theme.Provider (mkThemeProvider)
21−import Theme.Styles (makeStyles_)
22−import Theme.Types (CSSTheme)
18+import Yoga.Theme (fromTheme)
19+import Yoga.Theme.Default (darkTheme, lightTheme)
20+import Yoga.Theme.Provider (mkThemeProvider)
21+import Yoga.Theme.Styles (makeStyles_)
22+import Yoga.Theme.Types (CSSTheme)
2323import Web.HTML (window)
2424import Web.HTML.Window (localStorage)
2525import Web.Storage.Storage (getItem, setItem)
client/src/Example.purs+2−2
@@ -8,8 +8,8 @@ import Effect.Console (log)
88import Partial.Unsafe (unsafePartial)
99import React.Basic (JSX, element)
1010import React.Basic.DOM as ReactDOM
11−import Theme (fromTheme)
12−import Theme.Default (darkTheme)
11+import Yoga.Theme (fromTheme)
12+import Yoga.Theme.Default (darkTheme)
1313import Web.DOM.NonElementParentNode (getElementById) as DOM
1414import Web.HTML (window) as DOM
1515import 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';
2−import equal from 'deep-equal';
1+import { configure, forceReRender } from "@storybook/react";
32
4−const req = require.context('../stories/', true, /Stories\.purs$/);
3+const localStories = require.context("../src/", true, /Stories\.purs$/);
54
65function loadStories() {
7− req.keys().forEach(filename => {
8− req(filename).stories();
9− })
6+ localStories.keys().forEach(filename => {
7+ localStories(filename).stories();
8+ });
109}
1110
1211configure(loadStories, module);
components/.vscode/settings.json+2−1
@@ -1,4 +1,5 @@
11{
22 "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 }
45}
components/package.json+1−1
@@ -56,7 +56,7 @@
5656 "react-monaco-editor": "^0.33.0",
5757 "react-svg-loader": "^3.0.3",
5858 "smoothscroll-polyfill": "^0.4.4",
59− "spago": "^0.13.1",
59+ "spago": "^0.14.0",
6060 "typescript": "^3.7.5",
6161 "webpack": "^4.41.0",
6262 "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
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Array (find)
66import Data.Map (Map)
77import Data.Maybe (Maybe, fromMaybe)
@@ -15,11 +15,11 @@ import React.Basic.Events (handler)
1515import React.Basic.Hooks (ReactComponent, component, element, useState, (/\))
1616import React.Basic.Hooks as React
1717import Simple.JSON (readJSON_, writeJSON)
18−import Theme (fromTheme)
19−import Theme.Default (darkTheme, lightTheme)
20−import Theme.Provider (mkThemeProvider)
21−import Theme.Styles (makeStyles_)
22−import Theme.Types (CSSTheme)
18+import Yoga.Theme (fromTheme)
19+import Yoga.Theme.Default (darkTheme, lightTheme)
20+import Yoga.Theme.Provider (mkThemeProvider)
21+import Yoga.Theme.Styles (makeStyles_)
22+import Yoga.Theme.Types (CSSTheme)
2323import Web.HTML (window)
2424import Web.HTML.Window (localStorage)
2525import 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
22
33import Prelude
4−import CSS (ColorSpace(..), contentBox, mix, toHexString)
5−import CSS.Safer (cssSafer)
4+import CSS (ColorSpace(..), mix, toHexString)
5+import Yoga.CSS.Safer (cssSafer)
66import Color (fromHexString)
77import Data.Foldable (intercalate)
88import Data.Interpolate (i)
@@ -16,9 +16,9 @@ import React.Basic.DOM as R
1616import React.Basic.Hooks (ReactComponent, component, element)
1717import React.Basic.Hooks as React
1818import Record (union)
19−import Theme (increaseContrast)
20−import Theme.Styles (classNames, makeStyles)
21−import Theme.Types (CSSTheme)
19+import Yoga.Theme (increaseContrast)
20+import Yoga.Theme.Styles (classNames, makeStyles)
21+import Yoga.Theme.Types (CSSTheme)
2222
2323data ButtonType
2424 = 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
22
33import Prelude hiding (add)
4−import Button.Component (ButtonType(..), mkButton)
5−import Decorator.FullScreen (fullScreenDecorator)
4+import Yoga.Button.Component (ButtonType(..), mkButton)
5+import Storybook.Decorator.FullScreen (fullScreenDecorator)
66import Effect (Effect)
77import Effect.Console (log)
8−import Foreign (Foreign)
98import React.Basic.DOM as R
109import React.Basic.Events (handler_)
1110import React.Basic.Hooks (component, element)
1211import Storybook.React (Storybook, add, addDecorator, storiesOf)
1312
14−stories ∷ Foreign -> Effect Storybook
15−stories mod =
13+stories ∷ Effect Storybook
14+stories =
1615 storiesOf "Button" do
1716 addDecorator fullScreenDecorator
1817 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
22
33import React.Basic.DOM (CSS, css)
44import Simple.JSON (class WriteForeign)
55
66cssSafer ∷ ∀ r. WriteForeign { | r } => { | r } -> CSS
77cssSafer = 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
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Interpolate (i)
66import Effect (Effect)
77import React.Basic (JSX)
88import React.Basic.DOM as R
99import React.Basic.Hooks (ReactComponent, component)
1010import React.Basic.Hooks as React
11−import Theme.Styles (classNames, makeStyles)
12−import Theme.Types (CSSTheme)
11+import Yoga.Theme.Styles (classNames, makeStyles)
12+import Yoga.Theme.Types (CSSTheme)
1313
1414mkCard ∷
1515 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
22
33import Prelude hiding (add)
4−import Card.Component (mkCard, mkCardContent, mkCardSubtitle, mkCardTitle)
5−import Decorator.FullScreen (fullScreenDecorator)
4+import Yoga.Card.Component (mkCard, mkCardContent, mkCardSubtitle, mkCardTitle)
5+import Storybook.Decorator.FullScreen (fullScreenDecorator)
66import Effect (Effect)
77import React.Basic.DOM (css)
88import 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
22
33import Prelude hiding (add)
4−import Button.Component (ButtonType(..), mkButton)
5−import CSS.Safer (cssSafer)
6−import Card.Component (mkCard)
4+import Yoga.Button.Component (ButtonType(..), mkButton)
5+import Yoga.CSS.Safer (cssSafer)
6+import Yoga.Card.Component (mkCard)
77import Data.Array (intercalate)
88import Data.Either (Either(..))
99import Data.Foldable (for_)
1010import Data.Interpolate (i)
1111import Data.Maybe (Maybe(..))
1212import Data.Tuple.Nested ((/\))
13−import Editor (getValue, mkEditor, setValue)
13+import Yoga.Editor (getValue, mkEditor, setValue)
1414import Effect (Effect)
1515import Effect.Aff (Aff, attempt, error, launchAff_, message, throwError)
1616import Effect.Class (liftEffect)
@@ -24,8 +24,8 @@ import React.Basic.Hooks as React
2424import Shared.Json (readAff)
2525import Shared.Models.Body as Body
2626import Simple.JSON (writeJSON)
27−import Theme.Styles (makeStyles)
28−import Theme.Types (CSSTheme)
27+import Yoga.Theme.Styles (makeStyles)
28+import Yoga.Theme.Types (CSSTheme)
2929
3030type Props
3131 = { 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
22
33import Prelude hiding (add)
4−import CompileEditor.Component (mkCompileEditor)
5−import Decorator.FullScreen (fullScreenDecorator)
4+import Yoga.CompileEditor.Component (mkCompileEditor)
5+import Storybook.Decorator.FullScreen (fullScreenDecorator)
66import Effect (Effect)
77import Milkis.Impl.Window (windowFetch)
88import 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
22
33import Prelude
4−
54import Data.Maybe (Maybe(..))
65import Data.Newtype (class Newtype)
76import Data.Nullable (Nullable)
@@ -37,14 +36,14 @@ useBoundingBox =
3736 bb /\ modifyBb <- useState Nothing
3837 useLayoutEffect unit do
3938 maybeRef <- readRefMaybe nullableRef
40− let toHTMLOrSVGElement = unsafeCoerce -- [TODO] Make a bit safer?
39+ let
40+ toHTMLOrSVGElement = unsafeCoerce -- [TODO] Make a bit safer?
4141 for_ (maybeRef <#> toHTMLOrSVGElement) \elem -> do
42− rect <- getBoundingClientRect elem
43− modifyBb (const $ Just rect)
42+ rect <- getBoundingClientRect elem
43+ modifyBb (const $ Just rect)
4444 pure (pure unit)
4545 pure (bb /\ nullableRef)
4646
47−
4847newtype UseViewportHeight hooks
4948 = UseViewportHeight (UseLayoutEffect Unit (UseState (Maybe Number) hooks))
5049
@@ -56,7 +55,8 @@ useViewportHeight =
5655 viewportHeight /\ modifyViewportHeight <- useState Nothing
5756 useLayoutEffect unit do
5857 doc <- window >>= document
59− let maybeElem = Document.toNode doc # HTMLElement.fromNode
58+ let
59+ maybeElem = Document.toNode doc # HTMLElement.fromNode
6060 case maybeElem of
6161 Nothing -> pure unit
6262 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
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Control.Promise (Promise)
66import Control.Promise as Promise
77import Data.Maybe (Maybe(..), maybe)
@@ -19,8 +19,8 @@ import React.Basic.DOM as R
1919import React.Basic.Hooks (component, useState)
2020import React.Basic.Hooks as React
2121import React.Basic.Hooks.Aff (useAff)
22−import Theme.Styles (makeStyles, useTheme)
23−import Theme.Types (CSSTheme)
22+import Yoga.Theme.Styles (makeStyles, useTheme)
23+import Yoga.Theme.Types (CSSTheme)
2424import Web.DOM (Node)
2525import Web.HTML (HTMLElement)
2626
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
22
33import Prelude
44import 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
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Monoid (guard)
66import Effect (Effect)
77import Prim.Row (class Union)
88import React.Basic.DOM.SVG as SVG
99import React.Basic.Hooks (ReactComponent, component)
1010import React.Basic.Hooks as React
11−import Theme.Styles (makeStyles)
12−import Theme.Types (CSSTheme)
11+import Yoga.Theme.Styles (makeStyles)
12+import Yoga.Theme.Types (CSSTheme)
1313import Unsafe.Coerce (unsafeCoerce)
1414
1515type ImageProps
components/src/Yoga/SVG/Image.purs+7−7
@@ -1,8 +1,8 @@
1−module SVG.Image where
1+module Yoga.SVG.Image where
22
33import Prelude
4−import CSS.Safer (cssSafer)
5−import DOM.Hook (useBoundingBox)
4+import Yoga.CSS.Safer (cssSafer)
5+import Yoga.DOM.Hook (useBoundingBox)
66import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))
77import Data.Int (round, toNumber)
88import Data.Maybe (Maybe(..), maybe)
@@ -17,10 +17,10 @@ import React.Basic.DOM as HTML
1717import React.Basic.DOM.SVG as SVG
1818import React.Basic.Hooks (ReactComponent)
1919import React.Basic.Hooks as React
20−import SVG.Icon (Raw)
21−import Scroll.Hook (useScrollYPosition)
22−import Theme.Styles (makeStyles, useTheme)
23−import Theme.Types (CSSTheme)
20+import Yoga.SVG.Icon (Raw)
21+import Yoga.Scroll.Hook (useScrollYPosition)
22+import Yoga.Theme.Styles (makeStyles, useTheme)
23+import Yoga.Theme.Types (CSSTheme)
2424
2525foreign import landingPageDarkRaw ∷ ∀ r. Raw r
2626
components/src/Yoga/Scroll/Hook.purs+12−10
@@ -1,12 +1,11 @@
1−module Scroll.Hook where
1+module Yoga.Scroll.Hook where
22
33import Prelude
4−
54import Data.Newtype (class Newtype)
65import Effect (Effect)
76import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))
87import React.Basic.Hooks as React
9−import Scroll.Listener as Scroll
8+import Yoga.Scroll.Listener as Scroll
109import Unsafe.Coerce (unsafeCoerce)
1110import Web.Event.EventTarget (EventListener, eventListener)
1211import Web.HTML (window)
@@ -20,15 +19,18 @@ useScrollYPosition ∷ Hook UseScrollYPosition Number
2019useScrollYPosition =
2120 coerceHook React.do
2221 scrollY /\ modifyScrollY <- useState 0.0
23− let setScrollY = modifyScrollY <<< const
22+ let
23+ setScrollY = modifyScrollY <<< const
2424 useLayoutEffect unit do
25− listener <- makeListener setScrollY
26− Scroll.registerListener listener
25+ listener <- makeListener setScrollY
26+ Scroll.registerListener listener
2727 pure scrollY
2828
2929makeListener ∷ (Number -> Effect Unit) -> Effect EventListener
3030makeListener setPosition = do
31− eventListener $ const do
32− win <- window
33− let yPos = (unsafeCoerce win).scrollY
34− setPosition yPos
31+ eventListener
32+ $ const do
33+ win <- window
34+ let
35+ yPos = (unsafeCoerce win).scrollY
36+ setPosition yPos
components/src/Yoga/Scroll/Listener.purs+1−4
@@ -1,9 +1,6 @@
1−module Scroll.Listener
2− ( registerListener )
3− where
1+module Yoga.Scroll.Listener (registerListener) where
42
53import Prelude
6−
74import Effect (Effect)
85import Web.Event.Event (EventType(..))
96import 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
22
33import Prelude
44import CSS (contrast, darken, isLight, lighten, rotateHue, toHexString)
@@ -6,7 +6,7 @@ import Color (Color)
66import Data.Foldable (intercalate)
77import Data.Symbol (SProxy(..))
88import Record.Builder as RB
9−import Theme.Types (Theme, CSSTheme)
9+import Yoga.Theme.Types (Theme, CSSTheme)
1010
1111increaseContrast ∷ Color -> Color -> Color
1212increaseContrast 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
22
33import Prelude hiding (add)
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Effect (Effect)
66import Effect.Uncurried (runEffectFn1)
77import React.Basic (ReactComponent)
88import React.Basic.DOM (CSS)
99import React.Basic.Hooks (JSX, component, fragment)
1010import React.Basic.Hooks as React
11−import Theme.Styles (unsafeMakeStyles)
12−import Theme.Types (CSSTheme)
11+import Yoga.Theme.Styles (unsafeMakeStyles)
12+import Yoga.Theme.Types (CSSTheme)
1313import Unsafe.Coerce (unsafeCoerce)
1414
1515mkCssBaseline ::
@@ -57,4 +57,7 @@ styles theme =
5757 }
5858 }
5959 }
60+ , ".textColouredIcon":
61+ { fill: theme.textColour
62+ }
6063 }
components/src/Yoga/Theme/Default.purs+2−2
@@ -1,10 +1,10 @@
1−module Theme.Default where
1+module Yoga.Theme.Default where
22
33import Prelude
44import Color as Color
55import Data.Maybe (fromMaybe')
66import Partial.Unsafe (unsafeCrashWith)
7−import Theme.Types (Theme)
7+import Yoga.Theme.Types (Theme)
88
99systemFontStack ∷ Array String
1010systemFontStack = [ "-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
22 ( mkThemeProvider
33 ) where
44
55import Effect (Effect)
66import React.Basic (JSX, ReactComponent)
7−import Theme.Types (CSSTheme)
7+import Yoga.Theme.Types (CSSTheme)
88
99foreign import mkThemeProviderImpl ∷
1010 ∀ theme.
@@ -12,4 +12,4 @@ foreign import mkThemeProviderImpl ∷
1212
1313mkThemeProvider ∷
1414 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
22 ( makeStyles_
33 , makeStyles
44 , useTheme
@@ -16,7 +16,7 @@ import Prim.RowList (class RowToList)
1616import React.Basic.DOM (CSS)
1717import React.Basic.Hooks (Hook)
1818import Record.Extra (class MapRecord)
19−import Theme.Types (CSSTheme)
19+import Yoga.Theme.Types (CSSTheme)
2020import Type.Row.Homogeneous (class Homogeneous)
2121
2222foreign 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
22
33import Prelude hiding (add)
4−
54import Effect (Effect)
65import React.Basic.DOM (css)
76import React.Basic.DOM as R
87import React.Basic.Hooks (component, element)
98import Storybook.React (Storybook, add, storiesOf)
10−import Theme (fromTheme)
11−import Theme.Default (darkTheme, lightTheme)
9+import Yoga.Theme (fromTheme)
10+import Yoga.Theme.Default (darkTheme, lightTheme)
1211
1312stories ∷ Effect Storybook
1413stories = do
@@ -72,11 +71,11 @@ stories = do
7271 component "Swatch" \{ name, colour, fontFamily } -> React.do
7372 pure
7473 $ R.div
75− { style: css{ display: "flex", flexDirection: "column", alignItems: "center" }
74+ { style: css { display: "flex", flexDirection: "column", alignItems: "center" }
7675 , children:
7776 [ R.div
7877 { children: [ R.text name ]
79− , style: css{ fontFamily, paddingBottom: "5px" }
78+ , style: css { fontFamily, paddingBottom: "5px" }
8079 }
8180 , R.div
8281 { style:
components/src/Yoga/Theme/Types.purs+1−1
@@ -1,4 +1,4 @@
1−module Theme.Types where
1+module Yoga.Theme.Types where
22
33import Color (Color)
44
components/src/Yoga/Typography/Header.purs+4−4
@@ -1,7 +1,7 @@
1−module Typography.Header where
1+module Yoga.Typography.Header where
22
33import Prelude
4−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
55import Data.Array as Array
66import Data.Foldable (intercalate)
77import Data.Maybe (Maybe)
@@ -9,8 +9,8 @@ import Effect (Effect)
99import React.Basic.DOM as R
1010import React.Basic.Hooks (ReactComponent, component)
1111import React.Basic.Hooks as React
12−import Theme.Styles (makeStyles)
13−import Theme.Types (CSSTheme)
12+import Yoga.Theme.Styles (makeStyles)
13+import Yoga.Theme.Types (CSSTheme)
1414
1515data HeadingLevel
1616 = H1
components/src/Yoga/Typography/Paragraph.purs+4−5
@@ -1,14 +1,13 @@
1−module Typography.Paragraph where
1+module Yoga.Typography.Paragraph where
22
33import Prelude
4−
5−import CSS.Safer (cssSafer)
4+import Yoga.CSS.Safer (cssSafer)
65import Effect (Effect)
76import React.Basic.DOM as R
87import React.Basic.Hooks (ReactComponent, component)
98import React.Basic.Hooks as React
10−import Theme.Styles (makeStyles)
11−import Theme.Types (CSSTheme)
9+import Yoga.Theme.Styles (makeStyles)
10+import Yoga.Theme.Types (CSSTheme)
1211
1312mkP ∷ Effect (ReactComponent { text ∷ String })
1413mkP = 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
22
33import Prelude hiding (add)
4−
54import Data.Maybe (Maybe(..))
6−import Decorator.FullScreen (fullScreenDecorator)
5+import Storybook.Decorator.FullScreen (fullScreenDecorator)
76import Effect (Effect)
87import Storybook.React (Storybook, add, addDecorator, storiesOf)
9−import Typography.Header (HeadingLevel(..), mkH)
8+import Yoga.Typography.Header (HeadingLevel(..), mkH)
109
1110stories ∷ Effect Storybook
1211stories = do
@@ -32,8 +31,8 @@ stories = do
3231
3332loremIpsum ∷ String
3433loremIpsum =
35− """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""" <>
37− """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""" <>
39− """lso, contrary to Haskell, PureScript adheres to a strict evaluation strategy."""
34+ """PureScript is a strongly-typed, purely-functional programming language that compiles"""
35+ <> """to JavaScript. It can be used to develop web applications, server side apps, and als"""
36+ <> """o desktop applications with use of Electron. Its syntax is mostly comparable to that"""
37+ <> """of Haskell. In addition, it introduces row polymorphism and extensible records.[2] A"""
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 @@
11module Test.Main where
22
33import Prelude
4−
54import 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)
79
810main :: Effect Unit
9−main = do
10− log "🍝"
11− log "You should add some tests."
11+main =
12+ launchAff_ do
13+ specs <- discover ".*Spec"
14+ runSpec [ consoleReporter ] specs
packages.dhall+29−24
@@ -119,47 +119,52 @@ let additions =
119119
120120
121121let 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
123123
124124let overrides =
125125 { react-basic-hooks =
126− upstream.react-basic-hooks
127− ⫽ { repo =
128− "https://github.com/i-am-the-slime/purescript-react-basic-hooks.git"
129− , version = "e04b106ab2dfda3f9a1407420c434a908ff72b90"
130− }
126+ upstream.react-basic-hooks
127+ // { repo =
128+ "https://github.com/i-am-the-slime/purescript-react-basic-hooks.git"
129+ , version = "e04b106ab2dfda3f9a1407420c434a908ff72b90"
130+ }
131131 }
132132
133133let additions =
134134 { react-testing-library =
135135 { dependencies =
136− [ "aff-promise"
137− , "console"
138− , "debug"
139− , "effect"
140− , "foreign"
141− , "foreign-object"
142− , "psci-support"
143− , "react-basic-hooks"
144− , "remotedata"
145− , "run"
146− , "simple-json"
147− , "spec"
148− , "spec-discovery"
149− ]
136+ [ "aff-promise"
137+ , "console"
138+ , "debug"
139+ , "effect"
140+ , "foreign"
141+ , "foreign-object"
142+ , "psci-support"
143+ , "react-basic-hooks"
144+ , "remotedata"
145+ , "run"
146+ , "simple-json"
147+ , "spec"
148+ , "spec-discovery"
149+ ]
150150 , repo =
151151 "https://github.com/i-am-the-slime/purescript-react-testing-library.git"
152− , version = "b872928414a887ccefbe857038af4e57227dad16"
152+ , version = "5a10027deeeee12de3ccfeecfdb033d1e53f8d05"
153153 }
154154 , pseudo-random =
155155 { dependencies =
156− [ "prelude", "console", "effect", "lcg", "arrays", "st" ]
156+ [ "prelude", "console", "effect", "lcg", "arrays", "st" ]
157157 , repo = "https://github.com/opyapeus/purescript-pseudo-random.git"
158158 , version = "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"
159159 }
160160 , matryoshka =
161161 { dependencies =
162− [ "prelude", "fixed-points", "free", "transformers", "profunctor" ]
162+ [ "prelude"
163+ , "fixed-points"
164+ , "free"
165+ , "transformers"
166+ , "profunctor"
167+ ]
163168 , repo = "https://github.com/slamdata/purescript-matryoshka.git"
164169 , version = "caaca2d836d52159ba7963333996286a00428394"
165170 }
@@ -172,4 +177,4 @@ let additions =
172177 , yoga-components = ../components/spago.dhall as Location
173178 }
174179
175−in upstream ⫽ overrides ⫽ additions
180+in upstream // overrides // additions