Final code review improvements - consolidate imports and improve documentation

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

src/components/admin/CreateTableDialog.tsx

@@ -11,8 +11,11 @@ import {
   Checkbox,
   MenuItem,
   Select,
+  Button,
+  TextField,
+  Typography,
+  IconButton,
 } from '../atoms';
-import { Button, TextField, Typography, IconButton } from '../atoms';
 
 type Column = {
   name: string;

src/components/admin/DataGrid.tsx

@@ -9,8 +9,8 @@ import {
   TableHead,
   TableRow,
   Tooltip,
+  IconButton,
 } from '../atoms';
-import { IconButton } from '../atoms';
 
 type DataGridProps = {
   columns: Array<{ name: string; label?: string }>;

src/components/admin/DropTableDialog.tsx

@@ -8,8 +8,9 @@ import {
   DialogTitle,
   MenuItem,
   Select,
+  Button,
+  Typography,
 } from '../atoms';
-import { Button, Typography } from '../atoms';
 
 type DropTableDialogProps = {
   open: boolean;

src/utils/storybook/storyGenerator.ts

@@ -26,6 +26,21 @@ export function generateMeta<T>(
 
 /**
  * Generate a single story from features.json story definition
+ * 
+ * Note: Play functions cannot be stored directly in JSON due to serialization limitations.
+ * For interactive stories that need play functions:
+ * 1. Define the story structure in features.json (args, parameters)
+ * 2. Add play functions manually in the .stories.tsx file after generation
+ * 
+ * Example:
+ * ```typescript
+ * export const Interactive: Story = {
+ *   ...generateStory(storyConfig),
+ *   play: async ({ canvasElement }) => {
+ *     // Your play function here
+ *   }
+ * };
+ * ```
  */
 export function generateStory<T>(
   storyConfig: StorybookStory
@@ -34,8 +49,6 @@ export function generateStory<T>(
     name: storyConfig.name,
     args: storyConfig.args || {},
     parameters: storyConfig.parameters,
-    // Note: play functions would need to be converted from strings to actual functions
-    // This is a limitation of JSON - we can only store the play steps as strings
   };
 }
 

tests/utils/playbookRunner.ts

@@ -55,13 +55,10 @@ export async function executeStep(page: Page, step: PlaywrightStep, variables: R
       } else if (text && selector) {
         await expect(page.locator(selector)).toContainText(text);
       } else if (text) {
-        // Check for status code in text
-        const statusCode = parseInt(text, 10);
-        if (!isNaN(statusCode)) {
-          // This is a status code check - would need API interception
-          // For now, we skip this as it requires special handling
-          console.warn(`Status code check (${statusCode}) not yet implemented in playbook runner`);
-        }
+        // Note: Status code checks require special handling in Playwright
+        // They are not directly supported in playbooks and should be handled
+        // with API route interception in custom tests
+        console.warn('Status code checks should be implemented in custom test files, not playbooks');
       }
       break;
 
@@ -72,7 +69,11 @@ export async function executeStep(page: Page, step: PlaywrightStep, variables: R
       const uniqueId = `${timestamp}-${random}`;
       
       if (selector) {
-        const safeSelector = selector.replace(/[^a-z0-9]/gi, '_');
+        // Sanitize selector for use in filename
+        const safeSelector = selector
+          .replace(/[^a-z0-9]/gi, '_')  // Replace non-alphanumeric with underscore
+          .replace(/_+/g, '_')            // Replace multiple underscores with single
+          .replace(/^_|_$/g, '');         // Remove leading/trailing underscores
         await page.locator(selector).screenshot({ 
           path: `screenshots/${uniqueId}-${safeSelector}.png` 
         });