@effect-app/vue-components 0.5.0 → 0.6.2

package/src/stories/OmegaForm/SumExample.vue

@@ -1,37 +0,0 @@
-<template>
-  <OmegaForm :form="addForm">
-    <OmegaInput label="first" :form="addForm" name="first" />
-    <div>+</div>
-    <OmegaInput label="second" :form="addForm" name="second" />
-  </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/form.Input.vue

@@ -1,98 +0,0 @@
-<template>
-  <OmegaForm
-    :schema="S.Struct({ myString: S.String })"
-    :on-submit="console.log"
-  >
-    <template #internalForm="{ form }">
-      <component :is="form.Input" label="myString" name="myString">
-        <template #default="{ field }">
-          <div>
-            <input v-model="field.state.value" />
-          </div>
-        </template>
-      </component>
-    </template>
-  </OmegaForm>
-  <OmegaForm :form="exampleForm">
-    <exampleForm.Input label="aString" name="aString">
-      <template #default="{ field }">
-        <div>
-          <input v-model="field.state.value" />
-        </div>
-      </template>
-    </exampleForm.Input>
-    <exampleForm.Input label="aStringMin2" name="aStringMin2" />
-    <exampleForm.Input label="aStringMin2Max4" name="aStringMin2Max4" />
-    <exampleForm.Input
-      label="aStringMin2Max3Nullable"
-      name="aStringMin2Max3Nullable"
-    />
-    <exampleForm.Input label="aNumber" name="aNumber" />
-    <exampleForm.Input label="aNumberMin2" name="aNumberMin2" />
-    <exampleForm.Input label="aNumberMin2Max" name="aNumberMin2Max" />
-    <exampleForm.Input
-      label="aNumberMin2Max4Nullable"
-      name="aNumberMin2Max4Nullable"
-    />
-    <exampleForm.Input
-      label="aSelect"
-      name="aSelect"
-      :options="[
-        { title: 'a', value: 'a' },
-        { title: 'b', value: 'b' },
-        { title: 'c', value: 'c' },
-      ]"
-    />
-    <button>Submit</button>
-    <button type="reset" @click.prevent="exampleForm.clear()">Clear</button>
-    <button type="button" @click="exampleForm.reset()">Reset</button>
-  </OmegaForm>
-</template>
-
-<script setup lang="ts">
-import { S } from "effect-app"
-import { OmegaForm, useOmegaForm } from "../../components/OmegaForm"
-
-const schema = 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")),
-})
-
-const exampleForm = useOmegaForm(
-  schema,
-  {
-    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.stories.ts

@@ -1,114 +0,0 @@
-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"
-import MetaForm from "./OmegaForm/Meta.vue"
-import FormInput from "./OmegaForm/form.Input.vue"
-import OneHundredWaysToWriteAForm from "./OmegaForm/OneHundredWaysToWriteAForm.vue"
-import Clearable from "./OmegaForm/Clearable.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,
-  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 AnHundredWayToWriteAFormStory: Story = {
-  render: () => ({
-    components: { OneHundredWaysToWriteAForm },
-    template: "<OneHundredWaysToWriteAForm />",
-  }),
-}
-
-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 />",
-  }),
-}
-
-export const MetaStory: Story = {
-  render: () => ({
-    components: { MetaForm },
-    template: "<MetaForm />",
-  }),
-}
-
-export const FormInputStory: Story = {
-  render: () => ({
-    components: { FormInput },
-    template: "<FormInput />",
-  }),
-}
-
-export const ClearableStory: Story = {
-  render: () => ({
-    components: { Clearable },
-    template: "<Clearable />",
-  }),
-}

package/src/stories/README.md

@@ -1,29 +0,0 @@
-# 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

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