npm - nexstruct - Versions diffs - 1.0.0 - Mend

nexstruct 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/templates/nextjs-base/src/app/globals.css ADDED Viewed

@@ -0,0 +1,71 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  html {
+    @apply transition-colors duration-300;
+  }
+}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+}

package/templates/nextjs-base/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Sidebar from './_components/sidebar';
+const inter = Inter({ subsets: ['latin'] });
+export const metadata: Metadata = {
+  title: 'Nexstruct',
+  description: 'Scaffolded with Nexstruct',
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className} suppressHydrationWarning>
+        <Sidebar>{children}</Sidebar>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs-base/src/app/loading.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-background">
+      <div className="relative">
+        <div className="h-16 w-16 animate-spin rounded-full border-4 border-muted border-t-primary" />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-4 rounded-full bg-primary animate-pulse" />
+        </div>
+      </div>
+      <p className="mt-6 text-sm text-muted-foreground animate-pulse">Loading…</p>
+    </div>
+  );
+}

package/templates/nextjs-base/src/app/not-found.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-background px-4">
+      <div className="text-8xl font-bold text-primary/20 select-none">404</div>
+      <h1 className="text-2xl font-semibold text-foreground mt-4 mb-2">Page not found</h1>
+      <p className="text-sm text-muted-foreground text-center max-w-md mb-8">
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
+      </p>
+      <Link
+        href="/"
+        className="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors"
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+        </svg>
+        Back to home
+      </Link>
+    </div>
+  );
+}

package/templates/nextjs-base/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-4xl font-bold">Nexstruct</h1>
+      <p className="mt-4 text-lg text-muted-foreground">
+        Your project is ready. Start building.
+      </p>
+    </main>
+  );
+}

package/templates/nextjs-base/tailwind.config.ts ADDED Viewed

@@ -0,0 +1,69 @@
+import type { Config } from 'tailwindcss';
+import animate from 'tailwindcss-animate';
+const config: Config = {
+  darkMode: 'class',
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [animate],
+};
+export default config;

package/templates/shared/src/components/common/theme-toggle.component.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+'use client';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return <div className="h-9 w-9" />;
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? (
+        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+        </svg>
+      ) : (
+        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/templates/shared/src/components/common/toast/custom-message.component.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * ToastMessageChange — Transform common error/response messages into
+ * human-friendly text. Register known patterns here.
+ */
+export const ToastMessageChange = (message: string | any): string => {
+  switch (message) {
+    case `Prisma: Unique constraint failed on field "name"`:
+      return 'Duplicate data found. Please change the title and try again.';
+    case `Prisma: Unique constraint failed on field "courseType"`:
+      return 'Duplicate data found. Please change the course type and try again.';
+    case 'Course total credits is less than modules total credits':
+      return 'Please ensure the assigned module credit is within the course credit.';
+    default:
+      return message;
+  }
+};

package/templates/shared/src/components/common/toast/index.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export { ToastMessageShow } from './toast-message.component';
+export { ToastMessageChange } from './custom-message.component';
+export {
+  toastSuccessMessage,
+  toastErrorMessage,
+  toastLoadingMessage,
+  toastCustomMessage,
+} from './toast-message.component';

package/templates/shared/src/components/common/toast/toast-message.component.tsx ADDED Viewed

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+import toast, { ToastOptions } from 'react-hot-toast';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import { ToastMessageChange } from './custom-message.component';
+/**
+ * Available toast notification types
+ */
+type ToastType = 'success' | 'error' | 'loading' | 'custom';
+/**
+ * Extended toast options including custom flags
+ */
+type ExtendedToastOptions = ToastOptions & {
+  textFormat?: boolean;
+  changeMessage?: boolean;
+};
+/**
+ * Default toast configuration
+ */
+const defaultOptions: ExtendedToastOptions = {
+  duration: 3000,
+  position: 'top-center',
+  textFormat: true,
+  changeMessage: false,
+};
+/**
+ * ToastMessageShow — Unified toast notification system.
+ *
+ * Supports:
+ * - Success / Error / Loading / Custom types
+ * - Extracts messages from API error responses
+ * - Optional message transformation via ToastMessageChange
+ * - Optional text case formatting
+ *
+ * @example
+ * ToastMessageShow('success', 'Profile updated successfully');
+ * ToastMessageShow('error', apiErrorResponse);
+ * ToastMessageShow('loading', 'Saving...', { textFormat: false });
+ */
+export const ToastMessageShow = (
+  type: ToastType,
+  message: any,
+  options: ExtendedToastOptions = {},
+) => {
+  const { textFormat, changeMessage, ...toastOptions } = {
+    ...defaultOptions,
+    ...options,
+  };
+  const MessageHandler = (msg: string) => {
+    let finalMessage = msg;
+    if (changeMessage) finalMessage = ToastMessageChange(finalMessage);
+    if (textFormat) finalMessage = LabelAndPlaceholderTextFormat(finalMessage);
+    return finalMessage;
+  };
+  switch (type) {
+    case 'success': {
+      if (typeof message !== 'string') {
+        message = message?.data?.message || message?.message || 'Successfully updated';
+      }
+      message = MessageHandler(message);
+      toast.success(message, toastOptions);
+      break;
+    }
+    case 'error': {
+      if (typeof message !== 'string') {
+        message =
+          message?.response?.data?.message ||
+          message?.response?.message ||
+          message?.data?.message ||
+          message?.message ||
+          'Something went wrong';
+      }
+      message = MessageHandler(message);
+      toast.error(message, toastOptions);
+      break;
+    }
+    case 'loading':
+      message = MessageHandler(message);
+      toast.loading(message, toastOptions);
+      break;
+    case 'custom':
+      message = MessageHandler(message);
+      toast(message, toastOptions);
+      break;
+    default:
+      message = MessageHandler(message);
+      toast(message, toastOptions);
+  }
+};
+/** Shortcut: Show a success toast */
+export const toastSuccessMessage = (msg: any, options?: ExtendedToastOptions) =>
+  ToastMessageShow('success', msg, options);
+/** Shortcut: Show an error toast */
+export const toastErrorMessage = (msg: any, options?: ExtendedToastOptions) =>
+  ToastMessageShow('error', msg, options);
+/** Shortcut: Show a loading toast */
+export const toastLoadingMessage = (msg: any, options?: ExtendedToastOptions) =>
+  ToastMessageShow('loading', msg, options);
+/** Shortcut: Show a custom toast */
+export const toastCustomMessage = (msg: any, options?: ExtendedToastOptions) =>
+  ToastMessageShow('custom', msg, options);

package/templates/shared/src/hooks/use-debounce.hook.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react';
+export function useDebounce<T>(value: T, delayMs: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return debouncedValue;
+}

package/templates/shared/src/hooks/use-fetch.hook.ts ADDED Viewed

@@ -0,0 +1,42 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+interface UseFetchResult<T> {
+  data: T | null;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+export function useFetch<T>(url: string | null): UseFetchResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [refetchTrigger, setRefetchTrigger] = useState(0);
+  const refetch = useCallback(() => setRefetchTrigger((n) => n + 1), []);
+  useEffect(() => {
+    if (!url) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    fetch(url)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((json) => {
+        if (!cancelled) { setData(json); setIsLoading(false); }
+      })
+      .catch((err) => {
+        if (!cancelled) { setError(err); setIsLoading(false); }
+      });
+    return () => { cancelled = true; };
+  }, [url, refetchTrigger]);
+  return { data, isLoading, error, refetch };
+}

package/templates/shared/src/hooks/use-intersection-observer.hook.ts ADDED Viewed

@@ -0,0 +1,39 @@
+'use client';
+import { useEffect, useRef, useState, type RefObject } from 'react';
+interface UseIntersectionObserverOptions {
+  threshold?: number;
+  root?: Element | null;
+  rootMargin?: string;
+  triggerOnce?: boolean;
+}
+export function useIntersectionObserver<T extends Element>(
+  options: UseIntersectionObserverOptions = {}
+): [RefObject<T | null>, boolean] {
+  const { threshold = 0, root = null, rootMargin = '0px', triggerOnce = false } = options;
+  const ref = useRef<T | null>(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsIntersecting(true);
+          if (triggerOnce) observer.unobserve(element);
+        } else if (!triggerOnce) {
+          setIsIntersecting(false);
+        }
+      },
+      { threshold, root, rootMargin }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [threshold, root, rootMargin, triggerOnce]);
+  return [ref, isIntersecting];
+}

package/templates/shared/src/hooks/use-local-storage.hook.ts ADDED Viewed

@@ -0,0 +1,30 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(initialValue);
+  useEffect(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item) setStoredValue(JSON.parse(item));
+    } catch {
+      console.warn(`Error reading localStorage key "${key}":`);
+    }
+  }, [key]);
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)) => {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      try {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } catch {
+        console.warn(`Error setting localStorage key "${key}":`);
+      }
+    },
+    [key, storedValue]
+  );
+  return [storedValue, setValue] as const;
+}

package/templates/shared/src/hooks/use-media-query.hook.ts ADDED Viewed

@@ -0,0 +1,26 @@
+'use client';
+import { useState, useEffect } from 'react';
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+    const listener = (event: MediaQueryListEvent) => setMatches(event.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+  return matches;
+}
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)');
+}
+export function useIsDarkMode(): boolean {
+  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  return prefersDark;
+}

package/templates/shared/src/hooks/use-toggle.hook.ts ADDED Viewed

@@ -0,0 +1,12 @@
+'use client';
+import { useState, useCallback } from 'react';
+export function useToggle(initialValue: boolean = false) {
+  const [value, setValue] = useState(initialValue);
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  return { value, toggle, setTrue, setFalse, setValue } as const;
+}