IM Disclaimer Modal

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

npm install @citiwave/im-disclaimer-modal

Quick Start

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:

im-disclaimer setup

Creating Disclaimers

Create a new disclaimer with optional properties:

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:

im-disclaimer list
im-disclaimer list --json  # Output in JSON format

Update disclaimer properties:

im-disclaimer set privacy-policy --theme dark --accent "#FF4444" --title "Updated Privacy Policy"

Remove a disclaimer:

im-disclaimer remove privacy-policy

Group Commands

Creating a Group:

im-disclaimer group create

Props Commands

View props:

im-disclaimer props

Update props:

im-disclaimer props:update

Configuration

View current configuration:

im-disclaimer config

Update default directory:

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)

{
  "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)

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

Component Props

Advanced Usage

Custom Storage Prefix

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

Theme Customization

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

Manual Control

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 for details.

License

MIT