v4 (#11)

* refactor: full library refactor to fix 'no video input devices found' issue * chore: update storybook version and config. refactor qr reader story * feat: improve typings * chore: improve code * 4.0.0-0 * fix: fix possible issue with undefined or null stream * refactor: change to rely on decodeFromConstraints, add validations with better DX * feat: include missing props for facingMode * feat: improve stories * 4.0.0-1 * chore: minor changes * feat: change API to add support for customizing media constraints * 4.0.0-2 * feat: improve storybook sample Co-authored-by: Manuel Tuero <manuel.tuero@blackbox-vision.tech>
BlackBoxVision · Jun 23, 2021 · 48f0d3b · 48f0d3b
1 parent 450f49e
commit 48f0d3b
Show file tree

Hide file tree

Showing 13 changed files with 8,872 additions and 5,028 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,8 +1,6 @@
 {
   "presets": ["@babel/preset-typescript", "@babel/preset-react"],
   "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-optional-chaining"
   ]
 }
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,21 +1,14 @@
 module.exports = {
-  webpackFinal: config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-        },
-        {
-          loader: require.resolve('react-docgen-typescript-loader'),
-        },
-      ],
-    });
-
-    config.resolve.extensions.push('.ts', '.tsx');
-
-    return config;
+  stories: [`../stories/*.stories.tsx`],
+  addons: ['@storybook/addon-essentials'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
   },
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
 };
diff --git a/README.md b/README.md
@@ -41,15 +41,17 @@ You can install this library via NPM or YARN.
 ### NPM
 
 ```bash
-npm i @blackbox-vision/react-qr-reader @zxing/library
+npm i @blackbox-vision/react-qr-reader @zxing/browser @zxing/library
 ```
 
 ### YARN
 
 ```bash
-yarn add @blackbox-vision/react-qr-reader @zxing/library
+yarn add @blackbox-vision/react-qr-reader @zxing/browser @zxing/library
 ```
 
+// TODO: add info about polyfilling UserMedia API
+
 ## Example Usage
 
 After reading and performing the previous steps, you should be able to import the library and use it like in this example:
@@ -85,15 +87,15 @@ const Test = (props) => {
 
 The `QrReader` component has the following props:
 
-| Properties | Types                   | Default Value | Description                                                                                       |
-| ---------- | ----------------------- | ------------- | ------------------------------------------------------------------------------------------------- |
-| facingMode | `user` or `environment` | `environment` | Specify which camera should be used (if available).                                               |
-| onResult   | `function`              | none          | Scan event handler                                                                                |
-| videoId    | `string`                | `video`       | The ID for the video element                                                                      |
-| scanDelay  | `number`                | `500`         | The scan period for the QR hook                                                                   |
-| ViewFinder | component               | none          | ViewFinder component to rendering over the video element                                          |
-| style      | a valid React style     | none          | Styling for the container element. **Warning** The preview will always keep its 1:1 aspect ratio. |
-| className  | string                  | none          | ClassName for the container element.                                                              |
+| Properties  | Types                 | Default Value            | Description                                                                                       |
+| ----------- | --------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- |
+| constraints | MediaTrackConstraints | `{ facingMode: 'user' }` | Specify which camera should be used (if available).                                               |
+| onResult    | `function`            | none                     | Scan event handler                                                                                |
+| videoId     | `string`              | `video`                  | The ID for the video element                                                                      |
+| scanDelay   | `number`              | `500`                    | The scan period for the QR hook                                                                   |
+| ViewFinder  | component             | none                     | ViewFinder component to rendering over the video element                                          |
+| style       | a valid React style   | none                     | Styling for the container element. **Warning** The preview will always keep its 1:1 aspect ratio. |
+| className   | string                | none                     | ClassName for the container element.                                                              |
 
 ## Browser Support