@devvistatech/devvista-kit 0.0.1

package/CHANGELOG.md

@@ -0,0 +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.
+- Basic update script that overwrote files without robust merging.

package/LICENSE

@@ -0,0 +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.
+
+Unauthorized use is strictly prohibited and may result in legal action.

package/README.md

@@ -0,0 +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`

package/app/about/page.tsx

@@ -0,0 +1,306 @@
+"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 "../constants/about";
+
+interface BioContent {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  bio: boolean;
+  about: boolean;
+  image?: { url: string; id: number };
+  createdAt: string;
+}
+
+//test-again-again!!!!!!!!!!!!!!!!!!
+
+
+//test-again-again!!!!!!!!!!!!!!!!!!
+//test-again-again!!!!!!!!!!!!!!!!!!
+//test-again-again!!!!!!!!!!!!!!!!!!
+
+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>
+  );
+}