@effect-app/vue-components 0.2.8 → 0.3.0

package/dist/vue-components.es5.js

@@ -1,25 +1,91 @@
-import { useForm as b } from "@tanstack/vue-form";
-import { S as g } from "effect-app";
-import { generateMetaFromSchema as h } from "./vue-components.es6.js";
-const v = (r, e) => {
-  if (!r) throw new Error("Schema is required");
-  const a = g.standardSchemaV1(r), { filterItems: t, meta: d } = h(r), u = b({
+import { useForm as E } from "@tanstack/vue-form";
+import { S as j, Match as n } from "effect-app";
+import { generateMetaFromSchema as A } from "./vue-components.es6.js";
+import { computed as b, onUnmounted as I, onMounted as K, onBeforeUnmount as M } from "vue";
+import { constVoid as x } from "./vue-components.es15.js";
+const m = (i, e, u) => {
+  if (!i) throw new Error("Schema is required");
+  const a = j.standardSchemaV1(i), { filterItems: f, meta: y } = A(i), o = b(() => {
+    var d;
+    if ((d = u == null ? void 0 : u.persistency) != null && d.id)
+      return u.persistency.id;
+    const l = window.location.pathname, r = Object.keys(y);
+    return `${l}-${r.join("-")}`;
+  }), w = b(() => {
+    var r;
+    if (e != null && e.defaultValues && !((r = u == null ? void 0 : u.persistency) != null && r.overrideDefaultValues))
+      return e.defaultValues;
+    const l = u == null ? void 0 : u.persistency;
+    return n.value(l).pipe(
+      n.when(
+        { method: (d) => ["local", "session"].includes(d) },
+        (d) => {
+          const c = d.method === "local" ? localStorage : sessionStorage;
+          if (c)
+            try {
+              const s = JSON.parse(
+                c.getItem(o.value) || "{}"
+              );
+              return c.removeItem(o.value), s;
+            } catch (s) {
+              return console.error(s), {};
+            }
+          return {};
+        }
+      ),
+      n.orElse(() => ({}))
+    );
+  }), h = E({
     ...e,
     validators: {
       onSubmit: a,
       ...(e == null ? void 0 : e.validators) || {}
     },
-    onSubmit: e != null && e.onSubmit ? ({ formApi: S, meta: c, value: f }) => {
-      var m;
-      return (m = e.onSubmit) == null ? void 0 : m.call(e, {
-        formApi: S,
-        meta: c,
-        value: f
+    onSubmit: e != null && e.onSubmit ? ({ formApi: l, meta: r, value: d }) => {
+      var t;
+      return (t = e.onSubmit) == null ? void 0 : t.call(e, {
+        formApi: l,
+        meta: r,
+        value: d
       });
-    } : void 0
-  });
-  return Object.assign(u, { meta: d, filterItems: t });
+    } : void 0,
+    defaultValues: w.value
+  }), V = Object.assign(h, { meta: y, filterItems: f, clear: () => {
+    Object.keys(y).forEach((l) => {
+      h.setFieldValue(l, void 0);
+    });
+  } }), v = () => {
+    const l = u == null ? void 0 : u.persistency;
+    n.value(l).pipe(
+      n.when(
+        { method: (r) => ["local", "session"].includes(r) },
+        (r) => {
+          const t = r.method === "local" ? localStorage : sessionStorage;
+          if (t)
+            return Array.isArray(r.keys) && Object.keys(y).filter(
+              (s) => {
+                var S;
+                return !((S = r.keys) != null && S.includes(s));
+              }
+            ).forEach((s) => {
+              h.setFieldValue(s, void 0);
+            }), Array.isArray(r.banKeys) && r.banKeys.forEach((c) => {
+              h.setFieldValue(c, void 0);
+            }), t.setItem(
+              o.value,
+              JSON.stringify(h.store.state.values)
+            );
+        }
+      ),
+      n.orElse(x)
+    );
+  };
+  return I(v), K(() => {
+    window.addEventListener("beforeunload", v);
+  }), M(() => {
+    window.removeEventListener("beforeunload", v);
+  }), V;
 };
 export {
-  v as useOmegaForm
+  m as useOmegaForm
 };

package/dist/vue-components.es7.js

@@ -1,7 +1,7 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-59131cd0]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(c,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-59131cd0]{display:contents}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,c,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-fd152523]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-fd152523]{display:contents}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es11.js";
 import m from "./vue-components.es12.js";
-const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-59131cd0"]]);
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-fd152523"]]);
 export {
   a as default
 };

package/dist/vue-components.es8.js

@@ -1,6 +1,6 @@
 import { defineComponent as i, computed as t, createBlock as p, openBlock as d, resolveDynamicComponent as u, withCtx as r, createVNode as f, mergeProps as c, renderSlot as v, normalizeProps as h, guardReactiveProps as g } from "vue";
 import { generateInputStandardSchemaFromFieldMeta as y } from "./vue-components.es6.js";
-import b from "./vue-components.es15.js";
+import b from "./vue-components.es16.js";
 const S = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "OmegaInput",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",
@@ -14,6 +14,12 @@
     "vuetify": "^3.7.19"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/vue3": "^8.6.12",
+    "@storybook/vue3-vite": "^8.6.12",
     "@types/node": "^22.13.14",
     "@typescript-eslint/eslint-plugin": "8.29.0",
     "@typescript-eslint/parser": "8.29.0",
@@ -24,6 +30,7 @@
     "eslint-plugin-vue": "^10.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.86.0",
+    "storybook": "^8.6.12",
     "typescript": "^5.8.2",
     "vite": "^6.2.3",
     "vite-plugin-css-injected-by-js": "^3.5.2",
@@ -52,6 +59,8 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src",
-    "autofix": "pnpm lint --fix"
+    "autofix": "pnpm lint --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -106,6 +106,12 @@ const setRealDirty = () => {
   realDirty.value = true
 }
 
+onMounted(() => {
+  if (fieldValue.value) {
+    setRealDirty()
+  }
+})
+
 const showedErrors = computed(() => {
   // single select field can be validated on change
   if (!realDirty.value && fieldType.value !== "select") return []

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent.stop="form.handleSubmit()">
+  <form novalidate @submit.prevent.stop="form.handleSubmit()">
     <fieldset :disabled="formIsSubmitting">
       <slot :form="form" :subscribed-values="subscribedValues" />
     </fieldset>
@@ -51,26 +51,27 @@ import { type S } from "effect-app"
 import {
   type FilterItems,
   type FormProps,
-  type MetaRecord,
   type OmegaFormApi,
   type OmegaFormState,
   type ShowErrorsOn,
 } from "./OmegaFormStuff"
 import { getOmegaStore } from "./getOmegaStore"
 import { provideOmegaErrors } from "./OmegaErrorsContext"
-import { useOmegaForm } from "./useOmegaForm"
+import {
+  type OmegaConfig,
+  type OmegaFormReturn,
+  useOmegaForm,
+} from "./useOmegaForm"
 import { watch } from "vue"
 
 const props = defineProps<
   {
+    omegaConfig?: OmegaConfig<From>
     subscribe?: K[]
     showErrorsOn?: ShowErrorsOn
   } & (
     | {
-        form: OmegaFormApi<To, From> & {
-          meta: MetaRecord<To>
-          filterItems?: FilterItems
-        }
+        form: OmegaFormReturn<To, From>
         schema?: undefined
       }
     | (FormProps<To, From> & {
@@ -80,7 +81,8 @@ const props = defineProps<
   )
 >()
 
-const form = props.form ?? useOmegaForm<From, To>(props.schema, props)
+const form =
+  props.form ?? useOmegaForm<From, To>(props.schema, props, props.omegaConfig)
 
 const formIsSubmitting = useStore(form.store, state => state.isSubmitting)
 

package/src/components/OmegaForm/getOmegaStore.ts

@@ -10,7 +10,7 @@ export function getOmegaStore<
   form: OmegaFormApi<To, From>,
   subscribe?: K[],
 ): Ref<
-  K[] extends undefined
+  K[] extends undefined[]
     ? Record<string, never>
     : Pick<OmegaFormState<To, From>, K>
 > {

package/src/components/OmegaForm/useOmegaForm.ts

@@ -1,17 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   useForm,
   type FormValidateOrFn,
   type FormAsyncValidateOrFn,
   type StandardSchemaV1,
 } from "@tanstack/vue-form"
-import { S } from "effect-app"
+import { Match, S } from "effect-app"
 import {
   generateMetaFromSchema,
+  type NestedKeyOf,
   type FilterItems,
   type FormProps,
   type MetaRecord,
   type OmegaFormApi,
 } from "./OmegaFormStuff"
+import { computed, onBeforeUnmount, onMounted, onUnmounted } from "vue"
+import { constVoid } from "effect/Function"
+
+type keysRule<T> =
+  | {
+      keys?: NestedKeyOf<T>[]
+      banKeys?: "You should only use one of banKeys or keys, not both, moron"
+    }
+  | {
+      keys?: "You should only use one of banKeys or keys, not both, moron"
+      banKeys?: NestedKeyOf<T>[]
+    }
+
+export type OmegaConfig<T> = {
+  persistency?: {
+    method?: "session" | "local" | "none"
+    overrideDefaultValues?: boolean
+    id?: string
+  } & keysRule<T>
+}
+
+export interface OmegaFormReturn<To, From> extends OmegaFormApi<To, From> {
+  meta: MetaRecord<To>
+  filterItems?: FilterItems
+  clear: () => void
+}
 
 export const useOmegaForm = <
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,16 +48,55 @@ export const useOmegaForm = <
   To extends Record<PropertyKey, any>,
 >(
   schema: S.Schema<From, To, never>,
-  options?: NoInfer<FormProps<To, From>>,
-): OmegaFormApi<To, From> & {
-  meta: MetaRecord<To>
-  filterItems?: FilterItems
-} => {
+  tanstackFormOptions?: NoInfer<FormProps<To, From>>,
+  omegaConfig?: OmegaConfig<From>,
+): OmegaFormReturn<To, From> => {
   if (!schema) throw new Error("Schema is required")
   const standardSchema = S.standardSchemaV1(schema)
 
   const { filterItems, meta } = generateMetaFromSchema(schema)
 
+  const persistencyKey = computed(() => {
+    if (omegaConfig?.persistency?.id) {
+      return omegaConfig.persistency.id
+    }
+    const path = window.location.pathname
+    const keys = Object.keys(meta)
+    return `${path}-${keys.join("-")}`
+  })
+
+  const defaultValues = computed(() => {
+    if (
+      tanstackFormOptions?.defaultValues &&
+      !omegaConfig?.persistency?.overrideDefaultValues
+    )
+      return tanstackFormOptions.defaultValues
+    const persistency = omegaConfig?.persistency
+    return Match.value(persistency).pipe(
+      Match.when(
+        { method: method => ["local", "session"].includes(method) },
+        persistency => {
+          const method = persistency.method
+          const storage = method === "local" ? localStorage : sessionStorage
+          if (storage) {
+            try {
+              const value = JSON.parse(
+                storage.getItem(persistencyKey.value) || "{}",
+              )
+              storage.removeItem(persistencyKey.value)
+              return value
+            } catch (error) {
+              console.error(error)
+              return {}
+            }
+          }
+          return {}
+        },
+      ),
+      Match.orElse(() => ({})),
+    )
+  })
+
   const form = useForm<
     To,
     FormValidateOrFn<To> | undefined,
@@ -42,22 +109,77 @@ export const useOmegaForm = <
     FormAsyncValidateOrFn<To> | undefined,
     FormAsyncValidateOrFn<To> | undefined
   >({
-    ...options,
+    ...tanstackFormOptions,
     validators: {
       onSubmit: standardSchema,
-      ...(options?.validators || {}),
+      ...(tanstackFormOptions?.validators || {}),
     },
-    onSubmit: options?.onSubmit
+    onSubmit: tanstackFormOptions?.onSubmit
       ? ({ formApi, meta, value }) =>
-          options.onSubmit?.({
+          tanstackFormOptions.onSubmit?.({
             formApi: formApi as OmegaFormApi<To, From>,
             meta,
             value: value as unknown as From,
           })
       : undefined,
+    defaultValues: defaultValues.value as any,
   }) satisfies OmegaFormApi<To, From>
 
-  const exposed = Object.assign(form, { meta, filterItems })
+  const clear = () => {
+    Object.keys(meta).forEach((key: any) => {
+      form.setFieldValue(key, undefined)
+    })
+  }
+
+  const exposed = Object.assign(form, { meta, filterItems, clear })
+
+  // This is fragile as fuck. It's an experiment, it's only used because
+  // it's not a core feature of our products, so even if the this is not consistent
+  // it's not a big deal. So not take this code as a good example of how to do things.
+  // This is done only because this function is called before the component is destroyed,
+  // so the state would be lost anyway. So in this case we can play with the state, without
+  // worrying about the side effects.
+  const persistData = () => {
+    const persistency = omegaConfig?.persistency
+    Match.value(persistency).pipe(
+      Match.when(
+        { method: method => ["local", "session"].includes(method) },
+        persistency => {
+          const method = persistency.method
+          const storage = method === "local" ? localStorage : sessionStorage
+          if (storage) {
+            if (Array.isArray(persistency.keys)) {
+              const subs = Object.keys(meta).filter(
+                metakey => !persistency.keys?.includes(metakey as any),
+              )
+              subs.forEach(key => {
+                form.setFieldValue(key as any, undefined)
+              })
+            }
+            if (Array.isArray(persistency.banKeys)) {
+              persistency.banKeys.forEach(key => {
+                form.setFieldValue(key as any, undefined)
+              })
+            }
+            return storage.setItem(
+              persistencyKey.value,
+              JSON.stringify(form.store.state.values),
+            )
+          }
+        },
+      ),
+      Match.orElse(constVoid),
+    )
+  }
+
+  onUnmounted(persistData)
+
+  onMounted(() => {
+    window.addEventListener("beforeunload", persistData)
+  })
+  onBeforeUnmount(() => {
+    window.removeEventListener("beforeunload", persistData)
+  })
 
   return exposed
 }

package/src/stories/OmegaForm/ComplexForm.vue

@@ -0,0 +1,81 @@
+<template>
+  <OmegaForm :form="form">
+    <template #default="{ form }">
+      <OmegaInput label="aString" :form="form" name="aString" />
+      <OmegaInput label="aStringMin2" :form="form" name="aStringMin2" />
+      <OmegaInput label="aStringMin2Max4" :form="form" name="aStringMin2Max4" />
+      <OmegaInput
+        label="aStringMin2Max3Nullable"
+        :form="form"
+        name="aStringMin2Max3Nullable"
+      />
+      <OmegaInput label="aNumber" :form="form" name="aNumber" />
+      <OmegaInput label="aNumberMin2" :form="form" name="aNumberMin2" />
+      <OmegaInput label="aNumberMin2Max" :form="form" name="aNumberMin2Max" />
+      <OmegaInput
+        label="aNumberMin2Max4Nullable"
+        :form="form"
+        name="aNumberMin2Max4Nullable"
+      />
+      <OmegaInput
+        label="aSelect"
+        :form="form"
+        name="aSelect"
+        :options="[
+          { title: 'a', value: 'a' },
+          { title: 'b', value: 'b' },
+          { title: 'c', value: 'c' },
+        ]"
+      />
+      <button>Submit</button>
+      <button type="reset" @click.prevent="form.clear()">Clear</button>
+      <button type="button" @click="form.reset()">Reset</button>
+    </template>
+  </OmegaForm>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { OmegaForm, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
+
+const form = 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: {
+      method: "local",
+      overrideDefaultValues: true,
+    },
+  },
+)
+</script>

package/src/stories/OmegaForm/EmailForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <OmegaForm
+    :schema="schema"
+    :on-submit="onSubmit"
+    :default-values="defaultValues"
+  >
+    <template #default="{ 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/PersistencyForm.vue

@@ -0,0 +1,65 @@
+<template>
+  <OmegaForm
+    :form="addForm"
+    :subscribe="['errors', 'values']"
+    show-errors-on="onChange"
+  >
+    <template #default="{ form, subscribedValues: { errors, values } }">
+      <div>Errors: {{ errors }}</div>
+      <div>Values: {{ values }}</div>
+      <OmegaInput label="first" :form="form" name="first" />
+      <div>+</div>
+      <OmegaInput label="second" :form="form" name="second" />
+      <br />
+      <hr />
+      <br />
+      <OmegaInput label="third.fourth" :form="form" name="third.fourth" />
+      <OmegaInput label="third.fifth" :form="form" 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: {
+      method: "session",
+      keys: ["first", "third.fourth"],
+    },
+  },
+)
+
+const values = addForm.useStore(({ values }) => values)
+
+watch(values, ({ first, second }) => {
+  sum.value = first + second
+})
+
+// TODO: Implement this when we have a way to persist the form values
+// {
+//   persist: "session",
+//   persistKeys: ["riskCategoryPeriod"],
+//   persistBanKeys: ["riskCategory"],
+// }
+</script>

package/src/stories/OmegaForm/SimpleForm.vue

@@ -0,0 +1,30 @@
+<template>
+  <OmegaForm :schema="schema" :on-submit="onSubmit" :subscribe="['values']">
+    <template #default="{ 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

@@ -0,0 +1,15 @@
+<template>
+  <OmegaForm :schema="schema" :subscribe="['values']">
+    <template #default="{ 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>