chore: tidy up config

Author: code-mattclaffey

.eslintrc.cjs renamed to config/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: {
+    tailwindcss: { config: './config/tailwind.config.cjs' },
+    autoprefixer: {},
+  },
+}

config/postcss.config.cjs

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'],
+  darkMode: ['class', '[data-mode="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        modal: {
+          bg: 'rgba(0, 0, 0, 0.3)'
+        },
+        code: {
+          950: '#1E1E3F',
+          750: '#2D2B55',
+          600: '#a03fc0',
+          500: '#A599E9'
+        }
+      }
+    }
+  },
+  plugins: []
+};

config/tailwind.config.cjs

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
+  root: resolve(__dirname, '..')
 });

vite.config.ts renamed to config/vite.config.ts

@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
-    "preview": "vite preview",
+    "dev": "vite --config config/vite.config.ts",
+    "build": "tsc && vite build --config config/vite.config.ts",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --config config/.eslintrc.cjs",
+    "preview": "vite preview --config config/vite.config.ts",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "npm run build && storybook build -o dist/storybook",
     "test": "test-storybook",

package.json

@@ -1,7 +1 @@
-/* eslint-disable no-undef */
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = require('./config/postcss.config.cjs');

postcss.config.cjs

@@ -0,0 +1,95 @@
+// define the api types like a generic
+
+import { useEffect, useReducer } from 'react';
+
+export type TPokemonCardsApiResponse = {
+  id: string;
+  name: string;
+  images: {
+    small: string;
+  };
+};
+
+export type TPokemonTypesApiResponse = string;
+
+type TTypesApi = {
+  path: 'types';
+  skip?: boolean;
+  queryParams?: string;
+  fail?: boolean;
+};
+
+type TCardsApi = {
+  path: 'cards';
+  queryParams?: string;
+  skip?: boolean;
+  fail?: boolean;
+};
+
+interface IUsePokedexState<TResponse> {
+  data?: TResponse;
+  isError?: boolean;
+  isLoading?: boolean;
+}
+
+const usePokedexReducer = <TResponse>(
+  state: IUsePokedexState<TResponse>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  action: { type: string; payload?: any }
+): IUsePokedexState<TResponse> => {
+  switch (action.type) {
+    case 'SUCCESS':
+      return { ...state, isLoading: false, data: action.payload };
+    case 'LOADING':
+      return { ...state, isLoading: true };
+    case 'ERROR':
+      return { ...state, isLoading: false };
+    default:
+      return state;
+  }
+};
+
+export const usePokedex = <TResponse>({
+  path,
+  queryParams = '',
+  skip = false,
+  fail = false
+}: TCardsApi | TTypesApi): IUsePokedexState<TResponse> => {
+  const [state, dispatch] = useReducer(usePokedexReducer<TResponse>, {
+    isError: false,
+    isLoading: false,
+    data: undefined
+  });
+
+  useEffect(() => {
+    if (skip) return;
+
+    const getData = async () => {
+      try {
+        dispatch({ type: 'LOADING' });
+        const response = await fetch(
+          `https://api.pokemontcg.io/v2/${path}?${queryParams}`
+        );
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const json = await response.json();
+
+        if (fail) {
+          throw new Error('Error');
+        }
+
+        dispatch({ type: 'SUCCESS', payload: json.data });
+      } catch (e) {
+        dispatch({ type: 'ERROR' });
+        console.error('Failed to fetch Pokemon data:', e instanceof Error ? e.message : 'Unknown error');
+      }
+    };
+
+    getData();
+  }, [skip, path, queryParams]);
+
+  return state;
+};

src/shared/hooks/usePokedex.ts

@@ -1,21 +1 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'],
-  darkMode: ['class', '[data-mode="dark"]'],
-  theme: {
-    extend: {
-      colors: {
-        modal: {
-          bg: 'rgba(0, 0, 0, 0.3)'
-        },
-        code: {
-          950: '#1E1E3F',
-          750: '#2D2B55',
-          600: '#a03fc0',
-          500: '#A599E9'
-        }
-      }
-    }
-  },
-  plugins: []
-};
+module.exports = require('./config/tailwind.config.cjs');

tailwind.config.cjs

@@ -1,11 +1,25 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@shared/*": ["./src/shared/*"]
     }
-  ]
+  },
+  "include": ["src", "config/vite.config.ts"],
+  "exclude": ["src/**/*.mdx"]
 }