docs: tsx,todo,select (2 files)

docs/todo/0-kickstart.md

@@ -19,7 +19,7 @@ Use this file when you’re not sure what to do next, or you want a quick “mak
 
 Run from `frontends/nextjs/`:
 
-From repo root: `cd frontends/nextjs`
+From repo root: `cd frontends/nextjs` (or from `docs/todo/`: `cd ../../frontends/nextjs`)
 
 - [ ] `npm ci` (or `npm install`)
 - [ ] `npm run typecheck`

frontends/nextjs/src/components/molecules/Select.tsx

@@ -14,20 +14,21 @@ import {
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 
 // Select wrapper with FormControl
-export interface SelectProps extends Omit<MuiSelectProps, 'onChange'> {
+export interface SelectProps extends Omit<MuiSelectProps<string>, 'onChange'> {
   onValueChange?: (value: string) => void
   helperText?: ReactNode
 }
 
 const Select = forwardRef<HTMLDivElement, SelectProps>(
-  ({ onValueChange, value, defaultValue, label, error, helperText, children, sx, ...props }, ref) => {
+  ({ onValueChange, value, defaultValue, label, error, helperText, children, sx, variant = 'outlined', ...props }, ref) => {
     return (
       <FormControl ref={ref} fullWidth error={error} sx={sx}>
         {label && <InputLabel>{label}</InputLabel>}
-        <MuiSelect
+        <MuiSelect<string>
           value={value}
           defaultValue={defaultValue}
           label={label}
+          variant={variant}
           onChange={(e) => onValueChange?.(e.target.value as string)}
           IconComponent={KeyboardArrowDownIcon}
           {...props}