update packages

lint free

package.json

@@ -56,8 +56,8 @@
     "@storybook/addon-links": "^6.4.20",
     "@storybook/addons": "^6.4.20",
     "@storybook/react": "^6.4.20",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "babel-loader": "^8.2.4",
     "husky": "^7.0.4",
     "react": "^18.0.0",
@@ -74,7 +74,7 @@
     "@types/auth0": "^2.34.17",
     "antd": "^4.19.5",
     "axios": "^0.26.1",
-    "react-highlight-words": "^0.17.0",
+    "react-highlight-words": "^0.18.0",
     "react-query": "^3.39.1",
     "shards-react": "^1.0.3",
     "use-axios-client": "^2.0.0"

src/common/components/auth/auth.tsx

@@ -14,7 +14,13 @@ export function Auth(): JSX.Element {
   return (
     <div>
       {!user && (
-        <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
           <Title level={3}>
             Unauthenticated{' '}
             <Button onClick={loginWithPopup}>Log In using Auth0</Button>{' '}

src/common/components/custom-parameters/custom-parameters.tsx

@@ -1,22 +1,34 @@
-import React, { useState } from 'react';
-import { Table, Input, Button, Space } from 'antd';
-//@ts-ignore
-import Highlighter from 'react-highlight-words';
+import React from 'react';
+import { Table, Input } from 'antd';
+import 'react-highlight-words';
 
-export const CustomParameters = ({data, onValueChange}) => {
-    const columns = [
+export const CustomParameters = ({ data, onValueChange }) => {
+  const columns = [
     {
-        title: 'Key',
-        dataIndex: 'key',
-        key: 'key',
-        width: '50%',
+      title: 'Key',
+      dataIndex: 'key',
+      key: 'key',
+      width: '50%',
     },
     {
-        title: 'Value',
-        dataIndex: 'value',
-        key: 'value',
-        width: '50%',
-    } 
-    ];
-    return <Table columns={columns} dataSource={Object.keys(data).map(key => ({key,value:<Input value={data[key]} onChange={(e) => onValueChange(key, e.target.value)}/>}))} />;
-}
+      title: 'Value',
+      dataIndex: 'value',
+      key: 'value',
+      width: '50%',
+    },
+  ];
+  return (
+    <Table
+      columns={columns}
+      dataSource={Object.keys(data).map(key => ({
+        key,
+        value: (
+          <Input
+            value={data[key]}
+            onChange={e => onValueChange(key, e.target.value)}
+          />
+        ),
+      }))}
+    />
+  );
+};

src/common/components/custom-parameters/index.ts

@@ -1 +1 @@
-export { CustomParameters } from "./custom-parameters";
+export { CustomParameters } from './custom-parameters';

src/common/components/masa-tools-wrapper/index.tsx

@@ -2,7 +2,7 @@ import { useAuth0 } from '@auth0/auth0-react';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { masaToolsProvider } from '../../helpers/provider';
-const XMasaToolsProvider = masaToolsProvider
+const XMasaToolsProvider = masaToolsProvider;
 export interface MasaToolsWrapperProps {
   children: React.ReactNode;
 }
@@ -21,6 +21,7 @@ export function MasaToolsWrapper({ children }: MasaToolsWrapperProps) {
     handleToken();
   }, [handleToken]);
 
-
-  return <XMasaToolsProvider accessToken={token}>{children}</XMasaToolsProvider>;
+  return (
+    <XMasaToolsProvider accessToken={token}>{children}</XMasaToolsProvider>
+  );
 }

src/common/components/method-parameters/method-parameters.tsx

@@ -19,13 +19,13 @@ export class MethodParameters extends React.Component {
     }: any) => (
       <div style={{ padding: 8 }}>
         <Input
-          ref={(node) => {
+          ref={node => {
             //@ts-ignore
             this.searchInput = node;
           }}
           placeholder={`Search ${dataIndex}`}
           value={selectedKeys[0]}
-          onChange={(e) =>
+          onChange={e =>
             setSelectedKeys(e.target.value ? [e.target.value] : [])
           }
           onPressEnter={() =>

src/common/components/path-parameters/index.ts

@@ -1 +1 @@
-export { PathParameters } from "./path-parameters";
+export { PathParameters } from './path-parameters';

src/common/components/path-parameters/path-parameters.tsx

@@ -1,22 +1,34 @@
 import React from 'react';
 import { Table, Input } from 'antd';
-//@ts-ignore
-import Highlighter from 'react-highlight-words';
+import 'react-highlight-words';
 
-export const PathParameters = ({data, onValueChange}) => {
-    const columns = [
+export const PathParameters = ({ data, onValueChange }) => {
+  const columns = [
     {
-        title: 'Key',
-        dataIndex: 'key',
-        key: 'key',
-        width: '50%',
+      title: 'Key',
+      dataIndex: 'key',
+      key: 'key',
+      width: '50%',
     },
     {
-        title: 'Value',
-        dataIndex: 'value',
-        key: 'value',
-        width: '50%',
-    } 
-    ];
-    return <Table columns={columns} dataSource={Object.keys(data).map(key => ({key,value:<Input value={data[key]} onChange={(e) => onValueChange(key, e.target.value)}/>}))} />;
-}
+      title: 'Value',
+      dataIndex: 'value',
+      key: 'value',
+      width: '50%',
+    },
+  ];
+  return (
+    <Table
+      columns={columns}
+      dataSource={Object.keys(data).map(key => ({
+        key,
+        value: (
+          <Input
+            value={data[key]}
+            onChange={e => onValueChange(key, e.target.value)}
+          />
+        ),
+      }))}
+    />
+  );
+};

src/common/components/response-values/index.ts

@@ -1 +1 @@
-export { ResponseValues } from "./response-values";
+export { ResponseValues } from './response-values';