How to use the @ephox/boulder.ValueSchema.objOf function in @ephox/boulder

const sketch = function (rawSpec) {
  const navigateEvent = 'navigateEvent';

  const wrapperAdhocEvents = 'serializer-wrapper-events';
  const formAdhocEvents = 'form-events';

  const schema = ValueSchema.objOf([
    FieldSchema.strict('fields'),
    // Used for when datafields are present.
    FieldSchema.defaulted('maxFieldIndex', rawSpec.fields.length - 1),
    FieldSchema.strict('onExecute'),
    FieldSchema.strict('getInitialValue'),
    FieldSchema.state('state', function () {
      return {
        dialogSwipeState: Singleton.value(),
        currentScreen: Cell(0)
      };
    })
  ]);

  const spec = ValueSchema.asRawOrDie('SerialisedDialog', schema, rawSpec);

  const navigationButton = function (direction, directionName, enabled) {

export interface ContextForm extends ContextBar {
  type: 'contextform';
  initValue: () => string;
  label: Option;
  launch: Option;
  commands: Array;
}

const contextBarFields = [
  FieldSchema.defaultedFunction('predicate', () => false),
  FieldSchema.defaultedStringEnum('scope', 'node', ['node', 'editor']),
  FieldSchema.defaultedStringEnum('position', 'selection', ['node', 'selection', 'line']),
];

const contextButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const contextToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const launchButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton')
]));

contextformbutton: contextButtonSchema,
  contextformtogglebutton: contextToggleButtonSchema
});

const contextFormSchema = ValueSchema.objOf([
  FieldSchema.defaulted('type', 'contextform'),
  FieldSchema.defaultedFunction('initValue', () => ''),
  FieldSchema.optionString('label'),
  FieldSchema.strictArrayOf('commands', toggleOrNormal),
  FieldSchema.optionOf('launch', ValueSchema.choose('type', {
    contextformbutton: launchButtonSchema,
    contextformtogglebutton: launchToggleButtonSchema
  }))
].concat(contextBarFields));

const contextToolbarSchema = ValueSchema.objOf([
  FieldSchema.defaulted('type', 'contexttoolbar'),
  FieldSchema.strictString('items')
].concat(contextBarFields));

export const createContextToolbar = (spec: ContextToolbarApi): Result> => {
  return ValueSchema.asRaw('ContextToolbar', contextToolbarSchema, spec);
};

export const createContextForm = (spec: ContextFormApi): Result> => {
  return ValueSchema.asRaw('ContextForm', contextFormSchema, spec);
};

name: string;
  active?: boolean;
}

export interface DialogToggleMenuItemInstanceApi extends CommonMenuItemInstanceApi {
  isActive: () => boolean;
  setActive: (state: boolean) => void;
}

export interface DialogToggleMenuItem extends CommonMenuItem {
  type: 'togglemenuitem';
  name: string;
  active: boolean;
}

export const dialogToggleMenuItemSchema = ValueSchema.objOf([
  FieldSchema.strictString('type'),
  FieldSchema.strictString('name'),
  FieldSchema.defaultedBoolean('active', false)
].concat(commonMenuItemFields));

export const dialogToggleMenuItemDataProcessor = ValueSchema.boolean;

export const createToggleMenuItem = (spec: DialogToggleMenuItemApi): Result> => {
  return ValueSchema.asRaw('togglemenuitem', dialogToggleMenuItemSchema, spec);
};

FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const contextToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const launchButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton')
]));

const launchToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformtogglebutton')
]));

const toggleOrNormal = ValueSchema.choose('type', {
  contextformbutton: contextButtonSchema,
  contextformtogglebutton: contextToggleButtonSchema
});

const contextFormSchema = ValueSchema.objOf([
  FieldSchema.defaulted('type', 'contextform'),
  FieldSchema.defaultedFunction('initValue', () => ''),
  FieldSchema.optionString('label'),
  FieldSchema.strictArrayOf('commands', toggleOrNormal),
  FieldSchema.optionOf('launch', ValueSchema.choose('type', {
    contextformbutton: launchButtonSchema,
    contextformtogglebutton: launchToggleButtonSchema

]));

const launchButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton')
]));

const launchToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformtogglebutton')
]));

const toggleOrNormal = ValueSchema.choose('type', {
  contextformbutton: contextButtonSchema,
  contextformtogglebutton: contextToggleButtonSchema
});

const contextFormSchema = ValueSchema.objOf([
  FieldSchema.defaulted('type', 'contextform'),
  FieldSchema.defaultedFunction('initValue', () => ''),
  FieldSchema.optionString('label'),
  FieldSchema.strictArrayOf('commands', toggleOrNormal),
  FieldSchema.optionOf('launch', ValueSchema.choose('type', {
    contextformbutton: launchButtonSchema,
    contextformtogglebutton: launchToggleButtonSchema
  }))
].concat(contextBarFields));

const contextToolbarSchema = ValueSchema.objOf([
  FieldSchema.defaulted('type', 'contexttoolbar'),
  FieldSchema.strictString('items')
].concat(contextBarFields));

export const createContextToolbar = (spec: ContextToolbarApi): Result> => {

}

const contextBarFields = [
  FieldSchema.defaultedFunction('predicate', () => false),
  FieldSchema.defaultedStringEnum('scope', 'node', ['node', 'editor']),
  FieldSchema.defaultedStringEnum('position', 'selection', ['node', 'selection', 'line']),
];

const contextButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const contextToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const launchButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton')
]));

const launchToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformtogglebutton')
]));

const toggleOrNormal = ValueSchema.choose('type', {
  contextformbutton: contextButtonSchema,

const contextButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const contextToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton'),
  FieldSchema.defaulted('primary', false),
  FieldSchema.strictFunction('onAction'),
  FieldSchema.state('original', Fun.identity)
]));

const launchButtonSchema = ValueSchema.objOf(baseToolbarButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformbutton')
]));

const launchToggleButtonSchema = ValueSchema.objOf(baseToolbarToggleButtonFields.concat([
  FieldSchema.defaulted('type', 'contextformtogglebutton')
]));

const toggleOrNormal = ValueSchema.choose('type', {
  contextformbutton: contextButtonSchema,
  contextformtogglebutton: contextToggleButtonSchema
});

const contextFormSchema = ValueSchema.objOf([
  FieldSchema.defaulted('type', 'contextform'),
  FieldSchema.defaultedFunction('initValue', () => ''),
  FieldSchema.optionString('label'),

export interface Input extends FormComponentWithLabel {
  type: 'input';
  inputMode: Option;
  placeholder: Option;
  maximized: boolean;
  disabled: boolean;
}

const inputFields = formComponentWithLabelFields.concat([
  FieldSchema.optionString('inputMode'),
  FieldSchema.optionString('placeholder'),
  FieldSchema.defaultedBoolean('maximized', false),
  FieldSchema.defaultedBoolean('disabled', false)
]);

export const inputSchema = ValueSchema.objOf(inputFields);

export const inputDataProcessor = ValueSchema.string;

export const createInput = (spec: InputApi): Result> => {
  return ValueSchema.asRaw<input>('input', inputSchema, spec);
};