update react component insertion method, using prepare hooks per spec page

Author: robhrt7

src/index.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { setComponentsNames, globalizeComponents } from './utils/utils';
-import StyleGuide from 'components/StyleGuide';
-
-import './styles.css';
+import Playground from 'components/Playground';
 
 global.React = React;
 
@@ -14,7 +12,33 @@ if (module.hot) {
 // Load styleguide
 let { config, components } = require('styleguide!');
 
+function getSpecName() {
+	var specName = window.location.pathname;
+
+	specName = specName.split('/');
+	specName.splice(specName.length - 1, 1);
+	specName = specName.join('/').replace(/^\//, '');
+
+	return specName.toLowerCase();
+}
+
 components = setComponentsNames(components);
 globalizeComponents(components);
 
-ReactDOM.render(<StyleGuide config={config} components={components}/>, document.getElementById('app'));
+var hooks = Array.prototype.slice.call(document.querySelectorAll('.source_styleguidist_example'));
+var component = components[getSpecName()];
+
+if (component.examples) {
+	hooks.forEach((hook) => {
+		var exampleIndex = hook.getAttribute('data-jsx-example');
+		var example = component.examples[exampleIndex];
+
+		ReactDOM.render(
+			<Playground code={example.content} evalInContext={example.evalInContext} highlightTheme={config.highlightTheme} key={exampleIndex} index={exampleIndex} />,
+			hook
+		);
+	});
+}
+else {
+	console.log('Styleguidist didn\'t fount any code examples for this spec.');
+}