@devvistatech/devvista-kit 0.0.1

package/components/addOns/functional/ContactForm.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { ContactSubmitButton } from '@/components/other/button'; // Updated import
+import { Input } from '@/components/other/input';
+import { Textarea } from '@/components/other/textarea';
+import { Mail, Loader2, User, MessageSquare, FileText, Phone } from 'lucide-react';
+
+const formSchema = z.object({
+  name: z
+    .string()
+    .min(2, 'First name must be at least 2 characters')
+    .max(50, 'First name cannot exceed 50 characters')
+    .regex(/^[a-zA-Z\s-]+$/, 'First name can only contain letters, spaces, or hyphens'),
+  lastName: z
+    .string()
+    .min(2, 'Last name must be at least 2 characters')
+    .max(50, 'Last name cannot exceed 50 characters')
+    .regex(/^[a-zA-Z\s-]+$/, 'Last name can only contain letters, spaces, or hyphens'),
+  email: z
+    .string()
+    .email('Invalid email address')
+    .max(100, 'Email cannot exceed 100 characters'),
+  phone: z
+    .string()
+    .regex(
+      /^(\+?1\s?)?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}$/,
+      'Please enter a valid phone number (e.g., 123-456-7890)'
+    )
+    .max(14, 'Phone number cannot exceed 14 characters')
+    .transform((val) => val.replace(/[-.\s()]/g, '').replace(/^1/, '')),
+  subject: z
+    .string()
+    .min(5, 'Subject must be at least 5 characters')
+    .max(100, 'Subject cannot exceed 100 characters'),
+  message: z
+    .string()
+    .max(500, 'Message cannot exceed 500 characters')
+    .optional(),
+});
+
+interface FormData {
+  name: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  subject: string;
+  message?: string;
+}
+
+interface ToastMessage {
+  type: 'success' | 'error';
+  title: string;
+  description: string;
+}
+
+export default function ContactForm() {
+  const [toastMessage, setToastMessage] = useState<ToastMessage | null>(null);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    mode: 'onBlur',
+    defaultValues: {
+      name: '',
+      lastName: '',
+      email: '',
+      phone: '',
+      subject: '',
+      message: '',
+    },
+  });
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      const contentType = response.headers.get('content-type');
+      if (!contentType || !contentType.includes('application/json')) {
+        throw new Error('Server returned an unexpected response. Please try again.');
+      }
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        const errorMessage = result.error || 'Unable to submit request at this time';
+        throw new Error(errorMessage);
+      }
+
+      setToastMessage({
+        type: 'success',
+        title: 'Success',
+        description: 'Your message has been sent successfully!',
+      });
+      reset();
+      setTimeout(() => setToastMessage(null), 3000);
+    } catch (error: any) {
+      console.error('Contact form submission error:', error);
+      setToastMessage({
+        type: 'error',
+        title: 'Error',
+        description: error.message || 'Unable to submit request at this time',
+      });
+      setTimeout(() => setToastMessage(null), 3000);
+    }
+  };
+
+  return (
+    <div className="relative w-full max-w-4xl mx-auto p-10 bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-black-100/90">
+      {toastMessage && (
+        <div className="fixed top-8 right-8 z-50 animate-in fade-in slide-in-from-top-2">
+          <div
+            className={`p-6 rounded-2xl shadow-lg border transition-all duration-300 ${
+              toastMessage.type === 'success'
+                ? 'bg-green-50/80 border-green-200/50 text-green-900'
+                : 'bg-red-50/80 border-red-200/50 text-red-900'
+            } backdrop-blur-sm`}
+          >
+            <h3 className="font-semibold text-lg">{toastMessage.title}</h3>
+            <p className="text-base mt-2">{toastMessage.description}</p>
+          </div>
+        </div>
+      )}
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
+          <div className="space-y-2">
+            <div className="relative group">
+              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+              <Input
+                {...register('name')}
+                placeholder="First Name"
+                className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                  errors.name && dirtyFields.name ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+                }`}
+                maxLength={50}
+                aria-invalid={!!errors.name && !!dirtyFields.name}
+                aria-describedby={errors.name && dirtyFields.name ? 'name-error' : undefined}
+              />
+            </div>
+            {errors.name && dirtyFields.name && (
+              <p id="name-error" className="text-base text-red-500">
+                {errors.name.message}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="relative group">
+              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+              <Input
+                {...register('lastName')}
+                placeholder="Last Name"
+                className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                  errors.lastName && dirtyFields.lastName ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+                }`}
+                maxLength={50}
+                aria-invalid={!!errors.lastName && !!dirtyFields.lastName}
+                aria-describedby={errors.lastName && dirtyFields.lastName ? 'lastName-error' : undefined}
+              />
+            </div>
+            {errors.lastName && dirtyFields.lastName && (
+              <p id="lastName-error" className="text-base text-red-500">
+                {errors.lastName.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <Mail className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Input
+              {...register('email')}
+              type="email"
+              placeholder="Email Address"
+              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                errors.email && dirtyFields.email ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={100}
+              aria-invalid={!!errors.email && !!dirtyFields.email}
+              aria-describedby={errors.email && dirtyFields.email ? 'email-error' : undefined}
+            />
+          </div>
+          {errors.email && dirtyFields.email && (
+            <p id="email-error" className="text-base text-red-500">
+              {errors.email.message}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <Phone className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Input
+              {...register('phone')}
+              type="tel"
+              placeholder="Phone Number"
+              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                errors.phone && dirtyFields.phone ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={14}
+              aria-invalid={!!errors.phone && !!dirtyFields.phone}
+              aria-describedby={errors.phone && dirtyFields.phone ? 'phone-error' : undefined}
+            />
+          </div>
+          {errors.phone && dirtyFields.phone && (
+            <p id="phone-error" className="text-base text-red-500">
+              {errors.phone.message}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <FileText className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Input
+              {...register('subject')}
+              placeholder="Subject"
+              className={`pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ${
+                errors.subject && dirtyFields.subject ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={100}
+              aria-invalid={!!errors.subject && !!dirtyFields.subject}
+              aria-describedby={errors.subject && dirtyFields.subject ? 'subject-error' : undefined}
+            />
+          </div>
+          {errors.subject && dirtyFields.subject && (
+            <p id="subject-error" className="text-base text-red-500">
+              {errors.subject.message}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="relative group">
+            <MessageSquare className="absolute left-4 top-5 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600" />
+            <Textarea
+              {...register('message')}
+              placeholder="Your Message"
+              className={`pl-14 pt-5 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base min-h-[180px] resize-y transition-all duration-300 ${
+                errors.message && dirtyFields.message ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200'
+              }`}
+              maxLength={500}
+              rows={8}
+              aria-invalid={!!errors.message && !!dirtyFields.message}
+              aria-describedby={errors.message && dirtyFields.message ? 'message-error' : undefined}
+            />
+          </div>
+          {errors.message && dirtyFields.message && (
+            <p id="message-error" className="text-base text-red-500">
+              {errors.message.message}
+            </p>
+          )}
+        </div>
+
+        <ContactSubmitButton
+          type="submit"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2 className="mr-3 h-6 w-6 animate-spin" />
+              Sending...
+            </>
+          ) : (
+            <>
+              <Mail className="mr-3 h-6 w-6" />
+              Send Message
+            </>
+          )}
+        </ContactSubmitButton>
+      </form>
+    </div>
+  );
+}

package/components/addOns/functional/FileUploader.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button, UploadButton, ToggleButton, CloseButton, DeleteButton, CancelButton, TrashIconButton } from '@/components/other/button'; // Updated import
+import { Card } from '@/components/other/card';
+import { Upload, FileText, Trash2, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useUser } from '@clerk/nextjs';
+
+interface UploadedFile {
+  id: number;
+  documentId: string;
+  name: string;
+  url: string;
+  createdAt: string;
+}
+
+interface FileUploaderProps {
+  uploadedFiles: UploadedFile[];
+  setUploadedFiles: (files: UploadedFile[]) => void;
+  setPdfUrl: (url: string) => void;
+  pdfUrl: string;
+  isAdmin: boolean;
+  error?: string | null;
+  setError: (error: string | null) => void;
+  handleFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+  handleDeleteFile: (documentId: string) => Promise<void>;
+}
+
+export function FileUploader({
+  uploadedFiles,
+  setUploadedFiles,
+  setPdfUrl,
+  pdfUrl,
+  isAdmin,
+  error,
+  setError,
+  handleFileUpload,
+  handleDeleteFile,
+}: FileUploaderProps) {
+  const { isSignedIn } = useUser();
+  const [uploading, setUploading] = useState(false);
+  const [showAllFiles, setShowAllFiles] = useState(false);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [fileToDelete, setFileToDelete] = useState<string | null>(null);
+
+  const baseUrl = process.env.BASE_URL || '';
+
+  useEffect(() => { }, [isSignedIn, isAdmin]);
+
+  useEffect(() => {
+    const event = new CustomEvent('modalStateChange', {
+      detail: { isOpen: isConfirmDeleteOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isConfirmDeleteOpen]);
+
+  useEffect(() => {
+    if (isConfirmDeleteOpen) {
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
+    return () => {
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, [isConfirmDeleteOpen]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isConfirmDeleteOpen) {
+        handleCancelDelete();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isConfirmDeleteOpen]);
+
+  const openConfirmDelete = (documentId: string) => {
+    setFileToDelete(documentId);
+    setIsConfirmDeleteOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (fileToDelete !== null) {
+      setUploading(true);
+      setError(null);
+      try {
+        await handleDeleteFile(fileToDelete);
+      } finally {
+        setUploading(false);
+        setIsConfirmDeleteOpen(false);
+        setFileToDelete(null);
+      }
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setFileToDelete(null);
+  };
+
+  const truncateText = (text: string, maxLength: number = 30): string => {
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength - 3) + '...';
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: '100vh' },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: '100vh', transition: { duration: 0.3, ease: 'easeIn' } },
+  };
+
+  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUploading(true);
+    setError(null);
+    try {
+      await handleFileUpload(e);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div className="w-full bg-[#1E2A44] px-4 py-12 sm:px-8 sm:py-16 border-none outline-none z-0">
+      <style jsx>{`
+        .modal-glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(
+            45deg,
+            var(--exuberant-blue),
+            var(--jubilee),
+            var(--modern-purple)
+          ) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+          border-radius: 2rem;
+          max-height: 90vh;
+          overflow: hidden;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .modal-glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+
+        @media (max-width: 640px) {
+          .modal-glassmorphism {
+            padding: 1rem;
+            max-height: 85vh;
+          }
+        }
+
+        .file-item {
+          z-index: 30;
+          pointer-events: auto;
+          cursor: pointer;
+        }
+      `}</style>
+      <Card className="w-full max-w-7xl mx-auto p-4 sm:p-8 bg-[#1E2A44] text-white flex flex-col items-center space-y-6 rounded-none border-none outline-none relative z-10">
+        <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white text-center">
+          Fitness Forum
+        </h3>
+        <div className="space-y-4 w-full">
+          {error && (
+            <p className="text-red-400 text-base sm:text-lg md:text-xl text-center">{error}</p>
+          )}
+          {isAdmin ? (
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+              <input
+                type="file"
+                accept="application/pdf"
+                onChange={onFileChange}
+                disabled={uploading}
+                className="hidden"
+                id="file-upload"
+              />
+              <label htmlFor="file-upload" className="cursor-pointer">
+                <UploadButton disabled={uploading} asChild>
+                  <span className="flex items-center justify-center">
+                    <Upload className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
+                    Upload PDF
+                  </span>
+                </UploadButton>
+              </label>
+              {uploading && (
+                <span className="text-white font-bold text-base sm:text-lg">Uploading...</span>
+              )}
+            </div>
+          ) : (
+            <p className="text-gray-400 text-sm font-medium text-center">
+              {isSignedIn ? '' : ''}
+            </p>
+          )}
+          {uploadedFiles.length > 0 ? (
+            <>
+              {uploadedFiles.slice(0, showAllFiles ? undefined : 8).map((file) => {
+                const token = localStorage.getItem('jwt') || '';
+                const fullUrl = file.url.startsWith('http')
+                  ? `${file.url}${token ? (file.url.includes('?') ? '&' : '?') + `token=${token}` : ''}`
+                  : `${baseUrl}${file.url}${token ? `?token=${token}` : ''}`;
+                return (
+                  <div
+                    key={file.documentId}
+                    className="file-item flex flex-col sm:flex-row items-center justify-between p-3 sm:p-4 rounded-lg bg-[#2A3A66]/50 hover:bg-[#2A3A66]/70 hover:shadow-lg hover:border-[#FF69B4]/50 transition-all cursor-pointer"
+                    onClick={() => {
+                      setPdfUrl(fullUrl);
+                      window.open(fullUrl, '_blank', 'noopener,noreferrer');
+                    }}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        setPdfUrl(fullUrl);
+                        window.open(fullUrl, '_blank', 'noopener,noreferrer');
+                      }
+                    }}
+                    aria-label={`Open PDF: ${truncateText(file.name)}`}
+                  >
+                    <div className="text-white font-bold text-base sm:text-lg md:text-xl flex items-center w-full sm:w-auto min-w-0">
+                      <FileText className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-[#FF69B4] flex-shrink-0" />
+                      <span className="truncate">{truncateText(file.name, 30)}</span>
+                    </div>
+                    {isAdmin && (
+                      <TrashIconButton
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openConfirmDelete(file.documentId);
+                        }}
+                        aria-label={`Delete file ${truncateText(file.name)}`}
+                      >
+                        <Trash2 className="h-4 w-4 sm:h-5 sm:w-5" />
+                      </TrashIconButton >
+                    )}
+                  </div>
+                );
+              })}
+              {uploadedFiles.length > 8 && (
+                <div className="text-center mt-4">
+                  <ToggleButton onClick={() => setShowAllFiles(!showAllFiles)}>
+                    {showAllFiles ? 'Show Less' : 'Show More'}
+                  </ToggleButton>
+                </div>
+              )}
+            </>
+          ) : (
+            <p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
+              No files uploaded yet.
+            </p>
+          )}
+        </div>
+      </Card>
+
+      {isConfirmDeleteOpen && isAdmin && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCancelDelete}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+        >
+          <div
+            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelDelete}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
+              Confirm Deletion
+            </h3>
+            <p className="text-gray-300 text-sm mb-4">
+              Are you sure you want to delete this file? This action cannot be undone.
+            </p>
+            <div className="flex space-x-3">
+              <DeleteButton onClick={handleConfirmDelete} disabled={uploading}>
+                {uploading ? 'Deleting...' : 'Delete'}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}>Cancel</CancelButton>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+}