Merge pull request #2 from cherryontech/chore/base-components

chore: Add base components and stories

.storybook/preview.js

@@ -1,3 +1,5 @@
+import '/src/assets/main.css'
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

src/App.vue

@@ -1,5 +1,45 @@
 <template>
   <header>incoming header</header>
 
-  <main>this will be main area</main>
+  <main>
+    <StepInput
+      v-model:stepText="bio"
+      :stepNumber="1"
+      stepLabel="Step 1: Add your current pitch"
+    />
+
+    <StepInput
+      v-model:stepText="jobDescription"
+      :stepNumber="2"
+      stepLabel="Step 2: Paste a job description"
+    />
+
+    <BaseButton @click="createMelange">Generate</BaseButton>
+
+    <div class="border">
+      <h2>Melange list:</h2>
+      <ul>
+        <li class="m-2 border" v-for="(item, index) in melange" :key="index">
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  </main>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+
+import BaseButton from './components/BaseButton.vue'
+import StepInput from './components/StepInput.vue'
+
+const bio = ref('')
+const jobDescription = ref('')
+
+const melange = ref([])
+const createMelange = () => {
+  melange.value.push(`${bio.value}, ${jobDescription.value}`)
+
+  jobDescription.value = ''
+}
+</script>

src/components/BaseButton.stories.js

@@ -0,0 +1,17 @@
+import BaseButton from './BaseButton.vue'
+
+export default {
+  title: 'Base button',
+  component: BaseButton,
+}
+
+const Template = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args }
+  },
+  template: `<BaseButton>What a nice label!</BaseButton>`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {}

src/components/BaseButton.vue

@@ -0,0 +1,5 @@
+<template>
+  <button class="p-2 border border-slate-300">
+    <slot />
+  </button>
+</template>

src/components/BaseLabel.stories.js

@@ -0,0 +1,17 @@
+import BaseLabel from './BaseLabel.vue'
+
+export default {
+  title: 'Base label',
+  component: BaseLabel,
+}
+
+const Template = (args) => ({
+  components: { BaseLabel },
+  setup() {
+    return { args }
+  },
+  template: `<BaseLabel>What a nice label!</BaseLabel>`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {}

src/components/BaseLabel.vue

@@ -0,0 +1,5 @@
+<template>
+  <label>
+    <slot />
+  </label>
+</template>

src/components/BaseTextArea.stories.js

@@ -0,0 +1,19 @@
+import BaseTextArea from './BaseTextArea.vue'
+
+export default {
+  title: 'Base text area',
+  component: BaseTextArea,
+}
+
+const Template = (args) => ({
+  components: { BaseTextArea },
+  setup() {
+    return { args }
+  },
+  template: `<BaseTextArea v-bind="args" />`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  modelValue: 'Cool text',
+}

src/components/BaseTextArea.vue

@@ -0,0 +1,13 @@
+<template>
+  <textarea
+    class="m-4 border"
+    rows="4"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script setup>
+defineProps(['modelValue'])
+defineEmits(['update:modelValue'])
+</script>

src/components/StepInput.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+
+import { shallowMount } from '@vue/test-utils'
+
+import StepInput from './StepInput.vue'
+import BaseTextArea from './BaseTextArea.vue'
+import BaseLabel from './BaseLabel.vue'
+
+describe('StepInput', () => {
+  it('passes a formatted id to the BaseTextArea', () => {
+    const wrapper = shallowMount(StepInput, {
+      props: {
+        stepNumber: 99,
+      },
+    })
+
+    expect(wrapper.findComponent(BaseTextArea).attributes('id')).toContain(99)
+  })
+
+  it('passes a formated for attr to the BaseLabel', () => {
+    const wrapper = shallowMount(StepInput, {
+      props: {
+        stepNumber: 99,
+      },
+    })
+
+    expect(wrapper.findComponent(BaseLabel).attributes('for')).toContain(99)
+  })
+})

src/components/StepInput.stories.js

@@ -0,0 +1,20 @@
+import StepInput from './StepInput.vue'
+
+export default {
+  title: 'Step input',
+  component: StepInput,
+}
+
+const Template = (args) => ({
+  components: { StepInput },
+  setup() {
+    return { args }
+  },
+  template: `<StepInput v-bind="args" />`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  stepLabel: 'First step is best',
+  stepNumber: 99,
+}

src/components/StepInput.vue

@@ -0,0 +1,37 @@
+import BaseLabel from './BaseLabel.vue';
+
+<template>
+  <div class="flex flex-col border">
+    <BaseLabel :for="stepId">{{ stepLabel }}</BaseLabel>
+
+    <BaseTextArea
+      :id="stepId"
+      :modelValue="stepText"
+      @input="$emit('update:stepText', $event.target.value)"
+    />
+  </div>
+</template>
+
+<script setup>
+import BaseLabel from './BaseLabel.vue'
+import BaseTextArea from './BaseTextArea.vue'
+
+const props = defineProps({
+  stepNumber: {
+    type: Number,
+    required: true,
+  },
+  stepLabel: {
+    type: String,
+    default: '',
+  },
+  stepText: {
+    type: String,
+    default: '',
+  },
+})
+
+defineEmits(['update:stepText'])
+
+const stepId = `step-input-${props.stepNumber}`
+</script>