# All files / src/components CreateTypeDialog.tsx

88.88% Statements 16/18
66.66% Branches 4/6
83.33% Functions 5/6
93.33% Lines 14/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65

    51x
    51x

    51x
    18x
    7x
    7x

    51x
    3x
    3x
    3x
    2x
    2x

    51x

    4x

     import { useState, useRef, useEffect } from 'react'
    import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
    import { Button } from '@/components/ui/button'
    import { Input } from '@/components/ui/input'

    interface CreateTypeDialogProps {
      open: boolean
      onClose: () => void
      onCreate: (name: string) => void
    }

    export function CreateTypeDialog({ open, onClose, onCreate }: CreateTypeDialogProps) {
      const [name, setName] = useState('')
      const inputRef = useRef<HTMLInputElement>(null)

      useEffect(() => {
        if (open) {
          setName('') // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
          setTimeout(() => inputRef.current?.focus(), 50)
        }
      }, [open])

      const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        const trimmed = name.trim()
        if (!trimmed) return
        onCreate(trimmed)
        onClose()
      }

      return (
        <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
          <DialogContent showCloseButton={false} className="sm:max-w-[380px]">
            <DialogHeader>
              <DialogTitle>Create New Type</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-1.5">
                <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                  Type Name
                </label>
                <Input
                  ref={inputRef}
                  placeholder="e.g. Recipe, Book, Habit..."
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                />
                <p className="text-xs text-muted-foreground">
                  Creates a type document. Its properties become defaults for new docs of this type.
                </p>
              </div>
              <DialogFooter>
                <Button type="button" variant="outline" onClick={onClose}>
                  Cancel
                </Button>
                <Button type="submit" disabled={!name.trim()}>
                  Create
                </Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>
      )
    }