added ExpenseItem story and removed store dependency

Change-Id: I5dc757a58eb322cac9337fea349b0f8271af1331

.changeset/great-guests-explain.md

@@ -0,0 +1,5 @@
+---
+"@inkbeard/budget-it": minor
+---
+
+- Moved ExpenseItem store logic to be props

.changeset/thirty-keys-cheat.md

@@ -0,0 +1,5 @@
+---
+"ui-library": minor
+---
+
+Added ExpenseItem story

apps/ui-library/.storybook/preview.ts

@@ -2,11 +2,13 @@
 import { setup } from '@storybook/vue3'
 import '../src/assets/global.css';
 import { createPinia } from 'pinia';
+import InkbeardUiVue from '@inkbeard/ui-vue';
 
 const pinia = createPinia();
 
 setup((app) => {
   app.use(pinia);
+  app.use(InkbeardUiVue);
 });
 
 const preview = {

apps/ui-library/src/stories/ExpenseItem.stories.js

@@ -0,0 +1,28 @@
+import { ExpenseItem } from '@inkbeard/budget-it';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Budget It/ExpenseItem',
+  component: ExpenseItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const SampleExpenseItem = {
+  args: {
+    expense: {
+      amount: 2,
+      categoryId: 1,
+      name: 'Netflix',
+      order: 0,
+      sourceId: 1,
+    },
+    sourceList: {
+      1: 'Credit Card',
+      3: 'Checking Account',
+      4: 'Savings Account',
+      5: 'Cash',
+    },
+  },
+};

packages/budget-it/index.ts

@@ -1,7 +1,9 @@
 import AddCategory from './src/components/AddCategory.vue';
 import SourceListing from './src/components/SourceListing.vue';
+import ExpenseItem from './src/components/ExpenseItem.vue';
 
 export {
   AddCategory,
+  ExpenseItem,
   SourceListing,
 };

packages/budget-it/src/components/ExpenseCategory.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
   import { computed, ref } from 'vue';
   import { AppButton } from '@inkbeard/ui-vue';
-  import type { ExpenseInfo } from '@/stores/expenses';
   import type { CategoryInfo } from '@/stores/categories';
   import { useCategoriesStore } from '@/stores/categories';
   import { useExpensesStore } from '@/stores/expenses';
+  import { useSourcesStore } from '@/stores/sources';
+  import type { ExpenseInfo } from './ExpenseItem.vue';
   import ExpenseItem from './ExpenseItem.vue';
 
-  const props = defineProps({
-    category: {
-      type: Object as () => CategoryInfo,
-      required: true,
-    },
-  });
+  const props = defineProps<{
+    category: CategoryInfo,
+  }>();
   /**
    * Get the information for all the expenses for this category.
    */
@@ -34,7 +32,6 @@
     categoryExpenses.value.reduce((acc, expense) => acc + expense.amount, 0)
   ));
   const isOpen = ref(false);
-
 </script>
 
 <template>
@@ -71,9 +68,11 @@
         <template v-if="categoryExpenses.length">
           <ExpenseItem
             v-for="expense in categoryExpenses"
+            :id="expense.id"
             :key="expense.id"
+            v-model:expense="(useExpensesStore().expenseList[expense.id] as ExpenseInfo)"
             data-test="category expense"
-            :expense="expense"
+            :source-list="useSourcesStore().sourceList"
           />
         </template>
         <p v-else>

packages/budget-it/src/components/ExpenseItem.vue

@@ -1,52 +1,53 @@
 <script setup lang="ts">
   import { computed, ref } from 'vue';
-  import type { ExpenseInfo } from '@/stores/expenses';
-  import { useExpensesStore } from '@/stores/expenses';
-  import { useSourcesStore } from '@/stores/sources';
   import { AppInputNumber, AppDropdown } from '@inkbeard/ui-vue';
 
-  const props = defineProps<{
-    expense: ExpenseInfo;
-  }>();
-  const { expenseList } = useExpensesStore();
-  const expenseAmount = ref(props.expense.amount);
-  const expenseSourceId = computed({
-    get: () => props.expense.sourceId,
-    set: (value: number) => {
-      const { id } = props.expense;
+  export interface ExpenseInfo {
+    amount: number // Amount of the expense
+    categoryId: number // Unique identifier for the category the expense belongs to`
+    description?: string // Description of the expense
+    id: number // Unique identifier for the expense
+    name: string // Name of the expense
+    order: number // Order of the expense in the list
+    sourceId: number // Source Id of the expense that is mapped from the sources store
+  }
 
-      if (id) {
-        expenseList[id].sourceId = value;
-      }
-    },
-  });
-  const updateExpenseAmount = () => {
-    const { id } = props.expense;
+  export interface ExpenseList {
+    [key: number]: ExpenseInfo;
+  }
 
-    if (id) {
-      expenseList[id].amount = expenseAmount.value;
-    }
-  };
+  const props = defineProps<{
+    sourceList: Record<string, string>;
+  }>();
+  const expense = defineModel<ExpenseInfo>('expense');
+  const expenseAmount = ref(expense.value!.amount);
+  /**
+   * Get an alphabatize list of sources and their IDs.
+   */
+  const alphabaticSourceList = computed(() => Object.entries(props.sourceList)
+    .map(([id, source]) => ({ source, id: +id }))
+    .sort((a, b) => a.source.toLowerCase().localeCompare(b.source.toLowerCase())));
 
 </script>
 
 <template>
   <form @submit.prevent>
     <AppInputNumber
-      :id="`${expense.categoryId}-${expense.name}`"
+      :id="`${expense!.categoryId}-${expense!.name}`"
       v-model="expenseAmount"
-      :input-id="`${expense.categoryId}-${expense.name}`"
-      :label="expense.name"
-      :label-description="expense.description"
-      @blur="updateExpenseAmount"
+      :input-id="`${expense!.categoryId}-${expense!.name}`"
+      :label="expense!.name"
+      :label-description="expense!.description"
+      @blur="expense!.amount = expenseAmount"
     />
     <AppDropdown
-      v-model="expenseSourceId"
+      :key="expense!.sourceId"
+      v-model="expense!.sourceId"
       input-id="expense-source"
       label="Source"
       option-label="source"
       option-value="id"
-      :options="useSourcesStore().alphabaticSourceList"
+      :options="alphabaticSourceList"
     />
   </form>
 </template>

packages/budget-it/tsconfig.json

@@ -11,7 +11,10 @@
       "path": "./tsconfig.vitest.json"
     }
   ],
+  "exclude": [
+    "./index.d.ts"
+  ],
   "compilerOptions": {
     "module": "NodeNext"
   }
-}
+}