upgrade dependencies & update folder structure

Author: vinothpandian

.storybook/main.js

@@ -1,4 +1,11 @@
 module.exports = {
   stories: [],
-  addons: ['@storybook/addon-knobs/register'],
+  addons: ['@storybook/addon-essentials'],
+  // uncomment the property below if you want to apply some webpack config globally
+  // webpackFinal: async (config, { configType }) => {
+  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+  //   // Return the altered config
+  //   return config;
+  // },
 };

.storybook/webpack.config.js

@@ -1,3 +1,5 @@
+const { getJestProjects } = require('@nrwl/jest');
+
 module.exports = {
-  projects: [, '<rootDir>/libs/react-sketch-canvas'],
+  projects: getJestProjects(),
 };

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

@@ -8,5 +8,9 @@
       }
     ]
   ],
-  "plugins": []
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties", { "loose": false }],
+    ["@babel/plugin-proposal-private-methods", { "loose": false }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": false }]
+  ]
 }

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

@@ -1,12 +1,22 @@
 const rootMain = require('../../../.storybook/main');
 
-rootMain.addons.push(...['@storybook/addon-docs', '@storybook/preset-scss']);
+module.exports = {
+  ...rootMain,
 
-rootMain.stories.push(
-  ...[
-    '../src/stories/**/*.stories.mdx',
-    '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
-  ]
-);
+  stories: [
+    ...rootMain.stories,
+    '../src/stories/*.stories.mdx',
+    '../src/stories/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  webpackFinal: async (config, { configType }) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.js
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType });
+    }
 
-module.exports = rootMain;
+    // add your own webpack tweaks if needed
+
+    return config;
+  },
+};

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

@@ -1,9 +1,17 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { addDecorator, addParameters } from '@storybook/react';
-
-addDecorator(withKnobs);
+import { addParameters } from '@storybook/react';
 
 addParameters({
   layout: 'centered',
   viewMode: 'docs',
+  controls: {
+    matchers: {
+      color: /(color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: {
+    source: {
+      type: 'code',
+    },
+  },
 });

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

@@ -4,6 +4,10 @@
     "emitDecoratorMetadata": true,
     "outDir": ""
   },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
   "exclude": [
     "../**/*.spec.ts",
     "../**/*.spec.js",

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

@@ -207,15 +207,8 @@ export class Canvas extends React.Component<CanvasProps> {
   /* Finally!!! Render method */
 
   render(): JSX.Element {
-    const {
-      width,
-      height,
-      className,
-      canvasColor,
-      background,
-      style,
-      paths,
-    } = this.props;
+    const { width, height, className, canvasColor, background, style, paths } =
+      this.props;
 
     return (
       <div