npm package: @qualtrics/cocreate-guided-modal
Description: A guided modal component for creating AI-powered projects
Latest version: 1.1.0

# cocreate-guided-modal

A React modal component for creating AI-powered projects with a guided experience. The modal includes a form with use case selection and project overview input, integrated with AI-powered project generation.

## Installation

```bash
npm install @qualtrics/cocreate-guided-modal
```

## Requirements

This package has the following peer dependencies:
- React ^18.0.0
- React DOM ^18.2.0
- @qualtrics/ui-react ^2.56.0
- react-hook-form ^7.54.2

Additional dependencies:
- @qualtrics/base-styles ^0.4.1
- @tanstack/react-query ^5.67.2
- axios ^1.8.2

## Features
- Integrated with React Query for API calls
- Form validation using react-hook-form
- Responsive design with custom styling
- Built with @qualtrics/ui-react components
- Automatic redirection after successful submission

## Usage

```tsx
import { GuidedModal } from 'cocreate-guided-modal';
import type { ProjectInputs } from 'cocreate-guided-modal';

function App() {
  const [isOpen, setIsOpen] = React.useState(true);

  return (
    <GuidedModal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
    />
  );
}
```

The component will automatically handle:
- Form state management
- API calls for project creation
- Redirection to the new project on success
- Error handling with fallback to catalog

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| isOpen | boolean | Yes | Controls the visibility of the modal |
| onClose | () => void | No | Callback function when modal is closed. If not provided, the close button will not be shown |

## Types

```typescript
type ProjectInputs = {
  useCase: string;  // Currently defaults to "Voice of Customer"
  prompt: string;   // Free-form text for project details
};
```

## Development

1. Clone the repository
2. Install dependencies:
```bash
npm install
```

3. Available scripts:
```bash
npm run dev        # Start development server with Vite
npm run build     # Build the package using Rollup
npm run preview   # Preview the built package
npm run pack      # Create an npm package
npm run test-local # Build, pack and test the package locally
```

## Testing Locally

To test the package locally:

1. Build and pack the package:
```bash
npm run test-local
```

This will:
- Build the package
- Create a tarball
- Update the local testing environment
- Start the development server

Alternatively, you can manually link the package:

1. Build the package:
```bash
npm run build
```

2. Link the package globally:
```bash
npm link
```

3. In your test project:
```bash
npm link @qualtrics/cocreate-guided-modal
```

4. Import and use the component as shown in the Usage section above.

## Building for Production

To build the package for production:

```bash
npm run build
```

This will generate the following outputs in the `dist` directory:
- CommonJS bundle (dist/index.js)
- ES Module bundle (dist/index.esm.js)
- UMD bundle (dist/index.umd.js)
- TypeScript declarations (dist/index.d.ts)

## Styling

The component uses CSS modules for styling. The following classes are available:
- `.modalBody` - Custom styling for modal body
- `.modalHorizontal` - Horizontal layout container
- `.modalContainer` - Container for modal content
- `.modalP` - Paragraph styling
- `.modalDivider` - Divider line
- `.modalVertical` - Vertical layout container
- `.modalFooter` - Footer styling
- `.modalButtons` - Button container styling

## Contributing

When contributing, please ensure:
1. All new features include proper TypeScript types
2. Maintain existing styling patterns
3. Test thoroughly with the provided test project setup