@effect-app/vue-components 0.5.0 → 0.6.2

package/src/components/OmegaForm/OmegaAutoGen.vue

@@ -0,0 +1,110 @@
+<template>
+  <slot
+    v-for="{ name, label, ...attrs } in children"
+    :child="{ name, label, ...attrs }"
+  >
+    <OmegaInput :form="props.form" :name="name" :label="label" v-bind="attrs" />
+  </slot>
+</template>
+
+<script setup lang="ts" generic="From, To">
+import { computed } from "vue"
+import {
+  type NestedKeyOf,
+  type MetaRecord,
+  type FormType,
+  type FieldMeta,
+  type OmegaInputProps,
+} from "./OmegaFormStuff"
+import { pipe, Order, Array as A } from "effect-app"
+import OmegaInput from "./OmegaInput.vue"
+
+export type OmegaAutoGenMeta<From, To> = Omit<OmegaInputProps<From, To>, "form">
+type NewMeta = OmegaAutoGenMeta<From, To>
+
+const mapObject =
+  <K extends string, A, B>(fn: (value: A, key: K) => B) =>
+  (obj: Record<K, A>): Record<K, B> =>
+    Object.fromEntries(
+      (Object.entries(obj) as [K, A][]).map(([k, v]) => [k, fn(v, k)]),
+    ) as Record<K, B> // Cast needed for Object.fromEntries
+
+const filterRecord =
+  <K extends string, V>(predicate: (value: V, key: K) => boolean) =>
+  (obj: Record<K, V>): Record<K, V> =>
+    Object.fromEntries(
+      (Object.entries(obj) as [K, V][]).filter(([k, v]) => predicate(v, k)),
+    ) as Record<K, V>
+
+const filterMapRecord =
+  <K extends string, A, B>(fn: (value: A, key: K) => false | B) =>
+  (obj: Record<K, A>): Record<K, B> =>
+    (Object.entries(obj) as [K, A][]).reduce(
+      (acc, [key, value]) => {
+        const result = fn(value, key)
+        if (result !== false) {
+          acc[key] = result
+        }
+        return acc
+      },
+      {} as Record<K, B>,
+    )
+
+const props = defineProps<{
+  form: FormType<From, To> & {
+    meta: MetaRecord<To>
+  }
+  pick?: NestedKeyOf<To>[]
+  omit?: NestedKeyOf<To>[]
+  labelMap?: (key: NestedKeyOf<To>) => string | undefined
+  filterMap?: <M extends NewMeta>(key: NestedKeyOf<To>, meta: M) => boolean | M
+  order?: NestedKeyOf<To>[]
+  sort?: Order.Order<NewMeta>
+}>()
+
+const namePosition = (name: NestedKeyOf<To>, order: NestedKeyOf<To>[]) => {
+  const index = order?.indexOf(name) ?? -1
+  return index === -1 ? Number.MAX_SAFE_INTEGER : index
+}
+
+const orderBy: Order.Order<NewMeta> = Order.mapInput(
+  Order.number,
+  (x: NewMeta) => namePosition(x.name, props.order || []),
+)
+
+const children = computed<NewMeta[]>(() =>
+  pipe(
+    props.form.meta as Record<NestedKeyOf<To>, FieldMeta | undefined>,
+    // include / exclude
+    filterRecord((_, metaKey) =>
+      props.pick
+        ? props.pick.includes(metaKey) && !props.omit?.includes(metaKey)
+        : !props.omit?.includes(metaKey),
+    ),
+    x => x,
+    // labelMap and adding name
+    mapObject((metaValue, metaKey) => ({
+      name: metaKey,
+      label: props.labelMap?.(metaKey) || metaKey,
+      ...metaValue,
+    })),
+    // filterMap
+    props.filterMap
+      ? filterMapRecord(m => {
+          const result = props.filterMap?.(m.name!, m as NewMeta)
+          return result === undefined || result === true ? m : result
+        })
+      : x => x,
+    // transform to array
+    obj => Object.values(obj) as NewMeta[],
+    // order
+    A.sort(orderBy),
+    // sort
+    props.sort ? A.sort(props.sort) : x => x,
+  ),
+)
+
+defineSlots<{
+  default(props: { child: NewMeta }): void
+}>()
+</script>

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -74,7 +74,7 @@ import {
   type OmegaFormReturn,
   useOmegaForm,
 } from "./useOmegaForm"
-import { computed, watch, defineSlots, onBeforeMount } from "vue"
+import { computed, watch, onBeforeMount } from "vue"
 
 const props = defineProps<
   {

package/src/components/OmegaForm/index.ts

@@ -1,29 +1,11 @@
-import { defineCustomElement } from "vue"
 import { default as OmegaForm } from "./OmegaWrapper.vue"
 import { default as OmegaInput } from "./OmegaInput.vue"
 import { default as OmegaErrors } from "./OmegaErrors.vue"
+import { default as OmegaAutoGen } from "./OmegaAutoGen.vue"
 
 export * as OmegaErrorsContext from "./OmegaErrorsContext"
 export * from "./OmegaFormStuff"
-export { useOmegaForm } from "./useOmegaForm"
+export { useOmegaForm, type OmegaFormReturn } from "./useOmegaForm"
 export { default } from "./OmegaWrapper.vue"
 
-export { OmegaForm, OmegaInput, OmegaErrors }
-
-const OmegaFormCE = defineCustomElement(OmegaForm as any)
-const OmegaInputCE = defineCustomElement(OmegaInput as any)
-const OmegaErrorsCE = defineCustomElement(OmegaErrors as any)
-
-export { OmegaFormCE, OmegaInputCE, OmegaErrorsCE }
-
-export function registerOmegaForm() {
-  if (!customElements.get("omega-form")) {
-    customElements.define("omega-form", OmegaFormCE)
-  }
-  if (!customElements.get("omega-input")) {
-    customElements.define("omega-input", OmegaInputCE)
-  }
-  if (!customElements.get("omega-errors")) {
-    customElements.define("omega-errors", OmegaErrorsCE)
-  }
-}
+export { OmegaForm, OmegaInput, OmegaErrors, OmegaAutoGen }

package/src/env.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module "*.vue" {
-  import { DefineComponent } from "vue"
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

package/src/stories/OmegaForm/Clearable.vue

@@ -1,20 +0,0 @@
-<template>
-  <OmegaForm
-    :form="form"
-    :subscribe="['values']"
-    :on-submit="() => console.log('submitted1')"
-  >
-    <template #externalForm="{ subscribedValues: { values } }">
-      <div>values: {{ values }}</div>
-      <form.Input name="a" label="Nullable value" clearable />
-      <button type="submit">submit</button>
-    </template>
-  </OmegaForm>
-</template>
-
-<script setup lang="ts" generic="_, To">
-import { S } from "effect-app"
-import { OmegaForm, useOmegaForm } from "../../components/OmegaForm"
-
-const form = useOmegaForm(S.Struct({ a: S.NullOr(S.String) }), {})
-</script>

package/src/stories/OmegaForm/ComplexForm.vue

@@ -1,87 +0,0 @@
-<template>
-  <OmegaForm :form="exampleForm">
-    <OmegaInput label="aString" :form="exampleForm" name="aString" />
-    <OmegaInput label="aStringMin2" :form="exampleForm" name="aStringMin2" />
-    <OmegaInput
-      label="aStringMin2Max4"
-      :form="exampleForm"
-      name="aStringMin2Max4"
-    />
-    <OmegaInput
-      label="aStringMin2Max3Nullable"
-      :form="exampleForm"
-      name="aStringMin2Max3Nullable"
-    />
-    <OmegaInput label="aNumber" :form="exampleForm" name="aNumber" />
-    <OmegaInput label="aNumberMin2" :form="exampleForm" name="aNumberMin2" />
-    <OmegaInput
-      label="aNumberMin2Max"
-      :form="exampleForm"
-      name="aNumberMin2Max"
-    />
-    <OmegaInput
-      label="aNumberMin2Max4Nullable"
-      :form="exampleForm"
-      name="aNumberMin2Max4Nullable"
-    />
-    <OmegaInput
-      label="aSelect"
-      :form="exampleForm"
-      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, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
-
-const exampleForm = useOmegaForm(
-  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")),
-  }),
-  {
-    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/EmailForm.vue

@@ -1,48 +0,0 @@
-<template>
-  <OmegaForm
-    :schema="schema"
-    :on-submit="onSubmit"
-    :default-values="defaultValues"
-  >
-    <template #internalForm="{ form }">
-      <OmegaInput label="email" name="email" :form="form" />
-      <OmegaInput label="confirm" name="confirm" :form="form" />
-      <button>submit</button>
-      <OmegaErrors />
-    </template>
-  </OmegaForm>
-</template>
-
-<script setup lang="ts">
-import { S } from "effect-app"
-import { OmegaForm, OmegaInput, OmegaErrors } from "../../components/OmegaForm"
-
-const schema = S.Struct({
-  email: S.Email,
-  confirm: S.Email,
-}).pipe(
-  S.filter(
-    form => {
-      if (form.email !== form.confirm) {
-        return false
-      }
-      return true
-    },
-    {
-      message: () => "Email and confirmation must match",
-      jsonSchema: {
-        items: ["confirm"],
-      },
-    },
-  ),
-)
-
-const defaultValues = {
-  email: "mimmo@asd.it",
-  confirm: "amerelli@asd.it",
-}
-
-const onSubmit = ({ value }: { value: { email: string; confirm: string } }) => {
-  console.log(value)
-}
-</script>

package/src/stories/OmegaForm/Meta.vue

@@ -1,47 +0,0 @@
-<template>
-  <OmegaForm
-    :schema="
-      S.Struct({
-        a: S.NullOr(S.String),
-        b: S.UndefinedOr(S.Number),
-        c: S.NullishOr(S.Number),
-        d: S.String,
-        e: S.Number,
-        f: S.Number,
-        struct: S.Struct({
-          a: S.NullOr(S.String),
-          b: S.UndefinedOr(S.Number),
-          c: S.NullishOr(S.Number),
-          d: S.String,
-          e: S.Number,
-          f: S.Number,
-        }),
-      })
-    "
-  >
-    <template #internalForm="{ form }">
-      <ul>
-        <li v-for="key in Object.keys(form.meta)" :key="key">
-          {{ key }}: {{ (form.meta as any)[key] }}
-        </li>
-      </ul>
-      <OmegaInput label="a" :form="form" name="a" />
-      <OmegaInput label="b" :form="form" name="b" />
-      <OmegaInput label="c" :form="form" name="c" />
-      <OmegaInput label="d" :form="form" name="d" />
-      <OmegaInput label="e" :form="form" name="e" />
-      <OmegaInput label="f" :form="form" name="f" />
-      <OmegaInput label="struct.a" :form="form" name="struct.a" />
-      <OmegaInput label="struct.b" :form="form" name="struct.b" />
-      <OmegaInput label="struct.c" :form="form" name="struct.c" />
-      <OmegaInput label="struct.d" :form="form" name="struct.d" />
-      <OmegaInput label="struct.e" :form="form" name="struct.e" />
-      <OmegaInput label="struct.f" :form="form" name="struct.f" />
-    </template>
-  </OmegaForm>
-</template>
-
-<script setup lang="ts">
-import { OmegaForm, OmegaInput } from "../../components/OmegaForm"
-import { S } from "effect-app"
-</script>

package/src/stories/OmegaForm/OneHundredWaysToWriteAForm.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="container">
-  <h1>One hundred ways to write a form</h1>
-  <p>
-    OmegaForm is a powerful and flexible form library that wraps
-    <a href="https://tanstack.com/form/latest" target="_blank">TanStack Form</a>
-    and uses
-    <a href="https://effect.website/docs/schema/introduction/" target="_blank">
-      Effect Schema
-    </a>
-    as the schema definition. All of this allows you to create forms in a
-    declarative way. 
-    We also use
-    <a href="https://vuetifyjs.com/" target="_blank">Vuetify</a> as peer dependency
-    for the UI components, but you can use any other UI library you want or custom inputs.
-    Here are some examples of how to write forms using
-    different approaches
-  </p>
-  <p>for our example, we will use the following dependencies</p>
-  <pre v-highlightjs><code class="javascript">{{ `import { S } from "effect-app"
-import { OmegaForm, OmegaInput, useOmegaForm } from "@effect-app/vue-components"` }}</code></pre>
-
-  <h2>Simplest way</h2>
-  <p>Now, let's write a form using the following schema:</p>
-  <pre v-highlightjs><code class="typescript">{{ `const schema = S.Struct({
-  name: S.String,
-  age: S.Number,
-})` }}</code></pre>
-
-  <p>Now, let's write in the template the form using the following schema:</p>
-  <pre
-    v-highlightjs
-  ><code class="vue">{{ `<OmegaForm :schema="schema" :on-submit="console.log">
-  <template #internalForm="{ form }">
-    <OmegaInput label="name" :form="form" name="name" />
-    <OmegaInput label="age" :form="form" name="age" />
-  </template>
-</OmegaForm>` }}</code></pre>
-
-  <OmegaForm :schema="schema" :on-submit="console.log">
-    <template #internalForm="{ form }">
-      <OmegaInput label="name" :form="form" name="name" />
-      <OmegaInput label="age" :form="form" name="age" />
-    </template>
-  </OmegaForm>
-
-  <p>
-    <code>OmegaInput</code>
-    is a component that will render a form input based on the schema. It's
-    alread embedded inside the
-    <code>OmegaForm</code>
-    component, so you don't need to import it separately or pass form as a prop:
-  </p>
-  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :schema="schema">
-  <template #internalForm="{ form }">
-    <component :is="form.Input" label="name" name="name" />
-    <component :is="form.Input" label="age" name="age" />
-  </template>
-</OmegaForm>` }}</code></pre>
-  <p>you can also register to the values via the `subscribe` prop</p>
-  <pre
-    v-highlightjs
-  ><code class="vue">{{ `<OmegaForm :schema="schema" :subscribe="['values']">
-    <template #internalForm="{ form, subscribedValues: { values } }">
-      <component :is="form.Input" label="name" name="name" />
-      <component :is="form.Input" label="age" name="age" />
-      <pre>\{\{ values \}\}</pre>
-    </template>
-  </OmegaForm>` }}</code></pre>
-
-  <OmegaForm :schema="schema" :subscribe="['values']">
-    <template #internalForm="{ form, subscribedValues: { values } }">
-      <component :is="form.Input" label="name" name="name" />
-      <component :is="form.Input" label="age" name="age" />
-      <pre>{{ values }}</pre>
-    </template>
-  </OmegaForm>
-
-  <h2>Using the useOmegaForm hook</h2>
-  <p>
-    The useOmegaForm hook is a hook that returns the form instance and the
-    values. It's a good way to create a form in a functional way.
-  </p>
-  <pre
-    v-highlightjs
-  ><code class="typescript">{{ `const form = useOmegaForm(schema)` }}</code></pre>
-  <p>
-    Now, you can use the form instance to create the form in the template.
-  </p>
-  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :form="form">
-    <form.Input" label="name" name="name" />
-    <form.Input" label="age" name="age" />
-</OmegaForm>` }}</code></pre>
-
-  <p>you can still register to the values via the `subscribe` prop</p>
-  <pre
-    v-highlightjs
-  ><code class="vue">{{ `<OmegaForm :form="form" :subscribe="['values']">
-    <template #externalForm="{ subscribedValues: { values } }">
-      <form.Input" label="name" name="name" />
-      <form.Input" label="age" name="age" />
-      <pre>\{\{ values \}\}</pre>
-    </template>
-  </OmegaForm>` }}</code></pre>
-  <p>
-    <strong>Note:</strong> the template name is <code>externalForm</code>
-    because the form is not inside the component, it's outside. And you don't
-    have access to the form instance inside the template variables anymore.
-  </p>
-
-  <h3>Using custom inputs</h3>
-  <p>
-    You can use custom inputs by passing an OmegaInput a child component.
-  </p>
-  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :form="form">
-  <form.Input label="name" name="name">
-    <template #default="{ field, label }">
-      <label :for="name">\{\{ label \}\}</label>
-      <input
-        :id="name"
-        v-model="field.state.value"
-        :name="name"
-        style="border: 1px solid red"
-        @change="(e) => field.handleChange(e.target.value)"
-      />
-    </template>
-  </form.Input>
-</OmegaForm>` }}</code></pre>
-  <OmegaForm :form="form">
-    <form.Input label="name" name="name">
-      <template #default="{ field, label, name }">
-        <label :for="name">{{ label }}</label>
-        <input
-          :id="name"
-          v-model="field.state.value"
-          :name="name"
-          style="border: 1px solid red"
-          @change="(e: any) => field.handleChange(e.target.value)"
-        />
-      </template>
-    </form.Input>
-  </OmegaForm>
-  <h3>Known issues</h3>
-  <p>
-    You can't write something like this:
-  </p>
-  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :schema="schema">
-  <template #internalForm="{ form }">
-    <form.Input label="name" name="name" />
-    <form.Input label="age" name="age" />
-  </template>
-</OmegaForm>` }}</code></pre>
-  <p>
-    because When Vue's template compiler encounters <code>form.Input</code>, it try to resolve or analyze the form object and its Input property earlier in the rendering pipeline. Since form.Input is provided by the parent OmegaForm through the slot, this direct usage inside the slot might create a tighter, more immediate dependency loop that the compiler/renderer detects or falls into, leading to the stack overflow.
-  </p>
-</div>
-</template>
-
-<script setup lang="ts">
-import { S } from "effect-app"
-import { OmegaForm, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
-
-const schema = S.Struct({
-  name: S.String,
-  age: S.Number,
-})
-const form = useOmegaForm(schema)
-</script>
-
-<style scoped>
-p,
-pre {
-  margin-bottom: 1rem;
-}
-form {
-  margin-bottom: 2rem;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-h1, h2, h3 {
-  text-wrap: balance;
-}
-</style>

package/src/stories/OmegaForm/PersistencyForm.vue

@@ -1,58 +0,0 @@
-<template>
-  <OmegaForm
-    :form="addForm"
-    :subscribe="['errors', 'values']"
-    show-errors-on="onChange"
-  >
-    <template #externalForm="{ subscribedValues: { errors, values: vvv } }">
-      <div>Errors: {{ errors }}</div>
-      <div>Values: {{ vvv }}</div>
-      <OmegaInput label="first" :form="addForm" name="first" />
-      <div>+</div>
-      <OmegaInput label="second" :form="addForm" name="second" />
-      <br />
-      <hr />
-      <br />
-      <OmegaInput label="third.fourth" :form="addForm" name="third.fourth" />
-      <OmegaInput label="third.fifth" :form="addForm" name="third.fifth" />
-    </template>
-  </OmegaForm>
-
-  <!-- Technically you can do this only with a subscribe but only inside OmegaForm Context -->
-  <div>
-    <div>Sum: {{ sum }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { S } from "effect-app"
-import { OmegaForm, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
-import { ref, watch } from "vue"
-
-const sum = ref(0)
-const AddSchema = S.Struct({
-  first: S.Number,
-  second: S.Number.pipe(S.greaterThan(3)),
-  third: S.Struct({
-    fourth: S.Number,
-    fifth: S.Number,
-  }),
-})
-
-const addForm = useOmegaForm(
-  AddSchema,
-  {},
-  {
-    persistency: {
-      policies: ["session", "querystring"],
-      keys: ["first", "third.fourth"],
-    },
-  },
-)
-
-const values = addForm.useStore(({ values }) => values)
-
-watch(values, ({ first, second }) => {
-  sum.value = first + second
-})
-</script>

package/src/stories/OmegaForm/SimpleForm.vue

@@ -1,30 +0,0 @@
-<template>
-  <OmegaForm :schema="schema" :on-submit="onSubmit" :subscribe="['values']">
-    <template #internalForm="{ form, subscribedValues: { values } }">
-      <div>values: {{ values }}</div>
-      <OmegaInput label="asder2" name="asder2" :form="form">
-        <template #default="inputProps">
-          <label :for="inputProps.name">{{ inputProps.label }}</label>
-          <input
-            :id="inputProps.name"
-            v-model="inputProps.field.state.value"
-            :name="inputProps.name"
-            style="border: 1px solid red"
-            @change="(e: any) => inputProps.field.handleChange(e.target.value)"
-          />
-        </template>
-      </OmegaInput>
-      <button>submit</button>
-    </template>
-  </OmegaForm>
-</template>
-
-<script setup lang="ts">
-import { S } from "effect-app"
-import { OmegaForm, OmegaInput } from "../../components/OmegaForm"
-
-const schema = S.Struct({ asder2: S.String })
-const onSubmit = ({ value }: { value: { asder2: string } }) => {
-  console.log(value)
-}
-</script>

package/src/stories/OmegaForm/SimpleFormVuetifyDefault.vue

@@ -1,15 +0,0 @@
-<template>
-  <OmegaForm :schema="schema" :subscribe="['values']">
-    <template #internalForm="{ form, subscribedValues: { values } }">
-      <OmegaInput label="aString" :form="form" name="aString" />
-      <pre>{{ values }}</pre>
-    </template>
-  </OmegaForm>
-</template>
-
-<script setup lang="ts">
-import { S } from "effect-app"
-import { OmegaForm, OmegaInput } from "../../components/OmegaForm"
-
-const schema = S.Struct({ aString: S.UndefinedOr(S.String) })
-</script>