chore: init

README.md

@@ -1,5 +1,28 @@
-# react-utils
-react utils
+# @planjs/react-utils
+React Utils Library.
 
-## TODO
-- [ ] debounce use lodash debounce
+![NPM version](https://img.shields.io/npm/v/@planjs/react-utils.svg?style=flat)
+![NPM downloads](https://img.shields.io/npm/dm/@planjs/react-utils.svg?style=flat)
+
+## 📦 Install
+npm:
+```shell
+npm i @planjs/react-utils --save
+```
+yarn
+```shell
+yarn add @planjs/react-utils
+```
+
+## 🔥 API
+- `react hooks` collect
+
+## 🔨 Usage
+
+```typescript
+import { useMergeState } from '@planjs/react-utils';
+```
+
+## ✅ License
+
+[MIT](https://github.com/planjs/react-utils/blob/main/README.md)

package.json

@@ -1,8 +1,11 @@
 {
   "name": "@planjs/react-utils",
   "version": "0.0.15",
-  "description": "React tool collection",
-  "keywords": [],
+  "description": "React Utils Library",
+  "keywords": [
+    "react",
+    "react-hook"
+  ],
   "homepage": "https://github.com/planjs/react-utils#readme",
   "bugs": {
     "url": "https://github.com/planjs/react-utils/issues"

website/package.json

@@ -10,6 +10,7 @@
     "serve": "docusaurus serve",
     "start": "docusaurus start",
     "swizzle": "docusaurus swizzle",
+    "typecheck": "tsc",
     "write-heading-ids": "docusaurus write-heading-ids",
     "write-translations": "docusaurus write-translations"
   },
@@ -36,5 +37,13 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "url-loader": "^4.1.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.6",
+    "@tsconfig/docusaurus": "^1.0.4",
+    "@types/react": "^17.0.14",
+    "@types/react-helmet": "^6.1.2",
+    "@types/react-router-dom": "^5.1.8",
+    "typescript": "^4.3.5"
   }
 }

website/src/components/HomepageFeatures.js → website/src/components/HomepageFeatures.tsx

@@ -1,11 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
 
-const FeatureList = [
+type FeatureItem = {
+  title: string;
+  image: string;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+    image: '/img/undraw_docusaurus_mountain.svg',
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and used to get your
@@ -15,7 +27,7 @@ const FeatureList = [
   },
   {
     title: 'Focus on What Matters',
-    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    image: '/img/undraw_docusaurus_tree.svg',
     description: (
       <>
         Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead and move your
@@ -25,7 +37,7 @@ const FeatureList = [
   },
   {
     title: 'Powered by React',
-    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+    image: '/img/undraw_docusaurus_react.svg',
     description: (
       <>
         Extend or customize your website layout by reusing React. Docusaurus can be extended while
@@ -35,11 +47,11 @@ const FeatureList = [
   },
 ];
 
-function Feature({ Svg, title, description }) {
+function Feature({ title, image, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} alt={title} />
+        <img className={styles.featureSvg} alt={title} src={image} />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>
@@ -49,7 +61,7 @@ function Feature({ Svg, title, description }) {
   );
 }
 
-export default function HomepageFeatures() {
+export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">

website/src/pages/index.js → website/src/pages/index.tsx

@@ -23,7 +23,7 @@ function HomepageHeader() {
   );
 }
 
-export default function Home() {
+export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout

website/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}