feat: update project using create-kendoreact-app

2022-06-28 21:41:30 +03:00 · 2022-06-28 21:41:30 +03:00 · 82ca90f2f8
--- a/package.json
+++ b/package.json
@ -3,23 +3,52 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@progress/kendo-data-query": "^1.5.2",
-    "@progress/kendo-drawing": "^1.5.12",
-    "@progress/kendo-react-animation": "^3.4.0",
-    "@progress/kendo-react-data-tools": "^3.4.0",
-    "@progress/kendo-react-dateinputs": "^3.4.0",
-    "@progress/kendo-react-dialogs": "^3.4.0",
-    "@progress/kendo-react-dropdowns": "^3.4.0",
-    "@progress/kendo-react-grid": "^3.4.0",
-    "@progress/kendo-react-inputs": "^3.4.0",
-    "@progress/kendo-react-intl": "^3.4.0",
-    "@progress/kendo-react-popup": "^3.4.0",
-    "@progress/kendo-theme-default": "^4.3.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
-  },
-  "devDependencies": {
-    "react-scripts": "3.1.1"
+    "@progress/kendo-data-query": "^1.6.0",
+    "@progress/kendo-drawing": "^1.16.3",
+    "@progress/kendo-licensing": "^1.2.2",
+    "@progress/kendo-react-animation": "^5.4.0",
+    "@progress/kendo-react-buttons": "^5.4.0",
+    "@progress/kendo-react-charts": "^5.4.0",
+    "@progress/kendo-react-conversational-ui": "^5.4.0",
+    "@progress/kendo-react-data-tools": "^5.4.0",
+    "@progress/kendo-react-dateinputs": "^5.4.0",
+    "@progress/kendo-react-dialogs": "^5.4.0",
+    "@progress/kendo-react-dropdowns": "^5.4.0",
+    "@progress/kendo-react-editor": "^5.4.0",
+    "@progress/kendo-react-excel-export": "^5.4.0",
+    "@progress/kendo-react-form": "^5.4.0",
+    "@progress/kendo-react-gantt": "^5.4.0",
+    "@progress/kendo-react-gauges": "^5.4.0",
+    "@progress/kendo-react-grid": "^5.4.0",
+    "@progress/kendo-react-indicators": "^5.4.0",
+    "@progress/kendo-react-inputs": "^5.4.0",
+    "@progress/kendo-react-intl": "^5.4.0",
+    "@progress/kendo-react-labels": "^5.4.0",
+    "@progress/kendo-react-layout": "^5.4.0",
+    "@progress/kendo-react-listbox": "^5.4.0",
+    "@progress/kendo-react-listview": "^5.4.0",
+    "@progress/kendo-react-notification": "^5.4.0",
+    "@progress/kendo-react-pdf": "^5.4.0",
+    "@progress/kendo-react-pivotgrid": "^5.4.0",
+    "@progress/kendo-react-popup": "^5.4.0",
+    "@progress/kendo-react-progressbars": "^5.4.0",
+    "@progress/kendo-react-ripple": "^5.4.0",
+    "@progress/kendo-react-scheduler": "^5.4.0",
+    "@progress/kendo-react-sortable": "^5.4.0",
+    "@progress/kendo-react-tooltip": "^5.4.0",
+    "@progress/kendo-react-treelist": "^5.4.0",
+    "@progress/kendo-react-treeview": "^5.4.0",
+    "@progress/kendo-react-upload": "^5.4.0",
+    "@progress/kendo-theme-bootstrap": "^5.5.0",
+    "@progress/kendo-theme-default": "^5.5.0",
+    "@progress/kendo-theme-material": "^5.5.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
@ -28,7 +57,10 @@
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
  },
  "browserslist": {
    "production": [
@ -41,5 +73,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "sass": "^1.53.0"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -2,13 +2,14 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -23,9 +24,9 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>KendoReact Getting Started</title>
+    <title>React App</title>
  </head>
-  <body>
+  <body className="k-body">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -16,7 +16,7 @@
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
-    }	    
+    }
  ],
  "start_url": ".",
  "display": "standalone",
--- a/public/robots.txt
+++ b/public/robots.txt
@ -1,2 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
+Disallow:
--- a/src/App.js
+++ b/src/App.js
@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import '@progress/kendo-theme-default/dist/all.css';
-import './App.css';
+import './App.scss';
 import categories from './categories.json';
 import products from './products.json';
 import { process } from '@progress/kendo-data-query';
--- a/src/App.scss
+++ b/src/App.scss
--- a/src/App.test.js
+++ b/src/App.test.js
@ -1,9 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 import App from './App';

-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
 });
--- a/src/index.css
+++ b/src/index.css
@ -1,12 +0,0 @@
-body {
-  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;
-}
--- a/src/index.js
+++ b/src/index.js
@ -1,12 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
+import ReactDOM from 'react-dom/client';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
+import './index.scss';

-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/src/index.scss
+++ b/src/index.scss
@ -0,0 +1,15 @@
+@import './themes/kendo-theme-custom.scss';
+
+body {
+  margin: 0;
+  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;
+}
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}
--- a/src/setupTests.js
+++ b/src/setupTests.js
@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/src/themes/kendo-theme-custom.scss
+++ b/src/themes/kendo-theme-custom.scss
@ -0,0 +1,2 @@
+// $primary: #53D2FA;
+@import '~@progress/kendo-theme-default/dist/all.scss';