prepare for release

jyash97 · Feb 13, 2021 · 41203da · 41203da
1 parent 0f38173
commit 41203da
Show file tree

Hide file tree

Showing 24 changed files with 15,712 additions and 619 deletions.
diff --git a/README.md b/README.md
@@ -1,160 +1,29 @@
-# TSDX React User Guide
+A collection of React hooks to enhance `useReducer` to be more useful and powerful.
+Middleware hooks was inspired by middleware ecosystem of Redux.
 
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
+This hooks will help by abstracting complex logic like for undo-redo, or will help in debugging
+by logging action and state details.
 
-> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
-
-> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
-
-## Commands
-
-TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
-
-The recommended workflow is to run TSDX in one terminal:
-
-```bash
-npm start # or yarn start
-```
-
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-Then run the example inside another:
-
-```bash
-cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
-```
-
-The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
-
-To do a one-off build, use `npm run build` or `yarn build`.
-
-To run tests, use `npm test` or `yarn test`.
-
-## Configuration
-
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
-
-### Jest
-
-Jest tests are set up to run with `npm test` or `yarn test`.
-
-### Bundle analysis
-
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/example
-  index.html
-  index.tsx       # test your component here in a demo app
-  package.json
-  tsconfig.json
-/src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
-.gitignore
-package.json
-README.md         # EDIT THIS
-tsconfig.json
-```
-
-#### React Testing Library
-
-We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
-
-### Rollup
-
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
-
-### TypeScript
-
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
-
-## Continuous Integration
-
-### GitHub Actions
-
-Two actions are added by default:
-
-- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
-- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
-
-## Optimizations
-
-Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
-
-```js
-// ./types/index.d.ts
-declare var __DEV__: boolean;
-
-// inside your code...
-if (__DEV__) {
-  console.log('foo');
-}
-```
-
-You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
-
-## Module Formats
-
-CJS, ESModules, and UMD module formats are supported.
-
-The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
-
-## Deploying the Example Playground
-
-The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
+## Install
 
 ```bash
-cd example # if not already in the example folder
-npm run build # builds to dist
-netlify deploy # deploy the dist folder
+# Using Yarn:
+yarn add middleware-hooks
 ```
 
-Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
-
 ```bash
-netlify init
-# build command: yarn build && cd example && yarn && yarn build
-# directory to deploy: example/dist
-# pick yes for netlify.toml
+# Using NPM:
+npm i middleware-hooks
 ```
 
-## Named Exports
-
-Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
-
-## Including Styles
+## Features
 
-There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+- Simple API
+- Easy to learn and use
+- Lightweight
 
-For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+---
 
-## Publishing to NPM
-
-We recommend using [np](https://github.com/sindresorhus/np).
-
-## Usage with Lerna
-
-When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
-
-The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
-
-Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
-
-```diff
-   "alias": {
--    "react": "../node_modules/react",
--    "react-dom": "../node_modules/react-dom"
-+    "react": "../../../node_modules/react",
-+    "react-dom": "../../../node_modules/react-dom"
-   },
-```
+## Docs
 
-An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
+Please visit [here](https://middleware-hooks.netlify.app).
diff --git a/example/index.tsx b/example/index.tsx
@@ -1,27 +1,35 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { usePersist, resetStorage } from '../.';
+import { redoAction, undoAction, useUndoRedo } from '../.';
 
-const nameReducer = (state = 0, action) => {
-  if (action.type === 'CHANGE') {
-    return { name: action.payload };
+const countReducer = (state, action) => {
+  if (action.type === 'INC') {
+    return state + 1;
   }
 
   return state;
 };
 
+const increment = () => ({
+  type: 'INC',
+});
+
 export default function App() {
-  const [store, dispatch] = usePersist(nameReducer, { name: '' });
+  const { store: count, dispatch, hasPast, hasFuture } = useUndoRedo(
+    countReducer,
+    0
+  );
   return (
     <div className="App">
-      <h1>{store.name}</h1>
-      <input
-        value={store.name}
-        onChange={e => dispatch({ type: 'CHANGE', payload: e.target.value })}
-      />
-
-      <button onClick={() => dispatch(resetStorage())}>Reset</button>
+      <h1>{count}</h1>
+      <button onClick={() => dispatch(increment())}>Increment</button>
+      <button disabled={!hasPast} onClick={() => dispatch(undoAction())}>
+        UNDO
+      </button>
+      <button disabled={!hasFuture} onClick={() => dispatch(redoAction())}>
+        REDO
+      </button>
     </div>
   );
 }

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,9 +15,11 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "prepare": "yarn build && yarn prepare-site",
     "size": "size-limit",
-    "analyze": "size-limit --why"
+    "analyze": "size-limit --why",
+    "site": "cd site && yarn start",
+    "prepare-site": "cd site && yarn"
   },
   "peerDependencies": {
     "react": ">=16"

diff --git a/site/gatsby-config.js b/site/gatsby-config.js
@@ -1,13 +1,11 @@
 module.exports = {
   siteMetadata: {
-    siteTitle: `Rocket Docs`,
-    defaultTitle: `Rocket Docs`,
-    siteTitleShort: `Rocket Docs`,
-    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,
-    siteUrl: `https://rocketdocs.netlify.com`,
-    siteAuthor: `@rocketseat`,
-    siteImage: `/banner.png`,
-    siteLanguage: `en`,
+    siteTitle: `Middleware Hooks`,
+    defaultTitle: `Middleware Hooks`,
+    siteTitleShort: `Middleware Hooks`,
+    siteDescription: `A collection of React hooks to upgrade the existing 'useReducer' hooks`,
+    siteUrl: `https://middleware-hooks.netlify.app`,
+    siteAuthor: `@jyash97`,
     themeColor: `#8257E6`,
     basePath: `/`,
   },
@@ -17,15 +15,15 @@ module.exports = {
       options: {
         configPath: `src/config`,
         docsPath: `src/docs`,
-        githubUrl: `https://github.com/rocketseat/gatsby-themes`,
-        baseDir: `examples/gatsby-theme-docs`,
+        githubUrl: `https://github.com/jyash97/middleware-hooks`,
+        baseDir: `site/`,
       },
     },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `Rocketseat Gatsby Themes`,
-        short_name: `RS Gatsby Themes`,
+        name: `Middleware Hooks`,
+        short_name: `Middleware Hooks`,
         start_url: `/`,
         background_color: `#ffffff`,
         display: `standalone`,
@@ -43,7 +41,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-canonical-urls`,
       options: {
-        siteUrl: `https://rocketdocs.netlify.com`,
+        siteUrl: `https://middleware-hooks.netlify.app`,
       },
     },
     `gatsby-plugin-offline`,

diff --git a/site/package.json b/site/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "gatsby-starter-rocket-docs",
+  "name": "middleware-hooks-site",
   "private": true,
   "version": "1.0.0",
-  "description": "Out of the box Gatsby Starter for creating documentation websites easily and quickly. With support for MDX, code highlight, Analytics, SEO and more",
-  "author": "João Pedro Schmitz <[email protected]> (@jpedroschmitz)",
+  "description": "Site for middleware hooks",
+  "author": "jyash97",
   "license": "MIT",
   "starter-name": "gatsby-starter-rocket-docs",
   "dependencies": {

diff --git a/site/src/@rocketseat/gatsby-theme-docs/components/Logo.js b/site/src/@rocketseat/gatsby-theme-docs/components/Logo.js
@@ -0,0 +1,3 @@
+export default function Logo() {
+  return null;
+}
diff --git a/site/src/@rocketseat/gatsby-theme-docs/text/index.mdx b/site/src/@rocketseat/gatsby-theme-docs/text/index.mdx
@@ -1,22 +1,29 @@
 # Introduction
 
-Rocket Docs is a complete and awesome Gatsby Theme for documentation websites. We've
-developed it to be easy to use and customize. Forget about other
-things and focus on what matters: **writing docs.**
+A collection of React hooks to enhance `useReducer` to be more useful and powerful.
+Middleware hooks was inspired by middleware ecosystem of Redux.
+
+This hooks will help by abstracting complex logic like for undo-redo, or will help in debugging
+by logging action and state details.
+
+## Install
+
+```bash
+# Using Yarn:
+yarn add middleware-hooks
+```
+
+```bash
+# Using NPM:
+npm i middleware-hooks
+```
 
 ## Features
 
-- 📝 MDX for docs;
-- 🛣 Yaml-based sidebar navigation;
-- 📱 Responsive and mobile friendly;
-- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
-- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
-- 📈 Google Analytics support;
-- 📄 Custom docs schema;
-- 🖱 Table of Contents;
-- ⚡️ Offline Support & WebApp Manifest;
-- and much more 🔥
+- Simple API
+- Easy to learn and use
+- Lightweight
 
-<br />
+---
 
-[Get started now!](/getting-started)
+Please read the documentation before using any hooks.
diff --git a/site/src/config/sidebar.yml b/site/src/config/sidebar.yml
@@ -1,24 +1,16 @@
-# Sidebar navigation
-
 - label: 'Introduction'
   link: '/'
-- label: 'Getting started'
-  link: '/getting-started'
 - label: Usage
   items:
-    - label: 'Creating docs'
-      link: '/usage/creating-docs'
-    - label: 'Navigation'
-      link: '/usage/navigation'
-    - label: 'Shadowing'
-      link: '/usage/shadowing'
-- label: More
-  items:
-    - label: FAQ
-      link: /faq
-    - label: Changelog
-      link: /changelog
+    - label: 'useUndoRedo'
+      link: '/usage/use-undo-redo'
+    - label: 'useLogger'
+      link: '/usage/use-logger'
+    - label: 'useThunk'
+      link: '/usage/use-thunk'
+    - label: 'usePersist'
+      link: '/usage/use-persist'
 - label: Community
   items:
     - label: 'Github'
-      link: https://github.com/rocketseat/gatsby-themes
+      link: https://github.com/jyash97/middleware-hooks