feat(*): Add Timeline and integration with Prismic.io (#3)

.babelrc.js

@@ -4,5 +4,6 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-syntax-dynamic-import',
+    'lodash',
   ],
 };

.circleci/config.yml

@@ -9,9 +9,11 @@ anchors:
   - &github_branch_public master
 
   - &environment
-    SERVICE_GTM: UA-32925160-3
+    GOOGLE_UA: UA-32925160-3
     PATH_PUBLIC: ./public
     GITHUB_BRANCH_PUBLIC: *github_branch_public
+    PRISMIC_API: https://frontinsampa.cdn.prismic.io/api/v2
+    PRISMIC_TOKEN:
 
     # GitHub variables required by @semantic-release/git.
     # https://github.com/semantic-release/git#environment-variables

.eslintrc.js

@@ -6,6 +6,14 @@ module.exports = {
     browser: true,
     'jest/globals': true,
   },
+  globals: {
+    /**
+     * @todo Get globals from Webpack.
+     */
+    PRISMIC_API: true,
+    PRISMIC_TOKEN: true,
+    GOOGLE_UA: true,
+  },
   rules: {
     'max-len': 0,
     'no-console': 0,
@@ -23,6 +31,7 @@ module.exports = {
     'react/jsx-closing-bracket-location': 0,
     'no-param-reassign': 0,
     'no-shadow': 0,
+    camelcase: 0,
   },
   overrides: [
     {

.postcssrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-url': {},
+    autoprefixer: {},
+    cssnano: {
+      preset: [
+        'default',
+        { discardComments: { removeAll: true }},
+      ],
+    },
+  },
+};

package.json

@@ -22,12 +22,15 @@
     "@babel/core": "^7.4.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@svgr/webpack": "^4.2.0",
+    "autoprefixer": "^9.6.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-preset-airbnb": "^3.2.1",
     "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "dotenv": "^8.0.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.2",
@@ -39,17 +42,20 @@
     "eslint-plugin-jest": "^22.6.4",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
-    "file-loader": "^3.0.1",
+    "file-loader": "^4.0.0",
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
     "jest-transform-stub": "^2.0.0",
     "jss-snapshot-serializer": "^1.0.0",
     "mini-css-extract-plugin": "^0.6.0",
     "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "postcss-pxtorem": "^4.0.1",
     "postcss-responsive-type": "^1.0.0",
+    "postcss-url": "^8.0.0",
     "react-test-renderer": "^16.8.6",
+    "redux-mock-store": "^1.5.3",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.2.4",
     "url-loader": "^1.1.2",
@@ -60,18 +66,27 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.0.0-beta.1",
+    "@material-ui/icons": "^4.2.1",
     "@semantic-release/changelog": "^3.0.4",
     "@semantic-release/git": "^7.0.12",
+    "dayjs": "^1.8.14",
+    "deepmerge": "^3.3.0",
     "lodash": "^4.17.11",
+    "prismic-javascript": "^2.0.3",
+    "prismic-reactjs": "^1.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-countdown-now": "^2.1.0",
     "react-countup": "^4.1.3",
     "react-dom": "^16.8.6",
     "react-inlinesvg": "^1.0.0-2",
     "react-jss": "^8.6.1",
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0",
     "reset-jss": "^1.0.0",
     "typed.js": "^2.0.10",
+    "typeface-roboto-mono": "^0.0.54",
     "uuid": "^3.3.2"
   }
 }

scripts/start

@@ -5,6 +5,9 @@ if test -f ./.env; then
 fi
 
 echo "
+NODE_ENV=development
 PATH_PUBLIC=./public
-SERVICE_GTM=UA-99999999-9
+GOOGLE_UA=UA-99999999-9
+PRISMIC_API=https://frontinsampa.cdn.prismic.io/api/v2
+PRISMIC_TOKEN=
 " >> ./.env

src/commons/Section/Section.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 import stringToFunctionStyle from '../../utils/stringToFunctionStyle';
 
@@ -12,26 +13,38 @@ import { withStyles } from '../../styles';
 
 import styles from './styles';
 
+/**
+ * @todo Creates Progress component.
+ */
 const Section = ({
   classes,
   component,
   children,
   title,
   collapsed,
+  progress,
 }) => (
   <Container maxWidth={collapsed ? 'xl' : 'lg'} className={classes.section}>
     <Grid component={component} container className={classes.sectionContainer} justify="center" alignItems="center">
-      <Grid item xs={collapsed ? 'auto' : 10}>
-        {
-          title && (
-            <React.Fragment>
-              <Typed component="h2" className={classes.sectionTitle} variant="h5" content={[stringToFunctionStyle(title)]} a11y={{ content: title }} />
-            </React.Fragment>
-          )
-        }
-
-        {children}
-      </Grid>
+      {
+        progress ? (
+          <Grid item xs={collapsed ? 'auto' : 10}>
+            {
+              title && (
+                <React.Fragment>
+                  <Typed component="h2" className={classes.sectionTitle} variant="h5" content={[stringToFunctionStyle(title)]} a11y={{ content: title }} />
+                </React.Fragment>
+              )
+            }
+
+            {children}
+          </Grid>
+        ) : (
+          <Grid item>
+            <CircularProgress />
+          </Grid>
+        )
+      }
     </Grid>
   </Container>
 );
@@ -42,12 +55,14 @@ Section.propTypes = {
   collapsed: PropTypes.bool,
   title: PropTypes.string,
   component: PropTypes.string,
+  progress: PropTypes.bool,
 };
 
 Section.defaultProps = {
   collapsed: false,
   title: null,
   component: 'section',
+  progress: true,
 };
 
 export default withStyles(styles)(Section);

src/commons/Section/__test__/__snapshots__/Section.spec.js.snap

@@ -11,6 +11,7 @@ exports[`Components: <Section /> With \`title\` prop as \`null\`. Create a snaps
   }
   collapsed={false}
   component="section"
+  progress={true}
   title={null}
 >
   Lorem ipsum dolor sit amet consectetur adipisicing elit.

src/components/Image/Image.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import uuid from 'uuid/v4';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,10 +17,10 @@ const Image = ({
     /**
       * For decorative images like icons, illustrations and others.
       */
-    <img src={src} srcSet={`${src} 2x`} alt="" role="presentation" width={width} height={height} />
+    <img src={src} alt="" role="presentation" width={width} height={height} />
   ) : (
     <React.Fragment>
-      <img src={src} srcSet={`${src} 2x`} alt={alt} aria-describedby={id} width={width} height={height} />
+      <img src={src} alt={alt} aria-describedby={id} width={width} height={height} />
 
       <span id={id}>
         { a11y.description }

src/components/Image/__test__/__snapshots__/Image.spec.js.snap

@@ -6,7 +6,6 @@ exports[`Components: <Image /> With \`presentation\` as \`true\`. Create a snaps
   height="auto"
   role="presentation"
   src="/path/to/image.png"
-  srcSet="/path/to/image.png 2x"
   width="auto"
 />
 `;
@@ -18,7 +17,6 @@ exports[`Components: <Image /> With \`presentation\` props as \`false\`. Create
     aria-describedby="string"
     height="auto"
     src="/path/to/image.png"
-    srcSet="/path/to/image.png 2x"
     width="auto"
   />
   <span

src/index.html

@@ -23,18 +23,16 @@
     <meta name="twitter:site" content="@frontinsp" />
     <meta name="twitter:image" content="http://www.frontinsampa.com.br/assets/images/social.png" />
 
-    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= SERVICE_GTM %>"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= GOOGLE_UA %>"></script>
 
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
-      gtag('config', '<%= SERVICE_GTM %>');
+      gtag('config', '<%= GOOGLE_UA %>');
     </script>
 
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet" />
-
-    <link href="/favicon.ico" rel="shortcut icon" />
+    <link href="favicon.ico" rel="shortcut icon" />
   </head>
 
   <body>

src/index.js

@@ -1,9 +1,18 @@
+import 'typeface-roboto-mono';
+
 import React from 'react';
 import { render } from 'react-dom';
+import { Provider } from 'react-redux';
 
 import Scenes from './scenes';
 
+import store from './store';
+
 render(
-  <Scenes />,
+  <Provider store={store}>
+    <Scenes />
+  </Provider>,
   document.getElementById('root'),
 );
+
+store.subscribe(() => console.log('store:', store.getState()));