@devvistatech/devvista-kit 0.0.1

package/bin/init.js

@@ -0,0 +1,187 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const projectDir = process.cwd();
+const templateDir = path.join(__dirname, '..');
+
+try {
+  // Check if directory is mostly empty, but proceed with caution
+  const allowedFiles = ['node_modules', 'package.json', 'package-lock.json', '.git', '.gitignore'];
+  const files = fs.readdirSync(projectDir).filter(file => !allowedFiles.includes(file));
+  if (files.length > 0) {
+    console.warn('Warning: Directory contains existing files. Local files will be preserved.');
+  }
+
+  // Copy all template directories and files, skipping if they exist
+  const excludeFiles = ['node_modules', '.git', '.DS_Store', 'dist', 'build', '.next', '.github', 'scripts'];
+  const directoriesToCopy = ['app', 'components', 'lib', 'public', 'src', 'hooks', 'utils'];
+  fs.readdirSync(templateDir).forEach(file => {
+    if (!excludeFiles.includes(file) && directoriesToCopy.includes(file)) {
+      const sourcePath = path.join(templateDir, file);
+      const destPath = path.join(projectDir, file);
+      if (!fs.existsSync(destPath)) {
+        fs.cpSync(sourcePath, destPath, { recursive: true, force: false });
+      }
+    }
+  });
+
+  // Copy configuration files, skipping if they exist
+  const configFiles = [
+    'next.config.js',
+    'tsconfig.json',
+    'tailwind.config.ts',
+    'postcss.config.js',
+    'globals.css',
+    'layout.tsx',
+    'middleware.ts',
+  ];
+  configFiles.forEach(file => {
+    const sourcePath = path.join(templateDir, file);
+    if (fs.existsSync(sourcePath)) {
+      const destPath = path.join(projectDir, file);
+      if (!fs.existsSync(destPath)) {
+        fs.copyFileSync(sourcePath, destPath);
+      }
+    }
+  });
+
+  // Merge package.json
+  const pkgPath = path.join(projectDir, 'package.json');
+  let pkg = fs.existsSync(pkgPath) ? JSON.parse(fs.readFileSync(pkgPath, 'utf8')) : {};
+  const libPkg = JSON.parse(fs.readFileSync(path.join(templateDir, 'package.json'), 'utf8'));
+  pkg.name = path.basename(projectDir).toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  pkg.version = pkg.version || '1.0.0';
+  pkg.scripts = {
+    ...pkg.scripts,
+    dev: 'next dev',
+    build: 'next build',
+    start: 'next start',
+    lint: 'next lint',
+    update: 'node ./scripts/update.js',
+  };
+  pkg.dependencies = {
+    ...pkg.dependencies,
+    '@devvistatech/devvista-kit': '^' + libPkg.version,
+    next: libPkg.dependencies.next,
+    react: libPkg.dependencies.react,
+    'react-dom': libPkg.dependencies['react-dom'],
+  };
+  pkg.devDependencies = {
+    ...pkg.devDependencies,
+    typescript: libPkg.dependencies.typescript,
+    tailwindcss: libPkg.dependencies.tailwindcss,
+    postcss: libPkg.dependencies.postcss,
+    autoprefixer: libPkg.dependencies.autoprefixer,
+  };
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+  // Create scripts directory and write update.js
+  const scriptsDir = path.join(projectDir, 'scripts');
+  if (!fs.existsSync(scriptsDir)) {
+    fs.mkdirSync(scriptsDir, { recursive: true });
+  }
+  const updateScriptContent = `const fs = require('fs');
+const path = require('path');
+const deepmerge = require('deepmerge');
+const readline = require('readline').createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+const projectDir = process.cwd();
+const libDir = path.join(projectDir, 'node_modules', '@devvistatech', 'devvista-kit');
+
+readline.question('Proceed with update? (y/n): ', answer => {
+  if (answer.toLowerCase() !== 'y') {
+    readline.close();
+    process.exit(0);
+  }
+
+  try {
+    const excludeFiles = ['node_modules', '.git', '.DS_Store', 'dist', 'build', '.next', '.github', 'scripts', 'package.json', 'package-lock.json', 'app'];
+    const directoriesToCopy = ['components', 'lib', 'public', 'src', 'hooks', 'utils'];
+
+    // Recursive function to copy new files only
+    const copyNewFiles = (source, dest) => {
+      fs.readdirSync(source).forEach(item => {
+        const sourceItemPath = path.join(source, item);
+        const destItemPath = path.join(dest, item);
+        if (!fs.existsSync(destItemPath)) {
+          fs.cpSync(sourceItemPath, destItemPath, { recursive: true });
+        } else if (fs.statSync(sourceItemPath).isDirectory()) {
+          copyNewFiles(sourceItemPath, destItemPath);
+        }
+      });
+    };
+
+    // Copy new directories or files, excluding 'app'
+    fs.readdirSync(libDir).forEach(file => {
+      if (!excludeFiles.includes(file) && directoriesToCopy.includes(file)) {
+        const sourcePath = path.join(libDir, file);
+        const destPath = path.join(projectDir, file);
+        if (fs.existsSync(destPath)) {
+          copyNewFiles(sourcePath, destPath);
+        } else {
+          fs.cpSync(sourcePath, destPath, { recursive: true });
+        }
+      }
+    });
+
+    // Handle configuration files, skipping modified files
+    const configFiles = ['next.config.js', 'tsconfig.json', 'tailwind.config.ts', 'postcss.config.js', 'globals.css', 'layout.tsx', 'middleware.ts'];
+    configFiles.forEach(file => {
+      const sourcePath = path.join(libDir, file);
+      if (fs.existsSync(sourcePath)) {
+        const destPath = path.join(projectDir, file);
+        if (fs.existsSync(destPath)) {
+          const sourceContent = fs.readFileSync(sourcePath, 'utf8');
+          const destContent = fs.readFileSync(destPath, 'utf8');
+          if (sourceContent !== destContent) {
+            console.log(\`Skipping \${file} (modified locally)\`);
+          } else {
+            fs.copyFileSync(sourcePath, destPath);
+          }
+        } else {
+          fs.copyFileSync(sourcePath, destPath);
+        }
+      }
+    });
+
+    // Merge package.json
+    const pkgPath = path.join(projectDir, 'package.json');
+    let pkg = fs.existsSync(pkgPath) ? JSON.parse(fs.readFileSync(pkgPath, 'utf8')) : {};
+    const libPkg = JSON.parse(fs.readFileSync(path.join(libDir, 'package.json'), 'utf8'));
+    pkg.dependencies = deepmerge(pkg.dependencies || {}, {
+      '@devvistatech/devvista-kit': '^' + libPkg.version,
+      next: libPkg.dependencies.next,
+      react: libPkg.dependencies.react,
+      'react-dom': libPkg.dependencies['react-dom']
+    });
+    pkg.devDependencies = deepmerge(pkg.devDependencies || {}, {
+      typescript: libPkg.dependencies.typescript,
+      tailwindcss: libPkg.dependencies.tailwindcss,
+      postcss: libPkg.dependencies.postcss,
+      autoprefixer: libPkg.dependencies.autoprefixer
+    });
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+    console.log('Project updated successfully.');
+  } catch (error) {
+    console.error('Error updating project:', error.message);
+    process.exit(1);
+  }
+  readline.close();
+});
+`;
+  fs.writeFileSync(path.join(scriptsDir, 'update.js'), updateScriptContent);
+
+  // Run npm install to ensure dependencies are installed
+  execSync('npm install', { stdio: 'inherit', cwd: projectDir });
+
+  console.log('Project initialized successfully.');
+} catch (error) {
+  console.error('Error initializing project:', error.message);
+  process.exit(1);
+}

package/components/addOns/functional/BioEditor.tsx

@@ -0,0 +1,430 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { useState, useEffect } from 'react';
+import { EditIconButton, ToggleButton, UpdateButton, CancelButton, CloseButton } from '@/components/other/button'; // Updated import
+import Spinner from '@/components/addOns/non-functional/spinner';
+import { X } from 'lucide-react';
+
+interface BioContent {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  bio: boolean;
+  image?: { url: string; id: number };
+  createdAt: string;
+}
+
+interface StrapiUser {
+  id: number;
+  username: string;
+  email: string;
+  businessAdminId?: string;
+}
+
+interface BioSectionProps {
+  user: StrapiUser | null;
+  authLoading: boolean;
+  bioImageUrl: string | null;
+  bioText: string | null;
+  bioTitle: string | null;
+  error: string | null;
+  isLoading: boolean;
+  setBioImageUrl: (url: string | null) => void;
+  setBioText: (text: string | null) => void;
+  setBioTitle: (title: string | null) => void;
+  setError: (error: string | null) => void;
+  handlePatchSubmit: (
+    e: React.FormEvent,
+    formTitle: string,
+    formDescription: string,
+    formImage: File | null,
+    onSuccess: () => void
+  ) => Promise<void>;
+}
+
+export function BioSection({
+  user,
+  authLoading,
+  bioImageUrl,
+  bioText,
+  bioTitle,
+  error,
+  isLoading,
+  setBioImageUrl,
+  setBioText,
+  setBioTitle,
+  setError,
+  handlePatchSubmit,
+}: BioSectionProps) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [formTitle, setFormTitle] = useState<string>(bioTitle || '');
+  const [formDescription, setFormDescription] = useState<string>(bioText || '');
+  const [formImage, setFormImage] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const debounce = (fn: () => void, delay: number) => {
+      let timeout: NodeJS.Timeout;
+      return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay);
+      };
+    };
+
+    const checkMobile = debounce(() => {
+      setIsMobile(window.innerWidth < 768);
+    }, 100);
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  useEffect(() => {
+    const event = new CustomEvent('modalStateChange', {
+      detail: { isOpen: isEditModalOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isEditModalOpen]);
+
+  useEffect(() => {
+    if (isEditModalOpen) {
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
+
+    return () => {
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, [isEditModalOpen]);
+
+  const openEditModal = () => {
+    setFormTitle(bioTitle || '');
+    setFormDescription(bioText || '');
+    setFormImage(null);
+    setIsEditModalOpen(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditModalOpen(false);
+    setFormTitle(bioTitle || '');
+    setFormDescription(bioText || '');
+    setFormImage(null);
+  };
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isEditModalOpen) {
+        handleCancelEdit();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isEditModalOpen]);
+
+  const isAdmin = !!user?.businessAdminId;
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: 'easeOut' },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: 'easeOut' },
+    },
+  };
+
+  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 paragraphs = bioText
+    ? bioText.split('\n').filter((paragraph) => paragraph.trim() !== '')
+    : [];
+
+  return (
+    <div className="w-full">
+      <style jsx>{`
+        .modal-form input,
+        .modal-form textarea {
+          font-size: 0.875rem;
+          padding: 0.5rem;
+          border-radius: 0.375rem;
+          background: #374151;
+          color: #f3f4f6;
+          border: 1px solid #4b5563;
+        }
+
+        .modal-form input:focus,
+        .modal-form textarea:focus {
+          outline: none;
+          ring: 2px solid #3b82f6;
+        }
+
+        .modal-form label {
+          font-size: 0.875rem;
+          color: #d1d5db;
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+        }
+
+        @supports not (backdrop-filter: blur(12px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+
+        .glassmorphism:hover {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            padding: 1rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .modal-form input,
+          .modal-form textarea {
+            font-size: 0.875rem;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+          }
+
+          .modal-form label {
+            font-size: 0.875rem;
+          }
+
+          .modal-form .flex {
+            flex-direction: column;
+            gap: 0.5rem;
+          }
+
+          .modal-form textarea {
+            min-height: 80px;
+          }
+        }
+
+        @media (max-width: 320px) {
+          .modal-form input,
+          .modal-form textarea {
+            font-size: 0.75rem;
+            padding: 0.5rem;
+          }
+
+          .modal-form label {
+            font-size: 0.75rem;
+          }
+        }
+      `}</style>
+      <motion.div
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+        className="mb-24 max-w-[200rem] mx-auto px-8 sm:px-10"
+      >
+        <div className="flex flex-col md:flex-row gap-10 items-start min-h-[fit-content]">
+          <motion.div
+            variants={itemVariants}
+            className="w-full md:w-1/2 max-w-[500px] h-auto mb-10 md:mb-0 relative"
+          >
+            {bioImageUrl ? (
+              <Image
+                src={bioImageUrl}
+                alt="Portrait of Kathy Caiello"
+                width={500}
+                height={600}
+                sizes="(max-width: 768px) 100vw, 500px"
+                className="rounded-3xl w-full h-auto object-cover object-center glassmorphism shadow-lg"
+                priority
+                quality={60}
+              />
+            ) : (
+              <div className="w-full h-[600px] bg-gray-200 rounded-3xl flex items-center justify-center">
+                <p className="text-gray-600">No image available</p>
+              </div>
+            )}
+          </motion.div>
+          <motion.div
+            variants={itemVariants}
+            className="space-y-6 min-h-[fit-content] h-auto w-full relative"
+          >
+            {bioTitle && (
+              <motion.h2
+                variants={itemVariants}
+                className="text-2xl sm:text-3xl font-bold text-gray-800"
+              >
+                {bioTitle}
+              </motion.h2>
+            )}
+            {paragraphs.length > 0 ? (
+              <>
+                {paragraphs
+                  .slice(0, isExpanded ? paragraphs.length : 3)
+                  .map((paragraph, index) => (
+                    <motion.p
+                      key={index}
+                      variants={itemVariants}
+                      className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
+                    >
+                      {paragraph}
+                    </motion.p>
+                  ))}
+                {paragraphs.length > 3 && (
+                  <motion.div variants={itemVariants} className="mt-4">
+                    <ToggleButton
+                      variant="toggle-bio"
+                      onClick={() => setIsExpanded(!isExpanded)}
+                    >
+                      {isExpanded ? 'Read Less' : 'Read More'}
+                    </ToggleButton>
+                  </motion.div>
+                )}
+              </>
+            ) : (
+              <motion.p
+                variants={itemVariants}
+                className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
+              >
+                No bio description available.
+              </motion.p>
+            )}
+            <div className="mt-4">
+              {authLoading || isLoading ? (
+                <Spinner />
+              ) : isAdmin ? (
+                <EditIconButton
+                  onClick={openEditModal}
+                  variant="edit-bio"
+                >
+                  Edit Bio
+                </EditIconButton>
+              ) : user ? (
+                <p className="text-gray-600 text-sm"></p>
+              ) : (
+                <p className="text-gray-600 text-sm"></p>
+              )}
+            </div>
+          </motion.div>
+        </div>
+        {error && (
+          <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
+        )}
+      </motion.div>
+      {isEditModalOpen && (
+        <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={handleCancelEdit}
+          aria-modal="true"
+          role="dialog"
+        >
+          <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 max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelEdit}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Edit Bio</h3>
+            <form
+              onSubmit={(e) => {
+                setIsSubmitting(true);
+                handlePatchSubmit(e, formTitle, formDescription, formImage, () => {
+                  setIsEditModalOpen(false);
+                }).finally(() => setIsSubmitting(false));
+              }}
+              className="space-y-4 modal-form"
+            >
+              <div>
+                <label
+                  htmlFor="bioTitle"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  Bio Title
+                </label>
+                <input
+                  id="bioTitle"
+                  type="text"
+                  value={formTitle}
+                  onChange={(e) => setFormTitle(e.target.value)}
+                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                  placeholder="Enter the bio title"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="bioImage"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  Update Image (optional)
+                </label>
+                <input
+                  id="bioImage"
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  onChange={(e) => setFormImage(e.target.files?.[0] || null)}
+                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                />
+                {formImage && (
+                  <p className="mt-2 text-gray-300 text-sm">Selected: {formImage.name}</p>
+                )}
+              </div>
+              <div>
+                <label
+                  htmlFor="bioDescription"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  Update Description
+                </label>
+                <textarea
+                  id="bioDescription"
+                  value={formDescription}
+                  onChange={(e) => setFormDescription(e.target.value)}
+                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"
+                  placeholder="Enter the bio description"
+                />
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <UpdateButton type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? 'Saving...' : 'Update'}
+                </UpdateButton>
+                <CancelButton type="button" onClick={handleCancelEdit}>
+                  Cancel
+                </CancelButton>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+}