feat: extract product identity workflow step

apps/web/src/components/molecules/ProductIdentityStep.scss

@@ -0,0 +1,9 @@
+.product-identity-step {
+  align-content: start;
+}
+
+.product-identity-step__intro {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}

apps/web/src/components/molecules/ProductIdentityStep.stories.js

@@ -0,0 +1,22 @@
+import ProductIdentityStep from './ProductIdentityStep.vue';
+
+export default { title: 'Molecules/ProductIdentityStep', component: ProductIdentityStep };
+
+export const Empty = {
+  args: {
+    productName: '',
+    categoryId: '',
+    categories: [
+      { id: 'cards', name: 'Trading cards' },
+      { id: 'merchandise', name: 'Merchandise' },
+    ],
+  },
+};
+
+export const Filled = {
+  args: {
+    productName: 'Charizard ex #199/165',
+    categoryId: 'cards',
+    categories: [{ id: 'cards', name: 'Trading cards' }],
+  },
+};

apps/web/src/components/molecules/ProductIdentityStep.vue

@@ -0,0 +1,48 @@
+<script setup>
+defineProps({
+  productName: { type: String, required: true },
+  categoryId: { type: String, required: true },
+  categories: { type: Array, required: true },
+  isSaving: { type: Boolean, default: false },
+});
+
+defineEmits(['update:productName', 'update:categoryId', 'submit']);
+</script>
+
+<template>
+  <form id="workflow-product" class="showcase-panel product-identity-step" @submit.prevent="$emit('submit')">
+    <div>
+      <p class="catalog-kicker">Step 1</p>
+      <h2>Identify the Product</h2>
+      <p class="product-identity-step__intro">Create the shared product record before adding a physical copy.</p>
+    </div>
+    <label class="fixture-label" for="product-name">Name</label>
+    <input
+      id="product-name"
+      :value="productName"
+      class="fixture-input"
+      required
+      @input="$emit('update:productName', $event.target.value)"
+    />
+    <label class="fixture-label" for="product-category">Category</label>
+    <select
+      id="product-category"
+      :value="categoryId"
+      class="fixture-input"
+      required
+      @change="$emit('update:categoryId', $event.target.value)"
+    >
+      <option value="" disabled>Select a category</option>
+      <option v-for="category in categories" :key="category.id" :value="category.id">
+        {{ category.name }}
+      </option>
+    </select>
+    <button class="button button--primary" type="submit" :disabled="isSaving">
+      Create product
+    </button>
+  </form>
+</template>
+
+<style scoped lang="scss">
+@use './ProductIdentityStep.scss';
+</style>

apps/web/src/pages/AdminHomePage.vue

@@ -5,6 +5,7 @@ import { RouterLink } from "vue-router";
 import { useAuth } from "@/composables/useAuth.js";
 import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue";
 import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowStepper.vue";
+import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue";
 import {
   createAdminInventory,
   createAdminProduct,
@@ -675,39 +676,15 @@ onMounted(load);
     <InventoryWorkflowStepper :steps="workflowSteps" />
 
     <div class="admin-workspace-grid">
-      <form id="workflow-product" class="showcase-panel" @submit.prevent="createProduct">
-        <h2>Add product</h2>
-        <label class="fixture-label" for="product-name">Name</label>
-        <input
-          id="product-name"
-          v-model="productName"
-          class="fixture-input"
-          required
-        />
-        <label class="fixture-label" for="product-category">Category</label>
-        <select
-          id="product-category"
-          v-model="categoryId"
-          class="fixture-input"
-          required
-        >
-          <option value="" disabled>Select a category</option>
-          <option
-            v-for="category in categories"
-            :key="category.id"
-            :value="category.id"
-          >
-            {{ category.name }}
-          </option>
-        </select>
-        <button
-          class="button button--primary"
-          type="submit"
-          :disabled="isSaving"
-        >
-          Create product
-        </button>
-      </form>
+      <ProductIdentityStep
+        :product-name="productName"
+        :category-id="categoryId"
+        :categories="categories"
+        :is-saving="isSaving"
+        @update:product-name="productName = $event"
+        @update:category-id="categoryId = $event"
+        @submit="createProduct"
+      />
       <form id="workflow-mapping" class="showcase-panel" @submit.prevent="createProviderMapping">
         <h2>Link provider mapping</h2>
         <label class="fixture-label" for="mapping-product">Product</label>