Merge pull request #134 from ankeetmaini/story

Adds storybook integration

Author: ankeetmaini

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from "@storybook/react";
+
+configure(require.context("../src", true, /\.?stories\.tsx$/), module);

.storybook/webpack.config.js

@@ -0,0 +1,16 @@
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve("awesome-typescript-loader")
+      },
+      // Optional
+      {
+        loader: require.resolve("react-docgen-typescript-loader")
+      }
+    ]
+  });
+  config.resolve.extensions.push(".ts", ".tsx");
+  return config;
+};

package.json

@@ -7,7 +7,9 @@
   "module": "dist/index.mjs",
   "unpkg": "dist/index.umd.js",
   "scripts": {
-    "build": "microbundle"
+    "build": "microbundle",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -31,11 +33,22 @@
     "react": ">=16.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.6.2",
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-info": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/addons": "^5.2.1",
+    "@storybook/react": "^5.2.1",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.1",
+    "@types/storybook__react": "^4.0.2",
     "@types/throttle-debounce": "^2.1.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
     "microbundle": "^0.11.0",
-    "react": "~15.5.4",
+    "react": "^16.10.1",
+    "react-docgen-typescript-loader": "^3.2.1",
+    "react-dom": "^16.10.1",
     "typescript": "^3.6.3"
   },
   "dependencies": {

src/index.tsx

@@ -1,12 +1,12 @@
 import React, { Component, ReactNode, CSSProperties } from "react";
-import { throttle } from 'throttle-debounce';
+import { throttle } from "throttle-debounce";
 import { ThresholdUnits, parseThreshold } from "./utils/threshold";
 
 type Fn = () => any;
 interface Props {
-  next?: Fn;
-  hasMore?: boolean;
-  children?: ReactNode;
+  next: Fn;
+  hasMore: boolean;
+  children: ReactNode;
   loader: ReactNode;
   scrollThreshold?: number | string;
   endMessage?: ReactNode;
@@ -74,7 +74,9 @@ export default class InfiniteScroll extends Component<Props, State> {
       : this._scrollableNode || window;
 
     if (this.el) {
-      this.el.addEventListener("scroll", (e) => this.throttledOnScrollListener(e as MouseEvent));
+      this.el.addEventListener("scroll", e =>
+        this.throttledOnScrollListener(e as MouseEvent)
+      );
     }
 
     if (
@@ -116,7 +118,9 @@ export default class InfiniteScroll extends Component<Props, State> {
 
   componentWillUnmount() {
     if (this.el) {
-      this.el.removeEventListener("scroll", (e) => this.throttledOnScrollListener(e as MouseEvent));
+      this.el.removeEventListener("scroll", e =>
+        this.throttledOnScrollListener(e as MouseEvent)
+      );
 
       if (this.props.pullDownToRefresh) {
         this.el.removeEventListener("touchstart", this.onStart);
@@ -191,7 +195,10 @@ export default class InfiniteScroll extends Component<Props, State> {
     // user is scrolling down to up
     if (this.currentY < this.startY) return;
 
-    if (this.currentY - this.startY >= Number(this.props.pullDownToRefreshThreshold)) {
+    if (
+      this.currentY - this.startY >=
+      Number(this.props.pullDownToRefreshThreshold)
+    ) {
       this.setState({
         pullToRefreshThresholdBreached: true
       });

src/stories/WindowInfiniteScrollComponent.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import InfiniteScroll from "../index";
+type State = {
+  data: number[];
+};
+export default class WindowInfiniteScrollComponent extends React.Component<
+  {},
+  State
+> {
+  state = {
+    data: new Array(100).fill(1)
+  };
+
+  next = () => {
+    setTimeout(() => {
+      const newData = [...this.state.data, new Array(100).fill(1)];
+      this.setState({ data: newData });
+    }, 2000);
+  };
+  render() {
+    return (
+      <>
+        <InfiniteScroll
+          hasMore={true}
+          next={this.next}
+          loader={<h1>Loading...</h1>}
+          dataLength={this.state.data.length}
+        >
+          {this.state.data.map((_, i) => (
+            <div style={{ height: 30, margin: 4, border: "1px solid hotpink" }}>
+              #{i + 1} row
+            </div>
+          ))}
+        </InfiniteScroll>
+      </>
+    );
+  }
+}

src/stories/stories.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+
+import WindowInf from "./WindowInfiniteScrollComponent";
+const stories = storiesOf("Components", module);
+
+stories.add("InfiniteScroll", () => <WindowInf />, {
+  info: { inline: true }
+});

tsconfig.json

@@ -37,7 +37,7 @@
     "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */