chore: upgrade dev dependencies

package.json

@@ -141,46 +141,46 @@
     "@babel/preset-typescript": "^7.9.0",
     "@emotion/cache": "^11.0.0-next.16",
     "@emotion/react": "^11.0.0-next.16",
-    "@storybook/addon-actions": "^6.0.21",
-    "@storybook/addon-viewport": "^6.0.21",
-    "@storybook/react": "^6.0.21",
-    "@storybook/theming": "^6.0.21",
-    "@testing-library/jest-dom": "^5.5.0",
+    "@storybook/addon-actions": "^6.0.28",
+    "@storybook/addon-viewport": "^6.0.28",
+    "@storybook/react": "^6.0.28",
+    "@storybook/theming": "^6.0.28",
+    "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.0.2",
     "@types/jest": "^26.0.15",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.0",
+    "babel-jest": "^26.6.2",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",
     "concurrently": "^5.1.0",
     "coveralls": "^3.0.11",
-    "eslint": "^7.8.0",
-    "eslint-config-react-app": "^5.2.1",
+    "eslint": "^7.12.1",
+    "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "framer-motion": "^2.9.3",
+    "framer-motion": "^2.9.4",
     "husky": "^4.2.5",
     "intersection-observer": "^0.11.0",
-    "jest": "^26.6.0",
-    "lint-staged": "^10.1.3",
+    "jest": "^26.6.2",
+    "lint-staged": "^10.5.1",
     "microbundle": "^0.12.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "prettier-plugin-pkg": "^0.8.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-test-renderer": "^17.0.0",
-    "typescript": "^4.0.2"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
+    "typescript": "^4.0.5"
   },
   "resolutions": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

src/stories/Hooks.story.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { action } from '@storybook/addon-actions';
+import { Meta } from '@storybook/react';
 import { IntersectionOptions, useInView } from '../index';
 import ScrollWrapper from './ScrollWrapper';
 import Status from './Status';
@@ -14,6 +15,12 @@ type Props = {
   lazy?: boolean;
 };
 
+const story: Meta = {
+  title: 'useInView hook',
+};
+
+export default story;
+
 const HookComponent = ({
   options,
   className,
@@ -67,10 +74,6 @@ const HookComponent = ({
   );
 };
 
-export default {
-  title: 'useInView hook',
-};
-
 export const basic = () => (
   <ScrollWrapper>
     <HookComponent />
@@ -142,7 +145,7 @@ export const skip = () => (
 export const TrackVisibility = () => {
   const ref = useRef<HTMLDivElement>(null);
   return (
-    <div ref={ref}>
+    <div ref={ref} css={{ margin: '0 1rem' }}>
       <div
         css={{
           color: 'white',

src/stories/InView.story.tsx

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
+import { Meta } from '@storybook/react';
 import { InView } from '../index';
 import ScrollWrapper from './ScrollWrapper';
 import RootComponent from './Root';
@@ -14,6 +15,12 @@ type Props = {
   inView?: boolean;
 };
 
+const story: Meta = {
+  title: 'InView Component',
+};
+
+export default story;
+
 const Header = React.forwardRef<any, Props>((props: Props, ref) => (
   <div ref={ref} data-inview={props.inView}>
     {props.inView !== undefined ? <Status inView={props.inView} /> : null}
@@ -36,10 +43,6 @@ const Header = React.forwardRef<any, Props>((props: Props, ref) => (
   </div>
 ));
 
-export default {
-  title: 'InView Component',
-};
-
 export const basic = () => (
   <ScrollWrapper>
     <InView onChange={action('Child Observer inView')}>