feat: add storybook docs with deploy to gh-pages

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
   },
 
-  ignorePatterns: ['dist'],
+  ignorePatterns: ['dist', 'node_modules', 'coverage', 'storybook-build'],
 
   extends: [
     'airbnb',
@@ -66,12 +66,7 @@ module.exports = {
       },
       {
         selector: 'variable',
-        format: ['camelCase', 'UPPER_CASE'],
-        leadingUnderscore: 'allow',
-      },
-      {
-        selector: 'parameter',
-        format: ['camelCase'],
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
         leadingUnderscore: 'allow',
       },
       {
@@ -81,4 +76,16 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['stories/**/*', '.storybook/**/*'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+        'import/no-default-export': 'off',
+        'react/button-has-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        'react/prop-types': 'off',
+      },
+    },
+  ],
 };

.github/workflows/ci-cd.yml

@@ -87,3 +87,29 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  deploy-gh-pages:
+    name: "Deploy GH Pages"
+    runs-on: ubuntu-latest
+    needs: "semantic-release"
+    if: needs.semantic-release.outputs.new-release-published == 'true' || github.event_name == 'workflow_dispatch'
+    steps:
+      - name: "Checkout"
+        uses: actions/checkout@v2
+        with:
+          ref: "master"
+
+      - name: "Setup Node.js"
+        uses: actions/setup-node@v2
+        with:
+          node-version: 15
+
+      - name: "Install dependencies"
+        uses: bahmutov/npm-install@v1
+        with:
+          useRollingCache: true
+
+      - name: "Deploy storybook"
+        run: yarn storybook:deploy --ci
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 /coverage
 /dist
+/storybook-build

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: ['../stories/**/*.story.mdx', '../stories/**/*.story.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
+  ],
+  reactOptions: {
+    fastRefresh: true,
+  },
+};

.storybook/manager.js

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import Logo from './logo.png';
+
+addons.setConfig({
+  theme: {
+    ...themes.light,
+    brandTitle: '@react-hookz/web',
+    brandImage: Logo,
+  },
+});

.storybook/preview.js

@@ -0,0 +1,4 @@
+export const parameters = {
+  layout: 'centered',
+  viewMode: 'docs',
+};

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <h1><img src="./logo.png" alt="@react-hookz/web"></h1>
+  <h1><img src=".github/logo.png" alt="@react-hookz/web"></h1>
   <p>
     <a href="https://www.npmjs.com/package/@react-hookz/web">
       <img src="https://flat.badgen.net/npm/v/@react-hookz/web" alt="NPM Version">

package.json

@@ -23,12 +23,15 @@
     "build:tsc": "tsc -p ./tsconfig.build.json",
     "test": "jest",
     "test:coverage": "yarn test --coverage",
-    "lint": "eslint . --ext ts,js,tsx,jsx",
+    "lint": "eslint ./ ./.storybook --ext ts,js,tsx,jsx",
     "lint:fix": "yarn lint --fix",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook:watch": "start-storybook -p 6006",
+    "storybook:build": "build-storybook -o ./storybook-build",
+    "storybook:deploy": "storybook-to-ghpages -s storybook:build"
   },
   "lint-staged": {
-    "*.[tj]s?x": "eslint --fix"
+    "*.{js,jsx,ts,tsx}": "eslint --fix"
   },
   "commitlint": {
     "extends": [
@@ -54,14 +57,22 @@
     "react-dom": "^16.8 || ^17"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.16",
     "@commitlint/config-conventional": "^12.1.1",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/github": "^7.2.1",
+    "@storybook/addon-essentials": "^6.2.8",
+    "@storybook/addon-links": "^6.2.8",
+    "@storybook/addons": "^6.2.8",
+    "@storybook/react": "^6.2.8",
+    "@storybook/storybook-deployer": "^2.8.7",
+    "@storybook/theming": "^6.2.8",
     "@testing-library/react-hooks": "^5.1.1",
     "@types/jest": "^26.0.22",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "babel-loader": "^8.2.2",
     "commitlint": "^12.1.1",
     "eslint": "^7.24.0",
     "eslint-config-airbnb": "^18.2.1",

src/useUpdateEffect.ts

@@ -2,7 +2,7 @@ import { DependencyList, EffectCallback, useEffect } from 'react';
 import { useFirstMountState } from './useFirstMountState';
 
 /**
- * Effect hook that ignores the first invocation (e.g. on mount)
+ * Effect hook that ignores the first invocation (not invoked on mount)
  *
  * @param effect Effector to run on updates
  * @param deps Dependencies list, as for `useEffect` hook

stories/useUpdateEffect.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { useRerender, useUpdateEffect } from '../src';
+
+export const Example: React.FC<{ initialCount: number }> = ({ initialCount = 5 }) => {
+  const [count, setCount] = useState(initialCount);
+  const [isUpdated, setUpdated] = useState(false);
+  const rerender = useRerender();
+
+  useUpdateEffect(() => {
+    setUpdated(true);
+  }, [count]);
+
+  return (
+    <div>
+      <div>Is counter updated: {isUpdated ? 'yes' : 'no'}</div>
+      <button
+        onClick={() => {
+          setCount((i) => i + 1);
+        }}>
+        Increment counter [{count}]
+      </button>{' '}
+      <button
+        onClick={() => {
+          rerender();
+        }}>
+        Just rerender
+      </button>
+    </div>
+  );
+};

stories/useUpdateEffect.story.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Example } from './useUpdateEffect.stories';
+
+
+
+<Meta title="Lifecycle/useUpdateEffect" component={Example} />
+
+# useUpdateEffect
+
+Effect hook that ignores the first invocation (not invoked on mount)
+
+<Canvas>
+  <Story story={Example} />
+</Canvas>

tsconfig.json

@@ -8,18 +8,23 @@
       "DOM"
     ],
     "allowJs": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react"
   },
   "exclude": [
     "node_modules",
-    "dist"
+    "dist",
+    "coverage",
+    "storybook-build"
   ],
   "include": [
     "**.js",
     "**.ts",
     "src/**/*.js",
     "src/**/*.ts",
     "tests/**/*.js",
-    "tests/**/*.ts"
+    "tests/**/*.ts",
+    "stories/**/*.tsx",
+    ".storybook/*.js"
   ]
 }