Skip to content

Commit 8693ff1

Browse files
maddie927maddie927
committed
init
0 parents  commit 8693ff1

File tree

15 files changed

+475
-0
lines changed

15 files changed

+475
-0
lines changed

‎.editorconfig

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = false
9+
10+
[Makefile]
11+
indent_style = tab

‎.gitignore

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
/.vscode/

‎.travis.yml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
dist: trusty
2+
sudo: required
3+
language: node_js
4+
node_js: 10
5+
6+
install:
7+
- npm install
8+
9+
script:
10+
- npx bower install
11+
- npm run build

‎Makefile

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
all: build examples
2+
3+
build: bower_components node_modules
4+
npx pulp build
5+
6+
examples: bower_components node_modules
7+
find examples -maxdepth 2 -type f -iname makefile -execdir make \;
8+
9+
bower_components: node_modules
10+
npx bower --allow-root install
11+
12+
node_modules:
13+
npm i --no-save bower pulp purescript
14+
15+
.PHONY: build examples

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# react-basic-emotion
2+
3+
[Emotion](https://emotion.sh/) support for [react-basic](https://github.com/lumihq/purescript-react-basic)!

‎bower.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "purescript-react-basic-emotion",
3+
"license": "Apache-2.0",
4+
"ignore": [
5+
"**/.*",
6+
"node_modules",
7+
"bower_components",
8+
"output"
9+
],
10+
"repository": {
11+
"type": "git",
12+
"url": "git://github.com/lumihq/purescript-react-basic-emotion.git"
13+
},
14+
"dependencies": {
15+
"purescript-prelude": "^4.1.0",
16+
"purescript-console": "^4.2.0",
17+
"purescript-effect": "^2.0.0",
18+
"purescript-react-basic": "^13.0.0",
19+
"purescript-indexed-monad": "^1.1.0",
20+
"purescript-unsafe-reference": "^3.0.1",
21+
"purescript-aff": "^5.1.1",
22+
"purescript-typelevel-prelude": "^5.0.0"
23+
},
24+
"devDependencies": {
25+
"purescript-psci-support": "^4.0.0",
26+
"purescript-react-basic-hooks": "^2.0.2"
27+
}
28+
}

‎examples/basic/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
output
2+
html/index.js
3+
package-lock.json
4+
node_modules

‎examples/basic/Makefile

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
all: node_modules
2+
purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
3+
purs bundle -m Main --main Main output/*/*.js > output/bundle.js
4+
node_modules/.bin/browserify output/bundle.js -o html/index.js
5+
6+
node_modules:
7+
npm install
8+

‎examples/basic/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Basic Example
2+
3+
## Building
4+
5+
```sh
6+
make
7+
```
8+
9+
This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
10+
11+
Then open `html/index.html` in your browser.

‎examples/basic/html/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>react-basic-emotion example</title>
5+
</head>
6+
<body>
7+
<div id="container"></div>
8+
<script src="index.js"></script>
9+
</body>
10+
</html>

‎examples/basic/package.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"dependencies": {
3+
"@emotion/core": "^10.0.21",
4+
"react": "16.10.2",
5+
"react-dom": "16.10.2"
6+
},
7+
"devDependencies": {
8+
"browserify": "16.5.0"
9+
}
10+
}

‎examples/basic/src/Basic.purs

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
module Basic where
2+
3+
import Prelude
4+
import Effect (Effect)
5+
import React.Basic.DOM as R
6+
import React.Basic.Emotion as E
7+
import React.Basic.Hooks (JSX, ReactComponent, component, element, fragment)
8+
import Record (merge)
9+
10+
data Size
11+
= S
12+
| M
13+
| L
14+
15+
border :: forall r. { borderSize :: Size, borderColor :: String | r } -> E.Style
16+
border { borderSize, borderColor } =
17+
E.css
18+
{ borderWidth:
19+
E.int case borderSize of
20+
S -> 1
21+
M -> 2
22+
L -> 4
23+
, borderColor: E.str borderColor
24+
, borderRadius: E.int 4
25+
, borderStyle: E.str "solid"
26+
, padding: E.str "16px 24px"
27+
}
28+
29+
text :: Size -> E.Style
30+
text size =
31+
E.css
32+
{ fontFamily: E.str "sans-serif"
33+
, fontSize:
34+
E.int case size of
35+
S -> 14
36+
M -> 18
37+
L -> 32
38+
, fontWeight:
39+
E.int case size of
40+
S -> 400
41+
M -> 500
42+
L -> 800
43+
}
44+
45+
type SlatProps
46+
= { borderSize :: Size
47+
, borderColor :: String
48+
, className :: String
49+
, content :: Array JSX
50+
}
51+
52+
slatDefaults :: SlatProps
53+
slatDefaults =
54+
{ borderSize: M
55+
, borderColor: "grey"
56+
, className: ""
57+
, content: mempty
58+
}
59+
60+
mkSlat :: Effect (ReactComponent SlatProps)
61+
mkSlat = do
62+
box <- mkBox
63+
component "Slat" \props ->
64+
pure
65+
$ E.element box
66+
{ css:
67+
E.merge
68+
[ border props
69+
, text L
70+
, E.css { flexDirection: E.str "row" }
71+
, spaceChildrenEvenly
72+
]
73+
, className: props.className
74+
, content: props.content
75+
}
76+
77+
mkEx :: Effect (ReactComponent {})
78+
mkEx = do
79+
slat <- mkSlat
80+
component "BasicEx" \props -> React.do
81+
pure
82+
$ fragment
83+
[ element slat
84+
slatDefaults
85+
{ content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
86+
}
87+
, E.element slat
88+
$ merge
89+
{ css:
90+
E.merge
91+
[ E.css
92+
{ padding: E.int 4
93+
, maxWidth: E.int 200
94+
}
95+
, text S
96+
]
97+
}
98+
slatDefaults
99+
{ content = map (R.span_ <<< pure <<< R.text) [ "Hello", "World" ]
100+
}
101+
]
102+
103+
type BoxProps
104+
= { className :: String
105+
, content :: Array JSX
106+
}
107+
108+
boxDefaults :: BoxProps
109+
boxDefaults =
110+
{ className: ""
111+
, content: mempty
112+
}
113+
114+
boxStyle :: E.Style
115+
boxStyle =
116+
E.css
117+
{ display: E.str "flex"
118+
, flexDirection: E.str "column"
119+
, justifyContent: E.str "center"
120+
, alignItems: E.str "stretch"
121+
}
122+
123+
mkBox :: Effect (ReactComponent BoxProps)
124+
mkBox = do
125+
component "Box" \props ->
126+
pure
127+
$ E.element R.div'
128+
{ css: boxStyle
129+
, className: props.className
130+
, children: props.content
131+
}
132+
133+
spaceChildrenEvenly :: E.Style
134+
spaceChildrenEvenly =
135+
E.css
136+
{ "& > *":
137+
E.selector
138+
$ E.css
139+
{ flex: E.str "1 0 auto"
140+
}
141+
}

‎examples/basic/src/Main.purs

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module Main where
2+
3+
import Prelude
4+
import Basic (mkEx)
5+
import Data.Maybe (Maybe(..))
6+
import Effect (Effect)
7+
import Effect.Exception (throw)
8+
import React.Basic.Hooks (element)
9+
import React.Basic.DOM (render)
10+
import Web.DOM.NonElementParentNode (getElementById)
11+
import Web.HTML (window)
12+
import Web.HTML.HTMLDocument (toNonElementParentNode)
13+
import Web.HTML.Window (document)
14+
15+
main :: Effect Unit
16+
main = do
17+
container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
18+
case container of
19+
Nothing -> throw "Container element not found."
20+
Just c -> do
21+
ex <- mkEx
22+
let
23+
app = element ex {}
24+
render app c

‎src/React/Basic/Emotion.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use strict";
2+
3+
var Emotion = require("@emotion/core");
4+
var createElement = Emotion.jsx;
5+
6+
exports.emptyStyle = undefined;
7+
8+
exports.emptyStyleProperty = undefined;
9+
10+
function flattenDataProp(component, props) {
11+
var data = null;
12+
if (typeof component === "string" && props._data != null) {
13+
data = { _data: undefined };
14+
Object.entries(props._data).forEach(function(entry) {
15+
data["data-" + entry[0]] = entry[1];
16+
});
17+
}
18+
return data == null ? props : Object.assign({}, props, data);
19+
}
20+
21+
exports.element_ = function(component, props, areChildrenDynamic) {
22+
var args = [component, flattenDataProp(component, props)];
23+
return createElement.apply(
24+
null,
25+
areChildrenDynamic || props.children == null
26+
? args
27+
: args.concat(props.children)
28+
);
29+
};
30+
31+
exports.elementKeyed_ = function(component, props) {
32+
return exports.element_(component, props, true);
33+
};
34+
35+
exports.global = Emotion.Global;

0 commit comments

Comments
 (0)