Skip to main content

​
Core Package Overview

The @workspace/core package provides shared core functionality across all apps and packages in the FE Monorepo. It is designed to be isomorphic, meaning it can be used in both browser and server environments.

​
Installation

The core package is available as a workspace dependency: 
{
  "dependencies": {
    "@workspace/core": "workspace:*"
  }
}

​
Package Information

  • Version: 1.1.0
  • Type: ES Module
  • License: MIT

​
Peer Dependencies

The core package requires the following peer dependencies:
  • ky: ^1.14.3 - Modern HTTP client
  • radashi: ^12.7.1 - Utility library
  • react: >=19.0.0 - React library
  • type-fest: ^5.4.4 - TypeScript type utilities
  • zod: ^4.3.6 - Schema validation

​
Package Structure

The core package is organized into several modules, each accessible through path exports:

​
APIs

import { authRepositories } from '@workspace/core/apis/auth'
import { cdnRepositories } from '@workspace/core/apis/cdn'
API clients for authentication, CDN access, and core services. Learn more about API clients →

​
Hooks

import { useLocalStorageState } from '@workspace/core/hooks/use-local-storage-state'
import { useMediaQuery } from '@workspace/core/hooks/use-media-query'
Custom React hooks for state management, side effects, and browser APIs. Learn more about hooks →

​
Utils

import { clamp, toCamelCase } from '@workspace/core/utils/core'
import { logger } from '@workspace/core/utils/logger'
Utility functions for common operations like formatting, validation, and logging. Learn more about utilities →

​
Constants

import { API_ENDPOINTS } from '@workspace/core/constants/api'
Shared constants used across the monorepo.

​
Types

import type { ApiResponse } from '@workspace/core/types/api'
Shared TypeScript type definitions.

​
Services

import { Http } from '@workspace/core/services/http'
Core service implementations for HTTP, storage, and more.

​
Exports Configuration

The package uses path-based exports for better tree-shaking and explicit imports: 
{
  "exports": {
    "./apis/*": "./src/apis/*.ts",
    "./hooks/*": "./src/hooks/*.ts",
    "./utils/*": "./src/utils/*.ts",
    "./types/*": "./src/types/*.ts",
    "./constants/*": "./src/constants/*.ts",
    "./services/*": "./src/services/*.ts",
    "./libs/*": "./src/libs/*.ts",
    "./assets/*": "./src/assets/*"
  }
}

​
Basic Usage

​
Using API Clients

import { Http } from '@workspace/core/services/http'
import { authRepositories } from '@workspace/core/apis/better-auth'

// Create HTTP client
const http = new Http({ baseUrl: process.env.API_BASE_URL })

// Initialize auth repositories
const auth = authRepositories(http)

// Sign in with email
const result = await auth.signInEmail({
  json: {
    email: '[email protected]',
    password: 'password123',
  },
})

​
Using Hooks

import { useLocalStorageState } from '@workspace/core/hooks/use-local-storage-state'
import { useMediaQuery } from '@workspace/core/hooks/use-media-query'

function MyComponent() {
  // Persist state in localStorage
  const [user, setUser] = useLocalStorageState('user', {
    defaultValue: null,
  })

  // Responsive design with media queries
  const isMobile = useMediaQuery('(max-width: 768px)')

  return (
    <div>
      {isMobile ? 'Mobile View' : 'Desktop View'}
    </div>
  )
}

​
Using Utilities

import { clamp, toCamelCase, objectToFormData } from '@workspace/core/utils/core'
import { logger } from '@workspace/core/utils/logger'

// Clamp a value
const value = clamp({ value: 150, min: 0, max: 100 }) // 100

// Convert object keys to camelCase
const data = toCamelCase({ user_name: 'John', user_age: 30 })
// { userName: 'John', userAge: 30 }

// Convert object to FormData
const formData = objectToFormData({
  name: 'John',
  file: new File(['content'], 'file.txt'),
})

// Logging
logger.info('User logged in', { userId: 123 })
logger.error('Failed to fetch data', error)

​
Next Steps

API Clients

Explore authentication, CDN, and core API clients

Hooks

Discover custom React hooks for common use cases

Utilities

Learn about utility functions for data manipulation

Build docs developers (and LLMs) love

Get started for freeTalk to us