feat: Add initial entry layout for React project generation

This commit introduces the initial entry layout for the generated React project. It also includes an example adder configuration in all React plugins. These changes provide a solid starting point for working with the generated projects.

Author: ashishkk22

src/index.ts

@@ -2,7 +2,7 @@
 
 //=============== main executer ==============//
 
-import GlobalStateUtility from "./global";
+import GlobalStateUtility from "@/global";
 import getCurrentPackageManager from "@/operation/getPackageManager";
 import getProjectName from "@/operation/getProjectName";
 import getCurrentProject from "@/operation/getProjectType";
@@ -27,6 +27,7 @@ import { pluginDependencyAdder } from "@/utils/file";
 import initGitRepo from "@/operation/initGit";
 import { absolutePathConfigAdderInReact } from "@/operation/projectGenerator/projectGenerator";
 import readmeGenerator from "@/operation/readme";
+import cmdRunner from "@/utils/cmdRunner";
 
 /**
  * current we are storing the config with code but if we increase the number of features then we can have plugin dir that has it's own config file
@@ -117,6 +118,13 @@ async function main() {
       storybook: addPrettier,
     });
 
+    //formatting the code if prettier is available
+    if (addPrettier) {
+      const formatCmd =
+        currentPackageManager === "npm" ? ["run", "format"] : ["format"];
+      await cmdRunner(currentPackageManager, formatCmd);
+    }
+
     logger("green", "\n ☺️ Happy Coding !");
   } catch (e: unknown) {
     logger("green", "\n ☺️ Happy Coding !");

src/plugins/react/antd/config.ts

@@ -78,13 +78,17 @@ const AntDReactPlugin: PluginConfigType = {
     },
     {
       content: getExampleComponent,
-      fileName: "Buttons",
+      fileName: "AntDExample",
       fileType: "component",
-      path: ["src", "components", "AntdExample"],
+      path: ["src", "components", "antDExample"],
     },
   ],
   fileModification: {
-    App: {},
+    App: {
+      importStatement: `import AntDExample from "src/components/antDExample/AntDExample"`,
+      name: "Ant Design",
+      component: "<AntDExample/>",
+    },
     Index: {
       importStatements: `import { ConfigProvider } from "antd";
 import theme from "src/theme/themeAntd";`,

src/plugins/react/graphql/config.ts

@@ -97,7 +97,11 @@ const GraphQlReactPlugin: PluginConfigType = {
   ],
   dependencies: "@apollo/client graphql",
   fileModification: {
-    App: {},
+    App: {
+      importStatement: `import Characters from "src/components/character/Character"`,
+      name: "Apollo GraphQL",
+      component: "<Characters/>",
+    },
     Index: {
       importStatements: `import { ApolloProvider } from "@apollo/client";
 import client from "src/config/client";`,

src/plugins/react/i18n/config.ts

@@ -124,7 +124,11 @@ const i18NReactPlugin: PluginConfigType = {
     },
   ],
   fileModification: {
-    App: {},
+    App: {
+      importStatement: `import I18Example from "src/components/i18Example/I18Example";`,
+      name: "I18n",
+      component: "<I18Example />",
+    },
     Index: {
       importStatements: `import "src/utils/i18n";`,
       addAfterMatch: "",

src/plugins/react/mui/config.ts

@@ -29,6 +29,51 @@ const theme = createTheme({
 
 export default theme;`;
 
+//gives react example components based on project type
+const getExampleComponent = (
+  isTsProject: boolean
+) => `import { Box, Button, Rating, TextField, Typography } from "@mui/material";
+import { useState } from "react";
+
+function MuiExample() {
+  const [ratingValue, setRatingValue] = useState${
+    isTsProject ? "<number | null>" : ""
+  }(null);
+  const [comment, setComment] = useState("");
+  const isDisabled = ratingValue === null || comment === "";
+  return (
+      <Box
+        sx={{
+          width: "300px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Typography variant="h2" color="primary.main">
+          How would you rate this experience ?
+        </Typography>
+        <Rating
+          value={ratingValue}
+          onChange={(_, val) => setRatingValue(val)}
+          sx={{ m: 2 }}
+        />
+        <Typography>Tell us how it went</Typography>
+        <TextField
+          multiline
+          maxRows={4}
+          value={comment}
+          onChange={e => setComment(e.target.value)}
+        />
+        <Button disabled={isDisabled} sx={{ mt: 1 }} variant="contained">
+          Submit
+        </Button>
+      </Box>
+  );
+}
+export default MuiExample;
+`;
+
 const MuiReactPlugin: PluginConfigType = {
   initializingMessage: "Adding Material UI ! Please Wait !",
   files: [
@@ -38,6 +83,12 @@ const MuiReactPlugin: PluginConfigType = {
       fileName: "theme",
       fileType: "native",
     },
+    {
+      path: ["src", "components", "muiExample"],
+      content: getExampleComponent,
+      fileName: "MuiExample",
+      fileType: "component",
+    },
   ],
   dependencies: "@mui/material",
   fileModification: {
@@ -46,7 +97,11 @@ const MuiReactPlugin: PluginConfigType = {
       addBeforeMatch: "<ThemeProvider theme={theme}>",
       addAfterMatch: "</ThemeProvider>",
     },
-    App: {},
+    App: {
+      importStatement: `import MuiExample from "src/components/muiExample/MuiExample"`,
+      name: "Material UI",
+      component: "<MuiExample/>",
+    },
   },
   successMessage: "Successfully added Material UI with theme config !",
 };

src/plugins/react/reactQuery/config.ts

@@ -156,7 +156,7 @@ const reactQueryExample = `import { useQuery } from "@tanstack/react-query";
 import { getPosts } from "src/utils/api";
 
 const ReactQueryExample = () => {
-  const { data, error, isLoading } = useQuery(["posts"], getPosts);
+  const { data, error, isLoading } = useQuery({ queryKey: ["posts"], queryFn: getPosts });
 
   if (error) return <div>An error occurred</div>;
 
@@ -214,7 +214,11 @@ const ReactQueryReactPlugin: PluginConfigType = {
     },
   ],
   fileModification: {
-    App: {},
+    App: {
+      importStatement: `import ReactQueryExample from "src/components/reactQueryExample/ReactQueryExample"`,
+      name: "React Query",
+      component: "<ReactQueryExample />",
+    },
     Index: {
       importStatements: `import { QueryClientProvider } from "@tanstack/react-query";
 import queryClient from "src/client/queryClient";

src/plugins/react/reactRouterDom/config.ts

@@ -11,36 +11,69 @@ export default App;`;
 
 export const LayoutReact = (isTsProject: boolean) => `import React from "react";
 import { Link } from "react-router-dom";
+import styles from "./Layout.module.css";
 
 ${!isTsProject ? "// eslint-disable-next-line react/prop-types" : ""}
 const Layout = ({ children }${
   isTsProject ? ": { children: React.ReactNode }" : ""
 }) => {
   return (
-    <>
-      <div style={{ margin: "1rem" }}>
+     <main className={styles.main}>
+      <nav className={styles.nav}>
         <div>
-          <ul>
-            <li>
-              <Link to={"/"}>Home</Link>
-            </li>
-            <li>
-              <Link to={"/contact"}>Contact</Link>
-            </li>
-            <li>
-              <Link to={"/about"}>About</Link>
-            </li>
-          </ul>
+          <img src="https://ik.imagekit.io/ashishkk22/simform_logo.svg?updatedAt=1697020836220" alt="simform_logo" />
         </div>
-      </div>
+        <div>
+          <div>
+            <ul className={styles.nav_ul}>
+              <li>
+                <Link to={"/"} className={styles.nav_link}>
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link to={"/contact"} className={styles.nav_link}>
+                  Contact
+                </Link>
+              </li>
+              <li>
+                <Link to={"/about"} className={styles.nav_link}>
+                  About
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
       {children}
-    </>
+    </main>
   );
 };
 
 export default Layout;
 `;
 
+const layoutCss = `.nav {
+  background-color: #ea495c;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 1rem 0;
+}
+
+.nav_ul {
+  list-style-type: none;
+  display: flex;
+  justify-content: space-around;
+  width: 20rem;
+}
+
+.nav_link {
+  text-decoration: none;
+  color: white;
+}
+`;
+
 export const getPagesComponentReact = (
   name: string
 ) => `import React from "react";
@@ -259,6 +292,33 @@ export class SuspenseErrorBoundary extends React.Component${
 }
 `;
 
+const indexCssReset = `@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:wght@200;300;400;500&family=Roboto:wght@300;400;500&display=swap");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Poppins";
+}
+
+html,
+body {
+  height: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+`;
+
 const ReactRouterDomReactPlugin: PluginConfigType = {
   initializingMessage: "Adding React Router Dom ! Please Wait !",
   dependencies: "react-router-dom",
@@ -275,6 +335,12 @@ const ReactRouterDomReactPlugin: PluginConfigType = {
       fileName: "Layout",
       fileType: "component",
     },
+    {
+      path: ["src", "components", "layout"],
+      content: layoutCss,
+      fileName: "Layout.module.css",
+      fileType: "simple",
+    },
     {
       path: ["src", "components", "about"],
       content: getPagesComponentReact("About"),
@@ -329,6 +395,12 @@ const ReactRouterDomReactPlugin: PluginConfigType = {
       fileName: "SuspenseErrorBoundary",
       fileType: "component",
     },
+    {
+      path: ["src"],
+      content: indexCssReset,
+      fileName: "index.css",
+      fileType: "simple",
+    },
   ],
   successMessage: "Successfully added React Router Dom !",
 };

src/plugins/react/rtkQueryRedux/config.ts

@@ -275,7 +275,11 @@ const RtkReduxReactPlugin: PluginConfigType = {
     }`;
   },
   fileModification: {
-    App: {},
+    App: {
+      importStatement: `import RtkQueryExample from "src/components/rtkQueryExample/RtkQueryExample"`,
+      name: "RTK Query",
+      component: "<RtkQueryExample/>",
+    },
     Index: {
       importStatements: `import { Provider } from "react-redux";
 import { store } from "src/store";`,

src/questions/questions.ts

@@ -137,9 +137,9 @@ export async function getSelectedUiLibrary(
 
     const dependencies = `${
       selectStylingEngine === "emotion"
-        ? "@emotion/react @emotion/styled"
+        ? "@emotion/styled"
         : "@mui/styled-engine-sc styled-components"
-    } ${addMuiIcons ? "@mui/icons-material" : ""}`;
+    } @emotion/react ${addMuiIcons ? "@mui/icons-material" : ""}`;
 
     GlobalStateUtility.getInstance().setDependencies(dependencies);
   }

src/types/index.ts

@@ -19,13 +19,14 @@ export type SupportedStateManagementAndCachingSol =
 export type StylingEngineInMui = "emotion" | "styled-components";
 
 export type ReactAppConfig = {
-  import?: string[];
+  importStatement?: string;
+  name?: string;
   localImport?: string[];
   relativeImport?: string[];
   afterImport?: string[];
   innerHooks?: string[];
   inner?: string[];
-  component?: string[];
+  component?: string;
 };
 
 export type ReactIndexConfig = {