rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-17 16:27:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Chchchanges

Browse Source
This commit is contained in:
Mark Eibes 2021-06-01 23:30:16 +02:00
parent 5655e2656b
commit 2fcd0eebd4
15 changed files with 271 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.vscode/settings.json vendored
View File

@ -1,5 +1,12 @@
{
"editor.formatOnSave": true,
"workbench.colorTheme": "Irul Theme",
"search.useGlobalIgnoreFiles": true
"search.useGlobalIgnoreFiles": true,
"files.watcherExclude": {
"**/.spago/**": true,
"**/output/**": true,
"**/node_modules/**": true,
"**/.storybook/**": true,
"**/.github/**": true,
}
}

2
package.json
View File

@ -25,7 +25,7 @@
"rimraf": "^3.0.2",
"source-map": "GerHobbelt/source-map#patch-8",
"source-map-loader": "^1.1.2",
"spago": "^0.19.1",
"spago": "^0.20.3",
"svg2psreact": "^2.1.0",
"webpack": "^4.0.0",
"webpack-cli": "^4.0.0",

21
packages.dhall
View File

@ -99,23 +99,6 @@ in upstream
-------------------------------
-}
let upstream =
https://github.com/purescript/package-sets/releases/download/psc-0.14.1-20210516/packages.dhall sha256:f5e978371d4cdc4b916add9011021509c8d869f4c3f6d0d2694c0e03a85046c8
https://raw.githubusercontent.com/purescript/package-sets/3aa641500c6903bfd2ab7da381ad6d7b40cf2f97/src/packages.dhall sha256:7ad187a59678a4c614468cdaac78773b8ae5565fd555d03b05163ba9a39dc30a
in upstream
with two-or-more =
{
dependencies =[
"arrays",
"console",
"effect",
"foldable-traversable",
"maybe",
"partial",
"prelude",
"psci-support",
"tuples"
],
repo ="https://github.com/i-am-the-slime/purescript-two-or-more.git",
version ="v0.3.0"
}
with framer-motion =
../purescript-framer-motion/spago.dhall as Location

10
src/Yoga/Block.purs
View File

@ -15,6 +15,7 @@ import Yoga.Block.Container as Container
import Yoga.Block.Layout.Box as Box
import Yoga.Block.Layout.Centre as Centre
import Yoga.Block.Layout.Cluster as Cluster
import Yoga.Block.Layout.Cover as Cover
import Yoga.Block.Layout.Grid as Grid
import Yoga.Block.Layout.Imposter as Imposter
import Yoga.Block.Layout.Sidebar as Sidebar
@ -62,6 +63,15 @@ cluster_ = cluster {}
container ∷ ∀ p q. Union p q Container.Props => ReactComponent { | p }
container = Container.component
cover' ∷ ∀ p q. Union p q Cover.Props => ReactComponent { | p }
cover' = Cover.component
cover ∷ ∀ p q. Lacks "children" p => Union p q Cover.PropsNoChildren => { | p } -> Array JSX -> JSX
cover = el cover'
cover_ ∷ Array JSX -> JSX
cover_ = cover {}
grid ∷ ∀ p q. Union p q Grid.Props => ReactComponent { children ∷ Array JSX | p }
grid = Grid.component

9
src/Yoga/Block/Layout/Cluster/Style.purs
View File

@ -14,21 +14,20 @@ type Props f r =
cluster ∷ ∀ p. { | Props OptionalProp p } -> Style
cluster props = styles <>? props.css
where
space = props.space ?|| "var(--s1)"
space = (props.space <#> \x -> if x == "0" then "0px" else x) ?|| "var(--s1)"
styles =
css
{ "--space": str space
, "& > *":
{ "& > *":
nest
{ display: flex
, flexWrap: wrap
, alignItems: (str <$> props.align) ?|| center
, justifyContent: (str <$> props.justify) ?|| flexStart
, margin: "calc(var(--space) / 2 * -1)" # str
, margin: "calc(" <> space <> " / 2 * -1)" # str
}
, "& > * > *":
nest
{ margin: "calc(var(--space) / 2)" # str
{ margin: "calc(" <> space <> " / 2)" # str
}
}

9
src/Yoga/Block/Layout/Cluster/View.purs
View File

@ -1,13 +1,16 @@
module Yoga.Block.Layout.Cluster.View (component, Props, PropsF, PropsNoChildren, PropsNoChildrenF) where
import Yoga.Prelude.View
import React.Basic.DOM as R
import Unsafe.Coerce (unsafeCoerce)
import Yoga.Block.Internal (DivPropsNoChildren)
import Yoga.Block.Layout.Cluster.Style as Style
type PropsNoChildrenF f =
( className ∷ f String
, wrapper ∷ f (Array JSX -> JSX)
, childWrapper ∷ f (Array JSX -> JSX)
| Style.Props f + DivPropsNoChildren
)
@ -33,9 +36,13 @@ rawComponent =
mkForwardRefComponent "Cluster" do
\(props ∷ { | PropsOptional }) ref -> React.do
let wrap = props.wrapper ?|| R.div_
let wrapChild = props.childWrapper ?|| R.div_
-- Must be careful here because React fiddles with children
let safeChildren = reactChildrenToArray (unsafeCoerce props.children)
let wrappedChildren = safeChildren <#> wrapChild
pure
$ emotionDiv ref props
{ className: "ry-cluster " <>? props.className
, css: Style.cluster props
, children: [ wrap props.children ]
, children: [ wrap wrappedChildren ]
}

5
src/Yoga/Block/Layout/Cover.purs Normal file
View File

@ -0,0 +1,5 @@
module Yoga.Block.Layout.Cover
( module Yoga.Block.Layout.Cover.View
) where
import Yoga.Block.Layout.Cover.View (component, Props, PropsNoChildren)

21
src/Yoga/Block/Layout/Cover/Spec.purs Normal file
View File

@ -0,0 +1,21 @@
module Yoga.Block.Layout.Cover.Spec where
import Yoga.Prelude.Spec
import Yoga.Block.Layout.Cover as Cover
import React.Basic.DOM as R
spec ∷ Spec Unit
spec =
after_ cleanup do
describe "The cover" do
it "renders without errors" do
void
$ renderComponent Cover.component {}
it "accepts div props" do
{ findByText } <-
renderComponent Cover.component
{ role: "Heinz"
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
elem `shouldHaveAttribute` "role"

85
src/Yoga/Block/Layout/Cover/Story.purs Normal file
View File

@ -0,0 +1,85 @@
module Yoga.Block.Layout.Cover.Story where
import Prelude
import Color (cssStringRGBA)
import Effect (Effect)
import Effect.Unsafe (unsafePerformEffect)
import React.Basic (JSX, element, fragment)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Emotion as E
import Yoga.Block as Block
import Yoga.Block.Container.Style as Styles
import Yoga.Block.Layout.Cover as Cover
import Yoga.Block.Palette as Palette
default ∷
{ decorators ∷ Array (Effect JSX -> JSX)
, title ∷ String
}
default =
{ title: "Layout/Cover"
, decorators:
[ \storyFn ->
R.div
{ children:
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
, style:
css
{ fontWeight: "500"
}
}
]
}
cover ∷ Effect JSX
cover =
pure
$ fragment
[ R.h2_ [ R.text "The Cover" ]
, element Cover.component
{ children: [ R.text "Default" ]
, style: css { backgroundColor: cssStringRGBA Palette.mango.regular, color: "black" }
, minHeight: E.px 300
}
, element Cover.component
{ children: [ R.text "With Header and Footer" ]
, style: css { backgroundColor: cssStringRGBA Palette.violet.dark, color: "white" }
, header: R.text "Header"
, footer: R.text "Footer"
, minHeight: E.px 300
}
, Block.cluster_
[ element Cover.component
{ children: [ R.text "With Header only" ]
, style: css { backgroundColor: cssStringRGBA Palette.malachite.dark, color: "white" }
, header: R.text "Header"
, minHeight: E.px 300
}
, element Cover.component
{ children: [ R.text "With Header only centre in remaining" ]
, style: css { backgroundColor: cssStringRGBA Palette.malachite.dark, color: "white" }
, header: R.text "Header"
, minHeight: E.px 300
, centreInRemaining: true
}
]
, Block.cluster_
[ element Cover.component
{ children: [ R.text "With Footer only" ]
, style: css { backgroundColor: cssStringRGBA Palette.seaGreen.dark, color: "white" }
, footer: R.text "Footer"
, minHeight: E.px 300
}
, element Cover.component
{ children: [ R.text "With Footer only centre in remaining" ]
, style: css { backgroundColor: cssStringRGBA Palette.seaGreen.dark, color: "white" }
, footer: R.text "Footer"
, minHeight: E.px 300
, centreInRemaining: true
}
]
]

40
src/Yoga/Block/Layout/Cover/Style.purs Normal file
View File

@ -0,0 +1,40 @@
module Yoga.Block.Layout.Cover.Style where
import Yoga.Prelude.Style
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props f r
= ( css ∷ f Style
, padding ∷ f StyleProperty
, margin ∷ f StyleProperty
, minHeight ∷ f StyleProperty
| r
)
defaultMargin :: StyleProperty
defaultMargin = 1.0 # rem
cover ∷ ∀ p. { | Props OptionalProp p } -> Style
cover props = styles <>? props.css
where
padding = props.padding ?|| _0
minHeight = props.minHeight ?|| (100.0 # percent)
styles =
css
{ display: flex
, flexDirection: column
, minHeight
, padding
}
header ∷ ∀ p. { | Props OptionalProp p } -> Style
header props = css { marginTop: _0, marginBottom: props.margin ?|| defaultMargin }
main ∷ Style
main = css { marginTop: auto, marginBottom: auto }
footer ∷ ∀ p. { | Props OptionalProp p } -> Style
footer props = css { marginBottom: _0, marginTop: props.margin ?|| defaultMargin }
invisible :: Style
invisible = css { visibility: hidden }

68
src/Yoga/Block/Layout/Cover/View.purs Normal file
View File

@ -0,0 +1,68 @@
module Yoga.Block.Layout.Cover.View (component, Props, PropsF, PropsNoChildrenF, PropsNoChildren) where
import Yoga.Prelude.View
import React.Basic.DOM as R
import Yoga.Block.Internal (DivPropsNoChildren)
import Yoga.Block.Layout.Cover.Style as Style
type PropsNoChildrenF f =
( className ∷ f String
, header ∷ f JSX
, footer ∷ f JSX
, centreInRemaining ∷ f Boolean
| Style.Props f + DivPropsNoChildren
)
type PropsF f =
( children ∷ Array JSX
| PropsNoChildrenF f
)
type PropsNoChildren =
PropsNoChildrenF Id
type Props =
PropsF Id
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Cover" do
\(props ∷ { | PropsOptional }) ref -> React.do
let
{ header, footer } = if props.centreInRemaining # isTruthy then
{ header: props.header # foldMap \jsx -> R.div' </* { className: "header", css: Style.header props } /> [ jsx ]
, footer: props.footer # foldMap \jsx -> R.div' </* { className: "footer", css: Style.footer props } /> [ jsx ]
}
else
case opToMaybe props.header, opToMaybe props.footer of
Just headerJSX, Just footerJSX ->
{ header: R.div' </* { className: "header", css: Style.header props } /> [ headerJSX ]
, footer: R.div' </* { className: "footer", css: Style.footer props } /> [ footerJSX ]
}
Just headerJSX, Nothing ->
{ header: R.div' </* { className: "header", css: Style.header props } /> [ headerJSX ]
, footer: R.div' </* { className: "footer", css: Style.footer props <> Style.invisible } /> [ headerJSX ]
}
Nothing, Just footerJSX ->
{ header: R.div' </* { className: "header", css: Style.header props <> Style.invisible } /> [ footerJSX ]
, footer: R.div' </* { className: "footer", css: Style.footer props } /> [ footerJSX ]
}
Nothing, Nothing -> mempty
main =
R.div' </* { className: "main", css: Style.main } /> props.children
pure
$ emotionDiv
ref
props
{ className: "ry-cover " <>? props.className
, css: Style.cover props
, children: [ header, main, footer ]
}

2
src/Yoga/Block/Layout/Stack/Style.purs
View File

@ -2,7 +2,7 @@ module Yoga.Block.Layout.Stack.Style where
import Yoga.Prelude.Style
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ forall k. (Type -> k) -> Row k -> Row k
type Props f r
= ( css ∷ f Style
, space ∷ f StyleProperty

32
src/Yoga/Block/Layout/Story.purs
View File

@ -11,7 +11,6 @@ import Yoga ((/>), (</*), (</*>))
import Yoga.Block as Block
import Yoga.Block.Container.Style (colour, size)
import Yoga.Block.Container.Style as Styles
import Yoga.Block.Palette as Palette
import Yoga.Block.Typography as Typo
default ∷
@ -48,9 +47,9 @@ layout =
}
[ Block.stack { space: E.str size.s }
[ Block.stack { space: E.str size.m }
[ Block.sidebar { sidebar: avatar, noStretch: true, contentMin: "25ch" }
[ Block.sidebar { sidebar: avatar, contentMin: "25ch", space: size.l }
[ postTitle ]
, Block.cluster { justify: "space-between", space: size.s }
, Block.cluster { justify: "space-between", space: size.m }
[ postAuthor, postDate ]
]
, hr
@ -63,7 +62,7 @@ layout =
</*> { className: "hr"
, css:
E.css
{ backgroundColor: E.str $ colour.textInvertedPaler4
{ backgroundColor: E.str $ colour.textInvertedPaler3
, height: E.px 1
, border: E.none
}
@ -80,13 +79,12 @@ layout =
, color: E.str colour.textPaler2
}
}
/> [ R.text "When I was a young girl wrestling with 'undefined' not being a function my mother used to come up to me and say: 'Use PureScript'. Now, a mere twenty years later..."
]
/> [ R.text "When I was a young girl wrestling with 'undefined' not being a function my mother used to come up to me and say: 'Use PureScript'. Now, a mere twenty years later..." ]
boxCss =
Typo.fontSizeSmall
<> E.css
{ background: E.str $ colour.backgroundLayer4
{ background: E.str $ colour.backgroundLayer3
, borderRadius: E.str size.l
, maxWidth: E.ch 60.0
, paddingBottom: E.str size.xl
@ -126,20 +124,14 @@ layout =
]
postTitle =
R.div'
</* { className: "title-wrapper"
, css: E.css { minHeight: E.str size.xxl }
}
/> [ R.h2'
Block.cover_ [
R.h2'
</* { className: "title"
, css:
Typo.fontSizeH3
<> E.css
{ color: E.str colour.textPaler2
}
<> E.css { color: E.str colour.textPaler2 }
}
/> [ R.text "How to properly write effective React code in 2021" ]
]
/> [ R.text "How not to properly React" ]]
postAuthor =
R.h4'
@ -152,10 +144,7 @@ layout =
<> Typo.regular
<> E.css
{ "&::before":
nested
$ E.css
{ content: E.str "'by '"
}
nested $ E.css { content: E.str "'by '" }
<> Typo.thin
<> Typo.resetTextTransform
, color: E.str colour.textPaler3
@ -172,6 +161,7 @@ layout =
<> Typo.allCaps
<> Typo.fontSizeSmall
<> Typo.thin
<> Typo.rightAlign
<> E.css { color: E.str $ colour.textPaler3 }
}
/> [ R.text "16th May 2021" ]

3
src/Yoga/Block/Typography.purs
View File

@ -45,6 +45,9 @@ noMargins = css { margin: _0 }
noPadding ∷ Style
noPadding = css { padding: _0 }
rightAlign ∷ Style
rightAlign = css { textAlign: str "end" }
-- Ellipsis
-- [FIXME]: Buggy (still shows a third line, does not seem to hide overflow)
maxLines ∷ Int -> Style

39
yarn.lock
View File

@ -4800,20 +4800,6 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
focus-trap-react@^8.4.2:
version "8.5.0"
resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-8.5.0.tgz#c4d08609ed1da0976b856519fd2c97760524474c"
integrity sha512-YnQ3PtoszlXqHQQIYCnnTbWsXa6daEACXg9KkFvv357PkJUVp347G9L+e9WJwj2KgSIX+pTDcZFx+f7azo8dhw==
dependencies:
focus-trap "^6.4.0"
focus-trap@^6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.4.0.tgz#e9951484fddf933d9b9b0e95b499f9420f6a54d6"
integrity sha512-RpH291GjfNhy1ek+Iwe00oCaqJN0sBaB+S/v7BpCIldf39IslPI7657nOZ6HwgoEHpjCmUJoAY+Mfgrm0rohvQ==
dependencies:
tabbable "^5.2.0"
follow-redirects@^1.0.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
@ -8020,13 +8006,6 @@ react-is@^17.0.1, react-is@^17.0.2:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-laag@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-laag/-/react-laag-2.0.2.tgz#b4c92f08d6942309542d61b2f7264e0616c2ca9e"
integrity sha512-ie6SJy+FgEvurksoEaUK9yZk42+1QxsrX2+rJQByFRyfWjYl1Q9EtAV0L7fAfIt5HfV2Bk6n+GmJ/C3Zx4P38g==
dependencies:
tiny-warning "^1.0.3"
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@ -8847,10 +8826,10 @@ space-separated-tokens@^1.0.0:
resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
spago@^0.19.1:
version "0.19.2"
resolved "https://registry.yarnpkg.com/spago/-/spago-0.19.2.tgz#2dfe3952ea282bd239084c934b0e0eaca7aaddd3"
integrity sha512-/u4ofPqWkK1JKRlDU8ZpuLVEOqOpD7/F9zIms4jaPxrXDNhddvhZkbYXrFF/Pe4ZpawysrkhQxhKKt+FJfOfuw==
spago@^0.20.3:
version "0.20.3"
resolved "https://registry.yarnpkg.com/spago/-/spago-0.20.3.tgz#f72a096456f580f6eb64fc850c371f8cb97b139f"
integrity sha512-R4CWLP5IbaWoNIpS1QAUuDK2LKlKYqT5gBKVZL7ILilvCwdwS72u3NbGZbvx7VCRRZz4lG7zXUkqKNow7zh6wQ==
dependencies:
request "^2.88.0"
tar "^4.4.8"
@ -9208,11 +9187,6 @@ symbol.prototype.description@^1.0.0:
has-symbols "^1.0.1"
object.getownpropertydescriptors "^2.1.2"
tabbable@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.0.tgz#4fba60991d8bb89d06e5d9455c92b453acf88fb2"
integrity sha512-0uyt8wbP0P3T4rrsfYg/5Rg3cIJ8Shl1RJ54QMqYxm1TLdWqJD1u6+RQjr2Lor3wmfT7JRHkirIwy99ydBsyPg==
tapable@^1.0.0, tapable@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@ -9345,11 +9319,6 @@ tiny-emitter@^2.0.0:
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
to-arraybuffer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"