ikramhussainsiyam-create-my-project 1.2.1 → 1.3.2

package/templates/NextJS/JavaScript/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "test",
+  "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": "15.0.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "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": "15.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

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

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

package/templates/NextJS/JavaScript/public/lws.svg

@@ -0,0 +1,10 @@
+<svg width="1286" height="1286" viewBox="0 0 1286 1286" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M643.334 1260.29C984.068 1260.29 1260.29 984.072 1260.29 643.338C1260.29 302.605 984.068 26.3857 643.334 26.3857C302.6 26.3857 26.3809 302.605 26.3809 643.338C26.3809 984.072 302.6 1260.29 643.334 1260.29Z" fill="#171C2A"/>
+<path d="M643.341 1286C516.235 1286 391.984 1248.31 286.299 1177.69C180.614 1107.08 98.2429 1006.71 49.6015 889.275C0.960094 771.845 -11.7667 642.627 13.0305 517.964C37.8276 393.3 99.035 278.789 188.913 188.912C278.79 99.0344 393.301 37.8271 517.965 13.03C642.629 -11.7672 771.846 0.959605 889.277 49.6009C1006.71 98.2423 1107.08 180.613 1177.69 286.298C1248.31 391.983 1286 516.234 1286 643.34C1285.8 813.721 1218.02 977.066 1097.54 1097.54C977.067 1218.02 813.723 1285.8 643.341 1286ZM643.341 52.0942C526.404 52.0942 412.092 86.7701 314.862 151.737C217.632 216.704 141.851 309.044 97.1007 417.08C52.3506 525.116 40.6419 643.996 63.4553 758.687C86.2687 873.377 142.58 978.727 225.267 1061.41C307.954 1144.1 413.304 1200.41 527.995 1223.23C642.686 1246.04 761.566 1234.33 869.602 1189.58C977.638 1144.83 1069.98 1069.05 1134.95 971.819C1199.91 874.589 1234.59 760.278 1234.59 643.34C1234.38 486.595 1172.03 336.328 1061.19 225.492C950.355 114.656 800.087 52.2982 643.341 52.0942Z" fill="#00D991"/>
+<path d="M491.347 691.554L487.623 695.283C485.717 697.191 485.719 700.284 487.628 702.19L543.562 758.046C545.47 759.952 548.563 759.95 550.469 758.041L554.193 754.312C556.099 752.403 556.097 749.311 554.188 747.405L498.254 691.549C496.345 689.643 493.253 689.645 491.347 691.554Z" fill="white"/>
+<path d="M492.578 662.844L488.852 666.57C486.945 668.478 486.945 671.57 488.852 673.478L535.022 719.648C536.929 721.555 540.022 721.555 541.929 719.648L545.656 715.921C547.563 714.014 547.563 710.921 545.656 709.014L499.486 662.844C497.578 660.937 494.486 660.937 492.578 662.844Z" fill="white"/>
+<path d="M807.245 691.69L803.522 695.419C801.615 697.328 801.618 700.421 803.526 702.327L859.46 758.182C861.369 760.088 864.461 760.086 866.367 758.178L870.091 754.449C871.997 752.54 871.995 749.447 870.086 747.541L814.153 691.686C812.244 689.78 809.151 689.782 807.245 691.69Z" fill="white"/>
+<path d="M808.089 662.878L804.359 666.601C802.45 668.506 802.447 671.599 804.353 673.508L850.483 719.718C852.388 721.627 855.481 721.63 857.39 719.724L861.12 716.001C863.029 714.095 863.031 711.003 861.126 709.094L814.996 662.884C813.09 660.975 809.998 660.972 808.089 662.878Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M938.973 726.233H926.12C922.473 695.802 907.889 667.734 885.084 647.257C862.279 626.781 832.808 615.291 802.161 614.93C771.515 614.568 741.781 625.359 718.499 645.292C695.218 665.224 679.975 692.941 675.611 723.277C668.799 724.82 642.193 726.233 642.193 726.233C642.193 726.233 616.486 724.948 610.188 723.534C605.853 693.195 590.638 665.467 567.377 645.512C544.117 625.558 514.396 614.738 483.751 615.068C453.105 615.398 423.625 626.856 400.799 647.307C377.974 667.758 363.36 695.808 359.68 726.233H345.284C342.693 726.233 340.209 727.263 338.377 729.095C336.545 730.926 335.516 733.411 335.516 736.002V746.156C335.549 748.702 336.575 751.135 338.376 752.935C340.177 754.736 342.609 755.762 345.156 755.796H359.037C362.65 786.233 377.204 814.319 399.989 834.822C422.773 855.324 452.234 866.846 482.882 867.239C513.531 867.632 543.277 856.87 566.58 836.959C589.883 817.047 605.153 789.344 609.546 759.009C616.615 757.595 641.55 756.181 641.55 756.181C641.55 756.181 668.028 757.852 674.968 759.266C678.745 790.145 693.781 818.546 717.196 839.028C740.612 859.51 770.761 870.633 801.868 870.267C832.975 869.901 862.854 858.071 885.781 837.044C908.708 816.016 923.071 787.27 926.12 756.31H938.973C941.52 756.311 943.966 755.317 945.791 753.54C947.616 751.764 948.674 749.344 948.741 746.799V736.13C948.741 733.54 947.712 731.055 945.88 729.223C944.048 727.391 941.564 726.362 938.973 726.362V726.233ZM484.484 837.542C465.444 837.542 446.831 831.896 430.999 821.317C415.168 810.739 402.828 795.704 395.542 778.113C388.255 760.522 386.349 741.165 390.064 722.49C393.778 703.816 402.947 686.662 416.411 673.198C429.874 659.735 447.028 650.566 465.703 646.851C484.377 643.137 503.734 645.043 521.325 652.33C538.916 659.616 553.952 671.955 564.53 687.787C575.108 703.618 580.755 722.231 580.755 741.272C580.755 766.804 570.612 791.291 552.558 809.345C534.503 827.399 510.017 837.542 484.484 837.542ZM800.03 837.542C780.99 837.542 762.377 831.896 746.545 821.317C730.713 810.739 718.374 795.704 711.088 778.113C703.801 760.522 701.895 741.165 705.609 722.49C709.324 703.816 718.493 686.662 731.957 673.198C745.42 659.735 762.574 650.566 781.249 646.851C799.923 643.137 819.28 645.043 836.871 652.33C854.462 659.616 869.498 671.955 880.076 687.787C890.654 703.618 896.3 722.231 896.3 741.272C896.3 766.804 886.158 791.291 868.103 809.345C850.049 827.399 825.562 837.542 800.03 837.542Z" fill="white"/>
+<path d="M1049.24 689.872V465.07H970.193C974.816 440.361 977.779 415.369 979.062 390.264L932.533 424.839C958.239 395.148 932.533 256.72 932.533 256.72C932.533 256.72 898.601 323.299 687.037 306.333C475.473 289.367 445.783 373.427 445.783 373.427C420.076 347.72 445.783 305.69 445.783 305.69C438.117 309.232 431.225 314.25 425.499 320.457C419.774 326.663 415.328 333.938 412.415 341.864C409.503 349.79 408.181 358.212 408.525 366.649C408.869 375.086 410.872 383.373 414.421 391.035L416.22 394.506H347.713L395.012 424.839C380.107 434.729 368.652 449.015 362.237 465.712H234.99V689.872L188.719 736.143L234.99 782.415L247.843 1007.22H368.021L355.168 769.305C355.294 768.517 355.261 767.713 355.069 766.939C354.877 766.165 354.53 765.438 354.05 764.802C353.569 764.166 352.965 763.633 352.274 763.236C351.583 762.839 350.818 762.586 350.026 762.492C348.461 762.27 346.87 762.67 345.597 763.608C344.323 764.545 343.468 765.944 343.214 767.505C343.085 768.098 343.085 768.712 343.214 769.305V951.82H289.359V767.505L257.74 736.143L289.231 704.782V520.467H349.127C347.712 534.389 347.454 548.404 348.355 562.368H390.642C392.995 536.697 405.259 512.952 424.832 496.174C496.81 407.23 801.559 459.157 801.559 459.157L835.363 409.287L822.51 459.157C894.23 476.252 900.4 560.826 900.4 560.826H932.533C942.193 548.697 949.792 535.062 955.026 520.467H994.871V704.782L1026.36 736.143L994.871 767.505V951.82H929.063L941.916 1007.22H1062.09L1049.24 782.415L1095.51 736.143L1049.24 689.872Z" fill="white"/>
+</svg>

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

@@ -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

@@ -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

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

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

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function Navlink({
+  href,
+  className,
+  activeStyle,
+  children,
+  prefetch,
+  replace,
+  scroll,
+  ...props
+}) {
+  const pathname = usePathname();
+  const isActive = href === pathname;
+
+  return (
+    <Link
+      scroll={scroll}
+      replace={replace}
+      prefetch={prefetch}
+      href={href}
+      {...props}
+      className={cn(isActive && (activeStyle ?? "active"), className)}
+    >
+      {children}
+    </Link>
+  );
+}

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

@@ -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

@@ -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

@@ -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

@@ -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/toast.js

@@ -0,0 +1,19 @@
+import { toast } from "sonner";
+
+/**
+ * @typedef {'success' | 'error' | 'info' | 'warning' | 'loading'} Type
+ * @typedef {'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'} Position
+ *
+ * @param {Type} type
+ * @param {string} message
+ * @param {{ position?: Position, id?: string | number, duration?: number, description?: string}} options
+ */
+
+export default function showToast(type, message, options) {
+  toast[type](message, {
+    position: options?.position || "top-center",
+    id: options?.id,
+    duration: options?.duration || 5000,
+    description: options?.description,
+  });
+}

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

@@ -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/NextJS/JavaScript/tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+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: [
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/forms"),
+  ],
+};

package/templates/ViteJS/JavaScript/README.md

@@ -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

@@ -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

@@ -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

@@ -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;
+  }
 }