From cc10f79de8a94cdc99f27defd2e5a888994ce00c Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 09:39:48 +0700
Subject: [PATCH 1/7] wip: jsdoc on composable

---
 src/composables/useCollection.js     | 47 +++++++++++++++++++---------
 src/composables/useFormCollection.js | 14 ++++++++-
 src/composables/useFormTodo.js       |  6 ++++
 src/composables/useTodo.js           | 25 ++++++---------
 4 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/src/composables/useCollection.js b/src/composables/useCollection.js
index b9fa803..bc9f686 100644
--- a/src/composables/useCollection.js
+++ b/src/composables/useCollection.js
@@ -1,7 +1,17 @@
 import { ref, toRaw, computed } from "vue";
 import dbCollection from "@/repositories/db-collection";
+/**
+ * @typedef {Object} Collection
+ * @property {string} id
+ * @property {string} name
+ * @property {string} description
+ * @property {string | Date} created_at
+ * @property {import('@/composables/useFormTodo').FormTodo[]} todos
+ */
 
-const collections = ref([]);
+/**
+ * @type {import('vue').Ref<Collection>}
+ */
 const collection = ref({
   id: "",
   name: "",
@@ -9,11 +19,19 @@ const collection = ref({
   created_at: "",
   todos: [],
 });
+/**
+ * @type {import('vue').Ref<Collection[]>}
+ */
+const collections = ref([]);
+
 const useCollection = () => {
   const descriptionCollection = computed(() => {
     return collection.value?.description.replace(/(?:\r\n|\r|\n)/g, "<br>");
   });
 
+  /**
+   * @param {Collection} collection
+   */
   const addCollection = (collection) => {
     collections.value.push(collection);
 
@@ -22,24 +40,19 @@ const useCollection = () => {
   const getCollections = async () => {
     collections.value = await dbCollection.index();
   };
+
   /**
-   * Detail Collection
-   * @returns {{
-   * id: String,
-   * name: String,
-   * description: String,
-   * created_at: Date,
-   * todos: {
-   * name: String,
-   * priority: String,
-   * isDone: Boolean,
-   * created_at: Date,
-   * }[]
-   * }} collection
+   *
+   * @param {string} id
+   * @returns {Collection}
    */
   const getDetailCollection = (id) => {
     return collections.value.find((collection) => collection.id == id);
   };
+
+  /**
+   * @param {string} id
+   */
   const deleteColllection = (id) => {
     const index = collections.value.findIndex(
       (collection) => collection.id === id
@@ -48,6 +61,12 @@ const useCollection = () => {
     collections.value.splice(index, 1);
     dbCollection.delete(id);
   };
+
+  /**
+   *
+   * @param {Collection} collection
+   * @returns {Collection}
+   */
   const updateCollection = (collection) => {
     const index = collections.value.findIndex(
       (coll) => coll.id === collection.id
diff --git a/src/composables/useFormCollection.js b/src/composables/useFormCollection.js
index e768ef2..234dc7f 100644
--- a/src/composables/useFormCollection.js
+++ b/src/composables/useFormCollection.js
@@ -1,10 +1,19 @@
 import { ref } from "vue";
 import { customAlphabet } from "nanoid";
 import useCollection from "@/composables/useCollection";
-import dbCollection from "@/repositories/db-collection";
 
 const { addCollection, updateCollection } = useCollection();
+/**
+ * @typedef {Object} FormCollection
+ * @property {?string} id
+ * @property {string} name
+ * @property {string} description
+ * @property {import('@/composables/useFormTodo').Todo[]} todos
+ */
 
+/**
+ * @type {import('vue').Ref<FormCollection>}
+ */
 const collection = ref({
   name: "",
   description: "",
@@ -33,6 +42,9 @@ const useFormCollection = () => {
   }
   function addNewCollection() {
     const nanoid = customAlphabet("1234567890abcdef", 10);
+    /**
+     * @type {FormCollection}
+     */
     const collection = {
       id: nanoid(),
       name: form.value.name,
diff --git a/src/composables/useFormTodo.js b/src/composables/useFormTodo.js
index 2bc5c42..30eb4ac 100644
--- a/src/composables/useFormTodo.js
+++ b/src/composables/useFormTodo.js
@@ -1,7 +1,13 @@
 import { nanoid } from "nanoid";
 import { ref } from "vue";
 
+/**
+ * @typedef {import('@/composables/useTodo').Todo} FormTodo
+ */
 const isEditing = ref(false);
+/**
+ * @type {import('vue').Ref<FormTodo>}
+ */
 const formTodo = ref({
   id: `todo-${nanoid(7)}`,
   name: "",
diff --git a/src/composables/useTodo.js b/src/composables/useTodo.js
index f6fde86..e5066aa 100644
--- a/src/composables/useTodo.js
+++ b/src/composables/useTodo.js
@@ -1,6 +1,14 @@
 import dbCollection from "@/repositories/db-collection";
 import { toRaw, computed } from "vue";
 import useCollection from "@/composables/useCollection";
+/**
+ * @typedef {Object} Todo
+ * @property {string} id
+ * @property {string} name
+ * @property {string} priority
+ * @property {string} isDone
+ * @property {Date} created_at
+ */
 
 const { collection, getDetailCollection } = useCollection();
 
@@ -11,13 +19,7 @@ const useTodo = () => {
   );
   /**
    * Add new todo to collection
-   * @param {{
-   * id: string,
-   * name: string,
-   * priority: string,
-   * isDone: boolean,
-   * created_at: Date,
-   * }} todo
+   * @param {Todo} todo
    */
   const addTodo = (todo) => {
     const { todos } = getDetailCollection(collection.value.id);
@@ -47,13 +49,7 @@ const useTodo = () => {
 
   /**
    * Edit todo in collection
-   * @param {{
-   * id: string,
-   * name: string,
-   * priority: string,
-   * isDone: boolean,
-   * created_at: Date,
-   * }} newTodo
+   * @param {Todo} newTodo
    */
   const editTodo = (newTodo) => {
     const { todos } = getDetailCollection(collection.value.id);
@@ -71,7 +67,6 @@ const useTodo = () => {
   /**
    *
    * @param {number} index
-   * @description still wip
    */
   const deleteTodo = (index) => {
     const { todos } = getDetailCollection(collection.value.id);

From e31d18945a4f735e79ed534ba5cf64bb6c1fede2 Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 10:58:33 +0700
Subject: [PATCH 2/7] wip: jsdoc on component

---
 src/components/ExampleJson.vue    |  1 +
 src/components/FormCollection.vue | 14 +++++++-------
 src/components/ProgressBar.vue    | 11 +++++++++++
 src/components/TodoItem.vue       |  8 +++++++-
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/ExampleJson.vue b/src/components/ExampleJson.vue
index 509b3c0..6f6f5bc 100644
--- a/src/components/ExampleJson.vue
+++ b/src/components/ExampleJson.vue
@@ -1,5 +1,6 @@
 <script setup>
 defineProps({
+  /** @type {import('@/composables/useCollection').Collection} */
   json: Object,
 });
 </script>
diff --git a/src/components/FormCollection.vue b/src/components/FormCollection.vue
index 03c19e6..0b0c00f 100644
--- a/src/components/FormCollection.vue
+++ b/src/components/FormCollection.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { Form, Field, ErrorMessage } from "vee-validate";
-import * as yup from "yup";
-import { toRaw } from "vue";
-import { useRouter } from "vue-router";
-import useFormCollection from "@/composables/useFormCollection";
+import { Field, ErrorMessage } from "vee-validate";
 
-const router = useRouter();
-const { addNewCollection, editCurrentCollection } = useFormCollection();
+/**
+ * @typedef {import('@/composables/useFormCollection').FormCollection} Form
+ * @typedef {Boolean} IsEdit
+ * @typedef {{form: Form, isEdit:IsEdit}} PropsForm
+ */
 
+/** @type {PropsForm} */
 const props = defineProps({
   form: Object,
   isEdit: Boolean,
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 798e70e..28985fa 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,11 +1,22 @@
 <script setup>
 import { computed } from "vue";
 
+/**
+ * @type {
+ * {
+ * totalDoneTodos: Number,
+ * totalTodos: Number
+ * }
+ * }
+ */
 const props = defineProps({
   totalDoneTodos: Number,
   totalTodos: Number,
 });
 
+/**
+ *  @returns {import('vue').ComputedRef<number>}
+ */
 const percentage = computed(() => {
   const countTodos = Math.round(
     (props.totalDoneTodos / props.totalTodos) * 100
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 37e4c03..3047278 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -1,5 +1,11 @@
 <script setup>
-defineProps({
+/**
+ * @type {{
+ * todo: import('@/composables/useTodo').Todo,
+ * isSelected: boolean
+ *  }}
+ */
+const { todo, isSelected } = defineProps({
   todo: Object,
   isSelected: Boolean,
 });

From fff0ea006cc6714da4e3812a33aaeca46651c7db Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 11:08:29 +0700
Subject: [PATCH 3/7] wip: jsdoc on utils

---
 src/pages/import.vue             | 5 +++++
 src/utils/export-collection.js   | 5 +++++
 src/utils/json-parser.js         | 4 ++++
 src/utils/validate-collection.js | 5 +++++
 4 files changed, 19 insertions(+)

diff --git a/src/pages/import.vue b/src/pages/import.vue
index d4cbfc8..7d1bda1 100644
--- a/src/pages/import.vue
+++ b/src/pages/import.vue
@@ -15,8 +15,13 @@ const isAttached = ref(false);
 const collection = ref(null);
 const isCollectionExist = ref(false);
 
+/**
+ *
+ * @param {DragEvent} event
+ */
 function handleDrop(event) {
   event.preventDefault();
+
   const droppedFiles = event.dataTransfer?.files;
 
   if (droppedFiles[0].type.includes("json")) {
diff --git a/src/utils/export-collection.js b/src/utils/export-collection.js
index 2bc879e..175d068 100644
--- a/src/utils/export-collection.js
+++ b/src/utils/export-collection.js
@@ -1,3 +1,8 @@
+/**
+ *
+ * @param {import('@/composables/useCollection').Collection} collection
+ * @returns
+ */
 const exportCollection = (collection) => {
   const json = JSON.stringify(collection);
   const blob = new Blob([json], { type: "application/json" });
diff --git a/src/utils/json-parser.js b/src/utils/json-parser.js
index 23b1051..c4ba48c 100644
--- a/src/utils/json-parser.js
+++ b/src/utils/json-parser.js
@@ -1,3 +1,7 @@
+/**
+ * @param {File} file
+ * @returns
+ */
 function jsonParser(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
diff --git a/src/utils/validate-collection.js b/src/utils/validate-collection.js
index 5de5b3c..eade699 100644
--- a/src/utils/validate-collection.js
+++ b/src/utils/validate-collection.js
@@ -1,3 +1,8 @@
+/**
+ *
+ * @param {import('@/composables/useCollection').Collection} collection
+ * @returns {boolean}
+ */
 const validateCollection = (collection) => {
   if (
     collection.hasOwnProperty("id") &&

From e0fa7ca55f9c832bf89997318be111c21a4aa189 Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 11:14:18 +0700
Subject: [PATCH 4/7] wip: jsdoc on pages

---
 src/pages/collection/create.vue | 1 +
 src/pages/collection/edit.vue   | 1 +
 src/pages/collection/id.vue     | 9 +++++++++
 3 files changed, 11 insertions(+)

diff --git a/src/pages/collection/create.vue b/src/pages/collection/create.vue
index 62fea2d..ea6a5a5 100644
--- a/src/pages/collection/create.vue
+++ b/src/pages/collection/create.vue
@@ -12,6 +12,7 @@ const schema = yup.object({
   description: yup.string(),
 });
 
+/** @param {import('@/composables/useCollection').Collection} values */
 const onSubmit = (values) => {
   form.value = values;
   form.value.todos = [];
diff --git a/src/pages/collection/edit.vue b/src/pages/collection/edit.vue
index cdf7dbe..27abafb 100644
--- a/src/pages/collection/edit.vue
+++ b/src/pages/collection/edit.vue
@@ -15,6 +15,7 @@ const schema = yup.object({
 });
 const isEdit = route.fullPath.includes("edit");
 
+/** @param {import('@/composables/useCollection').Collection} values */
 const onSubmit = (values) => {
   form.value = {
     ...values,
diff --git a/src/pages/collection/id.vue b/src/pages/collection/id.vue
index b578358..51226ea 100644
--- a/src/pages/collection/id.vue
+++ b/src/pages/collection/id.vue
@@ -33,16 +33,21 @@ const resetVForm = async () => {
     created_at: new Date(),
   });
 };
+
+/** @param {import('@/composables/useTodo').Todo} values */
 const submitUpdateTodo = (values) => {
   editTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
+
+/** @param {import('@/composables/useTodo').Todo} values */
 const submitAddTodo = (values) => {
   addTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
+
 const submitTodo = async () => {
   const todo = {
     ...toRaw(vFormTodo.values),
@@ -63,6 +68,8 @@ const submitTodo = async () => {
 
   return;
 };
+
+/** @param {number} index */
 const selectTodo = (index) => {
   isEditing.value = true;
 
@@ -79,6 +86,7 @@ const selectTodo = (index) => {
   formTodo.value = todo;
 };
 
+/** @param {number} index */
 const handleMarkTodo = (index) => {
   if (isEditing.value) {
     resetFormTodo();
@@ -89,6 +97,7 @@ const handleMarkTodo = (index) => {
   vFormTodo.setErrors({});
 };
 
+/** @param {string} id */
 const handleDeleteCollection = (id) => {
   const question = confirm("Are you sure delete this collection?");
   if (question) {

From 75de5bfbc0b31f828f5fc9b7b1cd975e8f623eb3 Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 11:19:01 +0700
Subject: [PATCH 5/7] wip: jsdoc on db collection

---
 public/robots.txt                 |  4 ++--
 src/repositories/db-collection.js | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/public/robots.txt b/public/robots.txt
index 942a953..f65e2c2 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +1,3 @@
 User-Agent:*
-
-disallow: /collection/*
\ No newline at end of file
+Allow: /
+Disallow: /collection/*
\ No newline at end of file
diff --git a/src/repositories/db-collection.js b/src/repositories/db-collection.js
index 30b8b81..4b89565 100644
--- a/src/repositories/db-collection.js
+++ b/src/repositories/db-collection.js
@@ -1,5 +1,7 @@
 import { openDB } from "idb";
-
+/**
+ * @typedef {import('@/composables/useCollection').Collection} Collection
+ */
 const dbPromise = openDB("collection-db", 1, {
   upgrade(database) {
     database.createObjectStore("collections", {
@@ -12,15 +14,34 @@ const dbCollections = {
   async index() {
     return (await dbPromise).getAll("collections");
   },
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
   async add(collection) {
     return (await dbPromise).add("collections", collection);
   },
+
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
   async update(collection) {
     return (await dbPromise).put("collections", collection);
   },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
   async delete(id) {
     return (await dbPromise).delete("collections", id);
   },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
   async show(id) {
     return (await dbPromise).get("collections", id);
   },

From b796676789f7d20f9587a453830a8ece61503881 Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 11:22:14 +0700
Subject: [PATCH 6/7] fix: update version

---
 package.json                   | 2 +-
 src/components/ExampleJson.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d104bb9..56f72c7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tomodo",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/ExampleJson.vue b/src/components/ExampleJson.vue
index 6f6f5bc..ac4090e 100644
--- a/src/components/ExampleJson.vue
+++ b/src/components/ExampleJson.vue
@@ -1,6 +1,6 @@
 <script setup>
-defineProps({
-  /** @type {import('@/composables/useCollection').Collection} */
+/** @type {{json: import('@/composables/useCollection').Collection}} */
+const { json } = defineProps({
   json: Object,
 });
 </script>

From 70e9503a62780bede69257692ee51f6203470cfc Mon Sep 17 00:00:00 2001
From: nnivxix <adhe.hanasa@gmail.com>
Date: Mon, 8 Apr 2024 14:35:22 +0700
Subject: [PATCH 7/7] refactor: jsdoc

---
 src/components/ExampleJson.vue       |  2 +-
 src/components/FormCollection.vue    | 10 ++------
 src/components/ProgressBar.vue       | 15 +++--------
 src/components/TodoItem.vue          |  7 +++---
 src/composables/useCollection.js     | 28 ++++++---------------
 src/composables/useFormCollection.js | 16 ++++--------
 src/composables/useFormTodo.js       |  9 ++++---
 src/composables/useTodo.js           | 32 ++++++------------------
 src/pages/collection/create.vue      |  2 +-
 src/pages/collection/edit.vue        |  2 +-
 src/pages/collection/id.vue          |  9 +++++--
 src/pages/import.vue                 |  4 +--
 src/repositories/db-collection.js    |  2 +-
 src/types.d.ts                       | 37 ++++++++++++++++++++++++++++
 src/utils/export-collection.js       |  2 +-
 src/utils/json-parser.js             |  2 +-
 src/utils/validate-collection.js     |  3 +--
 17 files changed, 87 insertions(+), 95 deletions(-)
 create mode 100644 src/types.d.ts

diff --git a/src/components/ExampleJson.vue b/src/components/ExampleJson.vue
index ac4090e..f4d7c90 100644
--- a/src/components/ExampleJson.vue
+++ b/src/components/ExampleJson.vue
@@ -1,5 +1,5 @@
 <script setup>
-/** @type {{json: import('@/composables/useCollection').Collection}} */
+/** @type {import('@/types').ExampleJsonProp} */
 const { json } = defineProps({
   json: Object,
 });
diff --git a/src/components/FormCollection.vue b/src/components/FormCollection.vue
index 0b0c00f..c38570f 100644
--- a/src/components/FormCollection.vue
+++ b/src/components/FormCollection.vue
@@ -1,14 +1,8 @@
 <script setup>
 import { Field, ErrorMessage } from "vee-validate";
 
-/**
- * @typedef {import('@/composables/useFormCollection').FormCollection} Form
- * @typedef {Boolean} IsEdit
- * @typedef {{form: Form, isEdit:IsEdit}} PropsForm
- */
-
-/** @type {PropsForm} */
-const props = defineProps({
+/** @type {import('@/types').FormCollectionProp} */
+const { form, isEdit } = defineProps({
   form: Object,
   isEdit: Boolean,
 });
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 28985fa..241e7cf 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,22 +1,13 @@
 <script setup>
 import { computed } from "vue";
 
-/**
- * @type {
- * {
- * totalDoneTodos: Number,
- * totalTodos: Number
- * }
- * }
- */
-const props = defineProps({
+/** @type { import('@/types').ProgressBarProp }  */
+const { totalDoneTodos, totalTodos } = defineProps({
   totalDoneTodos: Number,
   totalTodos: Number,
 });
 
-/**
- *  @returns {import('vue').ComputedRef<number>}
- */
+/**  @returns {import('vue').ComputedRef<number>} */
 const percentage = computed(() => {
   const countTodos = Math.round(
     (props.totalDoneTodos / props.totalTodos) * 100
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 3047278..5bf3395 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -1,10 +1,9 @@
 <script setup>
 /**
- * @type {{
- * todo: import('@/composables/useTodo').Todo,
- * isSelected: boolean
- *  }}
+ * @typedef {import('@/types').TodoItemProp} TodoItemProp
  */
+
+/** @type {TodoItemProp} */
 const { todo, isSelected } = defineProps({
   todo: Object,
   isSelected: Boolean,
diff --git a/src/composables/useCollection.js b/src/composables/useCollection.js
index bc9f686..b2feb16 100644
--- a/src/composables/useCollection.js
+++ b/src/composables/useCollection.js
@@ -1,17 +1,12 @@
 import { ref, toRaw, computed } from "vue";
 import dbCollection from "@/repositories/db-collection";
 /**
- * @typedef {Object} Collection
- * @property {string} id
- * @property {string} name
- * @property {string} description
- * @property {string | Date} created_at
- * @property {import('@/composables/useFormTodo').FormTodo[]} todos
+ * @typedef {import('@/types').Collection} Collection
+ * @typedef {import('vue').Ref<Collection>} CollectionRef
+ * @typedef {import('vue').Ref<Collection[]>} CollectionsRef
  */
 
-/**
- * @type {import('vue').Ref<Collection>}
- */
+/** @type {CollectionRef} */
 const collection = ref({
   id: "",
   name: "",
@@ -19,9 +14,8 @@ const collection = ref({
   created_at: "",
   todos: [],
 });
-/**
- * @type {import('vue').Ref<Collection[]>}
- */
+
+/** @type {CollectionsRef} */
 const collections = ref([]);
 
 const useCollection = () => {
@@ -29,9 +23,7 @@ const useCollection = () => {
     return collection.value?.description.replace(/(?:\r\n|\r|\n)/g, "<br>");
   });
 
-  /**
-   * @param {Collection} collection
-   */
+  /** @param {Collection} collection */
   const addCollection = (collection) => {
     collections.value.push(collection);
 
@@ -42,7 +34,6 @@ const useCollection = () => {
   };
 
   /**
-   *
    * @param {string} id
    * @returns {Collection}
    */
@@ -50,9 +41,7 @@ const useCollection = () => {
     return collections.value.find((collection) => collection.id == id);
   };
 
-  /**
-   * @param {string} id
-   */
+  /** @param {string} id */
   const deleteColllection = (id) => {
     const index = collections.value.findIndex(
       (collection) => collection.id === id
@@ -63,7 +52,6 @@ const useCollection = () => {
   };
 
   /**
-   *
    * @param {Collection} collection
    * @returns {Collection}
    */
diff --git a/src/composables/useFormCollection.js b/src/composables/useFormCollection.js
index 234dc7f..8f5e4c7 100644
--- a/src/composables/useFormCollection.js
+++ b/src/composables/useFormCollection.js
@@ -4,22 +4,17 @@ import useCollection from "@/composables/useCollection";
 
 const { addCollection, updateCollection } = useCollection();
 /**
- * @typedef {Object} FormCollection
- * @property {?string} id
- * @property {string} name
- * @property {string} description
- * @property {import('@/composables/useFormTodo').Todo[]} todos
+ * @typedef {import('@/types').FormCollection} FormCollection
+ * @typedef {import('vue').Ref<FormCollection>} FormCollectionRef
  */
 
-/**
- * @type {import('vue').Ref<FormCollection>}
- */
 const collection = ref({
   name: "",
   description: "",
   todos: [],
 });
 
+/** @type {FormCollectionRef} */
 const form = ref({
   name: collection.value.name,
   description: collection.value.description,
@@ -42,9 +37,8 @@ const useFormCollection = () => {
   }
   function addNewCollection() {
     const nanoid = customAlphabet("1234567890abcdef", 10);
-    /**
-     * @type {FormCollection}
-     */
+
+    /** @type {FormCollection} */
     const collection = {
       id: nanoid(),
       name: form.value.name,
diff --git a/src/composables/useFormTodo.js b/src/composables/useFormTodo.js
index 30eb4ac..d6b92cf 100644
--- a/src/composables/useFormTodo.js
+++ b/src/composables/useFormTodo.js
@@ -2,12 +2,13 @@ import { nanoid } from "nanoid";
 import { ref } from "vue";
 
 /**
- * @typedef {import('@/composables/useTodo').Todo} FormTodo
+ *  @typedef {import('@/types').Todo} Todo
+ *  @typedef {import('vue').Ref<Todo>} FormTodo
  */
+
 const isEditing = ref(false);
-/**
- * @type {import('vue').Ref<FormTodo>}
- */
+
+/** @type {FormTodo} */
 const formTodo = ref({
   id: `todo-${nanoid(7)}`,
   name: "",
diff --git a/src/composables/useTodo.js b/src/composables/useTodo.js
index e5066aa..3589990 100644
--- a/src/composables/useTodo.js
+++ b/src/composables/useTodo.js
@@ -1,14 +1,8 @@
 import dbCollection from "@/repositories/db-collection";
 import { toRaw, computed } from "vue";
 import useCollection from "@/composables/useCollection";
-/**
- * @typedef {Object} Todo
- * @property {string} id
- * @property {string} name
- * @property {string} priority
- * @property {string} isDone
- * @property {Date} created_at
- */
+
+/** @typedef {import('@/types')} Todo */
 
 const { collection, getDetailCollection } = useCollection();
 
@@ -17,10 +11,8 @@ const useTodo = () => {
   const doneTodos = computed(() =>
     collection.value.todos?.filter((todo) => todo.isDone === true)
   );
-  /**
-   * Add new todo to collection
-   * @param {Todo} todo
-   */
+
+  /** @param {Todo} todo */
   const addTodo = (todo) => {
     const { todos } = getDetailCollection(collection.value.id);
 
@@ -32,10 +24,7 @@ const useTodo = () => {
     dbCollection.update(rawCollection);
   };
 
-  /**
-   * mark todo as done or not
-   * @param {number} index
-   */
+  /** @param {number} index */
   const markTodo = (index) => {
     const todo = collection.value.todos.at(index);
 
@@ -47,10 +36,7 @@ const useTodo = () => {
     dbCollection.update(rawCollection);
   };
 
-  /**
-   * Edit todo in collection
-   * @param {Todo} newTodo
-   */
+  /** @param {Todo} newTodo */
   const editTodo = (newTodo) => {
     const { todos } = getDetailCollection(collection.value.id);
     const index = collection.value.todos.findIndex(
@@ -64,10 +50,8 @@ const useTodo = () => {
 
     dbCollection.update(rawCollection);
   };
-  /**
-   *
-   * @param {number} index
-   */
+
+  /** @param {number} index */
   const deleteTodo = (index) => {
     const { todos } = getDetailCollection(collection.value.id);
 
diff --git a/src/pages/collection/create.vue b/src/pages/collection/create.vue
index ea6a5a5..58b0d49 100644
--- a/src/pages/collection/create.vue
+++ b/src/pages/collection/create.vue
@@ -12,7 +12,7 @@ const schema = yup.object({
   description: yup.string(),
 });
 
-/** @param {import('@/composables/useCollection').Collection} values */
+/** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = values;
   form.value.todos = [];
diff --git a/src/pages/collection/edit.vue b/src/pages/collection/edit.vue
index 27abafb..7ff8d50 100644
--- a/src/pages/collection/edit.vue
+++ b/src/pages/collection/edit.vue
@@ -15,7 +15,7 @@ const schema = yup.object({
 });
 const isEdit = route.fullPath.includes("edit");
 
-/** @param {import('@/composables/useCollection').Collection} values */
+/** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = {
     ...values,
diff --git a/src/pages/collection/id.vue b/src/pages/collection/id.vue
index 51226ea..3f1c5b5 100644
--- a/src/pages/collection/id.vue
+++ b/src/pages/collection/id.vue
@@ -23,6 +23,11 @@ const vFormTodo = useForm({
   },
 });
 
+/**
+ * @typedef {import('@/types').Todo} Todo
+ */
+
+/** @type {import('vue').Ref<Todo>} */
 const selectedTodo = ref({});
 const resetVForm = async () => {
   vFormTodo.setValues({
@@ -34,14 +39,14 @@ const resetVForm = async () => {
   });
 };
 
-/** @param {import('@/composables/useTodo').Todo} values */
+/** @param {Todo} values */
 const submitUpdateTodo = (values) => {
   editTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
 
-/** @param {import('@/composables/useTodo').Todo} values */
+/** @param {import('@/types').Todo} values */
 const submitAddTodo = (values) => {
   addTodo(values);
   resetFormTodo();
diff --git a/src/pages/import.vue b/src/pages/import.vue
index 7d1bda1..0b3704d 100644
--- a/src/pages/import.vue
+++ b/src/pages/import.vue
@@ -11,12 +11,12 @@ const router = useRouter();
 const { addCollection, getDetailCollection, deleteColllection } =
   useCollection();
 
-const isAttached = ref(false);
+/** @type {import('@/composables/useCollection').CollectionRef} */
 const collection = ref(null);
+const isAttached = ref(false);
 const isCollectionExist = ref(false);
 
 /**
- *
  * @param {DragEvent} event
  */
 function handleDrop(event) {
diff --git a/src/repositories/db-collection.js b/src/repositories/db-collection.js
index 4b89565..d285fe3 100644
--- a/src/repositories/db-collection.js
+++ b/src/repositories/db-collection.js
@@ -1,6 +1,6 @@
 import { openDB } from "idb";
 /**
- * @typedef {import('@/composables/useCollection').Collection} Collection
+ * @typedef {import('@/types').Collection} Collection
  */
 const dbPromise = openDB("collection-db", 1, {
   upgrade(database) {
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..9bd3610
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,37 @@
+export interface Collection {
+  id: string;
+  name: string;
+  description: string;
+  created_at: Date;
+  todos: Todo[];
+}
+
+export interface FormCollection extends Omit<"created_at"> {}
+
+export interface Todo {
+  id: string;
+  name: string;
+  priority: string;
+  isDone: boolean;
+  created_at: Date;
+}
+
+// Component Props
+export interface TodoItemProp {
+  todo: Todo;
+  isSelected: boolean;
+}
+
+export interface ProgressBarProp {
+  totalDoneTodos: number;
+  totalTodos: number;
+}
+
+export interface FormCollectionProp {
+  form: FormCollection;
+  isEdit: boolean;
+}
+
+export interface ExampleJsonProp {
+  json: Collection;
+}
diff --git a/src/utils/export-collection.js b/src/utils/export-collection.js
index 175d068..d757e48 100644
--- a/src/utils/export-collection.js
+++ b/src/utils/export-collection.js
@@ -1,6 +1,6 @@
 /**
  *
- * @param {import('@/composables/useCollection').Collection} collection
+ * @param {import('@/types').Collection} collection
  * @returns
  */
 const exportCollection = (collection) => {
diff --git a/src/utils/json-parser.js b/src/utils/json-parser.js
index c4ba48c..c1a11cf 100644
--- a/src/utils/json-parser.js
+++ b/src/utils/json-parser.js
@@ -1,6 +1,6 @@
 /**
  * @param {File} file
- * @returns
+ * @returns {Promise<import('@/types').Collection>}
  */
 function jsonParser(file) {
   return new Promise((resolve, reject) => {
diff --git a/src/utils/validate-collection.js b/src/utils/validate-collection.js
index eade699..eef11d2 100644
--- a/src/utils/validate-collection.js
+++ b/src/utils/validate-collection.js
@@ -1,6 +1,5 @@
 /**
- *
- * @param {import('@/composables/useCollection').Collection} collection
+ * @param {import('@/types').Collection} collection
  * @returns {boolean}
  */
 const validateCollection = (collection) => {