add stories

Author: brainkim

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import "@storybook/addon-storysource/register";

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+ req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,9 @@
+module.exports = function({ config }) {
+ config.module.rules.push({
+ test: /\.stories\.jsx?$/,
+ loaders: [require.resolve('@storybook/source-loader')],
+ enforce: 'pre',
+ });
+
+ return config;
+};

package.json

@@ -19,19 +19,28 @@
  "prebuild": "yarn run clean",
  "build": "rollup -c rollup.config.js",
  "clean": "shx rm -rf ./lib",
- "lint": "eslint --ext ts src",
+ "lint": "eslint --ignore-path .gitignore .",
  "prepublishOnly": "yarn run test && yarn run build",
- "test": "jest --config jest.config.js --rootDir --color"
+ "test": "jest --config jest.config.js --color",
+ "start-storybook": "start-storybook -p 1337",
+ "build-storybook": "build-storybook"
  },
  "dependencies": {
  "@repeaterjs/repeater": "^2.0.0"
  },
  "devDependencies": {
+ "@babel/core": "^7.5.5",
+ "@storybook/addon-actions": "^5.2.0",
+ "@storybook/addon-links": "^5.2.0",
+ "@storybook/addon-storysource": "^5.2.0",
+ "@storybook/addons": "^5.2.0",
+ "@storybook/react": "^5.2.0",
  "@testing-library/react-hooks": "^2.0.1",
  "@types/jest": "^24.0.18",
  "@types/react": "^16.9.2",
  "@typescript-eslint/eslint-plugin": "^2.0.0",
  "@typescript-eslint/parser": "^2.0.0",
+ "babel-loader": "^8.0.6",
  "eslint": "^6.2.1",
  "eslint-config-prettier": "^6.1.0",
  "eslint-plugin-jest": "^22.15.2",

rollup.config.js

@@ -2,7 +2,7 @@ import path from "path";
 import typescript from "rollup-plugin-typescript2";
 
 const root = process.cwd();
-const pkg = require(path.join(root, "package.json"));
+const pkg = require(path.join(root, "package.json")); // eslint-disable-line
 
 export default {
  input: path.join(root, "src/react-hooks.ts"),
@@ -19,4 +19,5 @@ export default {
  },
  ],
  plugins: [typescript()],
+ external: ["react", "@repeaterjs/repeater"],
 };

src/react-hooks.ts

@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
 import { Push, Repeater, RepeaterBuffer, Stop } from "@repeaterjs/repeater";
 
+type PrimedRepeaterTuple<T> = [Repeater<T>, Push<T>, Stop];
 // Repeaters are lazy, hooks are eager.
 // We need to return push and stop synchronously from the useRepeater hook so
 // we prime the repeater by calling next immediately.
 function createPrimedRepeater<T>(
  buffer?: RepeaterBuffer<T>,
-): [Repeater<T>, Push<T>, Stop] {
+): PrimedRepeaterTuple<T> {
  let push: Push<T>;
  let stop: Stop;
  const repeater = new Repeater((push1, stop1) => {
@@ -22,7 +23,7 @@ function createPrimedRepeater<T>(
 
 export function useRepeater<T>(
  buffer?: RepeaterBuffer<T>,
-): [Repeater<T>, Push<T>, Stop] {
+): PrimedRepeaterTuple<T> {
  const [tuple] = useState(() => createPrimedRepeater(buffer));
  return tuple;
 }

stories/index.stories.js

@@ -0,0 +1,23 @@
+import React from "react"; // eslint-disable-line
+import { storiesOf } from "@storybook/react";
+import { useResult } from "../lib/react-hooks.esm";
+
+storiesOf("@repeaterjs/react-hooks", module)
+ .add("incrementing counter", () => {
+ const result = useResult(async function*() {
+ let i = 0;
+ while (true) {
+ yield i++;
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ }
+ });
+
+ if (result == null) {
+ return null;
+ }
+
+ return <div>Current value: {result.value}</div>;
+ })
+ .add("with some emoji", () => {
+ return <div>Yo world</div>;
+ });

tsconfig.json

@@ -1,4 +1,7 @@
 {
+"files": [
+"src/react-hooks.ts"
+],
  "compilerOptions": {
  /* Basic Options */
  "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */