react-styleguidist/lib/rsg-components/Playground/PlaygroundRenderer.js

React components style guide generator

import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';

var styles = function styles(_ref) {
	var space = _ref.space,
	    color = _ref.color,
	    borderRadius = _ref.borderRadius;
	return {
		root: {
			marginBottom: space[4]
		},
		preview: {
			padding: space[2],
			border: [[1, color.border, 'solid']],
			borderRadius: borderRadius
		},
		controls: {
			display: 'flex',
			alignItems: 'center'
		},
		toolbar: {
			marginLeft: 'auto'
		}
	};
};

export function PlaygroundRenderer(_ref2) {
	var classes = _ref2.classes,
	    name = _ref2.name,
	    preview = _ref2.preview,
	    tabButtons = _ref2.tabButtons,
	    tabBody = _ref2.tabBody,
	    toolbar = _ref2.toolbar;

	return React.createElement(
		'div',
		{ className: classes.root },
		React.createElement(
			'div',
			{ className: classes.preview, 'data-preview': name },
			preview
		),
		React.createElement(
			'div',
			{ className: classes.controls },
			React.createElement(
				'div',
				{ className: classes.tabs },
				tabButtons
			),
			React.createElement(
				'div',
				{ className: classes.toolbar },
				toolbar
			)
		),
		React.createElement(
			'div',
			{ className: classes.tab },
			tabBody
		)
	);
}

PlaygroundRenderer.propTypes = {
	classes: PropTypes.object.isRequired,
	name: PropTypes.string.isRequired,
	preview: PropTypes.node.isRequired,
	tabButtons: PropTypes.node.isRequired,
	tabBody: PropTypes.node.isRequired,
	toolbar: PropTypes.node.isRequired
};

export default Styled(styles)(PlaygroundRenderer);