@gxp-dev/app-ui 0.1.6

package/src/experience/pages/form/FormPage.vue

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { ref, computed, type PropType } from 'vue'
+import { cn } from '@/lib/utils'
+
+export type FormFieldType =
+  | 'text'
+  | 'email'
+  | 'textarea'
+  | 'select'
+  | 'radio'
+  | 'checkbox'
+  | 'heading'
+
+export interface FormFieldOption {
+  value: string
+  label: string
+}
+
+export interface FormFieldDef {
+  type: FormFieldType
+  name: string
+  label?: string
+  placeholder?: string
+  required?: boolean
+  options?: FormFieldOption[]
+  defaultValue?: string | boolean
+  /** Show this field only when this predicate returns true. */
+  when?: (values: Record<string, unknown>) => boolean
+}
+
+const props = defineProps({
+  title: { type: String, default: undefined },
+  subtitle: { type: String, default: undefined },
+  fields: { type: Array as PropType<FormFieldDef[]>, default: () => [] },
+  submitLabel: { type: String, default: 'Submit' },
+  backLabel: { type: String, default: 'Back' },
+  showBack: { type: Boolean, default: true },
+  class: { type: String, default: undefined },
+})
+
+const emit = defineEmits<{
+  next: [values: Record<string, unknown>]
+  back: []
+  exit: []
+}>()
+
+const initialValues = (): Record<string, unknown> => {
+  const out: Record<string, unknown> = {}
+  for (const f of props.fields) {
+    if (f.defaultValue !== undefined) out[f.name] = f.defaultValue
+    else if (f.type === 'checkbox') out[f.name] = false
+    else out[f.name] = ''
+  }
+  return out
+}
+
+const values = ref<Record<string, unknown>>(initialValues())
+
+const visibleFields = computed(() => props.fields.filter((f) => !f.when || f.when(values.value)))
+
+const missingRequired = computed(() => {
+  return visibleFields.value.some((f) => {
+    if (!f.required || f.type === 'heading') return false
+    const v = values.value[f.name]
+    if (typeof v === 'boolean') return !v
+    if (typeof v === 'string') return v.trim() === ''
+    return v === undefined || v === null
+  })
+})
+
+const handleSubmit = () => {
+  if (missingRequired.value) return
+  // Strip values whose fields were hidden by `when()`
+  const visibleNames = new Set(visibleFields.value.map((f) => f.name))
+  const payload: Record<string, unknown> = {}
+  for (const [k, v] of Object.entries(values.value)) {
+    if (visibleNames.has(k)) payload[k] = v
+  }
+  emit('next', payload)
+}
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'experience-page experience-page--form flex h-full w-full flex-col gap-4 p-6',
+      props.class,
+    )"
+    data-testid="form-page"
+  >
+    <slot name="header">
+      <h1 v-if="title" class="text-2xl font-bold text-foreground">{{ title }}</h1>
+      <p v-if="subtitle" class="text-sm text-muted-foreground">{{ subtitle }}</p>
+    </slot>
+
+    <div class="flex-1 space-y-4 overflow-y-auto" data-testid="form-fields">
+      <template v-for="field in visibleFields" :key="field.name">
+        <div v-if="field.type === 'heading'" class="pt-2">
+          <h2 class="text-lg font-semibold text-foreground">{{ field.label }}</h2>
+        </div>
+
+        <label v-else-if="field.type === 'checkbox'" class="flex items-center gap-2 text-sm text-foreground">
+          <input
+            v-model="values[field.name]"
+            type="checkbox"
+            class="h-4 w-4 rounded border-border"
+            :data-testid="`form-field-${field.name}`"
+          />
+          {{ field.label }}
+          <span v-if="field.required" class="text-destructive">*</span>
+        </label>
+
+        <div v-else class="space-y-1">
+          <label v-if="field.label" class="text-sm font-medium text-foreground">
+            {{ field.label }}
+            <span v-if="field.required" class="text-destructive">*</span>
+          </label>
+
+          <input
+            v-if="field.type === 'text' || field.type === 'email'"
+            :value="values[field.name]"
+            :type="field.type"
+            :placeholder="field.placeholder"
+            class="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground"
+            :data-testid="`form-field-${field.name}`"
+            @input="values[field.name] = ($event.target as HTMLInputElement).value"
+          />
+
+          <textarea
+            v-else-if="field.type === 'textarea'"
+            :value="values[field.name] as string"
+            :placeholder="field.placeholder"
+            rows="3"
+            class="w-full resize-none rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground"
+            :data-testid="`form-field-${field.name}`"
+            @input="values[field.name] = ($event.target as HTMLTextAreaElement).value"
+          />
+
+          <select
+            v-else-if="field.type === 'select'"
+            v-model="values[field.name]"
+            class="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground"
+            :data-testid="`form-field-${field.name}`"
+          >
+            <option v-if="field.placeholder" value="" disabled>{{ field.placeholder }}</option>
+            <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </option>
+          </select>
+
+          <div v-else-if="field.type === 'radio'" class="space-y-1">
+            <label
+              v-for="opt in field.options"
+              :key="opt.value"
+              class="flex items-center gap-2 text-sm text-foreground"
+            >
+              <input
+                v-model="values[field.name]"
+                type="radio"
+                :value="opt.value"
+                :name="field.name"
+                :data-testid="`form-field-${field.name}-${opt.value}`"
+              />
+              {{ opt.label }}
+            </label>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <slot
+      name="actions"
+      :submit="handleSubmit"
+      :back="() => $emit('back')"
+      :missing-required="missingRequired"
+    >
+      <div class="flex justify-between gap-3">
+        <button
+          v-if="showBack"
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80"
+          data-testid="form-back"
+          @click="$emit('back')"
+        >
+          {{ backLabel }}
+        </button>
+        <span v-else />
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="missingRequired"
+          data-testid="form-submit"
+          @click="handleSubmit"
+        >
+          {{ submitLabel }}
+        </button>
+      </div>
+    </slot>
+  </section>
+</template>

package/src/experience/pages/form/index.ts

@@ -0,0 +1,7 @@
+import FormPageComponent from './FormPage.vue'
+import { withExperienceDefaults } from '../../withDefaults'
+
+export const FormPage = withExperienceDefaults(FormPageComponent, {
+  resultKey: 'formValues',
+})
+export type { FormFieldDef, FormFieldType, FormFieldOption } from './FormPage.vue'

package/src/experience/pages/instructions/InstructionsPage.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import InstructionsPageComponent from './InstructionsPage.vue'
+
+const meta = {
+  title: 'Experience/Pages/InstructionsPage',
+  component: InstructionsPageComponent,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof InstructionsPageComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'How it works',
+    html: '<ol><li>Step one</li><li>Step two</li><li>Step three</li></ol>',
+  },
+  render: (args) => ({
+    components: { InstructionsPage: InstructionsPageComponent },
+    setup: () => ({ args }),
+    template: '<div class="h-screen w-screen"><InstructionsPage v-bind="args" /></div>',
+  }),
+}

package/src/experience/pages/instructions/InstructionsPage.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface InstructionsPageProps {
+  title?: string
+  html?: string
+  mediaSrc?: string
+  /** Override media type detection. */
+  mediaType?: 'image' | 'video'
+  ctaText?: string
+  backLabel?: string
+  showBack?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<InstructionsPageProps>(), {
+  title: 'How it works',
+  ctaText: 'Continue',
+  backLabel: 'Back',
+  showBack: true,
+})
+
+defineEmits<{
+  next: []
+  back: []
+  exit: []
+}>()
+
+const VIDEO_EXTS = ['.mp4', '.webm', '.ogg', '.mov']
+
+const resolvedMediaType = computed<'image' | 'video' | null>(() => {
+  if (!props.mediaSrc) return null
+  if (props.mediaType) return props.mediaType
+  const lower = props.mediaSrc.toLowerCase()
+  return VIDEO_EXTS.some((ext) => lower.includes(ext)) ? 'video' : 'image'
+})
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'experience-page experience-page--instructions flex h-full w-full flex-col gap-6 p-8',
+      props.class,
+    )"
+    data-testid="instructions-page"
+  >
+    <slot name="header">
+      <h1 class="text-3xl font-bold tracking-tight text-foreground">{{ title }}</h1>
+    </slot>
+
+    <div class="flex flex-1 flex-col gap-6 overflow-y-auto">
+      <slot name="media">
+        <div
+          v-if="mediaSrc"
+          class="relative w-full overflow-hidden rounded-lg bg-muted"
+          data-testid="instructions-media"
+        >
+          <video
+            v-if="resolvedMediaType === 'video'"
+            :src="mediaSrc"
+            class="w-full"
+            autoplay
+            muted
+            loop
+            playsinline
+          />
+          <img
+            v-else
+            :src="mediaSrc"
+            class="w-full"
+            alt=""
+          />
+        </div>
+      </slot>
+
+      <slot name="body">
+        <div v-if="html" class="prose prose-sm max-w-none" v-html="html" />
+      </slot>
+    </div>
+
+    <slot name="actions" :next="() => $emit('next')" :back="() => $emit('back')">
+      <div class="flex justify-between gap-3">
+        <button
+          v-if="showBack"
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80"
+          data-testid="instructions-back"
+          @click="$emit('back')"
+        >
+          {{ backLabel }}
+        </button>
+        <span v-else />
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          data-testid="instructions-cta"
+          @click="$emit('next')"
+        >
+          {{ ctaText }}
+        </button>
+      </div>
+    </slot>
+  </section>
+</template>

package/src/experience/pages/instructions/index.ts

@@ -0,0 +1,5 @@
+import InstructionsPageComponent from './InstructionsPage.vue'
+import { withExperienceDefaults } from '../../withDefaults'
+
+export const InstructionsPage = withExperienceDefaults(InstructionsPageComponent, {})
+export type { InstructionsPageProps } from './InstructionsPage.vue'

package/src/experience/pages/loading/LoadingPage.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import LoadingPageComponent from './LoadingPage.vue'
+
+const meta = {
+  title: 'Experience/Pages/LoadingPage',
+  component: LoadingPageComponent,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoadingPageComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    messages: ['Working on it…', 'Almost there…', 'Wrapping up…'],
+    messageInterval: 1.5,
+  },
+  render: (args) => ({
+    components: { LoadingPage: LoadingPageComponent },
+    setup: () => ({ args }),
+    template: '<div class="h-screen w-screen"><LoadingPage v-bind="args" /></div>',
+  }),
+}

package/src/experience/pages/loading/LoadingPage.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, type PropType } from 'vue'
+import { cn } from '@/lib/utils'
+
+export type LoadingTask<TResult = unknown> = (context: Record<string, unknown>) => Promise<TResult>
+
+export interface LoadingPageProps {
+  /** Rotating progress messages. */
+  messages?: string[]
+  /** Seconds between message rotations. */
+  messageInterval?: number
+  /** Reject if `task` takes longer than this many seconds. 0 = no timeout. */
+  timeoutSeconds?: number
+  /** Async work to perform. When it resolves, the page emits `next(result)`. */
+  task?: LoadingTask
+  /** Reactive context injected by ExperienceFlow. */
+  context?: Record<string, unknown>
+  class?: string
+}
+
+const props = defineProps({
+  messages: { type: Array as PropType<string[]>, default: () => ['Working on it…'] },
+  messageInterval: { type: Number, default: 2.5 },
+  timeoutSeconds: { type: Number, default: 0 },
+  task: { type: Function as PropType<LoadingTask>, default: undefined },
+  context: { type: Object as PropType<Record<string, unknown>>, default: () => ({}) },
+  class: { type: String, default: undefined },
+})
+
+const emit = defineEmits<{
+  next: [result: unknown]
+  error: [err: Error]
+  exit: []
+}>()
+
+const messageIndex = ref(0)
+let rotationTimer: ReturnType<typeof setInterval> | undefined
+let timeoutTimer: ReturnType<typeof setTimeout> | undefined
+
+onMounted(async () => {
+  if (props.messages.length > 1) {
+    rotationTimer = setInterval(() => {
+      messageIndex.value = (messageIndex.value + 1) % props.messages.length
+    }, props.messageInterval * 1000)
+  }
+
+  if (!props.task) return
+
+  let timedOut = false
+  const timeoutPromise =
+    props.timeoutSeconds > 0
+      ? new Promise<never>((_, reject) => {
+          timeoutTimer = setTimeout(() => {
+            timedOut = true
+            reject(new Error('Loading task timed out'))
+          }, props.timeoutSeconds * 1000)
+        })
+      : null
+
+  try {
+    const result = await (timeoutPromise
+      ? Promise.race([props.task(props.context), timeoutPromise])
+      : props.task(props.context))
+    if (!timedOut) emit('next', result)
+  } catch (err) {
+    emit('error', err instanceof Error ? err : new Error(String(err)))
+  }
+})
+
+onBeforeUnmount(() => {
+  if (rotationTimer) clearInterval(rotationTimer)
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'experience-page experience-page--loading flex h-full w-full flex-col items-center justify-center gap-6 p-8',
+      props.class,
+    )"
+    data-testid="loading-page"
+  >
+    <slot name="body">
+      <div
+        class="h-16 w-16 animate-spin rounded-full border-4 border-current border-r-transparent text-primary"
+        role="status"
+        aria-label="Loading"
+      />
+      <p class="text-center text-lg text-foreground" data-testid="loading-message">
+        {{ messages[messageIndex] }}
+      </p>
+    </slot>
+
+    <slot name="footer" />
+  </section>
+</template>

package/src/experience/pages/loading/index.ts

@@ -0,0 +1,10 @@
+import LoadingPageComponent from './LoadingPage.vue'
+import { withExperienceDefaults } from '../../withDefaults'
+
+export const LoadingPage = withExperienceDefaults(LoadingPageComponent, {
+  // The page's `task` prop already produces the result; the flow's action
+  // would double-handle it. So we explicitly disable the action binding.
+  action: false,
+  resultKey: 'loadingResult',
+})
+export type { LoadingPageProps, LoadingTask } from './LoadingPage.vue'

package/src/experience/pages/notepad/NotepadPage.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import NotepadPageComponent from './NotepadPage.vue'
+
+const meta = {
+  title: 'Experience/Pages/NotepadPage',
+  component: NotepadPageComponent,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NotepadPageComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { NotepadPage: NotepadPageComponent },
+    template: '<div class="h-screen w-screen"><NotepadPage /></div>',
+  }),
+}

package/src/experience/pages/notepad/NotepadPage.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NotepadPage from './NotepadPage.vue'
+
+describe('NotepadPage', () => {
+  it('disables submit when empty', () => {
+    const wrapper = mount(NotepadPage)
+    const btn = wrapper.get('[data-testid="notepad-submit"]').element as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+  })
+
+  it('shows character counter', async () => {
+    const wrapper = mount(NotepadPage, { props: { maxCharacters: 10 } })
+    await wrapper.get('[data-testid="notepad-input"]').setValue('hello')
+    expect(wrapper.get('[data-testid="notepad-counter"]').text()).toContain('5')
+  })
+
+  it('disables submit when over the limit', async () => {
+    const wrapper = mount(NotepadPage, { props: { maxCharacters: 3 } })
+    await wrapper.get('[data-testid="notepad-input"]').setValue('hello')
+    const btn = wrapper.get('[data-testid="notepad-submit"]').element as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+  })
+})