@tantainnovative/ndpr-toolkit 1.0.1 → 1.0.3

package/src/components/docs/DocLayout.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Button } from '@/components/ui/Button';
+
+type NavItem = {
+  title: string;
+  href: string;
+  icon?: React.ReactNode;
+  children?: NavItem[];
+};
+
+type DocLayoutProps = {
+  children: React.ReactNode;
+  title: string;
+  description?: string;
+};
+
+const navigation: NavItem[] = [
+  {
+    title: 'Getting Started',
+    href: '/docs',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+      </svg>
+    ),
+  },
+  {
+    title: 'Components',
+    href: '/docs/components',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+      </svg>
+    ),
+    children: [
+      { title: 'DPIA Questionnaire', href: '/docs/components/dpia-questionnaire' },
+      { title: 'Consent Management', href: '/docs/components/consent-management' },
+      { title: 'Data Subject Rights', href: '/docs/components/data-subject-rights' },
+      { title: 'Breach Notification', href: '/docs/components/breach-notification' },
+      { title: 'Privacy Policy Generator', href: '/docs/components/privacy-policy-generator' },
+    ],
+  },
+  {
+    title: 'Implementation Guides',
+    href: '/docs/guides',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+      </svg>
+    ),
+    children: [
+      { title: 'NDPR Compliance Checklist', href: '/docs/guides/ndpr-compliance-checklist' },
+      { title: 'Conducting a DPIA', href: '/docs/guides/conducting-dpia' },
+      { title: 'Managing Consent', href: '/docs/guides/managing-consent' },
+      { title: 'Handling Data Subject Requests', href: '/docs/guides/data-subject-requests' },
+      { title: 'Breach Notification Process', href: '/docs/guides/breach-notification-process' },
+    ],
+  },
+  // {
+  //   title: 'API Reference',
+  //   href: '#',
+  //   icon: (
+  //     <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  //       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+  //     </svg>
+  //   ),
+  // },
+];
+
+export function DocLayout({ children, title, description }: DocLayoutProps) {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  // Function to check if a nav item is active
+  const isActive = (href: string) => {
+    if (href === '/docs' && pathname === '/docs') {
+      return true;
+    }
+    return pathname !== '/docs' && pathname.startsWith(href);
+  };
+
+  // Function to check if a nav item should be expanded
+  const shouldExpand = (item: NavItem) => {
+    if (!item.children) return false;
+    return item.children.some(child => pathname === child.href || pathname.startsWith(child.href));
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Mobile menu button */}
+      <div className="lg:hidden fixed top-4 left-4 z-50">
+        <button
+          type="button"
+          className="p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-800"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+        >
+          <span className="sr-only">Open sidebar</span>
+          {mobileMenuOpen ? (
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          ) : (
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          )}
+        </button>
+      </div>
+
+      {/* Sidebar for desktop */}
+      <div className="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
+        <div className="flex flex-col flex-grow bg-white dark:bg-gray-800 shadow-lg overflow-y-auto">
+          <div className="flex items-center flex-shrink-0 px-4 py-5 border-b border-gray-200 dark:border-gray-700">
+            <Link href="/" className="flex items-center">
+              <span className="text-xl font-semibold text-gray-900 dark:text-white">NDPR Toolkit</span>
+            </Link>
+          </div>
+          <div className="mt-5 flex-1 flex flex-col">
+            <nav className="flex-1 px-4 space-y-1">
+              {navigation.map((item) => (
+                <div key={item.title} className="py-1">
+                  <Link
+                    href={item.href}
+                    className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md ${
+                      isActive(item.href)
+                        ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-200'
+                        : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                    }`}
+                  >
+                    {item.icon && (
+                      <span className={`mr-3 ${isActive(item.href) ? 'text-blue-500 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`}>
+                        {item.icon}
+                      </span>
+                    )}
+                    {item.title}
+                  </Link>
+                  {item.children && shouldExpand(item) && (
+                    <div className="mt-1 ml-8 space-y-1">
+                      {item.children.map((child) => (
+                        <Link
+                          key={child.title}
+                          href={child.href}
+                          className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md ${
+                            pathname === child.href
+                              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-200'
+                              : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                          }`}
+                        >
+                          {child.title}
+                          {pathname === child.href && (
+                            <span className="ml-auto">
+                              <svg className="h-4 w-4 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                              </svg>
+                            </span>
+                          )}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </nav>
+          </div>
+          <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+            <Button asChild variant="outline" size="sm" className="w-full">
+              <a href="https://github.com/tantainnovative/ndpr-toolkit" target="_blank" rel="noopener noreferrer" className="flex items-center">
+                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+                GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu, show/hide based on menu state */}
+      <div
+        className={`lg:hidden fixed inset-0 z-40 ${mobileMenuOpen ? 'block' : 'hidden'}`}
+        aria-hidden="true"
+      >
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setMobileMenuOpen(false)}></div>
+        <div className="fixed inset-y-0 left-0 max-w-xs w-full bg-white dark:bg-gray-800 shadow-lg overflow-y-auto">
+          <div className="flex items-center justify-between px-4 py-5 border-b border-gray-200 dark:border-gray-700">
+            <Link href="/" className="flex items-center" onClick={() => setMobileMenuOpen(false)}>
+              <span className="text-xl font-semibold text-gray-900 dark:text-white">NDPR Toolkit</span>
+            </Link>
+            <button
+              type="button"
+              className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close sidebar</span>
+              <svg className="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-5 flex-1 flex flex-col">
+            <nav className="flex-1 px-4 space-y-1">
+              {navigation.map((item) => (
+                <div key={item.title} className="py-1">
+                  <Link
+                    href={item.href}
+                    className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md ${
+                      isActive(item.href)
+                        ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-200'
+                        : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                    }`}
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {item.icon && (
+                      <span className={`mr-3 ${isActive(item.href) ? 'text-blue-500 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`}>
+                        {item.icon}
+                      </span>
+                    )}
+                    {item.title}
+                  </Link>
+                  {item.children && shouldExpand(item) && (
+                    <div className="mt-1 ml-8 space-y-1">
+                      {item.children.map((child) => (
+                        <Link
+                          key={child.title}
+                          href={child.href}
+                          className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md ${
+                            pathname === child.href
+                              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-200'
+                              : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                          }`}
+                          onClick={() => setMobileMenuOpen(false)}
+                        >
+                          {child.title}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </nav>
+          </div>
+          <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+            <Button asChild variant="outline" size="sm" className="w-full">
+              <a href="https://github.com/tantainnovative/ndpr-toolkit" target="_blank" rel="noopener noreferrer" className="flex items-center">
+                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+                GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="lg:pl-64">
+        <main className="py-10">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="pb-5 border-b border-gray-200 dark:border-gray-700 mb-6">
+              <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+                <div>
+                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">{title}</h1>
+                  {description && <p className="mt-2 text-lg text-gray-500 dark:text-gray-400">{description}</p>}
+                </div>
+                <div className="mt-4 md:mt-0 flex space-x-3">
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="/ndpr-demos">View Demos</Link>
+                  </Button>
+                  <Button asChild variant="default" size="sm">
+                    <Link href="/">Back to Home</Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            
+            {/* Page content */}
+            <div className="prose prose-blue max-w-none dark:prose-invert">
+              {children}
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/components/docs/index.ts

@@ -0,0 +1,2 @@
+// Re-export DocLayout for easier imports
+export * from './DocLayout';