Practical Examples

Simple Alert Modal

const AlertModal = modal({ id: 'ALERT' })
  .props({
    style: ['modal', 'alert'],
    showClose: true
  })
  .content((props) => {
    const { toggle, title = 'Alert', message } = props
    
    return (
      <div>
        <h2>{title}</h2>
        <p>{message}</p>
        <button onClick={toggle}>OK</button>
      </div>
    )
  })

// Use anywhere
AlertModal.open({ 
  title: 'Error!', 
  message: 'Something went wrong' 
})

Confirmation Modal

const ConfirmModal = modal({ id: 'CONFIRM' })
  .content((props) => {
    const { 
      toggle, 
      request,
      title = 'Confirmation',
      message,
      confirmText = 'Confirm',
      cancelText = 'Cancel'
    } = props
    
    return (
      <div>
        <h2>{title}</h2>
        <p>{message}</p>
        <div style={{ display: 'flex', gap: '10px' }}>
          <button onClick={() => request.resolve(false)}>
            {cancelText}
          </button>
          <button onClick={() => request.resolve(true)}>
            {confirmText}
          </button>
        </div>
      </div>
    )
  })

// Helper function
async function confirm(message, options = {}) {
  return ConfirmModal.request({
    message,
    ...options
  })
}

// Usage
if (await confirm('Do you want to delete this item?')) {
  // Delete item
}

if (await confirm('Save changes?', { 
  confirmText: 'Save',
  cancelText: 'Discard' 
})) {
  // Save
}

Form Modal

const FormModal = modal({ id: 'USER_FORM' })
  .content((props) => {
    const { toggle, request, user = {}, mode = 'create' } = props
    const [formData, setFormData] = useState(user)
    
    const handleSubmit = (e) => {
      e.preventDefault()
      // Validate and submit
      request.resolve({ 
        saved: true, 
        user: formData 
      })
    }
    
    const handleCancel = () => {
      request.resolve({ saved: false })
    }
    
    return (
      <form onSubmit={handleSubmit}>
        <h2>{mode === 'edit' ? 'Edit' : 'Create'} User</h2>
        
        <input
          type="text"
          placeholder="Name"
          value={formData.name || ''}
          onChange={(e) => setFormData({
            ...formData, 
            name: e.target.value
          })}
        />
        
        <input
          type="email"
          placeholder="Email"
          value={formData.email || ''}
          onChange={(e) => setFormData({
            ...formData, 
            email: e.target.value
          })}
        />
        
        <div>
          <button type="button" onClick={handleCancel}>
            Cancel
          </button>
          <button type="submit">
            {mode === 'edit' ? 'Save' : 'Create'}
          </button>
        </div>
      </form>
    )
  })

// Create user
const result = await FormModal.request({ mode: 'create' })
if (result.saved) {
  console.log('User created:', result.user)
}

// Edit user
const result2 = await FormModal.request({ 
  mode: 'edit',
  user: { id: 1, name: 'John', email: 'john@email.com' }
})

Selection Modal

const SelectModal = modal({ id: 'SELECT_FILTER' })
  .props({
    style: ['modal', 'fullHeight'],
    title: 'Select Item'
  })
  .content((props) => {
    const {
      toggle,
      request,
      title,
      items = [],
      multiple = false,
      searchable = true
    } = props
    
    const [selected, setSelected] = useState([])
    const [search, setSearch] = useState('')
    
    const filteredItems = items.filter(item =>
      item.label.toLowerCase().includes(search.toLowerCase())
    )
    
    const handleSelect = (item) => {
      if (multiple) {
        setSelected(prev => 
          prev.find(i => i.value === item.value)
            ? prev.filter(i => i.value !== item.value)
            : [...prev, item]
        )
      } else {
        // Single selection - resolve immediately
        request.resolve({ selectedItems: [item] })
      }
    }
    
    const handleConfirm = () => {
      request.resolve({ selectedItems: selected })
    }
    
    return (
      <div>
        <h2>{title}</h2>
        
        {searchable && (
          <input
            type="text"
            placeholder="Search..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        )}
        
        <div className="items-list">
          {filteredItems.map(item => (
            <button
              key={item.value}
              onClick={() => handleSelect(item)}
              className={selected.find(s => s.value === item.value) ? 'selected' : ''}
            >
              {item.label}
            </button>
          ))}
        </div>
        
        {multiple && (
          <div>
            <button onClick={toggle}>Cancel</button>
            <button onClick={handleConfirm}>
              Confirm ({selected.length})
            </button>
          </div>
        )}
      </div>
    )
  })

// Single selection
const category = await SelectModal.request({
  title: 'Select Category',
  items: [
    { value: 'tech', label: 'Technology' },
    { value: 'design', label: 'Design' },
    { value: 'business', label: 'Business' }
  ],
  multiple: false
})

console.log('Selected category:', category.selectedItems[0])

// Multiple selection
const tags = await SelectModal.request({
  title: 'Select Tags',
  items: [...],
  multiple: true,
  searchable: true
})

console.log('Selected tags:', tags.selectedItems)