PayButton · chedieck · Jan 24, 2024 · Jan 24, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/react/.babelrc.json b/react/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/react/.storybook/main.ts b/react/.storybook/main.ts
@@ -1,12 +1,26 @@
-module.exports = {
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
+
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     "@storybook/preset-create-react-app",
-  ]
-};
+  ],
+
+  docs: {
+    autodocs: true
+  },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  }
+};
+
+export default config
diff --git a/react/.storybook/preview.ts b/react/.storybook/preview.ts
@@ -1,16 +1,20 @@
-export const parameters = {
-  controls: { expanded: true },
-  actions: { argTypesRegex: '^on.*' },
-  backgrounds: {
-    default: 'light',
-    values: [
-      { name: 'light', value: '#f5f7f8' },
-      { name: 'dark', value: '#282a2c' },
-    ],
-  },
-  options: {
-    storySort: {
-      order: ['PayButton', 'Button', 'Widget'],
+const preview = {
+  parameters: {
+    controls: { expanded: true },
+    actions: { argTypesRegex: '^on.*' },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#f5f7f8' },
+        { name: 'dark', value: '#282a2c' },
+      ],
     },
-  },
-};
+    options: {
+      storySort: {
+        order: ['PayButton', 'Button', 'Widget'],
+      },
+    },
+  }
+};
+
+export default preview
diff --git a/react/Dockerfile b/react/Dockerfile
@@ -3,7 +3,7 @@ FROM node:16-alpine
 WORKDIR /app
 
 COPY package*.json ./
-RUN yarn install && yarn build --ignore-scripts
+RUN yarn && yarn build
 COPY . .
 
 CMD chown node: -R node_modules && yarn storybook

diff --git a/react/package.json b/react/package.json
@@ -19,24 +19,24 @@
     "lint": "eslint 'src/**/*.{ts,tsx}' --fix",
     "prettier": "prettier --write 'src/**/*.ts'",
     "dev": "concurrently yarn:watch yarn:storybook",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "watch": "microbundle watch --jsx React.createElement --no-compress --format modern,cjs",
     "test": "jest"
   },
-  "peerDependencies": {
-    "react": "17.0.0",
-    "react-dom": "17.0.0"
-  },
   "devDependencies": {
     "@babel/core": "7.18.9",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@popperjs/core": "2.11.5",
-    "@storybook/addon-a11y": "6.5.9",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/node-logger": "6.5.9",
-    "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.5.9",
+    "@storybook/addon-a11y": "7.6.10",
+    "@storybook/addon-actions": "7.6.10",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/node-logger": "7.6.10",
+    "@storybook/preset-create-react-app": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@types/currency-formatter": "1.5.1",
     "@types/lodash": "4.14.182",
     "@types/node": "17.0.41",
@@ -64,12 +64,15 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "4.3.8",
     "lint-staged": "10.5.4",
-    "microbundle": "0.12.4",
-    "yarn-run-all": "^3.1.1",
+    "microbundle": "0.15.1",
     "prettier": "2.7.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-is": "16.13.1",
     "react-scripts": "3.4.4",
-    "typescript": "^4.8.2"
+    "storybook": "next",
+    "typescript": "^4.8.2",
+    "yarn-run-all": "^3.1.1"
   },
   "files": [
     "dist"
@@ -78,19 +81,19 @@
     "@material-ui/core": "4.12.4",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@material-ui/styles": "4.11.5",
-    "@types/jest": "^29.5.11",
-    "jest": "^29.7.0",
-    "crypto-js": "^4.2.0",
     "@types/crypto-js": "^4.2.1",
-    "ts-jest": "^29.1.1",
+    "@types/jest": "^29.5.11",
     "axios": "1.6.5",
     "bignumber.js": "9.0.2",
     "copy-to-clipboard": "3.3.3",
+    "crypto-js": "^4.2.0",
+    "jest": "^29.7.0",
     "lodash": "4.17.21",
     "notistack": "1.0.10",
     "qrcode.react": "1.0.1",
     "react-jss": "10.10.0",
     "socket.io-client": "4.7.4",
+    "ts-jest": "^29.1.1",
     "xecaddrjs": "^0.0.1"
   },
   "husky": {

diff --git a/react/src/components/BarChart/BarChart.stories.tsx b/react/src/components/BarChart/BarChart.stories.tsx
@@ -1,12 +1,12 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import BarChart, { BarChartProps } from './BarChart';
 
 export default {
   title: 'BarChart',
   component: BarChart,
   decorators: [
-    (Story: Story): React.ReactNode => (
+    (Story: StoryFn): React.ReactNode => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -20,7 +20,7 @@ export default {
   },
 };
 
-const Template: Story<BarChartProps> = props => <BarChart {...props} />;
+const Template: StoryFn<BarChartProps> = props => <BarChart {...props} />;
 
 export const Default = Template.bind({});
 Default.args = {

diff --git a/react/src/components/Button/Button.stories.tsx b/react/src/components/Button/Button.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { ThemeName } from '../../themes';
@@ -8,7 +8,7 @@ export default {
   title: 'Button',
   component: Button,
   decorators: [
-    (Story: Story): React.ReactNode => (
+    (Story: StoryFn): React.ReactNode => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -22,7 +22,7 @@ export default {
   },
 };
 
-const Template: Story<ButtonProps> = props => <Button {...props} />;
+const Template: StoryFn<ButtonProps> = props => <Button {...props} />;
 
 export const Default = Template.bind({});
 Default.args = {};

diff --git a/react/src/components/PayButton/PayButton.stories.tsx b/react/src/components/PayButton/PayButton.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { ThemeName } from '../../themes';
@@ -10,7 +10,7 @@ export default {
   title: 'PayButton',
   component: PayButton,
   decorators: [
-    (Story: Story): JSX.Element => (
+    (Story: StoryFn): JSX.Element => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -29,7 +29,7 @@ export default {
   },
 };
 
-const Template: Story<PayButtonProps> = props => <PayButton {...props} />;
+const Template: StoryFn<PayButtonProps> = props => <PayButton {...props} />;
 
 export const Default = Template.bind({});
 Default.args = {};
@@ -46,7 +46,7 @@ UsdAmount.args = {
   amount: 5,
   currency: 'USD',
   text: '$5',
-  hoverText:`Pay with ${defaultCurrency}`,
+  hoverText: `Pay with ${defaultCurrency}`,
   animation: 'none',
 };
 

diff --git a/react/src/components/PaymentDialog/PaymentDialog.stories.tsx b/react/src/components/PaymentDialog/PaymentDialog.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { ThemeName } from '../../themes';
@@ -10,7 +10,7 @@ export default {
   title: 'PaymentDialog',
   component: PaymentDialog,
   decorators: [
-    (Story: Story): JSX.Element => (
+    (Story: StoryFn): JSX.Element => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -27,7 +27,7 @@ export default {
   },
 };
 
-const Template: Story<PaymentDialogProps> = props => (
+const Template: StoryFn<PaymentDialogProps> = props => (
   <PaymentDialog {...props} />
 );
 

diff --git a/react/src/components/Widget/Widget.stories.tsx b/react/src/components/Widget/Widget.stories.tsx
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { ThemeName } from '../../themes';
@@ -10,7 +10,7 @@ export default {
   title: 'Widget',
   component: Widget,
   decorators: [
-    (Story: Story): React.ReactNode => (
+    (Story: StoryFn): React.ReactNode => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -28,7 +28,7 @@ export default {
   },
 };
 
-const Template: Story<WidgetProps> = props => <Widget {...props} />;
+const Template: StoryFn<WidgetProps> = props => <Widget {...props} />;
 
 export const Default = Template.bind({});
 Default.args = {};

diff --git a/react/src/components/Widget/Widget.tsx b/react/src/components/Widget/Widget.tsx
@@ -34,7 +34,7 @@ import {
   cryptoCurrency,
 } from '../../util/api-client';
 import PencilIcon from '../../assets/edit-pencil';
-import io, { Socket } from 'socket.io-client'
+import io, { Socket } from 'socket.io-client';
 import { parseOpReturnProps } from '../../util/opReturn';
 
 type QRCodeProps = BaseQRCodeProps & { renderAs: 'svg' };
@@ -308,7 +308,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
     }
 
     if (opReturn !== undefined && opReturn !== '') {
-      query.push(`op_return_raw=${opReturn}`)
+      query.push(`op_return_raw=${opReturn}`);
     }
 
     url = prefixedAddress + (query.length ? `?${query.join('&')}` : '');
@@ -402,9 +402,9 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
     }
     if (opReturn !== undefined && opReturn !== '') {
       if (prefixedAddress.includes('?')) {
-        prefixedAddress += `&op_return_raw=${opReturn}`
+        prefixedAddress += `&op_return_raw=${opReturn}`;
       } else {
-        prefixedAddress += `?op_return_raw=${opReturn}`
+        prefixedAddress += `?op_return_raw=${opReturn}`;
       }
     }
     if (!copy(prefixedAddress)) return;
@@ -456,10 +456,8 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
 
   useEffect(() => {
     try {
-      setOpReturn(
-        parseOpReturnProps(props.opReturn, disablePaymentId)
-      );
-    } catch (err) {
+      setOpReturn(parseOpReturnProps(props.opReturn, disablePaymentId));
+    } catch (err: any) {
       setErrorMsg(err.message);
     }
   }, [props.opReturn]);

diff --git a/react/tsconfig.json b/react/tsconfig.json
@@ -7,7 +7,9 @@
       "esnext"
     ],
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
+    "jsxFactory": "",
+    "jsxFragmentFactory": "",
     "sourceMap": true,
     "declaration": true,
     "esModuleInterop": true,