chore: Move to Storybook to show off editor capabilities and local development

Author: tommoor

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,5 @@
+
+export const parameters = {
+  layout: "padded",
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

README.md

@@ -299,7 +299,7 @@ This project uses [yarn](https://yarnpkg.com) to manage dependencies. You can us
 yarn install
 ```
 
-When running in development [webpack-serve](https://github.com/webpack-contrib/webpack-serve) is included to serve an example editor with hot reloading. After installing dependencies run `yarn start` to get going.
+When running in development Storybook is included to example editors with hot reloading. After installing dependencies run `yarn start` to get going.
 
 When developing using `yarn link`, you can use `yarn watch` to continuously rebuild on change into `dist` as you make changes.
 

example/dist/index.html

@@ -9,10 +9,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet",
-    "start": "webpack-serve --config example/webpack.config.js --port 9000",
+    "start": "start-storybook -p 6006",
     "build": "tsc",
     "prepublish": "yarn build",
-    "watch": "yarn tsc-watch"
+    "watch": "yarn tsc-watch",
+    "build-storybook": "build-storybook"
   },
   "serve": {
     "open": true,
@@ -51,6 +52,11 @@
     "styled-components": "^5.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@storybook/addon-actions": "^6.1.17",
+    "@storybook/addon-essentials": "^6.1.17",
+    "@storybook/addon-links": "^6.1.17",
+    "@storybook/react": "^6.1.17",
     "@types/lodash": "^4.14.149",
     "@types/markdown-it": "^10.0.1",
     "@types/prosemirror-commands": "^1.0.1",
@@ -70,6 +76,7 @@
     "@types/styled-components": "^4.4.2",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
+    "babel-loader": "^8.2.2",
     "eslint": "^7.13.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-config-react-app": "^6.0.0",
@@ -85,10 +92,7 @@
     "source-map-loader": "^0.2.4",
     "styled-components": "^5.2.1",
     "ts-loader": "^6.2.1",
-    "tsc-watch": "^4.2.9",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3",
-    "webpack-serve": "^3.2.0"
+    "tsc-watch": "^4.2.9"
   },
   "resolutions": {
     "yargs-parser": "^15.0.1"

example/src/index.js

@@ -107,7 +107,7 @@ export default class CodeFence extends Node {
     return () => setBlockType(type);
   }
 
-  keys({ type, schema }) {
+  keys({ type }) {
     return {
       "Shift-Ctrl-\\": setBlockType(type),
       "Shift-Enter": (state, dispatch) => {

example/webpack.config.js

@@ -21,7 +21,7 @@ export default class ListItem extends Node {
     };
   }
 
-  keys({ type, schema }) {
+  keys({ type }) {
     return {
       Enter: splitListItem(type),
       Tab: sinkListItem(type),