From ca057359b19cebbed68583e1d2791e4dc229d3d9 Mon Sep 17 00:00:00 2001 From: Roberto Dip Date: Mon, 26 Jun 2017 12:04:13 -0300 Subject: [PATCH] Initial commit --- .gitignore | 21 + README.md | 58 + package.json | 20 + public/favicon.ico | Bin 0 -> 32038 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.jpg | Bin 0 -> 9481 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.jpg 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..d30f40e --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# 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 + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md new file mode 100644 index 0000000..da05ade --- /dev/null +++ b/README.md @@ -0,0 +1,58 @@ +# Waldo signature composer + +This is a signature composer built for waldo!. This project was bootstrapped +with [Create React App](https://github.com/facebookincubator/create-react-app). +An online version is available [here](https://waldo-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/waldo-signature-composer.git +``` + +Then enter into the project directory and install all dependencies. + +```shell +$ cd waldo-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..a67970f --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "waldo-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..bf156f1701637b1234098463fbac91d7a975218e GIT binary patch literal 32038 zcwX&2XP8vQvIF|$UK0qCHj_56yE8j8XL8sjEKxv|B!VC!ph!|cK)^*sL@^+Upa=*^ zMv{VLkR*tJB@A{=}MFke|LINr(4lSr%T3nunS#| zPJGWLOZVUM-|`gY-SoxjdSaYzim$A?4 z*mt~St@2PLIQ}n-WT{k4GR7GZ&YlSKd`Ta55bG7Jx3LDW!adf2+}9;+gX|Oh|36^Rm zkfaJSP0Pr*2gjD_@E5|?M=~cAkA%nF6kKm+35jmZ3P8)2M@ zuvUtM&z%(HcQ^LET}yAl<7IJf%-|T11MZ(TBg|JI^Wbe!58Q;z{WtDUrM~2Ty*n;} zd%=3Jzu5;YUcI10dN?mcuSXhWM8c~u1#$OCBzHCZ&hsr*1bdI};90g^z|XRM*k0)Xs27905TwDDd!+%sujhFW;dh+#npSX) zod(|Ben>)*TXkGA#<%uXpDqaE|;2 zdBGs&B{v`3)mlKBmc_NSBt-vU|JJ8#f%}JF3OC;bAFc`ayft8dYaqT`8`o|MAWsQ- znWn7aXdyFe+Q9Zw8*qO9HF#F<;W;i89guHGK3M9wbJKw2!5zv(lrImUEd5ZDb-Kdy z*2cAw-+veL69FdgzUz#)tz&zT?1@2Lrs&7Ksz$z({-8C^azz;@0DxGt_1Fs6nEvsZv6GeeaJvTXc|?1M;nQ$f4#afEBJR?efH39bp>2YJ4r%Jc9G zNVY_E9)yl82NsVWY;9VCBj-JEj+y|jaWldB)pv}ay=xb+HmEN2ykbYtyF>$b8hDoP z2(E>KXntHIbv50me`Wh{;{SB=hXMeLVc=uj|5PmBN|AiZo=aax( zwKT&|^3w6{2fTKKj@0OYL$Y4Oe!ZLj0@w7#VDH`?=UvuqDNpiR@T}e&S*I#%Z|7yO zb$&(AF1QY^kY83H?o!2vkxmOk_`bFi?T>we_K|RxE6H%@C!@gH^eM3S>II$^I|c0d z&7az@(DUBC*LmIBd%ubN@*MLC$&*Oqs(sNMpq|mL1DOXV{lFfIkk@cd|TK+hzrHYTD9{yR8 z86<=3-MfMJ_jB0y66QtnXGo@#Y!R|MnsqtJI!kRA*gCz8@@xutHXfJf;^y7quB8F5 zo12L9VU}yQ_HDtEZAY10MT|`_5GfpQ&V0(&aVSDKX#zmC_hUmEnZ>|^$ z#}o8Xrxd=YK1n8%PeZnDP=A-pM|TSyhV*4QPBskB#hvhe_}r8Igfh|b(dTU2DD$HD z!?|nF=O+5tI=;mAhgs%-d2SEl{Ke+NKO?pg{&p+Gug!=F@h|9U!m*82%Rq*v8pGPK z+(r74u5&Nma%VKq+H~{Ru@9`;2pU{z%upE0Fl-@k(AsAniPFk|t0d=g;ctj}U95eL zt*_~e`nMTl;i=kIc=^R=px5g!L!X`

wC_ph=@la9b-eOeT%pLGwWRgVs+_CKNye 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 + + + + + + + + + + Signature composer + + + +

+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..ada60a1 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "waldo signature composer", + "name": "waldo 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 ( +
+ + + +