@effect-app/vue-components 0.2.7 → 0.3.0

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,24 +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> & {
@@ -78,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)
 
@@ -127,7 +131,7 @@ watch(
   },
 )
 
-provideOmegaErrors(formSubmissionAttempts, errors)
+provideOmegaErrors(formSubmissionAttempts, errors, props.showErrorsOn)
 </script>
 
 <style scoped>

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>

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": []
+}