fix build errors

telerik · Nov 18, 2024 · 87d0dac · 87d0dac
1 parent 786df31
commit 87d0dac
Show file tree

Hide file tree

Showing 19 changed files with 277 additions and 264 deletions.
diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/1111.jfif b/examples/kendo-react-e-commerce-astro-app/src/assets/1111.jfif
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getter } from '@progress/kendo-react-common';
+import * as React from "react";
+import { getter } from "@progress/kendo-react-common";
 import {
   Grid,
   GridColumn,
@@ -9,19 +9,20 @@ import {
   GridKeyDownEvent,
   getSelectedStateFromKeyDown,
   GridSortChangeEvent,
-} from '@progress/kendo-react-grid';
+  GridPageChangeEvent,
+} from "@progress/kendo-react-grid";
 import {
   ChartWizard,
+  ChartWizardDataRow,
   getWizardDataFromGridSelection,
-} from '@progress/kendo-react-chart-wizard';
-import { Button } from '@progress/kendo-react-buttons';
-import { orderBy, groupBy } from '@progress/kendo-data-query';
-import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
-import { sampleData, SampleDataItem } from '../data/shared-gd-sampleChartData';
-import { Pager, PageChangeEvent } from '@progress/kendo-react-data-tools';
-
-const DATA_ITEM_KEY = 'ID';
-const SELECTED_FIELD = 'selected';
+} from "@progress/kendo-react-chart-wizard";
+import { Button } from "@progress/kendo-react-buttons";
+import { orderBy } from "@progress/kendo-data-query";
+import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
+import { sampleData } from "../data/shared-gd-sampleChartData";
+
+const DATA_ITEM_KEY = "ID";
+const SELECTED_FIELD = "selected";
 const idGetter = getter(DATA_ITEM_KEY);
 
 interface SelectedState {
@@ -36,17 +37,20 @@ interface PageState {
 const AdminView: React.FC = () => {
   const gridRef = React.useRef<GridHandle>(null);
   const [selectedState, setSelectedState] = React.useState<SelectedState>({});
-  const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([
-    { field: 'Sales', dir: 'desc' },
+  const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
+    { field: "Sales", dir: "desc" },
   ]);
   const [showChartWizard, setShowChartWizard] = React.useState<boolean>(false);
-  const [chartData, setChartData] = React.useState<SampleDataItem[]>([]);
-  const [top3SalesData, setTop3SalesData] = React.useState<SampleDataItem[]>([]);
+  const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
+  const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
   const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
   const [page, setPage] = React.useState<PageState>({ skip: 0, take: 4 });
 
-  const pageChange = (event: PageChangeEvent) => {
-    setPage(event.page);
+  const pageChange = (event: GridPageChangeEvent) => {
+    setPage({
+      skip: event.page.skip,
+      take: event.page.take,
+    });
   };
 
   const data = sampleData.map((item) => ({
@@ -88,7 +92,7 @@ const AdminView: React.FC = () => {
       setChartData(chartWizardData);
       setShowChartWizard(true);
     } else {
-      console.error('Grid reference is not available.');
+      console.error("Grid reference is not available.");
     }
   }, [selectedState]);
 
@@ -103,60 +107,32 @@ const AdminView: React.FC = () => {
     const sortedTop3Sales = selectedData
       .sort(
         (a, b) =>
-          b.find((field) => field.field === 'Total Sales').value -
-          a.find((field) => field.field === 'Total Sales').value
+          b.find((field) => field.field === "Total Sales")?.value -
+          a.find((field) => field.field === "Total Sales")?.value
       )
       .slice(0, 3);
 
     setTop3SalesData(sortedTop3Sales);
     setTop3Visible(true);
   }, [selectedState]);
 
-  const URLImageCell: React.FC<{ dataItem: SampleDataItem; field?: string }> = ({
-    dataItem,
-    field,
-  }) => {
-    const imageUrl = dataItem[field || 'URL'];
+  const URLImageCell: React.FC<{ dataItem: any; field?: string }> = ({ dataItem, field }) => {
+    const imageUrl = dataItem[field || "URL"];
     return (
       <td>
-        <img src={imageUrl} alt="Product" style={{ width: '100px', height: 'auto' }} />
+        <img src={imageUrl} alt="Product" style={{ width: "100px", height: "auto" }} />
       </td>
     );
   };
 
-  const MyPager: React.FC<{
-    skip: number;
-    take: number;
-    total: number;
-    onPageChange: (event: PageChangeEvent) => void;
-  }> = (props) => {
-    return (
-      <div style={{ overflow: 'hidden', padding: '10px' }}>
-        <Pager
-          responsive={true}
-          skip={props.skip}
-          take={props.take}
-          total={props.total}
-          onPageChange={props.onPageChange}
-          buttonCount={5}
-          info={true}
-          previousNext={true}
-          type="numeric"
-          pageSizes={[4, 10, 15, 20]}
-          pageSizeValue={props.take}
-        />
-      </div>
-    );
-  };
-
   return (
     <>
-      <div style={{ marginBottom: '10px' }}>
+      <div style={{ marginBottom: "10px" }}>
         <Button
           svgIcon={chartAreaStackedIcon}
           onClick={handleSelectedChart}
           disabled={disabled}
-          style={{ marginRight: '10px' }}
+          style={{ marginRight: "10px" }}
         >
           Chart of Selected Data
         </Button>
@@ -166,7 +142,7 @@ const AdminView: React.FC = () => {
       </div>
       <Grid
         ref={gridRef}
-        style={{ height: '500px' }}
+        style={{ height: "500px" }}
         data={pagedData}
         dataItemKey={DATA_ITEM_KEY}
         selectedField={SELECTED_FIELD}
@@ -175,19 +151,18 @@ const AdminView: React.FC = () => {
         total={data.length}
         pageable={true}
         onPageChange={pageChange}
-        pager={(pagerProps) => <MyPager {...pagerProps} />}
         selectable={{
           enabled: true,
           drag: true,
-          mode: 'multiple',
+          mode: "multiple",
         }}
         navigatable={true}
         onSelectionChange={onSelectionChange}
         onKeyDown={onKeyDown}
         sortable={true}
         sort={sort}
         onSortChange={(e: GridSortChangeEvent) => {
-          setSort(e.sort);
+          setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
         }}
       >
         <GridColumn field="URL" title="Product" cell={URLImageCell} />
@@ -202,30 +177,18 @@ const AdminView: React.FC = () => {
       {showChartWizard && (
         <ChartWizard
           data={chartData}
-          series={[
-            {
-              field: 'value',
-              categoryField: 'category',
-            },
-          ]}
           onClose={() => setShowChartWizard(false)}
         />
       )}
 
       {top3Visible && (
         <ChartWizard
           data={top3SalesData}
-          series={[
-            {
-              field: 1,
-              categoryField: 0,
-            },
-          ]}
           onClose={() => setTop3Visible(false)}
         />
       )}
     </>
   );
 };
 
-export default AdminView;
+export default AdminView;
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/CardHolder.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/CardHolder.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { TextBox } from '@progress/kendo-react-inputs';
 
 const CardNumber = () => {

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/CardNumber.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/CardNumber.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { MaskedTextBox } from '@progress/kendo-react-inputs';
 
 const CardNumber = () => {

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx
@@ -1,8 +1,5 @@
 import React from 'react';
 import { Layout } from '../components/Layout';
-import CardNumber from '../components/CardNumber';
-import ExpiryDate from '../components/ExpiryDate';
-import PasswordInput from '../components/PasswordInput';
 import EmailInput from '../components/EmailInput';
 import CardHolder from '../components/CardHolder';
 import CityInput from '../components/CityInput';

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx
@@ -1,11 +1,7 @@
-// src/components/ShoppingCartList.tsx
 import * as React from "react";
 import {
   chevronLeftIcon,
   trashIcon,
-  walletSolidIcon,
-  heartIcon,
-  percentIcon,
 } from "@progress/kendo-svg-icons";
 import {
   Form,
@@ -18,15 +14,12 @@ import { Error } from "@progress/kendo-react-labels";
 import { Input, NumericTextBox } from "@progress/kendo-react-inputs";
 import { Button } from "@progress/kendo-react-buttons";
 import { Layout } from "./Layout";
-import { Avatar } from "@progress/kendo-react-layout";
-import { SvgIcon } from "@progress/kendo-react-common";
 
-// Temporary hardcoded cart data with image paths from the public folder
 const cart = [
   {
     product: {
       id: 1,
-      img: "/sample-item1.png", // Images from public folder
+      img: "/sample-item1.png",
       title: "Silver Bracelet with Onyx",
       newPrice: 49.99,
     },
@@ -89,7 +82,7 @@ const ShoppingCartList: React.FC = () => {
           >
             <img
               className="k-rounded-lg"
-              src={item.product.img} // Directly reference images in the public folder
+              src={item.product.img} 
               alt={item.product.title}
               style={{ maxHeight: "120px" }}
             />
@@ -173,7 +166,7 @@ const ShoppingCartList: React.FC = () => {
             </div>
             <div className="k-col-span-9 k-rounded-lg">
               <img
-                src="/shoppingCartImg.png" // Reference public folder image directly
+                src="/shoppingCartImg.png" 
                 alt="Shopping Cart Background"
                 style={{ width: "630px", height: "455px" }}
               />

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/EmailInput.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/EmailInput.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { Input, InputChangeEvent } from '@progress/kendo-react-inputs';
-import { Button } from '@progress/kendo-react-buttons';
-import { eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
+import { Input } from '@progress/kendo-react-inputs';
 
 const EmailInput: React.FC = () => {
 

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/ExpiryDate.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/ExpiryDate.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { DateInput } from "@progress/kendo-react-dateinputs";
 
 const ExpiryDate = () => {