diff --git a/packages/kitchen-sink/package.json b/packages/kitchen-sink/package.json index c844c06f5a..737e7d35a2 100644 --- a/packages/kitchen-sink/package.json +++ b/packages/kitchen-sink/package.json @@ -24,6 +24,7 @@ "react-dom": "^18.2.0", "react-error-boundary": "^4.0.11", "react-icons": "^4.11.0", + "react-qr-code": "^2.0.12", "react-redux": "^8.1.3", "react-router-dom": "^6.15.0", "styled-components": "^6.0.7", diff --git a/packages/kitchen-sink/src/examples/qr-code-generator.tsx b/packages/kitchen-sink/src/examples/qr-code-generator.tsx new file mode 100644 index 0000000000..4df3d72cc2 --- /dev/null +++ b/packages/kitchen-sink/src/examples/qr-code-generator.tsx @@ -0,0 +1,38 @@ +import { block } from 'million/react'; +import { useState, useRef } from 'react'; +import QRCode from 'react-qr-code'; + +const QRCodeGenerator = block(() => { + const [data, setData] = useState(null); + const inputRef = useRef(null); + return ( +
+

QR Code Generator

+
+ + +
+ {data && ( +
+ +
+ )} +
+ ); +}); + +export default QRCodeGenerator; diff --git a/packages/kitchen-sink/src/style.css b/packages/kitchen-sink/src/style.css index c6be0388c7..b96e12bb10 100644 --- a/packages/kitchen-sink/src/style.css +++ b/packages/kitchen-sink/src/style.css @@ -135,4 +135,12 @@ input[type="range"] { } } -/* */ \ No newline at end of file +/* */ + +/* QR code styles */ +.qr-code-wrapper { + display: inline-flex; + background: white; + margin-top: 2rem; + padding: 1rem; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d252d59f4..ec3fa8cc7c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: @@ -214,6 +210,9 @@ importers: react-icons: specifier: ^4.11.0 version: 4.11.0(react@18.2.0) + react-qr-code: + specifier: ^2.0.12 + version: 2.0.12(react@18.2.0) react-redux: specifier: ^8.1.3 version: 8.1.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1) @@ -3662,7 +3661,7 @@ packages: eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.25.4) eslint-import-resolver-typescript: 2.7.0(eslint-plugin-import@2.25.4)(eslint@8.34.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.34.0) - eslint-plugin-import: 2.25.4(@typescript-eslint/parser@5.53.0)(eslint@8.34.0) + eslint-plugin-import: 2.25.4(@typescript-eslint/parser@5.17.0)(eslint-import-resolver-typescript@2.7.0)(eslint@8.34.0) eslint-plugin-jest: 26.1.3(@typescript-eslint/eslint-plugin@5.17.0)(eslint@8.34.0)(typescript@5.1.6) eslint-plugin-jsx-a11y: 6.5.1(eslint@8.34.0) eslint-plugin-react: 7.29.4(eslint@8.34.0) @@ -5501,7 +5500,7 @@ packages: peerDependencies: eslint-plugin-import: '>=1.4.0' dependencies: - eslint-plugin-import: 2.25.4(@typescript-eslint/parser@5.53.0)(eslint@8.34.0) + eslint-plugin-import: 2.25.4(@typescript-eslint/parser@5.17.0)(eslint-import-resolver-typescript@2.7.0)(eslint@8.34.0) dev: true /eslint-import-resolver-node@0.3.9: @@ -5523,7 +5522,7 @@ packages: dependencies: debug: 4.3.4 eslint: 8.34.0 - eslint-plugin-import: 2.25.4(@typescript-eslint/parser@5.53.0)(eslint@8.34.0) + eslint-plugin-import: 2.25.4(@typescript-eslint/parser@5.17.0)(eslint-import-resolver-typescript@2.7.0)(eslint@8.34.0) glob: 7.2.3 is-glob: 4.0.3 resolve: 1.22.4 @@ -5532,7 +5531,7 @@ packages: - supports-color dev: true - /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.53.0)(eslint-import-resolver-node@0.3.9)(eslint@8.34.0): + /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.17.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.0)(eslint@8.34.0): resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} engines: {node: '>=4'} peerDependencies: @@ -5553,10 +5552,11 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.53.0(eslint@8.34.0)(typescript@5.1.6) + '@typescript-eslint/parser': 5.17.0(eslint@8.34.0)(typescript@5.1.6) debug: 3.2.7 eslint: 8.34.0 eslint-import-resolver-node: 0.3.9 + eslint-import-resolver-typescript: 2.7.0(eslint-plugin-import@2.25.4)(eslint@8.34.0) transitivePeerDependencies: - supports-color dev: true @@ -5572,7 +5572,7 @@ packages: ignore: 5.2.4 dev: true - /eslint-plugin-import@2.25.4(@typescript-eslint/parser@5.53.0)(eslint@8.34.0): + /eslint-plugin-import@2.25.4(@typescript-eslint/parser@5.17.0)(eslint-import-resolver-typescript@2.7.0)(eslint@8.34.0): resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==} engines: {node: '>=4'} peerDependencies: @@ -5582,14 +5582,14 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.53.0(eslint@8.34.0)(typescript@5.1.6) + '@typescript-eslint/parser': 5.17.0(eslint@8.34.0)(typescript@5.1.6) array-includes: 3.1.6 array.prototype.flat: 1.3.1 debug: 2.6.9 doctrine: 2.1.0 eslint: 8.34.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.53.0)(eslint-import-resolver-node@0.3.9)(eslint@8.34.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.17.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.0)(eslint@8.34.0) has: 1.0.3 is-core-module: 2.13.0 is-glob: 4.0.3 @@ -8832,6 +8832,10 @@ packages: engines: {node: '>=6'} dev: true + /qr.js@0.0.0: + resolution: {integrity: sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==} + dev: false + /querystringify@2.2.0: resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} dev: true @@ -8986,6 +8990,20 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-qr-code@2.0.12(react@18.2.0): + resolution: {integrity: sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==} + peerDependencies: + react: ^16.x || ^17.x || ^18.x + react-native-svg: '*' + peerDependenciesMeta: + react-native-svg: + optional: true + dependencies: + prop-types: 15.8.1 + qr.js: 0.0.0 + react: 18.2.0 + dev: false + /react-redux@8.1.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1): resolution: {integrity: sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==} peerDependencies: @@ -10972,3 +10990,7 @@ packages: /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} dev: false + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false