Merge pull request #6 from microcipcip/feature/useIdle

Feature/use idle

Author: microcipcip

README.md

@@ -63,6 +63,8 @@ Vue.use(VueCompositionAPI);
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usegeolocation--demo)
   - [`useHover`](./src/components/useHover/stories/useHover.md) — tracks mouse hover state of a given element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usehover--demo)
+  - [`useIdle`](./src/components/useIdle/stories/useIdle.md) — tracks whether user is being inactive.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useidle--demo)
   - [`useIntersection`](./src/components/useIntersection/stories/useIntersection.md) — tracks intersection of target element with an ancestor element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--advanced-demo)

package-lock.json

@@ -94,6 +94,7 @@
     "@storybook/vue": "^5.3.13",
     "@types/jest": "^23.3.2",
     "@types/node": "^10.11.0",
+    "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
     "@vue/composition-api": "^0.3.4",
@@ -136,5 +137,7 @@
     "vue-loader": "^15.8.3",
     "vue-template-compiler": "^2.6.11"
   },
-  "dependencies": {}
+  "dependencies": {
+    "throttle-debounce": "^2.1.0"
+  }
 }

package.json

@@ -2,6 +2,10 @@ import { mount } from '@src/helpers/test'
 import { ref } from '@src/api'
 import { useClickAway } from '@src/vue-use-kit'
 
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
 const testComponent = () => ({
   template: `
     <div id="outside-el">
@@ -29,10 +33,17 @@ describe('useClickAway', () => {
     const wrapper = mount(testComponent())
     await wrapper.vm.$nextTick()
     expect(addEventListenerSpy).toHaveBeenCalled()
+    expect(addEventListenerSpy).toBeCalledWith(
+      'mousedown',
+      expect.any(Function)
+    )
 
     // Destroy instance to check if the remove event listener is being called
     wrapper.destroy()
     expect(removeEventListenerSpy).toHaveBeenCalled()
-    addEventListenerSpy.mockClear()
+    expect(removeEventListenerSpy).toBeCalledWith(
+      'mousedown',
+      expect.any(Function)
+    )
   })
 })

src/components/useClickAway/useClickAway.spec.ts

@@ -5,6 +5,10 @@ import { useFullscreen } from '@src/vue-use-kit'
 // This feature is difficult to test therefore
 // I've only written a simple test
 
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
 const testComponent = () => ({
   template: `
     <div id="divRef" ref="divRef">

src/components/useFullscreen/useFullscreen.spec.ts

@@ -2,6 +2,10 @@ import { mount } from '@src/helpers/test'
 import { ref } from '@src/api'
 import { useHover } from '@src/vue-use-kit'
 
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
 const testComponent = () => ({
   template: `
     <div id="isHovered" v-if="isHovered"></div>
@@ -22,9 +26,17 @@ describe('useHover', () => {
     )
     const wrapper = mount(testComponent())
     expect(addEventListenerSpy).toHaveBeenCalled()
+    expect(addEventListenerSpy).toBeCalledWith(
+      'mouseenter',
+      expect.any(Function)
+    )
     expect(removeEventListenerSpy).not.toHaveBeenCalled()
     wrapper.destroy()
     expect(removeEventListenerSpy).toHaveBeenCalled()
+    expect(removeEventListenerSpy).toBeCalledWith(
+      'mouseenter',
+      expect.any(Function)
+    )
   })
 
   it('should return isHovered false by default', () => {

src/components/useHover/useHover.spec.ts

@@ -0,0 +1 @@
+export * from './useIdle'

src/components/useIdle/index.ts

@@ -0,0 +1,67 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>isIdle</td>
+        <td class="idle" :class="{ '-is-idle': isIdle }">{{ isIdle }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button
+            class="button is-primary"
+            @click="startTracking"
+            v-if="!isTracking"
+          >
+            Start tracking idle status
+          </button>
+          <button class="button is-danger" @click="stopTracking" v-else>
+            Stop tracking idle status
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '@src/api'
+import { useIdle } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseIdleDemo',
+  setup() {
+    const { isIdle, start, stop } = useIdle(2500)
+
+    const isTracking = ref(true)
+    const startTracking = () => {
+      isTracking.value = true
+      start()
+    }
+    const stopTracking = () => {
+      isTracking.value = false
+      stop()
+    }
+
+    return { isIdle, isTracking, startTracking, stopTracking }
+  }
+})
+</script>
+
+<style scoped>
+.idle {
+  color: #fff;
+  background: #981105;
+}
+
+.idle.-is-idle {
+  color: #fff;
+  background: #209817;
+}
+</style>

src/components/useIdle/stories/UseIdleDemo.vue

@@ -0,0 +1,65 @@
+# useIdle
+
+Vue function that tracks whether user is being inactive.
+
+## Reference
+
+```typescript
+useIdle(
+    ms?: number,
+    events?: string[],
+    runOnMount?: boolean
+): {
+    isIdle: Ref<boolean>;
+    start: () => void;
+    stop: () => void;
+}
+```
+
+### Parameters
+
+- `ms: number` milliseconds to wait before deciding whether the user is being idle
+- `events: string[]` list of events to track the user for
+- `runOnMount: boolean` whether to start tracking idle state on mount, `true` by default
+
+### Returns
+
+- `isIdle: Ref<boolean>` it is `true` when the user is idle, `false` otherwise
+- `start: Function` the function used for start tracking the user's idle state
+- `stop: Function` the function used for stop tracking the user's idle state
+
+## Usage
+
+```html
+<template>
+  <div>
+    <p>isIdle: {{ isIdle }}</p>
+    <button @click="startTracking" v-if="!isTracking">Start tracking</button>
+    <button @click="stopTracking" v-else>Stop tracking</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useIdle } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseIdleDemo',
+    setup() {
+      const { isIdle, start, stop } = useIdle(2500)
+
+      const isTracking = ref(true)
+      const startTracking = () => {
+        isTracking.value = true
+        start()
+      }
+      const stopTracking = () => {
+        isTracking.value = false
+        stop()
+      }
+
+      return { isIdle, isTracking, startTracking, stopTracking }
+    }
+  })
+</script>
+```

src/components/useIdle/stories/useIdle.md

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseIdleDemo from './UseIdleDemo.vue'
+
+const functionName = 'useIdle'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseIdleDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseIdleDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('sensors|useIdle', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)