secundant/reformed

Forms is business logic

Reformed

Forms as business logic.

import { createHtmlForm } from '@reformed/html';
import { Form, useForm } from '@reformed/react';

const form = createHtmlForm({
  fields: {
    login: [
      '',
      {
        required: true
      }
    ],
    password: [
      '',
      {
        required: true
      }
    ],
    comfirmPassword: [
      '',
      {
        required: true
      }
    ]
  },
  validate: {
    on: 'submit',
    fn: ({ password, comfirmPassword }) => {
      if (password !== comfirmPassword) {
        return {
          comfirmPassword: 'should be equal to password'
        };
      }
    }
  },
  submit: {
    mapParams: omit(['comfirmPassword']),
    fn: submitFx
  }
});

sample({
  clock: form.submitFailed
});
sample({
  clock: form.submitted,
  target: HomePage.route.open
});

// ...

function MyForm() {
  const { register } = useForm(form);

  return (
    <Form form={form} className="space-y-4">
      <FieldLayout label="Login">
        <input {...register('login')} />
      </FieldLayout>
      <FieldLayout label="Password">
        <input type="password" {...register('password')} />
      </FieldLayout>
      <FieldLayout label="Confirm password">
        <input type="password" {...register('confirmPassword')} />
      </FieldLayout>
      <Button type="submit">Login</Button>
    </Form>
  );
}

WIP

Credits

Reformed inspired by ...

reformed's Issues

[draft] Validation API

• Should support Effect
• Modes variants - change, blur, submit
• Modes combination - Field can contain multiple validation modes at same time
• ? CombinedField - only submit?
• ? DynamicField - implement API (maybe will be different issue)

`createField` - core

Basic implementation of static field factory, it must support disabled and defaultValue params to begin with.

const fieldA = createField(); // Field<unknown>
const fieldB = createField({ defaultValue: 10 });
const fieldC = createField({
  defaultValue: 10,
  disabled: $notAuthorized
});

sample({
  clock: loggedIn,
  target: fieldA.reset
});

[draft] Submit API

Proposal:

const formA = createForm({
  fields: {},
  // ...
  submit: () => fetch()
});

const formB = createForm({
  submit: {
    mapParams: fields => ({ foo: 'bar', ...fields }),
    fn: fetchFx
  }
});

const formC = createForm({
  submit: {
    source: { foo: $foo },
    mapParams: (fields, fromSource) => ({ ...fromSource, ...fields }),
    fn: fetchFx
  }
});

formC.$submitStatus; // Store<'initial' | 'pending' | 'done' | 'fail'>
formC.$succeeded; // Store<boolean>

formC.submitted.success; // Event<?>
formC.submitted.failure; // Event<?>
formC.submitted.finally; // Event<?>

[draft] Schema API

• Should be implementation-agnostic
• Should support sync and async
• Can update values (when? submit/any condition?)

`combineFields`

const fields = combineFields({
  fields: {
    name: createField({ defaultValue: '' }),
    age: createField({ defaultValue: 0 })
  }
});

const nested = combineFields({
  fields: {
    a: createField({ defaultValue: 'foo' as const }),
    b: combineFields({
      fields: {
        c: combineFields({
          fields: {
            d: createField({ defaultValue: 'bar' as const })
          }
        })
      }
    })
  }
});

sample({
  clock: buttonClicked,
  source: $external,
  fn: external => ({ b: { c: { d: external } } }),
  target: nested.change
});

[draft] `createForm`

• should inherit logic from combineFields
• should provide Submit API (not specified yet)

const form = createForm({
  fields: { name: createField(), ... },
  submit: ???
});

`combineFields` - Interaction API details

• combined.$modified - should we compute it from children without any conditions?
  • $modified in Field is staying true until field will be reset
  • Maybe configure that behavior?