🎨 📝 useViewportSpy hook + improved documentation

antonioru · Jan 10, 2020 · b4e0eef · b4e0eef
1 parent 7329fa0
commit b4e0eef
Show file tree

Hide file tree

Showing 26 changed files with 343 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -263,3 +263,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Repository ownership changed from `antonioru` to `beautifulinteractions`
+
+## [0.17.0] - 2020-01-10
+
+### Added
+
+- useViewportSpy hook & tests
+- Improved documentation
diff --git a/README.md b/README.md
@@ -16,8 +16,6 @@
   </p>
 </div>
 
-
-
 <div>
   <p align="center">
     <a href="https://beautifulinteractions.github.io/beautiful-react-hooks/" target="_blank">
@@ -38,7 +36,8 @@ For this reason I've tried to sum up that gist into `beautiful-react-hooks`: a c
 React hooks to possibly help other developers to speed up their development process.<br /><br />
 Furthermore, I've tried to create a concise yet concrete API having in mind the code readability, focusing 
 to keep the learning curve as lower as possible so that the it can be used and shared in bigger teams.
-<br /><br />
+
+
 **-- Please before using any hook, read its documentation! --**
 
 ## ☕️ Features
@@ -60,13 +59,13 @@ to keep the learning curve as lower as possible so that the it can be used and s
 ## 🕺 Install
 
 by using `npm`:
-```js s
+```bash
 $ npm install beautiful-react-hooks
 ```
 
 by using `yarn`:
 
-```js 
+```bash
 $ yarn add beautiful-react-hooks
 ```
 

diff --git a/dist-ghpages/build/bundle.42e0c3b1.js b/dist-ghpages/build/bundle.42e0c3b1.js
diff --git a/...-ghpages/build/bundle.94cac56a.js.LICENSE → ...-ghpages/build/bundle.42e0c3b1.js.LICENSE b/...-ghpages/build/bundle.94cac56a.js.LICENSE → ...-ghpages/build/bundle.42e0c3b1.js.LICENSE
diff --git a/dist-ghpages/build/bundle.94cac56a.js b/dist-ghpages/build/bundle.94cac56a.js
diff --git a/dist-ghpages/index.html b/dist-ghpages/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="rsg-root"></div>
-    <script src="build/bundle.94cac56a.js"></script>
+    <script src="build/bundle.42e0c3b1.js"></script>
   </body>
 </html>
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/useViewportSpy.js b/dist/useViewportSpy.js
diff --git a/dist/useViewportSpy.js.map b/dist/useViewportSpy.js.map
diff --git a/docs/Installation.md b/docs/Installation.md
@@ -0,0 +1,14 @@
+## Installation
+
+As simple as the follow:
+
+by using `npm`:
+```bash
+$ npm install beautiful-react-hooks
+```
+
+by using `yarn`:
+
+```bash 
+$ yarn add beautiful-react-hooks
+```
diff --git a/docs/Introduction.md b/docs/Introduction.md
@@ -0,0 +1,42 @@
+# Introduction
+[![Build Status](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks.svg?branch=master)](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+![npm](https://img.shields.io/npm/v/beautiful-react-hooks)
+![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)
+
+Beautiful React Hooks is a collection of beautiful (and hopefully useful) React hooks to speed-up your 
+components and hooks development.
+
+
+## 💡 Why? 
+
+React custom hooks allow to abstract components' business logic into single reusable functions.<br />
+So far, I've found that most of the hooks I've created and therefore shared between my projects have quite often a 
+similar gist that involves callback references, events and components' lifecycle. <br />
+For this reason I've tried to sum up that gist into `beautiful-react-hooks`: a collection of (*hopefully*) useful 
+React hooks to possibly help other developers to speed up their development process.<br /><br />
+Furthermore, I've tried to create a concise yet concrete API having in mind the code readability, focusing 
+to keep the learning curve as lower as possible so that the it can be used and shared in bigger teams.
+
+
+## ☕️ Features
+
+* Concise API
+* Small and lightweight
+* Easy to learn
+* Functional approach
+* Fully written in JS (although TS types are supported)
+
+### Credits
+
+This library is provided and sponsored by: 
+
+<div>
+  <p>
+    <a href="https://beautifulinteractions.com/">
+      <img src="https://beautifulinteractions.com/img/logo-colorful.svg" alt="Beautiful interactions" width="140px" />
+    </a>
+  </p>
+</div>
+
+As part of our commitment to support and provide the open source community.
diff --git a/docs/styleguidist/brh-logo.png b/docs/styleguidist/brh-logo.png
diff --git a/docs/styleguidist/doc-logo.png b/docs/styleguidist/doc-logo.png
diff --git a/docs/styleguidist/styleguidist.config.js b/docs/styleguidist/styleguidist.config.js
@@ -11,28 +11,41 @@ module.exports = {
   pagePerSection: true,
   skipComponentsWithoutExample: true,
   styleguideDir: '../../dist-ghpages',
+  ribbon: {
+    url: 'https://github.com/beautifulinteractions/beautiful-react-hooks',
+    text: 'Fork me on GitHub',
+  },
   sections: [
-    { name: 'useGlobalEvent', content: '../useGlobalEvent.md' },
-    { name: 'usePreviousValue', content: '../usePreviousValue.md' },
-    { name: 'useValueHistory', content: '../useValueHistory.md' },
-    { name: 'useMediaQuery', content: '../useMediaQuery.md' },
-    { name: 'useOnlineState', content: '../useOnlineState.md' },
-    { name: 'useGeolocation', content: '../useGeolocation.md' },
-    { name: 'useGeolocationState', content: '../useGeolocationState.md' },
-    { name: 'useGeolocationEvents', content: '../useGeolocationEvents.md' },
-    { name: 'useMouse', content: '../useMouse.md' },
-    { name: 'useMouseState', content: '../useMouseState.md' },
-    { name: 'useMouseEvents', content: '../useMouseEvents.md' },
-    { name: 'useLifecycle', content: '../useLifecycle.md' },
-    { name: 'useDidMount', content: '../useDidMount.md' },
-    { name: 'useWillUnMount', content: '../useWillUnmount.md' },
-    { name: 'useCallbackRef', content: '../useCallbackRef.md' },
-    { name: 'useWindowResize', content: '../useWindowResize.md' },
-    { name: 'useWindowScroll', content: '../useWindowScroll.md' },
-    { name: 'useTimeout', content: '../useTimeout.md' },
-    { name: 'useInterval', content: '../useInterval.md' },
-    { name: 'useDebouncedFn', content: '../useDebouncedFn.md' },
-    { name: 'useThrottledFn', content: '../useThrottledFn.md' },
+    { name: 'Introduction', content: '../Introduction.md', sectionDepth: 1, },
+    { name: 'Installation', content: '../Installation.md', sectionDepth: 1, },
+    {
+      name: 'Hooks',
+      sectionDepth: 2,
+      sections: [
+        { name: 'useGlobalEvent', content: '../useGlobalEvent.md' },
+        { name: 'usePreviousValue', content: '../usePreviousValue.md' },
+        { name: 'useValueHistory', content: '../useValueHistory.md' },
+        { name: 'useMediaQuery', content: '../useMediaQuery.md' },
+        { name: 'useOnlineState', content: '../useOnlineState.md' },
+        { name: 'useViewportSpy', content: '../useViewportSpy.md' },
+        { name: 'useGeolocation', content: '../useGeolocation.md' },
+        { name: 'useGeolocationState', content: '../useGeolocationState.md' },
+        { name: 'useGeolocationEvents', content: '../useGeolocationEvents.md' },
+        { name: 'useMouse', content: '../useMouse.md' },
+        { name: 'useMouseState', content: '../useMouseState.md' },
+        { name: 'useMouseEvents', content: '../useMouseEvents.md' },
+        { name: 'useLifecycle', content: '../useLifecycle.md' },
+        { name: 'useDidMount', content: '../useDidMount.md' },
+        { name: 'useWillUnMount', content: '../useWillUnmount.md' },
+        { name: 'useCallbackRef', content: '../useCallbackRef.md' },
+        { name: 'useWindowResize', content: '../useWindowResize.md' },
+        { name: 'useWindowScroll', content: '../useWindowScroll.md' },
+        { name: 'useTimeout', content: '../useTimeout.md' },
+        { name: 'useInterval', content: '../useInterval.md' },
+        { name: 'useDebouncedFn', content: '../useDebouncedFn.md' },
+        { name: 'useThrottledFn', content: '../useThrottledFn.md' },
+      ],
+    },
   ],
   require: [path.join(__dirname, 'setup.js')],
   // Override Styleguidist components

diff --git a/docs/styleguidist/styleguidist.theme.js b/docs/styleguidist/styleguidist.theme.js
@@ -9,52 +9,21 @@ module.exports = {
     favicon: 'https://beautifulinteractions.com/favicons/bi-favicon.ico',
   },
   styles: {
-    Header: {
-      logo: {
-        padding: '0',
-      }
-    },
-    Logo: {
-      logo: {
-        padding: '0',
-      },
-    },
     SectionHeading: {
       wrapper: {
         display: 'none',
       },
     },
-    TableOfContents: {
-      search: {
-        display: 'none',
-      },
-      input: {
-        borderRadius: 0,
-        backgroundColor: 'transparent',
-        border: 0,
-        paddingLeft: 0,
-        outline: 0,
-        color: 'white',
-        borderBottom: '1px solid white',
-        '&:focus': {
-          borderColor: 'rgba(255, 255, 255, 0.25)',
-          boxShadow: 'unset',
-        },
-        '&::placeholder': {
-          color: 'rgba(255, 255, 255, 0.25)',
-        },
-      },
-    },
     Heading: {
       heading: {
-        color: '#0F8B8D',
+        color: '#1D6C8B',
         fontFamily: '\'Ubuntu\', sans-serif',
       },
     },
     Code: {
       code: {
         fontFamily: '\'Ubuntu Mono\', sans-serif',
-        backgroundColor: '#D36A81',
+        backgroundColor: '#BE496E',
         color: '#fff',
         fontWeight: '400',
         padding: '0 5px',
@@ -71,21 +40,22 @@ module.exports = {
         background: 'url(./docs-logo.png) no-repeat left center',
         borderBottom: 'none',
         backgroundSize: 'contain',
-        margin: '15px 20px',
-        height: '50px',
+        margin: '16px 16px',
+        height: '30px',
+        padding: 0,
       },
       sidebar: {
         border: 0,
-        width: '200px',
-        background: 'linear-gradient(#FFF,#F1F1F7)',
+        width: '260px',
+        background: 'white',
         boxShadow: '0 0 20px 0 rgba(20, 20, 20, 0.1)',
-        color: '#0F8B8D',
+        color: '#1D6C8B',
       },
       content: {
         maxWidth: '820px',
       },
       root: {
-        background: '#f5f8fd',
+        background: '#FBFAF9',
       },
     },
     Playground: {

diff --git a/docs/useDidMount.md b/docs/useDidMount.md
@@ -66,7 +66,6 @@ const ComponentDidMount = () => {
 <ComponentDidMount />
 ```
 
-
 #### ✅ Pro tip:
 
 When using a React function component you should not really think of it in terms of "lifecycle".

diff --git a/docs/useGeolocation.md b/docs/useGeolocation.md
@@ -23,9 +23,7 @@ const PositionReporter = () => {
   onChange(() => {
     console.log('Position changed...');
   });
-
-  console.log('PORCO MADONNOLO', geoState);
-
+
   return (
    <DisplayDemo>
      The current position is: