Skip to content

Commit ba24f16

Browse files
tbolistbolis
authored
Typescript & Yarn workspaces (#143)
* Refactoring package structure * Introducing Yarn workspaces * events aware implementation
1 parent ffb9ddf commit ba24f16

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+5448
-6963
lines changed

‎.babelrc

+2-18
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,4 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"],
3-
"plugins": [
4-
"@babel/plugin-transform-runtime",
5-
"react-hot-loader/babel",
6-
7-
// Stage 2 https://github.com/babel/babel/tree/master/packages/babel-preset-stage-2
8-
["@babel/plugin-proposal-decorators", { "legacy": true }],
9-
"@babel/plugin-proposal-function-sent",
10-
"@babel/plugin-proposal-export-namespace-from",
11-
"@babel/plugin-proposal-numeric-separator",
12-
"@babel/plugin-proposal-throw-expressions",
13-
14-
// Stage 3
15-
"@babel/plugin-syntax-dynamic-import",
16-
"@babel/plugin-syntax-import-meta",
17-
["@babel/plugin-proposal-class-properties", { "loose": true }],
18-
"@babel/plugin-proposal-json-strings"
19-
]
2+
"presets": ["@babel/env", "@babel/react", "@babel/preset-typescript"],
3+
"plugins": ["@babel/plugin-proposal-class-properties"]
204
}

‎.eslintrc

+23-15
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
{
2-
"parser": "babel-eslint",
3-
"plugins": ["react", "jest", "eslint-plugin-react"],
4-
"env": {
5-
"es6": true,
6-
"jest": true,
7-
"amd": true,
8-
"browser": true,
9-
"node": true
2+
"parser": "@typescript-eslint/parser",
3+
"parserOptions": {
4+
"ecmaVersion": 2020,
5+
"sourceType": "module",
6+
"ecmaFeatures": {
7+
"jsx": true
8+
}
109
},
11-
"extends": ["eslint:recommended", "plugin:react/recommended"],
12-
"globals": {
13-
"React": true,
14-
"document": true,
15-
"require": true,
16-
"window": true,
17-
"localStorage": true
10+
"plugins": ["@typescript-eslint", "react-hooks", "prettier"],
11+
"extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
12+
"rules": {
13+
"@typescript-eslint/no-var-requires": 0,
14+
"@typescript-eslint/no-explicit-any": 0,
15+
"@typescript-eslint/ban-types": 0,
16+
"react-hooks/rules-of-hooks": "error",
17+
"react-hooks/exhaustive-deps": "warn",
18+
"prettier/prettier": "error",
19+
"react/prop-types": "off"
20+
},
21+
"settings": {
22+
"react": {
23+
"pragma": "React",
24+
"version": "detect"
25+
}
1826
}
1927
}

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
node_modules
2+
lib
3+
lib-esm
4+
_bundles
5+
16
### Linux template
27
*~
38

‎.npmignore

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
.*
2+
**/tsconfig.json
3+
**/webpack.config.js
4+
node_modules
5+
src
6+
7+
18
examples/
29
test/
310
src/

‎.prettierignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,6 @@ LICENSE
1111
*.jpg
1212
.DS_Store
1313
.npmignore
14-
.gitignore
14+
.gitignore
15+
*.log
16+
*.ico

‎.prettierrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"printWidth": 85,
3+
"arrowParens": "always",
4+
"semi": true,
5+
"tabWidth": 2,
6+
"useTabs": false,
7+
"singleQuote": false,
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": true
10+
}

‎docs/react-sketch-logo-original.jpg

28 KB
Loading

‎examples/layout/tools.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from "react";
2+
import Paper from "@material-ui/core/Paper";
3+
import { makeStyles } from "@material-ui/core";
4+
import ToolSelector from "../tools/ToolSelector";
5+
import ColorSelector from "../tools/ColorSelector";
6+
import CanvasControls from "../tools/CanvasControls";
7+
import Background from "../tools/Background";
8+
import Text from "../tools/Text";
9+
import ImageControls from "../tools/ImageControls";
10+
11+
const useStyles = makeStyles((theme) => ({
12+
paper: {
13+
color: theme.palette.text.secondary,
14+
},
15+
}));
16+
17+
export default function () {
18+
const classes = useStyles();
19+
20+
const [tool, setTool] = React.useState("pencil");
21+
const [lineColor, setLineColor] = React.useState("black");
22+
const [fillColor, setFillColor] = React.useState("transparent");
23+
24+
const handleSelectTool = (event, tool) => {
25+
tool != null && setTool(tool);
26+
};
27+
28+
const handleLineColor = (color, event) => {
29+
color != null && setLineColor(color.hex);
30+
};
31+
32+
const handleFillColor = (color, event) => {
33+
color != null && setFillColor(color.hex);
34+
};
35+
36+
return (
37+
<Paper className={classes.paper}>
38+
<ToolSelector selected={tool} onChange={handleSelectTool} />
39+
<ColorSelector
40+
lineColor={lineColor}
41+
fillColor={fillColor}
42+
onChangeLineColor={handleLineColor}
43+
onChangeFillColor={handleFillColor}
44+
/>
45+
<Text />
46+
<Background />
47+
<CanvasControls />
48+
<ImageControls />
49+
</Paper>
50+
);
51+
}

‎examples/main.jsx

+22-52
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,7 @@ class SketchFieldDemo extends React.Component {
191191
<IconButton onTouchTap={(c) => this._removeMe(index)}>
192192
<ClearIcon color="white" />
193193
</IconButton>
194-
}
195-
>
194+
}>
196195
<img src={drawing} />
197196
</GridListTile>
198197
);
@@ -323,25 +322,19 @@ class SketchFieldDemo extends React.Component {
323322
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
324323
<AppBar title="Sketch Tool" position="static" style={styles.appBar}>
325324
<Toolbar>
326-
<Typography
327-
variant="h6"
328-
color="inherit"
329-
style={{ flexGrow: 1 }}
330-
>
325+
<Typography variant="h6" color="inherit" style={{ flexGrow: 1 }}>
331326
Sketch Tool
332327
</Typography>
333328
<IconButton
334329
color="primary"
335330
disabled={!this.state.canUndo}
336-
onClick={this._undo}
337-
>
331+
onClick={this._undo}>
338332
<UndoIcon />
339333
</IconButton>
340334
<IconButton
341335
color="primary"
342336
disabled={!this.state.canRedo}
343-
onClick={this._redo}
344-
>
337+
onClick={this._redo}>
345338
<RedoIcon />
346339
</IconButton>
347340
<IconButton color="primary" onClick={this._save}>
@@ -374,9 +367,7 @@ class SketchFieldDemo extends React.Component {
374367
: "transparent"
375368
}
376369
width={this.state.controlledSize ? this.state.sketchWidth : null}
377-
height={
378-
this.state.controlledSize ? this.state.sketchHeight : null
379-
}
370+
height={this.state.controlledSize ? this.state.sketchHeight : null}
380371
defaultValue={dataJson}
381372
value={controlledValue}
382373
forceValue
@@ -393,8 +384,7 @@ class SketchFieldDemo extends React.Component {
393384
<IconButton
394385
onClick={(e) =>
395386
this.setState({ expandTools: !this.state.expandTools })
396-
}
397-
>
387+
}>
398388
<ExpandMore />
399389
</IconButton>
400390
}
@@ -408,8 +398,7 @@ class SketchFieldDemo extends React.Component {
408398
label="Canvas Tool"
409399
value={this.state.tool}
410400
onChange={this._selectTool}
411-
helperText="Please select Canvas Tool"
412-
>
401+
helperText="Please select Canvas Tool">
413402
<MenuItem value={Tools.Select} key="Select">
414403
Select
415404
</MenuItem>
@@ -466,9 +455,7 @@ class SketchFieldDemo extends React.Component {
466455
<TextField
467456
label="Text"
468457
helperText="Add text to Sketch"
469-
onChange={(e) =>
470-
this.setState({ text: e.target.value })
471-
}
458+
onChange={(e) => this.setState({ text: e.target.value })}
472459
value={this.state.text}
473460
/>
474461
</div>
@@ -491,8 +478,7 @@ class SketchFieldDemo extends React.Component {
491478
this.setState({
492479
expandControls: !this.state.expandControls,
493480
})
494-
}
495-
>
481+
}>
496482
<ExpandMore />
497483
</IconButton>
498484
}
@@ -546,17 +532,15 @@ class SketchFieldDemo extends React.Component {
546532
onClick={(e) => {
547533
this._sketch.copy();
548534
this._sketch.paste();
549-
}}
550-
>
535+
}}>
551536
<CopyIcon />
552537
</IconButton>
553538
</div>
554539
<div className="col">
555540
<IconButton
556541
color="primary"
557542
disabled={!this.state.enableRemoveSelected}
558-
onClick={this._removeSelected}
559-
>
543+
onClick={this._removeSelected}>
560544
<RemoveIcon />
561545
</IconButton>
562546
</div>
@@ -572,8 +556,7 @@ class SketchFieldDemo extends React.Component {
572556
<IconButton
573557
onClick={(e) =>
574558
this.setState({ expandColors: !this.state.expandColors })
575-
}
576-
>
559+
}>
577560
<ExpandMore />
578561
</IconButton>
579562
}
@@ -585,9 +568,7 @@ class SketchFieldDemo extends React.Component {
585568
<CompactPicker
586569
id="lineColor"
587570
color={this.state.lineColor}
588-
onChange={(color) =>
589-
this.setState({ lineColor: color.hex })
590-
}
571+
onChange={(color) => this.setState({ lineColor: color.hex })}
591572
/>
592573
<br />
593574
<br />
@@ -606,9 +587,7 @@ class SketchFieldDemo extends React.Component {
606587
/>
607588
<CompactPicker
608589
color={this.state.fillColor}
609-
onChange={(color) =>
610-
this.setState({ fillColor: color.hex })
611-
}
590+
onChange={(color) => this.setState({ fillColor: color.hex })}
612591
/>
613592
</CardContent>
614593
</Collapse>
@@ -621,8 +600,7 @@ class SketchFieldDemo extends React.Component {
621600
<IconButton
622601
onClick={(e) =>
623602
this.setState({ expandBack: !this.state.expandBack })
624-
}
625-
>
603+
}>
626604
<ExpandMore />
627605
</IconButton>
628606
}
@@ -693,8 +671,7 @@ class SketchFieldDemo extends React.Component {
693671
style={styles.dropArea}
694672
activeStyle={styles.activeStyle}
695673
rejectStyle={styles.rejectStyle}
696-
onDrop={this._onBackgroundImageDrop}
697-
>
674+
onDrop={this._onBackgroundImageDrop}>
698675
Try dropping an image here,
699676
<br />
700677
or click
@@ -713,8 +690,7 @@ class SketchFieldDemo extends React.Component {
713690
<IconButton
714691
onClick={(e) =>
715692
this.setState({ expandImages: !this.state.expandImages })
716-
}
717-
>
693+
}>
718694
<ExpandMore />
719695
</IconButton>
720696
}
@@ -725,25 +701,21 @@ class SketchFieldDemo extends React.Component {
725701
<TextField
726702
label="Image URL"
727703
helperText="Copy/Paste an image URL"
728-
onChange={(e) =>
729-
this.setState({ imageUrl: e.target.value })
730-
}
704+
onChange={(e) => this.setState({ imageUrl: e.target.value })}
731705
value={this.state.imageUrl}
732706
/>
733707
<Button
734708
variant="outlined"
735709
onClick={(e) => {
736710
this._sketch.addImg(this.state.imageUrl);
737-
}}
738-
>
711+
}}>
739712
Load Image from URL
740713
</Button>
741714
</div>
742715
<br />
743716
<Button
744717
variant="outlined"
745-
onClick={(e) => this._sketch.addImg(dataUrl)}
746-
>
718+
onClick={(e) => this._sketch.addImg(dataUrl)}>
747719
Load Image from Data URL
748720
</Button>
749721
</CardContent>
@@ -759,8 +731,7 @@ class SketchFieldDemo extends React.Component {
759731
this.setState({
760732
expandControlled: !this.state.expandControlled,
761733
})
762-
}
763-
>
734+
}>
764735
<ExpandMore />
765736
</IconButton>
766737
}
@@ -773,8 +744,7 @@ class SketchFieldDemo extends React.Component {
773744
this.setState({
774745
controlledValue: dataJsonControlled,
775746
})
776-
}
777-
>
747+
}>
778748
Load controlled Value
779749
</Button>
780750
</CardContent>

0 commit comments

Comments
 (0)