diff --git a/api/package.json b/api/package.json index 8227d139e..29bbd9767 100644 --- a/api/package.json +++ b/api/package.json @@ -22,6 +22,7 @@ "ts": "tsc" }, "devDependencies": { + "@types/lodash": "^4.14.149", "nodemon": "^2.0.2", "typescript": "^3.7.4" } diff --git a/api/tsconfig.json b/api/tsconfig.json index 83a0e54ea..0c14e08c0 100644 --- a/api/tsconfig.json +++ b/api/tsconfig.json @@ -5,10 +5,7 @@ "checkJs": true, "noEmit": true }, - "files": [ - "src/index.js", - "src/engines/mssql/index.js", - "src/engines/mysql/index.js", - "src/engines/postgres/index.js" + "include": [ + "src" ] } diff --git a/api/yarn.lock b/api/yarn.lock index 1be62a7d1..514ce0b24 100644 --- a/api/yarn.lock +++ b/api/yarn.lock @@ -46,6 +46,11 @@ esutils "^2.0.2" js-tokens "^4.0.0" +"@types/lodash@^4.14.149": + version "4.14.149" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440" + integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ== + "@types/node@*": version "13.1.2" resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.2.tgz#fe94285bf5e0782e1a9e5a8c482b1c34465fa385" diff --git a/web/package.json b/web/package.json index a3307200f..f4e60b674 100644 --- a/web/package.json +++ b/web/package.json @@ -23,7 +23,8 @@ "start:silent": "cross-env BROWSER=none PORT=5000 react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "ts": "tsc" }, "browserslist": { "production": [ @@ -38,6 +39,9 @@ ] }, "devDependencies": { - "@fortawesome/fontawesome-free": "^5.12.0" + "@fortawesome/fontawesome-free": "^5.12.0", + "@types/react": "^16.9.17", + "@types/styled-components": "^4.4.2", + "typescript": "^3.7.4" } } diff --git a/web/src/App.test.js b/web/src/App.test.js index 4db7ebc25..f50f6952c 100644 --- a/web/src/App.test.js +++ b/web/src/App.test.js @@ -1,3 +1,5 @@ +// @ts-nocheck + import React from 'react'; import { render } from '@testing-library/react'; import App from './App'; diff --git a/web/src/FilesTabsPanel.js b/web/src/FilesTabsPanel.js index accc66e88..33c76f72b 100644 --- a/web/src/FilesTabsPanel.js +++ b/web/src/FilesTabsPanel.js @@ -1,13 +1,13 @@ -import React from "react"; -import styled from "styled-components"; -import theme from "./theme"; +import React from 'react'; +import styled from 'styled-components'; +import theme from './theme'; -import { TableIcon } from "./icons"; +import { TableIcon } from './icons'; const files = [ - { name: "app.js" }, - { name: "BranchCategory", type: "table", selected: true }, - { name: "ApplicationList" } + { name: 'app.js' }, + { name: 'BranchCategory', type: 'table', selected: true }, + { name: 'ApplicationList' }, ]; const FileTabItem = styled.div` @@ -21,7 +21,8 @@ const FileTabItem = styled.div` color: ${theme.tabsPanel.hoverFont}; } background-color: ${props => - props.selected ? theme.mainArea.background : "inherit"}; + // @ts-ignore + props.selected ? theme.mainArea.background : 'inherit'}; `; const FileNameWrapper = styled.span` @@ -29,10 +30,14 @@ const FileNameWrapper = styled.span` `; export default function FilesTabsPanel() { - return files.map(file => ( - - - {file.name} - - )); + return ( + <> + {files.map(file => ( + + + {file.name} + + ))} + + ); } diff --git a/web/src/Screen.js b/web/src/Screen.js index a91ec2732..79fb6bbd1 100644 --- a/web/src/Screen.js +++ b/web/src/Screen.js @@ -9,7 +9,10 @@ import WidgetContainer from './widgets/WidgetContainer'; const BodyDiv = styled.div` position: fixed; top: ${theme.tabsPanel.height}px; - left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px; + left: ${props => + theme.widgetMenu.iconSize + + // @ts-ignore + props.leftPanelWidth}px; bottom: ${theme.statusBar.height}px; right: 0; background-color: ${theme.mainArea.background}; @@ -38,7 +41,10 @@ const TabsPanel = styled.div` display: flex; position: fixed; top: 0; - left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px; + left: ${props => + theme.widgetMenu.iconSize + + // @ts-ignore + props.leftPanelWidth}px; height: ${theme.tabsPanel.height}px; right: 0; background-color: ${theme.tabsPanel.background}; @@ -53,7 +59,7 @@ const StausBar = styled.div` background-color: ${theme.statusBar.background}; `; -export default function Screen({ children }) { +export default function Screen({ children = undefined }) { const currentWidget = useCurrentWidget(); const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0; return ( @@ -66,10 +72,18 @@ export default function Screen({ children }) { )} - + - {children} + + {children} + ); diff --git a/web/src/appobj/AppObjectList.js b/web/src/appobj/AppObjectList.js index e447a32f4..d6532c988 100644 --- a/web/src/appobj/AppObjectList.js +++ b/web/src/appobj/AppObjectList.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { showMenu } from '../modals/DropDownMenu'; import { AppObjectCore } from './AppObjects'; -export function AppObjectList({ list, makeAppObj, SubItems, onObjectClick }) { +export function AppObjectList({ list, makeAppObj, SubItems = undefined, onObjectClick = undefined }) { return (list || []).map(x => { const appobj = makeAppObj(x); let res = ; diff --git a/web/src/modals/ConnectionModal.js b/web/src/modals/ConnectionModal.js index de18372fe..af16e0a45 100644 --- a/web/src/modals/ConnectionModal.js +++ b/web/src/modals/ConnectionModal.js @@ -6,7 +6,7 @@ import { TextField } from '../utility/inputs'; import { Formik, Form } from 'formik'; // import FormikForm from '../utility/FormikForm'; -export default function ConnectionModal({ modalState, connection }) { +export default function ConnectionModal({ modalState, connection = undefined }) { const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected'); const handleTest = async values => { diff --git a/web/src/modals/DropDownMenu.js b/web/src/modals/DropDownMenu.js index ad4b51706..eb126981b 100644 --- a/web/src/modals/DropDownMenu.js +++ b/web/src/modals/DropDownMenu.js @@ -39,7 +39,7 @@ const StyledLink = styled.a` } `; -export function DropDownMenuItem({ children, keyText, onClick }) { +export function DropDownMenuItem({ children, keyText = undefined, onClick }) { const handleMouseEnter = () => { // if (this.context.parentMenu) this.context.parentMenu.closeSubmenu(); }; @@ -212,7 +212,7 @@ function showMenuCore(left, top, contentHolder, closeCallback = null) { }; document.body.appendChild(container); ReactDOM.render( - + {contentHolder} , container diff --git a/web/src/react-app-env.d.ts b/web/src/react-app-env.d.ts new file mode 100644 index 000000000..6431bc5fc --- /dev/null +++ b/web/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/web/src/utility/SocketProvider.js b/web/src/utility/SocketProvider.js index e7129ec13..1a7740735 100644 --- a/web/src/utility/SocketProvider.js +++ b/web/src/utility/SocketProvider.js @@ -1,7 +1,7 @@ import io from 'socket.io-client'; import React from 'react'; -const SocketContext = React.createContext(); +const SocketContext = React.createContext(null); export function SocketProvider({ children }) { const [socket, setSocket] = React.useState(); diff --git a/web/src/utility/globalState.js b/web/src/utility/globalState.js index e8cdbd0d7..9cbe870c8 100644 --- a/web/src/utility/globalState.js +++ b/web/src/utility/globalState.js @@ -1,7 +1,7 @@ import React from 'react'; function createGlobalState(defaultValue) { - const Context = React.createContext(); + const Context = React.createContext(null); function Provider({ children }) { const [currentvalue, setCurrentValue] = React.useState(defaultValue); diff --git a/web/src/utility/useFetch.js b/web/src/utility/useFetch.js index d81def8df..b2002c945 100644 --- a/web/src/utility/useFetch.js +++ b/web/src/utility/useFetch.js @@ -2,7 +2,7 @@ import React from 'react'; import axios from './axios'; import useSocket from './SocketProvider'; -export default function useFetch({ defaultValue, reloadTrigger, url, ...config }) { +export default function useFetch({ url, defaultValue = undefined, reloadTrigger = undefined, ...config }) { const [value, setValue] = React.useState(defaultValue); const [loadCounter, setLoadCounter] = React.useState(0); const socket = useSocket(); diff --git a/web/src/widgets/WidgetIconPanel.js b/web/src/widgets/WidgetIconPanel.js index 1336782e1..c80c3efd9 100644 --- a/web/src/widgets/WidgetIconPanel.js +++ b/web/src/widgets/WidgetIconPanel.js @@ -11,7 +11,9 @@ const IconWrapper = styled.div` display: flex; align-items: center; justify-content: center; - background-color: ${props => (props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit')}; + background-color: ${props => + // @ts-ignore + props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'}; &:hover { background-color: ${theme.widgetMenu.backgroundHover}; } @@ -44,13 +46,18 @@ export default function WidgetIconPanel() { const currentWidget = useCurrentWidget(); const setCurrentWidget = useSetCurrentWidget(); - return widgets.map(({ icon, name }) => ( - setCurrentWidget(name === currentWidget ? null : name)} - > - - - )); + return ( + <> + {widgets.map(({ icon, name }) => ( + setCurrentWidget(name === currentWidget ? null : name)} + > + + + ))} + + ); } diff --git a/web/tsconfig.json b/web/tsconfig.json new file mode 100644 index 000000000..5abb91718 --- /dev/null +++ b/web/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "module": "esnext", + "allowJs": true, + "checkJs": true, + "noEmit": true, + "jsx": "react", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "skipLibCheck": true, + "moduleResolution": "Node", + "noImplicitAny": false, + "strictNullChecks": false, + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "strict": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "isolatedModules": true + }, + "include": [ + "src" + ] +} diff --git a/web/yarn.lock b/web/yarn.lock index 1257c6036..09785eab6 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1387,6 +1387,14 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -1444,7 +1452,15 @@ dependencies: "@types/react" "*" -"@types/react@*": +"@types/react-native@*": + version "0.60.30" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.30.tgz#33ab525194142a5e3b428e60f0e77e0d1dbd253d" + integrity sha512-Ho41o+6NBlv1K5q2Z+NREST3UsGahXn4V1to2D2U4bcn1hO5MGjzOdkruzsnN10WiP8hW33jvQE6eERClgwvJg== + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + +"@types/react@*", "@types/react@^16.9.17": version "16.9.17" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e" integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg== @@ -1457,6 +1473,16 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/styled-components@^4.4.2": + version "4.4.2" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.2.tgz#709fa7afd7dc0963b8316a0159240f0fe19a026d" + integrity sha512-dngFx2PuGoy0MGE68eHayAmJvLSqWrnTe9w+DnQruu8PS+waWEsKmoBRhkzL2h2pK1OJhzJhVfuiz+oZa4etpA== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + "@types/react-native" "*" + csstype "^2.2.0" + "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0": version "6.11.0" resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.11.0.tgz#777e3ef44cb48f2430e3fad6a2053ec39004a5d3" @@ -10191,6 +10217,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^3.7.4: + version "3.7.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.4.tgz#1743a5ec5fef6a1fa9f3e4708e33c81c73876c19" + integrity sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw== + uglify-js@3.4.x: version "3.4.10" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"