557f5b0 · rowtype-yoga/psfp

.storybook/config.js+8−2

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

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

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

2+import equal from 'deep-equal';

23

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

45

56function loadStories() {

6− req.keys().forEach(filename => req(filename).stories());

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

8+ req(filename).stories();

9+ })

710}

811

912configure(loadStories, module);

13+if (module.hot) {

14+ forceReRender();

15+}

.storybook/preview-head.html+1

@@ -3,6 +3,7 @@

33 html, body, #app {

44 margin: 0;

55 padding: 0;

6+ overscroll-behavior: none;

67 }

78 @font-face {

89 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");

43

54module.exports = async ({ config, mode }) => {

6− return { ...config, module: { ...config.module, rules: custom.module.rules } };

5+ return {

6+ ...config,

7+ module:

8+ { ...config.module

9+ , rules: custom.module.rules

10+ }

11+ };

712};

dist/index.html+16−5

@@ -1,14 +1,25 @@

11<!doctype>

22<html>

33<head>

4− <link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">

5− <title>Purescript Fan Page</title>

4+ <link href="https://fonts.googleapis.com/css?family=Overpass|Playfair+Display|Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">

65 <style>

7− body { font-family: 'PT Sans', sans-serif; }

8− button { font-family: 'PT Sans', sans-serif; }

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+ }

919 </style>

20+ <title>Kleislove</title>

1021</head>

1122<body>

1223 <div id="app"></div>

13−<script src="bundle.js"></script></body>

24+</body>

1425</html>

index.html+17−3

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

11<!doctype>

22<html>

33<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">

5− <style> html, body, #app { min-height: 100%; min-width: 100% }</style>

6− <title>Purescript Fan Page</title>

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>

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>

20+ <title>Kleislove</title>

721</head>

822<body>

923 <div id="app"></div>

package-lock.json+30−20

@@ -3343,8 +3343,7 @@

33433343 "big.js": {

33443344 "version": "5.2.2",

33453345 "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",

3346− "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",

3347− "dev": true

3346+ "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="

33483347 },

33493348 "binary-extensions": {

33503349 "version": "1.13.1",

@@ -5002,8 +5001,7 @@

50025001 "dom-walk": {

50035002 "version": "0.1.1",

50045003 "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",

5005− "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",

5006− "dev": true

5004+ "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="

50075005 },

50085006 "domain-browser": {

50095007 "version": "1.2.0",

@@ -5154,8 +5152,7 @@

51545152 "emojis-list": {

51555153 "version": "2.1.0",

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

5157− "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",

5158− "dev": true

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

51595156 },

51605157 "emotion-theming": {

51615158 "version": "10.0.19",

@@ -5675,8 +5672,7 @@

56755672 "fast-levenshtein": {

56765673 "version": "2.0.6",

56775674 "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",

5678− "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",

5679− "dev": true

5675+ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="

56805676 },

56815677 "fault": {

56825678 "version": "1.0.3",

@@ -6794,7 +6790,6 @@

67946790 "version": "4.4.0",

67956791 "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",

67966792 "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",

6797− "dev": true,

67986793 "requires": {

67996794 "min-document": "^2.19.0",

68006795 "process": "^0.11.10"

@@ -7950,7 +7945,6 @@

79507945 "version": "1.0.1",

79517946 "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",

79527947 "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",

7953− "dev": true,

79547948 "requires": {

79557949 "minimist": "^1.2.0"

79567950 },

@@ -7958,8 +7952,7 @@

79587952 "minimist": {

79597953 "version": "1.2.0",

79607954 "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",

7961− "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",

7962− "dev": true

7955+ "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="

79637956 }

79647957 }

79657958 },

@@ -8138,7 +8131,6 @@

81388131 "version": "1.2.3",

81398132 "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",

81408133 "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",

8141− "dev": true,

81428134 "requires": {

81438135 "big.js": "^5.2.2",

81448136 "emojis-list": "^2.0.0",

@@ -8505,7 +8497,6 @@

85058497 "version": "2.19.0",

85068498 "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",

85078499 "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",

8508− "dev": true,

85098500 "requires": {

85108501 "dom-walk": "^0.1.0"

85118502 }

@@ -9736,8 +9727,7 @@

97369727 "process": {

97379728 "version": "0.11.10",

97389729 "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",

9739− "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",

9740− "dev": true

9730+ "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="

97419731 },

97429732 "process-nextick-args": {

97439733 "version": "2.0.1",

@@ -10452,6 +10442,28 @@

1045210442 }

1045310443 }

1045410444 },

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+ },

1045510467 "react-hotkeys": {

1045610468 "version": "2.0.0-pre4",

1045710469 "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0-pre4.tgz",

@@ -10489,8 +10501,7 @@

1048910501 "react-lifecycles-compat": {

1049010502 "version": "3.0.4",

1049110503 "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

10492− "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",

10493− "dev": true

10504+ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="

1049410505 },

1049510506 "react-popper": {

1049610507 "version": "1.3.4",

@@ -11413,8 +11424,7 @@

1141311424 "shallowequal": {

1141411425 "version": "1.1.0",

1141511426 "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",

11416− "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",

11417− "dev": true

11427+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="

1141811428 },

1141911429 "shebang-command": {

1142011430 "version": "1.2.0",

package.json+4−1

@@ -17,7 +17,8 @@

1717 "webpack:watch": "DEBUG=purs-loader* DEBUG_DEPTH=100 webpack --config webpack.dev.js --progress --display-error-details --display verbose --watch",

1818 "webpack:server": "webpack-dev-server --config webpack.dev.js --progress --inline --hot",

1919 "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"

2122 },

2223 "repository": {

2324 "type": "git",

@@ -35,6 +36,7 @@

3536 "purty": "^4.5.1",

3637 "react": "^16.9.0",

3738 "react-dom": "^16.9.0",

39+ "react-hot-loader": "^4.12.15",

3840 "smoothscroll-polyfill": "^0.4.4"

3941 },

4042 "devDependencies": {

@@ -43,6 +45,7 @@

4345 "@testing-library/react": "^9.1.4",

4446 "babel-loader": "^8.0.6",

4547 "css-loader": "^3.2.0",

48+ "deep-equal": "^1.1.0",

4649 "jsdom": "^15.1.1",

4750 "jsdom-global": "^3.0.2",

4851 "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

22

33import Prelude

44

5+import Container.Component (mkContainer)

56import Data.Maybe (fromJust)

67import Effect (Effect)

78import Effect.Console (log)

8−import Element (mkToggleButtonContainer)

99import Partial.Unsafe (unsafePartial)

1010import React.Basic (JSX, element)

1111import React.Basic.DOM as ReactDOM

12+import Theme (fromTheme)

13+import Theme.Default (darkTheme)

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

1315import Web.HTML (window) as DOM

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

1517import Web.HTML.Window (document) as DOM

1618

1719

18−main :: Effect Unit

20+main ∷ Effect Unit

1921main = do

20− toggleButtonContainer <- mkToggleButtonContainer

21− let appEl = element toggleButtonContainer {}

22+ container <- mkContainer

23+ let appEl = element container { theme: fromTheme darkTheme, children: [] }

2224

2325 if isServerSide

2426 then void (log (renderToString appEl))

@@ -30,5 +32,5 @@ main = do

3032 let element' = unsafePartial (fromJust elem)

3133 ReactDOM.render appEl element'

3234

33−foreign import isServerSide :: Boolean

34−foreign import renderToString :: JSX -> String

35+foreign import isServerSide ∷ Boolean

36+foreign import renderToString ∷ JSX -> String

src/SVG/Image.purs+4

@@ -180,24 +180,28 @@ mkLandingPageBackground = do

180180 { 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"

181181 , fill: if theme.isLight then "#ddf0fb" else "#240c3c"

182182 , className: classes.movingCloud1

183+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"

183184 }

184185 -- bgcloud

185186 , SVG.path

186187 { 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"

187188 , fill: if theme.isLight then "#d8effd" else "#120b38"

188189 , className: classes.movingCloud1

190+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"

189191 }

190192 -- rightcloud

191193 , SVG.path

192194 { 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"

193195 , fill: if theme.isLight then "#d8effd" else "url(#_Linear4)"

194196 , className: classes.movingCloud2

197+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"

195198 }

196199 -- leftcloud

197200 , SVG.path

198201 { 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"

199202 , fill: if theme.isLight then "#d8effd" else "#a7847d"

200203 , className: classes.movingCloud3

204+ , transform: "translate(0 " <> show (scrolled * 20.0) <> ")"

201205 }

202206 , mountains theme.isLight scrolled

203207 --buildings

src/Sharednew file+1

@@ -0,0 +1 @@

1+../Shared

stories/ButtonStories.purs+28−27

@@ -6,22 +6,23 @@ import Button.Component (ButtonType(..), mkButton)

66import Decorator.FullScreen (fullScreenDecorator)

77import Effect (Effect)

88import Effect.Console (log)

9+import Foreign (Foreign)

910import React.Basic.DOM as R

1011import React.Basic.Events (handler_)

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

12−import SVG.Icon (alternativeIcon, apIcon, appendIcon, applyIcon, applyflippedIcon, bindIcon, composeIcon, forallIcon, kleisliIcon, mapIcon, mapflippedIcon, pslogoIcon)

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

1414

15−stories ∷ Effect Storybook

16−stories =

15+stories ∷ Foreign -> Effect Storybook

16+stories mod =

1717 storiesOf "Button" do

1818 addDecorator fullScreenDecorator

19+

1920 add "Button" mkExample

2021 [ { text: "Cancel"

2122 , buttonType: PlainButton

2223 , buttonProps: { onClick: handler_ (log "clicked cancel") }

2324 }

24− , { text: "OK"

25+ , { text: "Okay"

2526 , buttonType: HighlightedButton

2627 , buttonProps:

2728 { onClick: handler_ (log "clicked OK")

@@ -38,20 +39,20 @@ stories =

3839 , buttonProps: { onClick: handler_ (log "clicked very long...") }

3940 }

4041 ]

41− add "Icon Button" mkIconButton

42− [ { icon: alternativeIcon, buttonType: PlainButton }

43− , { icon: apIcon, buttonType: HighlightedButton }

44− , { icon: appendIcon, buttonType: PlainButton }

45− , { icon: applyflippedIcon, buttonType: PlainButton }

46− , { icon: applyIcon, buttonType: PlainButton }

47− , { icon: bindIcon, buttonType: PlainButton }

48− , { icon: composeIcon, buttonType: PlainButton }

49− , { icon: forallIcon, buttonType: PlainButton }

50− , { icon: kleisliIcon, buttonType: DisabledButton }

51− , { icon: mapflippedIcon, buttonType: PlainButton }

52− , { icon: mapIcon, buttonType: PlainButton }

53− , { icon: pslogoIcon, buttonType: PlainButton }

54− ]

42+ -- add "Icon Button" mkIconButton

43+ -- [ { icon: alternativeIcon, buttonType: PlainButton }

44+ -- , { icon: apIcon, buttonType: HighlightedButton }

45+ -- , { icon: appendIcon, buttonType: PlainButton }

46+ -- , { icon: applyflippedIcon, buttonType: PlainButton }

47+ -- , { icon: applyIcon, buttonType: PlainButton }

48+ -- , { icon: bindIcon, buttonType: PlainButton }

49+ -- , { icon: composeIcon, buttonType: PlainButton }

50+ -- , { icon: forallIcon, buttonType: PlainButton }

51+ -- , { icon: kleisliIcon, buttonType: DisabledButton }

52+ -- , { icon: mapflippedIcon, buttonType: PlainButton }

53+ -- , { icon: mapIcon, buttonType: PlainButton }

54+ -- , { icon: pslogoIcon, buttonType: PlainButton }

55+ -- ]

5556 where

5657 mkExample = do

5758 button <- mkButton

@@ -61,15 +62,15 @@ stories =

6162 { children: [ R.text text ], buttonProps, buttonType

6263 }

6364

64− mkIconButton = do

65− button <- mkButton

66− component "ExampleIconButton" \{ icon, buttonType } -> React.do

67− pure

68− $ element button

69− { children: [ element icon { width: 30 } ]

70− , buttonProps: { }

71− , buttonType

72− }

65+ -- mkIconButton = do

66+ -- button <- mkButton

67+ -- component "ExampleIconButton" \{ icon, buttonType } -> React.do

68+ -- pure

69+ -- $ element button

70+ -- { children: [ element icon { width: 30 } ]

71+ -- , buttonProps: { }

72+ -- , buttonType

73+ -- }

7374

7475loremIpsum ∷ String

7576loremIpsum =

stories/CardStories.purs+1−1

@@ -11,7 +11,7 @@ import React.Basic.Hooks (component, element)

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

1212

1313stories ∷ Effect Storybook

14−stories =

14+stories = do

1515 storiesOf "Card" do

1616 addDecorator fullScreenDecorator

1717 add "Example card" mkExample

stories/ContainerStories.purs+2−1

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

11module ContainerStories where

22

33import Prelude hiding (add)

4+

45import Container.Component (mkContainer)

56import Decorator.FullScreen (fullScreenDecorator)

67import Effect (Effect)

@@ -10,7 +11,7 @@ import Storybook.React (Storybook, add, addDecorator, storiesOf)

1011import Theme.Styles (useTheme)

1112

1213stories ∷ Effect Storybook

13−stories =

14+stories = do

1415 storiesOf "Container" do

1516 addDecorator fullScreenDecorator

1617 add "Container" mkExample [ {} ]

stories/EditorStories.purs+1−1

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

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

99

1010stories ∷ Effect Storybook

11−stories =

11+stories = do

1212 storiesOf "Editor" do

1313 addDecorator fullScreenDecorator

1414 add "The Editor" mkEditor

stories/Storybook/React.js+2−2

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

11var storybook = require('@storybook/react');

22

3−exports.storiesOfImpl = function(name) {

4− return storybook.storiesOf(name, module);

3+exports.storiesOfImpl = function(stories) {

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

55}

66

77exports.addImpl = function(sb) {

stories/Storybook/React.purs+1−7

@@ -14,15 +14,9 @@ import React.Basic (JSX, ReactComponent, element, fragment)

1414

1515foreign import data Storybook ∷ Type

1616

17−foreign import data Module ∷ Type

18−

1917foreign import storiesOfImpl ∷ String -> Storybook

2018

21−foreign import addImpl ∷

22− Storybook ->

23− Effect JSX ->

24− String ->

25− Effect Storybook

19+foreign import addImpl ∷ Storybook -> Effect JSX -> String -> Effect Storybook

2620

2721foreign import addDecoratorImpl ∷

2822 Storybook ->

stories/ThemeStories.purs+1−1

@@ -11,7 +11,7 @@ import Theme (fromTheme)

1111import Theme.Default (darkTheme, lightTheme)

1212

1313stories ∷ Effect Storybook

14−stories =

14+stories = do

1515 storiesOf "Theme" do

1616 add "The swatches in the themes" mkExample

1717 [ { theme: darkTheme, themeName: "Dark theme" }

stories/TypographyStories.purs+1−1

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

99import Typography.Header (HeadingLevel(..), mkH)

1010

1111stories ∷ Effect Storybook

12−stories =

12+stories = do

1313 storiesOf "Typography" do

1414 addDecorator fullScreenDecorator

1515 add "All" mkH

webpack.dev.js−2

@@ -27,8 +27,6 @@ module.exports = merge(common, {

2727 stats: 'errors-only'

2828 },

2929

30− entry: './src/entrypoint.js',

31−

3230 plugins: [

3331 new webpack.LoaderOptionsPlugin({

3432 debug: true