commit df42db3b95774fdc80c884a35d51a956129a5629 Author: Francisco Hodge Date: Fri Apr 20 16:34:02 2018 -0400 ES6 initial setup diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..04da4cc1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# production +/build +/demo + +# testing +/coverage + +# 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/.npmignore b/.npmignore new file mode 100644 index 00000000..69227a14 --- /dev/null +++ b/.npmignore @@ -0,0 +1,25 @@ +# dependencies +/node_modules + +# testing +/coverage + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Development folders and files +public +src +scripts +config +.travis.yml +CHANGELOG.md +README.md diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..24d2ef6e --- /dev/null +++ b/.travis.yml @@ -0,0 +1,5 @@ +language: node_js +node_js: + - "node" +script: + - npm run test diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..be0f0f3a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Francisco Hodge + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 00000000..0587a442 --- /dev/null +++ b/README.md @@ -0,0 +1,175 @@ +# simple-keyboard + +[![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard) + + +> An easily customisable and responsive on-screen virtual keyboard for Javascript projects. +> Want the React.js version? Get [https://www.npmjs.com/package/react-simple-keyboard](react-simple-keyboard) instead! + + + +[Live Demo](https://franciscohodge.com/simple-keyboard/demo) + + +## Installation + +`npm install simple-keyboard --save` + +## Usage + +### js + +````js +import Keyboard from 'simple-keyboard'; +import 'simple-keyboard/build/css/index.css'; + +var keyboard = new Keyboard({ + onChange: input => this.onChange(input), + onKeyPress: button => this.onKeyPress(button) +}); +```` + +### html + +````html +
+```` + +> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js). + +## Options + +You can customize the Keyboard by passing options to it. +Here are the available options (the code examples are the defaults): + +### layout + +> Modify the keyboard layout + +```js +layout: { + 'default': [ + '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}', + '{tab} q w e r t y u i o p [ ] \\', + '{lock} a s d f g h j k l ; \' {enter}', + '{shift} z x c v b n m , . / {shift}', + '.com @ {space}' + ], + 'shift': [ + '~ ! @ # $ % ^ & * ( ) _ + {bksp}', + '{tab} Q W E R T Y U I O P { } |', + '{lock} A S D F G H J K L : " {enter}', + '{shift} Z X C V B N M < > ? {shift}', + '.com @ {space}' + ] +} +``` + +### layoutName + +> Specifies which layout should be used. + +```js +layoutName: "default" +``` + +### display + +> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete"). + +```js +display: { + '{bksp}': 'delete', + '{enter}': '< enter', + '{shift}': 'shift', + '{s}': 'shift', + '{tab}': 'tab', + '{lock}': 'caps', + '{accept}': 'Submit', + '{space}': ' ', + '{//}': ' ' +} +``` + +### theme + +> A prop to add your own css classes. You can add multiple classes separated by a space. + +```js +theme: "hg-theme-default" +``` + +### debug + +> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input. + +```js +debug: false +``` + +### newLineOnEnter + +> Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not. + +```js +newLineOnEnter: false +``` + +## Methods + +simple-keybord has a few methods you can use to further control it's behavior. +To access these functions, you need the instance the simple-keyboard component, like so: + +```js +var keyboard = new Keyboard({ + ... +}); +/> + +// Then, use as follows... +keyboard.methodName(params); +``` + +### clearInput + +> Clear the keyboard's input. + +```js +keyboard.clearInput(); +``` + +### getInput + +> Get the keyboard's input (You can also get it from the _onChange_ prop). + +```js +let input = keyboard.getInput(); +``` + +### setInput + +> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example. + +```js +keyboard.setInput("Hello World!"); +``` + +## Demo + + + +### Live demo + +[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo) + +### To run demo on your own computer + +* Clone this repository +* `npm install` +* `npm start` +* Visit [http://localhost:3000/](http://localhost:3000/) + +## Note + +This is a work in progress. Feel free to submit any issues you have at: +[https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues) diff --git a/config/env.js b/config/env.js new file mode 100644 index 00000000..8b39b6c6 --- /dev/null +++ b/config/env.js @@ -0,0 +1,90 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const paths = require('./paths'); + +// Make sure that including paths.js after env.js will read .env variables. +delete require.cache[require.resolve('./paths')]; + +const NODE_ENV = process.env.NODE_ENV; +if (!NODE_ENV) { + throw new Error( + 'The NODE_ENV environment variable is required but was not specified.' + ); +} + +// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use +var dotenvFiles = [ + `${paths.dotenv}.${NODE_ENV}.local`, + `${paths.dotenv}.${NODE_ENV}`, + // Don't include `.env.local` for `test` environment + // since normally you expect tests to produce the same + // results for everyone + NODE_ENV !== 'test' && `${paths.dotenv}.local`, + paths.dotenv, +].filter(Boolean); + +// Load environment variables from .env* files. Suppress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. +// https://github.com/motdotla/dotenv +dotenvFiles.forEach(dotenvFile => { + if (fs.existsSync(dotenvFile)) { + require('dotenv').config({ + path: dotenvFile, + }); + } +}); + +// We support resolving modules according to `NODE_PATH`. +// This lets you use absolute paths in imports inside large monorepos: +// https://github.com/facebookincubator/create-react-app/issues/253. +// It works similar to `NODE_PATH` in Node itself: +// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders +// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. +// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. +// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 +// We also resolve them to make sure all tools using them work consistently. +const appDirectory = fs.realpathSync(process.cwd()); +process.env.NODE_PATH = (process.env.NODE_PATH || '') + .split(path.delimiter) + .filter(folder => folder && !path.isAbsolute(folder)) + .map(folder => path.resolve(appDirectory, folder)) + .join(path.delimiter); + +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be +// injected into the application via DefinePlugin in Webpack configuration. +const REACT_APP = /^REACT_APP_/i; + +function getClientEnvironment(publicUrl) { + const raw = Object.keys(process.env) + .filter(key => REACT_APP.test(key)) + .reduce( + (env, key) => { + env[key] = process.env[key]; + return env; + }, + { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + NODE_ENV: process.env.NODE_ENV || 'development', + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + PUBLIC_URL: publicUrl, + } + ); + // Stringify all values so we can feed into Webpack DefinePlugin + const stringified = { + 'process.env': Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}), + }; + + return { raw, stringified }; +} + +module.exports = getClientEnvironment; diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js new file mode 100644 index 00000000..f1534f6f --- /dev/null +++ b/config/jest/cssTransform.js @@ -0,0 +1,14 @@ +'use strict'; + +// This is a custom Jest transformer turning style imports into empty objects. +// http://facebook.github.io/jest/docs/tutorial-webpack.html + +module.exports = { + process() { + return 'module.exports = {};'; + }, + getCacheKey() { + // The output is always the same. + return 'cssTransform'; + }, +}; diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js new file mode 100644 index 00000000..ffce0da2 --- /dev/null +++ b/config/jest/fileTransform.js @@ -0,0 +1,12 @@ +'use strict'; + +const path = require('path'); + +// This is a custom Jest transformer turning file imports into filenames. +// http://facebook.github.io/jest/docs/tutorial-webpack.html + +module.exports = { + process(src, filename) { + return `module.exports = ${JSON.stringify(path.basename(filename))};`; + }, +}; diff --git a/config/paths.js b/config/paths.js new file mode 100644 index 00000000..b5ebb1d9 --- /dev/null +++ b/config/paths.js @@ -0,0 +1,64 @@ +'use strict'; + +const path = require('path'); +const fs = require('fs'); +const url = require('url'); + +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebookincubator/create-react-app/issues/637 +const appDirectory = fs.realpathSync(process.cwd()); +const resolveApp = relativePath => path.resolve(appDirectory, relativePath); + +const envPublicUrl = process.env.PUBLIC_URL; + +function ensureSlash(path, needsSlash) { + const hasSlash = path.endsWith('/'); + if (hasSlash && !needsSlash) { + return path.substr(path, path.length - 1); + } else if (!hasSlash && needsSlash) { + return `${path}/`; + } else { + return path; + } +} + +const getPublicUrl = appPackageJson => + envPublicUrl || require(appPackageJson).homepage; + +// We use `PUBLIC_URL` environment variable or "homepage" field to infer +// "public path" at which the app is served. +// Webpack needs to know it to put the right