style: 🎨 notes & type prefix

style: 🎨 notes & type prefix

Author: inhiblab

packages/hooks/src/useAsyncOrder/index.ts

@@ -3,7 +3,7 @@ import { useTimeout } from '../index'
 export type Resolve = (value: any) => void
 export type InterruptibleRejectType = (error: any) => void
 
-export type AsyncOrder = {
+export type UseAsyncOrderType = {
   task: ((resolve?: Resolve, reject?: InterruptibleRejectType, index?: number) => void)[]
   option?: {
     /**
@@ -33,7 +33,7 @@ export type AsyncOrder = {
   }
 }
 
-export default function useAsyncOrder({ task, option }: AsyncOrder) {
+export default function useAsyncOrder({ task, option }: UseAsyncOrderType) {
   const { delay = 0, onError, onReady, onSuccess } = option ?? {}
 
   if (!(task instanceof Array)) {

packages/hooks/src/useBoolean/index.ts

@@ -1,7 +1,7 @@
 import type { Ref } from "vue";
 import useToggle from "../useToggle";
 
-export interface Actions {
+export interface UseBooleanActions {
     /**
    *  Set state to `true`
    * @returns void
@@ -28,7 +28,7 @@ export interface Actions {
   toggle: () => void;
 }
 
-export type UseBooleanResult = [Ref<boolean>, Actions]
+export type UseBooleanResult = [Ref<boolean>, UseBooleanActions]
 
 export default function useBoolean(
   defaultValue = false

packages/hooks/src/useCookieState/index.ts

@@ -2,13 +2,13 @@ import Cookies from 'js-cookie'
 import { ref } from 'vue'
 import { isFunction } from '../utils/isFunction'
 
-export type State = string | undefined
+export type UseCookieStateType = string | undefined
 
-export interface Options extends Cookies.CookieAttributes {
-  defaultValue?: State | (() => State)
+export interface UseCookieStateOptions extends Cookies.CookieAttributes {
+  defaultValue?: UseCookieStateType | (() => UseCookieStateType)
 }
 
-function useCookieState(cookieKey: string, options: Options = {}) {
+function useCookieState(cookieKey: string, options: UseCookieStateOptions = {}) {
   const defaultValue = () => {
     const cookieValue = Cookies.get(cookieKey)
 
@@ -22,7 +22,7 @@ function useCookieState(cookieKey: string, options: Options = {}) {
   const state = ref(defaultValue())
 
   const updateState = (
-    newValue: State | ((prevState: State) => State),
+    newValue: UseCookieStateType | ((prevState: UseCookieStateType) => UseCookieStateType),
     newOptions: Cookies.CookieAttributes = {},
   ) => {
     // eslint-disable-next-line no-unused-vars

packages/hooks/src/useCounter/index.ts

@@ -1,21 +1,50 @@
-import { ref } from 'vue'
+import { Ref, ref } from 'vue'
 import { isNumber } from '../utils'
 
-export interface Options {
+export interface UseCounterOptions {
+  /**
+   *  Min count
+   */
   min?: number
+
+  /**
+   *  Max count
+   */
   max?: number
 }
 
-export interface Actions {
+export interface UseCounterActions {
+  /**
+   * Increment, default delta is 1
+   * @param delta number
+   * @returns void
+   */
   inc: (delta?: number) => void
+
+  /**
+   * Decrement, default delta is 1
+   * @param delta number
+   * @returns void
+   */
   dec: (delta?: number) => void
+
+  /**
+   * Set current value
+   * @param value number | ((c: number) => number)
+   * @returns void
+   */
   set: (value: number | ((c: number) => number)) => void
+
+  /**
+   * Reset current value to initial value
+   * @returns void
+   */
   reset: () => void
 }
 
 export type ValueParam = number | ((c: number) => number)
 
-function getTargetValue(val: number, options: Options = {}) {
+function getTargetValue(val: number, options: UseCounterOptions = {}) {
   const { min, max } = options
   let target = val
   if (isNumber(max)) {
@@ -27,7 +56,10 @@ function getTargetValue(val: number, options: Options = {}) {
   return target
 }
 
-function useCounter(initialValue = 0, options: Options = {}) {
+function useCounter(
+  initialValue = 0,
+  options: UseCounterOptions = {},
+): [Ref<number>, UseCounterActions] {
   const { min, max } = options
 
   const current = ref(
@@ -70,7 +102,7 @@ function useCounter(initialValue = 0, options: Options = {}) {
       set,
       reset,
     },
-  ] as const
+  ]
 }
 
 export default useCounter

packages/hooks/src/useDarkMode/index.ts

@@ -1,36 +1,32 @@
 import { watchEffect, computed, ComputedRef } from 'vue'
-import { useLocalStorageState } from '..'
+import useLocalStorageState from '../useLocalStorageState'
 
 import useMedia from '../useMedia'
 
-export default function useDarkMode(): [
-	ComputedRef<any>,
-	(value?: unknown) => void
-] {
-	const [enabledState, setEnabledState] = useLocalStorageState(
-		'dark-mode-enabled'
-	)
+export default function useDarkMode(): [ComputedRef<any>, (value?: unknown) => void] {
+  const [enabledState, setEnabledState] = useLocalStorageState('dark-mode-enabled')
 
-	const prefersDarkMode = usePrefersDarkMode()
+  const prefersDarkMode = usePrefersDarkMode()
 
-	const enabled = computed(() => {
-		return typeof enabledState.value !== 'undefined'
-			? enabledState.value
-			: prefersDarkMode.value
-	})
+  /**
+   * Is it in dark mode
+   */
+  const enabled = computed(() => {
+    return typeof enabledState.value !== 'undefined' ? enabledState.value : prefersDarkMode.value
+  })
 
-	watchEffect(() => {
-		const className = 'dark-mode'
-		const element = window.document.body
-		if (enabled.value) {
-			element.classList.add(className)
-		} else {
-			element.classList.remove(className)
-		}
-	})
-	return [enabled, setEnabledState]
+  watchEffect(() => {
+    const className = 'dark-mode'
+    const element = window.document.body
+    if (enabled.value) {
+      element.classList.add(className)
+    } else {
+      element.classList.remove(className)
+    }
+  })
+  return [enabled, setEnabledState]
 }
 
 function usePrefersDarkMode() {
-	return useMedia(['(prefers-color-scheme: dark)'], [true], false)
+  return useMedia(['(prefers-color-scheme: dark)'], [true], false)
 }

packages/hooks/src/useDebounceFn/index.ts

@@ -1,9 +1,24 @@
 import debounce from 'lodash/debounce'
 
 export interface DebounceOptions {
+  /**
+   * The number of milliseconds to delay.
+   */
   wait?: number
+
+  /**
+   * Specify invoking on the leading edge of the timeout.
+   */
   leading?: boolean
+
+  /**
+   * Specify invoking on the trailing edge of the timeout.
+   */
   trailing?: boolean
+
+  /**
+   * The maximum time func is allowed to be delayed before it’s invoked.
+   */
   maxWait?: number
 }
 
@@ -13,8 +28,22 @@ function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {
   const wait = options?.wait ?? 1000
   const debounced = debounce(fn, wait, options)
   return {
+    /**
+     * Invode and pass parameters to fn.
+     * `(...args: any[]) => any`
+     */
     run: debounced,
+
+    /**
+     * Cancel the invocation of currently debounced function.
+     *  `() => void`
+     */
     cancel: debounced.cancel,
+
+    /**
+     * Immediately invoke currently debounced function.
+     *  `() => void`
+     */
     flush: debounced.flush,
   }
 }

packages/hooks/src/useDrag/index.ts

@@ -3,13 +3,24 @@ import type { BasicTarget } from '../utils/domTarget'
 import { getTargetElement } from '../utils/domTarget'
 import useEffectWithTarget from '../utils/useEffectWithTarget'
 
-export interface Options {
+export interface UseDragOptions {
 	draggable?: boolean
+  /**
+   *  On drag start callback
+   * @param event DragEvent
+   * @returns void
+   */
 	onDragStart?: (event: DragEvent) => void
+
+  /**
+   *  On drag end callback
+   * @param event DragEvent
+   * @returns void
+   */
 	onDragEnd?: (event: DragEvent) => void
 }
 
-const useDrag = <T>(data: T, target: BasicTarget, options: Options = {}) => {
+const useDrag = <T>(data: T, target: BasicTarget, options: UseDragOptions = {}) => {
 	const optionsRef = ref(options)
 
 	useEffectWithTarget(