design-system/src/design-system/primitives/InlineEdit/InlineEdit.tsx

import { useState, useRef, useEffect } from 'react'
import styles from './InlineEdit.module.css'

export interface InlineEditProps {
  value: string
  onSave: (value: string) => void
  placeholder?: string
  disabled?: boolean
  className?: string
}

export function InlineEdit({ value, onSave, placeholder, disabled, className }: InlineEditProps) {
  const [editing, setEditing] = useState(false)
  const [draft, setDraft] = useState(value)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (editing) {
      inputRef.current?.focus()
      inputRef.current?.select()
    }
  }, [editing])

  function startEdit() {
    if (disabled) return
    setDraft(value)
    setEditing(true)
  }

  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === 'Enter') {
      e.preventDefault()
      setEditing(false)
      onSave(draft)
    } else if (e.key === 'Escape') {
      setEditing(false)
    }
  }

  function handleBlur() {
    setEditing(false)
  }

  if (editing) {
    return (
      <input
        ref={inputRef}
        className={`${styles.input} ${className ?? ''}`}
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
      />
    )
  }

  const isEmpty = !value
  return (
    <span className={`${styles.display} ${disabled ? styles.disabled : ''} ${className ?? ''}`}>
      <span
        className={isEmpty ? styles.placeholder : styles.value}
        role="button"
        tabIndex={disabled ? undefined : 0}
        onClick={startEdit}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            startEdit()
          }
        }}
      >
        {isEmpty ? placeholder : value}
      </span>
      {!disabled && (
        <button
          className={styles.editBtn}
          onClick={startEdit}
          aria-label="Edit"
          type="button"
        >
          ✎
        </button>
      )}
    </span>
  )
}