@citiwave/im-disclaimer-modal/README.md

A customizable React disclaimer modal component with theme support

# IM Disclaimer Modal

> **⚠️ Pre-release Notice:** This package is still under development and should not be considered a beta or production-ready. Use at your own risk.

A React component for displaying and managing user agreements, disclaimers, and consent forms.

## Features

- 🎨 Beautiful, modern UI with customizable themes and colors
- 📱 Fully responsive design
- 💾 Local storage integration for persistent user choices
- 🔒 Required and optional section support
- 🛠️ CLI tool for managing disclaimers
- ⚙️ Configurable settings per disclaimer

## Installation

```bash
npm install @citiwave/im-disclaimer-modal
```

## Quick Start

```tsx
import { DisclaimerModal } from '@citiwave/im-disclaimer-modal';

function App() {
  return (
    <DisclaimerModal
      name="privacy-policy"
      dataPath="src/data/disclaimers"
      className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
    >
      Open Privacy Policy
    </DisclaimerModal>
  );
}
```

## CLI Usage

The package includes a CLI tool for managing disclaimers. After installation, you can use the `im-disclaimer` command.

### Initial Setup

Run the setup command to configure the default directory for storing disclaimers:

```bash
im-disclaimer setup
```

### Creating Disclaimers

Create a new disclaimer with optional properties:

```bash
im-disclaimer create privacy-policy --title "Privacy Policy" --theme dark
im-disclaimer create terms --title "Terms of Service" --default-open true
```

### Managing Disclaimers

List all disclaimers:
```bash
im-disclaimer list
im-disclaimer list --json  # Output in JSON format
```

Update disclaimer properties:
```bash
im-disclaimer set privacy-policy --theme dark --accent "#FF4444" --title "Updated Privacy Policy"
```

Remove a disclaimer:
```bash
im-disclaimer remove privacy-policy
```

### Group Commands

Creating a Group:
```bash
im-disclaimer group create
```

### Props Commands

View props:
```bash
im-disclaimer props
```

Update props:
```bash
im-disclaimer props:update
```

### Configuration

View current configuration:
```bash
im-disclaimer config
```

Update default directory:
```bash
im-disclaimer config:set --default-dir "src/data/disclaimers"
```

## File Structure

The CLI creates and manages two types of files in your disclaimers directory:

### 1. Disclaimer Content (`name.json`)

```json
{
  "section-1": {
    "title": "Section Title",
    "required": true,
    "content": {
      "title": "Content Title",
      "sections": [
        {
          "heading": "Subsection Heading",
          "text": "Main text content",
          "list": [
            "List item 1",
            "List item 2"
          ]
        }
      ]
    }
  }
}
```

### 2. Configuration (`_config.json`)

```json
{
  "privacy-policy": {
    "title": "Privacy Policy",
    "prefix": "my-app",
    "defaultOpen": true,
    "theme": "dark",
    "accent": "#FF4444"
  }
}
```

## Component Props

| Prop | Type | Description |
|------|------|-------------|
| name | string | Name of the disclaimer to load |
| dataPath | string | Path to the disclaimers directory |
| className | string | CSS classes for the trigger button |
| children | ReactNode | Content for the trigger button |

## Advanced Usage

### Custom Storage Prefix

```tsx
const { isOpen, onClose } = useDisclaimer('privacy-policy', {
  storagePrefix: 'my-app',
  defaultOpen: true
});
```

### Theme Customization

```tsx
<DisclaimerModal
  name="privacy-policy"
  dataPath="src/data/disclaimers"
  theme="dark"
  accentColor="#FF4444"
/>
```

### Manual Control

```tsx
const { isOpen, onClose, setAllSectionsAgreed } = useDisclaimer('privacy-policy');

<DisclaimerModal
  isOpen={isOpen}
  onClose={onClose}
  onAllSectionsAgreed={(agreed) => {
    setAllSectionsAgreed(agreed);
    // Additional handling
  }}
/>
```

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## License

MIT