├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── .scripts ├── get_gh_pages_url.js ├── mocha_runner.js ├── prepublish.sh ├── publish_storybook.sh └── user │ ├── prepublish.sh │ └── pretest.js ├── .storybook ├── addons.js └── config.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package.json └── src ├── index.js ├── stories ├── index.js └── public │ └── kedicik.jpg └── tests └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-app"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules": { 4 | # We use _ to define private variables and methods in clases 5 | "no-underscore-dangle": 0, 6 | # This seems to be buggy we don't want eslint to check this 7 | "import/no-extraneous-dependencies": 0, 8 | # This is a depricated rule. So we turned off it. 9 | "react/require-extension": 0, 10 | # We can write JSX in anyfile we want. 11 | "react/jsx-filename-extension": 0, 12 | # We don't like this rule. 13 | "arrow-body-style": 0, 14 | # We don't like this rule. We write arrow functions only when we needed. 15 | "prefer-arrow-callback": 0, 16 | # We don't need to write function names always. 17 | "func-names": 0, 18 | # propTypes can be object 19 | "react/forbid-prop-types": 0, 20 | "react/prefer-stateless-function": 0 21 | }, 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .idea 4 | dist 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .babelrc 3 | -------------------------------------------------------------------------------- /.scripts/get_gh_pages_url.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | 6 | const parse = require('git-url-parse'); 7 | var ghUrl = process.argv[2]; 8 | const parsedUrl = parse(ghUrl); 9 | 10 | const ghPagesUrl = 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name; 11 | console.log(ghPagesUrl); 12 | -------------------------------------------------------------------------------- /.scripts/mocha_runner.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | // Use `.scripts/user/pretest.js instead`. 6 | 7 | process.env.NODE_ENV = 'development'; 8 | require('babel-core/register'); 9 | require('babel-polyfill'); 10 | 11 | // Add jsdom support, which is required for enzyme. 12 | var jsdom = require('jsdom').jsdom; 13 | 14 | var exposedProperties = ['window', 'navigator', 'document']; 15 | 16 | global.document = jsdom(''); 17 | global.window = document.defaultView; 18 | Object.keys(document.defaultView).forEach((property) => { 19 | if (typeof global[property] === 'undefined') { 20 | exposedProperties.push(property); 21 | global[property] = document.defaultView[property]; 22 | } 23 | }); 24 | 25 | global.navigator = { 26 | userAgent: 'node.js' 27 | }; 28 | 29 | process.on('unhandledRejection', function (error) { 30 | console.error('Unhandled Promise Rejection:'); 31 | console.error(error && error.stack || error); 32 | }); 33 | 34 | require('./user/pretest.js'); 35 | -------------------------------------------------------------------------------- /.scripts/prepublish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # IMPORTANT 4 | # --------- 5 | # This is an auto generated file with React CDK. 6 | # Do not modify this file. 7 | # Use `.scripts/user/prepublish.sh instead`. 8 | 9 | echo "=> Transpiling 'src' into ES5 ..." 10 | echo "" 11 | rm -rf ./dist 12 | NODE_ENV=production ./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" ./src --out-dir ./dist 13 | echo "" 14 | echo "=> Transpiling completed." 15 | 16 | . .scripts/user/prepublish.sh 17 | -------------------------------------------------------------------------------- /.scripts/publish_storybook.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # IMPORTANT 4 | # --------- 5 | # This is an auto generated file with React CDK. 6 | # Do not modify this file. 7 | 8 | set -e # exit with nonzero exit code if anything fails 9 | 10 | # get GIT url 11 | 12 | GIT_URL=`git config --get remote.origin.url` 13 | if [[ $GIT_URL == "" ]]; then 14 | echo "This project is not configured with a remote git repo". 15 | exit 1 16 | fi 17 | 18 | # clear and re-create the out directory 19 | rm -rf .out || exit 0; 20 | mkdir .out; 21 | 22 | # run our compile script, discussed above 23 | build-storybook -s src/stories/public -o .out 24 | 25 | # go to the out directory and create a *new* Git repo 26 | cd .out 27 | git init 28 | 29 | # inside this git repo we'll pretend to be a new user 30 | git config user.name "GH Pages Bot" 31 | git config user.email "hello@ghbot.com" 32 | 33 | # The first and only commit to this new Git repo contains all the 34 | # files present with the commit message "Deploy to GitHub Pages". 35 | git add . 36 | git commit -m "Deploy Storybook to GitHub Pages" 37 | 38 | # Force push from the current repo's master branch to the remote 39 | # repo's gh-pages branch. (All previous history on the gh-pages branch 40 | # will be lost, since we are overwriting it.) We redirect any output to 41 | # /dev/null to hide any sensitive credential data that might otherwise be exposed. 42 | git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1 43 | cd .. 44 | rm -rf .out 45 | 46 | echo "" 47 | echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`" 48 | -------------------------------------------------------------------------------- /.scripts/user/prepublish.sh: -------------------------------------------------------------------------------- 1 | # Use this file to your own code to run at NPM `prepublish` event. 2 | -------------------------------------------------------------------------------- /.scripts/user/pretest.js: -------------------------------------------------------------------------------- 1 | // Use this file to setup any test utilities. 2 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | // To get our default addons (actions and links) 2 | import '@kadira/storybook/addons'; 3 | // To add the knobs addon 4 | import '@kadira/storybook-addon-knobs/register'; 5 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | 6 | import { configure } from '@kadira/storybook'; 7 | 8 | function loadStories() { 9 | require('../src/stories'); 10 | } 11 | 12 | configure(loadStories, module); 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Qart Component 2 | 3 | We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. 4 | 5 | ## Development Setup 6 | 7 | This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Your Name. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-qart 2 | 3 | This is a simple implementation of [QArt](https://github.com/kciter/qart.js) as React Component. You can visit the [demo](https://batuhank.github.io/react-qart/). 4 | 5 | 6 | ## Usage 7 | 8 | First of all install react-qart via npm or yarn 9 | 10 | ```bash 11 | npm install react-qart 12 | ``` 13 | 14 | or 15 | 16 | ```bash 17 | yarn add react-qart 18 | ``` 19 | 20 | Now you can use it in your React or Preact project(with preact-compat). 21 | 22 | ```javascript 23 | 24 | import React, { Component} from 'react'; 25 | import QArt from 'react-qart'; 26 | 27 | export default class App extends Component { 28 | render() { 29 | return ( 30 |
31 |

merhaba

32 | 37 |
38 | ) 39 | } 40 | } 41 | 42 | ``` 43 | ![result](http://imgim.com/screenshot2017-01-29at023722.png) 44 | 45 | ### Props 46 | |Field|Type|Description|Default| 47 | |-----|----|-----------|-------| 48 | |value|String|The data of the QR code.|*Required*| 49 | |imagePath|String|Self hosted image url or relative path to image url|*Required*| 50 | |filter|String|Define an image filter. `threshold` or `color`|threshold| 51 | 52 | 53 | ### Limitations 54 | 55 | * You must use relative path of an image 56 | * You cannot change the size of the generated qr 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-qart", 3 | "version": "0.1.2", 4 | "description": "React Qart Component", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/BatuhanK/react-qart" 8 | }, 9 | "license": "MIT", 10 | "scripts": { 11 | "prepublish": ". ./.scripts/prepublish.sh", 12 | "lint": "eslint src", 13 | "lintfix": "eslint src --fix", 14 | "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js", 15 | "test": "npm run lint && npm run testonly", 16 | "test-watch": "npm run testonly -- --watch --watch-extensions js", 17 | "storybook": "start-storybook -s src/stories/public -p 9010", 18 | "publish-storybook": "bash .scripts/publish_storybook.sh" 19 | }, 20 | "devDependencies": { 21 | "@kadira/storybook": "^2.18.1", 22 | "@kadira/storybook-addon-knobs": "^1.7.1", 23 | "babel-cli": "^6.14.0", 24 | "babel-core": "^6.14.0", 25 | "babel-eslint": "^6.1.2", 26 | "babel-loader": "^6.2.5", 27 | "babel-plugin-transform-runtime": "^6.15.0", 28 | "babel-polyfill": "^6.13.0", 29 | "babel-preset-react-app": "^0.2.1", 30 | "chai": "^3.5.0", 31 | "enzyme": "^2.2.0", 32 | "eslint": "^3.6.0", 33 | "eslint-config-airbnb": "^12.0.0", 34 | "eslint-plugin-import": "^1.16.0", 35 | "eslint-plugin-jsx-a11y": "^2.2.2", 36 | "eslint-plugin-react": "^6.3.0", 37 | "git-url-parse": "^6.0.1", 38 | "jsdom": "^9.5.0", 39 | "mocha": "^3.0.2", 40 | "react": "^15.3.2", 41 | "react-addons-test-utils": "^15.3.2", 42 | "react-dom": "^15.3.2", 43 | "sinon": "^1.17.6" 44 | }, 45 | "peerDependencies": { 46 | "react": "^0.14.7 || ^15.0.0" 47 | }, 48 | "dependencies": { 49 | "babel-runtime": "^6.11.6", 50 | "qartjs": "^1.0.2" 51 | }, 52 | "main": "dist/index.js", 53 | "engines": { 54 | "npm": "^3.0.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import QArt from 'qartjs'; 3 | 4 | 5 | let getDOMNode; 6 | const version = React.version.split(/[.-]/); 7 | if (version[0] === '0' && (version[1] === '13' || version[1] === '12')) { 8 | getDOMNode = ref => ref.getDOMNode(); 9 | } else { 10 | getDOMNode = ref => ref; 11 | } 12 | 13 | 14 | class Qart extends Component { 15 | 16 | componentDidMount() { 17 | this.update(); 18 | } 19 | 20 | shouldComponentUpdate(nextProps) { 21 | return Object.keys(Qart.propTypes).some(k => this.props[k] !== nextProps[k]); 22 | } 23 | 24 | componentDidUpdate() { 25 | this.update(); 26 | } 27 | 28 | update() { 29 | const qart = new QArt({ 30 | value: this.props.value, 31 | imagePath: this.props.imagePath, 32 | filter: this.props.filter, 33 | }); 34 | qart.make(this.renderElement); 35 | } 36 | 37 | render() { 38 | return ( 39 |
{ 41 | if (e) { 42 | this.renderElement = getDOMNode(e); 43 | } 44 | }} 45 | /> 46 | ); 47 | } 48 | } 49 | 50 | Qart.defaultProps = { 51 | filter: 'threshold', 52 | }; 53 | 54 | Qart.propTypes = { 55 | value: React.PropTypes.string.isRequired, 56 | imagePath: React.PropTypes.string.isRequired, 57 | filter: React.PropTypes.string, 58 | style: React.PropTypes.object, 59 | }; 60 | 61 | export default Qart; 62 | -------------------------------------------------------------------------------- /src/stories/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@kadira/storybook'; 3 | import { withKnobs, text, select } from '@kadira/storybook-addon-knobs'; 4 | 5 | import Qart from '../index'; 6 | 7 | const stories = storiesOf('Qart', module); 8 | stories.addDecorator(withKnobs); 9 | 10 | stories 11 | .add('kitten qr with default filter(threshold)', () => ( 12 | 16 | )) 17 | .add('kitten qr with color filter', () => ( 18 | 23 | )) 24 | .add('custom kitten', () => { 25 | const value = text('value', "I'm a kitten"); 26 | const filter = select('filter', { 27 | color: 'color', 28 | threshold: 'threshold', 29 | }, 'color'); 30 | return ( 31 | 36 | ); 37 | }); 38 | -------------------------------------------------------------------------------- /src/stories/public/kedicik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BatuhanK/react-qart/1d4b97758e7eddff89f897e0f347cc2fb3cc80a5/src/stories/public/kedicik.jpg -------------------------------------------------------------------------------- /src/tests/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow, mount } from 'enzyme'; 3 | import { expect } from 'chai'; 4 | import sinon from 'sinon'; 5 | import Qart from '../index'; 6 | 7 | const { describe, it } = global; 8 | 9 | describe('Button', () => { 10 | it('should render a div', () => { 11 | const wrapper = shallow(); 12 | expect(wrapper.find('div')).to.have.length(1); 13 | }); 14 | it('should render a canvas', () => { 15 | const wrapper = mount(); 16 | expect(wrapper.find('canvas')).to.have.length(1); 17 | }); 18 | }); 19 | --------------------------------------------------------------------------------