@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,13 +1,13 @@
-# Changelog
-
-## [0.3.0] - 2025-08-10
-- Added `deepmerge` for safer `package.json` and configuration updates.
-- Updated `bin/init.js` to avoid overwriting existing files and create backups.
-- Created `scripts/update.js` with user confirmation and backup functionality.
-- Improved update process to preserve local modifications by only copying new files.
-- Removed automatic file copying on `npm install`.
-
-## [0.2.23] - Previous
-- Initial release with basic project scaffolding.
-- Included Next.js, Tailwind CSS, and Radix UI components.
+# Changelog
+
+## [0.3.0] - 2025-08-10
+- Added `deepmerge` for safer `package.json` and configuration updates.
+- Updated `bin/init.js` to avoid overwriting existing files and create backups.
+- Created `scripts/update.js` with user confirmation and backup functionality.
+- Improved update process to preserve local modifications by only copying new files.
+- Removed automatic file copying on `npm install`.
+
+## [0.2.23] - Previous
+- Initial release with basic project scaffolding.
+- Included Next.js, Tailwind CSS, and Radix UI components.
 - Basic update script that overwrote files without robust merging.

package/LICENSE

@@ -1,7 +1,7 @@
-Copyright © 2025 [Gabriel Labbate / DevVista]
-
-All rights reserved.
-
-This software is proprietary and confidential. You may not copy, use, modify, distribute, or disclose any part of this code without explicit, written permission from the copyright holder.
-
+Copyright © 2025 [Gabriel Labbate / DevVista]
+
+All rights reserved.
+
+This software is proprietary and confidential. You may not copy, use, modify, distribute, or disclose any part of this code without explicit, written permission from the copyright holder.
+
 Unauthorized use is strictly prohibited and may result in legal action.

package/README.md

@@ -1,15 +1,15 @@
-### Instructions for DevVistaTech to Create a New Website
-
-- Create a new project folder and navigate to it: `mkdir my-project && cd my-project`
-- Initialize a Node.js project: `npm init -y`
-- Install the @devvistatech/devvista-kit package: `npm install --save @devvistatech/devvista-kit@latest`
-- Initialize the project with the prebuilt template: `npx devvista-kit`
-- Start the development server: `npm run dev`
-
-### Updating the npm Package with the Latest Version
-
-- Increment the package version: `npm version patch  # e.g., to 0.1.8`
-- Stage all changes: `git add .`
-- Commit the changes: `git commit -m "Increment version to 0.1.8"`
-- Push to the remote repository: `git push origin main`
-- Update projects with the new version: `npm install --save @devvistatech/devvista-kit@latest && npx devvista-kit`
+### Instructions for DevVistaTech to Create a New Website
+
+- Create a new project folder and navigate to it: `mkdir my-project && cd my-project`
+- Initialize a Node.js project: `npm init -y`
+- Install the @devvistatech/devvista-kit package: `npm install --save @devvistatech/devvista-kit@latest`
+- Initialize the project with the prebuilt template: `npx devvista-kit`
+- Start the development server: `npm run dev`
+
+### Updating the npm Package with the Latest Version
+
+- Increment the package version: `npm version patch  # e.g., to 0.1.8`
+- Stage all changes: `git add .`
+- Commit the changes: `git commit -m "Increment version to 0.1.8"`
+- Push to the remote repository: `git push origin main`
+- Update projects with the new version: `npm install --save @devvistatech/devvista-kit@latest && npx devvista-kit`

package/app/about/page.tsx

@@ -1,299 +1,299 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { useRef, useState, useEffect } from "react";
-import { BioSection } from "@/components/addOns/functional/BioEditor";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { useAuth, useUser } from "@clerk/nextjs";
-import Testimonials from "@/components/addOns/non-functional/Testimonials";
-import { ABOUT_PAGE } from "../../lib/constants/about";
-
-interface BioContent {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  bio: boolean;
-  about: boolean;
-  image?: { url: string; id: number };
-  createdAt: string;
-}
-
-export default function AboutPage() {
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken } = useAuth();
-  const { user: clerkUser, isSignedIn } = useUser();
-  const [isMobile, setIsMobile] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [bioImageUrl, setBioImageUrl] = useState<string | null>(null);
-  const [bioText, setBioText] = useState<string | null>(null);
-  const [bioTitle, setBioTitle] = useState<string | null>(null);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: isEditModalOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isEditModalOpen]);
-
-  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 handleLogin = () => checkSession();
-    const handleLogout = () => checkSession();
-    window.addEventListener("user-login", handleLogin);
-    window.removeEventListener("user-logout", handleLogout);
-    return () => {
-      window.removeEventListener("user-login", handleLogin);
-      window.removeEventListener("user-logout", handleLogout);
-    };
-  }, [checkSession]);
-
-  useEffect(() => {
-    const fetchBioData = async () => {
-      setIsLoading(true);
-      try {
-        const response = await fetch("/api/bio", {
-          headers: { "Content-Type": "application/json" },
-        });
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || ABOUT_PAGE.ERRORS.FETCH_BIO_FAILED);
-        }
-        const result = await response.json();
-        if (result.data) {
-          const bioData: BioContent = result.data;
-          setBioImageUrl(bioData.image?.url || null);
-          setBioText(bioData.description || null);
-          setBioTitle(bioData.title || null);
-        } else {
-          throw new Error(ABOUT_PAGE.ERRORS.BIO_NOT_FOUND);
-        }
-      } catch (err) {
-        console.error("Fetch Error:", err);
-        setError(err instanceof Error ? err.message : ABOUT_PAGE.ERRORS.FETCH_BIO_ERROR);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchBioData();
-  }, []);
-
-  const handlePatchSubmit = async (
-    e: React.FormEvent,
-    formTitle: string,
-    formDescription: string,
-    formImage: File | null,
-    onSuccess: () => void
-  ) => {
-    e.preventDefault();
-    if (!user?.businessAdminId) {
-      console.error("No user or businessAdminId:", { user, businessAdminId: user?.businessAdminId });
-      setError(ABOUT_PAGE.ERRORS.UNAUTHORIZED_UPDATE);
-      return;
-    }
-
-    try {
-      const formData = new FormData();
-      if (formTitle && formTitle !== bioTitle) {
-        formData.append("title", formTitle);
-      }
-      if (formDescription && formDescription !== bioText) {
-        formData.append("description", formDescription);
-      }
-      if (formImage) {
-        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
-          throw new Error(ABOUT_PAGE.ERRORS.INVALID_IMAGE_TYPE);
-        }
-        formData.append("image", formImage);
-      }
-
-      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
-        onSuccess();
-        return;
-      }
-
-      const token = await getToken();
-      if (!token) {
-        throw new Error(ABOUT_PAGE.ERRORS.NO_AUTH_TOKEN);
-      }
-
-      const response = await fetch("/api/bio", {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      const result = await response.json();
-      if (!response.ok) {
-        throw new Error(result.error || ABOUT_PAGE.ERRORS.UPDATE_BIO_FAILED);
-      }
-
-      if (result.data) {
-        const bioData: BioContent = result.data;
-        setBioImageUrl(bioData.image?.url || null);
-        setBioText(bioData.description || null);
-        setBioTitle(bioData.title || null);
-        setError(null);
-        onSuccess();
-      }
-    } catch (err) {
-      console.error("Update Error:", err);
-      setError(err instanceof Error ? err.message : ABOUT_PAGE.ERRORS.UPDATE_BIO_ERROR);
-    }
-  };
-
-  const sectionVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-    hover: {
-      scale: isMobile ? 1 : 1.05,
-      transition: { duration: 0.2, ease: "easeOut" },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  if (authLoading || isLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <div className="min-h-screen w-full bg-[#F7F7F7] relative flex flex-col">
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF69B4;
-          --modern-purple: #D946EF;
-        }
-
-        * {
-          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        }
-
-        .gradient-text {
-          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-        }
-
-        .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;
-          }
-          .gradient-text {
-            font-size: 2.5rem;
-          }
-        }
-
-        .line-clamp-8 {
-          display: -webkit-box;
-          -webkit-line-clamp: 8;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
-      `}</style>
-      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white">
-        <motion.h1
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
-        >
-          {ABOUT_PAGE.UI.MAIN_HEADING}
-        </motion.h1>
-        <BioSection
-          user={user}
-          authLoading={authLoading}
-          bioImageUrl={bioImageUrl}
-          bioText={bioText}
-          bioTitle={bioTitle}
-          error={error}
-          isLoading={isLoading}
-          setBioImageUrl={setBioImageUrl}
-          setBioText={setBioText}
-          setBioTitle={setBioTitle}
-          setError={setError}
-          handlePatchSubmit={handlePatchSubmit}
-        />
-        <Testimonials isMobile={isMobile} />
-        <div className="px-20 py-52 sm:py-52 pt-32">
-          <h1 className="text-2xl sm:text-3xl font-extrabold pb-12 uppercase">
-            {ABOUT_PAGE.UI.SUCCESS_STORY_HEADING}
-          </h1>
-          <p>{ABOUT_PAGE.UI.SUCCESS_STORY_TEXT}</p>
-        </div>
-      </div>
-    </div>
-  );
+"use client";
+
+import { motion } from "framer-motion";
+import { useRef, useState, useEffect } from "react";
+import { BioSection } from "@/components/addOns/functional/BioEditor";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { useAuth, useUser } from "@clerk/nextjs";
+import Testimonials from "@/components/addOns/non-functional/Testimonials";
+import { ABOUT_PAGE } from "../../lib/constants/about";
+
+interface BioContent {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  bio: boolean;
+  about: boolean;
+  image?: { url: string; id: number };
+  createdAt: string;
+}
+
+export default function AboutPage() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { getToken } = useAuth();
+  const { user: clerkUser, isSignedIn } = useUser();
+  const [isMobile, setIsMobile] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [bioImageUrl, setBioImageUrl] = useState<string | null>(null);
+  const [bioText, setBioText] = useState<string | null>(null);
+  const [bioTitle, setBioTitle] = useState<string | null>(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: isEditModalOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isEditModalOpen]);
+
+  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 handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener("user-login", handleLogin);
+    window.removeEventListener("user-logout", handleLogout);
+    return () => {
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+    };
+  }, [checkSession]);
+
+  useEffect(() => {
+    const fetchBioData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch("/api/bio", {
+          headers: { "Content-Type": "application/json" },
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || ABOUT_PAGE.ERRORS.FETCH_BIO_FAILED);
+        }
+        const result = await response.json();
+        if (result.data) {
+          const bioData: BioContent = result.data;
+          setBioImageUrl(bioData.image?.url || null);
+          setBioText(bioData.description || null);
+          setBioTitle(bioData.title || null);
+        } else {
+          throw new Error(ABOUT_PAGE.ERRORS.BIO_NOT_FOUND);
+        }
+      } catch (err) {
+        console.error("Fetch Error:", err);
+        setError(err instanceof Error ? err.message : ABOUT_PAGE.ERRORS.FETCH_BIO_ERROR);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBioData();
+  }, []);
+
+  const handlePatchSubmit = async (
+    e: React.FormEvent,
+    formTitle: string,
+    formDescription: string,
+    formImage: File | null,
+    onSuccess: () => void
+  ) => {
+    e.preventDefault();
+    if (!user?.businessAdminId) {
+      console.error("No user or businessAdminId:", { user, businessAdminId: user?.businessAdminId });
+      setError(ABOUT_PAGE.ERRORS.UNAUTHORIZED_UPDATE);
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      if (formTitle && formTitle !== bioTitle) {
+        formData.append("title", formTitle);
+      }
+      if (formDescription && formDescription !== bioText) {
+        formData.append("description", formDescription);
+      }
+      if (formImage) {
+        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
+          throw new Error(ABOUT_PAGE.ERRORS.INVALID_IMAGE_TYPE);
+        }
+        formData.append("image", formImage);
+      }
+
+      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
+        onSuccess();
+        return;
+      }
+
+      const token = await getToken();
+      if (!token) {
+        throw new Error(ABOUT_PAGE.ERRORS.NO_AUTH_TOKEN);
+      }
+
+      const response = await fetch("/api/bio", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      const result = await response.json();
+      if (!response.ok) {
+        throw new Error(result.error || ABOUT_PAGE.ERRORS.UPDATE_BIO_FAILED);
+      }
+
+      if (result.data) {
+        const bioData: BioContent = result.data;
+        setBioImageUrl(bioData.image?.url || null);
+        setBioText(bioData.description || null);
+        setBioTitle(bioData.title || null);
+        setError(null);
+        onSuccess();
+      }
+    } catch (err) {
+      console.error("Update Error:", err);
+      setError(err instanceof Error ? err.message : ABOUT_PAGE.ERRORS.UPDATE_BIO_ERROR);
+    }
+  };
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+    hover: {
+      scale: isMobile ? 1 : 1.05,
+      transition: { duration: 0.2, ease: "easeOut" },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  if (authLoading || isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full bg-[#F7F7F7] relative flex flex-col">
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        .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;
+          }
+          .gradient-text {
+            font-size: 2.5rem;
+          }
+        }
+
+        .line-clamp-8 {
+          display: -webkit-box;
+          -webkit-line-clamp: 8;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      `}</style>
+      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white">
+        <motion.h1
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
+        >
+          {ABOUT_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+        <BioSection
+          user={user}
+          authLoading={authLoading}
+          bioImageUrl={bioImageUrl}
+          bioText={bioText}
+          bioTitle={bioTitle}
+          error={error}
+          isLoading={isLoading}
+          setBioImageUrl={setBioImageUrl}
+          setBioText={setBioText}
+          setBioTitle={setBioTitle}
+          setError={setError}
+          handlePatchSubmit={handlePatchSubmit}
+        />
+        <Testimonials isMobile={isMobile} />
+        <div className="px-20 py-52 sm:py-52 pt-32">
+          <h1 className="text-2xl sm:text-3xl font-extrabold pb-12 uppercase">
+            {ABOUT_PAGE.UI.SUCCESS_STORY_HEADING}
+          </h1>
+          <p>{ABOUT_PAGE.UI.SUCCESS_STORY_TEXT}</p>
+        </div>
+      </div>
+    </div>
+  );
 }