Add ShapesReactHooks example (#241)

Author: pete-murphy

README.md

@@ -138,6 +138,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [RoutingHashLog](recipes/RoutingHashLog) | This recipe demonstrates hash-based routing with `purescript-routing`. No web framework is used. |
 |   | :heavy_check_mark: | [RoutingPushHalogenClassic](recipes/RoutingPushHalogenClassic) | This recipe shows how to use `purescript-routing` to do client-side push-state routing in a Halogen-based single-page application (SPA). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ShapesHalogenHooks/src/Main.purs)) | [ShapesHalogenHooks](recipes/ShapesHalogenHooks) | Demonstrates rendering of SVG shapes. |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ShapesReactHooks/src/Main.purs)) | [ShapesReactHooks](recipes/ShapesReactHooks) | Demonstrates rendering of SVG shapes. |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/SignalRenderJs/src/Main.purs)) | [SignalRenderJs](recipes/SignalRenderJs) | [Signal](https://pursuit.purescript.org/packages/purescript-signal/10.1.0) demo that responds to user input and elapsed time. |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/SignalSnakeJs/src/Main.purs)) | [SignalSnakeJs](recipes/SignalSnakeJs) | A snake game built using [Signal](https://pursuit.purescript.org/packages/purescript-signal/10.1.0). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/SignalTrisJs/src/Main.purs)) | [SignalTrisJs](recipes/SignalTrisJs) | A [tetromino](https://en.wikipedia.org/wiki/Tetromino) game built using [Signal](https://pursuit.purescript.org/packages/purescript-signal/10.1.0). |

recipes/ShapesReactHooks/.gitignore

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

recipes/ShapesReactHooks/README.md

@@ -0,0 +1,16 @@
+# ShapesReactHooks
+
+Demonstrates rendering of SVG shapes.
+
+A React port of the ["Shapes" Elm Example](https://elm-lang.org/examples/shapes).
+
+## Expected Behavior
+
+### Browser
+
+The browser will display a variety of colorful SVG shapes and text reading "Welcome to Shapes Club"
+
+## Dependencies used
+
+[react](https://www.npmjs.com/package/react)
+[react-dom](https://www.npmjs.com/package/react-dom)

recipes/ShapesReactHooks/spago.dhall

@@ -0,0 +1,11 @@
+{ name = "ShapesReactHooks"
+, dependencies =
+  [ "console"
+  , "effect"
+  , "psci-support"
+  , "react-basic-hooks"
+  , "react-basic-dom"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/ShapesReactHooks/src/**/*.purs" ]
+}

recipes/ShapesReactHooks/src/Main.purs

@@ -0,0 +1,78 @@
+module ShapesReactHooks.Main where
+
+import Prelude
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Effect.Exception (throw)
+import React.Basic.DOM (render, text)
+import React.Basic.DOM.SVG as R
+import React.Basic.Hooks (Component, component)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
+      shapesComponent <- mkShapesComponent
+      render (shapesComponent unit) (toElement b)
+
+mkShapesComponent :: Component Unit
+mkShapesComponent = do
+  component "ShapesComponent" \_ -> React.do
+    pure
+      $ R.svg
+          { viewBox: "0 0 400 400"
+          , width: "400"
+          , height: "400"
+          , children:
+              [ R.circle
+                  { cx: "50"
+                  , cy: "50"
+                  , r: "40"
+                  , fill: "red"
+                  , stroke: "black"
+                  , strokeWidth: "3"
+                  }
+              , R.rect
+                  { x: "100"
+                  , y: "10"
+                  , width: "40"
+                  , height: "40"
+                  , fill: "green"
+                  , stroke: "black"
+                  , strokeWidth: "2"
+                  }
+              , R.line
+                  { x1: "20"
+                  , y1: "200"
+                  , x2: "200"
+                  , y2: "20"
+                  , stroke: "blue"
+                  , strokeWidth: "10"
+                  , strokeLinecap: "round"
+                  }
+              , R.polyline
+                  { points: "200,40 240,40 240,80 280,80 280,120 320,120 320,160"
+                  , fill: "none"
+                  , stroke: "red"
+                  , strokeWidth: "4"
+                  , strokeDasharray: "20,2"
+                  }
+              , R.text
+                  { x: "130"
+                  , y: "130"
+                  , fill: "black"
+                  , textAnchor: "middle"
+                  , dominantBaseline: "central"
+                  , transform: "rotate(-45 130,130)"
+                  , children:
+                      [ text "Welcome to Shapes Club"
+                      ]
+                  }
+              ]
+          }

recipes/ShapesReactHooks/web/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ShapesReactHooks</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>

recipes/ShapesReactHooks/web/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/ShapesReactHooks.Main/index.js").main();