How to use the @ephox/alloy.FormField.parts function in @ephox/alloy

const getLabel = (label: string) => {
    return {
      dom: {
        tag: 'label',
        classes: ['tox-label'],
        innerHtml: providersBackstage.translate(label)
      }
    };
  };

  const widthField = AlloyFormCoupledInputs.parts().field1(
    formGroup([ AlloyFormField.parts().label(getLabel('Width')), getFieldPart(true) ])
  );

  const heightField = AlloyFormCoupledInputs.parts().field2(
    formGroup([ AlloyFormField.parts().label(getLabel('Height')), getFieldPart(false) ])
  );

  return AlloyFormCoupledInputs.sketch({
    dom: {
      tag: 'div',
      classes: ['tox-form__group']
    },
    components: [
      {
        dom: {
          tag: 'div',
          classes: ['tox-form__controls-h-stack']
        },
        components: [
          // NOTE: Form coupled inputs to the FormField.sketch themselves.
          widthField,

Class.add(tgt, ItemClasses.activeClass);
    })),
    AlloyEvents.run(NativeEvents.focusout(), runOnItem((comp) => {
      SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
        Class.remove(currentActive, ItemClasses.activeClass);
      });
    })),
    AlloyEvents.runOnExecute(runOnItem((comp, se, tgt, itemValue) => {
      AlloyTriggers.emitWith(comp, formActionEvent, {
        name: spec.name,
        value: itemValue
      });
    }))
  ];

  const pField = AlloyFormField.parts().field({
    dom: {
      tag: 'div',
      // FIX: Read from columns
      classes: [ 'tox-collection' ].concat(spec.columns !== 1 ? [ 'tox-collection--grid' ] : [ 'tox-collection--list' ])
    },
    components: [ ],
    factory: { sketch: Fun.identity },
    behaviours: Behaviour.derive([
      Replacing.config({ }),
      Representing.config({
        store: {
          mode: 'memory',
          initialValue: [ ]
        },
        onSetValue: (comp, items) => {
          setContents(comp, items);

export const renderSelectBox = (spec: SelectBoxSpec, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const translatedOptions = Arr.map(spec.items, (item) => {
    return {
      text: providersBackstage.translate(item.text),
      value: item.value
    };
  });

  // DUPE with TextField.
  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));

  const pField = AlloyFormField.parts().field({
    // TODO: Alloy should not allow dom changing of an HTML select!
    dom: {  },
    selectAttributes: {
      size: spec.size
    },
    options: translatedOptions,
    factory: AlloyHtmlSelect,
    selectBehaviours: Behaviour.derive([
      Disabling.config({ disabled: spec.disabled }),
      Tabstopping.config({ }),
      AddEventsBehaviour.config('selectbox-change', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ])

export const renderAutocomplete = (spec: AutocompleteSpec, backstage: UiFactoryBackstage): SketchSpec => {
  const pLabel = renderLabel(spec.label.getOr('?'), backstage.shared.providers);

  const pField = AlloyFormField.parts().field({
    factory: Typeahead,
    dismissOnBlur: false,
    inputClasses: [ 'tox-textfield' ],
    minChars: 1,
    fetch: (input) => {
      const value = Representing.getValue(input);
      const items = spec.getItems(value);
      const tdata = NestedMenus.build(items, ItemResponse.BUBBLE_TO_SANDBOX, backstage, false);
      return Future.pure(tdata);
    },

    markers: {
      // FIX:
      openClass: 'dog'
    },

export const renderListbox = (spec: ListboxFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const pLabel = renderLabel(spec.label, providersBackstage);

  const pField = AlloyFormField.parts().field({
    factory: HtmlSelect,
    dom: {
      classes: [ 'mce-select-field' ]
    },
    selectBehaviours: Behaviour.derive([
      Tabstopping.config({ })
    ]),
    options: spec.values,
    // FIX: Don't use undefined here.
    data: spec.initialValue.getOr(undefined)
  });

  return renderFormField(Option.some(pLabel), pField);
};

export const renderUrlInput = (spec: UrlInputSpec, backstage: UiFactoryBackstage, urlBackstage: UiFactoryBackstageForUrlInput): SketchSpec => {
  const providersBackstage = backstage.shared.providers;

  const updateHistory = (component: AlloyComponent): void => {
    const urlEntry = Representing.getValue(component);
    urlBackstage.addToHistory(urlEntry.value, spec.filetype);
  };

  // TODO: Make alloy's typeahead only swallow enter and escape if menu is open
  const pField = AlloyFormField.parts().field({
    factory: AlloyTypeahead,
    dismissOnBlur: true,
    inputClasses: ['tox-textfield'],
    sandboxClasses: ['tox-dialog__popups'],
    inputAttributes: {
      'aria-errormessage': errorId
    },
    minChars: 0,
    responseTime: 0,
    fetch: (input: AlloyComponent) => {
      const items = getItems(spec.filetype, input, urlBackstage);
      const tdata = NestedMenus.build(items, ItemResponse.BUBBLE_TO_SANDBOX, backstage);
      return Future.pure(tdata);
    },

    getHotspot: (comp) => memUrlBox.getOpt(comp),

export const renderColorInput = (spec: ColorInputSpec, sharedBackstage: UiFactoryBackstageShared, colorInputBackstage: UiFactoryBackstageForColorInput): SimpleSpec => {
  const pField = FormField.parts().field({
    factory: Input,
    inputClasses: ['tox-textfield'],

    onSetValue: (c) => Invalidating.run(c).get(() => { }),

    inputBehaviours: Behaviour.derive([
      Tabstopping.config({ }),
      Invalidating.config({
        invalidClass: 'tox-textbox-field-invalid',
        getRoot: (comp) => {
          return Traverse.parent(comp.element());
        },
        notify: {
          onValid: (comp) => {
            // onValid should pass through the value here
            // We need a snapshot of the value validated.

action: (comp) => {
                const inputComp = memInput.get(comp);
                inputComp.element().dom().click();
              },
              buttonBehaviours: Behaviour.derive([
                Tabstopping.config({ })
              ])
            })
          ]
        }
      ]
    };
  };

  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));
  const pField = AlloyFormField.parts().field({
    factory: { sketch: renderField }
  });

  return renderFormFieldWith(pLabel, pField, ['tox-form__group--stretched'], [ ]);
};

repBehaviour,
      Keying.config({
        mode: 'special',
        onEnter: toggleCheckboxHandler,
        onSpace: toggleCheckboxHandler,
        stopSpaceKeyup: true
      }),
      AddEventsBehaviour.config('checkbox-events', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ]),
  });

  const pLabel = AlloyFormField.parts().label({
    dom: {
      tag: 'span',
      classes: ['tox-checkbox__label'],
      innerHtml: providerBackstage.translate(spec.label)
    },
    behaviours: Behaviour.derive([
      Unselecting.config({})
    ])
  });

  const makeIcon = (className: string) => {
    const iconName = className === 'checked' ? 'selected' : 'unselected';
    return {
      dom: {
        tag: 'span',
        classes: ['tox-icon', 'tox-checkbox-icon__' + className],

  const getFieldPart = (isField1) => AlloyFormField.parts().field({
    factory: AlloyInput,
    inputClasses: ['tox-textfield'],
    inputBehaviours: Behaviour.derive([
      Disabling.config({ disabled: spec.disabled }),
      Tabstopping.config({}),
      AddEventsBehaviour.config('size-input-events', [
        AlloyEvents.run(NativeEvents.focusin(), function (component, simulatedEvent) {
          AlloyTriggers.emitWith(component, ratioEvent, { isField1 });
        }),
        AlloyEvents.run(NativeEvents.change(), function (component, simulatedEvent) {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name });
        })
      ])
    ]),
    selectOnFocus: false
  });