├── .dockerignore ├── .env.example ├── .gitignore ├── Dockerfile ├── README.md ├── docker-compose.yml ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── server.js ├── src ├── App.test.tsx ├── App.tsx ├── components │ ├── CheckboxField.tsx │ ├── ImageUploadField.tsx │ ├── InputField.tsx │ ├── SelectField.tsx │ └── TextArea.tsx ├── index.css ├── index.js ├── react-app-env.d.ts ├── reportWebVitals.js └── setupTests.js └── tsconfig.json /.dockerignore: -------------------------------------------------------------------------------- 1 | Dockerfile 2 | .dockerignore 3 | .git 4 | .gitignore 5 | .gitattributes 6 | README.md 7 | .npmrc 8 | .prettierrc 9 | .eslintrc.cjs 10 | .graphqlrc 11 | .editorconfig 12 | .svelte-kit 13 | .vscode 14 | node_modules 15 | build 16 | package 17 | cli 18 | **/.env 19 | .env.example 20 | k8s 21 | .github 22 | .yarn 23 | .env -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | PORT=3000 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | .env 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | ################### 2 | # DEPENDENCIES 3 | ################### 4 | 5 | FROM node:16-alpine As dependencies 6 | 7 | WORKDIR /usr/src/app 8 | 9 | COPY --chown=node:node package*.json ./ 10 | 11 | RUN apk add --update --no-cache \ 12 | make \ 13 | g++ \ 14 | jpeg-dev \ 15 | cairo-dev \ 16 | giflib-dev \ 17 | pango-dev \ 18 | libtool \ 19 | autoconf \ 20 | automake 21 | 22 | RUN npm install 23 | 24 | USER node 25 | 26 | ################### 27 | # BUILD 28 | ################### 29 | 30 | FROM node:16-alpine As build 31 | 32 | WORKDIR /usr/src/app 33 | 34 | COPY --chown=node:node --from=dependencies /usr/src/app/node_modules ./node_modules 35 | COPY --chown=node:node package*.json ./ 36 | 37 | COPY --chown=node:node src ./src 38 | COPY --chown=node:node public ./public 39 | COPY --chown=node:node tsconfig.json ./tsconfig.json 40 | 41 | RUN apk add --update --no-cache \ 42 | make \ 43 | g++ \ 44 | jpeg-dev \ 45 | cairo-dev \ 46 | giflib-dev \ 47 | pango-dev \ 48 | libtool \ 49 | autoconf \ 50 | automake 51 | 52 | RUN npm run build 53 | RUN npm install --omit=dev 54 | 55 | USER node 56 | 57 | ################### 58 | # PRODUCTION 59 | ################### 60 | 61 | FROM node:16-alpine As production 62 | 63 | WORKDIR /usr/src/app 64 | 65 | COPY --chown=node:node --from=build /usr/src/app/node_modules ./node_modules 66 | COPY --chown=node:node --from=build /usr/src/app/build ./build 67 | COPY --chown=node:node server.js ./server.js 68 | 69 | RUN apk add --no-cache bash 70 | 71 | CMD ["node", "server.js"] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QRCodeCustomizer 2 | 3 | Example project for react-qrcode-logo package. 4 | 5 | Built using create-react-app. 6 | 7 | ## running the example 8 | 9 | In the root folder of the project run 10 | 11 | `npm install --legacy-peer-deps` 12 | 13 | `npm start` 14 | 15 | The project will be reacheable in your browser at localhost:3000 16 | 17 | ## online demo 18 | 19 | Try it [here](https://gcoro.github.io/QRCodeCustomizer/) 20 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.3' 2 | networks: 3 | qrcode-customizer-network: 4 | name: qrcode-customizer-network 5 | ipam: 6 | driver: default 7 | services: 8 | qrcode-customizer: 9 | container_name: qrcode-customizer 10 | image: qrcode-customizer 11 | build: . 12 | env_file: .env 13 | ports: 14 | - '${PORT:-3000}:${PORT:-3000}' 15 | networks: 16 | - qrcode-customizer-network 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "https://gcoro.github.io/qrcode-customizer", 3 | "name": "qrcode-customizer", 4 | "version": "1.0.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "5.16.2", 8 | "@testing-library/react": "12.1.3", 9 | "@testing-library/user-event": "13.5.0", 10 | "@types/jest": "27.4.1", 11 | "@types/node": "17.0.21", 12 | "@types/react": "18.3.1", 13 | "@types/react-dom": "18.3.0", 14 | "react": "18.3.1", 15 | "react-dom": "18.3.1", 16 | "react-json-view": "1.21.3", 17 | "react-qrcode-logo": "3.0.0", 18 | "react-scripts": "5.0.0", 19 | "typescript": "5.4.5", 20 | "web-vitals": "4.0.1" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject", 27 | "predeploy": "npm run build", 28 | "deploy": "gh-pages -d build" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "devDependencies": { 49 | "gh-pages": "^6.1.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcoro/QRCodeCustomizer/287e781868df0e46b93a64eb82aa0921e101143d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | QR Code Customizer - a react-qrcode-logo example project 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcoro/QRCodeCustomizer/287e781868df0e46b93a64eb82aa0921e101143d/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gcoro/QRCodeCustomizer/287e781868df0e46b93a64eb82aa0921e101143d/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | //simple express server to run frontend production build; 2 | const express = require("express"); 3 | const path = require("path"); 4 | const dotenv = require('dotenv'); 5 | 6 | const app = express(); 7 | const envFound = dotenv.config(); 8 | const port = process.env.PORT || 3000; 9 | 10 | app.use(express.static(path.join(__dirname, "build"))); 11 | 12 | app.get("/*", function (req, res) { 13 | res.sendFile(path.join(__dirname, "build", "index.html")); 14 | }); 15 | 16 | app.listen(port, () => { 17 | console.log(` 18 | ################################################ 19 | 🛡️ Server listening on port: ${port} 🛡️ 20 | ################################################ 21 | `) 22 | }); -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import { render, screen } from '@testing-library/react'; 5 | 6 | it('renders without crashing', () => { 7 | const div = document.createElement('div'); 8 | ReactDOM.render(, div); 9 | ReactDOM.unmountComponentAtNode(div); 10 | }); 11 | 12 | test('renders learn react link', () => { 13 | render(); 14 | const linkElement = screen.getByText(/learn react/i); 15 | expect(linkElement).toBeInTheDocument(); 16 | }); -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { MutableRefObject, useRef, useState } from 'react'; 2 | import { InputField } from './components/InputField'; 3 | import { QRCode } from 'react-qrcode-logo'; 4 | import { SelectField } from './components/SelectField'; 5 | import { TextArea } from './components/TextArea'; 6 | import { ImageUploadField } from './components/ImageUploadField'; 7 | import { CheckboxField } from './components/CheckboxField'; 8 | import ReactJson from 'react-json-view'; 9 | 10 | const App: React.FC = () => { 11 | const [state, setState] = useState<{ [key: string]: any }>({}); 12 | const ref = useRef() 13 | 14 | const handleChange = ({ target }: any) => { 15 | setState(prevState => ({ ...prevState, [target.name]: target.value })) 16 | } 17 | 18 | const handleDownload = () => { 19 | ref.current?.download() 20 | } 21 | 22 | const buildEyeRadiusInput = (id: string) => { 23 | return 32 | }; 33 | 34 | return ( 35 |
36 |
37 |
38 |
39 |
40 |