From 7a4da5c08c122464ead4cca526ccfabf5bc205be Mon Sep 17 00:00:00 2001 From: Roberto Dip Date: Mon, 3 Jul 2017 16:09:21 -0300 Subject: [PATCH] Initial commit --- .gitignore | 22 + README.md | 57 + package.json | 30 + public/favicon.ico | Bin 0 -> 5430 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 | 13 + src/components/Forms/Button/Button.js | 12 + src/components/Forms/Input/Input.css | 31 + src/components/Forms/Input/Input.js | 23 + src/components/Header/Header.css | 13 + src/components/Header/Header.js | 12 + .../SignatureCreator/SignatureCreator.css | 23 + .../SignatureCreator/SignatureCreator.js | 41 + .../SignatureForm/SignatureForm.js | 18 + .../SignaturePreview/SignaturePreview.css | 28 + .../SignaturePreview/SignaturePreview.js | 26 + src/index.css | 31 + src/index.js | 9 + src/logo.png | Bin 0 -> 22287 bytes src/registerServiceWorker.js | 51 + src/scenes/Home/Home.css | 4 + src/scenes/Home/Home.js | 42 + yarn.lock | 6596 ++++++++++++++++++++ 28 files changed, 7212 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..f22c0e1 --- /dev/null +++ b/README.md @@ -0,0 +1,57 @@ +# Groove signature composer + +This is a signature composer built for Groove. +An online version is available [here](https://groove-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/groove-signature-composer.git +``` + +Then enter into the project directory and install all dependencies. + +```shell +$ cd groove-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..6b26854 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "groove-mail-signature", + "version": "1.0.0", + "private": true, + "dependencies": { + "clipboard": "^1.7.1", + "husky": "^0.14.2", + "lint-staged": "^4.0.0", + "normalize.css": "^7.0.0", + "prettier": "^1.5.2", + "react": "^15.6.1", + "react-dom": "^15.6.1" + }, + "devDependencies": { + "react-scripts": "1.0.10" + }, + "lint-staged": { + "src/**/*.{js,jsx,json,css}": [ + "prettier --single-quote --write", + "git add" + ] + }, + "scripts": { + "precommit": "lint-staged", + "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..d675a8ddcb909cac0d1dcf9d82cedcf1c41f6e65 GIT binary patch literal 5430 zcwX(8TWAz#6vx+A34IVEQi>0vzO;f5rT9?97yGC-S`m?At(8(Jh=LSNK}n*;R^ug! zx2=lU5VW;XbM+E8o9z9P`(}+M#=YOnZjwzJ*L7Kjum3Z{0yG0#9cA}M1lY3|EO3uUy<`+ zjLmypGCzvG2bDv&P4>xdqix)(>kqf7t-fzMx&liJ*u4W?hhq7p?+-`Y&E6j*Y*#^! zLbig8gA=ibMt7~)UTyK2TRTU%yPBumLz6p+@x}}J=QPxl~&05claslHf%x5TJiQtdCUivODv(3lb>H5cbUs%(G zwr}jK>j#5t?vxXE8a}|jbt)M$ZDc<10K&Lg1V2<1vG6d1&R!MRw@&s+q~3g{3tRH*Km)AbYiA4UDLVm$lh ze9Lf!nm;4Ql@i|nIL6^nncREjSQ2cCu}_ZiXM{SMP?RmC-gv0&3dqvnI4Y%px~opd@q#ErhLWzl!+0=LT&X^EItzW zRbO-+IQf}@UEcGA)gK=JgPT^<+2@?cuq)HQxwM-yY_Xz_DrU9&XYtXK#VP-Ud+JZI zM^QZL1pf7d0mtpKXbzXx(J7|CQJ0xJ$*tca$tRh*dNXT5bEn!S9uH!lq-V&n2x>x6 zny->%L-ogeoY%OM&EjiQJ-ifOYZ*#X{-)+0if7jgsy=NbA=pBI{hH2`mC7N5IS7P;v&Yzt-c z=?pRb?E4%x-;bx`E>$P#-R?l{(RqW$hi5h7_W;ag4XHE7W@r&uo3q)%8DL_#EQc>X zPe_UOwbWTDd>{8)Aj$KBAh1+YeA1ZxKo0+fH$R`wuc!l7T)$t4DPph4$L4du@_7z_ zCJ&!#59V%^V`lNo3-KL>UEE9G?04X$|6&fG)|$@pr~?IiAPN4JeC(j + + + + + + + + + + Signature composer + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..845bb60 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Groove signature composer", + "name": "Groove 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..4410bd2 --- /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..30cac50 --- /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..46f2cec --- /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..a7492cd --- /dev/null +++ b/src/components/Forms/Button/Button.css @@ -0,0 +1,13 @@ +.Button { + background-color: #31c08a; + border-radius: 4px; + padding: 10px 50px; + color: #fff; + text-transform: uppercase; + cursor: pointer; + padding: 0.75em 1em 0.6em; +} + +.Button:hover { + background-color: #3dcd97; +} diff --git a/src/components/Forms/Button/Button.js b/src/components/Forms/Button/Button.js new file mode 100644 index 0000000..4e03d52 --- /dev/null +++ b/src/components/Forms/Button/Button.js @@ -0,0 +1,12 @@ +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..6a2b0e4 --- /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: #12bfe4; + box-shadow: 0 1px 0 0 #12bfe4; +} diff --git a/src/components/Forms/Input/Input.js b/src/components/Forms/Input/Input.js new file mode 100644 index 0000000..32efc91 --- /dev/null +++ b/src/components/Forms/Input/Input.js @@ -0,0 +1,23 @@ +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..266bcb5 --- /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..752d488 --- /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..74aa060 --- /dev/null +++ b/src/components/SignatureCreator/SignatureCreator.js @@ -0,0 +1,41 @@ +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: 'Full Stack 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..7a20d7e --- /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 ( +
+ + + +