fix(cookbook): ag grid cookbook comment code (#2247)

* fix(cookbook): ag grid cookbook comment code

* fix(cookbook): ag grid cookbook changeset

---------

Co-authored-by: Andrej Nikolic <andrej.nikolic@bouvet.no>

.changeset/chatty-gorillas-bake.md

@@ -0,0 +1,5 @@
+---
+'@equinor/fusion-framework-cookbook-app-react-ag-grid': patch
+---
+
+Add code comment

cookbooks/app-react-ag-grid/src/App.tsx

@@ -1,16 +1,22 @@
+// Import necessary hooks and components from React and Ag-Grid
 import { useCallback, useMemo, useState } from 'react';
 import { AgGridReact } from '@ag-grid-community/react';
 import useStyles from '@equinor/fusion-react-ag-grid-styles';
 import { ColDef, ModuleRegistry } from '@ag-grid-community/core';
+
+// Import required Ag-Grid modules
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
 import { FiltersToolPanelModule } from '@ag-grid-enterprise/filter-tool-panel';
 import { MenuModule } from '@ag-grid-enterprise/menu';
 import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
+
+// Import custom table configuration
 import { defaultColDef, sideBar } from './table';
 
+// Register Ag-Grid modules
 ModuleRegistry.registerModules([
     ClientSideRowModelModule,
     ColumnsToolPanelModule,
@@ -21,18 +27,23 @@ ModuleRegistry.registerModules([
     ClipboardModule,
 ]);
 
+// Define the type for the row data
 export type RowDataType = {
     make: string;
     model: string;
     price: number;
 };
 
 export const App = (): JSX.Element => {
-    const styles = useStyles();
-    const gridStyle = useMemo(() => ({ height: '500px', width: '100%' }), []);
+    // Use custom styles for the grid
+    useStyles();
+    // Define the grid style
+    const gridStyle = useMemo(() => ({ height: '600px', width: '100%' }), []);
 
+    // Initialize state for the row data
     const [rowData, setRowData] = useState<RowDataType[]>([]);
 
+    // Define column definitions with useMemo
     const columnDefs = useMemo<ColDef[]>(() => {
         return [
             {
@@ -46,6 +57,7 @@ export const App = (): JSX.Element => {
         ];
     }, []);
 
+    // Define a function to add a new row
     const addRow = useCallback(() => {
         setRowData([
             ...rowData,
@@ -57,6 +69,7 @@ export const App = (): JSX.Element => {
         ]);
     }, [rowData, setRowData]);
 
+    // Define a function to set initial grid data when the grid is ready
     const onGridReady = useCallback(() => {
         setRowData([
             { make: 'Toyota', model: 'Celica', price: 35000 },
@@ -71,7 +84,7 @@ export const App = (): JSX.Element => {
                 <h4>Hello Fusion-framework Ag-Grid</h4>
                 <button onClick={addRow}>Add Row</button>
             </div>
-            <div style={gridStyle} className={`${styles.root} ag-theme-alpine-fusion`}>
+            <div style={gridStyle} className="ag-theme-alpine-fusion">
                 <AgGridReact
                     rowData={rowData}
                     columnDefs={columnDefs}

cookbooks/app-react-ag-grid/src/table/coldef.tsx

@@ -1,3 +1,4 @@
+// Example of column definition
 export const defaultColDef = {
     resizable: true,
     filter: true,

cookbooks/app-react-ag-grid/src/table/sidebar.tsx

@@ -1,3 +1,4 @@
+// Example of side bar definition
 export const sideBar = {
     toolPanels: [
         {