@tantainnovative/ndpr-toolkit 1.0.2 → 1.0.3

package/packages/ndpr-toolkit/src/components/policy/PolicyPreview.tsx

@@ -0,0 +1,333 @@
+import React, { useState } from 'react';
+import { PolicySection, PolicyVariable } from '../../types/privacy';
+
+export interface PolicyPreviewProps {
+  /**
+   * The policy content to preview
+   */
+  content: string;
+  
+  /**
+   * The policy sections
+   */
+  sections?: PolicySection[];
+  
+  /**
+   * The policy variables
+   */
+  variables?: PolicyVariable[];
+  
+  /**
+   * Callback function called when the policy is exported
+   */
+  onExport?: (format: 'pdf' | 'html' | 'markdown' | 'docx') => void;
+  
+  /**
+   * Callback function called when the policy is edited
+   */
+  onEdit?: () => void;
+  
+  /**
+   * Title displayed on the preview
+   * @default "Privacy Policy Preview"
+   */
+  title?: string;
+  
+  /**
+   * Description text displayed on the preview
+   * @default "Preview your NDPR-compliant privacy policy before exporting."
+   */
+  description?: string;
+  
+  /**
+   * Custom CSS class for the preview
+   */
+  className?: string;
+  
+  /**
+   * Custom CSS class for the buttons
+   */
+  buttonClassName?: string;
+  
+  /**
+   * Whether to show the export options
+   * @default true
+   */
+  showExportOptions?: boolean;
+  
+  /**
+   * Whether to show the edit button
+   * @default true
+   */
+  showEditButton?: boolean;
+  
+  /**
+   * Whether to show the table of contents
+   * @default true
+   */
+  showTableOfContents?: boolean;
+  
+  /**
+   * Whether to show the policy metadata
+   * @default true
+   */
+  showMetadata?: boolean;
+  
+  /**
+   * The organization name to display in the policy
+   */
+  organizationName?: string;
+  
+  /**
+   * The last updated date to display in the policy
+   */
+  lastUpdated?: Date;
+}
+
+export const PolicyPreview: React.FC<PolicyPreviewProps> = ({
+  content,
+  sections,
+  variables,
+  onExport,
+  onEdit,
+  title = "Privacy Policy Preview",
+  description = "Preview your NDPR-compliant privacy policy before exporting.",
+  className = "",
+  buttonClassName = "",
+  showExportOptions = true,
+  showEditButton = true,
+  showTableOfContents = true,
+  showMetadata = true,
+  organizationName,
+  lastUpdated = new Date()
+}) => {
+  const [activeTab, setActiveTab] = useState<'preview' | 'markdown'>('preview');
+  
+  // Parse the content to extract section titles for the table of contents
+  const extractSectionTitles = (): { id: string, title: string, level: number }[] => {
+    const lines = content.split('\n');
+    const sectionTitles: { id: string, title: string, level: number }[] = [];
+    
+    lines.forEach(line => {
+      if (line.startsWith('## ')) {
+        const title = line.substring(3).trim();
+        const id = title.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+        sectionTitles.push({ id, title, level: 2 });
+      } else if (line.startsWith('### ')) {
+        const title = line.substring(4).trim();
+        const id = title.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+        sectionTitles.push({ id, title, level: 3 });
+      }
+    });
+    
+    return sectionTitles;
+  };
+  
+  // Get the section titles for the table of contents
+  const sectionTitles = extractSectionTitles();
+  
+  // Handle export button click
+  const handleExport = (format: 'pdf' | 'html' | 'markdown' | 'docx') => {
+    if (onExport) {
+      onExport(format);
+    } else {
+      // Fallback export functionality
+      if (format === 'markdown') {
+        const element = document.createElement('a');
+        const file = new Blob([content], {type: 'text/markdown'});
+        element.href = URL.createObjectURL(file);
+        element.download = `privacy-policy-${new Date().toISOString().split('T')[0]}.md`;
+        document.body.appendChild(element);
+        element.click();
+        document.body.removeChild(element);
+      }
+    }
+  };
+  
+  // Render the table of contents
+  const renderTableOfContents = () => {
+    if (!showTableOfContents || sectionTitles.length === 0) {
+      return null;
+    }
+    
+    return (
+      <div className="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-md">
+        <h3 className="text-lg font-medium mb-3">Table of Contents</h3>
+        <ul className="space-y-1">
+          {sectionTitles.map((section, index) => (
+            <li key={index} style={{ marginLeft: `${(section.level - 2) * 1.5}rem` }}>
+              <a 
+                href={`#${section.id}`} 
+                className="text-blue-600 dark:text-blue-400 hover:underline"
+              >
+                {section.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+  
+  // Render the policy metadata
+  const renderMetadata = () => {
+    if (!showMetadata) {
+      return null;
+    }
+    
+    return (
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold mb-2">
+          {organizationName ? `${organizationName} Privacy Policy` : 'Privacy Policy'}
+        </h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Last Updated: {lastUpdated.toLocaleDateString()}
+        </p>
+      </div>
+    );
+  };
+  
+  // Render the policy content in HTML format
+  const renderHTMLContent = () => {
+    return (
+      <div className="prose dark:prose-invert max-w-none">
+        {content.split('\n').map((line, index) => {
+          if (line.startsWith('## ')) {
+            const title = line.substring(3).trim();
+            const id = title.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+            return <h2 id={id} key={index} className="text-xl font-bold mt-6 mb-3">{title}</h2>;
+          } else if (line.startsWith('### ')) {
+            const title = line.substring(4).trim();
+            const id = title.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+            return <h3 id={id} key={index} className="text-lg font-bold mt-4 mb-2">{title}</h3>;
+          } else if (line === '') {
+            return <br key={index} />;
+          } else {
+            return <p key={index} className="mb-2">{line}</p>;
+          }
+        })}
+      </div>
+    );
+  };
+  
+  // Render the export options
+  const renderExportOptions = () => {
+    if (!showExportOptions) {
+      return null;
+    }
+    
+    return (
+      <div className="mt-6">
+        <h3 className="text-lg font-medium mb-3">Export Options</h3>
+        <div className="flex flex-wrap gap-3">
+          <button
+            onClick={() => handleExport('pdf')}
+            className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName}`}
+          >
+            Export as PDF
+          </button>
+          <button
+            onClick={() => handleExport('docx')}
+            className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName}`}
+          >
+            Export as DOCX
+          </button>
+          <button
+            onClick={() => handleExport('html')}
+            className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName}`}
+          >
+            Export as HTML
+          </button>
+          <button
+            onClick={() => handleExport('markdown')}
+            className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 ${buttonClassName}`}
+          >
+            Export as Markdown
+          </button>
+        </div>
+      </div>
+    );
+  };
+  
+  return (
+    <div className={`bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md ${className}`}>
+      <div className="flex justify-between items-start mb-6">
+        <div>
+          <h2 className="text-xl font-bold mb-2">{title}</h2>
+          <p className="text-gray-600 dark:text-gray-300">{description}</p>
+        </div>
+        
+        {showEditButton && onEdit && (
+          <button
+            onClick={onEdit}
+            className={`px-4 py-2 bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 ${buttonClassName}`}
+          >
+            Edit Policy
+          </button>
+        )}
+      </div>
+      
+      {/* NDPR Notice */}
+      <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+        <h3 className="text-sm font-bold text-blue-800 dark:text-blue-200 mb-2">NDPR Compliance Notice</h3>
+        <p className="text-blue-700 dark:text-blue-300 text-sm">
+          This privacy policy has been generated to align with the Nigeria Data Protection Regulation (NDPR).
+          We recommend having the final policy reviewed by a legal professional familiar with NDPR requirements
+          before publishing it on your website or sharing it with your users.
+        </p>
+      </div>
+      
+      {/* Tabs */}
+      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
+        <ul className="flex flex-wrap -mb-px">
+          <li className="mr-2">
+            <button
+              onClick={() => setActiveTab('preview')}
+              className={`inline-block p-4 ${
+                activeTab === 'preview'
+                  ? 'text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500'
+                  : 'text-gray-500 hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+              }`}
+            >
+              Preview
+            </button>
+          </li>
+          <li className="mr-2">
+            <button
+              onClick={() => setActiveTab('markdown')}
+              className={`inline-block p-4 ${
+                activeTab === 'markdown'
+                  ? 'text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 dark:border-blue-500'
+                  : 'text-gray-500 hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+              }`}
+            >
+              Markdown
+            </button>
+          </li>
+        </ul>
+      </div>
+      
+      {/* Content */}
+      <div className="bg-white dark:bg-gray-800 p-4 rounded-md">
+        {activeTab === 'preview' ? (
+          <div>
+            {renderMetadata()}
+            {renderTableOfContents()}
+            <div className="bg-gray-50 dark:bg-gray-700 p-6 rounded-md">
+              {renderHTMLContent()}
+            </div>
+          </div>
+        ) : (
+          <div>
+            <pre className="bg-gray-50 dark:bg-gray-700 p-4 rounded-md overflow-auto whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-gray-200">
+              {content}
+            </pre>
+          </div>
+        )}
+      </div>
+      
+      {/* Export Options */}
+      {renderExportOptions()}
+    </div>
+  );
+};