Add shared utils

We're formatting dates with toLocaleDateString() in apps/snippet-manager. Utility functions like date formatting, text slugification, and string truncation are perfect candidates for shared packages - they're pure functions with no UI dependencies.

You'll create packages/utils with common utilities that work across all apps. This demonstrates that monorepos aren't just for sharing components - you can share any code.

Outcome

Create packages/utils with utility functions and use formatDate in the snippet manager.

Fast track

Create packages/utils package structure
Add utility functions (formatDate, slugify, truncate, validateEmail)
Export functions from package
Use formatDate in snippet manager app

Hands-on exercise 4.2

Create shared utilities package with common helper functions.

Requirements:

Create packages/utils directory****
Add package.json with TypeScript config
Create src/index.ts with utility functions
Export formatDate, slugify, truncate, validateEmail
Add utils dependency to apps/snippet-manager
Replace date formatting with formatDate utility
Test in both dev and build

Implementation hints:

Use Intl.DateTimeFormat for formatDate
slugify converts text to URL-safe format
truncate limits string length with ellipsis
validateEmail uses regex pattern
Export all functions from src/index.ts

Create utils package

Create the directory structure:

mkdir -p packages/utils/src

Create packages/utils/package.json. Not in the src directory but in utils:

packages/utils/package.json

{
  "name": "@geniusgarage/utils",
  "version": "1.0.0",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "exports": {
    ".": "./src/index.ts"
  },
  "scripts": {
    "lint": "eslint ."
  },
  "devDependencies": {
    "@geniusgarage/typescript-config": "workspace:*",
    "@geniusgarage/eslint-config": "workspace:*",
    "eslint": "^9",
    "typescript": "^5"
  }
}

Create packages/utils/tsconfig.json:

packages/utils/tsconfig.json

{
  "extends": "@geniusgarage/typescript-config/base.json",
  "compilerOptions": {
    "outDir": "./dist"
  },
  "include": ["src"]
}

Notice it extends the shared TypeScript config from packages/typescript-config!

Create utility functions

Create packages/utils/src/index.ts:

packages/utils/src/index.ts

// TODO: Export formatDate function that:
//   - Takes a Date parameter
//   - Returns formatted string "Jan 15, 2024"
//   - Uses Intl.DateTimeFormat with en-US, month: 'short', day: 'numeric', year: 'numeric'
 
// TODO: Export slugify function that:
//   - Takes a string parameter
//   - Returns URL-safe slug (lowercase, replace spaces with hyphens, remove special chars)
//   - Example: "Hello World!" → "hello-world"
 
// TODO: Export truncate function that:
//   - Takes text string and maxLength number
//   - Returns truncated string with "..." if longer than maxLength
//   - Example: truncate("Hello World", 5) → "Hello..."
 
// TODO: Export validateEmail function that:
//   - Takes email string
//   - Returns boolean (true if valid email format)
//   - Uses regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/

Your task: Implement all four utility functions.

Hints:

formatDate: new Intl.DateTimeFormat('en-US', { ... }).format(date)
slugify: Chain .toLowerCase(), .replace() calls
truncate: Check text.length <= maxLength, use text.slice(0, maxLength) + '...'
validateEmail: return regex.test(email)

Solution: if you didn't come here to write functions

packages/utils/src/index.ts

export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  }).format(date)
}
 
export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/\s+/g, '-')
    .replace(/-+/g, '-')
    .trim()
}
 
export function truncate(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text
  return text.slice(0, maxLength) + '...'
}
 
export function validateEmail(email: string): boolean {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return regex.test(email)
}

Add utils to snippet manager

Install the utils package:

pnpm add @geniusgarage/utils --filter @geniusgarage/snippet-manager --workspace
pnpm install