generator-kodly-react-app 1.0.7 → 1.0.11

package/generators/app/templates/README.md

@@ -1,62 +0,0 @@
-# <%= appNameTitleCase %>
-
-A React application built with Vite, TanStack Router, and TypeScript.
-
-## Getting Started
-
-1. Install dependencies:
-
-```bash
-npm install
-```
-
-2. Create a `.env` file from `.env.example`:
-
-```bash
-cp .env.example .env
-```
-
-3. Update the `.env` file with your API base URL.
-
-4. Start the development server:
-
-```bash
-npm run dev
-```
-
-## Environment Variables
-
-- `VITE_API_BASE_URL` - Base URL for your API backend (default: `http://localhost:8181/api/v1`)
-- `PORT` - Port for the development server (default: `3000`)
-
-### Setting Environment Variables
-
-You can set environment variables in several ways:
-
-**Option 1: Using a `.env` file (recommended)**
-
-```bash
-# Create .env file
-echo "VITE_API_BASE_URL=http://localhost:8080/api/v1" > .env
-echo "PORT=3001" >> .env
-```
-
-**Option 2: Using environment variables when running commands**
-
-```bash
-VITE_API_BASE_URL=http://localhost:8080/api/v1 PORT=3001 npm run dev
-```
-
-**Option 3: Using cross-env (works on all platforms)**
-
-```bash
-cross-env VITE_API_BASE_URL=http://localhost:8080/api/v1 PORT=3001 npm run dev
-```
-
-## Project Structure
-
-- `src/routes/` - File-based routing with TanStack Router
-- `src/modules/auth/` - Authentication module
-- `src/components/` - Reusable UI components
-- `src/lib/` - Utility functions and configurations
-- `src/locales/` - i18n translation files

package/generators/app/templates/src/lib/api/client.ts

@@ -1,35 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { handleBackendError } from '../utils/error-handler';
-
-const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8181/api/v1';
-
-export const client = axios.create({
-  baseURL: apiBaseUrl,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-// Add response interceptor to handle non-2xx responses and network errors
-client.interceptors.response.use(
-  (response: AxiosResponse) => response,
-  (error: unknown) => {
-    // Handle all errors: non-2xx responses and network errors
-    if (error && typeof error === 'object' && 'response' in error) {
-      const axiosError = error as { response?: { status?: number }; code?: string };
-      if (axiosError.response && axiosError.response.status && axiosError.response.status >= 300) {
-        // Backend returned an error response
-        handleBackendError(error);
-      } else if (axiosError.code === 'ERR_NETWORK' || !axiosError.response) {
-        // Network error or no response (connection refused, timeout, etc.)
-        handleBackendError(error);
-      }
-    } else {
-      // Handle non-axios errors
-      handleBackendError(error);
-    }
-    return Promise.reject(error);
-  }
-);
-
-export default client;

package/generators/app/templates/src/locales/en.json

@@ -1,18 +0,0 @@
-{
-  "login": {
-    "title": "Login",
-    "email": "Email",
-    "emailPlaceholder": "Enter your email",
-    "password": "Password",
-    "passwordPlaceholder": "Enter your password",
-    "submit": "Sign In"
-  },
-  "welcome": {
-    "title": "Welcome",
-    "message": "You have successfully logged in!",
-    "logout": "Logout"
-  },
-  "notFound": {
-    "message": "Page not found"
-  }
-}

package/generators/app/templates/src/modules/auth/auth-types.ts

@@ -1,24 +0,0 @@
-export interface UserData {
-  id: string;
-  slug: string;
-  email: string;
-}
-
-export interface ModulePermission {
-  module: string;
-  permissions: string[];
-}
-
-export interface AuthData {
-  token: string;
-  data: UserData;
-  roleName: string;
-  modulePermissions: ModulePermission[];
-}
-
-export interface AuthResponse {
-  message: string | null;
-  status: boolean;
-  data: AuthData;
-}
-

package/generators/app/templates/src/modules/auth/login/login-form.tsx

@@ -1,49 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useLogin } from "../use-auth-hook";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export function LoginForm() {
-  const { t } = useTranslation();
-  const { mutate, isPending } = useLogin();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    mutate({ email, password });
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <h1 className="text-2xl font-semibold">{t("login.title")}</h1>
-      <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium">{t("login.email")}</label>
-          <Input
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder={t("login.emailPlaceholder")}
-            required
-          />
-        </div>
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium">{t("login.password")}</label>
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder={t("login.passwordPlaceholder")}
-            required
-          />
-        </div>
-        <Button type="submit" disabled={isPending}>
-          {t("login.submit")}
-        </Button>
-      </form>
-    </div>
-  );
-}
-

package/generators/app/templates/src/modules/auth/login/login-page.tsx

@@ -1,12 +0,0 @@
-import { LoginForm } from "./login-form";
-
-export function LoginPage() {
-  return (
-    <div className="flex h-screen items-center justify-center bg-background">
-      <div className="w-full max-w-md p-8">
-        <LoginForm />
-      </div>
-    </div>
-  );
-}
-

package/generators/app/templates/src/modules/auth/use-auth-hook.ts

@@ -1,88 +0,0 @@
-import { Route as LoginRoute } from '@/routes/auth/login';
-import { Route as AppRoute } from '@/routes/index';
-import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
-import { client } from '@/lib/api/client';
-import { AuthData, AuthResponse } from './auth-types';
-
-export const authTokenAtom = atomWithStorage<string>('authTokenAtom', '', undefined, {
-  getOnInit: true,
-});
-
-export const currentUserDetailsAtom = atom<AuthData | undefined>();
-
-export const setTokenInAxios = (token?: string | null) => {
-  if (token) {
-    client.defaults.headers.common['x-auth-token'] = token;
-  } else {
-    delete client.defaults.headers.common['x-auth-token'];
-  }
-};
-
-export const setLocaleInAxios = (locale: 'en') => {
-  client.defaults.headers.common['Accept-Language'] = locale;
-};
-
-export const useLogin = () => {
-  const setAuthToken = useSetAtom(authTokenAtom);
-  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
-  const navigate = useNavigate();
-  return useMutation({
-    mutationFn: async (data: { email: string; password: string }): Promise<AuthResponse> => {
-      const response = await client.post<AuthResponse>('/auth/user/login', data);
-      return response.data;
-    },
-    onSuccess: (authData: AuthResponse) => {
-      const token = authData?.data?.token || '';
-      setAuthToken(token);
-      setCurrentUser(authData.data);
-      setTokenInAxios(token);
-      navigate({ to: AppRoute.to });
-    },
-    onError: (err: unknown) => {
-      // Error is already handled by axios interceptor
-      console.error('Login failed:', err);
-    },
-  });
-};
-
-export const useValidateToken = () => {
-  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
-  const setAuthToken = useSetAtom(authTokenAtom);
-  const authToken = useAtomValue(authTokenAtom);
-  setTokenInAxios(authToken);
-  return useMutation({
-    mutationFn: async (): Promise<AuthResponse> => {
-      const response = await client.post<AuthResponse>('/auth/user/validate-token');
-      return response.data;
-    },
-    retry: false,
-    onSuccess: (data: AuthResponse) => {
-      setCurrentUser(data.data);
-    },
-    onError: () => {
-      setCurrentUser(undefined);
-      setAuthToken('');
-      setTokenInAxios();
-    },
-  });
-};
-
-export const useLogout = () => {
-  const setAuthToken = useSetAtom(authTokenAtom);
-  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
-  const navigate = useNavigate();
-  return useMutation({
-    mutationFn: async () => {
-      await client.post('/auth/user/logout');
-    },
-    onSuccess: () => {
-      setAuthToken('');
-      setCurrentUser(undefined);
-      setTokenInAxios();
-      navigate({ to: LoginRoute.to });
-    },
-  });
-};

package/generators/app/templates/src/routes/index.tsx

@@ -1,12 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { Route as AppRoute } from "./app";
-
-export const Route = createFileRoute("/")({
-  beforeLoad: () => {
-    throw redirect({
-      to: AppRoute.to,
-      replace: true,
-    });
-  },
-});
-

package/generators/app/templates/types.d.ts

@@ -1,3 +0,0 @@
-// Global type definitions
-// Add your custom type definitions here
-