How to use the mobx-state-tree.types.compose function in mobx-state-tree

export interface IStringAttrs extends IValueAttrs {
  readonly minLength?: number | null;
  readonly maxLength?: number | null;
  readonly pattern?: string | null;
  readonly format?: IFormat | null;
}

export interface IStringConfig
  extends IValueConfig,
    Partial {}

export interface IString extends IStringAttrs, IValue {}

// tslint:disable-next-line:variable-name
export const String: IModelType, IString> = types
  .compose(
    "String",
    createValue("string", types.string, ""),
    types.model({
      format: types.maybe(
        types.union(
          ...Object.keys(matchers).map(format => types.literal(format))
        )
      ),
      maxLength: types.maybe(types.number),
      minLength: types.maybe(types.number),
      pattern: types.maybe(types.string)
    })
  )
  .actions(it => ({
    afterCreate() {

import { createValue, IValue, IValueAttrs, IValueConfig } from "../Value";

export interface IBooleanAttrs extends IValueAttrs {}

export interface IBooleanConfig
  extends IValueConfig,
    Partial {}

export interface IBoolean extends IBooleanAttrs, IValue {}

// tslint:disable-next-line:variable-name
export const Boolean: IModelType<
  Partial,
  IBoolean
> = types.compose(
  "Boolean",
  createValue("boolean", types.boolean, false),
  types.model({})
);

mappings.boolean = Boolean;

export function createBoolean(): IModelType, IBoolean> {
  return Boolean;
}

export function createArray(): IModelType, IArray> {
  if (!NArray) {
    const Array: IModelType, IArray> = types
      .compose(
        "Array",
        createValue, "array">(
          "array",
          types.array(types.frozen),
          []
        ),
        types.model({
          additionalItems: types.maybe(types.boolean),
          elements: types.optional(types.array(types.late(createType)), []),
          // items: types.maybe(
          //     types.union(
          //         types.late(createType),
          //         types.array(types.late(createType))
          //     )
          // ),

export default function createArray(): IModelType<
  Partial,
  IArray
> {
  if (!NArray) {
    const Array: IModelType, IArray> = types
      .compose(
        "Array",
        createValue, "array">(
          "array",
          types.array(types.frozen),
          []
        ),
        types.model({
          minItems: types.maybe(types.number),
          maxItems: types.maybe(types.number),
          // items: types.maybe(
          //     types.union(
          //         types.late(createType),
          //         types.array(types.late(createType))
          //     )
          // ),

if (self.states && self.states.length) {
        return self.states.map(s => {
          const tree = buildTree(s);
          // in case of labels it's gonna be, labels: ["label1", "label2"]
          tree["value"][s.type] = s.getSelectedNames();
          tree["type"] = s.type;

          return tree;
        });
      } else {
        return buildTree(parent);
      }
    },
  }));

const TextRegionModel = types.compose("TextRegionModel", RegionsMixin, NormalizationMixin, Model);

/**
 * Region state hint
 * @param {*} props
 */
const RegionState = props => {
  const localState = props.state;

  /**
   * Get name of label
   */
  const selectedString = localState.getSelectedString();
  const selectedColor = Utils.Colors.convertToRGBA(localState.getSelectedColor(), 0.3);
  let style = {
    background: selectedColor,
  };

}

    function setCoordinates ({ x, y }) {
      self.x = x
      self.y = y
    }

    return {
      initialDrag,
      initialPosition,
      move,
      setCoordinates
    }
  })

const Point = types.compose('Point', Mark, PointModel)

export default Point

const Model = LabelMixin.props({ _type: "brushlabels" }).views(self => ({
  get shouldBeUnselected() {
    return self.choice === "single";
  },
}));

const Composition = types.compose(
  LabelsModel,
  ModelAttrs,
  BrushModel,
  TagAttrs,
  Model,
  SelectedModelMixin,
);

const BrushLabelsModel = types.compose(
  "BrushLabelsModel",
  Composition,
);

const HtxBrushLabels = observer(({ item }) => {
  return ;
});

Registry.addTag("brushlabels", BrushLabelsModel, HtxBrushLabels);

export { HtxBrushLabels, BrushLabelsModel };

})

const Classification = types
  .model('Classification', {
    annotations: types.map(types.union(...annotationModels)),
    completed: types.optional(types.boolean, false),
    links: types.frozen({
      project: types.string,
      subjects: types.array(types.string),
      workflow: types.string
    }),
    metadata: types.maybe(ClassificationMetadata)
  })

export { ClassificationMetadata }
export default types.compose('ClassificationResource', Resource, AnnotationsStore, Classification)

export default function createObject(): IModelType<
  Partial,
  IObject
> {
  if (!NObject) {
    const XObject = types
      .compose(
        "Object",
        createValue(
          "object",
          types.map(types.frozen),
          {}
        ),
        types.model({
          properties: types.maybe(
            types.map(types.late(createType))
          ),
          minProperties: types.maybe(types.number),
          maxProperties: types.maybe(types.number),
          additionalProperties: types.maybe(
            types.union(types.boolean, types.late(createType))
          ),

import { types } from 'mobx-state-tree'
import Resource from './Resource'

const Project = types
  .model('Project', {
    configuration: types.frozen({}),
    display_name: types.string,
    experimental_tools: types.frozen([]),
    links: types.frozen({}),
    slug: types.string
  })

export default types.compose('ProjectResource', Resource, Project)