Sample form representation

sample-0.yaml

fields:
  - name: user-name
    label: What's your name?
    type: short-text
    required: true
    data:
      placeholder: Jane Doe
  - name: user-email
    label: What's your email?
    type: email
    required: true
    data:
      placeholder: Jane Doe
  - name: is-sharing-feedback
    label: Would you like to share some feedback?
    type: single-choice
    required: true
    data:
      choices:
        - label: Yea, sure
          value: '1'
          default: true
        - label: Nah, I'll pass this time
          value: '0'
  - name: feedback
    label: Pour your heart out
    type: large-text
    conditions:
      - left:
          source: context
          data: { field: is-sharing-feedback }
        operator: equal
        right:
          source: literal
          data: { value: '1' }

sample-1.ts

const definitions = {
  operators: {
    equal: equalOperatorFn,
    // ...
  },
  aggregators: {
    sum: sumAggregatorFn,
    // ...
  }
}

const form = parse(definitions, YAML.parse(fileContents))

sample-2.ts

const definitions = {
  operators: {
    equal: equalOperatorFn,
    // ...
  },
  aggregators: {
    sum: sumAggregatorFn,
    // ...
  }
}

const form = createForm(definitions, [
  shortText({
    name: "user-name",
    label: "What's your name?",
    required: true,
    placeholder: "Jane Doe"
  }),
  email({
    name: "user-email",
    label: "What's your email?",
    required: true
  }),
  singleChoice({
    name: "is-sharing-feedback",
    label: "Would you like to share some feedback?",
    required: true,
    choices: [
      choice({ label: "Yea, sure", value: "1", default: true }),
      choice({ label: "Nah, I'll pass this time", value: "0" })
    ]
  }),
  conditional({
    field: shortText({ name: "feedback", label: "Pour your heart out" }),
    contitions: [
      perdicate({
        left: fromContext("is-sharing-feedback"),
        operator: "equal",
        right: literal("1")
      })
    ]
  })
])

sample-3.ts

const { data, errors } = validate(form, {
  "user-name": "Jane Doe",
  "user-email": "janedoe@gmail.com",
  "is-sharing-feedback": false
})

sample-4.js

interface Field {
  type: string;
  name: string;
  label: string | null;
  required: boolean;
  data: Record<string, any>;
}

interface ShortTextField extends Field {
  type: "short-text";
  data: {
    placeholder: string | null;
    initialValue: string | null;
  };
}

interface LargeTextField extends Field {
  type: "large-text";
  data: {
    placeholder: string | null;
    initialValue: string | null;
  };
}

interface EmailField extends Field {
  type: "email";
  data: {
    placeholder: string | null;
    initialValue: string | null;
  };
}

interface Choice {
  label: string;
  value: string;
  default: boolean;
}

interface SingleChoiceField extends Field {
  type: "single-choice";
  data: {
    choices: { [k: string]: Choice };
  };
}

sample-5.ts

interface Parameter {
  source: string;
  data: Record<string, any>
}

type ContextualParameter<T extends FormContext> = {
  source: 'context'
  data: { field: keyof T['fields'] }
}

type LiteralParameter = {
  source: 'literal'
  data: { value: string }
}

interface Predicate {
  left: Parameter;
  operator: string;
  right: Parameter
}