Super Mocks

React library for automatic test data generation using artificial intelligence. Analyzes form context and automatically fills fields with realistic AI-generated data.

Features

- AI-powered mock generation (OpenAI GPT or Google Gemini)
- Automatic form context analysis
- Automatic detection of types, validations, and constraints
- Support for native forms, React Hook Form, and other state managers
- Full TypeScript support
- Customizable and extensible

Installation

``bash
npm install super-mocks
`

Configuration

Configure the library once at the start of your application:

`tsx
import { configure } from 'super-mocks';

configure({
apiKey: process.env.REACT_APP_OPENAI_API_KEY || 'your-api-key',
provider: 'openai', // 'openai' or 'gemini'
model: 'gpt-4o-mini', // optional
temperature: 0.7, // optional, default 0.7
maxTokens: 1000, // optional, default 1000
});
`

$3

- OpenAI: GPT-4, GPT-3.5, GPT-4o-mini
- Google Gemini: gemini-1.5-flash (default), gemini-1.5-pro, gemini-pro

Basic Usage

`tsx
import React from 'react';
import { SuperMocksButton } from 'super-mocks';

function MyForm() {
return (

);
}

`

Playground

Try Super Mocks in a live interactive environment:

Super Mocks Playground

The playground includes interactive examples demonstrating:
- Basic form filling
- React Hook Form integration
- Custom configurations
- Multiple field types
- Real-time AI generation

Visit the playground to see Super Mocks in action without any setup required.

Examples

$3

`tsx
import { useForm } from 'react-hook-form';
import { SuperMocksButton } from 'super-mocks';

function MyForm() {
const { register, handleSubmit } = useForm();

return (

);
}

`

$3

`tsx
import { useRef } from 'react';
import { SuperMocksButton } from 'super-mocks';

function MyForm() {
const formRef = useRef(null);

return (

);
}
`

$3

`tsx
onMockGenerated={(data) => {
console.log('Generated data:', data);
}}
onError={(error) => {
console.error('Error:', error);
}}
/>
`

API

$3

Configures the library with credentials and options.

Parameters:
- apiKey: string - API key (required)
- provider?: 'openai' | 'gemini' - AI provider (default: 'openai')
- model?: string - Model to use (default depends on provider)
- temperature?: number - Creativity 0-1 (default: 0.7)
- maxTokens?: number - Maximum tokens (default: 1000)

$3

React component that adds an auto-fill button.

Props:
- componentName?: string - Component name (optional)
- containerRef?: RefObject - Reference to form container
- label?: string - Button text (default: "Auto Fill with AI")
- size?: 'small' | 'medium' | 'large' - Button size
- variant?: 'primary' | 'secondary' | 'outline' - Visual variant
- onMockGenerated?: (data: any) => void - Callback when mock is generated
- onError?: (error: Error) => void - Error callback
- className?: string - Additional CSS classes
- style?: CSSProperties - Inline styles

How It Works

1. Analysis: Automatically detects form fields (inputs, textareas, selects)
2. Context: Extracts types, validations, constraints, and options
3. Generation: Sends context to AI which generates realistic data
4. Filling: Fills fields using React-compatible events

Compatibility

Works with:
- Create React App
- Vite
- Next.js (may need to import CSS explicitly: import 'super-mocks/styles')
- Webpack, Parcel, and other modern bundlers
- TypeScript and JavaScript
- React Hook Form, Formik, and native forms

Requirements:
- React >= 16.8.0
- React DOM >= 16.8.0
- Node.js >= 14.0.0

Supported Field Types

The library automatically detects:
- input[type="text"] → String
- input[type="email"] → Valid email
- input[type="number"] → Number (respects min/max)
- input[type="tel"] → Phone
- input[type="date"] → Date
- input[type="checkbox"] → Boolean
- input[type="radio"] → String
- textarea → Long text
- select → Select options

Customization

$3

- primary - Purple gradient (default)
- secondary - Gray
- outline - Transparent background with border

$3

- small - Small
- medium - Medium (default)
- large - Large

$3

`css
.super-mocks-button {
/ your styles /
}
`

Security

Important: Never commit API keys in code. Use environment variables:

`tsx
configure({
apiKey: process.env.REACT_APP_OPENAI_API_KEY || '',
});
`

Troubleshooting

$3

Make sure to call configure() before using the component.

$3

Place the button inside the form or use containerRef.

$3

- Verify fields have name or id attributes
- Ensure the container is correct

$3

Import explicitly:
`tsx
import 'super-mocks/styles';
``

Contributing

Contributions are welcome. Open an issue or pull request on GitHub.

License

MIT

Support

For issues or questions, open an issue.