@effect-app/vue-components 0.2.8 → 0.3.1

package/dist/types/components/OmegaForm/OmegaWrapper.vue.d.ts

@@ -1,14 +1,13 @@
 import { type S } from "effect-app";
-import { type FilterItems, type MetaRecord, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff";
+import { type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff";
+import { type OmegaConfig, type OmegaFormReturn } from "./useOmegaForm";
 declare const _default: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, K extends keyof OmegaFormState<To, From> = keyof OmegaFormState<To, From>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ({
+        omegaConfig?: OmegaConfig<From>;
         subscribe?: K[];
         showErrorsOn?: ShowErrorsOn;
     } & ({
-        form: OmegaFormApi<To, From> & {
-            meta: MetaRecord<To>;
-            filterItems?: FilterItems;
-        };
+        form: OmegaFormReturn<To, From>;
         schema?: undefined;
     } | (Omit<import("@tanstack/vue-form").FormOptions<To, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").StandardSchemaV1<To, From>, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined>, "onSubmit"> & {
         onSubmit?: ((props: {
@@ -20,18 +19,12 @@ declare const _default: <From extends Record<PropertyKey, any>, To extends Recor
         form?: undefined;
         schema: S.Schema<From, To, never>;
     }))) & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<import("./OmegaFormStuff").OmegaFormParams<To, From> & import("@tanstack/vue-form").VueFormApi<To, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").StandardSchemaV1<To, From>, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined> & {
-        meta: MetaRecord<To>;
-        filterItems?: FilterItems;
-    }>): void;
+    expose(exposed: import("vue").ShallowUnwrapRef<OmegaFormReturn<To, From>>): void;
     attrs: any;
     slots: {
         default?: ((props: {
-            form: import("./OmegaFormStuff").OmegaFormParams<To, From> & import("@tanstack/vue-form").VueFormApi<To, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").StandardSchemaV1<To, From>, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined> & {
-                meta: MetaRecord<To>;
-                filterItems?: FilterItems;
-            };
-            subscribedValues: Pick<OmegaFormState<To, From>, K>;
+            form: OmegaFormReturn<To, From>;
+            subscribedValues: K[] extends undefined[] ? Record<string, never> : Pick<OmegaFormState<To, From>, K>;
         }) => any) | undefined;
     };
     emit: {};

package/dist/types/components/OmegaForm/getOmegaStore.d.ts

@@ -1,3 +1,3 @@
 import { type Ref } from "vue";
 import type { OmegaFormState, OmegaFormApi } from "./OmegaFormStuff";
-export declare 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>>;
+export declare 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>>;

package/dist/types/components/OmegaForm/index.d.ts

@@ -7,14 +7,13 @@ export { useOmegaForm } from "./useOmegaForm";
 export { default } from "./OmegaWrapper.vue";
 export { OmegaForm, OmegaInput, OmegaErrors };
 declare const OmegaFormCE: new <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, K extends keyof import("./OmegaFormStuff").OmegaFormState<To, From> = keyof import("./OmegaFormStuff").OmegaFormState<To, From>>(initialProps?: Record<string, any>) => import("vue").VueElement & ((({
+    omegaConfig?: import("./useOmegaForm").OmegaConfig<From> | undefined;
     subscribe?: K[] | undefined;
     showErrorsOn?: import("./OmegaFormStuff").ShowErrorsOn | undefined;
-    form: import("./OmegaFormStuff").OmegaFormApi<To, From> & {
-        meta: import("./OmegaFormStuff").MetaRecord<To>;
-        filterItems?: import("./OmegaFormStuff").FilterItems;
-    };
+    form: import("./useOmegaForm").OmegaFormReturn<To, From>;
     schema?: undefined | undefined;
 } | {
+    omegaConfig?: import("./useOmegaForm").OmegaConfig<From> | undefined;
     subscribe?: K[] | undefined;
     showErrorsOn?: import("./OmegaFormStuff").ShowErrorsOn | undefined;
     defaultValues?: To | undefined;

package/dist/types/components/OmegaForm/useOmegaForm.d.ts

@@ -1,6 +1,27 @@
 import { S } from "effect-app";
-import { type FilterItems, type FormProps, type MetaRecord, type OmegaFormApi } from "./OmegaFormStuff";
-export declare 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> & {
+import { type NestedKeyOf, type FilterItems, type FormProps, type MetaRecord, type OmegaFormApi } from "./OmegaFormStuff";
+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?: {
+        /** Order of importance:
+         * - "querystring": Highest priority when persisting
+         * - "local" and then "session": Lower priority storage options
+         */
+        policies?: ("local" | "session" | "querystring")[];
+        overrideDefaultValues?: boolean;
+        id?: string;
+    } & keysRule<T>;
+};
+export interface OmegaFormReturn<To, From> extends OmegaFormApi<To, From> {
     meta: MetaRecord<To>;
     filterItems?: FilterItems;
-};
+    clear: () => void;
+}
+export declare const useOmegaForm: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(schema: S.Schema<From, To, never>, tanstackFormOptions?: NoInfer<FormProps<To, From>>, omegaConfig?: OmegaConfig<From>) => OmegaFormReturn<To, From>;
+export {};

package/dist/vue-components.es11.js

@@ -1,4 +1,4 @@
-import { defineComponent as d, watch as b, createElementBlock as S, openBlock as g, withModifiers as v, unref as n, createElementVNode as h, renderSlot as O } from "vue";
+import { defineComponent as d, watch as b, createElementBlock as g, openBlock as S, withModifiers as v, unref as n, createElementVNode as h, renderSlot as O } from "vue";
 import { useStore as i } from "@tanstack/vue-form";
 import { getOmegaStore as M } from "./vue-components.es16.js";
 import { provideOmegaErrors as y } from "./vue-components.es4.js";
@@ -6,6 +6,7 @@ import { useOmegaForm as E } from "./vue-components.es5.js";
 const w = ["disabled"], A = /* @__PURE__ */ d({
   __name: "OmegaWrapper",
   props: {
+    omegaConfig: {},
     subscribe: {},
     showErrorsOn: {},
     form: {},
@@ -21,35 +22,36 @@ const w = ["disabled"], A = /* @__PURE__ */ d({
     onSubmit: { type: Function }
   },
   setup(u, { expose: l }) {
-    const s = u, t = s.form ?? E(s.schema, s), f = i(t.store, (e) => e.isSubmitting);
+    const r = u, t = r.form ?? E(r.schema, r, r.omegaConfig), f = i(t.store, (e) => e.isSubmitting);
     l(t);
     const c = M(
       t,
-      s.subscribe
+      r.subscribe
     ), p = i(
       t.store,
       (e) => e.submissionAttempts
-    ), o = t.useStore((e) => e.errors);
+    ), s = t.useStore((e) => e.errors);
     return b(
-      () => [t.filterItems, o.value],
+      () => [t.filterItems, s.value],
       () => {
         const e = t.filterItems;
-        return e ? o.value ? (Object.values(o.value).filter(
-          (r) => !!r
+        return e ? s.value ? (Object.values(s.value).filter(
+          (o) => !!o
         ).flatMap(
-          (r) => Object.values(r).flat().map((m) => m.message)
-        ).some((r) => r === e.message) && e.items.forEach((r) => {
-          const m = t.getFieldMeta(r);
-          t.setFieldMeta(r, {
+          (o) => Object.values(o).flat().map((m) => m.message)
+        ).some((o) => o === e.message) && e.items.forEach((o) => {
+          const m = t.getFieldMeta(o);
+          t.setFieldMeta(o, {
             ...m,
             errorMap: {
-              onSubmit: [{ path: [r], message: e.message }]
+              onSubmit: [{ path: [o], message: e.message }]
             }
           });
         }), {}) : {} : {};
       }
-    ), y(p, o, s.showErrorsOn), (e, a) => (g(), S("form", {
-      onSubmit: a[0] || (a[0] = v((r) => n(t).handleSubmit(), ["prevent", "stop"]))
+    ), y(p, s, r.showErrorsOn), (e, a) => (S(), g("form", {
+      novalidate: "",
+      onSubmit: a[0] || (a[0] = v((o) => n(t).handleSubmit(), ["prevent", "stop"]))
     }, [
       h("fieldset", { disabled: n(f) }, [
         O(e.$slots, "default", {

package/dist/vue-components.es15.js

@@ -1,10 +1,10 @@
 (function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as k, getCurrentInstance as B, useId as L, computed as n, watch as x, onMounted as P, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
+import { defineComponent as B, getCurrentInstance as L, useId as P, computed as n, watch as x, onMounted as _, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
 import { useStore as G } from "@tanstack/vue-form";
 import { useOmegaErrors as H } from "./vue-components.es4.js";
 import J from "./vue-components.es18.js";
 
-const Z = /* @__PURE__ */ k({
+const Z = /* @__PURE__ */ B({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -15,49 +15,53 @@ const Z = /* @__PURE__ */ k({
     type: {},
     validators: {}
   },
-  setup(_) {
-    const e = _, l = B(), q = l == null ? void 0 : l.appContext.components.VTextField, o = L(), u = e.field, a = G(u.store, (t) => t), p = n(() => {
+  setup(q) {
+    const e = q, o = L(), C = o == null ? void 0 : o.appContext.components.VTextField, u = P(), s = e.field, a = G(s.store, (t) => t), f = n(() => {
       var t, r;
       return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
-    }), s = n(() => a.value.value), d = n(
+    }), l = n(() => a.value.value), d = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
       )
     );
     x(
-      () => [!!s.value],
+      () => [!!l.value],
       () => {
         var t, r;
-        d.value.length && !s.value && !((t = e.meta) != null && t.required) && u.setValue(
+        d.value.length && !l.value && !((t = e.meta) != null && t.required) && s.setValue(
           ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
         );
       }
-    ), P(() => {
+    ), _(() => {
       var t, r;
-      !s.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
+      !l.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && s.setValue(null);
     });
-    const { addError: C, removeError: I, showErrors: O, showErrorsOn: $ } = H(), i = S(!1);
+    const { addError: I, removeError: O, showErrors: $, showErrorsOn: k } = H(), i = S(!1);
     A(() => {
-      (O.value || $ === "onChange") && (i.value = !0);
+      ($.value || k === "onChange") && (i.value = !0);
     });
-    const f = () => {
+    const m = () => {
       i.value = !0;
-    }, v = n(() => !i.value && p.value !== "select" ? [] : d.value);
+    };
+    _(() => {
+      l.value && m();
+    });
+    const v = n(() => !i.value && f.value !== "select" ? [] : d.value);
     x(
       () => a.value.meta.errors,
       () => {
-        a.value.meta.errors.length ? C({
-          inputId: o,
+        a.value.meta.errors.length ? I({
+          inputId: u,
           errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
           label: e.label
-        }) : I(o);
+        }) : O(u);
       }
     );
-    const m = n(() => {
+    const p = n(() => {
       var t, r, c, g, y, h, b, E, V, w;
       return {
-        id: o,
+        id: u,
         required: (t = e.meta) == null ? void 0 : t.required,
         minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
         maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
@@ -68,19 +72,19 @@ const Z = /* @__PURE__ */ k({
         errorMessages: v.value,
         error: !!v.value.length,
         field: e.field,
-        setRealDirty: f,
-        type: p.value,
+        setRealDirty: m,
+        type: f.value,
         label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
         options: e.options
       };
     });
-    return (t, r) => D(t.$slots, "default", F(M(m.value)), () => [
-      N("div", { onFocusout: f }, [
-        U(q) ? (z(), R(J, j({
+    return (t, r) => D(t.$slots, "default", F(M(p.value)), () => [
+      N("div", { onFocusout: m }, [
+        U(C) ? (z(), R(J, j({
           key: 0,
-          "input-props": m.value
+          "input-props": p.value
         }, t.$attrs, {
-          "vuetify-value": m.value.field.state.value
+          "vuetify-value": p.value.field.state.value
         }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
       ], 32)
     ]);

package/dist/vue-components.es5.js

@@ -1,25 +1,110 @@
-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({
-    ...e,
+import { useForm as p } from "@tanstack/vue-form";
+import { S as E } from "effect-app";
+import { generateMetaFromSchema as P } from "./vue-components.es6.js";
+import { computed as y, onUnmounted as I, onMounted as N, onBeforeUnmount as R } from "vue";
+const K = (a, t, u) => {
+  if (!a) throw new Error("Schema is required");
+  const b = E.standardSchemaV1(a), { filterItems: f, meta: c } = P(a), i = y(() => {
+    var r;
+    if ((r = u == null ? void 0 : u.persistency) != null && r.id)
+      return u.persistency.id;
+    const e = window.location.pathname, l = Object.keys(c);
+    return `${e}-${l.join("-")}`;
+  }), L = () => {
+    const e = new URLSearchParams(window.location.search);
+    e.delete(i.value);
+    const l = new URL(window.location.href);
+    l.search = e.toString(), window.history.replaceState({}, "", l.toString());
+  }, U = y(() => {
+    var l;
+    if (t != null && t.defaultValues && !((l = u == null ? void 0 : u.persistency) != null && l.overrideDefaultValues))
+      return t == null ? void 0 : t.defaultValues;
+    const e = u == null ? void 0 : u.persistency;
+    if (!(e != null && e.policies) || e.policies.length === 0) return {};
+    if (e.policies.includes("querystring"))
+      try {
+        const s = new URLSearchParams(window.location.search).get(i.value);
+        if (L(), s)
+          return JSON.parse(s);
+      } catch (r) {
+        console.error(r);
+      }
+    if (e.policies.includes("local") || e.policies.includes("session")) {
+      const r = e.policies.includes("local") ? localStorage : sessionStorage;
+      if (r)
+        try {
+          const s = JSON.parse(
+            r.getItem(i.value) || "{}"
+          );
+          return r.removeItem(i.value), s;
+        } catch (s) {
+          console.error(s);
+        }
+    }
+    return {};
+  }), n = p({
+    ...t,
     validators: {
-      onSubmit: a,
-      ...(e == null ? void 0 : e.validators) || {}
+      onSubmit: b,
+      ...(t == null ? void 0 : t.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: t != null && t.onSubmit ? ({ formApi: e, meta: l, value: r }) => {
+      var s;
+      return (s = t.onSubmit) == null ? void 0 : s.call(t, {
+        formApi: e,
+        meta: l,
+        value: r
       });
-    } : void 0
-  });
-  return Object.assign(u, { meta: d, filterItems: t });
+    } : void 0,
+    defaultValues: U.value
+  }), V = () => {
+    Object.keys(c).forEach((e) => {
+      n.setFieldValue(e, void 0);
+    });
+  }, S = (e) => e.reduce(
+    (l, r) => {
+      const s = r.split(".");
+      return s.reduce((d, o, j) => (j === s.length - 1 ? d[o] = n.getFieldValue(r) : d[o] = d[o] || {}, d[o]), l);
+    },
+    {}
+  ), h = (e) => {
+    if (e) {
+      if (Array.isArray(e.keys))
+        return S(e.keys);
+      if (Array.isArray(e.banKeys)) {
+        const l = Object.keys(c).filter(
+          (r) => {
+            var s;
+            return (s = e.banKeys) == null ? void 0 : s.includes(r);
+          }
+        );
+        return S(l);
+      }
+      return n.store.state.values;
+    }
+  }, w = () => {
+    const e = u == null ? void 0 : u.persistency;
+    if (!(!(e != null && e.policies) || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
+      const l = e.policies.includes("local") ? localStorage : sessionStorage;
+      if (!l) return;
+      const r = h(e);
+      return l.setItem(i.value, JSON.stringify(r));
+    }
+  }, v = () => {
+    const e = u == null ? void 0 : u.persistency;
+    if (!(!(e != null && e.policies) || e.policies.length === 0) && e.policies.includes("querystring")) {
+      const l = h(e), r = new URLSearchParams(window.location.search);
+      r.set(i.value, JSON.stringify(l));
+      const s = new URL(window.location.href);
+      s.search = r.toString(), window.history.replaceState({}, "", s.toString());
+    }
+  };
+  return I(w), N(() => {
+    window.addEventListener("beforeunload", w), window.addEventListener("blur", v);
+  }), R(() => {
+    window.removeEventListener("beforeunload", w), window.removeEventListener("blur", v);
+  }), Object.assign(n, { meta: c, filterItems: f, clear: V });
 };
 export {
-  v as useOmegaForm
+  K 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "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,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   useForm,
   type FormValidateOrFn,
@@ -7,11 +8,41 @@ import {
 import { 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"
+
+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?: {
+    /** Order of importance:
+     * - "querystring": Highest priority when persisting
+     * - "local" and then "session": Lower priority storage options
+     */
+    policies?: ("local" | "session" | "querystring")[]
+    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 +51,75 @@ 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 clearUrlParams = () => {
+    const params = new URLSearchParams(window.location.search)
+    params.delete(persistencyKey.value)
+    const url = new URL(window.location.href)
+    url.search = params.toString()
+    window.history.replaceState({}, "", url.toString())
+  }
+
+  const defaultValues = computed(() => {
+    if (
+      tanstackFormOptions?.defaultValues &&
+      !omegaConfig?.persistency?.overrideDefaultValues
+    ) {
+      return tanstackFormOptions?.defaultValues
+    }
+    const persistency = omegaConfig?.persistency
+    if (!persistency?.policies || persistency.policies.length === 0) return {}
+    if (persistency.policies.includes("querystring")) {
+      try {
+        const params = new URLSearchParams(window.location.search)
+        const value = params.get(persistencyKey.value)
+        clearUrlParams()
+        if (value) {
+          return JSON.parse(value)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    if (
+      persistency.policies.includes("local") ||
+      persistency.policies.includes("session")
+    ) {
+      const storage = persistency.policies.includes("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 {}
+  })
+
   const form = useForm<
     To,
     FormValidateOrFn<To> | undefined,
@@ -42,22 +132,103 @@ 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 createNestedObjectFromPaths = (paths: string[]) =>
+    paths.reduce(
+      (result, path) => {
+        const parts = path.split(".")
+        return parts.reduce((acc, part, i) => {
+          if (i === parts.length - 1) {
+            acc[part] = form.getFieldValue(path as any)
+          } else {
+            acc[part] = acc[part] || {}
+          }
+          return acc[part]
+        }, result)
+      },
+      {} as Record<string, any>,
+    )
+
+  const persistFilter = (persistency: OmegaConfig<From>["persistency"]) => {
+    if (!persistency) return
+    if (Array.isArray(persistency.keys)) {
+      return createNestedObjectFromPaths(persistency.keys)
+    }
+    if (Array.isArray(persistency.banKeys)) {
+      const subs = Object.keys(meta).filter(metakey =>
+        persistency.banKeys?.includes(metakey as any),
+      )
+      return createNestedObjectFromPaths(subs)
+    }
+    return form.store.state.values
+  }
+
+  const persistData = () => {
+    const persistency = omegaConfig?.persistency
+    if (!persistency?.policies || persistency.policies.length === 0) {
+      return
+    }
+    if (
+      persistency.policies.includes("local") ||
+      persistency.policies.includes("session")
+    ) {
+      const storage = persistency.policies.includes("local")
+        ? localStorage
+        : sessionStorage
+      if (!storage) return
+      const values = persistFilter(persistency)
+      return storage.setItem(persistencyKey.value, JSON.stringify(values))
+    }
+  }
+
+  const saveDataInUrl = () => {
+    const persistency = omegaConfig?.persistency
+    if (!persistency?.policies || persistency.policies.length === 0) {
+      return
+    }
+    if (persistency.policies.includes("querystring")) {
+      const values = persistFilter(persistency)
+      const searchParams = new URLSearchParams(window.location.search)
+      searchParams.set(persistencyKey.value, JSON.stringify(values))
+      const url = new URL(window.location.href)
+      url.search = searchParams.toString()
+      window.history.replaceState({}, "", url.toString())
+    }
+  }
+
+  onUnmounted(persistData)
+
+  onMounted(() => {
+    window.addEventListener("beforeunload", persistData)
+    window.addEventListener("blur", saveDataInUrl)
+  })
+  onBeforeUnmount(() => {
+    window.removeEventListener("beforeunload", persistData)
+    window.removeEventListener("blur", saveDataInUrl)
+  })
+
+  const exposed = Object.assign(form, { meta, filterItems, clear })
 
   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: {
+      policies: ["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,58 @@
+<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: {
+      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

@@ -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>

package/src/stories/OmegaForm/SumExample.vue

@@ -0,0 +1,39 @@
+<template>
+  <OmegaForm :form="addForm">
+    <template #default="{ form }">
+      <OmegaInput label="first" :form="form" name="first" />
+      <div>+</div>
+      <OmegaInput label="second" :form="form" name="second" />
+    </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,
+})
+
+const addForm = useOmegaForm(AddSchema, {
+  defaultValues: {
+    first: 0,
+    second: 0,
+  },
+})
+
+const values = addForm.useStore(({ values }) => values)
+
+watch(values, ({ first, second }) => {
+  sum.value = first + second
+})
+</script>

package/src/stories/OmegaForm.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { OmegaForm } from "../components/OmegaForm"
+import { provideIntl } from "../utils"
+import { type makeIntl } from "@effect-app/vue"
+import { ref } from "vue"
+import SimpleForm from "./OmegaForm/SimpleForm.vue"
+import EmailForm from "./OmegaForm/EmailForm.vue"
+import ComplexForm from "./OmegaForm/ComplexForm.vue"
+import SimpleFormVuetifyDefault from "./OmegaForm/SimpleFormVuetifyDefault.vue"
+import SumExample from "./OmegaForm/SumExample.vue"
+import PersistencyForm from "./OmegaForm/PersistencyForm.vue"
+
+const mockIntl = {
+  locale: ref("en"),
+  trans: (id: string) => id,
+  intl: ref({ formatMessage: (msg: { id: string }) => msg.id }),
+} as unknown as ReturnType<ReturnType<typeof makeIntl<string>>["useIntl"]>
+
+const meta: Meta<typeof OmegaForm> = {
+  title: "Components/OmegaForm",
+  component: OmegaForm,
+  tags: ["autodocs"],
+  argTypes: {
+    schema: { control: "object" },
+    onSubmit: { action: "submitted" },
+    defaultValues: { control: "object" },
+  },
+  decorators: [
+    story => ({
+      components: { story },
+      setup() {
+        provideIntl(mockIntl)
+        return {}
+      },
+      template: "<story />",
+    }),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SimpleFormStory: Story = {
+  render: () => ({
+    components: { SimpleForm },
+    template: "<SimpleForm />",
+  }),
+}
+
+export const EmailFormStory: Story = {
+  render: () => ({
+    components: { EmailForm },
+    template: "<EmailForm />",
+  }),
+}
+
+export const ComplexFormStory: Story = {
+  render: () => ({
+    components: { ComplexForm },
+    template: "<ComplexForm />",
+  }),
+}
+
+export const SimpleFormVuetifyDefaultStory: Story = {
+  render: () => ({
+    components: { SimpleFormVuetifyDefault },
+    template: "<SimpleFormVuetifyDefault />",
+  }),
+}
+
+export const SumExampleStory: Story = {
+  render: () => ({
+    components: { SumExample },
+    template: "<SumExample />",
+  }),
+}
+
+export const PersistencyFormStory: Story = {
+  render: () => ({
+    components: { PersistencyForm },
+    template: "<PersistencyForm />",
+  }),
+}

package/src/stories/README.md

@@ -0,0 +1,29 @@
+# Storybook Stories
+
+This folder contains all the Storybook stories for the Vue Components package. Each story file corresponds to a component and demonstrates its various use cases and configurations.
+
+## Structure
+
+- Each story file is named after the component it's documenting (e.g., `OmegaForm.stories.ts`)
+- Stories are organized by component type and functionality
+- Each story includes proper TypeScript typing and documentation
+
+## Running Stories
+
+To run the Storybook:
+
+```bash
+pnpm storybook
+```
+
+This will start Storybook on port 6006, and you can view your components at http://localhost:6006.
+
+## Adding New Stories
+
+When adding a new story:
+
+1. Create a new file in this folder with the naming pattern `ComponentName.stories.ts`
+2. Import the component and any dependencies
+3. Define the meta object with component information
+4. Create story objects that demonstrate different use cases
+5. Use proper TypeScript typing for all parameters 

package/src/stories/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": []
+}