Feature/use cookie

README.md

@@ -104,7 +104,9 @@ Vue.use(VueCompositionAPI);
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
 - Side Effects
   - [`useBeforeUnload`](./src/components/useBeforeUnload/stories/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
-    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-usebeforeunload--demo)
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usebeforeunload--demo)
+  - [`useCookie`](./src/components/useCookie/stories/useCookie.md) — provides way to read, update and delete a cookie.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usecookie--demo)
 - UI
   - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)

package.json

@@ -138,6 +138,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
+    "cookie-universal": "^2.1.1",
     "throttle-debounce": "^2.1.0"
   }
 }

src/api.ts

@@ -0,0 +1,2 @@
+export * from '@vue/composition-api'
+export { default } from '@vue/composition-api'

src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, watch } from '@vue/composition-api'
+import { ref, watch } from '@src/api'
 import { useBeforeUnload } from '@src/vue-use-kit'
 
 export default Vue.extend({

src/components/useBeforeUnload/stories/useBeforeUnload.md

@@ -45,7 +45,7 @@ function useBeforeUnload(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref, watch } from '@vue/composition-api'
+  import { ref, watch } from '@src/api'
   import { useBeforeUnload } from 'vue-use-kit'
 
   export default Vue.extend({

src/components/useBeforeUnload/useBeforeUnload.spec.ts

@@ -4,7 +4,7 @@ import {
   checkOnStartEvents,
   checkOnStopEvents
 } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useBeforeUnload } from '@src/vue-use-kit'
 
 afterEach(() => {

src/components/useBeforeUnload/useBeforeUnload.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useBeforeUnload(isPageDirty: Ref<boolean>, runOnMount = true) {
   const isTracking = ref(false)

src/components/useClickAway/stories/UseClickAwayDemo.vue

@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useClickAway } from '@src/vue-use-kit'
 
 export default Vue.extend({

src/components/useClickAway/stories/useClickAway.md

@@ -30,7 +30,7 @@ function useClickAway(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useClickAway } from 'vue-use-kit'
 
   export default Vue.extend({

src/components/useClickAway/useClickAway.spec.ts

@@ -1,5 +1,5 @@
 import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useClickAway } from '@src/vue-use-kit'
 
 afterEach(() => {

src/components/useClickAway/useClickAway.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { onMounted, onUnmounted, Ref } from '@src/api'
 
 const defaultEvents = ['mousedown', 'touchstart']
 

src/components/useCookie/index.ts

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

src/components/useCookie/stories/UseCookieDemo.vue

@@ -0,0 +1,82 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cookie</td>
+        <td>{{ cookie }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="handleSetCookie">
+            Set / Update cookie
+          </button>
+          <button class="button is-danger" @click="removeCookie()">
+            Remove cookie
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td>jsonCookie</td>
+        <td>{{ jsonCookie }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="handleSetJsonCookie">
+            Set / Update JSON cookie
+          </button>
+          <button class="button is-danger" @click="jsonRemoveCookie()">
+            Remove JSON cookie
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useCookie } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseCookieDemo',
+  setup() {
+    const { cookie, setCookie, removeCookie } = useCookie('normalCookie')
+
+    const {
+      cookie: jsonCookie,
+      setCookie: jsonSetCookie,
+      removeCookie: jsonRemoveCookie
+    } = useCookie('jsonCookie')
+
+    let counter = 0
+    const handleSetCookie = () => {
+      counter++
+      setCookie(`count${counter}`)
+    }
+
+    const handleSetJsonCookie = () => {
+      counter++
+      jsonSetCookie({
+        counter: counter,
+        counterTest: `test${counter}`
+      })
+    }
+
+    return {
+      cookie,
+      handleSetCookie,
+      removeCookie,
+      jsonCookie,
+      handleSetJsonCookie,
+      jsonRemoveCookie,
+      counter
+    }
+  }
+})
+</script>

src/components/useCookie/stories/useCookie.md

@@ -0,0 +1,68 @@
+# useCookie
+
+Vue function that provides way to read, set and remove a cookie.
+
+## Reference
+
+```typescript
+function useCookie(
+  cookieName: string,
+  enableParseJSON?: boolean,
+  runOnMount?: boolean
+): {
+  cookie: Ref<any>
+  getCookie: () => void
+  setCookie: (newVal: any, options?: CookieSerializeOptions | undefined) => void
+  removeCookie: (options?: CookieSerializeOptions | undefined) => void
+}
+```
+
+### Parameters
+
+- `cookieName: string` the cookie name you wish to get/set/remove
+- `enableParseJSON: boolean` whether to enable JSON parsing or not, `false` by default
+- `runOnMount: boolean` whether to get the cookie on mount or not, `true` by default
+
+### Returns
+
+- `cookie: Ref<any>` the cookie value, it can be null, a string or a JSON object/array
+- `getCookie: Function` get the cookie value
+- `setCookie: Function` set the cookie value
+  - `newVal: any`: the value to set, can be a string or an object/array
+  - `options?: CookieSerializeOptions`: a [cookie](https://github.com/jshttp/cookie#options-1) options object
+- `removeCookie: Function` delete the cookie
+  - `options?: CookieSerializeOptions`: a [cookie](https://github.com/jshttp/cookie#options-1) options object
+
+## Usage
+
+```html
+<template>
+  <div>
+    Cookie: {{ cookie }}
+
+    <button @click="getCookie">Get cookie</button>
+    <button @click="setCookie('Value here')">Set cookie</button>
+    <button @click="removeCookie">Remove cookie</button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useCookie } from 'vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseCookieDemo',
+  setup() {
+    const {
+      cookie, getCookie, setCookie, removeCookie
+    } = useCookie('i_love_cookies')
+
+    return {
+      cookie,
+      getCookie,
+      setCookie,
+      removeCookie,
+    }
+  }
+})
+```

src/components/useCookie/stories/useCookie.story.ts

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