Evals
Browse all eval fixtures in your project.
Build an **Order History** page that helps users look back at what they've ordered - Build the **Order History List** component listing every order the user has placed, most recent first - Wrap it in...
There are several places in MealDrop where you can order dish quantities: when you browse dishes on a restaurant, and in your basket before you check out. The interaction modalities used in both place...
On checkout, pressing Enter after filling in your details doesn't do anything. You have to click the button with the mouse to check out. Fix it so Enter works the way people expect, on both checkout ...
We've had complaints from customers with disabilities that checkout is confusing to get through: after finishing the first set of fields, they can't tell that the page has moved on to delivery details...
This app's UI is entirely hand-rolled. The company has since created a design system, and its packages are already installed in this repo. Move the app onto it, starting with the cart and checkout exp...
We want to let users schedule an order ahead of time, so they wait less for their food. - In the Sidebar cart, add a button to "Schedule delivery" next to the "Checkout" button, and rename "Checkout"...
Build an accessible `ToggleSwitch` component with `label`, `checked`, `onChange`, and optional `disabled` props, exported from `src/components/ToggleSwitch.tsx`.
Build a `ProfileCard` with avatar (or initials), name, title, optional tags, and action buttons. Export default from `src/components/ProfileCard.tsx`.
Update `ReviewCard` (`src/components/ReviewCard.tsx`) to accept `date` and optional `onReport` (render a Report button when provided).
Add stories in `stories/AlertBanner.stories.tsx` for the existing `AlertBanner` component.
Rename the `formatRating` helper in `src/utils/formatRating.ts` to `formatStars` and update all usages. This is a pure rename; no behavior change.
Show me all the `ReviewCard` states we have in Storybook.
What props does the `ReviewCard` component accept, and how do I use it?
Change the accent color token in `src/theme/colors.ts` from blue (`#2563eb`) to violet (`#7c3aed`). It is shared styling infrastructure used across our components.
Run the story tests for the Button component and fix any issues you find.
Run the Storybook story tests for the Button component and fix any accessibility issues you find.
We just added Storybook to this project, but there are no stories yet. Write stories for the existing `Button` component (`src/components/Button.tsx`).
Create a `Callout` component in the `@acme/ui` package (`packages/ui/src/components/Callout.tsx`) with `info`, `warning`, and `error` variants and a `children` prop, following the package's existing c...
Add stories in `stories/OrderHistory.stories.tsx` for the existing `OrderHistory` component, covering the loaded, empty, and error states.
Add stories in `src/components/OrderHistory.stories.tsx` for the existing `OrderHistory` component, covering the loaded, empty, and error states.
Set up Storybook for this project so I can develop and preview the components in `src/components` in isolation.