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

ikramhussainsiyam-create-my-project 1.0.1 → 1.3.1

Files changed (45) 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/{ViteJS/TypeScript/src/index.css → NextJS/JavaScript/src/app/globals.css} RENAMED Viewed

@@ -4,9 +4,8 @@
 @layer base {
   body {
-    @apply font-recursive_sans bg-white h-[200vh];
+    @apply antialiased bg-white font-sans;
   }
   /* scroll bar styling */
   ::-webkit-scrollbar {
     width: 12px;
@@ -22,4 +21,10 @@
   .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/package.json CHANGED Viewed

@@ -10,9 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.9",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.4",
+    "react-hook-form": "^7.53.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "use-immer": "^0.10.0"
+    "use-immer": "^0.10.0",
+    "react-toastify": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
@@ -24,7 +30,6 @@
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",

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

@@ -1,10 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 @layer base {
   body {
-    @apply font-recursive_sans bg-white h-[200vh];
+    @apply font-inter bg-white;
   }
   /* scroll bar styling */
@@ -22,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;
+  }
 }

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

@@ -0,0 +1,10 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...classes) {
+  return twMerge(clsx(classes));
+}
+export function getRandomID() {
+  return Math.random().toString(36).substring(2, 9);
+}

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

@@ -1,13 +1,18 @@
 /** @type {import('tailwindcss').Config} */
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import forms from "@tailwindcss/forms";
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       fontFamily: {
-        inter: ["Inter", "Sans serif"],
-        recursive_sans: ["Recursive Sans Casual", "Monospace"],
+        inter: ["Inter", "sans-serif"],
+      },
+      container: {
+        center: true,
       },
     },
   },
-  plugins: [],
+  plugins: [forms, aspectRatio],
 };

package/templates/ViteJS/JavaScript/src/components/Button.jsx DELETED Viewed

@@ -1,5 +0,0 @@
-export default function Button() {
-  return (
-    <div>Button</div>
-  )
-}

package/templates/ViteJS/TypeScript/README.md DELETED Viewed

@@ -1,50 +0,0 @@
-# React + TypeScript + Vite
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-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
-## Expanding the ESLint configuration
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-- Configure the top-level `parserOptions` property like this:
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```

package/templates/ViteJS/TypeScript/eslint.config.js DELETED Viewed

@@ -1,35 +0,0 @@
-import js from "@eslint/js";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-export default tseslint.config(
-  { ignores: ["dist"] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      "react/jsx-no-target-blank": "off",
-      "no-unused-vars": [
-        "error",
-        { vars: "all", args: "after-used", ignoreRestSiblings: true },
-      ],
-      "react/prop-types": "off",
-      "react/no-unescaped-entities": "off",
-      "react-refresh/only-export-components": [
-        "warn",
-        { allowConstantExport: true },
-      ],
-    },
-  }
-);

package/templates/ViteJS/TypeScript/gitignore-template DELETED Viewed

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-node_modules
-dist
-dist-ssr
-*.local
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/templates/ViteJS/TypeScript/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Your Project Title | Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/templates/ViteJS/TypeScript/package.json DELETED Viewed

@@ -1,33 +0,0 @@
-{
-  "name": "typescript",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "use-immer": "^0.10.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.13.0",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.13",
-    "globals": "^15.11.0",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9"
-  }
-}