From 3031af676f6501808848cfac33838139934f5b12 Mon Sep 17 00:00:00 2001 From: Roberto Dip Date: Tue, 27 Jun 2017 11:43:20 -0300 Subject: [PATCH] Initial commit --- .gitignore | 22 + README.md | 57 + package.json | 20 + public/favicon.ico | Bin 0 -> 1150 bytes public/index.html | 40 + public/manifest.json | 15 + src/components/Container/Container.css | 11 + src/components/Container/Container.js | 12 + src/components/CopyOnClick/CopyOnClick.css | 4 + src/components/CopyOnClick/CopyOnClick.js | 48 + src/components/Forms/Button/Button.css | 11 + src/components/Forms/Button/Button.js | 10 + src/components/Forms/Input/Input.css | 31 + src/components/Forms/Input/Input.js | 15 + src/components/Header/Header.css | 13 + src/components/Header/Header.js | 12 + .../SignatureCreator/SignatureCreator.css | 23 + .../SignatureCreator/SignatureCreator.js | 40 + .../SignatureForm/SignatureForm.js | 18 + .../SignaturePreview/SignaturePreview.css | 28 + .../SignaturePreview/SignaturePreview.js | 22 + src/index.css | 31 + src/index.js | 9 + src/logo.png | Bin 0 -> 8314 bytes src/registerServiceWorker.js | 51 + src/scenes/Home/Home.css | 4 + src/scenes/Home/Home.js | 28 + yarn.lock | 6236 ++++++++++++++++++++ 28 files changed, 6811 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 public/manifest.json create mode 100644 src/components/Container/Container.css create mode 100644 src/components/Container/Container.js create mode 100644 src/components/CopyOnClick/CopyOnClick.css create mode 100644 src/components/CopyOnClick/CopyOnClick.js create mode 100644 src/components/Forms/Button/Button.css create mode 100644 src/components/Forms/Button/Button.js create mode 100644 src/components/Forms/Input/Input.css create mode 100644 src/components/Forms/Input/Input.js create mode 100644 src/components/Header/Header.css create mode 100644 src/components/Header/Header.js create mode 100644 src/components/SignatureCreator/SignatureCreator.css create mode 100644 src/components/SignatureCreator/SignatureCreator.js create mode 100644 src/components/SignatureCreator/SignatureForm/SignatureForm.js create mode 100644 src/components/SignatureCreator/SignaturePreview/SignaturePreview.css create mode 100644 src/components/SignatureCreator/SignaturePreview/SignaturePreview.js create mode 100644 src/index.css create mode 100644 src/index.js create mode 100644 src/logo.png create mode 100644 src/registerServiceWorker.js create mode 100644 src/scenes/Home/Home.css create mode 100644 src/scenes/Home/Home.js create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0b19cb8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local +.netlify + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md new file mode 100644 index 0000000..88550b8 --- /dev/null +++ b/README.md @@ -0,0 +1,57 @@ +# SDVI signature composer + +This is a signature composer built for SDVI. +An online version is available [here](https://sdvi-signature-composer.netlify.com/). + +## Requisites + +- Node.js v5 or superior + +## Getting started + +First, in order to clone the project you can run: + +```shell +$ git clone http://repo.or.cz/sdvi-signature-composer.git +``` + +Then enter into the project directory and install all dependencies. + +```shell +$ cd sdvi-signature-composer +$ npm install +``` + +That's it! now you can start playing with any of the available scripts + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](#running-tests) for more information. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](#deployment) for more information. + +## Deployment + +I'm using [Netlify](https://www.netlify.com/) to deploy the app, however the deployment +just consists of uploading the files under `build/` to a server. diff --git a/package.json b/package.json new file mode 100644 index 0000000..7184e34 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "sdvi-mail-signature", + "version": "1.0.0", + "private": true, + "dependencies": { + "clipboard": "^1.7.1", + "normalize.css": "^7.0.0", + "react": "^15.6.1", + "react-dom": "^15.6.1" + }, + "devDependencies": { + "react-scripts": "1.0.7" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..5e3c246790307b4971d2152c89cf4dd59adedef9 GIT binary patch literal 1150 zcwX&NJ1hiI6nzq%Miio?APNd98||oWFDKXa3vzD_r~x_sb}u9}ggU&<5jTf^)8=A$~fF=wUnb zKrbvM!22vU1TD}5J9fouTfcxF?1TBd0W)%l$VwSf4@+FDtXIQ)TEpvVC5+1{-XA*| zL3ptM#`!p}&G0_L%SEi~>3B8Ps~_r40}@x$yhq)sN8)yty->F5sK-gDyN$9RB}n=e ze6DuX1v`Gjyyowu=-|1sS&QV|JW`K7(yt-A3@B?=FkiM|YiEe~iV;5>Lv*i&J@D@2 zBp#veHPbmwq+O2W{Q`M3h*)Sy`W5V_yA1Prp1udK#xd^YH}l|Ha8hCJIdMG$>1#}; ms0Y{5;Uu4^x4Dm+3^M-%A-dlx@1NF83-I9i9`Thx{1R`jJjkX1 literal 0 HcwPel00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..fcf8f5d --- /dev/null +++ b/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + Signature composer + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..6fb1bc8 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "sdvi signature composer", + "name": "sdvi signature composer", + "icons": [ + { + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/components/Container/Container.css b/src/components/Container/Container.css new file mode 100644 index 0000000..c4813e8 --- /dev/null +++ b/src/components/Container/Container.css @@ -0,0 +1,11 @@ +.Container { + max-width: 50rem; + margin: 0 auto; + padding: 0 2rem; +} + +@media(min-width: 60rem) { + .Container { + padding: 0; + } +} diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js new file mode 100644 index 0000000..e9aaa5a --- /dev/null +++ b/src/components/Container/Container.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Container.css'; + +const Container = function({ children, className }) { + return ( +
+ {children} +
+ ); +} + +export default Container; diff --git a/src/components/CopyOnClick/CopyOnClick.css b/src/components/CopyOnClick/CopyOnClick.css new file mode 100644 index 0000000..f7caf54 --- /dev/null +++ b/src/components/CopyOnClick/CopyOnClick.css @@ -0,0 +1,4 @@ +.CopyOnClick-notification { + display: inline-block; + margin-left: 1rem; +} diff --git a/src/components/CopyOnClick/CopyOnClick.js b/src/components/CopyOnClick/CopyOnClick.js new file mode 100644 index 0000000..66464ad --- /dev/null +++ b/src/components/CopyOnClick/CopyOnClick.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import Clipboard from 'clipboard'; +import './CopyOnClick.css'; + +class CopyOnClick extends Component { + state = { + active: false + } + + componentDidMount() { + const { target } = this.props; + + this.clipboard = new Clipboard(this.button, { + target: () => document.querySelector(target) + }); + } + + componentWillUnmount() { + this.clipboard.destroy(); + } + + showTooltip = () => { + this.setState({ active: true }); + setTimeout(this.hideTooltip, 1000); + } + + hideTooltip = () => { + this.setState({ active: false }); + } + + render() { + const { children } = this.props; + let notification = ''; + + if (this.state.active) { + notification = Copied!; + } + + return ( +
this.button = element} onClick={this.showTooltip}> + {children} + {notification} +
+ ); + } +} + +export default CopyOnClick; diff --git a/src/components/Forms/Button/Button.css b/src/components/Forms/Button/Button.css new file mode 100644 index 0000000..526610f --- /dev/null +++ b/src/components/Forms/Button/Button.css @@ -0,0 +1,11 @@ +.Button { + border-color: #0d84fe; + background: #0d84fe; + color: white; + padding: 0.7rem 1.5rem; + transition: 0.33s; + cursor: pointer; + transform: scale(1); + transition: transform .3s ease; + text-transform: uppercase; +} diff --git a/src/components/Forms/Button/Button.js b/src/components/Forms/Button/Button.js new file mode 100644 index 0000000..f628184 --- /dev/null +++ b/src/components/Forms/Button/Button.js @@ -0,0 +1,10 @@ +import React from 'react'; +import './Button.css'; + +const Button = function({ text }) { + return ( + + ); +} + +export default Button; diff --git a/src/components/Forms/Input/Input.css b/src/components/Forms/Input/Input.css new file mode 100644 index 0000000..c714366 --- /dev/null +++ b/src/components/Forms/Input/Input.css @@ -0,0 +1,31 @@ +.Input-wrapper { + position: relative; + margin-bottom: 40px; +} + +.Input-label { + color: #9e9e9e; + position: absolute; + top: 0; + left: 0; + cursor: text; + pointer-events: none; + font-size: .8rem; +} + +.Input-input { + background-color: transparent; + border: none; + border-bottom: 1px solid #9e9e9e; + border-radius: 0; + outline: none; + height: 2.5rem; + width: 100%; + font-size: 1rem; + padding-top: 0.8rem; +} + +.Input-input:focus { + border-color: #0d84fe; + box-shadow: 0 1px 0 0 #0d84fe; +} diff --git a/src/components/Forms/Input/Input.js b/src/components/Forms/Input/Input.js new file mode 100644 index 0000000..d217d6e --- /dev/null +++ b/src/components/Forms/Input/Input.js @@ -0,0 +1,15 @@ +import React from 'react'; +import './Input.css'; + +const Input = function({ label, type, name, autoFocus, onChange }) { + let parsedName = name || label.toLowerCase(); + + return ( +
+ + +
+ ); +} + +export default Input; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 0000000..dcfe1ca --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,13 @@ +.Header-content { + height: 4rem; + line-height: 4rem; + margin: 2rem 0 2.5rem; + + border-bottom: 1px solid #d1d1d1; +} + +.Header-title { + margin: 0; + color: #2e2e2e; + text-transform: uppercase; +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 0000000..2f41d7a --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Header.css' + +const Header = function() { + return ( +
+

Signature composer

+
+ ); +} + +export default Header; diff --git a/src/components/SignatureCreator/SignatureCreator.css b/src/components/SignatureCreator/SignatureCreator.css new file mode 100644 index 0000000..f91504c --- /dev/null +++ b/src/components/SignatureCreator/SignatureCreator.css @@ -0,0 +1,23 @@ +.SignatureCreator { + display: flex; + flex-wrap: wrap; + margin-top: 3.5rem; +} + +.SignatureCreator-form { + width: 100%; + margin-top: 3rem; +} + +@media(min-width: 60rem) { + .SignatureCreator { + flex-wrap: nowrap; + justify-content: space-between; + align-items: flex-start; + } + + .SignatureCreator-form { + width: 50%; + margin-top: 0; + } +} diff --git a/src/components/SignatureCreator/SignatureCreator.js b/src/components/SignatureCreator/SignatureCreator.js new file mode 100644 index 0000000..bd07f02 --- /dev/null +++ b/src/components/SignatureCreator/SignatureCreator.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import SignaturePreview from './SignaturePreview/SignaturePreview'; +import SignatureForm from './SignatureForm/SignatureForm'; +import './SignatureCreator.css'; + +class SignatureCreator extends Component { + constructor(props) { + super(props); + + // Hard-coded initial state, hopefully some day... + this.state = { + name: 'Roberto Dip', + position: 'Front End Developer' + }; + } + + handleFormChange = (e) => { + const { name, value } = e.target; + + this.setState({...this.state, [name]: value }); + } + + handleFormSubmit = (e) => { + e.preventDefault(); + } + + render() { + return ( +
+ + +
+ ); + } +} + +export default SignatureCreator; diff --git a/src/components/SignatureCreator/SignatureForm/SignatureForm.js b/src/components/SignatureCreator/SignatureForm/SignatureForm.js new file mode 100644 index 0000000..42ec620 --- /dev/null +++ b/src/components/SignatureCreator/SignatureForm/SignatureForm.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Input from '../../Forms/Input/Input'; +import Button from '../../Forms/Button/Button'; +import CopyOnClick from '../../CopyOnClick/CopyOnClick'; + +const SignatureForm = function({ onChange, onSubmit, className }) { + return ( +
+ + + +