@aditokmo/react-setup-cli 0.1.0 → 0.1.1

package/dist/index.js

@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import { execSync } from 'child_process';
 import { askQuestions } from './questions.js';
-import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile } from './utils.js';
+import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile, detectPackageManager } from './utils.js';
 import { collectDependencies } from './installers.js';
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -11,8 +11,11 @@ const __dirname = path.dirname(__filename);
 async function main() {
     console.log('⚛️ Welcome to React CLI Setup by github/aditokmo');
     let projectDir = '';
+    const originalDirectory = process.cwd();
     try {
         const answers = await askQuestions();
+        const packageManager = detectPackageManager();
+        const installAction = packageManager === 'yarn' ? 'add' : 'install';
         projectDir = path.join(process.cwd(), answers.projectName);
         const templateRoot = path.join(__dirname, '../templates');
         const appFilePath = path.join(projectDir, 'src', 'App.tsx');
@@ -29,7 +32,8 @@ async function main() {
         }
         // State Management
         if (answers.reactQuery) {
-            copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src'), path.join(projectDir, 'src/providers'));
+            copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src', 'provider'), path.join(projectDir, 'src/providers'));
+            copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src', 'hook'), path.join(projectDir, 'src/modules/auth/hooks'));
             patchAppFile(appFilePath, "import { ReactQueryProvider } from './providers'", "<ReactQueryProvider>", "</ReactQueryProvider>");
         }
         if (answers.globalState === 'zustand') {
@@ -50,15 +54,17 @@ async function main() {
         }
         finalizeAppFile(appFilePath);
         finalizeViteConfig(viteConfigPath);
-        const { dependency, devDependency, cmd } = collectDependencies(answers);
+        const { dependency, devDependency, cmd } = collectDependencies(answers, packageManager);
         process.chdir(projectDir);
+        console.log(`📦 Initializing ${packageManager} project...`);
+        execSync(`${packageManager} install`, { stdio: 'inherit' });
         if (dependency.length) {
             console.log('📦 Installing dependencies...');
-            execSync(`pnpm add ${dependency.join(' ')}`, { stdio: 'inherit' });
+            execSync(`${packageManager} ${installAction} ${dependency.join(' ')}`, { stdio: 'inherit' });
         }
         if (devDependency.length) {
             console.log('📦 Installing dev dependencies...');
-            execSync(`pnpm add -D ${devDependency.join(' ')}`, { stdio: 'inherit' });
+            execSync(`${packageManager} ${installAction} -D ${devDependency.join(' ')}`, { stdio: 'inherit' });
         }
         // Extra cmds like shadcn
         for (const command of cmd) {
@@ -66,11 +72,12 @@ async function main() {
             execSync(command, { stdio: 'inherit' });
         }
         console.log('✅ Project setup completed');
-        console.log(`👉 cd ${answers.projectName} && pnpm run dev`);
+        console.log(`👉 cd ${answers.projectName} && ${packageManager} run dev`);
     }
     catch (error) {
         console.error('\n❌ Error while creating a project:');
         console.error(`👉 ${error.message}`);
+        process.chdir(originalDirectory);
         if (projectDir && fs.existsSync(projectDir)) {
             console.log('🧹 Cleaning... Deleting failed project installation.');
             fs.removeSync(projectDir);

package/dist/installers.js

@@ -1,19 +1,26 @@
 import { installers } from './mapper.js';
-import { axiosInstaller, shadcnInstaller } from './packages.js';
-export function collectDependencies(answers) {
+import { axiosInstaller } from './packages.js';
+export function collectDependencies(answers, packageManager) {
     const dependency = new Set();
     const devDependency = new Set();
     const cmd = [];
+    const dlx = packageManager === 'npm' ? 'npx --yes' : `${packageManager} dlx --yes`;
     // Default base packages
     axiosInstaller.dependency?.forEach(d => dependency.add(d));
     // Packages from answers
     Object.entries(answers).forEach(([key, value]) => {
+        if (Array.isArray(value))
+            return;
         const installer = installers[value === true ? key : value];
         installer?.dependency?.forEach(d => dependency.add(d));
         installer?.devDependency?.forEach(d => devDependency.add(d));
     });
     if (answers.shadcn && answers.style === 'tailwind') {
-        cmd.push(...shadcnInstaller.cmd);
+        cmd.push(`${dlx} shadcn@latest init -d`);
+        if (answers.shadcnComponents && answers.shadcnComponents.length > 0) {
+            const componentsStr = answers.shadcnComponents.join(' ');
+            cmd.push(`${dlx} shadcn@latest add ${componentsStr} -y -o`);
+        }
     }
     return {
         dependency: Array.from(dependency),

package/dist/mapper.js

@@ -1,4 +1,4 @@
-import { fontAwesomeIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
+import { fontAwesomeIconsInstaller, phosphorIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
 export const installers = {
     'reactQuery': reactQueryInstaller,
     'zustand': zustandInstaller,
@@ -7,6 +7,7 @@ export const installers = {
     'tailwind': tailwindInstaller,
     'react-icons': reactIconsInstaller,
     'font-awesome': fontAwesomeIconsInstaller,
+    'phosphor-icons': phosphorIconsInstaller,
     'react-hot-toast': reactHotToastInstaller,
     'react-toastify': reactToastifyInstaller,
     'sonner': sonnerInstaller,

package/dist/packages.js

@@ -18,6 +18,9 @@ export const reactIconsInstaller = {
 export const fontAwesomeIconsInstaller = {
     dependency: ['@fortawesome/fontawesome-svg-core', '@fortawesome/react-fontawesome', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons'],
 };
+export const phosphorIconsInstaller = {
+    dependency: ['phosphor-react'],
+};
 // Toast
 export const reactHotToastInstaller = {
     dependency: ['react-hot-toast'],
@@ -28,10 +31,6 @@ export const reactToastifyInstaller = {
 export const sonnerInstaller = {
     dependency: ['sonner'],
 };
-// UI Libs
-export const shadcnInstaller = {
-    cmd: ['pnpm dlx shadcn@latest init']
-};
 // Routers
 export const reactRouterInstaller = {
     dependency: ['react-router', 'react-router-dom'],

package/dist/questions.js

@@ -1,4 +1,4 @@
-import { group, text, select, confirm, isCancel, cancel } from '@clack/prompts';
+import { group, text, select, confirm, isCancel, cancel, multiselect } from '@clack/prompts';
 export async function askQuestions() {
     const results = await group({
         projectName: () => text({
@@ -18,11 +18,32 @@ export async function askQuestions() {
                 return Promise.resolve(false);
             return confirm({ message: 'Include Shadcn UI?' });
         },
+        shadcnComponents: ({ results }) => {
+            if (!results.shadcn)
+                return Promise.resolve([]);
+            return multiselect({
+                message: 'Use space to select shadcn/ui components to install:',
+                options: [
+                    { value: 'button', label: 'Button' },
+                    { value: 'input', label: 'Input' },
+                    { value: 'card', label: 'Card' },
+                    { value: 'dialog', label: 'Dialog' },
+                    { value: 'sheet', label: 'Sheet' },
+                    { value: 'dropdown-menu', label: 'Dropdown Menu' },
+                    { value: 'table', label: 'Table' },
+                    { value: 'checkbox', label: 'Checkbox' },
+                    { value: 'avatar', label: 'Avatar' },
+                    { value: 'badge', label: 'Badge' },
+                ],
+                required: false,
+            });
+        },
         icons: () => select({
             message: 'Choose icon library:',
             options: [
                 { value: 'react-icons', label: 'React Icons' },
                 { value: 'font-awesome', label: 'Font Awesome' },
+                { value: 'phosphor-icons', label: 'Phosphor Icons' }
             ]
         }),
         toast: () => select({
@@ -71,6 +92,9 @@ export async function askQuestions() {
         isCancel(results.style) ||
         isCancel(results.router) ||
         isCancel(results.shadcn) ||
+        isCancel(results.shadcnComponents) ||
+        isCancel(results.icons) ||
+        isCancel(results.toast) ||
         isCancel(results.reactQuery)) {
         cancel('Setup cancelled.');
         process.exit(0);
@@ -78,5 +102,6 @@ export async function askQuestions() {
     return {
         ...results,
         shadcn: results.shadcn,
+        shadcnComponents: (results.shadcnComponents ?? []),
     };
 }

package/dist/utils.js

@@ -72,3 +72,11 @@ export function finalizeAppFile(filePath) {
         .trim();
     fs.writeFileSync(filePath, content + '\n');
 }
+export function detectPackageManager() {
+    const userAgent = process.env.npm_config_user_agent || '';
+    if (userAgent.includes('pnpm'))
+        return 'pnpm';
+    if (userAgent.includes('yarn'))
+        return 'yarn';
+    return 'npm';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aditokmo/react-setup-cli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A fast React CLI to jumpstart your projects. It sets up your libraries and organizes a scalable folder structure so you can skip the configuration and go straight to coding.",
   "main": "dist/index.js",
   "type": "module",

package/templates/base/src/modules/auth/hooks/useAuth.ts

@@ -1,43 +1,55 @@
+import { useState } from "react";
 import { getAPIErrorMessage } from "@/utils/api-error-handler";
-import { AuthService } from "../services"
-import { useMutation } from '@tanstack/react-query';
+import { AuthService } from "../services";
 
 export const useAuth = () => {
-    const login = useMutation({
-        mutationFn: AuthService.login,
-        onSuccess: (res) => {
-            // Handle mutation success
-        },
-        onError: (error) => {
-            const errorMessage = getAPIErrorMessage(error);
-            console.error(errorMessage)
-            // Display error message to user
-        },
-    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
 
-    const register = useMutation({
-        mutationFn: AuthService.register,
-        onSuccess: (res) => {
-            // Handle mutation success
-        },
-        onError: (error) => {
-            const errorMessage = getAPIErrorMessage(error);
-            console.error(errorMessage)
-            // Display error message to user
-        },
-    });
+    const login = async (data: any) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await AuthService.login(data);
+            return res;
+        } catch (err) {
+            const errorMessage = getAPIErrorMessage(err);
+            setError(errorMessage);
+            console.error(errorMessage);
+            throw err;
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
-    const logout = useMutation({
-        mutationFn: AuthService.logout,
-        onSuccess: (res) => {
-            // Handle mutation success
-        },
-        onError: (error) => {
-            const errorMessage = getAPIErrorMessage(error);
-            console.error(errorMessage)
-            // Display error message to user
-        },
-    });
+    const register = async (data: any) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await AuthService.register(data);
+            return res;
+        } catch (err) {
+            const errorMessage = getAPIErrorMessage(err);
+            setError(errorMessage);
+            throw err;
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
-    return { login, register, logout }
-}
+    const logout = async () => {
+        try {
+            await AuthService.logout();
+        } catch (err) {
+            console.error(getAPIErrorMessage(err));
+        }
+    };
+
+    return {
+        login,
+        register,
+        logout,
+        isLoading,
+        error
+    };
+};

package/templates/base/src/modules/common/pages/NotFound.tsx

@@ -1,9 +1,14 @@
-export function NotFound() {
+import '@/styles/404.css';
+
+export const NotFound = () => {
     return (
-        <div className="flex flex-col items-center justify-center h-screen">
-            <h1 className="text-4xl font-bold">404 - Page Not Found</h1>
-            <p>Page you are looking, doesn't exist.</p>
-            <a href="/" className="text-blue-500 underline mt-4">Go Back</a>
+        <div className="not-found-wrapper">
+            <div className="not-found-content">
+                <span>404</span>
+                <h1>Oops! Page Not Found</h1>
+                <p>The page you are looking for doesn't exist. Click button below to go to the homepage</p>
+                <a href="/">Back to Homepage</a>
+            </div>
         </div>
-    )
-}
+    );
+};

package/templates/base/src/styles/404.css

@@ -0,0 +1,105 @@
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  font-family: "Poppins", sans-serif;
+  background: #e6edfc;
+}
+
+.not-found-content {
+  padding: 100px 70px;
+  background: #fff;
+  max-width: 700px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  box-shadow: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+}
+
+.not-found-content span {
+  color: #666;
+  font-weight: 700;
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.not-found-content h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: #111;
+}
+
+.not-found-content p {
+  font-size: 1rem;
+  color: #666;
+  max-width: 360px;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.not-found-content a {
+  font-size: 0.9rem;
+  color: #fff;
+  background-color: #37538a;
+  padding: 10px 30px;
+  margin-top: 20px;
+  border-radius: 10px;
+  transition: 0.2s;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.not-found-content a:hover {
+  background: #263c67;
+}
+
+@media (max-width: 768px) {
+  .not-found-content {
+    padding: 60px 40px;
+    max-width: 90%;
+  }
+
+  .not-found-content span {
+    font-size: 4.5rem;
+    margin-bottom: 20px;
+  }
+
+  .not-found-content h1 {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .not-found-content {
+    padding: 40px 20px;
+    border-radius: 16px;
+  }
+
+  .not-found-content span {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+  }
+
+  .not-found-content h1 {
+    font-size: 1.5rem;
+  }
+
+  .not-found-content p {
+    font-size: 0.9rem;
+  }
+
+  .not-found-content a {
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+  }
+}

package/templates/state/react-query/src/hook/useAuth.ts

@@ -0,0 +1,43 @@
+import { getAPIErrorMessage } from "@/utils/api-error-handler";
+import { AuthService } from "../services"
+import { useMutation } from '@tanstack/react-query';
+
+export const useAuth = () => {
+    const login = useMutation({
+        mutationFn: AuthService.login,
+        onSuccess: (res) => {
+            // Handle mutation success
+        },
+        onError: (error) => {
+            const errorMessage = getAPIErrorMessage(error);
+            console.error(errorMessage)
+            // Display error message to user
+        },
+    });
+
+    const register = useMutation({
+        mutationFn: AuthService.register,
+        onSuccess: (res) => {
+            // Handle mutation success
+        },
+        onError: (error) => {
+            const errorMessage = getAPIErrorMessage(error);
+            console.error(errorMessage)
+            // Display error message to user
+        },
+    });
+
+    const logout = useMutation({
+        mutationFn: AuthService.logout,
+        onSuccess: (res) => {
+            // Handle mutation success
+        },
+        onError: (error) => {
+            const errorMessage = getAPIErrorMessage(error);
+            console.error(errorMessage)
+            // Display error message to user
+        },
+    });
+
+    return { login, register, logout }
+}

package/templates/state/react-query/src/{ReactQueryProvider.tsx → provider/ReactQueryProvider.tsx}

@@ -1,10 +1,17 @@
 import { useState } from "react";
-import { QueryClientProvider } from '@tanstack/react-query';
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 export function ReactQueryProvider({ children }: { children: React.ReactNode }) {
-    const [queryClient] = useState(() => new QueryClient());
+    const [queryClient] = useState(() => new QueryClient({
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: 1,
+                staleTime: 5 * 1000,
+            },
+        },
+    }));
 
     return (
         <QueryClientProvider client={queryClient}>