feat: initial first version

Author: ron0115

.github/workflows/main.yml

@@ -1,5 +1,8 @@
-name: CI
-on: [push]
+name: Deploy
+on:
+  push:
+    branches:
+      - master
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -31,12 +34,16 @@ jobs:
         env:
           CI: true
 
-      - name: Test
-        run: yarn test --ci --coverage --maxWorkers=2
-        env:
-          CI: true
+      # - name: Test
+      #   run: yarn test --ci --coverage --maxWorkers=2
+      #   env:
+      #     CI: true
 
-      - name: Build
-        run: yarn build
+      - name: Release
+        run: |
+          yarn build
+          npm run release
+          npm run deploy-storybook -- --ci
         env:
-          CI: true
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -2,7 +2,7 @@
 
 This is a hook to control your scrollbar in react component!
 
-**Live demo is [here]().**
+**Live demo is [here](https://ron0115.github.io/react-smooth-scroll-hook/?path=/docs/hooks-usesmoothscroll--docs).**
 
 Basically; `useSmoothScroll` hook checks the `HTMLElement`'s API `scrollTo`, otherwise, use `requestAnimationFrame` to finish smooth scroll behaviour!
 
@@ -22,7 +22,38 @@ npm install react-smotth-scroll-hook
 
 ## Basic Usage
 
-```javascript
+```tsx
+import React, { useRef } from 'react';
+import useSmoothScroll from 'react-smooth-scroll-hook';
+export const Demo = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollTo } = useSmoothScroll({
+    ref,
+  });
+
+  return (
+    <>
+      <button onClick={() => scrollTo('#y-20')}>scrollTo('#y-20')</button>
+      <div
+        ref={ref}
+        style={{
+          overflowY: 'scroll',
+          maxHeight: '200px',
+        }}
+      >
+        <div>
+          {Array(100)
+            .fill(null)
+            .map((_item, i) => (
+              <div key={i} id={`y-${i}`}>
+                y-{i}
+              </div>
+            ))}
+        </div>
+      </div>
+    </>
+  );
+};
 ```
 
 ## Props
@@ -31,3 +62,10 @@ npm install react-smotth-scroll-hook
 - **speed:** Distance in one frame to move, useful in `requestAnimationFrame` mode.
 - **direction:** Scroll direction
 - **threshold:** Judge scroll is finished has an error range, .defaults to `1`.
+
+### Props of scrollTo
+
+`scrollTo(string | number)`
+
+- Pass `number`: the distance to scroll
+- Pass `string`: the element seletor you want to scrollTo, passing to `document.querySelector`, such as `#id`

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -17,10 +17,13 @@
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook --docs",
+    "deploy-storybook": "storybook-to-ghpages",
+    "release": "semantic-release"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "husky": {
     "hooks": {
@@ -38,12 +41,18 @@
   "module": "dist/react-smooth-scroll-hook.esm.js",
   "devDependencies": {
     "@babel/core": "^7.11.4",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/npm": "^7.0.5",
+    "@semantic-release/release-notes-generator": "^9.0.1",
     "@storybook/addon-actions": "^6.0.16",
     "@storybook/addon-docs": "^6.0.16",
     "@storybook/addon-info": "^5.3.19",
     "@storybook/addon-links": "^6.0.16",
     "@storybook/addons": "^6.0.16",
     "@storybook/react": "^6.0.16",
+    "@storybook/storybook-deployer": "^2.8.6",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
     "babel-loader": "^8.1.0",
@@ -52,9 +61,24 @@
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
+    "semantic-release": "^17.1.1",
     "ts-loader": "^8.0.2",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.1",
     "typescript": "^4.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/git",
+      "@semantic-release/github"
+    ],
+    "branch": "master"
   }
 }

src/index.tsx

@@ -5,11 +5,11 @@ export enum Direction {
 }
 
 export type UseSmoothScrollType = {
-  /** 传入`overflow:scroll`容器的ref */
+  /** the container RefObject which use `overflow:scroll` */
   ref: React.RefObject<HTMLElement>;
-  /** 每一帧滑动的路程，单位为1px，指定后会使用rAF模式 */
+  /** distance per frame, reflects to speed while scrolling */
   speed?: number;
-  /** 滚动方向 */
+  /** scroll direction, you can use 'x` for vertical, 'y` for horizontal */
   direction?: Direction | 'x' | 'y';
   threshold?: number;
 };
@@ -22,7 +22,7 @@ export type AttrMapType = {
   offsetWidthHeight: 'offsetWidth' | 'offsetHeight';
   leftTop: 'top' | 'left';
 };
-// 获取元素与当前滚动条位置的相对距离
+// get the relative distance from destination
 const getRelativeDistance = (
   target: number | string,
   parent: HTMLElement,

stories/Demo.stories.tsx

@@ -1,12 +1,18 @@
 import React, { useRef, useState } from 'react';
 import useSmoothScroll from '../src/index';
+import { Description } from '@storybook/addon-docs/dist/blocks';
 import './index.css';
+
 export default {
   title: '@Hooks/useSmoothScroll',
   component: useSmoothScroll,
 };
 
-export const Docs = () => <></>;
+export const Docs = () => (
+  <>
+    <Description markdown={require('../README.md').default} />{' '}
+  </>
+);
 
 export const Demo = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -29,20 +35,18 @@ export const Demo = () => {
           padding: '10px',
         }}
       >
-        <div>
-          {Array(100)
-            .fill(null)
-            .map((_item, i) => (
-              <div key={i} id={`y-item-${i}`}>
-                y-item-{i}
-              </div>
-            ))}
-        </div>
+        {Array(100)
+          .fill(null)
+          .map((_item, i) => (
+            <div key={i} id={`y-item-${i}`}>
+              y-item-{i}
+            </div>
+          ))}
       </div>
     </>
   );
 };
-Demo.storyName = '基本使用';
+Demo.storyName = 'Basic';
 
 export const DirectionX = () => {
   const [speed, setSpeed] = useState(50);
@@ -61,7 +65,7 @@ export const DirectionX = () => {
         scrollTo('#x-item-40')
       </button>
       <button onClick={() => scrollTo(Infinity)}>
-        滚到底部scrollTo(Infinity)
+        scrollTo Edge - scrollTo(Infinity)
       </button>
       <button onClick={() => scrollTo(100)}>scrollTo(100)</button>
       <button onClick={() => scrollTo(-100)}>scrollTo(-100)</button>
@@ -109,4 +113,4 @@ export const DirectionX = () => {
     </>
   );
 };
-DirectionX.storyName = '横向滚动';
+DirectionX.storyName = 'More Use';