npm - ikramhussainsiyam-create-my-project - Versions diffs - 1.2.1 → 1.3.1 - Mend

ikramhussainsiyam-create-my-project 1.2.1 → 1.3.1

Files changed (25) hide show

package/templates/NextJS/JavaScript/package.json ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "name": "module-7-introduction-to-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.9",
+    "clsx": "^2.1.1",
+    "next": "14.2.18",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7.53.2",
+    "react-icons": "^5.3.0",
+    "sonner": "^1.7.0",
+    "tailwind-merge": "^2.5.4",
+    "use-immer": "^0.10.0"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "14.2.18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

package/templates/NextJS/JavaScript/postcss.config.mjs ADDED Viewed

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+export default config;

package/templates/NextJS/JavaScript/src/app/favicon.ico ADDED Viewed

Binary file

package/templates/NextJS/JavaScript/src/app/globals.css ADDED Viewed

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  body {
+    @apply antialiased bg-white font-sans;
+  }
+  /* scroll bar styling */
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #e2e2e2;
+    border-radius: 10px;
+  }
+}
+@layer components {
+  .btn {
+    @apply px-2 py-1 border rounded hover:bg-zinc-100 active:bg-white active:scale-95;
+  }
+  .container {
+    @apply px-4;
+  }
+  .input {
+    @apply px-3 py-2 border rounded;
+  }
+}

package/templates/NextJS/JavaScript/src/app/layout.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import ToastContainer from "@/components/ToastContainer";
+import { Inter } from "next/font/google";
+import "./globals.css";
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+});
+export const metadata = {
+  title: "Project Title",
+  description: "Project Description",
+};
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={fontSans.variable}>
+        <main>{children}</main>
+        <ToastContainer />
+      </body>
+    </html>
+  );
+}

package/templates/NextJS/JavaScript/src/app/page.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>Home page</div>;
+}

package/templates/NextJS/JavaScript/src/components/Navlink.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { forwardRef } from "react";
+function Navlink({ href, className, children, ...props }, ref) {
+  const pathname = usePathname();
+  const isActive = href === pathname;
+  return (
+    <Link
+      href={href}
+      {...props}
+      className={
+        isActive && className
+          ? `underline ${className}`
+          : isActive
+          ? "underline"
+          : className
+      }
+      ref={ref}
+    >
+      {children}
+    </Link>
+  );
+}
+export default forwardRef(Navlink);

package/templates/NextJS/JavaScript/src/components/ToastContainer.jsx ADDED Viewed

@@ -0,0 +1,84 @@
+"use client";
+import {
+  FaCircleCheck,
+  FaCircleExclamation,
+  FaCircleInfo,
+  FaCircleXmark,
+} from "react-icons/fa6";
+import { LiaSpinnerSolid } from "react-icons/lia";
+import { Toaster } from "sonner";
+const ToastContainer = ({ type = "iconic", ...props }) => {
+  const icons = () => {
+    switch (type) {
+      case "neutral":
+        return {
+          success: <FaCircleCheck className="text-xl" />,
+          error: <FaCircleXmark className="text-xl" />,
+          info: <FaCircleInfo className="text-xl" />,
+          warning: <FaCircleExclamation className="text-xl" />,
+          loading: <LiaSpinnerSolid className="text-2xl animate-spin" />,
+        };
+      case "iconic":
+        return {
+          success: <FaCircleCheck className="text-xl text-lime-500" />,
+          error: <FaCircleXmark className="text-xl text-rose-500" />,
+          info: <FaCircleInfo className="text-xl text-sky-500" />,
+          warning: <FaCircleExclamation className="text-xl text-amber-500" />,
+          loading: <LiaSpinnerSolid className="text-2xl animate-spin" />,
+        };
+      case "colored":
+        return {
+          success: <FaCircleCheck className="text-xl text-lime-700" />,
+          error: <FaCircleXmark className="text-xl text-rose-700" />,
+          info: <FaCircleInfo className="text-xl text-sky-700" />,
+          warning: <FaCircleExclamation className="text-xl text-amber-700" />,
+          loading: <LiaSpinnerSolid className="text-2xl animate-spin" />,
+        };
+    }
+  };
+  return (
+    <Toaster
+      {...props}
+      toastOptions={{
+        classNames: {
+          toast: `group toast bg-background text-foreground font-sans gap-3 items-start ${
+            type === "colored" ? "shadow-lg" : ""
+          }`,
+          title: "text-base font-semibold",
+          description: `text-sm ${
+            type === "colored" ? "" : "text-muted-foreground"
+          }`,
+          icon: "text-center text-foreground mt-[4.3px]",
+          success:
+            type === "colored"
+              ? "bg-lime-200 text-lime-700 shadow-lime-600/20 border-transparent"
+              : "",
+          error:
+            type === "colored"
+              ? "bg-rose-200 text-rose-700 shadow-rose-600/20 border-transparent"
+              : "",
+          info:
+            type === "colored"
+              ? "bg-sky-200 text-sky-700 shadow-sky-600/20 border-transparent"
+              : "",
+          warning:
+            type === "colored"
+              ? "bg-amber-200 text-amber-700 shadow-amber-600/20 border-transparent"
+              : "",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      icons={icons()}
+    />
+  );
+};
+export default ToastContainer;

package/templates/NextJS/JavaScript/src/components/ui/Alert.jsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/utils";
+export default function Alert({ type, title, description, className }) {
+  return (
+    <div
+      className={cn(
+        `flex p-4 gap-3 text-sm rounded-lg border border-transparent ${alertType(
+          type
+        )}`,
+        className
+      )}
+      role="alert"
+    >
+      <svg
+        className={"w-4 h-4 mt-0.5"}
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span className="sr-only">Danger</span>
+      <div className="space-y-0.5">
+        <div>
+          <span className="font-semibold capitalize">{type || "Alert"}</span>:{" "}
+          {title}
+        </div>
+        <div>{description}</div>
+      </div>
+    </div>
+  );
+}
+function alertType(type) {
+  switch (type) {
+    case "success":
+      return "text-lime-800 bg-lime-100 border-lime-300";
+    case "warning":
+      return "text-amber-800 bg-amber-100 border-amber-300";
+    case "error":
+      return "text-rose-800 bg-rose-100 border-rose-300";
+    case "info":
+      return "text-sky-800 bg-sky-100 border-sky-300";
+    default:
+      return "text-gray-800 bg-gray-100 border-gray-300";
+  }
+}

package/templates/NextJS/JavaScript/src/components/ui/Button.jsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+export default function Button({
+  size = "md",
+  color = "blue",
+  rounded = "lg",
+  children,
+  onClick,
+  className,
+  ...props
+}) {
+  return (
+    <button
+      {...props}
+      onClick={onClick}
+      className={cn(
+        `focus:ring-4 text-center font-medium focus:outline-none border border-transparent flex items-center gap-2.5 active:scale-[.97] transition duration-100 ${buttonStyles.color[color]} ${buttonStyles.size[size]} ${buttonStyles.rounded[rounded]}`,
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+const buttonStyles = {
+  color: {
+    blue: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300",
+    dark: "text-white bg-zinc-800 hover:bg-zinc-900 focus:ring-zinc-300",
+    outline:
+      "text-zinc-900 bg-white border-zinc-300 hover:bg-zinc-100 focus:ring-zinc-100",
+    ghost:
+      "text-zinc-900 bg-zinc-100 hover:bg-zinc-200/70 active:bg-zinc-100 focus:ring-zinc-100",
+    green: "text-white bg-green-700 hover:bg-green-800 focus:ring-green-300",
+    red: "text-white bg-red-700 hover:bg-red-800 focus:ring-red-300",
+    indigo:
+      "text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300",
+    amber: "text-white bg-amber-400 hover:bg-amber-500 focus:ring-amber-300",
+    "gradient-lime":
+      "text-zinc-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-lime-200",
+    "gradient-blue":
+      "text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl  focus:ring-blue-300",
+  },
+  size: {
+    sm: "text-sm px-3.5 py-1.5",
+    md: "text-sm px-5 py-2.5",
+    lg: "text-base px-5 py-2.5",
+    xl: "text-lg px-5 py-2.5",
+  },
+  rounded: {
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    full: "rounded-full",
+    none: "rounded-none",
+  },
+};

package/templates/NextJS/JavaScript/src/components/ui/Skeleton.jsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils/utils";
+export default function Skeleton({ className, children }) {
+  return (
+    <div
+      className={cn(
+        "bg-zinc-200 animate-none animate-pulse rounded-md w-full h-full",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/NextJS/JavaScript/src/lib/utils.js ADDED Viewed

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { toast } from "sonner";
+import { twMerge } from "tailwind-merge";
+export function cn(...classes) {
+  return twMerge(clsx(classes));
+}
+export function getRandomID() {
+  return Math.random().toString(36).substring(2, 9);
+}
+export const showToast = (
+  type, // "success" | "error" | "info" | "warning" | "loading"
+  message,
+  options
+) => {
+  toast[type](message, {
+    position: options?.position || "top-center",
+    id: options?.id,
+    duration: options?.duration || 2000,
+    description: options?.description,
+  });
+};

package/templates/NextJS/JavaScript/tailwind.config.js ADDED Viewed

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import forms from "@tailwindcss/forms";
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-sans)", "sans-serif"],
+      },
+    },
+  },
+  plugins: [forms, aspectRatio],
+};

package/templates/ViteJS/JavaScript/README.md CHANGED Viewed

@@ -6,3 +6,6 @@ Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+<!-- TODO 1: add some most used components -->
+<!-- TODO 2: add some most used utils / hooks / configs -->

package/templates/ViteJS/JavaScript/eslint.config.js CHANGED Viewed

@@ -35,10 +35,7 @@ export default [
       ],
       "react/prop-types": "off",
       "react/no-unescaped-entities": "off",
-      "react-refresh/only-export-components": [
-        "warn",
-        { allowConstantExport: true },
-      ],
+      "react-refresh/only-export-components": "off",
     },
   },
 ];

package/templates/ViteJS/JavaScript/gitignore-template CHANGED Viewed

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 node_modules
+html_template
 dist
 dist-ssr
 *.local

package/templates/ViteJS/JavaScript/src/index.css CHANGED Viewed

@@ -23,4 +23,17 @@
   .btn {
     @apply px-2 py-1 border rounded hover:bg-zinc-100 active:bg-white active:scale-95;
   }
+  /* TODO: remove 👇 these classes if you don't need them. */
+  .flex-c {
+    @apply flex justify-center items-center gap-2;
+  }
+  .flex-y {
+    @apply flex flex-col gap-2 items-center;
+  }
+  .flex-x {
+    @apply flex flex-row gap-2 items-center;
+  }
+  .title {
+    @apply text-2xl font-semibold mb-6;
+  }
 }