How to use the metal-state.Config.shapeOf function in metal-state

*/
class RadioGroup extends Component {}

/**
 * State definition.
 * @static
 * @type {!Object}
 */
RadioGroup.STATE = {
  /**
   * The list of radio items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      id: Config.string(),
      checked: Config.bool(),
      label: Config.string(),
      value: Config.string(),
    })
  ).required(),

  /**
   * The name param used on each radio
   * @type {?String}
   * @default undefined
   */
  name: Config.string().required(),

  /**
   * The style of the radio group

*/
class CheckboxGroup extends Component {}

/**
 * State definition.
 * @static
 * @type {!Object}
 */
CheckboxGroup.STATE = {
  /**
   * The list of radio items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      id: Config.string(),
      checked: Config.bool(),
      label: Config.string(),
      value: Config.string(),
    })
  ).required(),

  /**
   * The name param used on each radio
   * @type {?String}
   * @default undefined
   */
  name: Config.string().required(),

  /**
   * The style of the radio group

* @type {!Object}
 */
Topbar.STATE = {
  /**
   * Additional CSS classes to be added
   * @type {!String}
   * @default undefined
   */
  style: Config.string(),

  /**
   * Defines how the logo should look like
   * @type {?Object|undefined}
   * @default undefined
   */
  logo: Config.shapeOf({
    href: Config.string(),
    icon: Config.string(),
    image: Config.string(),
    text: Config.string(),
  }),

  /**
   * The list of menu items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      href: Config.string(),
      label: Config.string(),
      selected: Config.bool(),

* @default undefined
   */
  logo: Config.shapeOf({
    href: Config.string(),
    icon: Config.string(),
    image: Config.string(),
    text: Config.string(),
  }),

  /**
   * The list of menu items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      href: Config.string(),
      label: Config.string(),
      selected: Config.bool(),
      target: Config.string(),
      type: Config.string(),
      variant: Config.string(),
    })
  ).value([]),
};

Soy.register(Topbar, templates);

export {Topbar};
export default Topbar;