@effect-app/vue-components 0.3.2 → 0.4.1

package/src/stories/OmegaForm/form.Input.vue

@@ -0,0 +1,86 @@
+<template>
+  <OmegaForm
+    :schema="S.Struct({ myString: S.String })"
+    :on-submit="console.log"
+  >
+    <template #internalForm="{ form }">
+      <component :is="form.Input" label="myString" name="myString" />
+    </template>
+  </OmegaForm>
+  <OmegaForm :form="exampleForm">
+    <exampleForm.Input label="aString" name="aString" />
+    <exampleForm.Input label="aStringMin2" name="aStringMin2" />
+    <exampleForm.Input label="aStringMin2Max4" name="aStringMin2Max4" />
+    <exampleForm.Input
+      label="aStringMin2Max3Nullable"
+      name="aStringMin2Max3Nullable"
+    />
+    <exampleForm.Input label="aNumber" name="aNumber" />
+    <exampleForm.Input label="aNumberMin2" name="aNumberMin2" />
+    <exampleForm.Input label="aNumberMin2Max" name="aNumberMin2Max" />
+    <exampleForm.Input
+      label="aNumberMin2Max4Nullable"
+      name="aNumberMin2Max4Nullable"
+    />
+    <exampleForm.Input
+      label="aSelect"
+      name="aSelect"
+      :options="[
+        { title: 'a', value: 'a' },
+        { title: 'b', value: 'b' },
+        { title: 'c', value: 'c' },
+      ]"
+    />
+    <button>Submit</button>
+    <button type="reset" @click.prevent="exampleForm.clear()">Clear</button>
+    <button type="button" @click="exampleForm.reset()">Reset</button>
+  </OmegaForm>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { OmegaForm, useOmegaForm } from "../../components/OmegaForm"
+
+const schema = S.Struct({
+  aString: S.String,
+  aStringMin2: S.String.pipe(S.minLength(2)),
+  aStringMin2Max4: S.String.pipe(S.minLength(2)).pipe(S.maxLength(4)),
+  aStringMin2Max3Nullable: S.UndefinedOr(
+    S.String.pipe(S.minLength(2)).pipe(S.maxLength(3)),
+  ),
+  aNumber: S.Number,
+  aNumberMin2: S.Number.pipe(S.greaterThan(2)),
+  aNumberMin2Max: S.Number.pipe(S.greaterThan(2)).pipe(S.lessThan(4)),
+  aNumberMin2Max4Nullable: S.NullOr(S.Number.pipe(S.between(2, 4))),
+  aSelect: S.Union(S.Literal("a"), S.Literal("b"), S.Literal("c")),
+})
+
+const exampleForm = useOmegaForm(
+  schema,
+  {
+    onSubmit: ({
+      value,
+    }: {
+      value: {
+        aString: string
+        aStringMin2: string
+        aStringMin2Max4: string
+        aStringMin2Max3Nullable?: string
+        aNumber: number
+        aNumberMin2: number
+        aNumberMin2Max: number
+        aNumberMin2Max4Nullable: number | null
+        aSelect: "a" | "b" | "c"
+      }
+    }) => {
+      console.log(value)
+    },
+  },
+  {
+    persistency: {
+      policies: ["local"],
+      overrideDefaultValues: true,
+    },
+  },
+)
+</script>

package/src/stories/OmegaForm.stories.ts

@@ -9,6 +9,9 @@ import ComplexForm from "./OmegaForm/ComplexForm.vue"
 import SimpleFormVuetifyDefault from "./OmegaForm/SimpleFormVuetifyDefault.vue"
 import SumExample from "./OmegaForm/SumExample.vue"
 import PersistencyForm from "./OmegaForm/PersistencyForm.vue"
+import MetaForm from "./OmegaForm/Meta.vue"
+import FormInput from "./OmegaForm/form.Input.vue"
+import OneHundredWaysToWriteAForm from "./OmegaForm/OneHundredWaysToWriteAForm.vue"
 
 const mockIntl = {
   locale: ref("en"),
@@ -19,7 +22,6 @@ const mockIntl = {
 const meta: Meta<typeof OmegaForm> = {
   title: "Components/OmegaForm",
   component: OmegaForm,
-  tags: ["autodocs"],
   argTypes: {
     schema: { control: "object" },
     onSubmit: { action: "submitted" },
@@ -40,6 +42,13 @@ const meta: Meta<typeof OmegaForm> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+export const AnHundredWayToWriteAFormStory: Story = {
+  render: () => ({
+    components: { OneHundredWaysToWriteAForm },
+    template: "<OneHundredWaysToWriteAForm />",
+  }),
+}
+
 export const SimpleFormStory: Story = {
   render: () => ({
     components: { SimpleForm },
@@ -81,3 +90,17 @@ export const PersistencyFormStory: Story = {
     template: "<PersistencyForm />",
   }),
 }
+
+export const MetaStory: Story = {
+  render: () => ({
+    components: { MetaForm },
+    template: "<MetaForm />",
+  }),
+}
+
+export const FormInputStory: Story = {
+  render: () => ({
+    components: { FormInput },
+    template: "<FormInput />",
+  }),
+}