Add routine exercise configuration shell

apps/web/src/components/ui/number-stepper.tsx

@@ -0,0 +1,83 @@
+import { Minus, Plus } from 'lucide-react';
+import { useState } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Button } from './button';
+
+type NumberStepperProps = {
+  defaultValue: number;
+  id: string;
+  min?: number;
+};
+
+export function NumberStepper({
+  defaultValue,
+  id,
+  min = 1,
+}: NumberStepperProps) {
+  const [value, setValue] = useState<number | string>(defaultValue);
+
+  const decreaseValue = () => {
+    setValue((currentValue) => Math.max(min, Number(currentValue || min) - 1));
+  };
+
+  const increaseValue = () => {
+    setValue((currentValue) => Number(currentValue || min) + 1);
+  };
+
+  const finishEditing = () => {
+    if (value === '' || Number(value) < min) {
+      setValue(min);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'grid h-10 w-40 grid-cols-[2.5rem_1fr_2.5rem] overflow-hidden rounded-md border',
+        'border-input bg-surface-elevated',
+      )}
+    >
+      <Button
+        aria-label="Decrease value"
+        className="h-full rounded-none border-r"
+        disabled={Number(value) <= min}
+        onClick={decreaseValue}
+        size="icon"
+        type="button"
+        variant="ghost"
+      >
+        <Minus aria-hidden="true" className="size-4" />
+      </Button>
+
+      <input
+        className="w-full min-w-0 bg-transparent px-1 text-center text-sm font-medium outline-none"
+        id={id}
+        min={min}
+        onBlur={finishEditing}
+        inputMode="numeric"
+        onChange={(event) => {
+          const nextValue = event.target.value;
+
+          if (nextValue === '' || /^\d+$/.test(nextValue)) {
+            setValue(nextValue);
+          }
+        }}
+        type="number"
+        value={value}
+      />
+
+      <Button
+        aria-label="Increase value"
+        className="h-full rounded-none border-l"
+        onClick={increaseValue}
+        size="icon"
+        type="button"
+        variant="ghost"
+      >
+        <Plus aria-hidden="true" className="size-4" />
+      </Button>
+    </div>
+  );
+}

apps/web/src/components/ui/positive-integer-input.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { Input } from './input';
+
+type PositiveIntegerInputProps = {
+  className?: string;
+  defaultValue: number;
+  id: string;
+};
+
+export function PositiveIntegerInput({
+  defaultValue,
+  id,
+  className,
+}: PositiveIntegerInputProps) {
+  const [value, setValue] = useState<number | string>(defaultValue);
+
+  const finishEditing = () => {
+    if (value === '' || Number(value) < 1) {
+      setValue(1);
+    }
+  };
+
+  return (
+    <Input
+      className={className}
+      id={id}
+      inputMode="numeric"
+      min="1"
+      onBlur={finishEditing}
+      onChange={(event) => {
+        const nextValue = event.target.value;
+
+        if (nextValue === '' || /^\d+$/.test(nextValue)) {
+          setValue(nextValue);
+        }
+      }}
+      type="number"
+      value={value}
+    />
+  );
+}

apps/web/src/features/routines/exercise-configuration.test.tsx

@@ -0,0 +1,63 @@
+/** Verifies selected exercise data is shown in the configuration shell. */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from '@tanstack/react-router';
+import { cleanup, render, screen } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+import { afterEach, expect, it, vi } from 'vitest';
+
+import { ExerciseConfiguration } from './exercise-configuration';
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function Wrapper({ children }: PropsWithChildren) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const rootRoute = createRootRoute({ component: () => children });
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+    routeTree: rootRoute,
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  );
+}
+
+it('shows the selected exercise and initial configuration fields', async () => {
+  const exerciseId = '26d34dc0-8e4c-4bd0-9e3b-7b839b44e486';
+  vi.stubGlobal(
+    'fetch',
+    vi.fn().mockResolvedValue(
+      Response.json({
+        exercises: [
+          {
+            id: exerciseId,
+            name: 'Bicep Curl',
+            description: null,
+            isCustom: false,
+          },
+        ],
+      }),
+    ),
+  );
+
+  render(<ExerciseConfiguration exerciseId={exerciseId} />, {
+    wrapper: Wrapper,
+  });
+
+  expect(await screen.findByText('Bicep Curl')).toBeVisible();
+  expect(screen.getByLabelText('Sets')).toHaveValue(3);
+  expect(screen.getByLabelText('Reps')).toHaveValue(8);
+  expect(screen.getByRole('button', { name: 'Done' })).toBeDisabled();
+});