<commit_before>import React, {PropTypes as T} from 'react'
import {unnest, last} from 'ramda'

const MONO_FONT = 'Menlo, Monaco, Consolas, "Lucida Console", monospace'
const SERIF_FONT = '"Lucida Grande", Helvetica, arial, sans-serif'

const styles = {
  metaWrap({fullWidth}) {
    return {
      padding: fullWidth ? '0 10px' : 0,
    }
  },
  location: {
    fontSize: 18,
    fontFamily: SERIF_FONT,
    color: '#aaa',
    marginBottom: 10,
  },
  locationItem({last}) {
    return {
      color: last ? '#000' : 'inerit',
    }
  },
  locationDel: {
    margin: '0 .2em',
    color: '#aaa',
  },
  import: {
    fontFamily: MONO_FONT,
    fontSize: 14,
    marginBottom: 10,
    color: '#aaa',
    float: 'right',
  },
  description: {
    maxWidth: 600,
    marginBottom: 10,
    fontFamily: SERIF_FONT,
    fontSize: 14,
  },
  files({fullWidth}) {
    return {
      margin: fullWidth ? '20px 10px' : '20px 0',
    }
  },
  fileName: {
    fontFamily: SERIF_FONT,
    fontSize: 14,
    fontWeight: 'bold',
  },
  fileContnet: {
    fontFamily: MONO_FONT,
    fontSize: 11,
    margin: '5px 0 20px 0',
    background: '#d7e5ec',
    padding: 5,
    borderRadius: 3,
    overflow: 'auto',
  },
}

function locationItem(name, i, {length}) {
  const last = length === i + 1
  return [
    <span key={`${i}item`} style={styles.locationItem({last})}>{name}</span>,
    !last && <span key={`${i}del`} style={styles.locationDel}>/</span>,
  ]
}

export default React.createClass({

  propTypes: {
    demo: T.node,
    fullWidth: T.bool,
    location: T.array.isRequired,
    importPath: T.string,
    description: T.node,
    files: T.arrayOf(T.shape({name: T.string.isRequired, content: T.string.isRequired}).isRequired),
  },

  renderFile(file, index) {
    return <div key={index}>
      <div style={styles.fileName}>{file.name}</div>
      <pre style={styles.fileContnet}>{file.content}</pre>
    </div>
  },

  render() {
    const {demo, fullWidth, location, importPath, description, files} = this.props
    const name = last(location)
    return <div>
      <div style={styles.metaWrap({fullWidth})}>
        <div style={styles.import}>
          import {name} from '{importPath}'
        </div>
        <div style={styles.location}>
          {unnest(location.map(locationItem))}
        </div>
        <div style={styles.description}>
          {description}
        </div><commit_msg>Permit override of `name` for demo (#8)<commit_after>import React, {PropTypes as T} from 'react'
import {unnest, last} from 'ramda'

const MONO_FONT = 'Menlo, Monaco, Consolas, "Lucida Console", monospace'
const SERIF_FONT = '"Lucida Grande", Helvetica, arial, sans-serif'

const styles = {
  metaWrap({fullWidth}) {
    return {
      padding: fullWidth ? '0 10px' : 0,
    }
  },
  location: {
    fontSize: 18,
    fontFamily: SERIF_FONT,
    color: '#aaa',
    marginBottom: 10,
  },
  locationItem({last}) {
    return {
      color: last ? '#000' : 'inerit',
    }
  },
  locationDel: {
    margin: '0 .2em',
    color: '#aaa',
  },
  import: {
    fontFamily: MONO_FONT,
    fontSize: 14,
    marginBottom: 10,
    color: '#aaa',
    float: 'right',
  },
  description: {
    maxWidth: 600,
    marginBottom: 10,
    fontFamily: SERIF_FONT,
    fontSize: 14,
  },
  files({fullWidth}) {
    return {
      margin: fullWidth ? '20px 10px' : '20px 0',
    }
  },
  fileName: {
    fontFamily: SERIF_FONT,
    fontSize: 14,
    fontWeight: 'bold',
  },
  fileContnet: {
    fontFamily: MONO_FONT,
    fontSize: 11,
    margin: '5px 0 20px 0',
    background: '#d7e5ec',
    padding: 5,
    borderRadius: 3,
    overflow: 'auto',
  },
}

function locationItem(name, i, {length}) {
  const last = length === i + 1
  return [
    <span key={`${i}item`} style={styles.locationItem({last})}>{name}</span>,
    !last && <span key={`${i}del`} style={styles.locationDel}>/</span>,
  ]
}

export default React.createClass({

  propTypes: {
    demo: T.node,
    fullWidth: T.bool,
    location: T.array.isRequired,
    importPath: T.string,
    name: T.string,
    description: T.node,
    files: T.arrayOf(T.shape({name: T.string.isRequired, content: T.string.isRequired}).isRequired),
  },

  renderFile(file, index) {
    return <div key={index}>
      <div style={styles.fileName}>{file.name}</div>
      <pre style={styles.fileContnet}>{file.content}</pre>
    </div>
  },

  render() {
    const {demo, fullWidth, location, importPath, description, files, name = last(location)} = this.props
    return <div>
      <div style={styles.metaWrap({fullWidth})}>
        <div style={styles.import}>
          import {name} from '{importPath}'
        </div>
        <div style={styles.location}>
          {unnest(location.map(locationItem))}
        </div>
        <div style={styles.description}>
          {description}
        </div>
{'fraction_non_alphanumeric': 0.16338786498239802, 'fraction_numerical': 0.018844481259059846, 'mean_word_length': 2.8547486033519553, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5063037', 'n_tokens_mistral': 1773, 'n_tokens_neox': 1672, 'n_words': 380}