git.iko.soy/rowtype-yoga/psfp
on master help sign in
Force rerender when module gets too hot
557f5b0Mark Eibes
.storybook/config.js+8−2
compare with master
unifiedsplit
@@ -1,9 +1,15 @@
1−import { configure } from '@storybook/react';
1+import { configure, forceReRender } from '@storybook/react';
2+import equal from 'deep-equal';
2
3
3const req = require.context('../stories/', true, /Stories\.purs$/);
4const req = require.context('../stories/', true, /Stories\.purs$/);
4
5
5function loadStories() {
6function loadStories() {
6− req.keys().forEach(filename => req(filename).stories());
7+ req.keys().forEach(filename => {
8+ req(filename).stories();
9+ })
7}
10}
8
11
9configure(loadStories, module);
12configure(loadStories, module);
13+if (module.hot) {
14+ forceReRender();
15+}
.storybook/preview-head.html+1
@@ -3,6 +3,7 @@
3 html, body, #app {
3 html, body, #app {
4 margin: 0;
4 margin: 0;
5 padding: 0;
5 padding: 0;
6+ overscroll-behavior: none;
6 }
7 }
7 @font-face {
8 @font-face {
8 font-family: "PragmataPro";
9 font-family: "PragmataPro";
.storybook/webpack.config.js+9−4
@@ -1,7 +1,12 @@
1−const path = require('path');
2−// your app's webpack.config.js
3−const custom = require('../webpack.dev.js');
1+const custom = require("../webpack.dev.js");
2+const path = require("path");
4
3
5module.exports = async ({ config, mode }) => {
4module.exports = async ({ config, mode }) => {
5+ return {
6+ ...config,
7+ module:
8+ { ...config.module
6− return { ...config, module: { ...config.module, rules: custom.module.rules } };
9+ , rules: custom.module.rules
10+ }
11+ };
7};
12};
dist/index.html+16−5
@@ -1,14 +1,25 @@
1<!doctype>
1<!doctype>
2<html>
2<html>
3<head>
3<head>
4− <link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
4+ <link href="https://fonts.googleapis.com/css?family=Overpass|Playfair+Display|Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
5− <title>Purescript Fan Page</title>
6 <style>
5 <style>
7− body { font-family: 'PT Sans', sans-serif; }
6+ html, body, #app {
8− button { font-family: 'PT Sans', sans-serif; }
7+ margin: 0;
8+ padding: 0;
9+ overscroll-behavior: none;
10+ background-color: pink;
11+ }
12+ @font-face {
13+ font-family: "PragmataPro";
14+ src: url('./fonts/PragmataProLiga-Regular.woff2') format('woff2'),
15+ url('./fonts/PragmataProLiga-Regular.woff') format('woff');
16+ font-weight: normal;
17+ font-style: normal;
18+ }
9 </style>
19 </style>
20+ <title>Kleislove</title>
10</head>
21</head>
11<body>
22<body>
12 <div id="app"></div>
23 <div id="app"></div>
13−<script src="bundle.js"></script></body>
24+</body>
14</html>
25</html>
index.html+17−3
@@ -1,9 +1,23 @@
1<!doctype>
1<!doctype>
2<html>
2<html>
3<head>
3<head>
4− <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
4+ <link href="https://fonts.googleapis.com/css?family=Overpass|Playfair+Display|Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
5+ <style>
5− <style> html, body, #app { min-height: 100%; min-width: 100% }</style>
6+ html, body, #app {
7+ margin: 0;
8+ padding: 0;
9+ overscroll-behavior: none;
10+ background-color: pink;
11+ }
12+ @font-face {
13+ font-family: "PragmataPro";
14+ src: url('./fonts/PragmataProLiga-Regular.woff2') format('woff2'),
15+ url('./fonts/PragmataProLiga-Regular.woff') format('woff');
16+ font-weight: normal;
17+ font-style: normal;
18+ }
19+ </style>
6− <title>Purescript Fan Page</title>
20+ <title>Kleislove</title>
7</head>
21</head>
8<body>
22<body>
9 <div id="app"></div>
23 <div id="app"></div>
package-lock.json+30−20
@@ -3343,8 +3343,7 @@
3343 "big.js": {
3343 "big.js": {
3344 "version": "5.2.2",
3344 "version": "5.2.2",
3345 "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
3345 "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
3346− "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
3346+ "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
3347− "dev": true
3348 },
3347 },
3349 "binary-extensions": {
3348 "binary-extensions": {
3350 "version": "1.13.1",
3349 "version": "1.13.1",
@@ -5002,8 +5001,7 @@
5002 "dom-walk": {
5001 "dom-walk": {
5003 "version": "0.1.1",
5002 "version": "0.1.1",
5004 "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
5003 "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
5005− "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
5004+ "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
5006− "dev": true
5007 },
5005 },
5008 "domain-browser": {
5006 "domain-browser": {
5009 "version": "1.2.0",
5007 "version": "1.2.0",
@@ -5154,8 +5152,7 @@
5154 "emojis-list": {
5152 "emojis-list": {
5155 "version": "2.1.0",
5153 "version": "2.1.0",
5156 "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
5154 "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
5157− "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
5155+ "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
5158− "dev": true
5159 },
5156 },
5160 "emotion-theming": {
5157 "emotion-theming": {
5161 "version": "10.0.19",
5158 "version": "10.0.19",
@@ -5675,8 +5672,7 @@
5675 "fast-levenshtein": {
5672 "fast-levenshtein": {
5676 "version": "2.0.6",
5673 "version": "2.0.6",
5677 "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
5674 "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
5678− "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
5675+ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
5679− "dev": true
5680 },
5676 },
5681 "fault": {
5677 "fault": {
5682 "version": "1.0.3",
5678 "version": "1.0.3",
@@ -6794,7 +6790,6 @@
6794 "version": "4.4.0",
6790 "version": "4.4.0",
6795 "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
6791 "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
6796 "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
6792 "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
6797− "dev": true,
6798 "requires": {
6793 "requires": {
6799 "min-document": "^2.19.0",
6794 "min-document": "^2.19.0",
6800 "process": "^0.11.10"
6795 "process": "^0.11.10"
@@ -7950,7 +7945,6 @@
7950 "version": "1.0.1",
7945 "version": "1.0.1",
7951 "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
7946 "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
7952 "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
7947 "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
7953− "dev": true,
7954 "requires": {
7948 "requires": {
7955 "minimist": "^1.2.0"
7949 "minimist": "^1.2.0"
7956 },
7950 },
@@ -7958,8 +7952,7 @@
7958 "minimist": {
7952 "minimist": {
7959 "version": "1.2.0",
7953 "version": "1.2.0",
7960 "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
7954 "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
7961− "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
7955+ "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
7962− "dev": true
7963 }
7956 }
7964 }
7957 }
7965 },
7958 },
@@ -8138,7 +8131,6 @@
8138 "version": "1.2.3",
8131 "version": "1.2.3",
8139 "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
8132 "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
8140 "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
8133 "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
8141− "dev": true,
8142 "requires": {
8134 "requires": {
8143 "big.js": "^5.2.2",
8135 "big.js": "^5.2.2",
8144 "emojis-list": "^2.0.0",
8136 "emojis-list": "^2.0.0",
@@ -8505,7 +8497,6 @@
8505 "version": "2.19.0",
8497 "version": "2.19.0",
8506 "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
8498 "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
8507 "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
8499 "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
8508− "dev": true,
8509 "requires": {
8500 "requires": {
8510 "dom-walk": "^0.1.0"
8501 "dom-walk": "^0.1.0"
8511 }
8502 }
@@ -9736,8 +9727,7 @@
9736 "process": {
9727 "process": {
9737 "version": "0.11.10",
9728 "version": "0.11.10",
9738 "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
9729 "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
9739− "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
9730+ "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
9740− "dev": true
9741 },
9731 },
9742 "process-nextick-args": {
9732 "process-nextick-args": {
9743 "version": "2.0.1",
9733 "version": "2.0.1",
@@ -10452,6 +10442,28 @@
10452 }
10442 }
10453 }
10443 }
10454 },
10444 },
10445+ "react-hot-loader": {
10446+ "version": "4.12.15",
10447+ "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.15.tgz",
10448+ "integrity": "sha512-sgkN6g+tgPE6xZzD0Ysqll7KUFYJbMX0DrczT5OxD6S7hZlSnmqSC3ceudwCkiDd65ZTtm+Ayk4Y9k5xxCvpOw==",
10449+ "requires": {
10450+ "fast-levenshtein": "^2.0.6",
10451+ "global": "^4.3.0",
10452+ "hoist-non-react-statics": "^3.3.0",
10453+ "loader-utils": "^1.1.0",
10454+ "prop-types": "^15.6.1",
10455+ "react-lifecycles-compat": "^3.0.4",
10456+ "shallowequal": "^1.1.0",
10457+ "source-map": "^0.7.3"
10458+ },
10459+ "dependencies": {
10460+ "source-map": {
10461+ "version": "0.7.3",
10462+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
10463+ "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
10464+ }
10465+ }
10466+ },
10455 "react-hotkeys": {
10467 "react-hotkeys": {
10456 "version": "2.0.0-pre4",
10468 "version": "2.0.0-pre4",
10457 "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0-pre4.tgz",
10469 "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0-pre4.tgz",
@@ -10489,8 +10501,7 @@
10489 "react-lifecycles-compat": {
10501 "react-lifecycles-compat": {
10490 "version": "3.0.4",
10502 "version": "3.0.4",
10491 "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
10503 "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
10492− "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
10504+ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
10493− "dev": true
10494 },
10505 },
10495 "react-popper": {
10506 "react-popper": {
10496 "version": "1.3.4",
10507 "version": "1.3.4",
@@ -11413,8 +11424,7 @@
11413 "shallowequal": {
11424 "shallowequal": {
11414 "version": "1.1.0",
11425 "version": "1.1.0",
11415 "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
11426 "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
11416− "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
11427+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
11417− "dev": true
11418 },
11428 },
11419 "shebang-command": {
11429 "shebang-command": {
11420 "version": "1.2.0",
11430 "version": "1.2.0",
package.json+4−1
@@ -17,7 +17,8 @@
17 "webpack:watch": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack --config webpack.dev.js --progress --display-error-details --display verbose --watch",
17 "webpack:watch": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack --config webpack.dev.js --progress --display-error-details --display verbose --watch",
18 "webpack:server": "webpack-dev-server --config webpack.dev.js --progress --inline --hot",
18 "webpack:server": "webpack-dev-server --config webpack.dev.js --progress --inline --hot",
19 "webpack:server:debug": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack-dev-server --config webpack.dev.js --mode development --progress --inline --hot",
19 "webpack:server:debug": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack-dev-server --config webpack.dev.js --mode development --progress --inline --hot",
20− "storybook": "start-storybook -s ./server/static -p 9001"
20+ "storybook": "start-storybook -s ./server/static -p 9001",
21+ "replace-module": "sed -i '' -e 's/\"__module__\"/module/g' output/*Stories/index.js"
21 },
22 },
22 "repository": {
23 "repository": {
23 "type": "git",
24 "type": "git",
@@ -35,6 +36,7 @@
35 "purty": "^4.5.1",
36 "purty": "^4.5.1",
36 "react": "^16.9.0",
37 "react": "^16.9.0",
37 "react-dom": "^16.9.0",
38 "react-dom": "^16.9.0",
39+ "react-hot-loader": "^4.12.15",
38 "smoothscroll-polyfill": "^0.4.4"
40 "smoothscroll-polyfill": "^0.4.4"
39 },
41 },
40 "devDependencies": {
42 "devDependencies": {
@@ -43,6 +45,7 @@
43 "@testing-library/react": "^9.1.4",
45 "@testing-library/react": "^9.1.4",
44 "babel-loader": "^8.0.6",
46 "babel-loader": "^8.0.6",
45 "css-loader": "^3.2.0",
47 "css-loader": "^3.2.0",
48+ "deep-equal": "^1.1.0",
46 "jsdom": "^15.1.1",
49 "jsdom": "^15.1.1",
47 "jsdom-global": "^3.0.2",
50 "jsdom-global": "^3.0.2",
48 "purescript": "^0.13.3",
51 "purescript": "^0.13.3",
server/.gitignorenew file+10
@@ -0,0 +1,10 @@
1+/bower_components/
2+/node_modules/
3+/.pulp-cache/
4+/output/
5+/generated-docs/
6+/.psc-package/
7+/.psc*
8+/.purs*
9+/.psa*
10+/.spago
server/packages.dhallnew file+1
@@ -0,0 +1 @@
1+../packages.dhall
server/spago.dhallnew file+20
@@ -0,0 +1,20 @@
1+{-
2+Welcome to a Spago project!
3+You can edit this file as you like.
4+-}
5+{ name =
6+ "my-project"
7+, dependencies =
8+ [ "console"
9+ , "effect"
10+ , "express"
11+ , "maybe"
12+ , "node-fs"
13+ , "node-process"
14+ , "psci-support"
15+ ]
16+, packages =
17+ ./packages.dhall
18+, sources =
19+ [ "src/**/*.purs", "test/**/*.purs" ]
20+}
server/src/Main.pursnew file+51
@@ -0,0 +1,51 @@
1+module Main where
2+
3+import Prelude
4+
5+import Data.Int (fromString)
6+import Data.Maybe (fromMaybe)
7+import Effect (Effect)
8+import Effect.Class.Console (info)
9+import Node.Encoding (Encoding(..))
10+import Node.Express.App (App, listenHttp, listenHttps, use)
11+
12+import Node.Express.Middleware.Static (static)
13+import Node.FS.Sync (readTextFile)
14+import Node.HTTP (Server)
15+import Node.Process (lookupEnv)
16+
17+main ∷ Effect Server
18+main = do
19+ serverSetup makeApp
20+
21+makeApp ∷ App
22+makeApp = do
23+ use $ static "assets"
24+ -- useOnError (errorHandler log)
25+
26+data CertificatesToUse
27+ = UseLocalCertificates
28+ | DoNotUseLocalCertificates
29+
30+parseCertificatesToUse :: String -> CertificatesToUse
31+parseCertificatesToUse = case _ of
32+ "LOCAL" -> UseLocalCertificates
33+ _ -> DoNotUseLocalCertificates
34+
35+serverSetup ∷ App -> Effect Server
36+serverSetup app = do
37+ maybePortString <- lookupEnv "PORT"
38+ let port = maybePortString >>= fromString # fromMaybe 14188
39+ useLocalCertificates <- fromMaybe DoNotUseLocalCertificates <<< map parseCertificatesToUse <$> lookupEnv "CERTS"
40+ listen <- case useLocalCertificates of
41+ UseLocalCertificates -> do
42+ httpsOptions <- makeHttpsOptions
43+ pure $ listenHttps app (port ∷ Int) httpsOptions
44+ DoNotUseLocalCertificates ->
45+ pure $ listenHttp app port
46+ listen \_ -> info $ "psfp server started on port " <> show port
47+ where
48+ makeHttpsOptions = do
49+ key <- readTextFile UTF8 "server.key"
50+ cert <- readTextFile UTF8 "server.cert"
51+ pure { key, cert }
server/src/Sharednew file+1
@@ -0,0 +1 @@
1+../../Shared/
server/test/Main.pursnew file+11
@@ -0,0 +1,11 @@
1+module Test.Main where
2+
3+import Prelude
4+
5+import Effect (Effect)
6+import Effect.Class.Console (log)
7+
8+main :: Effect Unit
9+main = do
10+ log "🍝"
11+ log "You should add some tests."
src/Element.pursdeleted−61
@@ -1,61 +0,0 @@
1−module Element where
2−
3−import Prelude
4−
5−import CSS.Safer (cssSafer)
6−import Effect (Effect)
7−import Effect.Console (log)
8−import React.Basic.DOM as R
9−import React.Basic.Events (handler_)
10−import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))
11−import React.Basic.Hooks as React
12−import Theme.Provider (mkThemeProvider)
13−import Theme.Styles (makeStyles)
14−import Theme.Types (CSSTheme)
15−
16−mkToggleButton ∷ Effect (ReactComponent { label ∷ String })
17−mkToggleButton = do
18− useStyles <-
19− makeStyles \(theme ∷ CSSTheme) -> -- do
20− { button:
21− cssSafer
22− { backgroundColor: theme.highlightColour
23− , color: theme.textColour
24− , fontFamily: theme.textFontFamily
25− , fontSize: "1em"
26− , paddingTop: "10px"
27− , paddingBottom: "10px"
28− , paddingRight: "20px"
29− , paddingLeft: "20px"
30− , border: "solid 0px black"
31− , borderRadius: "5px"
32− }
33− }
34− component "ToggleButton" \{ label } -> React.do
35− classes <- useStyles
36− on /\ setOn <- useState false
37− useEffect on do
38− log $ "State: " <> if on then "On" else "Off"
39− pure (pure unit)
40− pure
41− $ R.button
42− { onClick: handler_ $ setOn not
43− , className: classes.button
44− , children:
45− [ R.text label
46− , R.text if on then " On" else " Off"
47− ]
48− }
49−
50−mkToggleButtonContainer ∷ Effect (ReactComponent {})
51−mkToggleButtonContainer = do
52− themeProvider <- mkThemeProvider
53− toggleButton <- mkToggleButton
54− component "Container" \_ ->
55− pure
56− $ R.div
57− { children:
58− [ element toggleButton { label: "A" }
59− , element toggleButton { label: "B" }
60− ]
61− }
src/Example.purs+8−6
@@ -2,23 +2,25 @@ module Example (main) where
2
2
3import Prelude
3import Prelude
4
4
5+import Container.Component (mkContainer)
5import Data.Maybe (fromJust)
6import Data.Maybe (fromJust)
6import Effect (Effect)
7import Effect (Effect)
7import Effect.Console (log)
8import Effect.Console (log)
8−import Element (mkToggleButtonContainer)
9import Partial.Unsafe (unsafePartial)
9import Partial.Unsafe (unsafePartial)
10import React.Basic (JSX, element)
10import React.Basic (JSX, element)
11import React.Basic.DOM as ReactDOM
11import React.Basic.DOM as ReactDOM
12+import Theme (fromTheme)
13+import Theme.Default (darkTheme)
12import Web.DOM.NonElementParentNode (getElementById) as DOM
14import Web.DOM.NonElementParentNode (getElementById) as DOM
13import Web.HTML (window) as DOM
15import Web.HTML (window) as DOM
14import Web.HTML.HTMLDocument (toNonElementParentNode) as DOM
16import Web.HTML.HTMLDocument (toNonElementParentNode) as DOM
15import Web.HTML.Window (document) as DOM
17import Web.HTML.Window (document) as DOM
16
18
17
19
18−main :: Effect Unit
20+main ∷ Effect Unit
19main = do
21main = do
20− toggleButtonContainer <- mkToggleButtonContainer
22+ container <- mkContainer
21− let appEl = element toggleButtonContainer {}
23+ let appEl = element container { theme: fromTheme darkTheme, children: [] }
22
24
23 if isServerSide
25 if isServerSide
24 then void (log (renderToString appEl))
26 then void (log (renderToString appEl))
@@ -30,5 +32,5 @@ main = do
30 let element' = unsafePartial (fromJust elem)
32 let element' = unsafePartial (fromJust elem)
31 ReactDOM.render appEl element'
33 ReactDOM.render appEl element'
32
34
33−foreign import isServerSide :: Boolean
35+foreign import isServerSide ∷ Boolean
34−foreign import renderToString :: JSX -> String
36+foreign import renderToString ∷ JSX -> String
src/SVG/Image.purs+4
@@ -180,24 +180,28 @@ mkLandingPageBackground = do
180 { d: "M610.291 177.316c-35.879-.428-84.67-.691-138.392-.689-38.684.002-74.811.141-105.402.38-49.14-2.745-80.877-9.954-80.877-14.718 0-1.333 2.655.335 7.294-.896 96.772-.175 171.302-1.213 171.302-2.464 0-1.107-59.462-3.372-140.106-3.687 38.487-2.059 102.543-4.972 173.823-4.972 11.996 0 23.761.07 35.216.206 20.76-4.638 60.945-2.784 107.07-2.784 36.08 0 68.525-.075 90.882 2.983 32.491.899 72.142-1.186 114.922-.379 38.68.729 74.805 1.273 105.395 1.613 49.101 3.673 80.599 8.516 80.54 13.279-.016 1.334-2.504 2.58-7.158 3.723-96.763-1.654-171.297-2.024-171.312-.774-.013 1.108 58.473 3.15 139.105 4.989-38.514 3.085-101.653 4.38-172.925 3.033-11.995-.227-23.757-.52-35.209-.872-20.815 4.245-61.034 6.631-107.154 5.759-24.754-.468-47.786-1.809-67.014-3.73z"
180 { d: "M610.291 177.316c-35.879-.428-84.67-.691-138.392-.689-38.684.002-74.811.141-105.402.38-49.14-2.745-80.877-9.954-80.877-14.718 0-1.333 2.655.335 7.294-.896 96.772-.175 171.302-1.213 171.302-2.464 0-1.107-59.462-3.372-140.106-3.687 38.487-2.059 102.543-4.972 173.823-4.972 11.996 0 23.761.07 35.216.206 20.76-4.638 60.945-2.784 107.07-2.784 36.08 0 68.525-.075 90.882 2.983 32.491.899 72.142-1.186 114.922-.379 38.68.729 74.805 1.273 105.395 1.613 49.101 3.673 80.599 8.516 80.54 13.279-.016 1.334-2.504 2.58-7.158 3.723-96.763-1.654-171.297-2.024-171.312-.774-.013 1.108 58.473 3.15 139.105 4.989-38.514 3.085-101.653 4.38-172.925 3.033-11.995-.227-23.757-.52-35.209-.872-20.815 4.245-61.034 6.631-107.154 5.759-24.754-.468-47.786-1.809-67.014-3.73z"
181 , fill: if theme.isLight then "#ddf0fb" else "#240c3c"
181 , fill: if theme.isLight then "#ddf0fb" else "#240c3c"
182 , className: classes.movingCloud1
182 , className: classes.movingCloud1
183+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"
183 }
184 }
184 -- bgcloud
185 -- bgcloud
185 , SVG.path
186 , SVG.path
186 { d: "M609.299 171.607c-35.88-.338-84.67-.545-138.392-.543-38.684.001-74.812.111-105.402.299-49.141-2.166-80.694-5.519-80.694-9.279 0-1.052 2.472-2.073 7.111-3.045 96.772-.137 171.302-.957 171.302-1.944-.001-.874-58.506-1.614-139.15-1.862 38.471-3.009 101.587-4.973 172.867-4.973 11.996 0 23.761.055 35.216.162 20.76-3.66 60.945-6.143 107.07-6.143 36.08 0 68.525 1.519 90.882 3.933 32.491.709 72.142 1.432 114.922 2.069 38.68.575 74.805 1.005 105.395 1.272 49.101 2.9 80.598 6.722 80.54 10.482-.017 1.052-2.505 2.036-7.158 2.938-96.763-1.305-171.297-1.597-171.312-.611-.014.875 58.473 2.486 139.104 3.938-38.514 2.435-101.653 3.457-172.924 2.394a3771.84 3771.84 0 01-35.21-.688c-20.814 3.35-61.033 5.234-107.153 4.545-24.754-.369-47.786-1.428-67.014-2.944z"
187 { d: "M609.299 171.607c-35.88-.338-84.67-.545-138.392-.543-38.684.001-74.812.111-105.402.299-49.141-2.166-80.694-5.519-80.694-9.279 0-1.052 2.472-2.073 7.111-3.045 96.772-.137 171.302-.957 171.302-1.944-.001-.874-58.506-1.614-139.15-1.862 38.471-3.009 101.587-4.973 172.867-4.973 11.996 0 23.761.055 35.216.162 20.76-3.66 60.945-6.143 107.07-6.143 36.08 0 68.525 1.519 90.882 3.933 32.491.709 72.142 1.432 114.922 2.069 38.68.575 74.805 1.005 105.395 1.272 49.101 2.9 80.598 6.722 80.54 10.482-.017 1.052-2.505 2.036-7.158 2.938-96.763-1.305-171.297-1.597-171.312-.611-.014.875 58.473 2.486 139.104 3.938-38.514 2.435-101.653 3.457-172.924 2.394a3771.84 3771.84 0 01-35.21-.688c-20.814 3.35-61.033 5.234-107.153 4.545-24.754-.369-47.786-1.428-67.014-2.944z"
187 , fill: if theme.isLight then "#d8effd" else "#120b38"
188 , fill: if theme.isLight then "#d8effd" else "#120b38"
188 , className: classes.movingCloud1
189 , className: classes.movingCloud1
190+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"
189 }
191 }
190 -- rightcloud
192 -- rightcloud
191 , SVG.path
193 , SVG.path
192 { d: "M684.234 222.269c-12.108-1.642-29.721-2.832-29.76-5.218-.063-3.861 34.226-4.225 76.6-3.504 42.375.721 75.9-2.707 76.956 1.008 2.476 8.704-12.549 8.552-32.56 10.141-12.403-.58-28.24.216-44.434.479-16.193.263-35.197-1.331-46.802-2.906z"
194 { d: "M684.234 222.269c-12.108-1.642-29.721-2.832-29.76-5.218-.063-3.861 34.226-4.225 76.6-3.504 42.375.721 75.9-2.707 76.956 1.008 2.476 8.704-12.549 8.552-32.56 10.141-12.403-.58-28.24.216-44.434.479-16.193.263-35.197-1.331-46.802-2.906z"
193 , fill: if theme.isLight then "#d8effd" else "url(#_Linear4)"
195 , fill: if theme.isLight then "#d8effd" else "url(#_Linear4)"
194 , className: classes.movingCloud2
196 , className: classes.movingCloud2
197+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"
195 }
198 }
196 -- leftcloud
199 -- leftcloud
197 , SVG.path
200 , SVG.path
198 { d: "M130.064 213.821c42.381 0 76.789.237 76.789 4.224 0 3.986-14.408 4.223-56.789 4.223-42.38 0-96.788.208-96.788-4.223s34.408-4.224 76.788-4.224z"
201 { d: "M130.064 213.821c42.381 0 76.789.237 76.789 4.224 0 3.986-14.408 4.223-56.789 4.223-42.38 0-96.788.208-96.788-4.223s34.408-4.224 76.788-4.224z"
199 , fill: if theme.isLight then "#d8effd" else "#a7847d"
202 , fill: if theme.isLight then "#d8effd" else "#a7847d"
200 , className: classes.movingCloud3
203 , className: classes.movingCloud3
204+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"
201 }
205 }
202 , mountains theme.isLight scrolled
206 , mountains theme.isLight scrolled
203 --buildings
207 --buildings
src/Sharednew file+1
@@ -0,0 +1 @@
1+../Shared
stories/ButtonStories.purs+28−27
@@ -6,22 +6,23 @@ import Button.Component (ButtonType(..), mkButton)
6import Decorator.FullScreen (fullScreenDecorator)
6import Decorator.FullScreen (fullScreenDecorator)
7import Effect (Effect)
7import Effect (Effect)
8import Effect.Console (log)
8import Effect.Console (log)
9+import Foreign (Foreign)
9import React.Basic.DOM as R
10import React.Basic.DOM as R
10import React.Basic.Events (handler_)
11import React.Basic.Events (handler_)
11import React.Basic.Hooks (component, element)
12import React.Basic.Hooks (component, element)
12−import SVG.Icon (alternativeIcon, apIcon, appendIcon, applyIcon, applyflippedIcon, bindIcon, composeIcon, forallIcon, kleisliIcon, mapIcon, mapflippedIcon, pslogoIcon)
13import Storybook.React (Storybook, add, addDecorator, storiesOf)
13import Storybook.React (Storybook, add, addDecorator, storiesOf)
14
14
15−stories ∷ Effect Storybook
15+stories ∷ Foreign -> Effect Storybook
16−stories =
16+stories mod =
17 storiesOf "Button" do
17 storiesOf "Button" do
18 addDecorator fullScreenDecorator
18 addDecorator fullScreenDecorator
19+
19 add "Button" mkExample
20 add "Button" mkExample
20 [ { text: "Cancel"
21 [ { text: "Cancel"
21 , buttonType: PlainButton
22 , buttonType: PlainButton
22 , buttonProps: { onClick: handler_ (log "clicked cancel") }
23 , buttonProps: { onClick: handler_ (log "clicked cancel") }
23 }
24 }
24− , { text: "OK"
25+ , { text: "Okay"
25 , buttonType: HighlightedButton
26 , buttonType: HighlightedButton
26 , buttonProps:
27 , buttonProps:
27 { onClick: handler_ (log "clicked OK")
28 { onClick: handler_ (log "clicked OK")
@@ -38,20 +39,20 @@ stories =
38 , buttonProps: { onClick: handler_ (log "clicked very long...") }
39 , buttonProps: { onClick: handler_ (log "clicked very long...") }
39 }
40 }
40 ]
41 ]
41− add "Icon Button" mkIconButton
42+ -- add "Icon Button" mkIconButton
42− [ { icon: alternativeIcon, buttonType: PlainButton }
43+ -- [ { icon: alternativeIcon, buttonType: PlainButton }
43− , { icon: apIcon, buttonType: HighlightedButton }
44+ -- , { icon: apIcon, buttonType: HighlightedButton }
44− , { icon: appendIcon, buttonType: PlainButton }
45+ -- , { icon: appendIcon, buttonType: PlainButton }
45− , { icon: applyflippedIcon, buttonType: PlainButton }
46+ -- , { icon: applyflippedIcon, buttonType: PlainButton }
46− , { icon: applyIcon, buttonType: PlainButton }
47+ -- , { icon: applyIcon, buttonType: PlainButton }
47− , { icon: bindIcon, buttonType: PlainButton }
48+ -- , { icon: bindIcon, buttonType: PlainButton }
48− , { icon: composeIcon, buttonType: PlainButton }
49+ -- , { icon: composeIcon, buttonType: PlainButton }
49− , { icon: forallIcon, buttonType: PlainButton }
50+ -- , { icon: forallIcon, buttonType: PlainButton }
50− , { icon: kleisliIcon, buttonType: DisabledButton }
51+ -- , { icon: kleisliIcon, buttonType: DisabledButton }
51− , { icon: mapflippedIcon, buttonType: PlainButton }
52+ -- , { icon: mapflippedIcon, buttonType: PlainButton }
52− , { icon: mapIcon, buttonType: PlainButton }
53+ -- , { icon: mapIcon, buttonType: PlainButton }
53− , { icon: pslogoIcon, buttonType: PlainButton }
54+ -- , { icon: pslogoIcon, buttonType: PlainButton }
54− ]
55+ -- ]
55 where
56 where
56 mkExample = do
57 mkExample = do
57 button <- mkButton
58 button <- mkButton
@@ -61,15 +62,15 @@ stories =
61 { children: [ R.text text ], buttonProps, buttonType
62 { children: [ R.text text ], buttonProps, buttonType
62 }
63 }
63
64
64− mkIconButton = do
65+ -- mkIconButton = do
65− button <- mkButton
66+ -- button <- mkButton
66− component "ExampleIconButton" \{ icon, buttonType } -> React.do
67+ -- component "ExampleIconButton" \{ icon, buttonType } -> React.do
67− pure
68+ -- pure
68− $ element button
69+ -- $ element button
69− { children: [ element icon { width: 30 } ]
70+ -- { children: [ element icon { width: 30 } ]
70− , buttonProps: { }
71+ -- , buttonProps: { }
71− , buttonType
72+ -- , buttonType
72− }
73+ -- }
73
74
74loremIpsum ∷ String
75loremIpsum ∷ String
75loremIpsum =
76loremIpsum =
stories/CardStories.purs+1−1
@@ -11,7 +11,7 @@ import React.Basic.Hooks (component, element)
11import Storybook.React (Storybook, add, addDecorator, storiesOf)
11import Storybook.React (Storybook, add, addDecorator, storiesOf)
12
12
13stories ∷ Effect Storybook
13stories ∷ Effect Storybook
14−stories =
14+stories = do
15 storiesOf "Card" do
15 storiesOf "Card" do
16 addDecorator fullScreenDecorator
16 addDecorator fullScreenDecorator
17 add "Example card" mkExample
17 add "Example card" mkExample
stories/ContainerStories.purs+2−1
@@ -1,6 +1,7 @@
1module ContainerStories where
1module ContainerStories where
2
2
3import Prelude hiding (add)
3import Prelude hiding (add)
4+
4import Container.Component (mkContainer)
5import Container.Component (mkContainer)
5import Decorator.FullScreen (fullScreenDecorator)
6import Decorator.FullScreen (fullScreenDecorator)
6import Effect (Effect)
7import Effect (Effect)
@@ -10,7 +11,7 @@ import Storybook.React (Storybook, add, addDecorator, storiesOf)
10import Theme.Styles (useTheme)
11import Theme.Styles (useTheme)
11
12
12stories ∷ Effect Storybook
13stories ∷ Effect Storybook
13−stories =
14+stories = do
14 storiesOf "Container" do
15 storiesOf "Container" do
15 addDecorator fullScreenDecorator
16 addDecorator fullScreenDecorator
16 add "Container" mkExample [ {} ]
17 add "Container" mkExample [ {} ]
stories/EditorStories.purs+1−1
@@ -8,7 +8,7 @@ import Effect (Effect)
8import Storybook.React (Storybook, add, addDecorator, storiesOf)
8import Storybook.React (Storybook, add, addDecorator, storiesOf)
9
9
10stories ∷ Effect Storybook
10stories ∷ Effect Storybook
11−stories =
11+stories = do
12 storiesOf "Editor" do
12 storiesOf "Editor" do
13 addDecorator fullScreenDecorator
13 addDecorator fullScreenDecorator
14 add "The Editor" mkEditor
14 add "The Editor" mkEditor
stories/Storybook/React.js+2−2
@@ -1,7 +1,7 @@
1var storybook = require('@storybook/react');
1var storybook = require('@storybook/react');
2
2
3−exports.storiesOfImpl = function(name) {
3+exports.storiesOfImpl = function(stories) {
4− return storybook.storiesOf(name, module);
4+ return storybook.storiesOf(stories, module.parent);
5}
5}
6
6
7exports.addImpl = function(sb) {
7exports.addImpl = function(sb) {
stories/Storybook/React.purs+1−7
@@ -14,15 +14,9 @@ import React.Basic (JSX, ReactComponent, element, fragment)
14
14
15foreign import data Storybook ∷ Type
15foreign import data Storybook ∷ Type
16
16
17−foreign import data Module ∷ Type
18−
19foreign import storiesOfImpl ∷ String -> Storybook
17foreign import storiesOfImpl ∷ String -> Storybook
20
18
21−foreign import addImpl ∷
19+foreign import addImpl ∷ Storybook -> Effect JSX -> String -> Effect Storybook
22− Storybook ->
23− Effect JSX ->
24− String ->
25− Effect Storybook
26
20
27foreign import addDecoratorImpl ∷
21foreign import addDecoratorImpl ∷
28 Storybook ->
22 Storybook ->
stories/ThemeStories.purs+1−1
@@ -11,7 +11,7 @@ import Theme (fromTheme)
11import Theme.Default (darkTheme, lightTheme)
11import Theme.Default (darkTheme, lightTheme)
12
12
13stories ∷ Effect Storybook
13stories ∷ Effect Storybook
14−stories =
14+stories = do
15 storiesOf "Theme" do
15 storiesOf "Theme" do
16 add "The swatches in the themes" mkExample
16 add "The swatches in the themes" mkExample
17 [ { theme: darkTheme, themeName: "Dark theme" }
17 [ { theme: darkTheme, themeName: "Dark theme" }
stories/TypographyStories.purs+1−1
@@ -9,7 +9,7 @@ import Storybook.React (Storybook, add, addDecorator, storiesOf)
9import Typography.Header (HeadingLevel(..), mkH)
9import Typography.Header (HeadingLevel(..), mkH)
10
10
11stories ∷ Effect Storybook
11stories ∷ Effect Storybook
12−stories =
12+stories = do
13 storiesOf "Typography" do
13 storiesOf "Typography" do
14 addDecorator fullScreenDecorator
14 addDecorator fullScreenDecorator
15 add "All" mkH
15 add "All" mkH
webpack.dev.js−2
@@ -27,8 +27,6 @@ module.exports = merge(common, {
27 stats: 'errors-only'
27 stats: 'errors-only'
28 },
28 },
29
29
30− entry: './src/entrypoint.js',
31−
32 plugins: [
30 plugins: [
33 new webpack.LoaderOptionsPlugin({
31 new webpack.LoaderOptionsPlugin({
34 debug: true
32 debug: true