feat(useCookie): Adding useCookie function

Author: microcipcip

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-lock.json

@@ -93,6 +93,7 @@
     "@storybook/theming": "^5.3.13",
     "@storybook/vue": "^5.3.13",
     "@types/jest": "^23.3.2",
+    "@types/js-cookie": "^2.2.4",
     "@types/node": "^10.11.0",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
@@ -138,6 +139,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
+    "js-cookie": "^2.2.1",
     "throttle-debounce": "^2.1.0"
   }
 }

package.json

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

src/components/useCookie/index.ts

@@ -0,0 +1,83 @@
+<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="counter++ && updateCookie(`count${counter}`)"
+          >
+            Update cookie
+          </button>
+          <button class="button is-danger" @click="deleteCookie()">
+            Delete cookie
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td>jsonCookie</td>
+        <td>{{ jsonCookie }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button
+            class="button is-primary"
+            @click="
+              counter++ &&
+                jsonUpdateCookie({
+                  counter: counter,
+                  counterTest: `test${counter}`
+                })
+            "
+          >
+            Update json cookie
+          </button>
+          <button class="button is-danger" @click="jsonDeleteCookie()">
+            Delete json cookie
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '@vue/composition-api'
+import { useCookie } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseCookieDemo',
+  setup() {
+    const counter = ref(0)
+
+    const { cookie, updateCookie, deleteCookie } = useCookie('normalCookie')
+
+    const {
+      cookie: jsonCookie,
+      updateCookie: jsonUpdateCookie,
+      deleteCookie: jsonDeleteCookie
+    } = useCookie('jsonCookie')
+
+    return {
+      cookie,
+      updateCookie,
+      deleteCookie,
+      jsonCookie,
+      jsonUpdateCookie,
+      jsonDeleteCookie,
+      counter
+    }
+  }
+})
+</script>

src/components/useCookie/stories/UseCookieDemo.vue

@@ -0,0 +1,23 @@
+# useCookie
+
+Vue function that provides way to read, update and delete a cookie.
+
+## Reference
+
+```typescript
+// function useCookie()
+```
+
+### Parameters
+
+- `value: string` lorem ipsa
+
+### Returns
+
+- `value: Ref<string>` lorem ipsa
+
+## Usage
+
+```html
+<template></template>
+```

src/components/useCookie/stories/useCookie.md

@@ -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)

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

@@ -0,0 +1,12 @@
+// import { mount } from '@src/helpers/test'
+// import { useCookie } from '@src/vue-use-kit'
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('useCookie', () => {
+  it('should do something', () => {
+    // Add test here
+  })
+})

src/components/useCookie/useCookie.spec.ts

@@ -0,0 +1,48 @@
+import Cookies from 'js-cookie'
+import { ref, Ref } from '@vue/composition-api'
+
+type CookieValueType = string | JSON
+
+const tryParse = (val: string, enableParsing: boolean) => {
+  if (!enableParsing) return val
+  try {
+    return JSON.parse(val)
+  } catch (err) {
+    return val
+  }
+}
+
+const tryStringify = (val: CookieValueType, enableParsing: boolean) => {
+  if (!enableParsing) return val
+  try {
+    return JSON.stringify(val)
+  } catch (err) {
+    return val
+  }
+}
+
+export function useCookie(cookieName: string, enableParseJSON = false) {
+  const getCookie = () => {
+    const cookieVal = Cookies.get(cookieName)
+    if (typeof cookieVal === 'undefined') return null
+    return tryParse(cookieVal, enableParseJSON)
+  }
+
+  const cookie = ref(getCookie())
+
+  const updateCookie = (
+    newVal: CookieValueType,
+    options?: Cookies.CookieAttributes
+  ) => {
+    const newCookieValue = tryStringify(newVal, enableParseJSON)
+    Cookies.set(cookieName, newCookieValue, options)
+    cookie.value = newVal
+  }
+
+  const deleteCookie = (options?: Cookies.CookieAttributes) => {
+    Cookies.remove(cookieName, options)
+    cookie.value = null
+  }
+
+  return { cookie, updateCookie, deleteCookie }
+}

src/components/useCookie/useCookie.ts

@@ -24,3 +24,4 @@ export * from './components/useTimeoutFn'
 export * from './components/useTimeout'
 // Site Effects
 export * from './components/useBeforeUnload'
+export * from './components/useCookie'