rowtype-yoga/psfp
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/psfp.git synced 2024-09-11 16:25:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Huge update

Browse Source
This commit is contained in:
Mark Eibes 2020-11-21 22:42:21 +01:00
parent 3e952f7c3d
commit ac71358971
67 changed files with 22446 additions and 12439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34102
blog/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
blog/package.json
View File

@ -31,7 +31,7 @@
"react-helmet": "^5.2.1",
"react-jss": "^10.1.1",
"react-monaco-editor": "^0.33.0",
"react-spring": "^9.0.0-beta.34",
"react-spring": "^8.0.0",
"react-syntax-highlighter": "^12.2.1"
},
"keywords": [
@ -48,7 +48,7 @@
"devDependencies": {
"css-loader": "^3.4.2",
"prettier": "^1.18.2",
"purescript": "^0.13.6",
"purescript": "^0.13.8",
"style-loader": "^1.1.3"
},
"repository": {

145
blog/packages.dhall
View File

@ -119,100 +119,75 @@ let additions =
let upstream =
https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200309/packages.dhall sha256:9221987b4e7ea99ccd0efbe056f7bebc872cd92e0058efe5baa181d73359e7b3
https://github.com/purescript/package-sets/releases/download/psc-0.13.8-20201021/packages.dhall sha256:55ebdbda1bd6ede4d5307fbc1ef19988c80271b4225d833c8d6fb9b6fb1aa6d8
let overrides =
{ react-basic-hooks =
upstream.react-basic-hooks
⫽ { repo =
"https://github.com/i-am-the-slime/purescript-react-basic-hooks.git"
, version = "e04b106ab2dfda3f9a1407420c434a908ff72b90"
}
, css =
upstream.css
⫽ { repo = "https://github.com/i-am-the-slime/purescript-css.git"
, version = "8ea0bab17c268d9c62a09892d7ba231dcbe6308b"
}
{ css =
upstream.css
// { repo = "https://github.com/i-am-the-slime/purescript-css.git"
, version = "8ea0bab17c268d9c62a09892d7ba231dcbe6308b"
}
}
let additions =
{ react-testing-library =
{ dependencies =
[ "aff-promise"
, "console"
, "debug"
, "effect"
, "foreign"
, "foreign-object"
, "psci-support"
, "react-basic-hooks"
, "remotedata"
, "run"
, "simple-json"
, "spec"
, "spec-discovery"
]
, repo =
"https://github.com/i-am-the-slime/purescript-react-testing-library.git"
, version = "13a63056506a3ce32572e326130be325931ba7c0"
}
{ dependencies =
[ "aff-promise"
, "console"
, "debug"
, "effect"
, "foreign"
, "foreign-object"
, "psci-support"
, "react-basic-hooks"
, "remotedata"
, "run"
, "simple-json"
, "spec"
, "spec-discovery"
]
, repo =
"https://github.com/i-am-the-slime/purescript-react-testing-library.git"
, version = "master"
}
, pseudo-random =
{ dependencies =
[ "prelude", "console", "effect", "lcg", "arrays", "st" ]
, repo = "https://github.com/opyapeus/purescript-pseudo-random.git"
, version = "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"
}
, oneof =
{ dependencies =
[ "assert"
, "console"
, "effect"
, "foreign"
, "foreign-object"
, "literal"
, "maybe"
, "newtype"
, "proxy"
, "psci-support"
, "tuples"
, "unsafe-coerce"
]
, repo = "https://github.com/jvliwanag/purescript-oneof.git"
, version = "0325fddf6ee8a181fac2128c9b542c2c01ddd361"
}
, literal =
{ dependencies =
[ "assert"
, "effect"
, "console"
, "integers"
, "numbers"
, "partial"
, "psci-support"
, "unsafe-coerce"
, "typelevel-prelude"
]
, repo = "https://github.com/jvliwanag/purescript-literal.git"
, version = "7b2ae20f77c67b7e419a92fdd0dc7a09b447b18e"
}
{ dependencies =
[ "prelude", "console", "effect", "lcg", "arrays", "st" ]
, repo = "https://github.com/opyapeus/purescript-pseudo-random.git"
, version = "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"
}
, justifill =
{ dependencies = [ "record", "typelevel-prelude" ]
, repo = "https://github.com/i-am-the-slime/purescript-justifill.git"
, version = "2de06260ae8e37355678198180bbdd06c91457e3"
}
{ dependencies = [ "record", "typelevel-prelude" ]
, repo = "https://github.com/i-am-the-slime/purescript-justifill.git"
, version = "master"
}
, matryoshka =
{ dependencies =
[ "prelude", "fixed-points", "free", "transformers", "profunctor" ]
, repo = "https://github.com/slamdata/purescript-matryoshka.git"
, version = "caaca2d836d52159ba7963333996286a00428394"
}
, interpolate =
{ dependencies = [ "prelude" ]
, repo =
"https://github.com/jordanmartinez/purescript-interpolate.git"
, version = "v2.0.1"
}
{ dependencies =
[ "prelude", "fixed-points", "free", "transformers", "profunctor" ]
, repo = "https://github.com/slamdata/purescript-matryoshka.git"
, version = "caaca2d836d52159ba7963333996286a00428394"
}
, yoga-components = ../components/spago.dhall as Location
, ry-blocks =
{ dependencies =
[ "console"
, "effect"
, "heterogeneous"
, "interpolate"
, "psci-support"
, "react-basic-dom"
, "react-basic-emotion"
, "react-basic-hooks"
, "react-testing-library"
, "record-extra"
, "routing"
, "routing-duplex"
, "spec-discovery"
, "untagged-union"
]
, repo = "https://github.com/rowtype-yoga/ry-blocks.git"
, version = "main"
}
}
in upstream ⫽ overrides ⫽ additions
in upstream // overrides // additions

29
blog/src/components/PSLayout.purs
View File

@ -16,6 +16,7 @@ import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
import Effect.Unsafe (unsafePerformEffect)
import JSS (jssClasses)
import Justifill (justifill)
import Milkis.Impl (FetchImpl)
@ -23,7 +24,7 @@ import React.Basic (JSX, ReactComponent, fragment)
import React.Basic.DOM (css, unsafeCreateDOMComponent)
import React.Basic.DOM as R
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, memo, reactChildrenToArray, useReducer, useState)
import React.Basic.Hooks (ReactChildren, element, memo, mkReducer, reactChildrenToArray, reactComponent, reactComponentWithChildren, useReducer, useState)
import React.Basic.Hooks as React
import Shared.Models.Body (CompileResult)
import Unsafe.Coerce (unsafeCoerce)
@ -36,7 +37,7 @@ import Yoga.Compiler.Api (apiCompiler)
import Yoga.Compiler.Types (Compiler)
import Yoga.Cover.Component as Cover
import Yoga.FillInTheGaps.Component as FillInTheGaps
import Yoga.FillInTheGaps.Logic (findResult, parseSegments, toCode)
import Yoga.FillInTheGaps.Logic (Segment, findResult, parseSegments, toCode)
import Yoga.Header.Component (mkHeader)
import Yoga.Helpers ((?||))
import Yoga.Imposter.Component as Imposter
@ -90,12 +91,14 @@ mkLayout fetchImpl = do
cover <- memo Cover.makeComponent
cluster <- memo Cluster.makeComponent
clickAway <- memo ClickAway.makeComponent
reducer <-
mkReducer case _, _ of
_, ShowModal props -> Just props
_, HideModal -> Nothing
mdxProviderComponent <- memo $ mkMdxProviderComponent (apiCompiler fetchImpl)
componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
reactComponentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
(maybeModalProps ∷ Maybe Modal.Props) /\ dispatch <-
useReducer Nothing case _, _ of
_, ShowModal props -> Just props
_, HideModal -> Nothing
useReducer Nothing reducer
pure
$ element themeProvider
{ theme: fromTheme darkTheme
@ -157,7 +160,7 @@ mkMdxProviderComponent compiler = do
, borderRadius: "3px"
}
}
componentWithChildren "MDXProviderComponent" \({ children, siteInfo, showModal, hideModal } ∷ MdxProviderProps) -> React.do
reactComponentWithChildren "MDXProviderComponent" \({ children, siteInfo, showModal, hideModal } ∷ MdxProviderProps) -> React.do
classes <- useStyles {}
visibleUntil /\ updateVisible <- useState 1
let
@ -236,7 +239,7 @@ mkMdxProviderComponent compiler = do
, height
, language
}
false, _, _ -> element (unsafeCreateDOMComponent "pre") props
false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props
}
pure
$ element mdxProvider
@ -244,11 +247,17 @@ mkMdxProviderComponent compiler = do
, components: mdxComponents
}
mkQuiz ∷ _ -> Effect (ReactComponent _)
type QuizProps =
{ initialSegments ∷ Array (Array Segment)
, onFailure ∷ String -> Array JSX -> Effect Unit
, onSuccess ∷ Effect Unit
}
mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)
mkQuiz compiler = do
fillInTheGaps <- FillInTheGaps.makeComponent
box <- Box.makeComponent
component "Quiz" \({ initialSegments, onFailure, onSuccess } ∷ { initialSegments ∷ _, onFailure ∷ _, onSuccess ∷ _ }) -> React.do
reactComponent "Quiz" \({ initialSegments, onFailure, onSuccess } ∷ QuizProps) -> React.do
segments /\ updateSegments <- useState initialSegments
solvedWith /\ updateSolvedWith <- useState Nothing
pure

5
components/.vscode/settings.json vendored
View File

@ -1,9 +1,8 @@
{
"editor.formatOnSave": true,
"purescript.addNpmPath": true,
"purescript.buildCommand": "npx spago build --purs-args --json-errors",
"purescript.addNpmPath": false,
"search.exclude": {
"**/.history": true
},
"purescript.addSpagoSources": true
}
}

145
components/packages.dhall
View File

@ -119,100 +119,75 @@ let additions =
let upstream =
https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200309/packages.dhall sha256:9221987b4e7ea99ccd0efbe056f7bebc872cd92e0058efe5baa181d73359e7b3
https://github.com/purescript/package-sets/releases/download/psc-0.13.8-20201021/packages.dhall sha256:55ebdbda1bd6ede4d5307fbc1ef19988c80271b4225d833c8d6fb9b6fb1aa6d8
let overrides =
{ react-basic-hooks =
upstream.react-basic-hooks
⫽ { repo =
"https://github.com/i-am-the-slime/purescript-react-basic-hooks.git"
, version = "e04b106ab2dfda3f9a1407420c434a908ff72b90"
}
, css =
upstream.css
⫽ { repo = "https://github.com/i-am-the-slime/purescript-css.git"
, version = "8ea0bab17c268d9c62a09892d7ba231dcbe6308b"
}
{ css =
upstream.css
// { repo = "https://github.com/i-am-the-slime/purescript-css.git"
, version = "8ea0bab17c268d9c62a09892d7ba231dcbe6308b"
}
}
let additions =
{ react-testing-library =
{ dependencies =
[ "aff-promise"
, "console"
, "debug"
, "effect"
, "foreign"
, "foreign-object"
, "psci-support"
, "react-basic-hooks"
, "remotedata"
, "run"
, "simple-json"
, "spec"
, "spec-discovery"
]
, repo =
"https://github.com/i-am-the-slime/purescript-react-testing-library.git"
, version = "13a63056506a3ce32572e326130be325931ba7c0"
}
{ dependencies =
[ "aff-promise"
, "console"
, "debug"
, "effect"
, "foreign"
, "foreign-object"
, "psci-support"
, "react-basic-hooks"
, "remotedata"
, "run"
, "simple-json"
, "spec"
, "spec-discovery"
]
, repo =
"https://github.com/i-am-the-slime/purescript-react-testing-library.git"
, version = "master"
}
, pseudo-random =
{ dependencies =
[ "prelude", "console", "effect", "lcg", "arrays", "st" ]
, repo = "https://github.com/opyapeus/purescript-pseudo-random.git"
, version = "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"
}
, oneof =
{ dependencies =
[ "assert"
, "console"
, "effect"
, "foreign"
, "foreign-object"
, "literal"
, "maybe"
, "newtype"
, "proxy"
, "psci-support"
, "tuples"
, "unsafe-coerce"
]
, repo = "https://github.com/jvliwanag/purescript-oneof.git"
, version = "0325fddf6ee8a181fac2128c9b542c2c01ddd361"
}
, literal =
{ dependencies =
[ "assert"
, "effect"
, "console"
, "integers"
, "numbers"
, "partial"
, "psci-support"
, "unsafe-coerce"
, "typelevel-prelude"
]
, repo = "https://github.com/jvliwanag/purescript-literal.git"
, version = "7b2ae20f77c67b7e419a92fdd0dc7a09b447b18e"
}
{ dependencies =
[ "prelude", "console", "effect", "lcg", "arrays", "st" ]
, repo = "https://github.com/opyapeus/purescript-pseudo-random.git"
, version = "7715e8a2c096c480a093a5e0a6df1ece4df5ed2a"
}
, justifill =
{ dependencies = [ "record", "typelevel-prelude" ]
, repo = "https://github.com/i-am-the-slime/purescript-justifill.git"
, version = "2de06260ae8e37355678198180bbdd06c91457e3"
}
{ dependencies = [ "record", "typelevel-prelude" ]
, repo = "https://github.com/i-am-the-slime/purescript-justifill.git"
, version = "master"
}
, matryoshka =
{ dependencies =
[ "prelude", "fixed-points", "free", "transformers", "profunctor" ]
, repo = "https://github.com/slamdata/purescript-matryoshka.git"
, version = "caaca2d836d52159ba7963333996286a00428394"
}
, interpolate =
{ dependencies = [ "prelude" ]
, repo =
"https://github.com/jordanmartinez/purescript-interpolate.git"
, version = "v2.0.1"
}
{ dependencies =
[ "prelude", "fixed-points", "free", "transformers", "profunctor" ]
, repo = "https://github.com/slamdata/purescript-matryoshka.git"
, version = "caaca2d836d52159ba7963333996286a00428394"
}
, yoga-components = ../components/spago.dhall as Location
, ry-blocks =
{ dependencies =
[ "console"
, "effect"
, "heterogeneous"
, "interpolate"
, "psci-support"
, "react-basic-dom"
, "react-basic-emotion"
, "react-basic-hooks"
, "react-testing-library"
, "record-extra"
, "routing"
, "routing-duplex"
, "spec-discovery"
, "untagged-union"
]
, repo = "https://github.com/rowtype-yoga/ry-blocks.git"
, version = "main"
}
}
in upstream ⫽ overrides ⫽ additions
in upstream // overrides // additions

4
components/spago.dhall
View File

@ -12,17 +12,19 @@ You can edit this file as you like.
, "justifill"
, "matryoshka"
, "milkis"
, "oneof"
, "psci-support"
, "pseudo-random"
, "react-basic"
, "react-basic-dom"
, "react-basic-hooks"
, "react-testing-library"
, "record-extra"
, "refs"
, "ry-blocks"
, "simple-json"
, "spec-discovery"
, "string-parsers"
, "untagged-union"
, "web-html"
]
, packages = ./packages.dhall

14
components/src/React/Basic/Hooks/Spring/Stories.purs
View File

@ -1,15 +1,13 @@
module React.Basic.Hooks.Spring.Stories where
import Prelude hiding (add)
import CSS (backgroundColor, height, position, relative, vh, vw, width)
import Data.Generic.Rep (class Generic)
import Data.Generic.Rep.Eq (genericEq)
import Data.Int (pow)
import Data.Maybe (Maybe(..), isJust)
import Data.Monoid (guard)
import Data.Time.Duration (Seconds(..), convertDuration)
import Data.Tuple.Nested ((/\))
import Debug.Trace (spy)
import Effect (Effect)
import Effect.Aff (delay)
import Effect.Class (liftEffect)
@ -19,7 +17,7 @@ import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Events (handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (ReactComponent, component, useEffect, useState)
import React.Basic.Hooks (ReactComponent, reactComponent, useEffect, useState)
import React.Basic.Hooks as React
import React.Basic.Hooks.Aff (useAff)
import React.Basic.Hooks.Spring (animatedDiv, useSpring, useTransition)
@ -55,7 +53,7 @@ mkAnimated = do
centre <- Centre.makeComponent
box <- Box.makeComponent
cluster <- Cluster.makeComponent
component "Animated Example" \{} -> React.do
reactComponent "Animated Example" \{} -> React.do
toggled /\ modifyToggled <- useState false
{ style, set, stop } <- useSpring $ const { opacity: 1.0, transform: "scale3d(1.0,1.0,1.0)" }
useEffect toggled do
@ -106,7 +104,7 @@ mkTransition = do
backgroundColor t.green
position relative
}
component "Transition Example" \{} -> React.do
reactComponent "Transition Example" \{} -> React.do
toggled /\ modifyToggled <- useState false
classes <- useStyles {}
transitionFn <-
@ -167,7 +165,7 @@ mkCountdown = do
width (50.0 # vw)
height (50.0 # vh)
}
component "Transition Countdown Example" \{} -> React.do
reactComponent "Transition Countdown Example" \{} -> React.do
countdown /\ modifyCountdown <- useState CountdownNotStarted
classes <- useStyles {}
transitionFn <-
@ -230,7 +228,7 @@ mkDragAnimated = do
$ jssClasses \t ->
{ card: { width: "200px", height: "200px", marginTop: "30px" }
}
component "Draggable Example" \{} -> React.do
reactComponent "Draggable Example" \{} -> React.do
{ style, set } <- useSpring $ const { x: 0.0, y: 0.0, config: { mass: 1, tension: 210, friction: 20 } }
classes <- useStyles {}
bindDragProps <-

4
components/src/Storybook/Decorator/FullScreen.purs
View File

@ -10,7 +10,7 @@ import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.DOM.Events (targetValue)
import React.Basic.Events (handler)
import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))
import React.Basic.Hooks (ReactComponent, reactComponent, element, useEffect, useState, (/\))
import React.Basic.Hooks as React
import Web.HTML (window)
import Web.HTML.Window (localStorage)
@ -76,7 +76,7 @@ mkThemeSwitcher = do
}
}
storage <- window >>= localStorage
component "ThemeSwitcher" \{ defaultTheme, themes, child } -> React.do
reactComponent "ThemeSwitcher" \{ defaultTheme, themes, child } -> React.do
{ theme, name } /\ modTheme <- useState defaultTheme
useEffect unit do
maybeSaved <- getItem "theme" storage

5
components/src/Yoga/Box/Component.purs
View File

@ -1,12 +1,13 @@
module Yoga.Box.Component where
import Prelude
import Data.Foldable (fold, intercalate)
import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Unsafe.Coerce (unsafeCoerce)
@ -30,7 +31,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS styles
component "Box" \props@{ kids, className, padding } -> React.do
reactComponent "Box" \props@{ kids, className, padding } -> React.do
classes <- useStyles (pick props)
pure
$ R.div

5
components/src/Yoga/Box/Stories.purs
View File

@ -1,14 +1,15 @@
module Yoga.Box.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Box.Component as Box
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Box" do
addDecorator fullScreenDecorator

4
components/src/Yoga/Button/Component.purs
View File

@ -15,7 +15,7 @@ import React.Basic (JSX)
import React.Basic.DOM (Props_button)
import React.Basic.DOM as R
import React.Basic.Events (EventHandler)
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record as Record
import Yoga.Helpers ((?||))
@ -224,7 +224,7 @@ mkButtonWithProps ∷
mkButtonWithProps = do
useBaseStyles <- makeStylesJSS styles
useHighlightStyles <- makeStylesJSS highlightStyles
component "Button" \(props@{ kids, onClick } ∷ Props extra) -> React.do
reactComponent "Button" \(props@{ kids, onClick } ∷ Props extra) -> React.do
classes <- useBaseStyles {}
{ highlightedButton } <- useHighlightStyles {}
let

9
components/src/Yoga/Button/Stories.purs
View File

@ -1,6 +1,7 @@
module Yoga.Button.Stories where
import Prelude hiding (add)
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Console (log)
@ -8,14 +9,14 @@ import Justifill (justifill)
import React.Basic.DOM as R
import React.Basic.Events (handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (component)
import React.Basic.Hooks (reactComponent)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Box.Component as Box
import Yoga.Button.Component (ButtonType(..))
import Yoga.Button.Component as Button
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories =
storiesOf "Button" do
addDecorator fullScreenDecorator
@ -41,7 +42,7 @@ stories =
mkExample = do
box <- Box.makeComponent
button <- Button.mkButton
component "ExampleButton" \{ text, buttonType, onClick } -> React.do
reactComponent "ExampleButton" \{ text, buttonType, onClick } -> React.do
pure
$ jsx button
{ onClick

6
components/src/Yoga/Card/Component.purs
View File

@ -7,17 +7,15 @@ import Data.Foldable (fold)
import Data.Interpolate (i)
import Data.Maybe (Maybe)
import Data.Nullable (Nullable)
import Debug.Trace (spy)
import Effect (Effect)
import JSS (JSSClasses, JSSElem, jssClasses)
import React.Basic (JSX)
import React.Basic.DOM (CSS)
import React.Basic.DOM as R
import React.Basic.Helpers (orUndefined)
import React.Basic.Hooks (ReactComponent, Ref, component)
import React.Basic.Hooks (ReactComponent, Ref, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Unsafe.Coerce (unsafeCoerce)
import Web.DOM (Node)
import Yoga.Box.Component as Box
import Yoga.Helpers (ifJustTrue)
@ -67,7 +65,7 @@ mkCard ∷ Effect (ReactComponent Props)
mkCard = do
useStyles <- makeStylesJSS styles
box <- Box.makeComponent
component "Card" \(props@{ kids, style, className } ∷ Props) -> React.do
reactComponent "Card" \(props@{ kids, style, className } ∷ Props) -> React.do
classes <- useStyles (pick props)
pure
$ R.div

9
components/src/Yoga/Card/Stories.purs
View File

@ -1,16 +1,17 @@
module Yoga.Card.Stories where
import Prelude hiding (add)
import Effect (Effect)
import React.Basic.DOM as R
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (component)
import React.Basic.Hooks (reactComponent)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Box.Component as Box
import Yoga.Card.Component (mkCard)
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Card" do
addDecorator fullScreenDecorator
@ -21,7 +22,7 @@ stories = do
mkExample = do
box <- Box.makeComponent
card <- mkCard
component "ExampleCard" \{} -> React.do
reactComponent "ExampleCard" \{} -> React.do
pure
$ jsx box {}
$ pure

4
components/src/Yoga/Centre/Component.purs
View File

@ -6,7 +6,7 @@ import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Centre.Styles as Style
@ -27,7 +27,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS Style.styles
component "Centre" \props@{ kids, className } -> React.do
reactComponent "Centre" \props@{ kids, className } -> React.do
classes <- useStyles (pick props)
pure
$ R.div

5
components/src/Yoga/Centre/Stories.purs
View File

@ -1,14 +1,15 @@
module Yoga.Centre.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Centre.Component as Centre
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Centre" do
addDecorator fullScreenDecorator

4
components/src/Yoga/ClickAway/Component.purs
View File

@ -8,7 +8,7 @@ import React.Basic.DOM (CSS)
import React.Basic.Events (handler_)
import React.Basic.Extra.Hooks.UseKeyUp (KeyCode(..), useKeyUp)
import React.Basic.Helpers (jsx, orUndefined)
import React.Basic.Hooks (ReactComponent, component, useState)
import React.Basic.Hooks (ReactComponent, reactComponent, useState)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.ClickAway.Styles as Style
@ -30,7 +30,7 @@ makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
imposter <- Imposter.makeComponent
useStyles <- makeStylesJSS Style.styles
component "ClickAway" \props -> React.do
reactComponent "ClickAway" \props -> React.do
cs <- useStyles (pick props)
useKeyUp Escape $ ifJustTrue props.allowEscape props.onClick
animationDone /\ modifyAnimationDone <- useState false

9
components/src/Yoga/ClickAway/Stories.purs
View File

@ -1,6 +1,7 @@
module Yoga.ClickAway.Stories where
import Prelude hiding (add)
import Data.Maybe (Maybe(..))
import Data.Monoid (guard)
import Data.Tuple.Nested ((/\))
@ -9,15 +10,15 @@ import Justifill (justifill)
import React.Basic.DOM as R
import React.Basic.Events (handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (ReactComponent, component, element, fragment, useState)
import React.Basic.Hooks (ReactComponent, reactComponent, element, fragment, useState)
import React.Basic.Hooks as React
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Button.Component (mkButton)
import Yoga.Centre.Component as Centre
import Yoga.ClickAway.Component as ClickAway
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "ClickAway" do
addDecorator fullScreenDecorator
@ -36,7 +37,7 @@ mkExample = do
clickaway <- ClickAway.makeComponent
centre <- Centre.makeComponent
button <- mkButton
component "ClickAwayStory" \{} -> React.do
reactComponent "ClickAwayStory" \{} -> React.do
state /\ modState <- useState { open: true }
pure
$ fragment

10
components/src/Yoga/CloseIcon/Component.purs
View File

@ -1,22 +1,20 @@
module Yoga.CloseIcon.Component where
import Prelude
import Data.Foldable (for_, traverse_)
import Data.Int (round, toNumber)
import Data.Interpolate (i)
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Foreign.Object as Obj
import Math (pi, pow, sqrt)
import React.Basic.DOM (CSS, css)
import React.Basic.DOM (CSS)
import React.Basic.DOM.SVG as R
import React.Basic.DOM.SVG as SVG
import React.Basic.Events (handler_)
import React.Basic.Helpers (orUndefined)
import React.Basic.Hooks (ReactComponent, component, useEffect, useState)
import React.Basic.Hooks (ReactComponent, reactComponent, useState)
import React.Basic.Hooks as React
import React.Basic.Hooks.Spring (animatedPath, useSpring)
import Record.Extra (pick)
import Yoga.Box.Component as Box
import Yoga.CloseIcon.Styles as Style
@ -35,7 +33,7 @@ makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
box <- Box.makeComponent
useStyles <- makeStylesJSS Style.styles
component "CloseIcon" \(props ∷ Props) -> React.do
reactComponent "CloseIcon" \(props ∷ Props) -> React.do
cs <- useStyles (pick props)
animationDone /\ modifyAnimationDone <- useState false
pure

3
components/src/Yoga/CloseIcon/Stories.purs
View File

@ -1,10 +1,9 @@
module Yoga.CloseIcon.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (NodeModule, Storybook, Stories, add, addDecorator, storiesOf)
import Storybook.React (Stories, add, addDecorator, storiesOf)
import Web.HTML (window)
import Web.HTML.Window (alert)
import Yoga.CloseIcon.Component as CloseIcon

5
components/src/Yoga/Cluster/Component.purs
View File

@ -1,12 +1,13 @@
module Yoga.Cluster.Component where
import Prelude
import Data.Array (foldMap)
import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Cluster.Styles as Style
@ -27,7 +28,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS Style.styles
component "Cluster" \props@{ kids, className } -> React.do
reactComponent "Cluster" \props@{ kids, className } -> React.do
classes <- useStyles (pick props)
pure
$ R.div

5
components/src/Yoga/Cluster/Stories.purs
View File

@ -1,16 +1,17 @@
module Yoga.Cluster.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic (JSX)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Cluster.Component as Cluster
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Cluster" do
addDecorator fullScreenDecorator

4
components/src/Yoga/CompileEditor/Component.purs
View File

@ -16,7 +16,7 @@ import React.Basic (ReactComponent)
import React.Basic.DOM as R
import React.Basic.Events (handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (component, element, useState)
import React.Basic.Hooks (reactComponent, element, useState)
import React.Basic.Hooks as React
import Yoga.Button.Component (ButtonType(..), mkButton)
import Yoga.Card.Component (mkCard)
@ -59,7 +59,7 @@ mkCompileEditor { compileAndRun } = do
, compileError: { color: theme.red, opacity: 1, transition: "opacity 2.0s ease" }
, runOutput: { color: theme.green, opacity: 1, transition: "opacity 2.0s ease" }
}
component "CompileEditor" \{ initialCode, height, language } -> React.do
reactComponent "CompileEditor" \{ initialCode, height, language } -> React.do
maybeEditor /\ modifyEditor <- useState Nothing
classes <- useStyles {}
let

5
components/src/Yoga/CompileEditor/Stories.purs
View File

@ -1,10 +1,11 @@
module Yoga.CompileEditor.Stories where
import Prelude hiding (add)
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.CompileEditor.Component (mkCompileEditor)
import Yoga.Compiler.Types (Compiler)
@ -13,7 +14,7 @@ compiler = { compileAndRun }
where
compileAndRun { code } = pure (pure { code: Nothing, stderr: "", stdout: "" })
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Editor" do
addDecorator fullScreenDecorator

4
components/src/Yoga/Cover/Component.purs
View File

@ -7,7 +7,7 @@ import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Yoga.Cover.Styles as Cover
import Yoga.Theme.Styles (makeStylesJSS)
@ -29,7 +29,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS Cover.styles
component "Cover" \{ header, footer, kids, className } -> React.do
reactComponent "Cover" \{ header, footer, kids, className } -> React.do
classes <- useStyles {}
pure
$ R.div

5
components/src/Yoga/Cover/Stories.purs
View File

@ -1,15 +1,16 @@
module Yoga.Cover.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic (JSX)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Cover.Component as Cover
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Cover" do
addDecorator fullScreenDecorator

4
components/src/Yoga/FillInTheGaps/Component.purs
View File

@ -16,7 +16,7 @@ import React.Basic.DOM as R
import React.Basic.DOM.Events (preventDefault)
import React.Basic.Events (handler, handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (Ref, component)
import React.Basic.Hooks (Ref, reactComponent)
import React.Basic.Hooks as React
import React.Basic.SyntaxHighlighter.Component (HighlighterTheme, syntaxHighlighterImpl)
import Record.Extra (pick)
@ -78,7 +78,7 @@ makeComponent = do
box <- Box.makeComponent
cluster <- Cluster.makeComponent
useStyles <- makeStylesJSS styles
component "FillInTheGaps" \(props@{ updateSegments, segments, incantate, solvedWith } ∷ Props) -> React.do
reactComponent "FillInTheGaps" \(props@{ updateSegments, segments, incantate, solvedWith } ∷ Props) -> React.do
{ codeContainer, solutionContainer } <- useStyles (pick props)
theme ∷ CSSTheme <- useTheme
ref <- useFocus

13
components/src/Yoga/FillInTheGaps/Stories.purs
View File

@ -1,26 +1,26 @@
module Yoga.FillInTheGaps.Stories where
import Prelude hiding (add)
import Control.Monad.Trans.Class (lift)
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Ref as Ref
import Justifill (justifill)
import React.Basic (ReactComponent, fragment)
import React.Basic.Hooks (element, useState, component)
import React.Basic (ReactComponent)
import React.Basic.Hooks (element, useState, reactComponent)
import React.Basic.Hooks as React
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.FillInTheGaps.Component as FillInTheGaps
import Yoga.FillInTheGaps.Logic (parseSegments)
import Yoga.Grimoire.Component as Grimoire
import Yoga.Grimoire.Spell.Component as Spell
import Yoga.Helpers ((?||))
import Yoga.Spell.Types (Spell)
import Yoga.WithSidebar.Component as WithSidebar
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "FillInTheGaps" do
addDecorator fullScreenDecorator
@ -33,7 +33,7 @@ makeWrapper = do
gaps <- FillInTheGaps.makeComponent
withSidebar <- WithSidebar.makeComponent
spell <- Spell.makeComponent
component "GapsWrapper" \_ -> React.do
reactComponent "GapsWrapper" \_ -> React.do
segments /\ updateSegments <- useState $ parseSegments codeWithHoles ?|| []
pure
$ element withSidebar
@ -61,6 +61,7 @@ spells =
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }
]
codeWithHoles :: String
codeWithHoles =
"""
--result Hello World

4
components/src/Yoga/FillInTheGapsDraggable/Component.purs
View File

@ -16,7 +16,7 @@ import React.Basic.DOM as R
import React.Basic.DOM.Events (preventDefault)
import React.Basic.Events (handler, handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (Ref, component)
import React.Basic.Hooks (Ref, reactComponent)
import React.Basic.Hooks as React
import React.Basic.SyntaxHighlighter.Component (HighlighterTheme, syntaxHighlighterImpl)
import Record.Extra (pick)
@ -78,7 +78,7 @@ makeComponent = do
box <- Box.makeComponent
cluster <- Cluster.makeComponent
useStyles <- makeStylesJSS styles
component "FillInTheGapsDraggable" \(props@{ updateSegments, segments, incantate, solvedWith } ∷ Props) -> React.do
reactComponent "FillInTheGapsDraggable" \(props@{ updateSegments, segments, incantate, solvedWith } ∷ Props) -> React.do
{ codeContainer, solutionContainer } <- useStyles (pick props)
theme ∷ CSSTheme <- useTheme
ref <- useFocus

13
components/src/Yoga/FillInTheGapsDraggable/Stories.purs
View File

@ -1,26 +1,26 @@
module Yoga.FillInTheGapsDraggable.Stories where
import Prelude hiding (add)
import Control.Monad.Trans.Class (lift)
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Ref as Ref
import Justifill (justifill)
import React.Basic (ReactComponent, fragment)
import React.Basic.Hooks (element, useState, component)
import React.Basic (ReactComponent)
import React.Basic.Hooks (element, useState, reactComponent)
import React.Basic.Hooks as React
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.FillInTheGapsDraggable.Component as FillInTheGapsDraggable
import Yoga.FillInTheGapsDraggable.Logic (parseSegments)
import Yoga.Grimoire.Component as Grimoire
import Yoga.Grimoire.Spell.Component as Spell
import Yoga.Helpers ((?||))
import Yoga.Spell.Types (Spell)
import Yoga.WithSidebar.Component as WithSidebar
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "FillInTheGapsDraggable" do
addDecorator fullScreenDecorator
@ -33,7 +33,7 @@ makeWrapper = do
gaps <- FillInTheGapsDraggable.makeComponent
withSidebar <- WithSidebar.makeComponent
spell <- Spell.makeComponent
component "GapsWrapper" \_ -> React.do
reactComponent "GapsWrapper" \_ -> React.do
segments /\ updateSegments <- useState $ parseSegments codeWithHoles ?|| []
pure
$ element withSidebar
@ -61,6 +61,7 @@ spells =
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }
]
codeWithHoles :: String
codeWithHoles =
"""
--result Hello World

5
components/src/Yoga/Grid/Component.purs
View File

@ -1,12 +1,11 @@
module Yoga.Grid.Component where
import Prelude
import Data.Foldable (fold, intercalate)
import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX, ReactComponent)
import React.Basic.DOM as R
import React.Basic.Hooks (component)
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Grid.Styles (styles)
@ -23,7 +22,7 @@ type Props
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS styles
component "Grid" \(props@{ kids, className } ∷ Props) -> React.do
reactComponent "Grid" \(props@{ kids, className } ∷ Props) -> React.do
{ grid } <- useStyles (pick props)
theme ∷ CSSTheme <- useTheme
pure

1
components/src/Yoga/Grid/Spec.purs
View File

@ -2,7 +2,6 @@ module Yoga.Grid.Spec where
import Prelude
import Justifill (justifill)
import React.Basic.DOM as R
import React.Basic.Hooks (JSX)
import React.TestingLibrary (describeComponent, renderComponent)
import Test.Spec (Spec, it)

10
components/src/Yoga/Grid/Stories.purs
View File

@ -1,21 +1,22 @@
module Yoga.Grid.Stories where
import Prelude hiding (add)
import Data.Array ((..))
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (component, element)
import React.Basic.Hooks (reactComponent, element)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Box.Component as Box
import Yoga.Card.Component (mkCard)
import Yoga.Centre.Component as Centre
import Yoga.Grid.Component as Grid
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Grid" do
addDecorator fullScreenDecorator
@ -42,7 +43,7 @@ stories = do
grid <- Grid.makeComponent
centre <- Centre.makeComponent
card <- mkCard
component "ExampleGrid" \(props ∷ Grid.Props) -> React.do
reactComponent "ExampleGrid" \(props ∷ Grid.Props) -> React.do
let
kids = props.kids <#> \kid -> jsx card {} [ kid ]
pure
@ -54,4 +55,5 @@ stories = do
]
}
src :: forall a. Show a => a -> String
src seed = "https://picsum.photos/200?random=" <> show seed

66
components/src/Yoga/Grimoire/Component.purs
View File

@ -1,6 +1,7 @@
module Yoga.Grimoire.Component where
import Prelude
import Data.Array (length, mapWithIndex, zip, (!!), (..))
import Data.Array as Array
import Data.FoldableWithIndex (findWithIndex)
@ -10,10 +11,8 @@ import Data.Lens.Index (ix)
import Data.Maybe (Maybe(..), fromMaybe, fromMaybe')
import Data.Nullable (Nullable)
import Data.Nullable as Nullable
import Data.Symbol (SProxy(..))
import Data.Traversable (for, sequence)
import Data.Tuple.Nested ((/\), type (/\))
import Debug.Trace (spy)
import Effect (Effect)
import Effect.Class.Console (log)
import Justifill (justifill)
@ -22,12 +21,11 @@ import React.Basic (ReactComponent)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, useState, writeRef)
import React.Basic.Hooks (Ref, element, reactComponent, readRef, useLayoutEffect, useRef, useState, writeRef)
import React.Basic.Hooks as React
import React.Basic.Hooks.Spring (animatedDiv, useSprings)
import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
import Record (disjointUnion)
import Record as Record
import Record.Extra (pick)
import Unsafe.Coerce (unsafeCoerce)
import Web.DOM (Node)
@ -45,6 +43,19 @@ type Props
= { spells ∷ Array Spell
}
getRects :: Ref (Array (Nullable Node))
-> Effect
(Array
(Maybe
{ bottom :: Number
, height :: Number
, left :: Number
, right :: Number
, top :: Number
, width :: Number
}
)
)
getRects ref = do
refNodes <- readRef ref
for
@ -73,6 +84,7 @@ translate (x /\ y) { top, right, bottom, left, width, height } =
, height
}
orDie :: forall t23. String -> Maybe t23 -> t23
orDie msg =
fromMaybe'
(\_ -> unsafeCrashWith msg)
@ -90,12 +102,23 @@ swap i j arr = swapped # orDie "Couldn't swap"
valueJ <- arr !! j
pure $ (set (ix i) valueJ <<< set (ix j) valueI) arr
regularScale :: String
regularScale = "scale3d(1.0, 1.0, 1.0)"
scaledUp :: String
scaledUp = "scale3d(1.1, 1.1, 1.1)"
scaledCompletely :: String
scaledCompletely = "scale3d(2.0, 2.0, 2.0)"
defaultSprings :: forall t84.
{ immediate :: t84 -> Boolean
, shadow :: Int
, transform :: String
, x :: Number
, y :: Number
, zIndex :: Int
}
defaultSprings =
{ x: 0.0
, y: 0.0
@ -105,6 +128,39 @@ defaultSprings =
, transform: "scale3d(1.0,1.0,1.0)"
}
springsteen :: forall t111 t117 t123 t124 t125 t172.
Discard t124 => { set :: (Int
-> { immediate :: String -> Boolean
, shadow :: Int
, transform :: String
, x :: Number
, y :: Number
, zIndex :: Int
}
)
-> Effect t125
| t172
}
-> Effect t124
-> t111
-> Ref
(Array
{ bottom :: Number
, height :: Number
, left :: Number
, right :: Number
, top :: Number
, width :: Number
}
)
-> Ref (Array Int)
-> { arg :: Int
, down :: Boolean
, movement :: Number /\ Number
, tap :: t123
| t117
}
-> Effect t125
springsteen springs init windowSize rectsRef positionsRef { arg, movement: mx /\ my, down, tap } = do
init
rects <- readRef rectsRef
@ -157,7 +213,7 @@ makeComponent = do
grid <- Grid.makeComponent
spellComponent <- GrimoireSpell.makeComponent
useStyles <- makeStylesJSS styles
component "Grimoire" \(props ∷ Props) -> React.do
reactComponent "Grimoire" \(props ∷ Props) -> React.do
classes <- useStyles (pick props)
springs <- useSprings (Array.length props.spells) (const defaultSprings)
nodeRefs ∷ Ref (Array (Nullable (_))) <- useRef (props.spells $> Nullable.null)

4
components/src/Yoga/Grimoire/Spell/Component.purs
View File

@ -7,7 +7,7 @@ import Effect (Effect)
import React.Basic (ReactComponent)
import React.Basic.DOM as R
import React.Basic.Helpers (classSpan, jsx)
import React.Basic.Hooks (component)
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Box.Component as Box
@ -36,7 +36,7 @@ makeComponent = do
card <- mkCard
cover <- Cover.makeComponent
useStyles <- makeStylesJSS styles
component "Spell" \(props@{ spell } ∷ Props) -> React.do
reactComponent "Spell" \(props@{ spell } ∷ Props) -> React.do
style <- useStyles (pick props)
theme ∷ CSSTheme <- useTheme
let

6
components/src/Yoga/Grimoire/Spell/Stories.purs
View File

@ -1,14 +1,14 @@
module Yoga.Grimoire.Spell.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Grimoire.Spell.Component as Spell
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Spell" do
addDecorator fullScreenDecorator

11
components/src/Yoga/Grimoire/Stories.purs
View File

@ -1,14 +1,14 @@
module Yoga.Grimoire.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Grimoire.Component as Grimoire
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Grimoire" do
addDecorator fullScreenDecorator
@ -17,6 +17,11 @@ stories = do
{ spells }
]
spells :: Array
{ description :: String
, name :: String
, signature :: String
}
spells =
[ { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }
, { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

4
components/src/Yoga/Header/Component.purs
View File

@ -7,7 +7,7 @@ import Effect (Effect)
import JSS (jssClasses)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component, element)
import React.Basic.Hooks (ReactComponent, reactComponent, element)
import React.Basic.Hooks as React
import Yoga.SVG.Icon (trianglelogoIcon)
import Yoga.Theme.Styles (makeStylesJSS)
@ -43,7 +43,7 @@ mkHeader = do
, marginBottom: "5px"
}
}
component "Header" \{ kids, className } -> React.do
reactComponent "Header" \{ kids, className } -> React.do
classNames <- useStyles {}
pure
$ R.div

9
components/src/Yoga/Header/Stories.purs
View File

@ -1,14 +1,15 @@
module Yoga.Header.Stories where
import Prelude hiding (add)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Effect (Effect)
import Yoga.Header.Component (mkHeader)
import React.Basic.DOM as R
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Header.Component (mkHeader)
-- What's about
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Header" do
addDecorator fullScreenDecorator

4
components/src/Yoga/Imposter/Component.purs
View File

@ -8,7 +8,7 @@ import React.Basic (JSX)
import React.Basic.DOM (CSS)
import React.Basic.Events (EventHandler, handler_)
import React.Basic.Helpers (orUndefined)
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import React.Basic.Hooks.Spring (animatedDiv)
import Record.Extra (pick)
@ -33,7 +33,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS Style.styles
component "Imposter" \props@{ kids, className } -> React.do
reactComponent "Imposter" \props@{ kids, className } -> React.do
classes <- useStyles (pick props)
pure
$ animatedDiv

9
components/src/Yoga/Imposter/Stories.purs
View File

@ -1,6 +1,7 @@
module Yoga.Imposter.Stories where
import Prelude hiding (add)
import CSS (backgroundColor, backgroundImage, height, hotpink, peachpuff, position, relative, rgba, vGradient, vh, vw, width)
import Data.Maybe (Maybe(..))
import Data.Monoid (power)
@ -8,15 +9,15 @@ import Effect (Effect)
import JSS (jssClasses)
import Justifill (justifill)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component, element)
import React.Basic.Hooks (ReactComponent, element, reactComponent)
import React.Basic.Hooks as React
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Helpers (ifJustTrue)
import Yoga.Imposter.Component as Imposter
import Yoga.Theme.Styles (makeStylesJSS)
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Imposter" do
addDecorator fullScreenDecorator
@ -87,7 +88,7 @@ mkExample = do
backgroundImage $ vGradient hotpink peachpuff
}
imposter <- Imposter.makeComponent
component "ImposterExample" \{ imposterProps, higherThanView } -> React.do
reactComponent "ImposterExample" \{ imposterProps, higherThanView } -> React.do
pure $ R.div {}
-- element_ props
classes <- useStyles {}

7
components/src/Yoga/InlineCode/Component.purs
View File

@ -5,7 +5,6 @@ import Data.Foldable (fold, intercalate)
import Data.Maybe (Maybe(..))
import Data.Time.Duration (Milliseconds(..))
import Data.Tuple.Nested ((/\))
import Debug.Trace (spy)
import Effect (Effect)
import Effect.Aff (delay)
import Effect.Class (liftEffect)
@ -14,7 +13,7 @@ import Literals.Undefined (undefined)
import React.Basic.DOM as R
import React.Basic.DOM.Events (preventDefault, targetValue)
import React.Basic.Events (handler)
import React.Basic.Hooks (ReactComponent, component, useState)
import React.Basic.Hooks (ReactComponent, reactComponent, useState)
import React.Basic.Hooks as React
import React.Basic.Hooks.Aff (useAff)
import Record.Extra (pick)
@ -44,7 +43,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS styles
component "InlineCode" \props@{ text, update } -> React.do
reactComponent "InlineCode" \props@{ text, update } -> React.do
value /\ modifyValue <- useState (text ?|| "")
classes <- useStyles $ pick props
ref <- useFocus
@ -63,7 +62,7 @@ makeComponent = do
, readOnly: props.readOnly ?|| false
, disabled: props.readOnly ?|| false
, spellCheck: false
, onDragOver: handler preventDefault (\e -> spy "e" mempty)
, onDragOver: handler preventDefault (const mempty)
, autoComplete: unsafeCoerce "false"
, autoCorrect: "off"
, autoCapitalize: "off"

5
components/src/Yoga/InlineCode/Spec.purs
View File

@ -1,6 +1,7 @@
module Yoga.InlineCode.Spec where
import Prelude
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Effect (Effect)
@ -10,7 +11,7 @@ import Effect.Ref (Ref)
import Effect.Ref as Ref
import Justifill (justifill)
import React.Basic.Extra.Hooks.UseAffReducer (useAffReducer)
import React.Basic.Hooks (ReactComponent, component, element, useEffect)
import React.Basic.Hooks (ReactComponent, element, reactComponent, useEffect)
import React.Basic.Hooks as React
import React.TestingLibrary (describeComponent, renderComponent)
import Test.Spec (Spec, it)
@ -52,7 +53,7 @@ mkReducer ref state = case _ of
mkWrapper ∷ Effect (ReactComponent { strRef ∷ Ref String })
mkWrapper = do
inlineCode <- InlineCode.makeComponent
component "Wrapper" \{ strRef } -> React.do
reactComponent "Wrapper" \{ strRef } -> React.do
state /\ dispatch <- useAffReducer Nothing (mkReducer strRef)
useEffect state mempty
pure

11
components/src/Yoga/InlineCode/Stories.purs
View File

@ -1,6 +1,7 @@
module Yoga.InlineCode.Stories where
import Prelude hiding (add)
import Data.Array (intercalate)
import Data.Either (Either(..))
import Data.Maybe (Maybe(..))
@ -16,15 +17,15 @@ import React.Basic (JSX, fragment)
import React.Basic.DOM as R
import React.Basic.Extra.Hooks.UseAffReducer (useAffReducer)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (ReactComponent, component, element)
import React.Basic.Hooks (ReactComponent, element, reactComponent)
import React.Basic.Hooks as React
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Compiler.Api (apiCompiler)
import Yoga.InlineCode.Component as InlineCode
import Yoga.Modal.Component as Modal
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "InlineCode" do
addDecorator fullScreenDecorator
@ -74,7 +75,7 @@ renderCode c = intercalate [ R.br {} ] (toJSX <$> lines)
mkWrapper ∷ Effect (ReactComponent { inside ∷ ReactComponent InlineCode.Props -> Array JSX })
mkWrapper = do
inlineCode <- InlineCode.makeComponent
component "InlineCodeWrapper" \{ inside } -> React.do
reactComponent "InlineCodeWrapper" \{ inside } -> React.do
pure
$ R.div_ (inside inlineCode)
@ -90,7 +91,7 @@ mkRealWrapper ∷ Effect (ReactComponent {})
mkRealWrapper = do
inlineCode <- InlineCode.makeComponent
modal <- Modal.makeComponent
component "InlineCodeWrapper" \{} -> React.do
reactComponent "InlineCodeWrapper" \{} -> React.do
state /\ dispatch <- useAffReducer Nothing realReducer
pure
$ R.div_

4
components/src/Yoga/Modal/Component.purs
View File

@ -11,7 +11,7 @@ import React.Basic.DOM as R
import React.Basic.DOM.Events (stopPropagation)
import React.Basic.Events (handler)
import React.Basic.Helpers (jsx, orUndefined)
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Box.Component as Box
@ -39,7 +39,7 @@ makeComponent = do
stack <- Stack.makeComponent
cluster <- Cluster.makeComponent
useStyles <- makeStylesJSS Style.styles
component "Modal" \props -> React.do
reactComponent "Modal" \props -> React.do
cs <- useStyles (pick props)
let
dialogImposter =

12
components/src/Yoga/Modal/Stories.purs
View File

@ -1,7 +1,7 @@
module Yoga.Modal.Stories where
import Prelude hiding (add)
import Data.Maybe (Maybe(..))
import Data.Monoid (guard)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
@ -10,17 +10,17 @@ import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Events (handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (ReactComponent, component, element, fragment, memo, useState)
import React.Basic.Hooks (ReactComponent, reactComponent, element, fragment, memo, useState)
import React.Basic.Hooks as React
import React.Basic.Hooks.Spring (useTransition)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Button.Component (mkButton)
import Yoga.Centre.Component as Centre
import Yoga.CloseIcon.Component as CloseIcon
import Yoga.Modal.Component as Modal
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Modal" do
addDecorator fullScreenDecorator
@ -42,7 +42,7 @@ mkExample = do
modal <- Modal.makeComponent
centre <- Centre.makeComponent
button <- mkButton
component "ModalStory" \{} -> React.do
reactComponent "ModalStory" \{} -> React.do
state /\ modState <- useState { open: true }
pure
$ fragment
@ -67,7 +67,7 @@ mkAnimatedExample = do
centre <- Centre.makeComponent
closeIcon <- memo CloseIcon.makeComponent
button <- mkButton
component "ModalStoryAnimated" \{} -> React.do
reactComponent "ModalStoryAnimated" \{} -> React.do
state /\ modState <- useState { open: true }
transitionFn <-
useTransition [ state.open ]

4
components/src/Yoga/Monaco/Editor.purs
View File

@ -20,7 +20,7 @@ import JSS (jssClasses)
import Prim.Row (class Union)
import React.Basic (JSX, ReactComponent, Ref, element, fragment)
import React.Basic.DOM as R
import React.Basic.Hooks (component, useEffect, useState)
import React.Basic.Hooks (reactComponent, useEffect, useState)
import React.Basic.Hooks as React
import React.Basic.Hooks.Aff (useAff)
import Web.DOM (Node)
@ -109,7 +109,7 @@ mkEditor = do
overflowY hidden
backgroundColor theme.backgroundColour
}
component "Editor" \{ onLoad, height, language } -> React.do
reactComponent "Editor" \{ onLoad, height, language } -> React.do
classes <- useStyles {}
maybeEditor /\ modifyEditor <- useState Nothing
maybeMonaco /\ modifyMonaco <- useState Nothing

26
components/src/Yoga/MultipleChoice/Component.purs
View File

@ -1,38 +1,22 @@
module Yoga.MultipleChoice.Component where
import Prelude
import Data.Array as A
import Data.Maybe (Maybe(..), isJust)
import Data.Maybe (Maybe)
import Data.Newtype as NT
import Data.Nullable (Nullable)
import Data.Time.Duration (Milliseconds(..))
import Effect (Effect)
import Effect.Aff (delay, launchAff_)
import Effect.Class (liftEffect)
import Justifill (justifill)
import Literals.Undefined (undefined)
import React.Basic (JSX, ReactComponent, element)
import React.Basic (ReactComponent)
import React.Basic.DOM as R
import React.Basic.DOM.Events (preventDefault)
import React.Basic.Events (handler, handler_)
import React.Basic.Helpers (jsx)
import React.Basic.Hooks (Ref, component)
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
import React.Basic.SyntaxHighlighter.Component (HighlighterTheme, syntaxHighlighterImpl)
import Record.Extra (pick)
import Unsafe.Coerce (unsafeCoerce)
import Web.DOM (Node)
import Yoga.Box.Component as Box
import Yoga.Button.Component (ButtonType(..), mkButtonWithProps)
import Yoga.Button.Component as Button
import Yoga.Card.Component (mkCard)
import Yoga.Cluster.Component as Cluster
import Yoga.DOM.Hook (useFocus)
import Yoga.Helpers ((?||))
import Yoga.InlineCode.Component as InlineCode
import Yoga.MultipleChoice.Logic (Segment(..), complete, findFirstHoleIndex, holeToFiller, updateSegments)
import Yoga.MultipleChoice.Logic (Segment)
import Yoga.MultipleChoice.Styles (styles)
import Yoga.Stack.Component as Stack
import Yoga.Theme.Styles (makeStylesJSS, useTheme)
import Yoga.Theme.Syntax (mkHighlighterTheme)
import Yoga.Theme.Types (CSSTheme)
@ -48,7 +32,7 @@ makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
card <- mkCard
useStyles <- makeStylesJSS styles
component "MultipleChoice" \(props@{ updateSegments, segments, incantate, solvedWith } ∷ Props) -> React.do
reactComponent "MultipleChoice" \(props@{ updateSegments, segments, incantate, solvedWith } ∷ Props) -> React.do
{ codeContainer, solutionContainer } <- useStyles (pick props)
theme ∷ CSSTheme <- useTheme
ref <- useFocus

17
components/src/Yoga/MultipleChoice/Stories.purs
View File

@ -1,26 +1,26 @@
module Yoga.MultipleChoice.Stories where
import Prelude hiding (add)
import Control.Monad.Trans.Class (lift)
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Ref as Ref
import Justifill (justifill)
import React.Basic (ReactComponent, fragment)
import React.Basic.Hooks (element, useState, component)
import React.Basic (ReactComponent)
import React.Basic.Hooks (element, useState, reactComponent)
import React.Basic.Hooks as React
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Yoga.MultipleChoice.Component as MultipleChoice
import Yoga.MultipleChoice.Logic (parseSegments)
import Yoga.Grimoire.Component as Grimoire
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Grimoire.Spell.Component as Spell
import Yoga.Helpers ((?||))
import Yoga.MultipleChoice.Component as MultipleChoice
import Yoga.MultipleChoice.Logic (parseSegments)
import Yoga.Spell.Types (Spell)
import Yoga.WithSidebar.Component as WithSidebar
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "MultipleChoice" do
addDecorator fullScreenDecorator
@ -33,7 +33,7 @@ makeWrapper = do
gaps <- MultipleChoice.makeComponent
withSidebar <- WithSidebar.makeComponent
spell <- Spell.makeComponent
component "GapsWrapper" \_ -> React.do
reactComponent "GapsWrapper" \_ -> React.do
segments /\ updateSegments <- useState $ parseSegments codeWithHoles ?|| []
pure
$ element withSidebar
@ -61,6 +61,7 @@ spells =
, { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }
]
codeWithHoles :: String
codeWithHoles =
"""
--result Hello World

4
components/src/Yoga/SVG/Icon.purs
View File

@ -8,7 +8,7 @@ import JSS (jssClasses)
import Prim.Row (class Union)
import React.Basic.DOM.SVG as SVG
import React.Basic.Events (EventHandler)
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Unsafe.Coerce (unsafeCoerce)
import Yoga.Theme.Styles (makeStylesJSS)
@ -120,7 +120,7 @@ mkMenu = do
}
}
}
component "MenuIcon" \{ activeArrowDirection } -> React.do
reactComponent "MenuIcon" \{ activeArrowDirection } -> React.do
classes <- useStyles {}
pure
$ SVG.svg

6
components/src/Yoga/SVG/Image.purs
View File

@ -1,6 +1,7 @@
module Yoga.SVG.Image where
import Prelude
import Color (toHexString)
import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))
import Data.Array.NonEmpty as NEA
@ -10,6 +11,7 @@ import Data.String (codePointFromChar)
import Data.String as String
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Unsafe (unsafePerformEffect)
import JSS (jssClasses)
import Random.PseudoRandom (mkSeed, randomRs)
import React.Basic (JSX, element)
@ -115,7 +117,7 @@ mkLandingPageBackground = do
, animationDirection: "alternate"
}
}
React.component "LandingPageBackground" \{ className } -> React.do
React.reactComponent "LandingPageBackground" \{ className } -> React.do
theme <- useTheme
classes <- useStyles {}
scrollY <- useScrollYPosition
@ -125,7 +127,7 @@ mkLandingPageBackground = do
Nothing -> 0.0
Just vh -> scrollY / vh.height
pure
$ element (unsafeCreateDOMComponent "svg") -- [TODO] make PR for react-basic to allow for `ref` on svg
$ element (unsafePerformEffect $ unsafeCreateDOMComponent "svg") -- [TODO] make PR for react-basic to allow for `ref` on svg
{ ref
, viewBox: "0 0 800 447"
, preserveAspectRatio: "xMidYMax slice"

4
components/src/Yoga/Spec/Helpers.purs
View File

@ -6,7 +6,7 @@ import Color as Color
import Effect (Effect)
import JSS (jss)
import Prim.Row (class Lacks)
import React.Basic.Hooks (ReactComponent, component, element)
import React.Basic.Hooks (ReactComponent, reactComponent, element)
import Yoga.Font (FontFamily)
import Yoga.Theme (fromTheme)
import Yoga.Theme.CSSBaseline (mkCssBaseline)
@ -25,7 +25,7 @@ withTheme theme mkComp = do
themeProvider <- mkThemeProvider
baseline <- mkCssBaseline (jss ([] ∷ _ FontFamily))
comp <- mkComp
component "ThemeWrapper" \(props ∷ { | props }) -> React.do
reactComponent "ThemeWrapper" \(props ∷ { | props }) -> React.do
pure
$ element themeProvider
{ theme

4
components/src/Yoga/Stack/Component.purs
View File

@ -6,7 +6,7 @@ import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Stack.Styles (styles)
@ -28,7 +28,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS styles
component "Stack" \props@{ kids, className } -> React.do
reactComponent "Stack" \props@{ kids, className } -> React.do
{ stack } <- useStyles (pick props)
pure
$ R.div

5
components/src/Yoga/Stack/Stories.purs
View File

@ -1,14 +1,15 @@
module Yoga.Stack.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Stack.Component as Stack
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Stack" do
addDecorator fullScreenDecorator

4
components/src/Yoga/Switcher/Component.purs
View File

@ -6,7 +6,7 @@ import Data.Maybe (Maybe)
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Switcher.Styles as Style
@ -27,7 +27,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS Style.styles
component "Switcher" \props@{ kids, className } -> React.do
reactComponent "Switcher" \props@{ kids, className } -> React.do
classes <- useStyles (pick props)
pure
$ R.div

5
components/src/Yoga/Switcher/Stories.purs
View File

@ -1,14 +1,15 @@
module Yoga.Switcher.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Switcher.Component as Switcher
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Switcher" do
addDecorator fullScreenDecorator

4
components/src/Yoga/Template/Component.purs
View File

@ -4,7 +4,7 @@ import Prelude
import Effect (Effect)
import React.Basic (ReactComponent)
import React.Basic.DOM as R
import React.Basic.Hooks (component)
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
import Record.Extra (pick)
import Yoga.Template.Styles (styles)
@ -20,7 +20,7 @@ type Props
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS styles
component "Template" \(props@{} ∷ Props) -> React.do
reactComponent "Template" \(props@{} ∷ Props) -> React.do
{} <- useStyles (pick props)
theme ∷ CSSTheme <- useTheme
pure

1
components/src/Yoga/Template/Spec.purs
View File

@ -2,7 +2,6 @@ module Yoga.Template.Spec where
import Prelude
import Justifill (justifill)
import React.Basic.DOM as R
import React.TestingLibrary (describeComponent, renderComponent)
import Test.Spec (Spec, it)
import Yoga.Template.Component as Template

6
components/src/Yoga/Template/Stories.purs
View File

@ -1,14 +1,14 @@
module Yoga.Template.Stories where
import Prelude hiding (add)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Template.Component as Template
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Template" do
addDecorator fullScreenDecorator

4
components/src/Yoga/Theme/CSSBaseline.purs
View File

@ -7,7 +7,7 @@ import Data.Array.NonEmpty as NEA
import Effect (Effect)
import JSS (JSSClasses, JSSElem, jss, jssClasses)
import React.Basic (ReactComponent)
import React.Basic.Hooks (JSX, component, fragment)
import React.Basic.Hooks (JSX, reactComponent, fragment)
import React.Basic.Hooks as React
import Yoga.Theme.Styles (makeStylesJSS)
import Yoga.Theme.Types (YogaTheme, CSSTheme)
@ -17,7 +17,7 @@ mkCssBaseline ∷
Effect (ReactComponent { kids ∷ Array JSX })
mkCssBaseline fontFaces = do
useStyles <- makeStylesJSS (styles fontFaces)
component "CSSBaseline" \{ kids } -> React.do
reactComponent "CSSBaseline" \{ kids } -> React.do
classes <- useStyles {}
pure
$ fragment kids

11
components/src/Yoga/Theme/ThemeStories.purs
View File

@ -1,16 +1,17 @@
module Yoga.Theme.Stories where
import Prelude hiding (add)
import Color (toHexString)
import Effect (Effect)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Hooks (component, element)
import Storybook.React (Storybook, add, storiesOf)
import React.Basic.Hooks (reactComponent, element)
import Storybook.React (NodeModule, Storybook, add, storiesOf)
import Yoga.Theme (fromTheme)
import Yoga.Theme.Default (darkTheme, lightTheme)
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Theme" do
add "The swatches in the themes" mkExample
@ -20,7 +21,7 @@ stories = do
where
mkExample = do
swatch <- mkSwatch
component "ExampleSwatches" \{ theme, themeName } -> React.do
reactComponent "ExampleSwatches" \{ theme, themeName } -> React.do
let
cssTheme = fromTheme theme
sw name colour = element swatch { name, colour, fontFamily: cssTheme.textFontFamily }
@ -70,7 +71,7 @@ stories = do
]
}
mkSwatch = do
component "Swatch" \{ name, colour, fontFamily } -> React.do
reactComponent "Swatch" \{ name, colour, fontFamily } -> React.do
pure
$ R.div
{ style: css { display: "flex", flexDirection: "column", alignItems: "center" }

4
components/src/Yoga/Typography/Header.purs
View File

@ -9,7 +9,7 @@ import Data.Maybe (Maybe)
import Effect (Effect)
import JSS (jssClasses)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Yoga.Theme.Styles (makeStylesJSS)
import Yoga.Theme.Types (CSSTheme)
@ -62,7 +62,7 @@ mkH = do
, color: theme.textColourLighter # toHexString
}
}
component "Heading" \{ level, text, className } -> React.do
reactComponent "Heading" \{ level, text, className } -> React.do
classes <- useStyles {}
let
elem = case level of

5
components/src/Yoga/Typography/Paragraph.purs
View File

@ -1,11 +1,12 @@
module Yoga.Typography.Paragraph where
import Prelude
import Color (toHexString)
import Effect (Effect)
import JSS (jssClasses)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Yoga.Theme.Styles (makeStylesJSS)
import Yoga.Theme.Types (CSSTheme)
@ -22,7 +23,7 @@ mkP = do
, padding: "0.67em 0 0.33em 0"
}
}
component "paragraph" \{ text } -> React.do
reactComponent "paragraph" \{ text } -> React.do
classes <- useStyles {}
pure
$ R.p

7
components/src/Yoga/Typography/Stories.purs
View File

@ -1,13 +1,14 @@
module Yoga.Typography.Stories where
import Prelude hiding (add)
import Data.Maybe (Maybe(..))
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Effect (Effect)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.Typography.Header (HeadingLevel(..), mkH)
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "Typography" do
addDecorator fullScreenDecorator

4
components/src/Yoga/WithSidebar/Component.purs
View File

@ -7,7 +7,7 @@ import Data.Maybe (Maybe(..))
import Effect (Effect)
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.Hooks (ReactComponent, component)
import React.Basic.Hooks (ReactComponent, reactComponent)
import React.Basic.Hooks as React
import Yoga.Theme.Styles (makeStylesJSS)
import Yoga.WithSidebar.Styles as WithSidebar
@ -32,7 +32,7 @@ type OptionalProps r
makeComponent ∷ Effect (ReactComponent Props)
makeComponent = do
useStyles <- makeStylesJSS WithSidebar.styles
component "WithSidebar" \( { sidebarChildren
reactComponent "WithSidebar" \( { sidebarChildren
, notSidebarChildren
, className
, sidebarClassName

5
components/src/Yoga/WithSidebar/Stories.purs
View File

@ -1,16 +1,17 @@
module Yoga.WithSidebar.Stories where
import Prelude hiding (add)
import Data.Monoid (power)
import Effect (Effect)
import Justifill (justifill)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import Storybook.Decorator.FullScreen (fullScreenDecorator)
import Storybook.React (Storybook, add, addDecorator, storiesOf)
import Storybook.React (NodeModule, Storybook, add, addDecorator, storiesOf)
import Yoga.WithSidebar.Component as WithSidebar
stories ∷ _ -> Effect Storybook
stories ∷ NodeModule -> Effect Storybook
stories = do
storiesOf "WithSidebar" do
addDecorator fullScreenDecorator