Feat/add bulma (#1)

* remove fixture for task and steps

* install bulma

* convert to scss files

* reset and implement first style classes

* design task form

* design task view

* design step record

* 💄 (home) new task and reset styling

* fix step title height

* add a record progress

* ♻️ (record) extract record controls

* ♿️ (record) add text for progress

* 💄 (step record) fix blob size

* ♻️ (record) no more getters who do an action too

src/modules/task/components/NewTaskForm.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { createUuid } from '@/shared/create-uuid'
-import { faker } from '@faker-js/faker'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { createStepFixture } from '../models/step.fixture'
+import type { Stepable } from '../interfaces/stepable'
 import { Task } from '../models/task'
 import { useTaskStore } from '../stores/useTask.store'
 import StepInput from './StepInput.vue'
@@ -13,13 +12,11 @@ const router = useRouter()
 
 const id = createUuid()
 
-const title = ref(faker.animal.bird())
-const link = ref(faker.internet.url())
-const steps = ref(
-  Array.from({ length: Math.floor(Math.random() * 10) }, () =>
-    createStepFixture()
-  )
-)
+const title = ref('')
+const link = ref('')
+
+const steps = ref<Stepable[]>([])
+
 const totalEstimation = computed(() =>
   steps.value.map((step) => step.estimation).reduce((a, b) => a + b, 0)
 )
@@ -46,21 +43,29 @@ const saveTask = () => {
 </script>
 
 <template>
-  <div>
-    <h1>Create a task</h1>
-    <h2>Estimation: {{ totalEstimation }} minutes</h2>
-    <form @submit.prevent="saveTask">
-      <button type="submit">save task</button>
-      <div>
-        <label for="title">Title</label>
-        <input type="text" id="title" v-model="title" />
-      </div>
-      <div>
-        <label for="link">User story link</label>
-        <input type="text" id="link" v-model="link" />
-      </div>
-      <StepInput v-model="steps" />
-    </form>
+  <div class="columns is-centered">
+    <div class="column is-half">
+      <h1 class="title">Create a task</h1>
+      <h2 class="subtitle">Estimation: {{ totalEstimation }} minutes</h2>
+      <form @submit.prevent="saveTask">
+        <div class="field">
+          <label class="label" for="title">Title</label>
+          <div class="control">
+            <input class="input" type="text" id="title" v-model="title" />
+          </div>
+        </div>
+        <div class="field">
+          <label class="label" for="link">User story link</label>
+          <div class="control">
+            <input class="input" type="text" id="link" v-model="link" />
+          </div>
+        </div>
+        <StepInput v-model="steps" />
+        <button class="button is-primary is-fullwidth" type="submit">
+          save
+        </button>
+      </form>
+    </div>
   </div>
 </template>
 

src/modules/task/components/StepInput.vue

@@ -29,15 +29,18 @@ const stepsTextarea = computed({
 </script>
 
 <template>
-  <div class="step-input">
-    <label for="steps">steps</label>
-    <textarea
-      id="steps"
-      name="steps"
-      v-model="stepsTextarea"
-      cols="40"
-      rows="20"
-    ></textarea>
+  <div class="step-input field">
+    <label class="label" for="steps">steps</label>
+    <div class="control">
+      <textarea
+        id="steps"
+        name="steps"
+        v-model="stepsTextarea"
+        rows="15"
+        class="textarea"
+        placeholder="- [step] | <minutes you estimate it will take>"
+      ></textarea>
+    </div>
   </div>
 </template>
 

src/modules/task/components/TaskList.vue

@@ -6,18 +6,25 @@ const taskStore = useTaskStore()
 </script>
 
 <template>
-  <ul class="task-list">
-    <li v-for="task in taskStore.recentTasks" :key="task.id">
-      <router-link :to="{ name: 'task-view', params: { id: task.id } }">{{
-        task.title
-      }}</router-link>
-      | {{ task.totalEstimation }} minutes |
-      {{ formatDate(task.date) }}
-    </li>
-  </ul>
+  <div class="content">
+    <ul class="task-list">
+      <li v-for="task in taskStore.recentTasks" :key="task.id">
+        <router-link
+          :to="{ name: 'task-view', params: { id: task.id } }"
+          class="button is-link is-outlined"
+          >{{ task.title }}</router-link
+        >
+        <span> {{ task.totalEstimation }} minutes </span>
+        <span>{{ formatDate(task.date) }}</span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped>
-.task-list {
+.task-list li {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 </style>