Playground.js

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

export const styles = ({ space, color, borderRadius }) => ({
	root: {
		marginBottom: space[4],
	},
	preview: {
		padding: space[2],
		border: [[1, color.border, 'solid']],
		borderRadius,
		borderBottomLeftRadius:0,
		borderBottomRightRadius:0,
		// the next 2 lines are required to contain floated components
		width: '100%',
		display: 'inline-block',
	},
	controls: {
		display: 'flex',
		alignItems: 'center',
		marginBottom: space[1],
	},
	toolbar: {
		marginLeft: 'auto',
	},
	tab: {}, // expose className to allow using it in 'styles' settings
	padded: {
		// add padding between each example element rendered
		'& > *': {
			isolate: false,
			marginLeft: -space[1],
			marginRight: -space[1],
			'& > *': {
				isolate: false,
				marginRight: space[1],
				marginLeft: space[1],
			},
		},
	},
});

export function PlaygroundRenderer({
	classes,
	exampleIndex,
	name,
	preview,
	previewProps,
	tabBody,
}) {
	const { className, ...props } = previewProps;
	const previewClasses = cx(classes.preview, className );
	return (
		<div className={classes.root} data-testid={`${name}-example-${exampleIndex}`}>
			<div className={previewClasses} {...props} data-preview={name} data-testid="preview-wrapper">
				{preview}
			</div>
			<div className={classes.tab}>{tabBody}</div>
		</div>
	);
}

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

export default Styled(styles)(PlaygroundRenderer);