Skip to content
This repository was archived by the owner on May 28, 2019. It is now read-only.

Commit 4edd17d

Browse files
igorkamyshevigorkamyshev
committed
component created
1 parent 96dbd51 commit 4edd17d

File tree

7 files changed

+4284
-0
lines changed

7 files changed

+4284
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎build/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "react-timeline-scribble",
3+
"version": "0.1.0",
4+
"description": "React timeline component",
5+
"main": "build/index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"start": "webpack --watch",
9+
"build": "webpack -p"
10+
},
11+
"author": "Igor Kamyshev",
12+
"babel": {
13+
"presets": [
14+
"env"
15+
],
16+
"plugins": [
17+
"transform-object-rest-spread",
18+
"transform-react-jsx",
19+
"transform-class-properties"
20+
]
21+
},
22+
"keywords": [
23+
"timeline"
24+
],
25+
"license": "MIT",
26+
"dependencies": {
27+
"css-loader": "^0.28.8",
28+
"emotion": "^8.0.12",
29+
"file-loader": "^1.1.6",
30+
"prop-types": "^15.6.0",
31+
"react": "^16.2.0",
32+
"react-dom": "^16.2.0",
33+
"style-loader": "^0.19.1",
34+
"webpack": "^3.10.0"
35+
},
36+
"devDependencies": {
37+
"babel-cli": "^6.26.0",
38+
"babel-core": "^6.26.0",
39+
"babel-loader": "^7.1.2",
40+
"babel-plugin-transform-class-properties": "^6.24.1",
41+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
42+
"babel-plugin-transform-react-jsx": "^6.24.1",
43+
"babel-preset-env": "^1.6.1",
44+
"eslint-plugin-class-property": "^1.1.0"
45+
}
46+
}

‎src/index.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
4+
import s from './style'
5+
6+
7+
const Timeline = ({ events }) =>
8+
<div className={s.container}>
9+
<ul className={s.timeline}>
10+
{events.map((event, index) =>
11+
<li className={s.event} key={index}>
12+
<label className={s.icon}></label>
13+
<div className={s.body}>
14+
<p className={s.date}>{event.interval}</p>
15+
<h3>{event.title}</h3>
16+
<h4>{event.subtitle}</h4>
17+
<div className={s.description}>
18+
{event.descriptions && event.descriptions.map((description, index) =>
19+
<p key={index}>
20+
{description.title && <strong>{description.title}</strong>}
21+
{description.title && <br />}
22+
{description.body}
23+
</p>
24+
)}
25+
{event.description && <p>{event.description}</p>}
26+
</div>
27+
</div>
28+
</li>
29+
)}
30+
</ul>
31+
</div>
32+
33+
34+
Timeline.propTypes = {
35+
events: PropTypes.arrayOf(
36+
PropTypes.shape({
37+
interval: PropTypes.string,
38+
title: PropTypes.string,
39+
subtitle: PropTypes.string,
40+
descriptions: PropTypes.arrayOf(
41+
PropTypes.shape({
42+
title: PropTypes.string,
43+
body: PropTypes.string,
44+
})
45+
),
46+
description: PropTypes.string,
47+
})
48+
),
49+
}
50+
51+
export default Timeline

‎src/style.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { css } from 'emotion'
2+
3+
export default {
4+
container: css`
5+
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
6+
font-size: 1em;
7+
font-weight: 300;
8+
line-height: 1.5;
9+
letter-spacing: 0.05em;
10+
* {
11+
box-sizing: border-box;
12+
13+
margin: 0;
14+
padding: 0;
15+
border: 0;
16+
font-size: 100%;
17+
font: inherit;
18+
vertical-align: baseline;
19+
}
20+
p {
21+
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
22+
}
23+
`,
24+
timeline: css`
25+
position: relative;
26+
max-width: 46em;
27+
list-style: none;
28+
&:before {
29+
background-color: black;
30+
content: '';
31+
margin-left: -1px;
32+
position: absolute;
33+
top: 0;
34+
left: 2em;
35+
width: 2px;
36+
height: 100%;
37+
}
38+
`,
39+
event: css`
40+
position: relative;
41+
`,
42+
icon: css`
43+
transform: rotate(45deg);
44+
background-color: black;
45+
outline: 10px solid white;
46+
display: block;
47+
margin: 0.5em 0.5em 0.5em -0.5em;
48+
position: absolute;
49+
top: 0;
50+
left: 2em;
51+
width: 1em;
52+
height: 1em;
53+
`,
54+
body: css`
55+
padding: 2em;
56+
position: relative;
57+
top: -1.875em;
58+
left: 4em;
59+
width: 80%;
60+
h3 {
61+
font-size: 1.75em;
62+
}
63+
h4 {
64+
font-size: 1.2em;
65+
margin-bottom: 1.2em;
66+
}
67+
`,
68+
date: css`
69+
color: white;
70+
background-color: black;
71+
box-shadow: inset 0 0 0 0em #ef795a;
72+
display: inline-block;
73+
margin-bottom: 1.2em;
74+
padding: 0.25em 1em 0.2em 1em;
75+
`,
76+
description: css`
77+
strong {
78+
font-weight: 700;
79+
}
80+
p {
81+
padding-bottom: 1.2em;
82+
}
83+
`,
84+
}

‎webpack.config.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var path = require('path');
2+
module.exports = {
3+
entry: './src/index.js',
4+
output: {
5+
path: path.resolve(__dirname, 'build'),
6+
filename: 'index.js',
7+
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.
8+
},
9+
module: {
10+
rules: [
11+
{
12+
test: /.js$/,
13+
include: path.resolve(__dirname, 'src'),
14+
exclude: /(node_modules|bower_components|build)/,
15+
use: {
16+
loader: 'babel-loader',
17+
options: {},
18+
}
19+
},
20+
{
21+
test: /.css$/,
22+
use: [ 'style-loader', 'css-loader' ]
23+
},
24+
{
25+
test: /.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
26+
use: [
27+
{
28+
loader: 'file-loader',
29+
options: {}
30+
}
31+
]
32+
},
33+
]
34+
},
35+
externals: {
36+
'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
37+
}
38+
};

0 commit comments

Comments
 (0)