@yuno-payments/dashboard-utils

Utility functions for Yuno dashboard applications. This package provides pure, framework-agnostic utilities for common operations like date manipulation, currency formatting, validations, and more.

📦 Installation

npm install @yuno-payments/dashboard-utils

🚀 Features

• ✅ Tree-shakeable - Import only what you need
• ✅ TypeScript - Full type definitions included
• ✅ Pure Functions - Framework-agnostic utilities
• ✅ React Adapters - Optional React hooks (requires React as peer dependency)
• ✅ Extensively tested - High test coverage
• ✅ ESM + CJS - Supports both module systems
• ✅ Fast builds - Powered by tsup and esbuild

📚 Usage

Import everything

import * as utils from '@yuno-payments/dashboard-utils'

Import specific modules (recommended for tree-shaking)

import { formatDate, startOfDay } from '@yuno-payments/dashboard-utils/timezone'
import { formatCurrency } from '@yuno-payments/dashboard-utils/currency'
import { capitalize } from '@yuno-payments/dashboard-utils/text'

Import React adapters (requires React)

import { TimezoneProvider, useTimezone } from '@yuno-payments/dashboard-utils/react'

📖 API Documentation

React Adapters

React adapters using the Provider pattern for easier timezone management in React apps. Requires React as a peer dependency.

TimezoneProvider + useTimezone

Use the standard React Provider pattern to manage timezone across your entire app.

Setup:

import { TimezoneProvider, useTimezone } from '@yuno-payments/dashboard-utils/react'

// 1. Wrap your app with the provider
function App() {
  return (
    <TimezoneProvider timezone="user-stored" locale="en">
      <YourApp />
    </TimezoneProvider>
  )
}

// 2. Use the hook in any component (no parameters needed!)
function MyComponent() {
  const { 
    formatDate, 
    todayStr, 
    timezone,
    setTimezone  // Change timezone globally
  } = useTimezone()

  const formatted = formatDate(new Date(), 'YYYY-MM-DD')
  const today = todayStr('YYYY-MM-DD HH:mm')
  
  return (
    <div>
      <p>Current timezone: {timezone}</p>
      <p>Today: {today}</p>
      <button onClick={() => setTimezone('UTC')}>
        Switch to UTC
      </button>
    </div>
  )
}

Benefits:

• ✅ No prop drilling - Access timezone anywhere in your app
• ✅ Global state - Change timezone once, affects entire app
• ✅ Standard pattern - Familiar Provider/Context approach
• ✅ Automatic binding - No need to pass timezone to each function
• ✅ Memoized functions - Optimized re-renders
• ✅ Type-safe - Full TypeScript support

For more details and examples, see React Adapters README

Timezone

Date and timezone manipulation utilities with support for multiple timezones.

import { 
  formatDate, 
  startOfDay, 
  endOfDay,
  getTimezone,
  getRangesForFilter,
  configureDayjsLocale
} from '@yuno-payments/dashboard-utils/timezone'

// Configure locale for date formatting (call once in your app)
configureDayjsLocale('es')

// Format a date in a specific timezone
const formatted = formatDate(
  new Date(), 
  'America/New_York', 
  'YYYY-MM-DD HH:mm:ss'
)

// Get start and end of day
const dayStart = startOfDay(new Date(), 'America/New_York')
const dayEnd = endOfDay(new Date(), 'America/New_York')

// Get predefined date ranges for filters
const ranges = getRangesForFilter('America/New_York')
// Returns: { TODAY, LAST_3_DAYS, LAST_7_DAYS, LAST_30_DAYS, etc. }

Currency

Currency formatting and utilities.

import { 
  formatCurrency, 
  parseCurrency,
  getCurrencyByCode,
  currencies
} from '@yuno-payments/dashboard-utils/currency'

// Format currency
const formatted = formatCurrency(1234.56, 'USD', 'en-US')
// Output: "$1,234.56"

// Parse currency string
const amount = parseCurrency('$1,234.56')
// Output: 1234.56

// Get currency details by code
const currency = getCurrencyByCode({ countryCode: 'USD' })
// Output: { code: 'USD', name: 'Dollar', symbol: '$' }

// Get all available currencies
const allCurrencies = currencies()

Text

Text manipulation utilities including truncation, capitalization, and avatar initials.

import { 
  capitalize, 
  truncate,
  stringAvatar,
  truncateAtLastSpace
} from '@yuno-payments/dashboard-utils/text'

// Capitalize first letter
const capitalized = capitalize('hello')
// Output: "Hello"

// Truncate with custom separator
const truncated = truncate('1234567890', 8, '...', 3, 4)
// Output: "123...7890"

// Get initials from name
const initials = stringAvatar('John Doe')
// Output: "JD"

// Truncate at length with ellipsis
const text = truncateAtLastSpace('This is a long text', 10)
// Output: "This is a ..."

Date

Date formatting utilities compatible with date-fns.

import { 
  formatDateString,
  defaultDateFormat,
  getDateGMT
} from '@yuno-payments/dashboard-utils/date'

// Normalize date format
const normalized = formatDateString('22/08/2024')
// Output: "2024-08-22"

// Format with timezone support
const formatted = defaultDateFormat(
  '2024-08-22',
  'yyyy-MM-dd HH:mm',
  true,
  { identifier: 'America/New_York' }
)

Validations

Comprehensive validation functions.

import { 
  validateEmail,
  validatePhone,
  validateUrl,
  isEmpty,
  isValidPassword
} from '@yuno-payments/dashboard-utils/validations'

// Email validation
const isValidEmail = validateEmail('[email protected]')
// Output: true

// Phone validation (min 10 digits)
const isValidPhone = validatePhone('+1 (555) 123-4567')
// Output: true

// URL validation
const isValidUrl = validateUrl('https://example.com')
// Output: true

// Empty check
const empty = isEmpty('')
// Output: true

// Password validation (requires 3 of: uppercase, lowercase, number, symbol)
const validPassword = isValidPassword('Pass123!')
// Output: true

Shared

Common utility functions.

import { 
  getAmount,
  debounce,
  throttle,
  deepClone,
  omit,
  pick
} from '@yuno-payments/dashboard-utils/shared'

// Format amount with currency
const amount = getAmount(1234.56, 'USD')
// Output: "$1,234.56 USD"

// Debounce function
const debouncedFn = debounce(() => console.log('Called'), 300)

// Throttle function
const throttledFn = throttle(() => console.log('Called'), 300)

// Deep clone object
const cloned = deepClone({ a: 1, b: { c: 2 } })

// Object utilities
const omitted = omit({ a: 1, b: 2, c: 3 }, ['b'])
// Output: { a: 1, c: 3 }

const picked = pick({ a: 1, b: 2, c: 3 }, ['a', 'c'])
// Output: { a: 1, c: 3 }

Intl

Internationalization utilities.

import { 
  countryNameFromCode,
  localeFromCurrency,
  formatNumber,
  formatPercent
} from '@yuno-payments/dashboard-utils/intl'

// Get country name
const country = countryNameFromCode('US', 'en')
// Output: "United States"

// Get locale from currency
const locale = localeFromCurrency('PEN')
// Output: "es-PE"

// Format numbers
const formatted = formatNumber(1234567.89, 'en-US')
// Output: "1,234,567.89"

// Format percentage
const percent = formatPercent(0.1234, 'en-US', 2)
// Output: "12.34%"

Constants

Shared constants.

import { 
  getLang,
  defaultText,
  LANGUAGES,
  PATH_ASSETS,
  MOBILE_BREAKPOINT,
  TABLET_BREAKPOINT
} from '@yuno-payments/dashboard-utils/constants'

import { countryNames, countries } from '@yuno-payments/dashboard-utils/constants'

// Get current language
const lang = getLang()
// Output: "en" | "es" | "pt" | "fr"

// Get default permission text
const text = defaultText[lang]

// Use breakpoints
const isMobile = window.matchMedia(MOBILE_BREAKPOINT).matches

🔧 Development

Setup

npm install

Run tests

npm test
npm run test:watch
npm run test:coverage

Build

npm run build

Lint

npm run lint
npm run lint:fix

Format

npm run format
npm run format:check

📝 License

UNLICENSED - Internal use only

🤝 Contributing

This is an internal package for Yuno Payments. Please follow the contribution guidelines.