How to use the react-art.Shape function in react-art

// libs
container
	.register('React', React, { maker: 'fixed' })
	.register('_', require('lodash'), { maker: 'fixed' })
	.register('rsvp', require('rsvp'), { maker: 'fixed' })
	.register('eventEmitter', function() { return new Events.EventEmitter() })
	.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
	.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });

// components
container
	.register('Surface', ReactArt.Surface, { maker : 'fixed' })
	.register('Group', ReactArt.Group, { maker : 'fixed' })
	.register('Path', ReactArt.Path, { maker : 'fixed' })
	.register('Shape', ReactArt.Shape, { maker : 'fixed' })
	.register('App', require('./components/app.jsx'))
	.register('GameBoard', require('./components/game-board.jsx'))
	.register('HexGrid', require('./components/hex-grid.jsx'))
	.register('HexTile', require('./components/hex-tile.jsx'));

// mixins
container
	.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });

var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);

var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;


var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()

var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;

var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
        .moveTo(x1, y1)

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
'use strict';

var Circle = require('react-art/Circle');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Transform = ReactART.Transform;

var MOUSE_UP_DRAG = 0.978;
var MOUSE_DOWN_DRAG = 0.9;
var MAX_VEL = 11;
var CLICK_ACCEL = 3;
var BASE_VEL = 0.15;

/**
 * An animated SVG component.
 */
class VectorWidget extends React.Component {
  /**
   * Initialize state members.
   */

*   (Number) radiusTopRight
 *   (Number) radiusBottomLeft
 *   (Number) radiusBottomRight
 *
 */

'use strict';

var assign = require('object-assign');
var PropTypes = require('prop-types');
var React = require('react');
var ReactART = require('react-art');

var createReactClass = require('create-react-class');

var Shape = ReactART.Shape;
var Path = ReactART.Path;

/**
 * Rectangle is a React component for drawing rectangles. Like other ReactART
 * components, it must be used in a .
 */
var Rectangle = createReactClass({
  displayName: 'Rectangle',

  propTypes: {
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    radius: PropTypes.number,
    radiusTopLeft: PropTypes.number,
    radiusTopRight: PropTypes.number,
    radiusBottomRight: PropTypes.number,

/**
 * Copyright 2013 Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */
"use strict";

var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Transform = ReactART.Transform;

var MOUSE_UP_DRAG = 0.978;
var MOUSE_DOWN_DRAG = 0.9;
var MAX_VEL = 11;
var CLICK_ACCEL = 3;
var BASE_VEL = 0.15;

/**
 * An animated SVG component.
 */
var VectorWidget = React.createClass({
  /**
   * Initialize state members.
   */

*   fill="blue"
 * />
 *
 */

'use strict';

var assign = require('object-assign');
var PropTypes = require('prop-types');
var React = require('react');
var ReactART = require('react-art');

var createReactClass = require('create-react-class');

var Path = ReactART.Path;
var Shape = ReactART.Shape;

/**
 * Circle is a React component for drawing circles. Like other ReactART
 * components, it must be used in a .
 */
var Circle = createReactClass({
  displayName: 'Circle',

  propTypes: {
    radius: PropTypes.number.isRequired,
  },

  render: function render() {
    var radius = this.props.radius;

    var path = Path()

*
 * Additional optional property:
 *   (Int) innerRadius
 *
 */

'use strict';

var assign = require('object-assign');
var PropTypes = require('prop-types');
var React = require('react');
var ReactART = require('react-art');

var createReactClass = require('create-react-class');

var Shape = ReactART.Shape;
var Path = ReactART.Path;

/**
 * Wedge is a React component for drawing circles, wedges and arcs.  Like other
 * ReactART components, it must be used in a .
 */
var Wedge = createReactClass({
  displayName: 'Wedge',

  propTypes: {
    outerRadius: PropTypes.number.isRequired,
    startAngle: PropTypes.number.isRequired,
    endAngle: PropTypes.number.isRequired,
    innerRadius: PropTypes.number,
  },