align input cursor

src/components/Cell.tsx

@@ -1,22 +1,63 @@
 import { Input, Box } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef, useEffect } from 'react';
 
 interface Props {
   value: string;
   onChange: (newValue: string) => void;
+  focused: boolean;
 }
 
-const Cell: React.FC<Props> = ({ value, onChange }) => {
+export function formatToCurrency(value: string): string {
+  if (value === '') return '';
+
+  const num = Number(value.replace(/[^0-9.-]/g, ''));
+  if (isNaN(num)) return value;
+
+  return num.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 0,
+  });
+}
+
+const Cell: React.FC<Props> = ({ value, onChange, focused }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (focused) {
+      inputRef.current?.focus();
+    }
+  }, [focused]);
+
+  // when focused, show unfromatted value
+  // when not focused, show currency format
+  const displayValue = focused ? value : formatToCurrency(value);
+
   const onChangeHandler = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (ev) => {
-      onChange(ev.target.value);
+      const raw = ev.target.value.replace(/[^0-9.-]/g, "");
+      onChange(raw);
     },
     [onChange],
   );
 
   return (
-    <Box>
-      <Input value={value} borderRadius={0} width="full" onChange={onChangeHandler} />
+    <Box width="100%" height="100%">
+      <Input
+        ref={inputRef}
+        value={displayValue}
+        onChange={onChangeHandler}
+        borderRadius={0}
+        width="100%"
+        height="100%"
+        padding="0"
+        border="none"
+        outline="none"
+        fontSize="14px"
+        textAlign="right"
+        _focus={{ outline: "none", boxShadow: "none" }}
+      />
     </Box>
   );
 };

src/components/Spreadsheet.tsx

@@ -11,29 +11,102 @@ const Spreadsheet: React.FC = () => {
   const [spreadsheetState, setSpreadsheetState] = useState(
     _.times(NUM_ROWS, () => _.times(NUM_COLUMNS, _.constant(''))),
   );
+  const [selected, setSelected] = useState<{ row: number; col: number } | null>(null);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!selected) return;
+
+      const { row, col } = selected;
+
+      if (e.key === "ArrowUp" && row > 0) {
+        setSelected({ row: row - 1, col });
+      } else if (e.key === "ArrowDown" && row < NUM_ROWS - 1) {
+        setSelected({ row: row + 1, col });
+      } else if (e.key === "ArrowLeft" && col > 0) {
+        setSelected({ row, col: col - 1 });
+      } else if (e.key === "ArrowRight" && col < NUM_COLUMNS - 1) {
+        setSelected({ row, col: col + 1 });
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selected]);
 
   return (
     <Box width="full">
+      <Flex>
+        {/* corner cell */}
+        <Box
+          width="40px"
+          height="32px"
+          border="1px solid #ddd"
+          background="#fafafa"
+        />
+        {/* header labels */}
+        {_.times(NUM_COLUMNS, (colIdx) => (
+          <Box
+            key={`header-${colIdx}`}
+            flex="1"
+            display="flex"
+            alignItems="center"
+            justifyContent="center" 
+            height="32px"
+            border="1px solid #ddd"
+            fontWeight="bold"
+            background="#fafafa"
+          >
+            {String.fromCharCode(65 + colIdx)}
+          </Box>
+        ))}
+      </Flex>
       {spreadsheetState.map((row, rowIdx) => {
         return (
           <Flex key={String(rowIdx)}>
+            <Box
+              width="40px"
+              border="1px solid #ddd"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              fontWeight="bold"
+              background="#fafafa"
+            >
+              {rowIdx + 1}
+            </Box>
+            {/* row labels */}
             {row.map((cellValue, columnIdx) => (
-              <Cell
+              <Box
                 key={`${rowIdx}/${columnIdx}`}
-                value={cellValue}
-                onChange={(newValue: string) => {
-                  const newRow = [
-                    ...spreadsheetState[rowIdx].slice(0, columnIdx),
-                    newValue,
-                    ...spreadsheetState[rowIdx].slice(columnIdx + 1),
-                  ];
-                  setSpreadsheetState([
-                    ...spreadsheetState.slice(0, rowIdx),
-                    newRow,
-                    ...spreadsheetState.slice(rowIdx + 1),
-                  ]);
-                }}
-              />
+                flex="1"
+                height="32px"
+                border="1px solid #ddd"
+                onClick={() => setSelected({ row: rowIdx, col: columnIdx })}
+                background={
+                  selected?.row === rowIdx && selected?.col === columnIdx
+                    ? "#d0e7ff"
+                    : "white"
+                }
+              >
+                <Cell
+                  key={`${rowIdx}/${columnIdx}`}
+                  value={cellValue}
+                  onChange={(newValue: string) => {
+                    const newRow = [
+                      ...spreadsheetState[rowIdx].slice(0, columnIdx),
+                      newValue,
+                      ...spreadsheetState[rowIdx].slice(columnIdx + 1),
+                    ];
+                    setSpreadsheetState([
+                      ...spreadsheetState.slice(0, rowIdx),
+                      newRow,
+                      ...spreadsheetState.slice(rowIdx + 1),
+                    ]);
+                  }}
+                  focused={selected?.row === rowIdx && selected?.col === columnIdx}
+                />
+              </Box>
             ))}
           </Flex>
         );