@effect-app/vue-components 0.0.1

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="omega-input">
+    <v-text-field
+      v-if="fieldType === 'email' || fieldType === 'text'"
+      :id="id"
+      :required="meta?.required"
+      :min-length="meta?.type === 'string' && meta?.minLength"
+      :max-length="meta?.type === 'string' && meta?.maxLength"
+      :type="fieldType"
+      :name="field.name"
+      :label="`${label}${meta?.required ? ' *' : ''}`"
+      :model-value="field.state.value"
+      :error-messages="showedErrors"
+      :error="!!showedErrors.length"
+      @update:model-value="field.handleChange"
+      @blur="setRealDirty"
+    />
+    <v-text-field
+      v-if="fieldType === 'number'"
+      :id="id"
+      :required="meta?.required"
+      :min="meta?.type === 'number' && meta.minimum"
+      :max="meta?.type === 'number' && meta.maximum"
+      :type="fieldType"
+      :name="field.name"
+      :label="`${label}${meta?.required ? ' *' : ''}`"
+      :model-value="field.state.value"
+      :error-messages="showedErrors"
+      :error="!!showedErrors.length"
+      @update:model-value="
+        (e: any) => {
+          field.handleChange(Number(e))
+        }
+      "
+      @blur="setRealDirty"
+    />
+    <div
+      v-if="fieldType === 'select' || fieldType === 'multiple'"
+      :class="fieldType !== 'multiple' && 'd-flex align-center'"
+    >
+      <v-select
+        :id="id"
+        :required="meta?.required"
+        :multiple="fieldType === 'multiple'"
+        :chips="fieldType === 'multiple'"
+        :name="field.name"
+        :model-value="field.state.value"
+        :label="`${label}${meta?.required ? ' *' : ''}`"
+        :items="options"
+        :error-messages="showedErrors"
+        :error="!!showedErrors.length"
+        @update:model-value="field.handleChange"
+        @blur="setRealDirty"
+      />
+      <v-btn
+        v-if="fieldType !== 'multiple'"
+        variant-btn="secondary"
+        :variant-icon="mdiRefresh"
+        class="mr-2"
+        title="Reset"
+        @click="field.handleChange(undefined)"
+      ></v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="To">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VTextField, VSelect } from "vuetify/components"
+import { mdiRefresh } from "@mdi/js"
+import { useStore, type FieldApi } from "@tanstack/vue-form"
+import type {
+  FieldValidators,
+  MetaRecord,
+  NestedKeyOf,
+  TypeOverride,
+} from "./OmegaFormStuff"
+import { useOmegaErrors } from "./OmegaErrorsContext"
+import { useId, computed, watch, onMounted, ref, watchEffect } from "vue"
+
+const props = defineProps<{
+  field: FieldApi<
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any
+  >
+  meta: MetaRecord<To>[NestedKeyOf<To>]
+  label: string
+  options?: { title: string; value: string }[]
+  type?: TypeOverride
+  validators?: FieldValidators<To>
+}>()
+
+const id = useId()
+
+const fieldApi = props.field
+
+const fieldState = useStore(fieldApi.store, state => state)
+
+const fieldType = computed(() => {
+  if (props.type) return props.type
+  if (props.meta?.type === "string") {
+    if (props.meta.format === "email") return "email"
+    return "text"
+  }
+  return props.meta?.type || "unknown"
+})
+
+const fieldValue = computed(() => fieldState.value.value)
+const errors = computed(() =>
+  fieldState.value.meta.errors.map((e: any) => e.message).filter(Boolean),
+)
+
+// we remove value and errors when the field is empty and not required
+//watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
+watch(
+  () => [!!fieldValue.value],
+  () => {
+    if (errors.value.length && !fieldValue.value && !props.meta?.required) {
+      fieldApi.setValue(
+        props.meta?.nullableOrUndefined === "undefined" ? undefined : null,
+      )
+    }
+  },
+)
+
+onMounted(() => {
+  if (
+    !fieldValue.value &&
+    !props.meta?.required &&
+    props.meta?.nullableOrUndefined === "null"
+  ) {
+    fieldApi.setValue(null)
+  }
+})
+
+const realDirty = ref(false)
+const setRealDirty = () => {
+  realDirty.value = true
+}
+
+const { addError, formSubmissionAttempts, removeError } = useOmegaErrors()
+
+watchEffect(() => {
+  if (formSubmissionAttempts.value > 0) {
+    realDirty.value = true
+  }
+})
+
+const showedErrors = computed(() => {
+  // single select field can be validated on change
+  if (!realDirty.value && fieldType.value !== "select") return []
+  return errors.value
+})
+
+watch(
+  () => fieldState.value.meta.errors,
+  () => {
+    if (fieldState.value.meta.errors.length) {
+      addError({
+        inputId: id,
+        errors: fieldState.value.meta.errors
+          .map((e: any) => e.message)
+          .filter(Boolean),
+        label: props.label,
+      })
+    } else {
+      removeError(id)
+    }
+  },
+)
+</script>
+
+<style>
+.omega-input {
+  .v-input__details:has(.v-messages:empty) {
+    grid-template-rows: 0fr;
+    transition: all 0.2s;
+  }
+
+  & .v-messages:empty {
+    min-height: 0;
+  }
+
+  & .v-input__details:has(.v-messages) {
+    transition: all 0.2s;
+    overflow: hidden;
+    min-height: 0;
+    display: grid;
+    grid-template-rows: 1fr;
+  }
+
+  & .v-messages {
+    transition: all 0.2s;
+    > * {
+      transition-duration: 0s !important;
+    }
+  }
+}
+</style>

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -0,0 +1,137 @@
+<template>
+  <form @submit.prevent.stop="form.handleSubmit()">
+    <fieldset :disabled="formIsSubmitting">
+      <slot :form="form" :subscribed-values="subscribedValues" />
+    </fieldset>
+  </form>
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="
+    From extends Record<PropertyKey, any>,
+    To extends Record<PropertyKey, any>,
+    K extends keyof OmegaFormState<To, From> = keyof OmegaFormState<To, From>
+  "
+>
+/**
+ * Form component that wraps TanStack Form's useForm hook
+ *
+ * Usage:
+ * <Form :default-values="..." :on-submit="..." :validators="..." ...etc>
+ *   <template #default="{ form }">
+ *     <!-- Children with access to form -->
+ *     <component :is="form.Field" name="fieldName">
+ *       <template #default="{ field }">
+ *         <input
+ *           :value="field.state.value"
+ *           @input="e => field.handleChange(e.target.value)"
+ *         />
+ *       </template>
+ *     </component>
+ *   </template>
+ * </Form>
+ *
+ * <Form :default-values="..." :on-submit="..." :validators="..." ...etc>
+ *   <template #default="{ form }">
+ *     <Input :form="form" name="foobar" />
+ *   </template>
+ * </Form>
+ *
+ * <Form :schema="schema" :subscribe="['values', 'isSubmitting']">
+ *   <template #default="{ form, subscribedValues }">
+ *     <Input :form="form" name="foobar" />
+ *   </template>
+ * </Form>
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useStore, type StandardSchemaV1Issue } from "@tanstack/vue-form"
+import { type S } from "effect-app"
+import {
+  type FilterItems,
+  type FormProps,
+  type MetaRecord,
+  type OmegaFormApi,
+  type OmegaFormState,
+} from "./OmegaFormStuff"
+import { getOmegaStore } from "./getOmegaStore"
+import { provideOmegaErrors } from "./OmegaErrorsContext"
+import { useOmegaForm } from "./useOmegaForm"
+import { watch } from "vue"
+
+const props = defineProps<
+  {
+    subscribe?: K[]
+  } & (
+    | {
+        form: OmegaFormApi<To, From> & {
+          meta: MetaRecord<To>
+          filterItems?: FilterItems
+        }
+        schema?: undefined
+      }
+    | (FormProps<To, From> & {
+        form?: undefined
+        schema: S.Schema<From, To, never>
+      })
+  )
+>()
+
+const form = props.form ?? useOmegaForm<From, To>(props.schema, props)
+
+const formIsSubmitting = useStore(form.store, state => state.isSubmitting)
+
+defineExpose(form)
+
+const subscribedValues = getOmegaStore(
+  form as OmegaFormApi<To, From>,
+  props.subscribe,
+)
+
+const formSubmissionAttempts = useStore(
+  form.store,
+  state => state.submissionAttempts,
+)
+
+const errors = form.useStore(state => state.errors)
+
+watch(
+  () => [form.filterItems, errors.value],
+  () => {
+    const filterItems: FilterItems | undefined = form.filterItems
+    if (!filterItems) return {}
+    if (!errors.value) return {}
+    const errorList = Object.values(errors.value)
+      .filter(
+        (fieldErrors): fieldErrors is Record<string, StandardSchemaV1Issue[]> =>
+          Boolean(fieldErrors),
+      )
+      .flatMap(fieldErrors =>
+        Object.values(fieldErrors)
+          .flat()
+          .map((issue: StandardSchemaV1Issue) => issue.message),
+      )
+    if (errorList.some(e => e === filterItems.message)) {
+      filterItems.items.forEach((item: any) => {
+        const m: any = form.getFieldMeta(item)
+        form.setFieldMeta(item, {
+          ...m,
+          errorMap: {
+            onSubmit: [{ path: [item], message: filterItems.message }],
+          },
+        })
+      })
+    }
+    return {}
+  },
+)
+
+provideOmegaErrors(formSubmissionAttempts, errors)
+</script>
+
+<style scoped>
+fieldset {
+  display: contents;
+}
+</style>

package/src/components/OmegaForm/getOmegaStore.ts

@@ -0,0 +1,32 @@
+import { useStore } from "@tanstack/vue-form"
+import { type Ref, computed } from "vue"
+import type { OmegaFormState, OmegaFormApi } from "./OmegaFormStuff"
+
+export function getOmegaStore<
+  To,
+  From,
+  K extends keyof OmegaFormState<To, From> = keyof OmegaFormState<To, From>,
+>(
+  form: OmegaFormApi<To, From>,
+  subscribe?: K[],
+): Ref<
+  K[] extends undefined
+    ? Record<string, never>
+    : Pick<OmegaFormState<To, From>, K>
+> {
+  return computed(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!subscribe) return {} as any
+
+    const state = useStore(form.store, state => {
+      const result = {} as Pick<OmegaFormState<To, From>, K>
+      for (const key of subscribe) {
+        result[key] = state[key]
+      }
+      return result
+    })
+
+    return state.value
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }) as any // Type assertion needed due to Vue's computed typing limitations
+}

package/src/components/OmegaForm/index.ts

@@ -0,0 +1,29 @@
+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"
+
+export * as OmegaErrorsContext from "./OmegaErrorsContext"
+export * from "./OmegaFormStuff"
+export { useOmegaForm } from "./useOmegaForm"
+export { default } from "./OmegaWrapper.vue"
+
+export { OmegaForm, OmegaInput, OmegaErrors }
+
+const OmegaFormCE = defineCustomElement(OmegaForm)
+const OmegaInputCE = defineCustomElement(OmegaInput)
+const OmegaErrorsCE = defineCustomElement(OmegaErrors)
+
+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)
+  }
+}

package/src/components/OmegaForm/useOmegaForm.ts

@@ -0,0 +1,61 @@
+import {
+  useForm,
+  type FormValidateOrFn,
+  type FormAsyncValidateOrFn,
+  type StandardSchemaV1,
+} from "@tanstack/vue-form"
+import { S } from "effect-app"
+import {
+  generateMetaFromSchema,
+  type FilterItems,
+  type FormProps,
+  type MetaRecord,
+  type OmegaFormApi,
+} from "./OmegaFormStuff"
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const useOmegaForm = <
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+>(
+  schema: S.Schema<From, To, never>,
+  options?: NoInfer<FormProps<To, From>>,
+): OmegaFormApi<To, From> & {
+  meta: MetaRecord<To>
+  filterItems?: FilterItems
+} => {
+  if (!schema) throw new Error("Schema is required")
+  const standardSchema = S.standardSchemaV1(schema)
+
+  const { filterItems, meta } = generateMetaFromSchema(schema)
+
+  const form = useForm<
+    To,
+    FormValidateOrFn<To> | undefined,
+    FormValidateOrFn<To> | undefined,
+    StandardSchemaV1<To, From>,
+    FormValidateOrFn<To> | undefined,
+    FormAsyncValidateOrFn<To> | undefined,
+    FormValidateOrFn<To> | undefined,
+    FormAsyncValidateOrFn<To> | undefined,
+    FormAsyncValidateOrFn<To> | undefined,
+    FormAsyncValidateOrFn<To> | undefined
+  >({
+    ...options,
+    validators: {
+      onSubmit: standardSchema,
+      ...(options?.validators || {}),
+    },
+    onSubmit: options?.onSubmit
+      ? ({ formApi, meta, value }) =>
+          options.onSubmit?.({
+            formApi: formApi as OmegaFormApi<To, From>,
+            meta,
+            value: value as unknown as From,
+          })
+      : undefined,
+  }) satisfies OmegaFormApi<To, From>
+
+  const exposed = Object.assign(form, { meta, filterItems })
+
+  return exposed
+}

package/src/components/TestComponent.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="cool">I'm so <span class="super">{{ cool }}</span> {{ test }}</div>
+</template>
+<style scoped>
+.super {
+  color: aqua;
+}
+</style>
+<script setup lang="ts">
+import "./style.css"
+import { ref, defineProps } from "vue"
+const cool = ref("COOL")
+
+defineProps<{ test: string }>()
+</script>

package/src/components/index.ts

@@ -0,0 +1,6 @@
+import TestComponent from './TestComponent.vue'
+
+export * from "./OmegaForm"
+export {
+  TestComponent
+}

package/src/components/style.css

@@ -0,0 +1,3 @@
+.cool {
+  color: pink;
+}

package/src/constants/index.ts

@@ -0,0 +1 @@
+export {}

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <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/index.ts

@@ -0,0 +1,17 @@
+import { App } from 'vue'
+import * as components from './components'
+
+function install (app: App) {
+  for (const key in components) {
+    // @ts-expect-error
+    app.component(key, components[key])
+  }
+}
+
+// import './assets/main.scss'
+
+export default { install }
+
+export * from './components'
+export * from './constants'
+export * from './utils'

package/src/utils/index.ts

@@ -0,0 +1,12 @@
+import { inject, InjectionKey, provide, ref } from "vue";
+import { makeIntl} from "@effect-app/vue"
+
+const intlKey = Symbol() as InjectionKey<ReturnType<ReturnType<typeof makeIntl>["useIntl"]>>
+export const useIntl = () => {  
+  const intl = inject(intlKey)
+  if (!intl) {
+    throw new Error("useIntl must be used within a IntlProvider")
+  }
+  return intl
+}
+export const provideIntl = (intl: ReturnType<ReturnType<typeof makeIntl>["useIntl"]>) => provide(intlKey, intl)