chore: upgrade dependencies (#440)

thebuilder · Jan 18, 2021 · 975bff0 · 975bff0 · vercel · Jan 18, 2021
1 parent e99172e
commit 975bff0
Show file tree

Hide file tree

Showing 7 changed files with 975 additions and 936 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,35 +4,32 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+**Describe the bug** A clear and concise description of what the bug is.
 
-**To Reproduce**
-Try and recreate the issue in a **Codesandbox**:
+**To Reproduce** Try and recreate the issue in a **Codesandbox**:
 
 - [Edit useInView](https://codesandbox.io/s/useinview-ud2vo?fontsize=14&hidenavigation=1&theme=dark)
 - [Edit InView render props](https://codesandbox.io/s/inview-render-props-hvhcb?fontsize=14&hidenavigation=1&theme=dark)
 - [Edit InView plain children](https://codesandbox.io/s/inview-plain-children-vv51y?fontsize=14&hidenavigation=1&theme=dark)
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+**Expected behavior** A clear and concise description of what you expected to
+happen.
 
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+**Screenshots** If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
 
-**Additional context**
-Add any other context about the problem here.
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context** Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,17 +4,16 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+**Is your feature request related to a problem? Please describe.** A clear and
+concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+**Describe the solution you'd like** A clear and concise description of what you
+want to happen.
 
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+**Describe alternatives you've considered** A clear and concise description of
+any alternative solutions or features you've considered.
 
-**Additional context**
-Add any other context or screenshots about the feature request here.
+**Additional context** Add any other context or screenshots about the feature
+request here.
diff --git a/README.md b/README.md
@@ -2,8 +2,7 @@
 
 [![Version Badge][npm-version-svg]][package-url]
 [![GZipped size][npm-minzip-svg]][bundlephobia-url]
-[![Test][test-image]][test-url]
-[![License][license-image]][license-url]
+[![Test][test-image]][test-url] [![License][license-image]][license-url]
 [![Downloads][downloads-image]][downloads-url]
 
 React implementation of the
@@ -19,10 +18,11 @@ to tell you when an element enters or leaves the viewport. Contains both a
 
 - 🎣 **Hooks or Component API** - With `useInView` it's easier than ever to
   monitor elements
-- ⚡️ **Optimized performance** - Reuses Intersection Observer instances
-  where possible
+- ⚡️ **Optimized performance** - Reuses Intersection Observer instances where
+  possible
 - ⚙️ **Matches native API** - Intuitive to use
-- 🧪 **Ready to test** - Mocks the Intersection Observer for easy testing with [Jest](https://jestjs.io/)
+- 🧪 **Ready to test** - Mocks the Intersection Observer for easy testing with
+  [Jest](https://jestjs.io/)
 - 🌳 **Tree-shakeable** - Only include the parts you use
 - 💥 **Tiny bundle** [~1.7 kB gzipped][bundlephobia-url]
 
@@ -145,16 +145,16 @@ export default Component;
 Provide these as props on the **`<InView />`** component or as the options
 argument for the hooks.
 
-| Name                   | Type               | Default   | Required | Description                                                                                                                                                                                                                                                                                 |
-| ---------------------- | ------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **root**               | Element            | document  | false    | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used. |
-| **rootMargin**         | string             | '0px'     | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                                                                                          |
-| **threshold**          | number \| number[] | 0         | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                              |
-| **trackVisibility** 🧪 | boolean            | false     | false    | A boolean indicating whether this IntersectionObserver will track changes in a target’s visibility.                                                                                                                                                                                         |
-| **delay** 🧪           | number             | undefined | false    | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`.                                                                                                       |
-| **skip**               | boolean            | false     | false    | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept.                                                                                                               |
-| **triggerOnce**        | boolean            | false     | false    | Only trigger the observer once.                                                                                                                                                                                                                                                             |
-| **initialInView**      | boolean            | false     | false    | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves.                                                                                                            |
+| Name                   | Type                   | Default   | Required | Description                                                                                                                                                                                                                                                                                   |
+| ---------------------- | ---------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **root**               | `Element`              | document  | false    | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used. |
+| **rootMargin**         | `string`               | '0px'     | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                                                                                            |
+| **threshold**          | `number` \| `number[]` | 0         | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                                |
+| **trackVisibility** 🧪 | `boolean`              | false     | false    | A boolean indicating whether this IntersectionObserver will track changes in a target’s visibility.                                                                                                                                                                                           |
+| **delay** 🧪           | `number`               | undefined | false    | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`.                                                                                                         |
+| **skip**               | `boolean`              | false     | false    | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept.                                                                                                                 |
+| **triggerOnce**        | `boolean`              | false     | false    | Only trigger the observer once.                                                                                                                                                                                                                                                               |
+| **initialInView**      | `boolean`              | false     | false    | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves.                                                                                                              |
 
 ### InView Props
 
@@ -345,13 +345,16 @@ async function loadPolyfills() {
 
 [package-url]: https://npmjs.org/package/react-intersection-observer
 [npm-version-svg]: https://img.shields.io/npm/v/react-intersection-observer.svg
-[npm-minzip-svg]: https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
+[npm-minzip-svg]:
+  https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
 [bundlephobia-url]:
   https://bundlephobia.com/result?p=react-intersection-observer
 [license-image]: http://img.shields.io/npm/l/react-intersection-observer.svg
 [license-url]: LICENSE
 [downloads-image]: http://img.shields.io/npm/dm/react-intersection-observer.svg
 [downloads-url]:
   http://npm-stat.com/charts.html?package=react-intersection-observer
-[test-image]: https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg 
-[test-url]: https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
+[test-image]:
+  https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
+[test-url]:
+  https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
diff --git a/package.json b/package.json
@@ -126,63 +126,64 @@
       "jest-setup.js"
     ]
   },
-  "dependencies": {},
+  "dependencies": {
+  },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.12.9",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@babel/preset-flow": "^7.9.0",
-    "@babel/preset-react": "^7.12.7",
+    "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.1.9",
-    "@storybook/addon-controls": "^6.1.9",
-    "@storybook/addon-docs": "^6.1.9",
-    "@storybook/addon-viewport": "^6.1.9",
-    "@storybook/react": "^6.1.9",
-    "@storybook/theming": "^6.1.9",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@types/jest": "^26.0.15",
+    "@storybook/addon-actions": "^6.1.14",
+    "@storybook/addon-controls": "^6.1.14",
+    "@storybook/addon-docs": "^6.1.14",
+    "@storybook/addon-viewport": "^6.1.14",
+    "@storybook/react": "^6.1.14",
+    "@storybook/theming": "^6.1.14",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@types/jest": "^26.0.20",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
-    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
     "autoprefixer": "^9",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-dev-expression": "^0.2.2",
     "concurrently": "^5.1.0",
     "coveralls": "^3.0.11",
-    "eslint": "^7.14.0",
+    "eslint": "^7.18.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "framer-motion": "^2.9.4",
-    "husky": "^4.2.5",
-    "intersection-observer": "^0.11.0",
+    "framer-motion": "^3.2.1",
+    "husky": "^4.3.8",
+    "intersection-observer": "^0.12.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.2",
-    "microbundle": "^0.12.3",
+    "microbundle": "^0.13.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7",
+    "postcss": "^7.0.35",
     "prettier": "^2.2.0",
     "prettier-plugin-pkg": "^0.8.0",
-    "prettier-plugin-tailwind": "^2.2.2",
+    "prettier-plugin-tailwind": "^2.2.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "storybook-dark-mode": "^1.0.3",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.3"
   },
   "resolutions": {
     "react": "^17.0.1",

diff --git a/src/stories/Hooks.story.tsx b/src/stories/Hooks.story.tsx
@@ -189,9 +189,9 @@ const VisibilityTemplate: Story<IntersectionOptions> = (args) => {
 
   return (
     <div ref={ref} className="container mx-auto my-4">
-      <div className="bg-gray-800 rounded-md mx-auto my-8 max-w-3xl p-4 relative text-center text-white">
+      <div className="relative mx-auto my-8 p-4 max-w-3xl text-center text-white bg-gray-800 rounded-md">
         <h2 className="text-2xl font-bold">Track Visibility</h2>
-        <p className="leading-normal my-4">
+        <p className="my-4 leading-normal">
           Use the new IntersectionObserver v2 to track if the object is visible.
           Try dragging the box on top of it. If the feature is unsupported, it
           will always return `isVisible`.
@@ -200,7 +200,7 @@ const VisibilityTemplate: Story<IntersectionOptions> = (args) => {
           drag
           dragElastic={0.2}
           dragConstraints={ref}
-          className="left-1/2 bg-green-500 rounded-md cursor-move inline-block font-bold px-4 py-2"
+          className="left-1/2 inline-block px-4 py-2 font-bold bg-green-500 rounded-md cursor-move"
         >
           Drag me
         </motion.div>