create-reactivite 1.1.0 → 1.2.0

package/template2/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/template2/scripts/fix-generated-types.mjs

@@ -0,0 +1,13 @@
+// Post-processing hook for orval output.
+// Runs after `npm run generate`. Add codemods here if your backend schema needs
+// tweaks the generator can't express. No-op when nothing is generated yet.
+import { existsSync } from 'node:fs';
+
+const GENERATED_DIR = new URL('../services/generated/', import.meta.url);
+
+if (!existsSync(GENERATED_DIR)) {
+  console.log('fix-generated-types: services/generated yox, keçildi.');
+  process.exit(0);
+}
+
+console.log('fix-generated-types: generated tipləri yoxlandı (no-op).');

package/template2/services/generated/.gitkeep

@@ -0,0 +1,2 @@
+# orval writes generated react-query hooks + models here.
+# Run `npm run generate:api` after pointing orval.config.ts at your schema.

package/template2/services/httpClient/httpClient.ts

@@ -0,0 +1,70 @@
+import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import { toast } from 'sonner';
+import { useUserStore } from '@/store/user-store';
+import { env } from '@/config/env';
+import { AXIOS_TIMEOUT_MS } from '@/config/constants';
+import { paramsSerializer } from '@/lib/paramsSerializer';
+
+export const httpClient: AxiosInstance = axios.create({
+  baseURL: env.apiBaseUrl,
+  withCredentials: true,
+  paramsSerializer,
+});
+
+httpClient.defaults.timeout = AXIOS_TIMEOUT_MS;
+
+type ServerErrorData = { message: string };
+
+const errorMessageByCode: Record<number, string> = {
+  400: 'Validation error',
+  404: 'Not found',
+  500: 'Server error',
+};
+
+const setupInterceptors = () => {
+  httpClient.interceptors.request.use(
+    (requestConfig) => {
+      if (typeof window !== 'undefined') {
+        const locale =
+          document.cookie.match(/NEXT_LOCALE=([^;]+)/)?.[1] ?? 'az';
+        requestConfig.headers['Accept-Language'] = locale;
+      }
+      return requestConfig;
+    },
+    (error: AxiosError) => Promise.reject(error),
+  );
+
+  httpClient.interceptors.response.use(
+    (response: AxiosResponse) => response,
+    (error: AxiosError) => {
+      if (error.response) {
+        const errorStatus = error.response.status;
+        const errorData = error.response.data as ServerErrorData;
+
+        if (errorStatus === 401 || errorStatus === 403) {
+          const store = useUserStore.getState();
+          if (store.isAuthenticated()) {
+            store.clearUser();
+            window.dispatchEvent(new CustomEvent('auth:unauthorized'));
+          }
+          return Promise.reject(error);
+        }
+
+        if (errorStatus in errorMessageByCode) {
+          toast.error(errorData?.message ?? errorMessageByCode[errorStatus]);
+        } else if (errorData?.message) {
+          toast.error(errorData.message);
+        } else {
+          toast.error(`Server status ${errorStatus}`);
+        }
+      } else if (error.request) {
+        toast.error('Network error. Check your connection.');
+      } else {
+        toast.error(`Unexpected error: ${error.message}`);
+      }
+      return Promise.reject(error);
+    },
+  );
+};
+
+setupInterceptors();

package/template2/services/httpClient/orvalMutator.ts

@@ -0,0 +1,10 @@
+import { AxiosRequestConfig } from 'axios';
+import { httpClient } from './httpClient';
+
+export const customMutator = <T>(config: AxiosRequestConfig): Promise<T> => {
+  const { signal, ...rest } = config;
+  return httpClient({
+    ...rest,
+    ...(signal instanceof AbortSignal ? { signal } : {}),
+  }).then(({ data }) => data);
+};

package/template2/store/example-store.tsx

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+type CounterState = {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+};
+
+// Minimal store to show the non-persisted pattern. Delete or replace.
+export const useExampleStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((s) => ({ count: s.count + 1 })),
+  decrement: () => set((s) => ({ count: s.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));

package/template2/store/user-store.tsx

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type User = {
+  id: string;
+  email: string;
+  fullName?: string;
+};
+
+type UserState = {
+  user: User | null;
+  setUser: (value: User | null) => void;
+  clearUser: () => void;
+  isAuthenticated: () => boolean;
+};
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set, get) => ({
+      user: null,
+      setUser: (value) => set({ user: value }),
+      clearUser: () => set({ user: null }),
+      isAuthenticated: () => get().user !== null,
+    }),
+    {
+      name: 'user_authenticated',
+    },
+  ),
+);

package/template2/testing/msw/handlers/index.ts

@@ -0,0 +1,6 @@
+import { http, HttpResponse } from 'msw';
+
+// Add request handlers here. Example:
+export const handlers = [
+  http.get('*/health', () => HttpResponse.json({ status: 'ok' })),
+];

package/template2/testing/msw/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

package/template2/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}