Skip to main content

​
Overview

The Openlane UI library provides a collection of utility functions for common tasks including class name merging, chart color management, and window event handling.

​
Styling Utilities

​
cn

Merges Tailwind CSS class names with support for conditional classes. Location: packages/ui/lib/utils.ts:4 
function cn(...inputs: ClassValue[]): string
Parameters:
  • inputs - Variable number of class values (strings, objects, arrays)
Returns: Merged and deduplicated class name string Example: 
import { cn } from '@openlane/ui/lib/utils'

const Button = ({ className, variant }) => (
  <button className={cn(
    'px-4 py-2 rounded',
    variant === 'primary' && 'bg-blue-500',
    className
  )}>
    Click me
  </button>
)

​
Chart Utilities

​
chartColors

Predefined color palette for charts with support for background, stroke, fill, and text utilities. Location: packages/ui/lib/chartUtils.tsx:3 
const chartColors: {
  blue: { bg: string; stroke: string; fill: string; text: string }
  saffron: { bg: string; stroke: string; fill: string; text: string }
  jade: { bg: string; stroke: string; fill: string; text: string }
  pink: { bg: string; stroke: string; fill: string; text: string }
  purple: { bg: string; stroke: string; fill: string; text: string }
  red: { bg: string; stroke: string; fill: string; text: string }
  grey: { bg: string; stroke: string; fill: string; text: string }
}
Available Colors:
  • blue - Primary blue color
  • saffron - Yellow/saffron color
  • jade - Green/jade color
  • pink - Pink color
  • purple - Purple color
  • red - Red color
  • grey - Gray color

​
constructCategoryColors

Maps categories to chart colors in a round-robin fashion. Location: packages/ui/lib/chartUtils.tsx:56 
function constructCategoryColors(
  categories: string[],
  colors: AvailableChartColorsKeys[]
): Map<string, AvailableChartColorsKeys>
Parameters:
  • categories - Array of category names
  • colors - Array of color keys to use
Returns: Map of category names to color keys Example: 
import { constructCategoryColors, AvailableChartColors } from '@openlane/ui/lib/chartUtils'

const categories = ['Revenue', 'Expenses', 'Profit']
const colorMap = constructCategoryColors(categories, AvailableChartColors)

// colorMap.get('Revenue') => 'blue'
// colorMap.get('Expenses') => 'saffron'

​
getColorClassName

Retrieves the Tailwind class name for a specific color and utility type. Location: packages/ui/lib/chartUtils.tsx:64 
function getColorClassName(
  color: AvailableChartColorsKeys,
  type: ColorUtility
): string
Parameters:
  • color - The color key (e.g., ‘blue’, ‘saffron’)
  • type - The utility type: ‘bg’ | ‘stroke’ | ‘fill’ | ‘text’
Returns: Tailwind class name string Example: 
import { getColorClassName } from '@openlane/ui/lib/chartUtils'

const bgClass = getColorClassName('blue', 'bg')
// Returns: 'bg-blue-400'

const strokeClass = getColorClassName('jade', 'stroke')
// Returns: 'stroke-jade-500'

​
getYAxisDomain

Calculates the Y-axis domain for charts with support for auto-scaling. Location: packages/ui/lib/chartUtils.tsx:74 
function getYAxisDomain(
  autoMinValue: boolean,
  minValue: number | undefined,
  maxValue: number | undefined
): [number | 'auto', number | 'auto']
Parameters:
  • autoMinValue - Whether to auto-calculate minimum value
  • minValue - Optional explicit minimum value
  • maxValue - Optional explicit maximum value
Returns: Tuple of [min, max] domain values Example: 
import { getYAxisDomain } from '@openlane/ui/lib/chartUtils'

// Auto-scale both axes
const domain = getYAxisDomain(true, undefined, undefined)
// Returns: ['auto', 'auto']

// Fixed minimum, auto maximum
const domain2 = getYAxisDomain(false, 0, undefined)
// Returns: [0, 'auto']

​
hasOnlyOneValueForKey

Checks if all objects in an array have the same value for a specific key. Location: packages/ui/lib/chartUtils.tsx:80 
function hasOnlyOneValueForKey(array: any[], keyToCheck: string): boolean
Parameters:
  • array - Array of objects to check
  • keyToCheck - The key to compare across objects
Returns: true if all objects have the same value for the key Example: 
import { hasOnlyOneValueForKey } from '@openlane/ui/lib/chartUtils'

const data = [
  { category: 'A', value: 10 },
  { category: 'A', value: 20 },
]

hasOnlyOneValueForKey(data, 'category') // true
hasOnlyOneValueForKey(data, 'value') // false

​
Error Handling Utilities

​
getErrorMessage

Extracts user-friendly error messages from various error types. Location: packages/ui/hooks/use-upload-file.ts:95 
function getErrorMessage(err: unknown): string
Parameters:
  • err - Error of any type (ZodError, Error, or unknown)
Returns: Formatted error message string Example: 
import { getErrorMessage } from '@openlane/ui/hooks/use-upload-file'

try {
  // some operation
} catch (error) {
  const message = getErrorMessage(error)
  console.error(message)
}

​
showErrorToast

Displays an error message in a toast notification. Location: packages/ui/hooks/use-upload-file.ts:111 
function showErrorToast(err: unknown): string | number
Parameters:
  • err - Error of any type
Returns: Toast ID for dismissal Example: 
import { showErrorToast } from '@openlane/ui/hooks/use-upload-file'

try {
  await uploadFile(file)
} catch (error) {
  showErrorToast(error)
}

​
Stream Processing Utilities

​
markdownJoinerTransform

Transform stream for processing markdown chunks in AI-generated content. Location: packages/ui/lib/markdown-joiner-transform.ts:9 
function markdownJoinerTransform<TOOLS extends ToolSet>(): () => TransformStream
Returns: Transform stream factory function Example: 
import { markdownJoinerTransform } from '@openlane/ui/lib/markdown-joiner-transform'

const stream = aiResponse
  .pipeThrough(markdownJoinerTransform()())
  .pipeThrough(textDecoder())

​
MarkdownJoiner

Class for buffering and joining markdown syntax elements. Location: packages/ui/lib/markdown-joiner-transform.ts:72 
class MarkdownJoiner {
  delayInMs: number
  processText(text: string): string
  flush(): string
}
Methods:
  • processText(text) - Process text chunk and return complete markdown elements
  • flush() - Flush remaining buffer contents
Example: 
import { MarkdownJoiner } from '@openlane/ui/lib/markdown-joiner-transform'

const joiner = new MarkdownJoiner()
const output = joiner.processText('**bold')
const moreOutput = joiner.processText(' text**')
// Returns: '**bold text**'

Build docs developers (and LLMs) love

Get started for freeTalk to us