Add basic Radix eval

.gitignore

@@ -10,3 +10,4 @@ test-report.junit.xml
 .turbo
 
 *storybook.log
+experiments/

eval/evals/120-flight-booking-radix/expected/stories/FlightBooking.stories.tsx

@@ -0,0 +1,82 @@
+import FlightBookingComponent from '../src/components/FlightBooking.tsx';
+import { userEvent, fn, expect, screen } from 'storybook/test';
+import React from 'react';
+
+import '@radix-ui/colors/gray.css';
+import '@radix-ui/colors/blue.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/purple.css';
+import '@radix-ui/colors/gray-dark.css';
+import '@radix-ui/colors/blue-dark.css';
+import '@radix-ui/colors/green-dark.css';
+import '@radix-ui/colors/red-dark.css';
+import '@radix-ui/colors/purple-dark.css';
+
+export default {
+  component: FlightBookingComponent,
+  args: {
+    onSubmit: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '40px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Initial = {};
+
+export const FlightPicker = {
+  play: async ({ canvas }) => {
+    await userEvent.click(await canvas.findByText('From'));
+    await expect(await screen.findByText('MEL', { exact: false })).toBeInTheDocument();
+  },
+};
+
+export const DatePicker = {
+  play: async ({ canvas }) => {
+    await userEvent.click(await canvas.findByRole('button', { name: 'Departure Date' }));
+    await expect(await screen.findByText('27')).toBeInTheDocument();
+  },
+};
+
+export const ReturnDatePickerIsUnavailableWhenOneWaySelected = {
+  play: async ({ canvas }) => {
+    await userEvent.click(await canvas.findByText('One Way'));
+
+    const returnDatepicker = await canvas.queryByRole('button', { name: 'Return Date' });
+
+    // If the return datepicker exists, ensure it's disabled by trying to open it
+    if (returnDatepicker) {
+      await userEvent.click(returnDatepicker);
+      await expect(await canvas.queryByText('28')).not.toBeInTheDocument();
+    } else {
+      await expect(returnDatepicker).toBeNull();
+    }
+  },
+};
+
+export const Submitted = {
+  play: async ({ canvas, canvasElement, args }) => {
+    await userEvent.click(await canvas.findByRole('button', { name: 'Return' }));
+    await userEvent.click(await canvas.findByText('From'));
+    await userEvent.click(await screen.findByText('MEL', { exact: false }));
+
+    await userEvent.click(await canvas.findByText('To'));
+    await userEvent.click(await screen.findByText('LAX', { exact: false }));
+
+    await userEvent.click(await canvas.findByRole('button', { name: 'Departure Date' }));
+    await userEvent.click(await screen.findByText('27'));
+    await userEvent.click(canvasElement); // dismiss datepicker popover
+
+    await userEvent.click(await canvas.findByRole('button', { name: 'Return Date' }));
+    await userEvent.click(await screen.findByText('28'));
+    await userEvent.click(canvasElement); // dismiss datepicker popover
+
+    await userEvent.click(await canvas.findByText('Search Flights'));
+    await expect(args.onSubmit).toHaveBeenCalledOnce();
+  },
+};

eval/evals/120-flight-booking-radix/hooks.ts

@@ -0,0 +1,21 @@
+import type { Hooks } from '../../types.ts';
+import { addDependency } from 'nypm';
+
+const hooks: Hooks = {
+  postPrepareExperiment: async (experimentArgs, log) => {
+    log.message('Installing the radix-ui package');
+    const options = {
+      cwd: experimentArgs.projectPath,
+      silent: true,
+    };
+    await addDependency('radix-ui@^1.4.3', options);
+    await addDependency('@radix-ui/react-popover@^1.1.15', options);
+    await addDependency('@radix-ui/react-toggle@^1.1.10', options);
+    await addDependency('@radix-ui/react-toggle-group@^1.1.0', options);
+    await addDependency('@radix-ui/colors@^3.0.0', options);
+
+    log.success('Radix UI package installed');
+  },
+};
+
+export default hooks;

eval/evals/120-flight-booking-radix/mcp.config.json

@@ -0,0 +1,6 @@
+{
+  "radix-mcp": {
+    "type": "http",
+    "url": "http://localhost:6006/mcp"
+  }
+}

eval/evals/120-flight-booking-radix/prompt.md

@@ -0,0 +1,35 @@
+Create a flight booking component that includes:
+
+- An autocomplete component for choosing source and destination from the following list of airports:
+SYD: – Sydney Airport, Australia
+MEL: – Melbourne Airport (Tullamarine), Australia
+LAX: – Los Angeles International Airport, USA
+JFK: – John F. Kennedy International Airport, New York, USA
+LHR: – Heathrow Airport, London, UK
+CDG: – Charles de Gaulle Airport, Paris, France
+ATL: – Hartsfield–Jackson Atlanta International Airport, USA
+DXB: – Dubai International Airport, UAE
+HKG: – Hong Kong International Airport, Hong Kong
+BNE: – Brisbane Airport, Australia
+PER: – Perth Airport, Australia
+DFW: – Dallas Fort Worth International Airport, USA
+
+- A toggle button for return vs one way
+- One or two date selects that when clicked on triggers a popover with a calendar widget.
+
+The calendar widget shouldn't allow selecting dates in the past and the return flight must be after the departure flight.
+
+<technical_requirements>
+  1. The <FlightBooking /> component MUST be a default export in src/components/FlightBooking.tsx
+  2. The <FlightBooking /> component MUST be added to the main.tsx file as the ONLY component being rendered
+  3. The <FlightBooking /> component MUST take an optional onSubmit() prop that is called when the submit button is clicked
+  4. The element for the "One Way"-toggle SHOULD have "One Way" as its only content
+  5. The element for the "Return"-toggle SHOULD have a "Return" as its only content
+  6. The autocomplete to open the From airport picker SHOULD have "From" as its placeholder
+  7. The autocomplete to open the To airport picker SHOULD have "To" as its placeholder
+  8. Each element to select an airport in the pickers SHOULD have include both the shortcode and full airport name in its content
+  9. The element to open the Departure Date date select SHOULD have "Departure Date" as its initial content
+  10. The (optional) element to open the Return Date date select SHOULD have "Return Date" as its initial content
+  11. Each date in the date selects SHOULD the day of month as its only content
+  12. The submit button SHOULD have "Search Flights" as its only content
+</technical_requirements>

eval/evals/120-flight-booking-radix/read-from-node_modules.md

@@ -0,0 +1 @@
+To get information about the Radix design system, inspect the node_modules/radix-ui directory, where you'll find all the components.

eval/evals/130-flight-booking-rsuite/expected/stories/FlightBooking.stories.tsx

@@ -0,0 +1,65 @@
+import FlightBookingComponent from '../src/components/FlightBooking.tsx';
+import { userEvent, fn, expect, screen } from 'storybook/test';
+import React from 'react';
+import 'rsuite/dist/rsuite.min.css';
+
+export default {
+  component: FlightBookingComponent,
+  args: {
+    onSubmit: fn(),
+  },
+};
+
+export const Initial = {};
+
+export const FlightPicker = {
+  play: async ({ canvas }) => {
+    await userEvent.click(await canvas.findByText('From'));
+    await expect(await screen.findByText('MEL', { exact: false })).toBeInTheDocument();
+  },
+};
+
+export const DatePicker = {
+  play: async ({ canvas }) => {
+    await userEvent.click(await canvas.findByRole('button', { name: 'Departure Date' }));
+    await expect(await screen.findByText('27')).toBeInTheDocument();
+  },
+};
+
+export const ReturnDatePickerIsUnavailableWhenOneWaySelected = {
+  play: async ({ canvas }) => {
+    await userEvent.click(await canvas.findByText('One Way'));
+
+    const returnDatepicker = await canvas.queryByRole('button', { name: 'Return Date' });
+
+    // If the return datepicker exists, ensure it's disabled by trying to open it
+    if (returnDatepicker) {
+      await userEvent.click(returnDatepicker);
+      await expect(await canvas.queryByText('28')).not.toBeInTheDocument();
+    } else {
+      await expect(returnDatepicker).toBeNull();
+    }
+  },
+};
+
+export const Submitted = {
+  play: async ({ canvas, canvasElement, args }) => {
+    await userEvent.click(await canvas.findByRole('button', { name: 'Return' }));
+    await userEvent.click(await canvas.findByText('From'));
+    await userEvent.click(await screen.findByText('MEL', { exact: false }));
+
+    await userEvent.click(await canvas.findByText('To'));
+    await userEvent.click(await screen.findByText('LAX', { exact: false }));
+
+    await userEvent.click(await canvas.findByRole('button', { name: 'Departure Date' }));
+    await userEvent.click(await screen.findByText('27'));
+    await userEvent.click(canvasElement); // dismiss datepicker popover
+
+    await userEvent.click(await canvas.findByRole('button', { name: 'Return Date' }));
+    await userEvent.click(await screen.findByText('28'));
+    await userEvent.click(canvasElement); // dismiss datepicker popover
+
+    await userEvent.click(await canvas.findByText('Search Flights'));
+    await expect(args.onSubmit).toHaveBeenCalledOnce();
+  },
+};

eval/evals/130-flight-booking-rsuite/hooks.ts

@@ -0,0 +1,17 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
+import type { Hooks } from '../../types.ts';
+import { addDependency } from 'nypm';
+
+const hooks: Hooks = {
+  postPrepareExperiment: async (experimentArgs, log) => {
+    log.message('Installing the rsuite package');
+    await addDependency('rsuite@latest', {
+      cwd: experimentArgs.projectPath,
+      silent: true,
+    });
+    log.success('Rsuite package installed');
+  },
+};
+
+export default hooks;

eval/evals/130-flight-booking-rsuite/mcp.config.json

@@ -0,0 +1,6 @@
+{
+  "reshaped-mcp": {
+    "type": "http",
+    "url": "http://localhost:6006/mcp"
+  }
+}

eval/evals/130-flight-booking-rsuite/prompt.md

@@ -0,0 +1,35 @@
+Create a flight booking component that includes:
+
+- An autocomplete component for choosing source and destination from the following list of airports:
+SYD: – Sydney Airport, Australia
+MEL: – Melbourne Airport (Tullamarine), Australia
+LAX: – Los Angeles International Airport, USA
+JFK: – John F. Kennedy International Airport, New York, USA
+LHR: – Heathrow Airport, London, UK
+CDG: – Charles de Gaulle Airport, Paris, France
+ATL: – Hartsfield–Jackson Atlanta International Airport, USA
+DXB: – Dubai International Airport, UAE
+HKG: – Hong Kong International Airport, Hong Kong
+BNE: – Brisbane Airport, Australia
+PER: – Perth Airport, Australia
+DFW: – Dallas Fort Worth International Airport, USA
+
+- A toggle button for return vs one way
+- One or two date selects that when clicked on triggers a popover with a calendar widget.
+
+The calendar widget shouldn't allow selecting dates in the past and the return flight must be after the departure flight.
+
+<technical_requirements>
+  1. The <FlightBooking /> component MUST be a default export in src/components/FlightBooking.tsx
+  2. The <FlightBooking /> component MUST be added to the main.tsx file as the ONLY component being rendered
+  3. The <FlightBooking /> component MUST take an optional onSubmit() prop that is called when the submit button is clicked
+  4. The element for the "One Way"-toggle SHOULD have "One Way" as its only content
+  5. The element for the "Return"-toggle SHOULD have a "Return" as its only content
+  6. The autocomplete to open the From airport picker SHOULD have "From" as its placeholder
+  7. The autocomplete to open the To airport picker SHOULD have "To" as its placeholder
+  8. Each element to select an airport in the pickers SHOULD have include both the shortcode and full airport name in its content
+  9. The element to open the Departure Date date select SHOULD have "Departure Date" as its initial content
+  10. The (optional) element to open the Return Date date select SHOULD have "Return Date" as its initial content
+  11. Each date in the date selects SHOULD the day of month as its only content
+  12. The submit button SHOULD have "Search Flights" as its only content
+</technical_requirements>

eval/evals/130-flight-booking-rsuite/read-from-node_modules.md

@@ -0,0 +1 @@
+To get information about the Rsuite design system, inspect the node_modules/rsuite directory, where you'll find all the components.