Utility Functions

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/lib/utils.js
• frontend/src/mock.js
• frontend/components.json
• frontend/src/components/ui/sheet.jsx
• frontend/src/components/ui/pagination.jsx
• frontend/src/components/LandingPage.jsx

Introduction

The utility functions in this project provide helper functionalities primarily focused on styling and development-time data mocking. The core styling utility, cn, is used throughout the UI components to conditionally merge and manage Tailwind CSS class names, ensuring a consistent and conflict-free application of styles.

Additionally, the project includes a set of mock utility functions that simulate backend behavior, such as API form submissions and analytics tracking. These mocks are crucial for frontend development, allowing developers to build and test UI features without a live backend. The path to these utilities is configured via an alias in the components.json file.

Styling and Class Name Management

The primary utility for styling is the cn function, which is a composite function built using clsx and tailwind-merge. It is defined in frontend/src/lib/utils.js and is imported by nearly all UI components.

• clsx: A tiny utility for constructing className strings conditionally.
• tailwind-merge: A function to merge multiple Tailwind CSS classes without style conflicts.

The cn function combines these two, allowing developers to apply conditional classes while automatically resolving conflicts (e.g., merging p-2 and p-4 into just p-4).

Sources: frontend/src/lib/utils.js

cn Function Definition

import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

Sources: frontend/src/lib/utils.js:1-6

Usage Flow

The following diagram illustrates how UI components use the cn utility to generate final class names.

Example Usage in SheetContent

The cn function is used to merge the base sheetVariants with any additional className props passed to the component.

// frontend/src/components/ui/sheet.jsx

import { cn } from "../../lib/utils"

// ...

const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
      {/* ... */}
    </SheetPrimitive.Content>
  </SheetPortal>
))

Sources: frontend/src/components/ui/sheet.jsx:5,48-55

Mock Data and API Simulation

The frontend/src/mock.js file provides a suite of mock data and functions to simulate a backend environment. This allows for independent frontend development and testing of features like contact forms and analytics.

Sources: frontend/src/mock.js

Mock Form Submission

The mockFormSubmission object contains an asynchronous function submitContactForm that mimics an API call for form submission.

submitContactForm Function

This function simulates an API call with a 1-second delay, logs the submitted data to the console, and returns a mock success response.

// frontend/src/mock.js

export const mockFormSubmission = {
  submitContactForm: async (formData) => {
    // Simulate API call delay
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // Mock successful submission
    console.log("Form submitted with data:", formData);
    
    return {
      success: true,
      message: "Thank you! Your strategy session has been scheduled. You'll receive a confirmation email shortly.",
      confirmationNumber: `SS-${Date.now()}`
    };
  }
};

Sources: frontend/src/mock.js:200-215

Sequence Diagram

The diagram below shows the sequence of events when the mock form submission is triggered.

Return Object Structure

Field	Type	Description
success	boolean	Always true in the mock implementation.
message	string	A confirmation message for the user.
confirmationNumber	string	A dynamically generated mock confirmation number.
Sources: frontend/src/mock.js:209-213

Mock Analytics

The mockAnalytics object provides functions to simulate tracking user interactions. These functions log events to the browser console, serving as placeholders for a real analytics service.

• trackPageView(pageName): Logs a page view event.
• trackButtonClick(buttonName): Logs a button click event.
• trackFormSubmission(formType): Logs a form submission event.

Sources: frontend/src/mock.js:218-231

trackButtonClick Flow

This flowchart shows the simple logic of a mock analytics function.

Configuration and Aliases

The components.json file configures path aliases for the project, making it easier to import modules like the utility functions. The @/lib/utils alias points directly to the frontend/src/lib/utils.js file.

Path Aliases

Alias	Path	Description
components	@/components	Alias for the main components directory.
utils	@/lib/utils	Alias for the utility functions module.
ui	@/components/ui	Alias for the shadcn/ui components.
lib	@/lib	Alias for the library directory.
hooks	@/hooks	Alias for the custom hooks directory.

Sources: frontend/components.json:13-19

This configuration allows for clean imports in components, such as import { cn } from "@/lib/utils";, though the provided source files use relative paths like import { cn } from "../../lib/utils".

Sources: frontend/src/components/ui/sheet.jsx:5, frontend/components.json:15