feat(storybook): add MultiStep form to storybook

packages/formkit/.storybook/main.ts

@@ -1,7 +1,7 @@
 import { type StorybookConfig } from '@storybook/vue3-vite'
 
 const config: StorybookConfig = {
-  stories: ['../stories/*.stories.ts'],
+  stories: ['../stories/**/**.stories.ts'],
   framework: '@storybook/vue3-vite',
 }
 

packages/formkit/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from '@vue/runtime-core'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

packages/formkit/stories/form/BasicForm.vue

@@ -0,0 +1,70 @@
+<template>
+  <h1 class="text-2xl font-bold mb-4">
+    Carbon Sequestration Grant
+  </h1>
+
+  <FormKit
+    v-slot="{ state: { loading } }"
+    v-model="formValue"
+    type="form"
+    class="grid grid-cols-1 md:grid-cols-3 gap-6"
+    :submit-label="loading ? 'Submitting...' : ''"
+    @submit="submitApp"
+  >
+    <div>
+      <FormKit
+        type="email"
+        name="email"
+        label="*Email address"
+        validation="required|email"
+      />
+    </div>
+
+    <div>
+      <FormKit
+        type="text"
+        name="organization_name"
+        label="*Organization name"
+        validation="required|length:3"
+      />
+    </div>
+
+    <div>
+      <FormKit
+        type="textarea"
+        name="money_use"
+        label="*How will you use the money?"
+        validation="required|length:5,10"
+      />
+    </div>
+  </FormKit>
+
+  <VaCollapse
+    class="min-w-96 mt-4"
+    header="Form data"
+  >
+    <pre>{{ formValue }}</pre>
+  </VaCollapse>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// NEW: submit handler, which posts to our fake backend.
+const submitApp = async (_formData, node) => {
+  await new Promise(resolve => setTimeout(resolve, 1400))
+  node.clearErrors()
+  alert('Your application was submitted successfully!')
+}
+
+const formValue = ref({})
+</script>
+
+<style scoped>
+details {
+  border: 1px solid #ccccd7;;
+  background: #eeeef4;
+  border-radius: .15em;
+  padding: 1em;
+}
+</style>

packages/formkit/stories/form/Form.stories.ts

@@ -0,0 +1,21 @@
+import { StoryFn } from '@storybook/vue3'
+import BasicForm from './BasicForm.vue'
+import MultiStepForm from './MultiStepForm.vue'
+
+export default {
+  title: 'Formkit Integration/Form',
+}
+
+export const Basic: StoryFn = () => ({
+  components: {
+    BasicForm
+  },
+  template: `<BasicForm />`,
+})
+
+export const MultiStep: StoryFn = () => ({
+  components: {
+    MultiStepForm
+  },
+  template: `<MultiStepForm />`,
+})