@citiwave/im-disclaimer-modal

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

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

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

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