@tpzdsp/next-toolkit 1.14.2 → 1.15.0

package/src/http/logger.ts

@@ -2,60 +2,376 @@ import type { BetterFetchPlugin, RequestContext } from '@better-fetch/fetch';
 
 import { Header } from './constants';
 
-// Tries to print the request/response body as a string, and clamps the length it it's too long.
-const preview = (data: unknown, maxLength: number): string | null => {
+const MAX_PREVIEW_LENGTH = 150;
+
+// Tries to print data as a string.
+const stringify = (data: unknown): string | null => {
   if (data == null) {
     return null;
   }
 
   try {
-    let str = typeof data === 'string' ? data : JSON.stringify(data);
-
-    if (str.length > maxLength) {
-      str = str.slice(0, maxLength) + '…';
-    }
-
-    return str;
+    return typeof data === 'string' ? data : JSON.stringify(data);
   } catch {
     return '[unserializable]';
   }
 };
 
+// Tries to print the request/response body as a string, and clamps the length if it's too long.
+const preview = (data: unknown): string | null => {
+  const str = stringify(data);
+
+  if (str == null) {
+    return null;
+  }
+
+  if (str.length > MAX_PREVIEW_LENGTH) {
+    return str.slice(0, MAX_PREVIEW_LENGTH) + '…';
+  }
+
+  return str;
+};
+
 type RequestMeta = {
   requestId: string;
 };
+
+type RequestLoggerMessageExtras = {
+  loggerOverrides?: {
+    requestFormat?: (args: { request: MetaContext }) => string;
+
+    successFormat?: (args: {
+      request: MetaContext;
+      response: Response;
+      data: unknown;
+      durationMs: number;
+    }) => string;
+
+    errorFormat?: (args: {
+      request: MetaContext;
+      response?: Response;
+      error: unknown;
+      durationMs: number;
+    }) => string;
+
+    retryFormat?: (args: { request: MetaContext; attempt: number }) => string;
+  };
+};
+
 type MetaContext = RequestContext & {
   meta: RequestMeta;
-};
+} & RequestLoggerMessageExtras;
 
 const UNKNOWN_ID = '???';
 
-/**
- * Config options for the logger.
- */
+type RequestResponseToggle = {
+  request?: boolean;
+  response?: boolean;
+};
+
 type RequestLoggerOptions = {
   /**
-   * Enables/Disabled the logger. Can be a function/async function to toggle the logger dynamically
+   * Enables/disables the logger. Can be a function/async function to toggle dynamically.
    */
   enabled?: boolean | (() => Promise<boolean> | boolean);
+
   /**
-   * Controls how much of the request and response body is shown in the logs.
+   * Whether bodies should be truncated to `maxPreviewLength`.
+   * If false, the full body is printed and is placed on the following line.
    */
-  maxPreviewLength?: number;
+  truncateBody?: boolean;
+
+  /**
+   * Built-in output toggles.
+   */
+  showMethod?: boolean;
+  showUrl?: boolean;
+  showStatus?: boolean;
+  showDuration?: boolean;
+  showAcceptHeader?: boolean;
+  showContentType?: boolean;
+  showRetryAttempt?: boolean;
+  showBody?: RequestResponseToggle;
+  showHeaders?: RequestResponseToggle;
+};
+
+const defaultOptions = {
+  truncateBody: true,
+  showMethod: true,
+  showUrl: true,
+  showStatus: true,
+  showDuration: true,
+  showAcceptHeader: true,
+  showContentType: true,
+  showRetryAttempt: true,
+  showBody: {
+    request: true,
+    response: true,
+  },
+  showHeaders: {
+    request: false,
+    response: false,
+  },
+} as const;
+
+const getOptionOrDefault = <K extends keyof RequestLoggerOptions>(
+  options: RequestLoggerOptions | undefined,
+  key: K,
+): NonNullable<RequestLoggerOptions[K]> => {
+  return options?.[key] ?? (defaultOptions as Required<RequestLoggerOptions>)[key];
+};
+
+const formatHeaders = (headers: Headers): string => {
+  const entries = Array.from(headers.entries());
+
+  if (entries.length === 0) {
+    return 'N/A';
+  }
+
+  return entries.map(([key, value]) => `${key}: ${value}`).join(', ');
+};
+
+const joinLines = (lines: (string | null | undefined)[]): string =>
+  lines.filter((line): line is string => Boolean(line)).join('\n');
+
+const formatPrimaryLine = ({
+  icon,
+  request,
+  id,
+  showMethod,
+  showUrl,
+  suffix,
+}: {
+  icon: string;
+  request: MetaContext;
+  id: string;
+  showMethod: boolean;
+  showUrl: boolean;
+  suffix?: string;
+}): string => {
+  const parts = [
+    icon,
+    showMethod ? `[${request.method.toUpperCase()}]` : null,
+    `(${id})`,
+    showUrl ? `${request.url ?? ''}` : null,
+    suffix ?? null,
+  ].filter(Boolean);
+
+  return parts.join(' ');
+};
+
+const formatStatusDurationLine = ({
+  status,
+  durationMs,
+  showStatus,
+  showDuration,
+}: {
+  status?: number | string;
+  durationMs: number;
+  showStatus: boolean;
+  showDuration: boolean;
+}): string | null => {
+  const parts = [
+    showStatus ? `${status ?? 'unknown'}` : null,
+    showDuration ? `${durationMs.toFixed(1)}ms` : null,
+  ].filter(Boolean);
+
+  return parts.length > 0 ? `\t↳ ${parts.join(' | ')}` : null;
+};
+
+const formatBodyLine = ({
+  label,
+  body,
+  truncateBody,
+}: {
+  label: string;
+  body: unknown;
+  truncateBody: boolean;
+}): string | null => {
+  const rendered = truncateBody ? preview(body) : stringify(body);
+
+  if (!rendered) {
+    return null;
+  }
+
+  return truncateBody ? `\t↳ ${label}: ${rendered}` : `\t↳ ${label}:\n${rendered}`;
+};
+
+const getDurationMs = (timings: Map<string, number>, id: string): number =>
+  performance.now() - (timings.get(id) ?? 0);
+
+const defaultRequestFormatter = ({
+  request,
+  options,
+}: {
+  request: MetaContext;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showAcceptHeader = getOptionOrDefault(options, 'showAcceptHeader');
+  const showRequestContentType = getOptionOrDefault(options, 'showContentType');
+  const showRequestHeaders = getOptionOrDefault(options, 'showHeaders').request;
+  const showRequestBody = getOptionOrDefault(options, 'showBody').request;
+  const truncateBody = getOptionOrDefault(options, 'truncateBody');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '🚀',
+      request,
+      id,
+      showMethod,
+      showUrl,
+    }),
+    showRequestContentType
+      ? `\t↳ Req. Content-Type: ${request.headers.get(Header.ContentType) ?? 'N/A'}`
+      : null,
+    showAcceptHeader ? `\t↳ Req. Accept: ${request.headers.get(Header.Accept) ?? 'N/A'}` : null,
+    showRequestHeaders ? `\t↳ Req. Headers: ${formatHeaders(request.headers)}` : null,
+    showRequestBody
+      ? formatBodyLine({
+          label: 'Req. Body',
+          body: request.body,
+          truncateBody,
+        })
+      : null,
+  ]);
+};
+
+const defaultSuccessFormatter = ({
+  request,
+  response,
+  data,
+  durationMs,
+  options,
+}: {
+  request: MetaContext;
+  response: Response;
+  data: unknown;
+  durationMs: number;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showStatus = getOptionOrDefault(options, 'showStatus');
+  const showDuration = getOptionOrDefault(options, 'showDuration');
+  const showResponseContentType = getOptionOrDefault(options, 'showContentType');
+  const showResponseHeaders = getOptionOrDefault(options, 'showHeaders').response;
+  const showResponseBody = getOptionOrDefault(options, 'showBody').response;
+  const truncateBody = getOptionOrDefault(options, 'truncateBody');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '✅',
+      request,
+      id,
+      showMethod,
+      showUrl,
+    }),
+    formatStatusDurationLine({
+      status: response.status,
+      durationMs,
+      showStatus,
+      showDuration,
+    }),
+    showResponseContentType
+      ? `\t↳ Res. Content-Type: ${response.headers.get(Header.ContentType) ?? 'N/A'}`
+      : null,
+    showResponseHeaders ? `\t↳ Res. Headers: ${formatHeaders(response.headers)}` : null,
+    showResponseBody
+      ? formatBodyLine({
+          label: 'Res. Body',
+          body: data,
+          truncateBody,
+        })
+      : null,
+  ]);
+};
+
+const defaultRetryFormatter = ({
+  request,
+  attempt,
+  options,
+}: {
+  request: MetaContext;
+  attempt: number;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showRetryAttempt = getOptionOrDefault(options, 'showRetryAttempt');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '🔁',
+      request,
+      id,
+      showMethod,
+      showUrl,
+      suffix: 'Retrying...',
+    }),
+    showRetryAttempt ? `\t↳ Attempt: ${attempt}` : null,
+  ]);
+};
+
+const defaultErrorFormatter = ({
+  request,
+  response,
+  error,
+  durationMs,
+  options,
+}: {
+  request: MetaContext;
+  response?: Response;
+  error: unknown;
+  durationMs: number;
+  options?: RequestLoggerOptions;
+}): string => {
+  const id = request.meta?.requestId ?? UNKNOWN_ID;
+
+  const showMethod = getOptionOrDefault(options, 'showMethod');
+  const showUrl = getOptionOrDefault(options, 'showUrl');
+  const showStatus = getOptionOrDefault(options, 'showStatus');
+  const showDuration = getOptionOrDefault(options, 'showDuration');
+  const showResponseHeaders = getOptionOrDefault(options, 'showHeaders').response;
+  const truncateBody = getOptionOrDefault(options, 'truncateBody');
+
+  return joinLines([
+    formatPrimaryLine({
+      icon: '❌',
+      request,
+      id,
+      showMethod,
+      showUrl,
+    }),
+    formatStatusDurationLine({
+      status: response?.status ?? 'unknown',
+      durationMs,
+      showStatus,
+      showDuration,
+    }),
+    showResponseHeaders && response ? `\t↳ Res. Headers: ${formatHeaders(response.headers)}` : null,
+    truncateBody
+      ? `\t↳ Error: ${preview(error)}`
+      : `\t↳ Error:\n${stringify(error) ?? '[unserializable]'}`,
+  ]);
 };
 
 /**
- * A logger for the fetch functions that prints detailed information on each request and respective response.
- * Each request is given a unique ID which is paired with a response to make finding matching request/response pairs easier.
- *
- * It currently, prints the method, url, `Accept` and `Content-Type` headers, and the body of the request, and it prints the
- * `Content-Type` header, status code, response body and duration of the response, for both successful and failed responses.
+ * A logger for fetch functions that prints detailed information for each request and response.
+ * Each request is given a unique ID which is paired with its response.
  */
-export const requestLogger = (options?: RequestLoggerOptions): BetterFetchPlugin => {
+export const requestLogger = (
+  options?: RequestLoggerOptions,
+): BetterFetchPlugin<RequestLoggerMessageExtras> => {
   const enabled =
-    typeof options?.enabled !== 'function' ? () => options?.enabled ?? true : options?.enabled;
-
-  const maxPreview = options?.maxPreviewLength ?? 150;
+    typeof options?.enabled !== 'function' ? () => options?.enabled ?? true : options.enabled;
 
   const timings = new Map<string, number>();
 
@@ -64,99 +380,119 @@ export const requestLogger = (options?: RequestLoggerOptions): BetterFetchPlugin
   return {
     id: 'logger',
     name: 'Logger',
-    version: '0.1.0',
+    version: '0.3.0',
     hooks: {
       hookOptions: {
         cloneResponse: true,
       },
 
       onRequest: async (context) => {
-        if (!(await enabled?.())) {
+        if (!(await enabled())) {
           return;
         }
 
-        const metaContext = context as MetaContext;
+        const request = context as MetaContext;
 
-        metaContext.meta = metaContext.meta ?? {};
+        request.meta = request.meta ?? ({} as RequestMeta);
+        request.loggerOverrides = request.loggerOverrides ?? {};
 
         const id = genId();
 
-        metaContext.meta.requestId = id;
-        context.headers.set(Header.XRequestId, id);
+        request.meta.requestId = id;
+        request.headers.set(Header.XRequestId, id);
 
         timings.set(id, performance.now());
 
-        const { url, method, body, headers } = context;
-
-        const bodyPreview = body ? preview(body, maxPreview) : '';
-        const contentType = headers.get(Header.ContentType) ?? 'N/A';
-        const accept = headers.get(Header.Accept) ?? 'N/A';
-
         const message =
-          `🚀 [${method}] (${id}) ${url}\n` +
-          `\t↳ Content-Type: ${contentType}\n` +
-          `\t↳ Accept: ${accept}` +
-          (bodyPreview ? `\n\t↳ Body: ${bodyPreview}` : '');
+          request.loggerOverrides.requestFormat?.({ request }) ??
+          defaultRequestFormatter({
+            request,
+            options,
+          });
 
-        console.log(message);
+        console.log(`${message}\n`);
       },
 
       onSuccess: async (context) => {
-        if (!(await enabled?.())) {
+        if (!(await enabled())) {
           return;
         }
 
-        const { response, data, request } = context;
+        const request = context.request as MetaContext;
+        const { response, data } = context;
 
-        const id = (request as MetaContext).meta.requestId ?? UNKNOWN_ID;
-
-        const status = response.status;
-        const bodyPreview = preview(data, maxPreview);
-        const contentType = response.headers.get(Header.ContentType) ?? 'N/A';
-        const duration = (performance.now() - (timings.get(id) ?? 0)).toFixed(1);
+        const id = request.meta?.requestId ?? UNKNOWN_ID;
+        const durationMs = getDurationMs(timings, id);
 
         const message =
-          `✅ [${request.method}] (${id}) ${request.url}\n` +
-          `\t↳ Status: ${status} (${duration}ms)\n` +
-          `\t↳ Respone Content-Type: ${contentType}\n` +
-          `\t↳ Response: ${bodyPreview}`;
-
-        console.log(message);
+          request.loggerOverrides?.successFormat?.({
+            request,
+            response,
+            data,
+            durationMs,
+          }) ??
+          defaultSuccessFormatter({
+            request,
+            response,
+            data,
+            durationMs,
+            options,
+          });
+
+        console.log(`${message}\n`);
+        timings.delete(id);
       },
 
-      onRetry: async (ctx) => {
-        if (!(await enabled?.())) {
+      onRetry: async (context) => {
+        if (!(await enabled())) {
           return;
         }
 
-        const id = (ctx.request as MetaContext).meta.requestId ?? UNKNOWN_ID;
+        const request = context.request as MetaContext;
+        const attempt = (request.retryAttempt ?? 0) + 1;
 
-        console.warn(
-          `🔁 [${ctx.request.method}] (${id}) Retrying ${ctx.request.url}... Attempt: ${
-            (ctx.request.retryAttempt ?? 0) + 1
-          }`,
-        );
+        const message =
+          request.loggerOverrides?.retryFormat?.({
+            request,
+            attempt,
+          }) ??
+          defaultRetryFormatter({
+            request,
+            attempt,
+            options,
+          });
+
+        console.warn(`${message}\n`);
       },
 
       onError: async (context) => {
-        if (!(await enabled?.())) {
+        if (!(await enabled())) {
           return;
         }
 
-        const { response, error, request } = context;
-
-        const id = (request as MetaContext).meta.requestId ?? UNKNOWN_ID;
+        const request = context.request as MetaContext;
+        const { response, error } = context;
 
-        const status = response?.status ?? 'unknown';
-        const errorPreview = preview(error, maxPreview);
-        const duration = (performance.now() - (timings.get(id) ?? 0)).toFixed(1);
+        const id = request.meta?.requestId ?? UNKNOWN_ID;
+        const durationMs = getDurationMs(timings, id);
 
         const message =
-          `❌ [${request.method}] (${id}) ${request.url}\n` +
-          `\t↳ Status: ${status} (${duration}ms)\n` +
-          `\t↳ Error: ${errorPreview}`;
-
-        console.error(message);
+          request.loggerOverrides?.errorFormat?.({
+            request,
+            response,
+            error,
+            durationMs,
+          }) ??
+          defaultErrorFormatter({
+            request,
+            response,
+            error,
+            durationMs,
+            options,
+          });
+
+        console.error(`${message}\n`);
+        timings.delete(id);
       },
     },
   };

package/src/map/useKeyboardDrawing.ts

@@ -70,19 +70,23 @@ export const useKeyboardDrawing = ({
       }
 
       switch (event.key) {
-        case KeyboardKeys.ArrowUp:
+        case KeyboardKeys.W:
+        case KeyboardKeys.I:
           moveCursor(0, -1);
           event.preventDefault();
           break;
-        case KeyboardKeys.ArrowDown:
+        case KeyboardKeys.S:
+        case KeyboardKeys.K:
           moveCursor(0, 1);
           event.preventDefault();
           break;
-        case KeyboardKeys.ArrowLeft:
+        case KeyboardKeys.A:
+        case KeyboardKeys.J:
           moveCursor(-1, 0);
           event.preventDefault();
           break;
-        case KeyboardKeys.ArrowRight:
+        case KeyboardKeys.D:
+        case KeyboardKeys.L:
           moveCursor(1, 0);
           event.preventDefault();
           break;

package/src/utils/constants.ts

@@ -11,5 +11,13 @@ export const KeyboardKeys = {
   Space: ' ',
   Escape: 'Escape',
   F: 'f',
+  W: 'w',
+  A: 'a',
+  S: 's',
+  D: 'd',
+  I: 'i',
+  J: 'j',
+  K: 'k',
+  L: 'l',
   Tab: 'Tab',
 } as const;

package/src/utils/utils.ts

@@ -3,10 +3,10 @@ import { twMerge } from 'tailwind-merge';
 
 import type { Credentials, DecodedJWT } from '../types/auth';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const isDecodedJWT = (value: object): value is DecodedJWT => {
-  return 'email' in value && 'name' in value && 'groupInfoIds' in value;
-};
+// eslint-disable-next-line sonarjs/no-commented-code
+/* const isDecodedJWT = (value: object): value is DecodedJWT => {
+   return 'email' in value && 'name' in value && 'groupInfoIds' in value;
+ }; */
 
 export const decodeAuthToken = async (token: string): Promise<Credentials | null> => {
   if (!token) {

package/src/components/theme/ThemeProvider.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-
-import { ThemeContext } from '../../contexts';
-import { useLocalStorage } from '../../hooks';
-
-export type ThemeProviderProps = {
-  children: ReactNode;
-  defaultTheme?: 'light' | 'dark';
-};
-
-export const ThemeProvider = ({ children, defaultTheme = 'light' }: ThemeProviderProps) => {
-  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', defaultTheme);
-
-  const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
-  };
-
-  const value = {
-    theme,
-    toggleTheme,
-  };
-
-  return (
-    <ThemeContext.Provider value={value}>
-      <div className={theme === 'dark' ? 'dark' : ''}>{children}</div>
-    </ThemeContext.Provider>
-  );
-};