Utility Functions

This package includes information on the set of utility functions in web-ui/utils organized by functionality.

UI & Styling Utilities

variant-match

Checks button conditions and determines if conditional Tailwind classes should be applied based on variant properties. This utility is essential for implementing dynamic button styling across different component variants.

get-background-size

Maps background size string values (auto, cover, contain) to their corresponding Tailwind CSS classes. Returns sensible defaults when no size is provided.

get-background-position

Converts position strings (like top, bottom, top-left) into appropriate Tailwind background position classes. Supports all standard CSS background positions.

get-column-widths

Calculates responsive column widths for two-column layouts with support for different breakpoints (sm, md, lg). Automatically handles grid positioning and gap spacing for responsive design.

Use when building components that can support multiple column widths in the CMS.

get-content-alignment

Maps content alignment strings (top, center, bottom) to Tailwind flexbox alignment classes. Provides consistent content alignment across components.

Text & String Utilities

remove-quotes

Removes all types of quotes (straight and curly quotes) from strings. Useful for cleaning up content that may contain various quote characters from different sources.

clean-select-option

Converts strings to lowercase and replaces spaces with dashes for use in form select options. Ensures consistent formatting for option values.

Animation Utilities

animate-baton-stroke

Animates SVG stroke elements using CSS transitions and stroke-dasharray manipulation. Creates smooth drawing animations for decorative stroke elements with optional reverse animation support.

Navigation & Content Utilities

get-nested-headings & scroll-to-heading

Transforms flat lists of heading elements into nested tree structures for table of contents generation. Includes smooth scrolling functionality with proper offset handling for fixed headers.

is-relative-url

Checks if a URL is relative (starts with / or #) versus absolute. Used for determining navigation behavior and link handling.

Image Utilities

get-sanity-image-url

Generates optimized Sanity CMS image URLs with automatic format detection and responsive sizing. Provides consistent image optimization across the application.

Search Utilities

check-content-feed-search

Implements search functionality for the ContentFeed component across blog posts, resources, and case studies. Supports searching across multiple content fields including name, content, data stack, and location.

check-property

Checks multiple property types (string, array, block content, object) for search input matches. Provides flexible content searching across different data structures.

Form Utilities

validate-password

Provides client-side password validation with customizable requirements. Handles password confirmation matching and displays appropriate error messages.

save-clone-form & show-form-submission-result

Manages Hubspot form integration by creating form clones and handling submission states. Provides loading indicators and manages the display of thank-you messages.

Additional Form Utilities

• validate-signup-password: Simplified password validation for signup forms
• delete-password-fields: Removes password fields from form data
• inject-custom-fields: Adds custom fields to form submissions

General Utilities

get-random-int

Generates random integers within a specified range using proper bounds handling. Useful for creating dynamic content variations and testing scenarios.

create-query-string

Creates URL query parameter strings by updating existing URLSearchParams. Essential for managing URL state in search and filtering interfaces.

API Utilities

apiIsAuthenticated

Checks the API request for a Bearer token to allow or deny access to the request.

handleError

Provides elegant handling for error responses within API requests by checking multiple error types, and returning a fallback if no expected error types found.

Middleware Utilities

isOriginAllowed

Searches the allowedOrigins array to check if the origin of the request is allowed. This prevents requests to our API endpoints outside of our allowed origins.

handlePreflight

When hitting NextJS API endpoints, a preflight OPTIONS request is often sent from the browser to validate the request. This function handles the preflight request to prevent it from blocking the actual POST request.

setCorsHeaders

Adds the CORS headers needed to the API request after the API request has been allowed by middleware. This adds a layer of additional security to our API endpoints by limiting the origins and headers allowed during the request.