⚙️ Release GRFG v1.0.0 (#19)

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,26 @@
+## What type of PR is this? (check all applicable)
+
+- [ ] Refactor
+- [ ] Feature
+- [ ] Bug Fix
+- [ ] Enhancement
+- [ ] Documentation Update
+
+## Description
+
+## Related Tickets & Documents
+
+## QA Instructions, Screenshots, Recordings
+
+_Please replace this line with instructions on how to test your changes, as well
+as any relevant images for UI changes._
+
+## Added tests?
+
+- [ ] yes
+- [ ] no, because they aren't needed
+- [ ] no, because I need help
+
+## Added to documentation?
+
+- [ ] readme

.gitignore

@@ -23,13 +23,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts

.prettierignore

@@ -1,3 +1,4 @@
+.cache
 .next
 package.json
 package-lock.json

CODE_OF_CONDUCT.md

@@ -0,0 +1 @@
+test

CONTRIBUTING.md

@@ -0,0 +1 @@
+test

app/error.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import EmptyState from "@/components/EmptyState";
+import { useEffect } from "react";
+
+type Props = {
+  error: Error;
+};
+
+function ErrorPage({ error }: Props) {
+  useEffect(() => {
+    console.log("🚀 ~ file: error.tsx:12 ~ ErrorState ~ error:", error);
+  }, [error]);
+
+  return <EmptyState />;
+}
+
+export default ErrorPage;

app/layout.tsx

@@ -12,6 +12,7 @@ import "../styles/globals.css";
 export const metadata = {
   title: "Readme Generator",
   description: "Github Readme File Generator",
+  icons: "",
 };
 
 export default async function RootLayout({

app/loading.tsx

@@ -0,0 +1,9 @@
+import GlobalLoading from "@/components/GlobalLoading";
+
+type Props = {};
+
+function LoadingPage({}: Props) {
+  return <GlobalLoading isLoading={true} />;
+}
+
+export default LoadingPage;

atom/gitHubDetails.ts

@@ -7,6 +7,7 @@ export type gitHubDetail = {
   name: string;
   twitter: string;
   email: string;
+  isTable: string;
 };
 
 const defaultPostState: gitHubDetail = {
@@ -16,6 +17,7 @@ const defaultPostState: gitHubDetail = {
   name: "",
   twitter: "",
   email: "",
+  isTable: "",
 };
 
 export const gitHubDetails = atom<gitHubDetail>({

components/BodyContent.tsx

@@ -3,7 +3,6 @@
 import { gitBadge } from "@/atom/displayBadges";
 import { gitHubDetails } from "@/atom/gitHubDetails";
 import { gitImages } from "@/atom/images";
-import { middleControllers } from "@/atom/middleController";
 import { readmeRows } from "@/atom/readmeRow";
 import { gitImagesSizes } from "@/atom/size";
 import { gitTechStack } from "@/atom/techStack";
@@ -14,7 +13,6 @@ import {
   GitHubImages,
   GitHubImagesSize,
   GitHubTechStack,
-  MiddleController,
   ReadmeRow,
 } from "@/type";
 import { Divider } from "@mui/material";
@@ -45,7 +43,6 @@ function BodyContent({}: Props) {
   const [images, setImages] = useRecoilState(gitImages);
   const [size, setSize] = useRecoilState(gitImagesSizes);
   const [displayBadges, setDisplayBadges] = useRecoilState(gitBadge);
-  const [controllers, setControllers] = useRecoilState(middleControllers);
 
   const {
     updateFirstElement,
@@ -54,7 +51,6 @@ function BodyContent({}: Props) {
     updateFourthElement,
     updateFifthElement,
     updateSixthElement,
-    updateSeventhElement,
   } = updateCurrentStateValue();
 
   const [firstElement, setFirstElement] =
@@ -65,17 +61,14 @@ function BodyContent({}: Props) {
   const [fourthElement, setFourthElement] = useState<GitHubImages>(images);
   const [fifthElement, setFifthElement] = useState<GitHubImagesSize>(size);
   const [sixthElement, setSixthElement] = useState<GitBadges>(displayBadges);
-  const [seventhElement, setSevenElement] =
-    useState<MiddleController>(controllers);
 
   const KeepCacheUpdated = (
     firstStore: GitHubTechStack,
     secondStore: GitHubDetail,
     thirdStore: ReadmeRow,
     fourthStore: GitHubImages,
     fifthStore: GitHubImagesSize,
-    sixthStore: GitBadges,
-    seventhStore: MiddleController
+    sixthStore: GitBadges
   ) => {
     localStorage.setItem(
       "cache",
@@ -86,7 +79,6 @@ function BodyContent({}: Props) {
         fourthStore,
         fifthStore,
         sixthStore,
-        seventhStore,
       })
     );
 
@@ -130,11 +122,6 @@ function BodyContent({}: Props) {
         ? { ...gitHubTechStack, ...cache.sixthStore }
         : gitHubTechStack
     );
-    setSevenElement(
-      cache.seventhStore
-        ? { ...gitHubTechStack, ...cache.seventhStore }
-        : gitHubTechStack
-    );
   };
 
   const OnChangeAction = () => {
@@ -144,8 +131,7 @@ function BodyContent({}: Props) {
       readmeRow,
       images,
       size,
-      displayBadges,
-      controllers
+      displayBadges
     );
 
     setAction(true);
@@ -164,7 +150,6 @@ function BodyContent({}: Props) {
     updateFourthElement(fourthElement, setImages);
     updateFifthElement(fifthElement, setSize);
     updateSixthElement(sixthElement, setDisplayBadges);
-    updateSeventhElement(seventhElement, setControllers);
   };
 
   useEffect(() => {
@@ -173,7 +158,7 @@ function BodyContent({}: Props) {
 
   return (
     <>
-      {!isShow && <SmallHeader />}
+      <SmallHeader />
       <div className="px-12 py-12 items-center">
         {isShow ? (
           <>

components/ButtonActions.tsx

@@ -95,7 +95,7 @@ function ButtonActions({ setIsShow, setIsMdPreview, isMdPreview }: Props) {
         <span>Download Markdown</span>
       </button>
       <button
-        onClick={() => setIsShow(true)}
+        onClick={() => toast.info("This feature will be coming soon")}
         className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
       >
         <AiOutlineSave size={20} />

components/Contents/Languages.tsx

@@ -1,41 +1,65 @@
 "use client";
 
-import { gitTechnologies } from "@/atom/technology";
-import updateState from "@/hook/updateState";
+import { boxLabel } from "@/lib/boxLabel";
 import { Checkbox, Tooltip } from "@mui/material";
-import { useRecoilState } from "recoil";
+import { useEffect, useState } from "react";
 
 type Props = {
   label: string;
   image: string;
+  stateTechnologies: string[];
+  listOfTechnologies: string[];
+  setListOfTechnologies: (value: any) => void;
+  setStateTechnologies: (value: any) => void;
 };
 
-function Languages({ label, image }: Props) {
-  const [technology, setTechnology] = useRecoilState(gitTechnologies);
-  const { images } = updateState();
-
-  const boxLabel = { inputProps: { "aria-label": "Checkbox demo" } };
+function Languages({
+  label,
+  image,
+  stateTechnologies,
+  listOfTechnologies,
+  setListOfTechnologies,
+  setStateTechnologies,
+}: Props) {
+  const [isAtomValueExits, setIsAtomValueExits] = useState(false);
 
   const onChangeTechnology = () => {
-    if (images.updatedStateTechnology.includes(image)) {
-      setTechnology((prev) => ({
+    if (isAtomValueExits) {
+      const removeCurrentState = listOfTechnologies.filter(
+        (element: any) => element.label !== label
+      );
+      setListOfTechnologies(removeCurrentState);
+
+      const removeItem = stateTechnologies.filter(
+        (element: any) => element.label !== label
+      );
+      setStateTechnologies((prev: any) => ({
         ...prev,
-        [label]: null,
+        skills: removeItem,
       }));
     } else {
-      setTechnology((prev) => ({
-        ...prev,
-        [label]: image,
-      }));
+      const element = { label, image };
+      setListOfTechnologies((ls: any) => [
+        ...ls,
+        ...stateTechnologies,
+        element,
+      ]);
     }
   };
 
+  useEffect(() => {
+    const isExits = stateTechnologies.some(function (el: any) {
+      return el.label === label;
+    });
+    setIsAtomValueExits(isExits);
+  }, [stateTechnologies]);
+
   return (
     <div>
       <Tooltip title={label}>
         <div
           className={`flex justify-between items-center border border-[#0F2557] w-full overflow-hidden rounded-xl px-4 py-4 space-y-2 hover:bg-[#161748] hover-shadow-xl hover:text-black cursor-pointer ${
-            images.updatedStateTechnology.includes(image) && "bg-[#04082b]"
+            isAtomValueExits && "bg-[#04082b]"
           }`}
           onClick={onChangeTechnology}
         >
@@ -45,9 +69,9 @@ function Languages({ label, image }: Props) {
             name={label}
             sx={{ color: "#fff" }}
             color="default"
-            checked={images.updatedStateTechnology.includes(image)}
+            checked={isAtomValueExits}
           />
-          {images.updatedStateTechnology.includes(image) ? (
+          {isAtomValueExits ? (
             <img
               src={image}
               alt={label}

components/Contents/SmallHeader.tsx

@@ -12,25 +12,31 @@ function SmallHeader({}: Props) {
   useEffect(() => {
     setFirstImageArr(secondLine[Math.floor(Math.random() * secondLine.length)]);
   }, [secondLine]);
+
   return (
-    <div className="flex justify-center items-center px-4">
+    <div className="flex justify-center items-center px-4 py-2.5">
       <div className="flex flex-col justify-between">
-        <div className="flex justify-between gap-4 items-center">
+        <div className="flex flex-col justify-between items-center">
           <img className="w-36" src={firstImageArr!} alt="" />
           <p className="text-xl font-medium">
             Github Repository Readme.Md Generator
           </p>
-          <img className="w-36" src={firstImageArr!} alt="" />
         </div>
-        <div className="flex justify-center gap-4">
-          <button className="flex justify-center px-4 py-2.5 border border-gray-500 rounded-md hover: bg-gray-800 bg-transparent text-white items-center">
+        <div className="flex justify-center gap-4 py-2.5">
+          <a
+            href="https://github.com/SashenJayathilaka/Github-Readme-File-Generator.git"
+            className="flex justify-center px-4 py-2.5 border border-gray-500 rounded-md hover: bg-gray-800 bg-transparent text-white items-center cursor-pointer"
+          >
             <AiOutlineStar size={20} className="animate-spin mr-2" />
             Star This Repository
-          </button>
-          <button className="flex justify-center px-4 py-2.5 border border-gray-500 rounded-md hover: bg-gray-800 bg-transparent text-white items-center">
+          </a>
+          <a
+            href="https://github.com/SashenJayathilaka/Github-Readme-File-Generator.git"
+            className="flex justify-center px-4 py-2.5 border border-gray-500 rounded-md hover: bg-gray-800 bg-transparent text-white items-center cursor-pointer"
+          >
             <AiOutlineFork size={20} className="animate-bounce mr-2" />
             Fork This Repository
-          </button>
+          </a>
         </div>
       </div>
     </div>