v2.0.0

.babelrc

@@ -10,7 +10,7 @@
 	],
 	"env": {
 		"test": {
-			"presets": [["@babel/preset-env"], "@babel/preset-react"]
+			"presets": ["@babel/preset-env", "@babel/preset-react"]
 		}
 	}
 }

.storybook/config.js

@@ -1,9 +1,11 @@
-import { configure, setAddon, addDecorator } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
 import { jsxDecorator } from 'storybook-addon-jsx';
 import { withKnobs } from '@storybook/addon-knobs/react';
+import { withInfo } from '@storybook/addon-info';
 
 addDecorator(jsxDecorator);
 addDecorator(withKnobs);
+addDecorator(withInfo);
 
 const req = require.context('../src', true, /\.stories\.tsx?$/);
 

.storybook/webpack.config.js

@@ -7,6 +7,9 @@ module.exports = ({ config }) => {
 				options: {
 					configFileName: '.storybook/tsconfig.json'
 				}
+			},
+			{
+				loader: require.resolve('react-docgen-typescript-loader')
 			}
 		]
 	});

README.md

@@ -2,9 +2,8 @@
   <img src="https://raw.githubusercontent.com/ooade/react-rough/6a550a44fd92b34102ff74dad0703fb3c7418dcb/logo.png" height="150" />
   <h3 align="center">React Bindings for <a href="https://github.com/pshihn/rough">Rough.js</a></h3>
   <p align="center">
+  <a href="https://app.netlify.com/sites/react-rough/deploys"><img src="https://api.netlify.com/api/v1/badges/7d704f8b-50ef-41d8-862e-aad4b811e809/deploy-status" alt="Netlify Status"></a>
   <a href="https://www.npmjs.org/package/react-rough"><img src="https://img.shields.io/npm/v/react-rough.svg?style=flat-square" alt="npm"></a>
-  <a href="https://travis-ci.org/ooade/react-rough"><img src="https://img.shields.io/travis/ooade/react-rough/beta.svg?style=flat-square" alt="travis"></a>
-  <a href="https://github.com/ooade/react-rough"><img src="https://img.shields.io/codecov/c/github/ooade/react-rough.svg?style=flat-square" alt="code coverage"></a>
   <a href="https://github.com/ooade/react-rough"><img src="https://img.shields.io/npm/dm/react-rough.svg?style=flat-square" alt="downloads/month"></a>
   <a href="https://snyk.io/test/github/ooade/react-rough"><img src="https://snyk.io/test/github/ooade/react-rough/badge.svg?style=flat-square" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/ooade/react-rough" style="max-width:100%;"></a>
   <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PR(s)-welcome-brightgreen.svg?style=flat-square" alt="pullrequest"></a>
@@ -19,46 +18,24 @@
 - npm add roughjs
 ```
 
-Note: The documentation is for the beta release. For the stable release check out the [master branch](https://github.com/ooade/react-rough/tree/master)
-
-### Render a Rectangle
+### Render a Rectangle on a canvas element
 
 ```js
 import ReactRough, { Rectangle } from 'react-rough';
 
 render(
-	<ReactRough width={220} height={220}>
-		<Rectangle points={[10, 10, 200, 200]} fill="red" fillWeight={3} />
+	<ReactRough>
+		<Rectangle x={15} y={15} width={90} height={80} fill="red" />
 	</ReactRough>
 );
 ```
 
-`Note: All shapes must be nested within a ReactRough Component, it could have other surrounding elements, but it's GrandParent must be a ReactRough Component`
-
-When you grab a shape from ReactRough, it renders each shape to a canvas element. So how can we render different shapes on a single canvas element? We'll answer that below.
-
-### Render multiple shapes on one canvas element
-
-```js
-import ReactRough, { Rectangle, Circle } from 'react-rough';
-
-render(
-	<ReactRough width={200} height={400}>
-		<Circle points={[50, 50, 80]} fill="red" />
-		<Polygon
-			points={[[[690, 130], [790, 140], [750, 240], [690, 220]]]}
-			fill="blue"
-			stroke="green"
-		/>
-	</ReactRough>
-);
-```
+## Learn More
 
-## Examples
+To learn more, go through our [StoryBook](https://react-rough.dev.adegbuyi.me).
 
-- [CodeSandBox](https://codesandbox.io/s/r582mor7wq)
-- [ReactRough animated logo](https://jsfiddle.net/ooade/f8cmbfwL/)
-- Add yours...
+Visit the [Website](https://react-rough.dev.adegbuyi.me)
+![Storybook Preview](./assets/storybook.png)
 
 ## License
 

package.json

@@ -1,20 +1,17 @@
 {
 	"name": "react-rough",
-	"version": "2.0.0-rc.2",
+	"version": "2.0.0",
 	"description": "React Bindings for Rough.js",
 	"source": "src/index.tsx",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"umd": "dist/index.js",
+	"homepage": "https://react-rough.dev.adegbuyi.me",
 	"scripts": {
-		"test": "jest",
 		"lint": "eslint src/*",
-		"test:watch": "jest --watch",
-		"coverage": "jest --coverage",
 		"prepublish": "npm run build",
 		"build": "microbundle --external react,roughjs && build-storybook -c .storybook -o public",
 		"prebuild": "rimraf build dist",
-		"report-coverage": "cat ./coverage/lcov.info | codecov",
 		"storybook": "start-storybook -p 6006 -c .storybook",
 		"prettier": "prettier --write '{src,__tests__}/*.tsx' '{src,__tests__}/*.ts'"
 	},
@@ -41,26 +38,23 @@
 		"@storybook/addons": "^5.2.6",
 		"@storybook/react": "^5.2.6",
 		"@testing-library/react": "^9.3.2",
-		"@types/jest": "^24.0.23",
 		"@typescript-eslint/eslint-plugin": "^2.7.0",
 		"@typescript-eslint/parser": "^2.7.0",
 		"awesome-typescript-loader": "^5.2.1",
 		"babel-loader": "^8.0.6",
-		"codecov.io": "^0.1.6",
 		"eslint": "^6.6.0",
 		"eslint-plugin-import": "^2.18.2",
 		"eslint-plugin-react": "^7.16.0",
 		"eslint-plugin-react-hooks": "^2.3.0",
 		"ghooks": "^2.0.4",
-		"jest": "^24.9.0",
 		"microbundle": "^0.11.0",
 		"prettier": "^1.19.1",
 		"react": "^16.12.0",
+		"react-docgen-typescript-loader": "^3.6.0",
 		"react-dom": "^16.12.0",
 		"rimraf": "^3.0.0",
 		"roughjs": "^3.1.0",
 		"storybook-addon-jsx": "^7.1.13",
-		"ts-jest": "^24.2.0",
 		"typescript": "^3.7.2"
 	},
 	"dependencies": {
@@ -75,18 +69,5 @@
 		"ghooks": {
 			"pre-commit": "npm run prettier"
 		}
-	},
-	"jest": {
-		"collectCoverageFrom": [
-			"<rootDir>/src/**.tsx"
-		],
-		"moduleFileExtensions": [
-			"tsx",
-			"ts",
-			"js"
-		],
-		"transform": {
-			"^.+\\.tsx?$": "ts-jest"
-		}
 	}
 }

src/ReactRough.stories.tsx

@@ -169,26 +169,32 @@ roughStories.add('Basic Path Element', () => {
 	);
 });
 
-roughStories.add('A Car with Path and Circle', () => {
-	return (
-		<ReactRough
-			renderer="svg"
-			width={600}
-			height={600}
-			config={{ options: { roughness: 0 } }}
-		>
-			<Path d="M234.4,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C240.8,185.6,238,182.8,234.4,182.8z" />
-			<Circle x={234.4} y={189.2} diameter={2.8} />
-			<Path d="M263,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C269.4,185.6,266.6,182.8,263,182.8z" />
-			<Circle x={263} y={189.2} diameter={2.8} />
-			<Path
-				d="M275,171.4c-2.8-0.7-5.2-3-6.3-5.1l-3.9-7.4c-1.1-2.1-3.9-3.8-6.3-3.8h-22.6c-2.4,0-5,1.8-5.7,4.1l-2.4,7
+roughStories.add(
+	'A Car with Path and Circle',
+	() => {
+		return (
+			<ReactRough
+				renderer="svg"
+				width={600}
+				height={600}
+				config={{ options: { roughness: 0 } }}
+			>
+				<Path d="M234.4,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C240.8,185.6,238,182.8,234.4,182.8z" />
+				<Circle x={234.4} y={189.2} diameter={2.8} />
+				<Path d="M263,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C269.4,185.6,266.6,182.8,263,182.8z" />
+				<Circle x={263} y={189.2} diameter={2.8} />
+				<Path
+					d="M275,171.4c-2.8-0.7-5.2-3-6.3-5.1l-3.9-7.4c-1.1-2.1-3.9-3.8-6.3-3.8h-22.6c-2.4,0-5,1.8-5.7,4.1l-2.4,7
         c-0.2,0.9-1.8,5.5-5,5.5c-2.4,0-5,3.1-5,5.5v8.2c0,2.4,1.9,4.3,4.3,4.3h4.5c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-7.8
         c4.3,0,7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h13.1c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-7.8s7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h8.1
         c2.4,0,4.3-1.9,4.3-4.3v-6.5C283.2,172,277.3,172,275,171.4z"
-			/>
-			<Path d="M241.8,170.3h-12.5c0.7-1.1,1.1-2.2,1.2-2.6l2-5.9c0.6-1.9,2.8-3.5,4.8-3.5h4.5V170.3z" />
-			<Path d="M246.1,170.3v-12h10.4c2,0,4.4,1.5,5.3,3.3l3.3,6.3c0.4,0.8,1.1,1.7,2,2.4H246.1z" />
-		</ReactRough>
-	);
-});
+				/>
+				<Path d="M241.8,170.3h-12.5c0.7-1.1,1.1-2.2,1.2-2.6l2-5.9c0.6-1.9,2.8-3.5,4.8-3.5h4.5V170.3z" />
+				<Path d="M246.1,170.3v-12h10.4c2,0,4.4,1.5,5.3,3.3l3.3,6.3c0.4,0.8,1.1,1.7,2,2.4H246.1z" />
+			</ReactRough>
+		);
+	},
+	{
+		info: 'Full Credits: https://codepen.io/tinasweetpooja/pen/jAwAZz'
+	}
+);

tsconfig.json

@@ -8,5 +8,5 @@
 		"moduleResolution": "node",
 		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
 	},
-	"exclude": ["node_modules", "__tests__", "./src/*.stories.tsx"]
+	"exclude": ["node_modules", "__tests__", "dist", "./src/*.stories.tsx"]
 }