Create ErrorCorrectionLevel type and wire through

Closes #291

Note: updated from original to remove wiring through. Not relevant with
removal of generic component. Encourage using React utility types
instead.

Co-authored-by: Paul O’Shannessy <[email protected]>

Author: SDrinkwater

examples/full.tsx

@@ -1,5 +1,8 @@
 import {QRCodeSVG, QRCodeCanvas} from '..';
 import React, {useState} from 'react';
+import type {ComponentProps} from 'react';
+
+type ErrorCorrectionLevel = ComponentProps<typeof QRCodeSVG>['level'];
 
 function FullDemo() {
   const [value, setValue] = useState(
@@ -8,7 +11,7 @@ function FullDemo() {
   const [size, setSize] = useState(128);
   const [fgColor, setFgColor] = useState('#000000');
   const [bgColor, setBgColor] = useState('#ffffff');
-  const [level, setLevel] = useState('L');
+  const [level, setLevel] = useState<ErrorCorrectionLevel>('L');
   const [minVersion, setMinVersion] = useState(1);
   const [marginSize, setMarginSize] = useState(0);
   const [title, setTitle] = useState('Title for my QR Code');
@@ -118,7 +121,9 @@ function FullDemo() {
           <label>
             Error Level:
             <br />
-            <select onChange={(e) => setLevel(e.target.value)} value={level}>
+            <select
+              onChange={(e) => setLevel(e.target.value as ErrorCorrectionLevel)}
+              value={level}>
               <option value="L">L</option>
               <option value="M">M</option>
               <option value="Q">Q</option>

src/__test__/index.test.tsx

@@ -3,7 +3,27 @@ import renderer from 'react-test-renderer';
 import {QRCodeSVG, QRCodeCanvas} from '..';
 import {describe, expect, test} from '@jest/globals';
 
-const BASIC_PROPS = {
+import type {ComponentPropsWithoutRef} from 'react';
+
+// We're only using the explicit (non-DOM, non-ref) props for testing, but TS
+// doesn't love us passing our test data as props without actually typing the
+// object. So we'll make sure we give types that work. It's a little messy but
+// gets the job done without being too fancy.
+// Specifically, get the DOM-specific keys and omit them from the also-de-ref'ed
+// component props. Then union together the two types since they may not always
+// be the same.
+type QRCodeCanvasProps = Omit<
+  ComponentPropsWithoutRef<typeof QRCodeCanvas>,
+  keyof React.CanvasHTMLAttributes<HTMLCanvasElement>
+>;
+type QRCodeSVGProps = Omit<
+  ComponentPropsWithoutRef<typeof QRCodeSVG>,
+  keyof React.SVGProps<SVGSVGElement>
+>;
+type QRProps = QRCodeCanvasProps | QRCodeSVGProps;
+type PartialQRProps = Partial<QRCodeCanvasProps> | Partial<QRCodeSVGProps>;
+
+const BASIC_PROPS: QRProps = {
   value: 'http://picturesofpeoplescanningqrcodes.tumblr.com/',
   size: 128,
   bgColor: '#ffffff',
@@ -12,7 +32,7 @@ const BASIC_PROPS = {
   includeMargin: false,
 };
 
-const TEST_CONFIGS = [
+const TEST_CONFIGS: PartialQRProps[] = [
   {includeMargin: true},
   {includeMargin: false},
   {level: 'L'},

src/index.tsx

@@ -10,6 +10,7 @@ import qrcodegen from './third-party/qrcodegen';
 
 type Modules = ReturnType<qrcodegen.QrCode['getModules']>;
 type Excavation = {x: number; y: number; w: number; h: number};
+type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
 
 const ERROR_LEVEL_MAP: {[index: string]: qrcodegen.QrCode.Ecc} = {
   L: qrcodegen.QrCode.Ecc.LOW,
@@ -31,8 +32,7 @@ type ImageSettings = {
 type QRProps = {
   value: string;
   size?: number;
-  // Should be a real enum, but doesn't seem to be compatible with real code.
-  level?: string;
+  level?: ErrorCorrectionLevel;
   bgColor?: string;
   fgColor?: string;
   style?: CSSProperties;
@@ -46,7 +46,7 @@ type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
 type QRPropsSVG = QRProps & React.SVGAttributes<SVGSVGElement>;
 
 const DEFAULT_SIZE = 128;
-const DEFAULT_LEVEL = 'L';
+const DEFAULT_LEVEL: ErrorCorrectionLevel = 'L';
 const DEFAULT_BGCOLOR = '#FFFFFF';
 const DEFAULT_FGCOLOR = '#000000';
 const DEFAULT_INCLUDEMARGIN = false;