import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './VaultField.stories'

<Meta of={Stories} />

# VaultField

A credential input form for API keys, secrets, and integration credentials. Features integration branding with logo support.

## Usage

```tsx
import { VaultField } from '@/components/onboarding'

<VaultField
  integration={{
    name: 'Stripe',
    logoUrl: 'https://cdn.brandfetch.io/idxAg10C0L/symbol.svg',
  }}
  fields={[
    { key: 'publishableKey', label: 'Publishable Key', required: true },
    { key: 'secretKey', label: 'Secret Key', required: true },
  ]}
  values={values}
  onChange={setValues}
  onSave={handleSave}
  onCancel={handleCancel}
  loading={isSaving}
/>
```

## Props

- `integration`: Object with `name` and optional `logoUrl`
- `title`: Fallback title when no integration provided (default: "Add Credential")
- `fields`: Array of 1-6 field configs with `key`, `label`, `placeholder`, `required`, `type`
- `type`: Defaults to `'password'` for security, use `'text'` for non-sensitive fields

## Examples

### Default (Generic)

<Canvas of={Stories.Default} />

### With Integration Logo

<Canvas of={Stories.WithIntegration} />

### OpenAI

<Canvas of={Stories.OpenAI} />

### AWS Credentials

<Canvas of={Stories.AWS} />

### Database Credentials

<Canvas of={Stories.DatabaseCredentials} />

### Loading State

<Canvas of={Stories.Loading} />

### Disabled

<Canvas of={Stories.Disabled} />