add some basic generated documentation for some util methods

Author: DaltheCow

src/ui/lib/layouts/helpers/ContentCenterer.tsx

@@ -6,9 +6,23 @@ type HasChildren = {
   children: ReactNode;
 };
 
+/**
+ * Helper function that returns appropriate padding based on breakpoint.
+ *
+ * @param breakpoint - The current MUI breakpoint name
+ * @returns Padding value as a CSS string
+ */
 const getPaddingForBreakpoint = (breakpoint: string) =>
   breakpoint === 'xs' ? '16px' : '32px';
 
+/**
+ * Component that centers content with responsive padding and max-width constraints.
+ *
+ * Automatically adjusts padding and max-width based on the current screen size
+ * using MUI breakpoints for optimal display across devices.
+ *
+ * @param children - React nodes to be centered and constrained
+ */
 export const ContentCenterer = ({ children }: HasChildren) => {
   const breakpoint = useCurrentBreakpoint();
   const padding = getPaddingForBreakpoint(breakpoint);

src/ui/lib/layouts/helpers/useCurrentBreakpoint.ts

@@ -1,5 +1,13 @@
 import { useMediaQuery, useTheme } from '@mui/material';
 
+/**
+ * Custom hook that returns the current MUI breakpoint based on screen width.
+ *
+ * Uses Material-UI's breakpoint system to determine which breakpoint matches
+ * the current viewport size.
+ *
+ * @returns {'xs' | 'sm' | 'md' | 'lg' | 'xl'} The current breakpoint name
+ */
 export function useCurrentBreakpoint() {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.only('xs'));
@@ -10,18 +18,14 @@ export function useCurrentBreakpoint() {
 
   if (isXs) {
     return 'xs';
-  }
-  if (isSm) {
+  } else if (isSm) {
     return 'sm';
-  }
-  if (isMd) {
+  } else if (isMd) {
     return 'md';
-  }
-  if (isLg) {
+  } else if (isLg) {
     return 'lg';
-  }
-  if (isXl) {
+  } else if (isXl) {
     return 'xl';
   }
-  return 'xl';
+  return 'xs';
 }

src/ui/lib/utils/ColorHelper.ts

@@ -1,14 +1,36 @@
+/**
+ * Converts a hex color string to RGB values.
+ *
+ * @param hex - Hex color string (e.g., "#FF5733")
+ * @returns Object with r, g, b numeric values
+ */
 function hexToRGB(hex: string) {
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
   const b = parseInt(hex.slice(5, 7), 16);
   return { r, g, b };
 }
 
+/**
+ * Converts RGB values to a hex color string.
+ *
+ * @param r - Red value (0-255)
+ * @param g - Green value (0-255)
+ * @param b - Blue value (0-255)
+ * @returns Hex color string (e.g., "#FF5733")
+ */
 function rgbToHex(r: number, g: number, b: number) {
   return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
 
+/**
+ * Blends two hex colors by a specified step amount.
+ *
+ * @param colorA - First hex color
+ * @param colorB - Second hex color
+ * @param step - Blend ratio (0 = colorA, 1 = colorB)
+ * @returns Blended hex color
+ */
 function mixColors(colorA: string, colorB: string, step: number) {
   const colorARGB = hexToRGB(colorA);
   const colorBRGB = hexToRGB(colorB);
@@ -23,6 +45,15 @@ function mixColors(colorA: string, colorB: string, step: number) {
 const NEURAL_WHITE = '#FFFFFF';
 const NEURAL_BLACK = '#0F161F';
 
+/**
+ * Generates a complete shade palette from a base color.
+ *
+ * Creates lighter (W10-W100) and darker (B10-B100) variations by mixing
+ * the base color with neural white and black at different ratios.
+ *
+ * @param color - Base hex color to generate shades from
+ * @returns Object mapping shade keys to hex color values
+ */
 export const generateShades = (color: string) => {
   const shades: { [key: string]: string } = { '0': color };
   for (let i = 1; i <= 9; i++) {