mirror of
https://github.com/rowtype-yoga/psfp.git
synced 2024-09-11 16:25:36 +03:00
Huge update
This commit is contained in:
parent
3e952f7c3d
commit
ac71358971
34102
blog/package-lock.json
generated
34102
blog/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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": {
|
||||
|
@ -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
|
||||
|
@ -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
5
components/.vscode/settings.json
vendored
@ -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
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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 <-
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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" }
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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 {}
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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_
|
||||
|
@ -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 =
|
||||
|
@ -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 ]
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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,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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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" }
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user