refactor: address PR review comments

- Use Array.from().map() instead of repetitive array literals in grid calculation functions
- Fix storybook action import: use 'storybook/actions' instead of 'storybook/test' in both Plate and Table stories
- Add ROW_COUNT constant for consistency with COLUMN_COUNT
- Restore action() usage in Plate stories for drag-and-drop demo

Addresses review comments from spawnia in PR #315

Author: simbig

src/Plate/index.stories.tsx

@@ -1,5 +1,6 @@
 import { StoryFn } from '@storybook/react-webpack5';
 import React from 'react';
+import { action } from 'storybook/actions';
 
 import { PALETTE } from '../theme';
 
@@ -91,10 +92,7 @@ const Template: StoryFn<Partial<PlateProps<CoordinateSystem12x8>>> =
         data={null}
         coordinateSystem={COORDINATE_SYSTEM_12X8}
         dndContextProps={{
-          onDragEnd: () => {
-            // Handle drag end event
-            // Access data via event parameter if needed: const sourceData = e.active.data.current; const targetData = e.over?.data.current;
-          },
+          onDragEnd: action('onDragEnd'), // dataLocation: `const sourceData = e.active.data.current; const targetData = e.over?.data.current;`
         }}
         {...args}
       />

src/Table/index.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryFn } from '@storybook/react-webpack5';
 import React, { useState } from 'react';
-import { action } from 'storybook/test';
+import { action } from 'storybook/actions';
 
 import { THEME } from '../theme';
 

src/TecanDeckView/TecanDeckView.tsx

@@ -24,6 +24,7 @@ import {
 const GRID_PADDING = 8;
 const GRID_GAP = 8;
 const COLUMN_COUNT = 5;
+const ROW_COUNT = 3;
 const GRID_OVERHEAD = GRID_PADDING * 2 + GRID_GAP * (COLUMN_COUNT - 1);
 const COLUMN_OVERHEAD = 60;
 const BASE_CONTENT_WIDTH = 1400;
@@ -71,27 +72,17 @@ const RIGHT_COLUMN_STYLE = {
 function calculateGridTemplateColumns(labwares: TecanLabwares): string {
   const filledByColumn = getFilledLabwaresByColumn(labwares);
 
-  const columnSizes = [
-    (filledByColumn[0]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-    (filledByColumn[1]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-    (filledByColumn[2]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-    (filledByColumn[3]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-    (filledByColumn[4]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-  ];
-
-  return columnSizes.join(' ');
+  return Array.from({ length: COLUMN_COUNT }, (_, i) =>
+    (filledByColumn[i]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
+  ).join(' ');
 }
 
 function calculateGridTemplateRows(labwares: TecanLabwares): string {
   const filledByRow = getFilledLabwaresByRow(labwares);
 
-  const rowSizes = [
-    (filledByRow[0]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-    (filledByRow[1]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-    (filledByRow[2]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
-  ];
-
-  return rowSizes.join(' ');
+  return Array.from({ length: ROW_COUNT }, (_, i) =>
+    (filledByRow[i]?.length ?? 0) > 0 ? 'auto' : 'minmax(40px, 60px)',
+  ).join(' ');
 }
 
 export function TecanDeckView({ labwares }: { labwares: TecanLabwares }) {