move to nx

* remove pepjs
* add storybook docs

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -1,10 +1,39 @@
-/coverage
-/demo/dist
-/es
-/lib
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
 /node_modules
-/umd
-npm-debug.log*
 
-.vscode/
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
 yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage

.prettierrc

@@ -1,3 +1,3 @@
 {
-  "singleQuote": false
-}
+  "singleQuote": true
+}

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: [],
+  addons: ['@storybook/addon-knobs/register'],
+};

.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.base.json",
+  "exclude": [
+    "../**/*.spec.js",
+    "../**/*.spec.ts",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": ["../**/*"]
+}

.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+/**
+ * Export a function. Accept the base config as the only param.
+ * @param {Object} options
+ * @param {Required<import('webpack').Configuration>} options.config
+ * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
+ */
+module.exports = async ({ config, mode }) => {
+  // Make whatever fine-grained changes you need
+
+  // Return the altered config
+  return config;
+};

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner",
+    "dbaeumer.vscode-eslint"
+  ]
+}

CONTRIBUTING.md

@@ -1,25 +1,19 @@
 ## Prerequisites
 
-[Node.js](http://nodejs.org/) >= v4 must be installed.
+[Node.js](http://nodejs.org/) >= v14.17.0 must be installed.
 
 ## Installation
 
-- Running `npm install` in the component's root directory will install everything you need for development.
+- Running `yarn install` in the component's root directory will install everything you need for development.
 
 ## Demo Development Server
 
-- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+- `yarn start` will run a development server with the component's demo app at [http://localhost:4200](http://localhost:4200) with hot module reloading.
 
 ## Running Tests
 
-- `npm test` will run the tests once.
-
-- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
-
-- `npm run test:watch` will run the tests on every change.
+- `yarn test react-sketch-canvas` will run the tests once.
 
 ## Building
 
-- `npm run build` will build the component for publishing to npm and also bundle the demo app.
-
-- `npm run clean` will delete built resources.
+- `yarn build react-sketch-canvas` will build the component for publishing to npm and also bundle the demo app.

README.md

@@ -1,17 +1,25 @@
+
+
 <p align="center">
   <img src="https://i.imgur.com/ajs39FC.png" height="150" alt="React Sketch Canvas" />
 </p>
-
+<br/>
 <h3 align="center">
   Freehand vector drawing tool for React using SVG as canvas 🖌
 </h3>
-<br>
+<br/>
+<br/>
 <div align="center">
 
-[![npm version](https://badge.fury.io/js/react-sketch-canvas.svg)](https://badge.fury.io/js/react-sketch-canvas)<space><space>
+![npm](https://img.shields.io/npm/v/react-sketch-canvas?style=flat-square) &nbsp;&nbsp; ![NPM](https://img.shields.io/npm/l/react-sketch-canvas?style=flat-square) &nbsp;&nbsp; ![npm](https://img.shields.io/npm/dm/react-sketch-canvas?style=flat-square) <br/>
+![npm bundle size](https://img.shields.io/bundlephobia/min/react-sketch-canvas?style=flat-square) &nbsp;&nbsp; ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-sketch-canvas?style=flat-square)
+<br/>
+This project was generated using [Nx](https://nx.dev).
 
 </div>
 
+
+
 ## Overview
 
 ### Features
@@ -21,8 +29,8 @@
 
 ### Requirements
 
-- **<span style="color:red">**Requires React 16.4**</span>**
-- **Depends on [Immer] and [pepjs]**
+- **<span style="color:red">**Requires React >= 16.4**</span>**
+- **Depends on [Immer]**
 
 ### Wanna test React Sketch Canvas before using it?
 
@@ -207,12 +215,11 @@ interface CanvasPath {
 - Philipp Spiess' [tutorial][based-on]
 - Draws smooth curves, thanks to François Romain's [tutorial][smooth-curve-tutorial]
 - Immer [link][immer]
-- Pepjs [link][pepjs]
+
 
 ---
 
 [based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/
 [smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
 [css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
 [immer]: https://immerjs.github.io/immer/docs/introduction
-[pepjs]: https://github.com/jquery/PEP#readme

apps/react-sketch-canvas-e2e/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/plugins/index.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "no-undef": "off"
+      }
+    }
+  ]
+}

apps/react-sketch-canvas-e2e/cypress.json

@@ -0,0 +1,13 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "pluginsFile": "./src/plugins/index",
+  "supportFile": "./src/support/index.ts",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/react-sketch-canvas-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/react-sketch-canvas-e2e/screenshots",
+  "chromeWebSecurity": false,
+  "baseUrl": "http://localhost:4400"
+}

apps/react-sketch-canvas-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]"
+}

apps/react-sketch-canvas-e2e/src/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript file using Nx helper
+  on('file:preprocessor', preprocessTypescript(config));
+};

apps/react-sketch-canvas-e2e/src/support/commands.ts

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/react-sketch-canvas-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/react-sketch-canvas-e2e/tsconfig.e2e.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}

apps/react-sketch-canvas-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.e2e.json"
+    }
+  ]
+}

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "babelrcRoots": ["*"]
+}