@tpzdsp/next-toolkit 1.1.0 → 1.2.0

package/src/types.ts

@@ -94,6 +94,56 @@ export type Credentials = {
 export type NavLink = {
   label: string;
   url: string;
-  isExternal: boolean;
+  isExternal?: boolean;
   icon?: ReactNode;
 };
+
+type GenericResponse<Ok, Error> =
+  | ({
+      readonly ok: true;
+      json(): Promise<Ok | null>;
+    } & globalThis.Response)
+  | ({
+      readonly ok: false;
+      json(): Promise<Error>;
+    } & globalThis.Response);
+
+export type Response<Ok, Error> = GenericResponse<Ok, Error>;
+
+// Since we only ever fetch a single API we don't need multiple failure types,
+// so defining a global one as the default is fine. This can be changed per-app.
+export type ApiFailure = { message: string };
+
+/*
+   Override the global Response type to be able to take a success/fail type.
+   It defines it as a tagged union so that we can take advantage of type
+   narrowing on the `json()` return type when checking `Response.ok`.
+
+   Generally overriding global types is bad, but in this case we are making
+   a normally non-typesafe feature more typesafe so I think it's acceptable.
+   */
+/**
+ * Typesafe verion of the `Response` interface.
+ *
+ * It takes 2 generics:
+ * - `Ok` which defines type type of a successful request
+ * - `Error` which defines the type of a failed request
+ */
+
+/**
+ * Typesafe version of the normal `fetch` function. It takes 2 generics:
+ * - `Ok` which defines type type of a successful request
+ * - `Error` which defines the type of a failed request (defaults to  the `ApiFailure` type)
+ *
+ * @param input The URL to fetch
+ * @param init Any fetch options, like cache, headers, body, etc.
+ */
+export declare function fetch<Ok = never, Error = ApiFailure>(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): Promise<Response<Ok, Error>>;
+
+export type WrappedApiResponse<T> = Promise<
+  | { success: true; data: T }
+  | { success: false; message: string; status?: number; details?: string[] }
+>;

package/src/utils/http.ts

@@ -0,0 +1,143 @@
+import type { Response, ApiFailure } from '../types';
+
+export const MimeTypes = {
+  Json: 'application/json',
+  GeoJson: 'application/geo+json',
+  Png: 'image/png',
+  XJsonLines: 'application/x-jsonlines',
+} as const;
+
+export const Http = {
+  Ok: 200,
+  Created: 201,
+  NoContent: 204,
+  BadRequest: 400,
+  NotFound: 404,
+  NotAllowed: 405,
+  InternalServerError: 500,
+} as const;
+
+export const HttpMethod = {
+  Get: 'GET',
+  Post: 'POST',
+  Put: 'PUT',
+  Patch: 'PATCH',
+  Delete: 'DELETE',
+} as const;
+
+type NodeGlobal = {
+  process?: {
+    env?: Record<string, string | undefined>;
+  };
+};
+
+type BrowserGlobal = {
+  btoa?: (input: string) => string;
+  Buffer?: {
+    from: (input: string) => {
+      toString: (encoding: string) => string;
+    };
+  };
+};
+
+const isNodeEnvironment = (): boolean => {
+  const global = globalThis as NodeGlobal;
+
+  return typeof global.process?.env !== 'undefined';
+};
+
+const getNodeEnvVar = (key: string): string | undefined => {
+  if (!isNodeEnvironment()) {
+    return undefined;
+  }
+
+  const global = globalThis as NodeGlobal;
+
+  return global.process?.env?.[key];
+};
+
+const encodeBase64 = (input: string): string => {
+  const global = globalThis as BrowserGlobal;
+
+  // Check for Buffer (Node.js)
+  if (global.Buffer) {
+    return global.Buffer.from(input).toString('base64');
+  }
+
+  // Check for btoa (Browser)
+  if (global.btoa) {
+    return global.btoa(input);
+  }
+
+  throw new Error('Base64 encoding not available in this environment');
+};
+
+const getAuthorizationHeader = (): { Authorization: string } | Record<string, never> => {
+  const apiHasAuth = getNodeEnvVar('API_HAS_AUTH');
+  const apiUsername = getNodeEnvVar('API_USERNAME');
+  const apiPassword = getNodeEnvVar('API_PASSWORD');
+
+  if (apiHasAuth && apiUsername && apiPassword) {
+    const credentials = `${apiUsername}:${apiPassword}`;
+
+    return {
+      Authorization: `Basic ${encodeBase64(credentials)}`,
+    };
+  }
+
+  return {};
+};
+
+// common fetch wrapper to provide auth headers if necessary
+declare const fetch: <Ok = unknown, Error = ApiFailure>(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) => Promise<Response<Ok, Error>>;
+
+export const fetchWithAuth = <Ok, Error = ApiFailure>(
+  url: string,
+  options?: RequestInit,
+): Promise<Response<Ok, Error>> => {
+  const requestOptions = {
+    ...options,
+    headers: { ...options?.headers, ...getAuthorizationHeader() },
+  };
+
+  // Use your custom fetch declaration directly
+  return fetch<Ok, Error>(url, requestOptions);
+};
+
+const get = <Ok, Error = ApiFailure>(
+  url: string,
+  options?: RequestInit,
+): Promise<Response<Ok, Error>> => {
+  const requestOptions = {
+    ...options,
+    method: HttpMethod.Get,
+  };
+
+  return fetchWithAuth<Ok, Error>(url, requestOptions);
+};
+
+const post = <Ok, Error = ApiFailure>(
+  url: string,
+  body: unknown,
+  options?: RequestInit,
+): Promise<Response<Ok, Error>> => {
+  const requestOptions = {
+    ...options,
+    method: HttpMethod.Post,
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': MimeTypes.Json,
+      ...options?.headers,
+    },
+  };
+
+  return fetchWithAuth<Ok, Error>(url, requestOptions);
+};
+
+export const FetchWrapper = {
+  get,
+  post,
+};

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './utils';
 export * from './auth';
 export * from './constants';
+export * from './http';
 export * from './renderers'; // This has testing-library dependencies, so probably need to add them as peer dependencies

package/src/components/link/NextLinkWrapper.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-
-import Link from 'next/link';
-
-import { cn } from '../../utils';
-
-export type NextLinkWrapperProps = {
-  href: string;
-  children: ReactNode;
-  className?: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  rel?: string;
-  prefetch?: boolean;
-  replace?: boolean;
-  scroll?: boolean;
-  shallow?: boolean;
-};
-
-export const NextLinkWrapper = ({
-  href,
-  children,
-  className,
-  target,
-  rel,
-  prefetch,
-  replace,
-  scroll,
-  shallow,
-  ...props
-}: NextLinkWrapperProps) => {
-  // Handle external links
-  const isExternal =
-    href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:');
-
-  if (isExternal) {
-    return (
-      <a
-        href={href}
-        className={cn('text-blue-600 hover:text-blue-800 transition-colors', className)}
-        target={target ?? '_blank'}
-        rel={rel ?? 'noopener noreferrer'}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  }
-
-  return (
-    <Link
-      href={href}
-      className={cn('text-blue-600 hover:text-blue-800 transition-colors', className)}
-      prefetch={prefetch}
-      replace={replace}
-      scroll={scroll}
-      shallow={shallow}
-      target={target}
-      rel={rel}
-      {...props}
-    >
-      {children}
-    </Link>
-  );
-};

package/src/contexts/ThemeContext.tsx

@@ -1,72 +0,0 @@
-'use client'; // This is necessary for Next.js to treat this file as a client-side component
-
-import { createContext, useContext, useState, useEffect } from 'react';
-import type { ReactNode } from 'react';
-
-import type { ThemeContextValue } from '../types';
-
-export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
-
-type ThemeProviderProps = {
-  children: ReactNode;
-  defaultTheme?: 'light' | 'dark';
-};
-
-export const ThemeProvider = ({ children, defaultTheme = 'light' }: ThemeProviderProps) => {
-  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-    if (typeof window === 'undefined') {
-      return defaultTheme;
-    }
-
-    // Check localStorage first
-    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark';
-
-    if (savedTheme) {
-      return savedTheme;
-    }
-
-    // Check system preference
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-
-    return defaultTheme;
-  });
-
-  const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-
-    setTheme(newTheme);
-
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('theme', newTheme);
-    }
-  };
-
-  useEffect(() => {
-    // Add theme class to document element
-    if (typeof window !== 'undefined') {
-      const root = window.document.documentElement;
-
-      root.classList.remove('light', 'dark');
-      root.classList.add(theme);
-    }
-  }, [theme]);
-
-  const value: ThemeContextValue = {
-    theme,
-    toggleTheme,
-  };
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-};
-
-export const useTheme = (): ThemeContextValue => {
-  const context = useContext(ThemeContext);
-
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-
-  return context;
-};