Mapper 0.4 - React Version - Lite

Starting point for creating JSFiddles with React.

by Sam Fereday

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recompose/0.26.0/Recompose.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input{box-sizing:border-box}html{height:100%}body{padding:0;margin:0;font:75%/1.4em 'Lato', sans-serif;background:#ccc;height:100%}button{width:100%;border:0;padding:0.5em 1em;color:#EEE;background:#28aadc;cursor:pointer;transition:all 0.2s ease}button:hover{background:#70B2EB}.checkbox{margin:10px 0 20px;position:relative}.checkbox label{cursor:pointer;position:absolute;width:20px;height:20px;top:0;left:0;border-radius:4px;-webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.4);-moz-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.4);box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.4);background:-webkit-linear-gradient(top, #222 0%, #45484d 100%);background:-moz-linear-gradient(top, #222 0%, #45484d 100%);background:-o-linear-gradient(top, #222 0%, #45484d 100%);background:-ms-linear-gradient(top, #222 0%, #45484d 100%);background:linear-gradient(top, #222 0%, #45484d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 )}.checkbox...

Babel + JSX

// Simple / generic components
const TitleComponent = ({
    title,
    version
}) => {
    return (
        <p className="lead">
            {title}
            <span>v{version}</span>
        </p>
    )
}

const Checkbox = ({
    id,
    label,
    checked,
    onChange
}) => {
    return (
        <div className="checkbox">
            <input type="checkbox" id={id} onChange={onChange} checked={checked} />
            <label htmlFor={id}></label>
            <span>{label}</span>
        </div>
    )
}

const Radio = ({
    id,
    name,
    value,
    checked,
    onChange
}) => {
    return (
        <div className="radio">
            <input type="radio" id={id} onChange={onChange} name={name} checked={checked} value={id} />
            <label htmlFor={id}>{name}</label>
            <div class="check"></div>
        </div>
    )
}

const Button = ({
    text,
    onClick
}) => {
    return (
        <button onClick={onClick}>{text}</button>
    )
};

const Input = ({
    id,
    value,
    onChange
}) => {
    return (
        <input type="text" id={id} value={value} onChange={onChange} />
    )
};

const LabeledComponent = ({
    text,
    children,
}) => {
    return (
        <div className="node">
            {text}
            {children}
        </div>
    )
};

const BoxComponent = ({
    title,
    intro,
    children
}) => {
    return (
        <div className="sidebarBox">
            <div className="sidebarBoxContent">
                <p>
                    <strong>{title}</strong>
                </p>
                <p>{intro}</p>
            </div>
            {children}
        </div>
    )
}

const ListComponent = ({
    collection,
    component,
    ...props
}) => {
    // There's a better way to do this I'm sure.
    const Component = component;
    return (
        <ul>
            {collection && collection.length &&
                collection.map((item, i) => {
                    return (
                        <li>
                   ...