component created

.gitignore

@@ -0,0 +1 @@
+node_modules/

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-timeline-scribble",
+  "version": "0.1.0",
+  "description": "React timeline component",
+  "main": "build/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack --watch",
+    "build": "webpack -p"
+  },
+  "author": "Igor Kamyshev",
+  "babel": {
+    "presets": [
+      "env"
+    ],
+    "plugins": [
+      "transform-object-rest-spread",
+      "transform-react-jsx",
+      "transform-class-properties"
+    ]
+  },
+  "keywords": [
+    "timeline"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "css-loader": "^0.28.8",
+    "emotion": "^8.0.12",
+    "file-loader": "^1.1.6",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.10.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "eslint-plugin-class-property": "^1.1.0"
+  }
+}

src/index.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import s from './style'
+
+
+const Timeline = ({ events }) =>
+  <div className={s.container}>
+    <ul className={s.timeline}>
+      {events.map((event, index) =>
+        <li className={s.event} key={index}>
+          <label className={s.icon}></label>
+          <div className={s.body}>
+            <p className={s.date}>{event.interval}</p>
+            <h3>{event.title}</h3>
+            <h4>{event.subtitle}</h4>
+            <div className={s.description}>
+              {event.descriptions && event.descriptions.map((description, index) =>
+                <p key={index}>
+                  {description.title && <strong>{description.title}</strong>}
+                  {description.title && <br />}
+                  {description.body}
+                </p>
+              )}
+              {event.description && <p>{event.description}</p>}
+            </div>
+          </div>
+        </li>
+      )}
+    </ul>
+  </div>
+
+
+Timeline.propTypes = {
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      interval: PropTypes.string,
+      title: PropTypes.string,
+      subtitle: PropTypes.string,
+      descriptions: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string,
+          body: PropTypes.string,
+        })
+      ),
+      description: PropTypes.string,
+    })
+  ),
+}
+
+export default Timeline

src/style.js

@@ -0,0 +1,84 @@
+import { css } from 'emotion'
+
+export default {
+  container: css`
+    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 1em;
+    font-weight: 300;
+    line-height: 1.5;
+    letter-spacing: 0.05em;
+    * {
+      box-sizing: border-box;
+  
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%;
+      font: inherit;
+      vertical-align: baseline;
+    }
+    p {
+      font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    }
+  `,
+  timeline: css`
+    position: relative;
+    max-width: 46em;
+    list-style: none;
+    &:before {
+      background-color: black;
+      content: '';
+      margin-left: -1px;
+      position: absolute;
+      top: 0;
+      left: 2em;
+      width: 2px;
+      height: 100%;
+    }
+  `,
+  event: css`
+    position: relative;
+  `,
+  icon: css`
+    transform: rotate(45deg);
+    background-color: black;
+    outline: 10px solid white;
+    display: block;
+    margin: 0.5em 0.5em 0.5em -0.5em;
+    position: absolute;
+    top: 0;
+    left: 2em;
+    width: 1em;
+    height: 1em;
+  `,
+  body: css`
+    padding: 2em;
+    position: relative;
+    top: -1.875em;
+    left: 4em;
+    width: 80%;
+    h3 {
+      font-size: 1.75em;
+    }
+    h4 {
+      font-size: 1.2em;
+      margin-bottom: 1.2em;
+    }
+  `,
+  date: css`
+    color: white;
+    background-color: black;
+    box-shadow: inset 0 0 0 0em #ef795a;
+    display: inline-block;
+    margin-bottom: 1.2em;
+    padding: 0.25em 1em 0.2em 1em;
+  `,
+  description: css`
+    strong {
+      font-weight: 700;
+    }
+    p {
+      padding-bottom: 1.2em;
+    }
+  `,
+}

webpack.config.js

@@ -0,0 +1,38 @@
+var path = require('path');
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
+  },
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/,
+        use: {
+          loader: 'babel-loader',
+          options: {},
+        }
+      },
+      {
+        test: /.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      },
+      {
+        test: /.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {}  
+          }
+        ]
+      },
+    ]
+  },
+  externals: {
+    'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+  }
+};