rm prettier lint plugin, use prettier directly

.eslintignore

@@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint nyc coverage output
+coverage

.eslintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+  root: true,
+  ignorePatterns: ['.eslintrc.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  plugins: [
+    '@typescript-eslint',
+    'jest',
+    'jsx-a11y',
+    'react',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier', // this needs to stay last to be able to override other configs
+  ],
+  rules: {
+    "import/named": "off",
+    "import/namespace": "off",
+    "import/no-duplicates": "off",
+    "import/no-unresolved": "off",
+    "jsx-a11y/accessible-emoji": "warn",
+    "react/jsx-boolean-value": "off",
+    "react/prop-types": "off",
+    "react/no-unescaped-entities": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-wrap-multilines": "off",
+    "react/destructuring-assignment": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  settings: {
+    "linkComponents": [
+      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
+      "Hyperlink",
+      {"name": "Link", "linkAttribute": "to"}
+    ]
+  }
+};

.prettierrc

@@ -1,6 +1,6 @@
 {
   "printWidth": 100,
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "es5"
 }

package.json

@@ -27,46 +27,36 @@
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "@types/react-router-dom": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/parser": "^4.28.0",
     "@typescript-eslint/scope-manager": "^4.27.0",
     "babel-loader": "^8.2.2",
+    "eslint": "^7.29.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "24.3.6",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "monaco-editor": "^0.25.2",
     "node-sass": "^6.0.0",
-    "prettier": "^2.3.2",
+    "prettier": "2.3.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",
     "tslib": "^2.3.0",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-plugin-prettier": "^2.3.0",
-    "tslint-react": "^5.0.0",
     "typescript": "^4.3.4",
     "webpack": "^5.40.0",
     "webpack-merge": "^5.8.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "build-storybook": "build-storybook -s public",
     "eject": "react-scripts eject",
-    "tslint-check": "tslint-config-prettier-check ./tslint.json",
+    "format": "prettier --write 'src/**/*.{js,ts,tsx,scss,css,json}'",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx src --color",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "test": "react-scripts test"
   },
   "browserslist": {
     "production": [

src/App.css

@@ -1,3 +1,5 @@
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }

src/components/YAMLEditor.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Editor from '@monaco-editor/react';
-import { useRef } from "react";
+import { useRef } from 'react';
 
 const YAMLEditor = () => {
   React.useEffect(() => {
@@ -21,14 +21,14 @@ const YAMLEditor = () => {
   return (
     <>
       <button onClick={showValue}>Show value</button>
-    <Editor
-      height="90vh"
-      defaultLanguage="YAML"
-      defaultValue="// edit your kamelet here"
-      onMount={handleEditorDidMount}
-    />
-      </>
+      <Editor
+        height="90vh"
+        defaultLanguage="YAML"
+        defaultValue="// edit your kamelet here"
+        onMount={handleEditorDidMount}
+      />
+    </>
   );
-}
+};
 
 export { YAMLEditor };

src/index.css

@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from "react-dom";
+import ReactDOM from 'react-dom';
 import '@patternfly/react-core/dist/styles/base.css';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { AppLayout } from './layouts/AppLayout';
@@ -14,4 +14,4 @@ const App: React.FunctionComponent = () => (
   </Router>
 );
 
-ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);
+ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);

src/layouts/AppLayout.tsx

@@ -8,7 +8,7 @@ import {
   Page,
   PageHeader,
   PageSidebar,
-  SkipToContent
+  SkipToContent,
 } from '@patternfly/react-core';
 import { routes, IAppRoute, IAppRouteGroup } from '../routes';
 import logo from '../assets/images/patternfly-logo.svg';
@@ -28,7 +28,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
 
   const onNavToggle = () => {
     setIsNavOpen(!isNavOpen);
-  }
+  };
 
   const onPageResize = (props: { mobileView: boolean; windowSize: number }) => {
     setIsMobileView(props.mobileView);
@@ -39,9 +39,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     function handleClick() {
       history.push('/');
     }
-    return (
-      <img src={logo} onClick={handleClick} alt="Zimara Logo" />
-    );
+    return <img src={logo} onClick={handleClick} alt="Zimara Logo" />;
   }
 
   const Header = (
@@ -78,7 +76,8 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     <Nav id="nav-primary-simple" theme="dark">
       <NavList id="nav-list-simple">
         {routes.map(
-          (route, idx) => route.label && (!route.routes ? renderNavItem(route, idx) : renderNavGroup(route, idx))
+          (route, idx) =>
+            route.label && (!route.routes ? renderNavItem(route, idx) : renderNavGroup(route, idx))
         )}
       </NavList>
     </Nav>
@@ -88,17 +87,21 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     <PageSidebar
       theme="dark"
       nav={Navigation}
-      isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen} />
+      isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen}
+    />
   );
 
   const pageId = 'primary-app-container';
 
   const PageSkipToContent = (
-    <SkipToContent onClick={(event) => {
-      event.preventDefault();
-      const primaryContentContainer = document.getElementById(pageId);
-      primaryContentContainer && primaryContentContainer.focus();
-    }} href={`#${pageId}`}>
+    <SkipToContent
+      onClick={(event) => {
+        event.preventDefault();
+        const primaryContentContainer = document.getElementById(pageId);
+        primaryContentContainer && primaryContentContainer.focus();
+      }}
+      href={`#${pageId}`}
+    >
       Skip to Content
     </SkipToContent>
   );
@@ -108,10 +111,11 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
       header={Header}
       sidebar={Sidebar}
       onPageResize={onPageResize}
-      skipToContent={PageSkipToContent}>
+      skipToContent={PageSkipToContent}
+    >
       {children}
     </Page>
   );
-}
+};
 
 export { AppLayout };

src/pages/Dashboard.tsx

@@ -1,9 +1,16 @@
 import { PageSection, Title } from '@patternfly/react-core';
+import { YAMLEditor } from '../components/YAMLEditor';
 
-const Dashboard = () => (
-  <PageSection>
-    <Title headingLevel="h1" size="lg">Zimara</Title>
-  </PageSection>
-)
+const Dashboard = () => {
+  return (
+    <PageSection>
+      <Title headingLevel="h1" size="lg">
+        Zimara
+      </Title>
+      <p>Testing something..</p>
+      <YAMLEditor />
+    </PageSection>
+  );
+};
 
 export { Dashboard };

src/pages/NotFound.tsx

@@ -15,9 +15,7 @@ const NotFound = () => {
     function handleClick() {
       history.push('/');
     }
-    return (
-      <Button onClick={handleClick}>Take me home</Button>
-    );
+    return <Button onClick={handleClick}>Take me home</Button>;
   }
 
   return (
@@ -33,7 +31,7 @@ const NotFound = () => {
         <GoHomeBtn />
       </EmptyState>
     </PageSection>
-  )
+  );
 };
 
 export { NotFound };

src/routes.tsx

@@ -33,7 +33,7 @@ const routes: AppRouteConfig[] = [
     label: 'Dashboard',
     path: '/',
     title: 'Zimara | Main Dashboard',
-  }
+  },
 ];
 
 // a custom hook for sending focus to the primary content container
@@ -51,15 +51,20 @@ const useA11yRouteChange = (isAsync: boolean) => {
   }, [isAsync, lastNavigation]);
 };
 
-const RouteWithTitleUpdates = ({ component: Component, isAsync = false, title, ...rest }: IAppRoute) => {
+const RouteWithTitleUpdates = ({
+  component: Component,
+  isAsync = false,
+  title,
+  ...rest
+}: IAppRoute) => {
   useA11yRouteChange(isAsync);
   useDocumentTitle(title);
 
   function routeWithTitle(routeProps: RouteComponentProps) {
     return <Component {...rest} {...routeProps} />;
   }
 
-  return <Route render={routeWithTitle} {...rest}/>;
+  return <Route render={routeWithTitle} {...rest} />;
 };
 
 const PageNotFound = ({ title }: { title: string }) => {