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>