feat(useSessionStorage): Added useSessionStorage and refactored file system structure

Author: microcipcip

README.md

@@ -8,7 +8,7 @@ import {
   trySerialize,
   tryDeserialize,
   isNullOrUndefined
-} from '@src/utils'
+} from '@src/shared/utils'
 import { ref, onMounted, Ref } from '@src/api'
 
 export interface UseCookieOptions {

src/components/getQuery/getQuery.spec.ts renamed to src/functions/getQuery/getQuery.spec.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from '@src/api'
-import { useIntervalFn } from '@src/components/useIntervalFn'
+import { useIntervalFn } from '@src/functions/useIntervalFn'
 
 export function useInterval(ms = 0, runOnMount = true) {
   const counter = ref(0)

src/components/getQuery/getQuery.ts renamed to src/functions/getQuery/getQuery.ts

@@ -61,7 +61,7 @@ const testComponent = (
   }
 })
 
-describe('useItem', () => {
+describe('useLocalStorage', () => {
   it('should get a item with the given value', async () => {
     const itemKey = 'itemKey'
     const itemValue = 'itemValue'

src/components/getQuery/index.ts renamed to src/functions/getQuery/index.ts

@@ -0,0 +1,23 @@
+import { createStorage, StorageOptions } from '@src/shared/createStorage'
+import { onMounted, Ref } from '@src/api'
+
+export function useLocalStorage(
+  key: string,
+  options?: StorageOptions,
+  runOnMount = true
+) {
+  const { item, getItem, setItem, removeItem } = createStorage(
+    localStorage,
+    key,
+    options
+  )
+
+  onMounted(() => runOnMount && getItem())
+
+  return {
+    item,
+    getItem,
+    setItem,
+    removeItem
+  }
+}

src/components/getQuery/stories/GetQueryDemo.vue renamed to src/functions/getQuery/stories/GetQueryDemo.vue

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted, Ref } from '@src/api'
-import { patchHistoryMethodsOnce } from '@src/utils'
+import { patchHistoryMethodsOnce } from '@src/shared/utils'
 
 export interface UseLocationState {
   trigger: string

src/components/getQuery/stories/getQuery.md renamed to src/functions/getQuery/stories/getQuery.md

@@ -1,5 +1,5 @@
 import { ref, Ref } from '@src/api'
-import { TFps, useRafFn } from '@src/components/useRafFn'
+import { TFps, useRafFn } from '@src/functions/useRafFn'
 
 const fpsLimit = 60
 export function useRaf(fps: TFps = fpsLimit, runOnMount = true) {

src/components/getQuery/stories/getQuery.story.ts renamed to src/functions/getQuery/stories/getQuery.story.ts

@@ -1,5 +1,8 @@
 import { ref, onMounted, onUnmounted, Ref } from '@src/api'
-import { patchHistoryMethodsOnce, normalizeEntriesData } from '@src/utils'
+import {
+  patchHistoryMethodsOnce,
+  normalizeEntriesData
+} from '@src/shared/utils'
 
 const normalizeParams = (urlParamsObj: { [key: string]: string }) => (
   paramAcc: any,

src/components/useBeforeUnload/index.ts renamed to src/functions/useBeforeUnload/index.ts

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

src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue renamed to src/functions/useBeforeUnload/stories/UseBeforeUnloadDemo.vue

@@ -0,0 +1,84 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>item</td>
+        <td>{{ item }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="handleSetItem">
+            Set / Update item
+          </button>
+          <button class="button is-danger" @click="removeItem()">
+            Remove item
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td>jsonItem</td>
+        <td>{{ jsonItem }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="handleSetJsonItem">
+            Set / Update JSON item
+          </button>
+          <button class="button is-danger" @click="jsonRemoveItem()">
+            Remove JSON item
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useSessionStorage } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'useSessionStorageDemo',
+  setup() {
+    const { item, setItem, removeItem } = useSessionStorage('normalItem')
+
+    const {
+      item: jsonItem,
+      setItem: jsonSetItem,
+      removeItem: jsonRemoveItem
+    } = useSessionStorage('jsonItem', {
+      isParsing: true
+    })
+
+    let counter = 0
+    const handleSetItem = () => {
+      counter++
+      setItem(`count${counter}`)
+    }
+
+    const handleSetJsonItem = () => {
+      counter++
+      jsonSetItem({
+        counter: counter,
+        counterTest: `test${counter}`
+      })
+    }
+
+    return {
+      item,
+      handleSetItem,
+      removeItem,
+      jsonItem,
+      handleSetJsonItem,
+      jsonRemoveItem,
+      counter
+    }
+  }
+})
+</script>

src/components/useBeforeUnload/stories/useBeforeUnload.md renamed to src/functions/useBeforeUnload/stories/useBeforeUnload.md

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