feat(storybook): make ts work with typescript (draft-js-plugins#1495)

.eslintrc

@@ -88,6 +88,10 @@
       "draft-js-video-plugin/lib/plugin.css",
       "draft-js-divider-plugin",
       "draft-js-divider-plugin/lib/plugin.css"
-    ]
+    ],
+    "import/resolver": {
+      "node": true,
+      "eslint-import-resolver-typescript": true
+    }
   }
 }

.storybook/config.js

@@ -2,6 +2,12 @@ import { configure } from '@storybook/react';
 
 function loadStories() {
   require('../stories');
+
+  const requests = require.context('../stories', true, /\.stories\.tsx$/);
+
+  requests.forEach(req => {
+    req.keys().forEach(fname => req(fname));
+  });
 }
 
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -55,13 +55,17 @@ module.exports = {
       },
 
       {
-        test: /\.js$/,
-        loader: 'linaria/loader',
-        options: {
-          sourceMap: true,
-        },
+        test: /\.(js|jsx|ts|tsx)?$/,
+        use: [
+          { loader: 'babel-loader' },
+          {
+            loader: 'linaria/loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
       },
-
       {
         test: /\.(png|jpg|gif|ico)$/,
         use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }],
@@ -70,6 +74,7 @@ module.exports = {
   },
 
   resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'],
     alias: {
       ...packagesAliases,
       react: path.join(__dirname, '..', 'node_modules', 'react'),

package.json

@@ -26,8 +26,8 @@
     "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/preset-env": "7.11.5",
     "@babel/preset-flow": "7.10.4",
-    "@babel/preset-typescript": "7.10.4",
     "@babel/preset-react": "7.10.4",
+    "@babel/preset-typescript": "7.10.4",
     "@babel/register": "7.11.5",
     "@storybook/react": "^5.1.11",
     "@testing-library/jest-dom": "^5.11.4",
@@ -52,6 +52,7 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.2.2",
     "eslint-config-airbnb": "^14.1.0",
+    "eslint-import-resolver-typescript": "2.3.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-mocha": "^4.8.0",
     "eslint-plugin-react": "^6.10.0",
@@ -85,10 +86,10 @@
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.2",
     "superagent": "^3.5.0",
+    "typescript": "4.0.2",
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.10.1",
-    "webpack-hot-middleware": "^2.17.1",
-    "typescript": "4.0.2"
+    "webpack-hot-middleware": "^2.17.1"
   },
   "husky": {
     "hooks": {

stories/alignment/src/SimpleAlignmentEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SimpleAlignmentEditor from './SimpleAlignmentEditor';
+
+export default {
+  title: 'EditorWithAlignmentPlugin',
+  component: SimpleAlignmentEditor,
+};
+
+export const EditorWithAlignmentPlugin = () => <SimpleAlignmentEditor />;
+
+EditorWithAlignmentPlugin.storyName = 'Editor with Alignment Plugin';

stories/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import 'draft-js/dist/Draft.css';
 
 import { storiesOf } from '@storybook/react';
-import SimpleAlignmentEditor from './alignment/src/App';
+import SimpleAlignmentEditor from './alignment/src/SimpleAlignmentEditor';
 import ResizableEditor from './resizable/src/App';
 import AnchorSimpleLinkPluginEditor from './inline-toolbar-with-anchor-plugin/src/App';
 import SimpleCounterEditor from './counter-plugin-simple/src/App';

yarn.lock

@@ -2796,6 +2796,11 @@
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
 
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -6370,6 +6375,17 @@ eslint-import-resolver-node@^0.3.1:
     debug "^2.6.8"
     resolve "^1.2.0"
 
+[email protected]:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.3.0.tgz#0870988098bc6c6419c87705e6b42bee89425445"
+  integrity sha512-MHSXvmj5e0SGOOBhBbt7C+fWj1bJbtSYFAD85Xeg8nvUtuooTod2HQb8bfhE9f5QyyNxEfgzqOYFCvmdDIcCuw==
+  dependencies:
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
 eslint-module-utils@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.1.1.tgz#abaec824177613b8a95b299639e1b6facf473449"
@@ -7533,7 +7549,7 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.1:
+glob@^7.1.1, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -14723,6 +14739,16 @@ ts-pnp@^1.1.2:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552"
   integrity sha512-f5Knjh7XCyRIzoC/z1Su1yLLRrPrFCgtUAh/9fCSP6NKbATwpOL1+idQVXQokK9GRFURn/jYPGPfegIctwunoA==
 
+tsconfig-paths@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
+  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
 tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"