How to use the @ephox/alloy.Container.sketch function in @ephox/alloy

export const renderAlertBanner = (spec: AlertBannerWrapper, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  // For using the alert banner inside a dialog
  return Container.sketch({
    dom: {
      tag: 'div',
      attributes: {
        role: 'alert'
      },
      classes: [ 'tox-notification', 'tox-notification--in', `tox-notification--${spec.level}` ]
    },
    components: [
      {
        dom: {
          tag: 'div',
          classes: [ 'tox-notification__icon' ]
        },
        components: [
          Button.sketch({
            dom: {

AlloyEvents.run(ImageToolsEvents.external.enable(), (comp, se) => {
            enableAllComponents(filterPanelComponents, comp);
          })
        ])
      ])
    });
  };

  const filterPanelComponents = [
    createBackButton(),
    createSpacer(),
    createApplyButton()
  ];

  // Invert, Sharpen, Emboss
  const FilterPanel = Container.sketch({
    dom: panelDom,
    components: filterPanelComponents.map((mem) => mem.asSpec())
  });

  const BrightnessPanel = createVariableFilterPanel('Brightness', ImageTransformations.brightness, -100, 0, 100);
  const ContrastPanel = createVariableFilterPanel('Contrast', ImageTransformations.contrast, -100, 0, 100);
  const GammaPanel = createVariableFilterPanel('Gamma', ImageTransformations.gamma, -100, 0, 100);

  const makeColorTransform = (red: number, green: number, blue: number): ((ir: ImageResult) => Promise) => (ir: ImageResult): Promise => ImageTransformations.colorize(ir, red, green, blue);

  const makeColorSlider = (label: string) => {
    const onChoose = (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX): void => {
      const redOpt = memRed.getOpt(slider);
      const blueOpt = memBlue.getOpt(slider);
      const greenOpt = memGreen.getOpt(slider);
      redOpt.each((red) => {

const createVariableFilterPanel = (label: string, transform: (ir: ImageResult, adjust: number) => Promise, min: number, value: number, max: number) => {
    const filterPanelComponents = variableFilterPanelComponents(label, transform, min, value, max);
    return Container.sketch({
      dom: panelDom,
      components: filterPanelComponents.map((mem) => mem.asSpec()),
      containerBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('image-tools-filter-panel-buttons-events', [
          AlloyEvents.run(ImageToolsEvents.external.disable(), (comp, se) => {
            disableAllComponents(filterPanelComponents, comp);
          }),
          AlloyEvents.run(ImageToolsEvents.external.enable(), (comp, se) => {
            enableAllComponents(filterPanelComponents, comp);
          })
        ])
      ])
    });
  };

const sharpenTransform = Option.some(ImageTransformations.sharpen);
  const invertTransform = Option.some(ImageTransformations.invert);

  const buttonPanelComponents = [
    createIconButton('crop', 'Crop', getTransformPanelEvent(CropPanel, Option.none(), cropPanelUpdate), false),
    createIconButton('resize', 'Resize', getTransformPanelEvent(ResizePanel, Option.none(), resizePanelUpdate), false),
    createIconButton('orientation', 'Orientation', getTransformPanelEvent(FlipRotatePanel, Option.none(), noop), false),
    createIconButton('brightness', 'Brightness', getTransformPanelEvent(BrightnessPanel, Option.none(), noop), false),
    createIconButton('sharpen', 'Sharpen', getTransformPanelEvent(FilterPanel, sharpenTransform, noop), false),
    createIconButton('contrast', 'Contrast', getTransformPanelEvent(ContrastPanel, Option.none(), noop), false),
    createIconButton('color-levels', 'Color levels', getTransformPanelEvent(ColorizePanel, Option.none(), noop), false),
    createIconButton('gamma', 'Gamma', getTransformPanelEvent(GammaPanel, Option.none(), noop), false),
    createIconButton('invert', 'Invert', getTransformPanelEvent(FilterPanel, invertTransform, noop), false),
  ];

  const ButtonPanel = Container.sketch({
    dom: panelDom,
    components: buttonPanelComponents.map((mem) => mem.asSpec())
  });

  const container = Container.sketch({
    dom: {
      tag: 'div'
    },
    components: [
      ButtonPanel
    ],
    containerBehaviours: Behaviour.derive([
      Replacing.config({})
    ])
  });

export const renderTypeahead = (spec: TypeaheadInput, backstage: UiFactoryBackstage): SketchSpec => {
  return AlloyContainer.sketch({
    dom: {
      tag: 'div'
    },
    components: [
      renderAutocomplete(spec, backstage),

      AlloyButton.sketch({
        dom: {
          tag: 'button',
          innerHtml: Icons.get(spec.icon, backstage.shared.providers.icons)
        }
      })
    ],

    containerBehaviours: Behaviour.derive([
      ComposingConfigs.self(),

createIconButton('resize', 'Resize', getTransformPanelEvent(ResizePanel, Option.none(), resizePanelUpdate), false),
    createIconButton('orientation', 'Orientation', getTransformPanelEvent(FlipRotatePanel, Option.none(), noop), false),
    createIconButton('brightness', 'Brightness', getTransformPanelEvent(BrightnessPanel, Option.none(), noop), false),
    createIconButton('sharpen', 'Sharpen', getTransformPanelEvent(FilterPanel, sharpenTransform, noop), false),
    createIconButton('contrast', 'Contrast', getTransformPanelEvent(ContrastPanel, Option.none(), noop), false),
    createIconButton('color-levels', 'Color levels', getTransformPanelEvent(ColorizePanel, Option.none(), noop), false),
    createIconButton('gamma', 'Gamma', getTransformPanelEvent(GammaPanel, Option.none(), noop), false),
    createIconButton('invert', 'Invert', getTransformPanelEvent(FilterPanel, invertTransform, noop), false),
  ];

  const ButtonPanel = Container.sketch({
    dom: panelDom,
    components: buttonPanelComponents.map((mem) => mem.asSpec())
  });

  const container = Container.sketch({
    dom: {
      tag: 'div'
    },
    components: [
      ButtonPanel
    ],
    containerBehaviours: Behaviour.derive([
      Replacing.config({})
    ])
  });

  const memContainer = Memento.record(container);

  const getApplyButton = (anyInSystem: AlloyComponent): Option => {
    return memContainer.getOpt(anyInSystem).map((container) => {
      const panel = container.components()[0];

components: Arr.map(spec.fields, function (field, i) {
              return i <= spec.maxFieldIndex ? Container.sketch({
                dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-screen"></div>'),
                components: [
                  navigationButton(-1, 'previous', (i &gt; 0)),
                  parts.field(field.name, field.spec),
                  navigationButton(+1, 'next', (i &lt; spec.maxFieldIndex))
                ]
              }) : parts.field(field.name, field.spec);
            })
          })

export const renderTypeahead = (spec: TypeaheadInput, backstage: UiFactoryBackstage): SketchSpec => {
  return AlloyContainer.sketch({
    dom: {
      tag: 'div'
    },
    components: [
      renderAutocomplete(spec, backstage),

      AlloyButton.sketch({
        dom: {
          tag: 'button',
          innerHtml: Icons.get(spec.icon, backstage.shared.providers.icons)
        }
      })
    ],

    containerBehaviours: Behaviour.derive([
      ComposingConfigs.self(),

createBackButton(),
    createSpacer(),
    memSize,
    createSpacer(),
    createButton('Apply', (button) => {
      memSize.getOpt(button).each((sizeInput) => {
        const value = Representing.getValue(sizeInput);
        const width = parseInt(value.width, 10);
        const height = parseInt(value.height, 10);
        const transform = makeResizeTransform(width, height);
        emitTransformApply(button, transform);
      });
    }, false, true)
  ];

  const ResizePanel = Container.sketch({
    dom: panelDom,
    components: resizePanelComponents.map((mem) => mem.asSpec()),
    containerBehaviours: Behaviour.derive([
      AddEventsBehaviour.config('image-tools-resize-buttons-events', [
        AlloyEvents.run(ImageToolsEvents.external.disable(), (comp, se) => {
          disableAllComponents(resizePanelComponents, comp);
        }),
        AlloyEvents.run(ImageToolsEvents.external.enable(), (comp, se) => {
          enableAllComponents(resizePanelComponents, comp);
        })
      ])
    ])
  });

  const makeValueTransform = (transform: (ir: ImageResult, value: any) => Promise, value: any) => (ir: ImageResult): Promise => transform(ir, value);

createButton('Undo', 'undo', true, (button) => {
      AlloyTriggers.emitWith(button, ImageToolsEvents.internal.undo(), {
        direction: 1
      });
    }, providersBackstage)
  );

  const memRedo = Memento.record(
    createButton('Redo', 'redo', true, (button) => {
      AlloyTriggers.emitWith(button, ImageToolsEvents.internal.redo(), {
        direction: 1
      });
    }, providersBackstage)
  );

  const container = Container.sketch({
    dom: {
      tag: 'div',
      classes: [ 'tox-image-tools__toolbar', 'tox-image-tools__sidebar']
    },
    components: [
      memUndo.asSpec(),
      memRedo.asSpec(),
      createButton('Zoom in', 'zoom-in', false, (button) => {
        AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
          direction: 1
        });
      }, providersBackstage),
      createButton('Zoom out', 'zoom-out', false, (button) => {
        AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
          direction: -1
        });