feat(virtualtree): added virtual tree demo styles and added support for typescript story

Author: Adrian Florescu

.storybook/config.js

@@ -1,8 +1,11 @@
 import { configure } from '@storybook/react';
+
 import { configureActions } from '@storybook/addon-actions';
 configureActions()
+
+const req = require.context('../stories', true, /\.stories\.tsx$/);
 function loadStories() {
-  require('../stories/index.js');
-  // You can require as many stories as you need.
+  req.keys().forEach(req);
 }
+
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -3,7 +3,7 @@ const path = require("path");
 module.exports = async ({ config, mode }) => {
   config.module.rules.push({
     test: /\.tsx?$/,
-    include: path.resolve(__dirname, "../src"),
+    include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../stories")],
     use: [
       require.resolve("awesome-typescript-loader"),
       require.resolve("react-docgen-typescript-loader"),

package-lock.json

@@ -83,5 +83,8 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "@types/storybook__addon-info": "^4.1.2"
   }
 }

package.json

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// Addons
+import { withInfo } from "@storybook/addon-info";
+import { action } from '@storybook/addon-actions';
+
+
+// Components 
+import VirtualTree from '../src/components/VirtualTree/VirtualTree'
+import { data as originalNodes } from '../src/components/VirtualTree/data/customData';
+
+
+const VirtualTreeStories = storiesOf("VirtualTree", module).addDecorator(withInfo);
+
+const buttonStyle = {
+  border: 0,
+  fontSize: '14px',
+  marginRight: '10px',
+  height: '24px',
+  width: '24px',
+  lineHeight: '24px',
+  background: '#E7D3AF',
+  borderRadius: '50%',
+  fontFamily: 'PT Mono, monospace'
+}
+
+VirtualTreeStories.add( 
+  "VirtualTree",
+  () => (
+    <VirtualTree nodes={originalNodes} allExpanded={false}>
+      {({ style, node, index, selectNode, expandOrCollapse }) => {
+          return (
+            <div style={style}>
+              <div
+              style={{
+                overflow: 'auto',
+                borderBottom: '1px solid #fff',
+                fontFamily: 'sans-serif',
+                fontSize: '15px',
+                color: '#775E32',
+              }}
+              >
+                <p
+                  style={{
+                    padding: '10px 0',
+                    paddingLeft: node.nesting * 20 + 'px',
+                    background: '#FFF1F1',
+                    margin: '0',
+                    display: 'block',
+                    lineHeight: '24px'
+                    
+                  }}
+                >
+                  {node.hasChildren ? (
+                    <button
+                      style={buttonStyle}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        action('a')('Row clicked')
+                        expandOrCollapse(node.path);
+                      }}
+                    >
+                      {node.expanded ? '-' : '+'}
+                    </button>
+                  ) : (
+                      <button style={{...buttonStyle, background: '#fff'}}>-</button>
+                    )}
+                  <label htmlFor={node.path}>
+                    Path: {node.path} / i: {node.i} / Name: {node.name}
+                  </label>
+                </p>
+              </div>
+            </div>
+          )
+      }}
+    </VirtualTree>
+  )
+)

stories/index.js

@@ -1,13 +1,27 @@
 {
   "compilerOptions": {
+    "outDir": "build/lib",
+    "module": "commonjs",
     "target": "es5",
-    "module": "commonjs", //still get umd output by using libraryTarget: "umd" in webpack.config.js
-    "declaration": true,
-    "outDir": "./dist",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
     "jsx": "react",
+    "moduleResolution": "node",
+    "rootDirs": ["src", "stories"],
+    "baseUrl": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "scripts"]
 }