docs: storybook update

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.js

@@ -1,4 +1,12 @@
-module.exports = {
-    stories: ['../story.js'],
-    addons: ['@storybook/addon-actions/register']
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
 }

.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package.json

@@ -12,35 +12,42 @@
     "dev": "rollup -c -w",
     "test": "node test/test.js",
     "pretest": "npm run build",
-    "storybook": "start-storybook -p 9001",
-    "storybook:export": "build-storybook -c .storybook -o ./docs",
     "lint": "eslint ./src",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
+    "@babel/core": "^7.18.13",
     "@babel/plugin-transform-runtime": "^7.16.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-actions": "^6.4.13",
-    "@storybook/cli": "^6.4.13",
-    "@storybook/react": "^6.4.13",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
     "eslint": "^8.7.0",
     "eslint-config-react-app": "^7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^2.64.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-web-worker-loader": "^1.6.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@zxing/library": "^0.19.1"
+    "@zxing/library": "^0.19.1",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "prop-types": "^15.8.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   }
 }

rollup.config.js

@@ -1,57 +1,48 @@
-import babel from '@rollup/plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import webWorkerLoader from 'rollup-plugin-web-worker-loader';
+import babel from "@rollup/plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import webWorkerLoader from "rollup-plugin-web-worker-loader";
 
-import pkg from './package.json';
+import pkg from "./package.json";
 
-const INPUT_FILE_PATH = 'src/index.js';
-const OUTPUT_NAME = 'RectQrScanner';
+const INPUT_FILE_PATH = "src/index.js";
+const OUTPUT_NAME = "RectQrScanner";
 
 const GLOBALS = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'prop-types': 'PropTypes',
+  react: "React",
+  "react-dom": "ReactDOM",
 };
 
 const PLUGINS = [
   babel({
-    babelHelpers: 'runtime',
-    exclude: 'node_modules/**',
+    babelHelpers: "runtime",
+    exclude: "node_modules/**",
   }),
   resolve({
     browser: true,
-    resolveOnly: [
-      /^(?!react$)/,
-      /^(?!react-dom$)/,
-      /^(?!prop-types)/,
-    ],
+    resolveOnly: [/^(?!react$)/, /^(?!react-dom$)/],
   }),
   commonjs(),
 ];
 
-const EXTERNAL = [
-  'react',
-  'react-dom',
-  'prop-types',
-];
+const EXTERNAL = ["react", "react-dom"];
 
 // https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers
-const CJS_AND_ES_EXTERNALS = EXTERNAL.concat(/@baberk\/runtime/, /@zxing\/library/);
+const CJS_AND_ES_EXTERNALS = EXTERNAL.concat(/@babel\/runtime/);
 
 const OUTPUT_DATA = [
   {
     file: pkg.browser,
-    format: 'umd',
+    format: "umd",
   },
   {
     file: pkg.main,
-    format: 'cjs',
-    exports: 'default',
+    format: "cjs",
+    exports: "default",
   },
   {
     file: pkg.module,
-    format: 'es',
+    format: "es",
   },
 ];
 
@@ -64,12 +55,13 @@ const config = OUTPUT_DATA.map(({ file, format, exports }) => ({
     name: OUTPUT_NAME,
     globals: GLOBALS,
   },
-  external: ['cjs', 'es'].includes(format) ? CJS_AND_ES_EXTERNALS : EXTERNAL,
-  plugins: [webWorkerLoader({
-    targetPlatform: 'browser',
-    external: ['cjs', 'es'].includes(format) ? CJS_AND_ES_EXTERNALS : EXTERNAL,
-    inline: !['cjs', 'es'].includes(format),
-  })].concat(...PLUGINS),
+  external: ["cjs", "es"].includes(format) ? CJS_AND_ES_EXTERNALS : EXTERNAL,
+  plugins: [
+    webWorkerLoader({
+      targetPlatform: "browser",
+      inline: true,
+    }),
+  ].concat(...PLUGINS),
 }));
 
 export default config;

src/stories/Reader.stories.js

@@ -0,0 +1,68 @@
+import React from "react";
+
+import Reader from "../..";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Reader",
+  component: Reader,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+
+  args: {
+    constraints: { audio: false, video: true },
+    resolution: 640,
+  },
+
+  argTypes: {
+    constraints: {
+      type: { name: "object", required: false },
+      description: "MediaTrackConstraints",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: "{ audio: false, video: true }" },
+      },
+      control: "object",
+    },
+
+    resolution: {
+      type: { name: "number", required: false },
+      description: "Resolution of procesed images, impacts performance.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 640 },
+      },
+      control: { type: "number", min: 320, max: 1280, step: 10 },
+    },
+
+    onScan: {
+      action: "Scan",
+      description: "Fired after each processed snapshot.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: "(result) => {}" },
+      },
+    },
+    onLoad: {
+      action: "Loaded",
+      description: "Fired after camera is loaded and started processing stream.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: "() => {}" },
+      },
+    },
+    onError: {
+      action: "Error",
+      description: "Fired if any error occures.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: "(error) => {}" },
+      },
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Reader {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};

storybook-static/project.json

@@ -0,0 +1 @@
+{"generatedAt":1661342139593,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.13.2"},"storybookVersion":"6.5.10","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.10"},"@storybook/builder-webpack4":{"version":"6.5.10"},"@storybook/manager-webpack4":{"version":"6.5.10"},"@storybook/react":{"version":"6.5.10"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.10"},"@storybook/addon-essentials":{"version":"6.5.10"},"@storybook/addon-interactions":{"version":"6.5.10"}}}