<file_sep>//from LanguageCard

// Globals
import React, { Component } from 'react';

// Styles
import localStyles from './styles/CardName.scss';
const styles = Object.assign({}, localStyles);

export default class CardName extends Component {
  render() {
    return (
      <div className={`${styles.CardName} ${this.props.isSelected ? styles.selected : null}`}>
        {this.props.cardName}
      </div>
    );
  }
}

CardName.propTypes = {
  cardName: React.PropTypes.string.isRequired,
  isSelected: React.PropTypes.bool.isRequired
};<file_sep>// from CommandLine

// Globals
import React, { Component } from 'react';

// Styles
import styles from './styles/CommandText.scss';

export default class CommandText extends Component {
  render() {
    const input = this.props.text ? "yo trails:trailpack " + this.props.text : ""
    return (
      <div className={`${styles.CommandText}`}>
        {input}
      </div>
    );
  }
}
<file_sep>/**
 * Routes Configuration
 * (trails.config.routes)
 *
 * Configure how routes map to views and controllers.
 *
 * @see http://trailsjs.io/doc/config/routes.js
 */
module.exports = [

  /**
   * Render the HelloWorld view
   */
  {
    method: 'GET',
    path: '/',
    handler: 'ViewController.render'
  }
]
<file_sep>// from Header

// Globals
import React, { Component } from 'react';

// Components
import BashDollar from '../atoms/BashDollar';
import HelpIcon from '../atoms/HelpIcon';
import CommandText from '../atoms/CommandText';

// Styles
import styles from './styles/CommandLine.scss';

export default class CommandLine extends Component {
  render() {
    return (
      <div className={`${styles.flexContainer} ${styles.CommandLine}`}>
        <div className={`${styles.flexContainer}`}>
          <BashDollar />
          <CommandText text={this.props.text} />
        </div>
        <div className={`${styles.flexContainer}`}>
          <HelpIcon />
        </div>
      </div>
    );
  }
}
<file_sep>import { combineReducers } from 'redux'
import * as rowReducers from './reducers';

const rootReducer = combineReducers(
  rowReducers
);

export default rootReducer;<file_sep>//from CardRow

// Globals
import React, { Component } from 'react';

// Components
import CardName from '../atoms/CardName'

// Styles
import localStyles from './styles/LanguageCard.scss';
const styles = Object.assign({}, localStyles);

export default class LanguageCard extends Component {

  render() {
    return (
      <div className={`${styles.LanguageCard} ${this.props.isSelected ? styles.selected : null}`} onClick={this.props.selectCard}>
        <div>
          <img className={`${styles.image}`} src={require(`src/assets/images/logos/${this.props.pictureName}.svg`)}></img>
        </div>
        <CardName isSelected={this.props.isSelected} cardName={this.props.pictureName}/>
      </div>
    );
  }
}

LanguageCard.propTypes = {
  pictureName: React.PropTypes.string.isRequired,
  selectCard: React.PropTypes.func.isRequired,
  isSelected: React.PropTypes.bool.isRequired
};<file_sep>// from TrailsMix

// Globals
import React, { Component } from 'react';
import { connect } from 'react-redux';

// Components
import CommandLine from '../molecules/CommandLine';
import Title from '../molecules/Title';

// Styles
import localStyles from './styles/Header.scss';
const styles = Object.assign({}, localStyles);

// Utils
import { parseSelections } from '../../utils/parsingService';

function mapPropsToState(state) {
  return {
    selectedTaskRunner: state.selectedTaskRunner,
    selectedFrontEnd: state.selectedFrontEnd,
    selectedRouter: state.selectedRouter,
    selectedAuth: state.selectedAuth,
  };
}

class Header extends Component {
  render() {
    const {
      dispatch,
      selectedTaskRunner,
      selectedFrontEnd,
      selectedRouter,
      selectedAuth
    } = this.props;

    const allSelections = {
      taskRunner: selectedTaskRunner,
      frontEnd: selectedFrontEnd,
      router: selectedRouter,
      auth: selectedAuth
    };

    const commandLine = parseSelections(allSelections);
    console.log('commandLine', commandLine);

    return (
      <div className={`${styles.flexContainer}`}>
        <Title />
        <CommandLine text={commandLine} />
      </div>
    );
  }
}

export default connect(mapPropsToState)(Header);
<file_sep>const _ = require('lodash')
const Service = require('trails-service')

  /**
   * Parse object with selection info and return install command
   */
export function parseSelections (settings) {
  const server = parseRouters(settings.router);
  const frontends = parseFrontEnds(settings.frontEnd);
  const taskrunners = parseTaskRunners(settings.taskRunner);
  const auths = parseAuths(settings.auth);
  return [server, frontends, taskrunners, auths].filter((e) => e).join(' ');
}

export function parseRouters (settings) {
  const servers = _.invertBy(settings)['selected'];
  const trailpacks = ((server) => {
    switch (server) {
      case 'Hapi':
        return 'trailpack-hapi';
      case 'Express':
        return 'trailpack-express4';
      case 'Koa':
        return 'trailpack-koa';
    }
  })
  const serverTrailPacks = _.map(servers, trailpacks)
  return serverTrailPacks ? serverTrailPacks.join(' ') : '';
}

export function parseTaskRunners (settings) {
  const taskRunners = _.invertBy(settings)['selected'];
  return taskRunners ? taskRunners.join(' ') : '';
}

export function parseFrontEnds (settings) {
  const frontEnds = _.invertBy(settings)['selected'];
  return frontEnds ? frontEnds.join(' ') : '';
}

export function parseAuths (settings) {
  const auths = _.invertBy(settings)['selected'];
  return auths ? auths.join(' ') : ''; 
}
<file_sep>const data = {
  frontend: {
    tools: ['Browserify', 'Webpack'],
    description: {
      main: '..you like bundlers?..',
      supp: ''
    }
  },
  taskrunner: {
    tools: ['Grunt', 'Bower', 'Gulp'],
    description: {
      main: '..now, for task runners..',
      supp: ''
    }
  },
  router: {
    tools: ['Hapi', 'Express', 'Koa'],
    description: {
      main: 'Start with your favorite server!',
      supp: ''
    }
  },
  auth: {
    tools: ['Auth0', 'JWT', 'Passport'],
    description: {
      main: '..a little bit of auth never hurt anyone..',
      supp: ''
    }
  }
};

export default data;<file_sep>// from CommandLine

// Globals
import React, { Component } from 'react';

// Styles
import styles from './styles/HelpIcon.scss';

export default class HelpIcon extends Component {
  render() {
    return (
      <div>
        <i className={`fa fa-question-circle fa-lg ${styles.HelpIcon}`}></i>
      </div>
    );
  }
}<file_sep>import { combineReducers } from 'redux';
import {
  SELECT_TASKRUNNER_CARD,
  SELECT_FRONTEND_CARD,
  SELECT_ROUTER_CARD,
  SELECT_AUTH_CARD,
  SELECT_NO_CHOICE_CARD
} from '../actions/actions';

export function selectedTaskRunner(state = {}, action) {
  switch (action.type) {
    case SELECT_TASKRUNNER_CARD:
      if (!state[action.id]) {
        return Object.assign({}, state, {
          [action.id]: 'selected'
        });
      } else {
        return Object.assign({}, state, delete state[action.id]);
      }
    case SELECT_NO_CHOICE_CARD:
      if(action.kind === 'taskrunner'){
        return Object.assign({}, state = {});
      }
    default:
      return state;
  }
}

export function selectedFrontEnd(state = {}, action) {
  switch (action.type) {
    case SELECT_FRONTEND_CARD:
      if (!state[action.id]) {
        return Object.assign({}, state, {
          [action.id]: 'selected'
        });
      } else {
        return Object.assign({}, state, delete state[action.id]);
      }
    case SELECT_NO_CHOICE_CARD:
      if(action.kind === 'frontend'){
        return Object.assign({}, state = {});
      }
    default:
      return state;
  }
}

export function selectedRouter(state = {}, action) {
  switch (action.type) {
    case SELECT_ROUTER_CARD:
      if (!state[action.id]) {
        return Object.assign({}, {
          [action.id]: 'selected'
        });
      } else {
        return Object.assign({}, delete state[action.id]);
      }
    case SELECT_NO_CHOICE_CARD:
      if(action.kind === 'router'){
        return Object.assign({}, state = {});
      }
    default:
      return state;
  }
}

export function selectedAuth(state = {}, action) {
  switch (action.type) {
    case SELECT_AUTH_CARD:
      if (!state[action.id]) {
        return Object.assign({}, state, {
          [action.id]: 'selected'
        });
      } else {
        return Object.assign({}, state, delete state[action.id]);
      }
    case SELECT_NO_CHOICE_CARD:
      if(action.kind === 'auth'){
        return Object.assign({}, state = {});
      }
    default:
      return state;
  }
}
<file_sep>// from Index

// Globals
import React, { Component } from 'react';

// Components
import Header from '../ecosystems/Header';
import Takeahike from '../ecosystems/Takeahike';

// Styles
import 'src/assets/styles/globals.scss';
import localStyles from './styles/TrailsMix.scss';

export default class TrailsMix extends Component {
  render() {
    return (
      <div className={`${localStyles.flexContainer} ${localStyles.containerStyles}`}>
        <Header />
        <Takeahike />
      </div>
    );
  }
}
<file_sep>//from CardRow

// Globals
import React, { Component } from 'react';

// Styles
import localStyles from './styles/NoChoiceCard.scss';
const styles = Object.assign({}, localStyles);

export default class NoChoiceCard extends Component {
  render() {
    return (
      <div className={`${styles.NoChoiceCard} ${Object.keys(this.props.selectedCards).length === 0 ? styles.selected : null}`} onClick={this.props.selectNoChoiceCard}>
        <i className={`fa fa-times-circle fa-5x`}></i>
      </div>
    );
  }
}

NoChoiceCard.propTypes = {
  selectedCards: React.PropTypes.object.isRequired,
  selectNoChoiceCard: React.PropTypes.func.isRequired
};<file_sep>//from Takeahike

// Globals
import React, { Component } from 'react';

// Styles
import localStyles from './styles/InfoIcon.scss';
const styles = Object.assign({}, localStyles);

export default class InfoIcon extends Component {
  render() {
    return (
      <div className={`${styles.InfoIcon}`}>
        <i className="fa fa-info-circle fa-3x"></i>
      </div>
    );
  }
}<file_sep>//from App

// Globals
import React, { Component } from 'react';

// Components
import CardRow from '../ecosystems/CardRow';

// Styles
import styles from './styles/Takeahike.scss';

export default class Takeahike extends Component {
  render() {
    return (
      <div className={`${styles.Takeahike}`}>
        <div className={`${styles.flexLeft}`}></div>
        <div className={`${styles.flexMiddle}`}>
          <CardRow type="router"/>
          <CardRow type="taskrunner" />
          <CardRow type="frontend"/>
          <CardRow type="auth"/>
        </div>
        <div className={`${styles.flexRight}`}></div>
      </div>
    );
  }
}<file_sep>![trailsmix](http://i.imgur.com/ciqg81u.png)
