Fix/unify number refinements (#610)

* fix: unify number type handling and remove int references across components

* fix: unify number type handling and remove int references across components

Author: MakhBeth

.changeset/smart-areas-feel.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+fix: unify number type handling and remove 'int' references across components

packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts

@@ -246,11 +246,12 @@ export type StringFieldMeta = BaseFieldMeta & {
 }
 
 export type NumberFieldMeta = BaseFieldMeta & {
-  type: "number" | "int"
+  type: "number"
   minimum?: number
   maximum?: number
   exclusiveMinimum?: number
   exclusiveMaximum?: number
+  refinement?: "int"
 }
 
 export type SelectFieldMeta = BaseFieldMeta & {
@@ -682,7 +683,8 @@ export const createMeta = <T = any>(
     // if this is S.Int (a refinement), set the type and skip following "from"
     // otherwise we'd lose the "Int" information and get "number" instead
     if (titleType === "Int" || titleType === "int") {
-      meta["type"] = "int"
+      meta["type"] = "number"
+      meta["refinement"] = "int"
       // don't follow "from" for Int refinements
     } else if ("from" in property) {
       return createMeta<T>({
@@ -888,66 +890,28 @@ export const generateInputStandardSchemaFromFieldMeta = (
       }
       break
 
-    case "int": {
-      // create a custom integer schema with translations
-      // S.Number with empty message, then S.int with integer message
-      schema = S
-        .Number
-        .annotations({
-          message: () => trans("validation.empty")
-        })
-        .pipe(
-          S.int({ message: (issue) => trans("validation.integer.expected", { actualValue: String(issue.actual) }) })
-        )
-      if (typeof meta.minimum === "number") {
-        schema = schema.pipe(S.greaterThanOrEqualTo(meta.minimum)).annotations({
-          message: () =>
-            trans(meta.minimum === 0 ? "validation.number.positive" : "validation.number.min", {
-              minimum: meta.minimum,
-              isExclusive: true
-            })
-        })
-      }
-      if (typeof meta.maximum === "number") {
-        schema = schema.pipe(S.lessThanOrEqualTo(meta.maximum)).annotations({
-          message: () =>
-            trans("validation.number.max", {
-              maximum: meta.maximum,
-              isExclusive: true
-            })
-        })
-      }
-      if (typeof meta.exclusiveMinimum === "number") {
-        schema = schema.pipe(S.greaterThan(meta.exclusiveMinimum)).annotations({
-          message: () =>
-            trans(meta.exclusiveMinimum === 0 ? "validation.number.positive" : "validation.number.min", {
-              minimum: meta.exclusiveMinimum,
-              isExclusive: false
-            })
-        })
-      }
-      if (typeof meta.exclusiveMaximum === "number") {
-        schema = schema.pipe(S.lessThan(meta.exclusiveMaximum)).annotations({
-          message: () =>
-            trans("validation.number.max", {
-              maximum: meta.exclusiveMaximum,
-              isExclusive: false
-            })
-        })
-      }
-      break
-    }
-
     case "number":
-      schema = S.Number.annotations({
-        message: () => trans("validation.number.expected", { actualValue: "NaN" })
-      })
-
-      if (meta.required) {
-        schema.annotations({
-          message: () => trans("validation.empty")
+      if (meta.refinement === "int") {
+        schema = S
+          .Number
+          .annotations({
+            message: () => trans("validation.empty")
+          })
+          .pipe(
+            S.int({ message: (issue) => trans("validation.integer.expected", { actualValue: String(issue.actual) }) })
+          )
+      } else {
+        schema = S.Number.annotations({
+          message: () => trans("validation.number.expected", { actualValue: "NaN" })
         })
+
+        if (meta.required) {
+          schema.annotations({
+            message: () => trans("validation.empty")
+          })
+        }
       }
+
       if (typeof meta.minimum === "number") {
         schema = schema.pipe(S.greaterThanOrEqualTo(meta.minimum)).annotations({
           message: () =>

packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -81,12 +81,12 @@
     </v-textarea>
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
-      v-if="inputProps.type === 'number' || inputProps.type === 'int' || inputProps.type === 'range'"
+      v-if="inputProps.type === 'number' || inputProps.type === 'range'"
       :id="inputProps.id"
       :required="inputProps.required"
       :min="inputProps.min"
       :max="inputProps.max"
-      :type="inputProps.type === 'int' ? 'number' : inputProps.type"
+      :type="inputProps.type"
       :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"

packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue

@@ -162,10 +162,10 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     required: isRequired.value,
     minLength: props.meta?.type === "string" && props.meta?.minLength,
     maxLength: props.meta?.type === "string" && props.meta?.maxLength,
-    max: (props.meta?.type === "number" || props.meta?.type === "int")
+    max: (props.meta?.type === "number")
       && (props.meta?.maximum
         ?? (typeof props.meta?.exclusiveMaximum === "number" && props.meta.exclusiveMaximum - 1)),
-    min: (props.meta?.type === "number" || props.meta?.type === "int")
+    min: (props.meta?.type === "number")
       && (props.meta?.minimum
         ?? (typeof props.meta?.exclusiveMinimum === "number" && props.meta.exclusiveMinimum + 1)),
     errorMessages: errors.value,

packages/vue-components/stories/OmegaForm/SimpleForm.vue

@@ -1,55 +1,58 @@
 <template>
-  <stocazzo.Form :subscribe="['values']">
+  <form.Form :subscribe="['values']">
     <template #default="{ subscribedValues: { values } }">
       {{ values }}
-      <stocazzo.TaggedUnion
+      <form.TaggedUnion
         label="select"
         :options="[{
-          title: 'cazzoPippo',
-          value: 'cazzoPippo'
+          title: 'one',
+          value: 'one'
         }, {
-          title: 'Pippocazzo',
-          value: 'Pippocazzo'
+          title: 'two',
+          value: 'two'
         }]"
       >
-        <stocazzo.Input name="a.height" />
-        <stocazzo.Input name="a.width" />
-        <template #Pippocazzo>
-          <stocazzo.Input name="a.y" />
+        <form.Input name="a.number" />
+        <form.Input name="a.height" />
+        <form.Input name="a.width" />
+        <template #two>
+          <form.Input name="a.y" />
         </template>
-        <template #cazzoPippo>
-          <stocazzo.Input name="a.z" />
+        <template #one>
+          <form.Input name="a.z" />
         </template>
         <v-btn type="submit">
           ciao
         </v-btn>
-      </stocazzo.TaggedUnion>
-      <stocazzo.Errors />
+      </form.TaggedUnion>
+      <form.Errors />
     </template>
-  </stocazzo.Form>
+  </form.Form>
 </template>
 
 <script setup lang="ts">
 import { S } from "effect-app"
 import { useOmegaForm } from "../../src/components/OmegaForm"
 
-const stocazzo = useOmegaForm(
+const form = useOmegaForm(
   S.Union(
     S.Struct({
       a: S.Struct({
+        number: S.Number.pipe(S.int()).pipe(S.between(1, 20)),
         height: S.NonEmptyString100.pipe(S.minLength(10)),
         width: S.NonEmptyString100.pipe(S.minLength(10)),
         z: S.NonEmptyString100.pipe(S.minLength(10))
       }),
-      _tag: S.Literal("cazzoPippo")
+      _tag: S.Literal("one")
     }),
     S.Struct({
       a: S.Struct({
+        number: S.Number.pipe(S.int()).pipe(S.between(1, 20)),
         height: S.NonNegativeInt.pipe(S.greaterThan(11)),
         width: S.NonNegativeInt.pipe(S.greaterThan(11)),
         y: S.NonNegativeInt.pipe(S.greaterThan(11))
       }),
-      _tag: S.Literal("Pippocazzo")
+      _tag: S.Literal("two")
     })
   )
 )