fixing build issues and feedback

Author: svdimitr

examples/ecommerce-jewellery-store/package-lock.json

@@ -15,6 +15,7 @@
     "@progress/kendo-licensing": "^1.3.5",
     "@progress/kendo-react-animation": "^8.5.0",
     "@progress/kendo-react-buttons": "^8.5.0",
+    "@progress/kendo-react-chart-wizard": "^8.5.0",
     "@progress/kendo-react-common": "^8.5.0",
     "@progress/kendo-react-data-tools": "^8.5.0",
     "@progress/kendo-react-dateinputs": "^8.5.0",
@@ -25,7 +26,6 @@
     "@progress/kendo-react-inputs": "^8.5.0",
     "@progress/kendo-react-intl": "^8.5.0",
     "@progress/kendo-react-layout": "^8.5.0",
-    "@progress/kendo-react-chart-wizard": "^8.5.0",
     "@progress/kendo-react-notification": "^8.5.0",
     "@progress/kendo-react-popup": "^8.5.0",
     "@progress/kendo-react-progressbars": "^8.5.0",
@@ -38,17 +38,20 @@
     "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
     "@eslint/js": "^9.11.1",
     "@types/node": "^22.9.0",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.2",
+    "babel-loader": "^9.2.1",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
     "sass-embedded": "^1.80.5",
-    "typescript": "^5.5.3",
+    "typescript": "^5.6.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"
   }

examples/ecommerce-jewellery-store/package.json

@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Header from "./components/Header";
 import Footer from "./components/Footer";

examples/ecommerce-jewellery-store/src/App.tsx

@@ -15,10 +15,11 @@ import {
   getWizardDataFromGridSelection,
 } from '@progress/kendo-react-chart-wizard';
 import { Button } from '@progress/kendo-react-buttons';
-import { orderBy, groupBy } from '@progress/kendo-data-query';
+import { orderBy } from '@progress/kendo-data-query';
 import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
 import { sampleData } from '../data/shared-gd-sampleChartData';
 import { Pager, PageChangeEvent } from '@progress/kendo-react-data-tools';
+import { SampleDataItem } from '../data/types';
 
 interface SampleDataItem {
   ID: string;

examples/ecommerce-jewellery-store/src/components/AdminView.tsx

@@ -19,7 +19,7 @@ export const CardsList = (props: CardListProps) => {
             key={index}
             className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
           >
-            {item.status != null ? (
+            {item.status !== null ? (
               <BadgeContainer>
                 <div
                   className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"

examples/ecommerce-jewellery-store/src/components/CardsList.tsx

@@ -8,8 +8,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
     const navigate = useNavigate();
 
     const onNavigate = (card: CardDescriptor) => {
-        console.log(card);
-        if (card.collectionText === `Collection \"AURELIA\"`) {
+        if (card.collectionText === `Collection "AURELIA"`) {
             navigate("/category")
         }
     }

examples/ecommerce-jewellery-store/src/components/CategoryList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DateInput } from '@progress/kendo-react-dateinputs';
+import { DateInput, DateInputChangeEvent } from '@progress/kendo-react-dateinputs';
 
 const DateChooserInput: React.FC  = () => {
     const [value, setValue] = React.useState<Date | null>(new Date(2017, 1, 13));

examples/ecommerce-jewellery-store/src/components/DateChooserInput.tsx

@@ -49,7 +49,6 @@ export const ShoppingCartList: React.FC = () => {
   };
 
   const updateQuantity = (event: any) => {
-    console.log(typeof event);
     const target = event.target.element;
     const id = target.getAttribute("id");
 
@@ -78,7 +77,7 @@ export const ShoppingCartList: React.FC = () => {
           return (
             <div
               className="k-d-flex k-gap-5 k-justify-content-center k-border-y k-align-items-center k-pb-5"
-              key={isCartItem ? item.product.id : null}
+              key={item.product.id}
               style={{
                 height: "120px",
               }}

examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/adminview.tsx","./src/components/appointmentinput.tsx","./src/components/backgroundimage.tsx","./src/components/cardholder.tsx","./src/components/cardnumber.tsx","./src/components/cardslist.tsx","./src/components/categorylist.tsx","./src/components/cityinput.tsx","./src/components/contactsradiobuttons.tsx","./src/components/customizedsection.tsx","./src/components/datechooserinput.tsx","./src/components/emailinput.tsx","./src/components/expirydate.tsx","./src/components/filtercomponent.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/components/layout.tsx","./src/components/orderedimagecard.tsx","./src/components/passwordinput.tsx","./src/components/phoneinput.tsx","./src/components/productcard.tsx","./src/components/shoppingcartlist.tsx","./src/components/sizedparent.tsx","./src/components/testemonials.tsx","./src/data/items.ts","./src/data/language-items.ts","./src/data/listdata.ts","./src/data/shared-gd-samplechartdata.ts","./src/data/types.ts","./src/helpers/admincontext.tsx","./src/helpers/cartcontext.tsx","./src/helpers/categoriescontext.tsx","./src/pages/allproductslistview.tsx","./src/pages/contacts.tsx","./src/pages/detailedcategory.tsx","./src/pages/home.tsx","./src/pages/paymentdetails.tsx","./src/pages/productsdetails.tsx","./src/pages/thankyou.tsx"],"errors":true,"version":"5.6.3"}

examples/ecommerce-jewellery-store/tsconfig.app.tsbuildinfo

@@ -1,18 +1,19 @@
 {
-    "compilerOptions": {
-      "target": "ESNext",
-      "module": "ESNext",
-      "moduleResolution": "Node",
-      "strict": true,
-      "esModuleInterop": true,
-      "skipLibCheck": true,
-      "forceConsistentCasingInFileNames": true,
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "noEmit": true
-    },
-    "include": [
-      "src/**/*"
-    ]
-  }
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}