make it easier to understant the syntax of a task

src/modules/task/components/StepInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import {
-  adaptStepsToTextarea,
-  adaptTextareaToSteps
+adaptStepsToTextarea,
+adaptTextareaToSteps
 } from '../infra/adaptStepsToTextarea'
 import type { Stepable } from '../interfaces/stepable'
 
@@ -38,7 +38,7 @@ const stepsTextarea = computed({
         v-model="stepsTextarea"
         rows="15"
         class="textarea"
-        placeholder="- [step] | <estimation>"
+        placeholder="- step | estimation"
       ></textarea>
     </div>
   </div>

src/modules/task/components/TaskForm.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
+import { createUuid } from '@/shared/create-uuid'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Stepable } from '../interfaces/stepable'
@@ -13,7 +14,40 @@ const router = useRouter()
 const props = defineProps<{ id: string; initialTask?: Taskable }>()
 const id = computed(() => props.id)
 
-const steps = ref<Stepable[]>(props.initialTask?.steps ?? [])
+const exampleSteps: Stepable[] = [
+  {
+    id: createUuid(),
+    title: 'create math.test file, test add function for simple cases',
+    estimation: 3
+  },
+  {
+    id: createUuid(),
+    title: 'create the math file, implement add function',
+    estimation: 3
+  },
+  {
+    id: createUuid(),
+    title: 'commit',
+    estimation: 1
+  },
+  {
+    id: createUuid(),
+    title: 'TDD for the multiply function',
+    estimation: 8
+  },
+  {
+    id: createUuid(),
+    title: 'write documentation',
+    estimation: 10
+  },
+  {
+    id: createUuid(),
+    title: 'commit, push and create the PR',
+    estimation: 5
+  },
+]
+
+const steps = ref<Stepable[]>(props.initialTask?.steps ?? exampleSteps)
 
 const title = ref(props.initialTask?.title ?? '')
 const link = ref(props.initialTask?.link ?? '')

src/views/task/NewTask.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NewTaskForm from '@/modules/task/components/NewTaskForm.vue'
+import NewTaskForm from '@/modules/task/components/NewTaskForm.vue';
 </script>
 
 <template>
@@ -7,8 +7,3 @@ import NewTaskForm from '@/modules/task/components/NewTaskForm.vue'
     <NewTaskForm />
   </div>
 </template>
-
-<style scoped>
-.new-task {
-}
-</style>