Skip to main content

​
Packages Overview

The MOOD MNKY monorepo includes several shared packages that enable code reuse, maintainability, and consistency across applications. These packages provide common functionality, UI components, and configuration that all applications can leverage.
All packages follow consistent structure and are published as workspace dependencies. See Monorepo Structure for details on package organization.

​
Package Architecture

Shared packages are organized to maximize reuse while maintaining clear boundaries:

UI Components

ShadCN-based component library for consistent design

Supabase Client

Wrapped Supabase client with SSL support and type safety

ESLint Config

Shared linting configurations for code consistency

TypeScript Config

Shared TypeScript configurations and compiler options

​
Package Comparison

PackagePurposeUsed ByKey Features
@repo/uiUI ComponentsAll appsShadCN components, theming, accessibility
@repo/supabase-clientDatabase ClientAll appsSSL support, type safety, singleton pattern
@repo/eslint-configLintingAll appsConsistent code style, shared rules
@repo/typescript-configType SafetyAll appsShared TS config, strict mode

​
Using Shared Packages

​
Installation

Packages are automatically available as workspace dependencies: 
// In any app's package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/supabase-client": "workspace:*"
  }
}

​
Importing Packages

// Import UI components
import { Button, Card } from '@repo/ui';

// Import Supabase client
import { createSupabaseClient } from '@repo/supabase-client';

// Import shared types
import type { User } from '@repo/types';

​
Package Development

  1. Create Package: Add new package to packages/ directory
  2. Configure: Set up package.json with workspace reference
  3. Build: Package builds automatically with monorepo build
  4. Use: Import in applications as workspace dependency

​
Package Structure

All packages follow a consistent structure: 
packages/[package-name]/
├── src/
│   └── index.ts            # Main entry point
├── dist/                   # Built output (generated)
├── tests/                  # Tests
├── package.json            # Package metadata
└── tsconfig.json           # TypeScript configuration

​
Creating New Packages

​
When to Create a Package

Create a new package when:
  • Code is used by multiple applications
  • Functionality is self-contained and reusable
  • You want to enforce consistent APIs
  • Code represents a distinct domain or capability

​
Package Creation Steps

  1. Create Directory: 
    mkdir -p packages/new-package/src
  2. Initialize Package: 
    cd packages/new-package
pnpm init
  3. Configure Workspace: 
    {
  "name": "@repo/new-package",
  "version": "0.1.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}
  4. Add to Workspace: Ensure pnpm-workspace.yaml includes packages/*
  5. Build Configuration: Set up TypeScript and build scripts

​
Package Best Practices

​
API Design

  • Clear Exports: Export only what’s needed
  • Type Safety: Provide TypeScript types
  • Documentation: Document public APIs
  • Versioning: Follow SemVer for breaking changes

​
Testing

  • Unit Tests: Test package functionality in isolation
  • Integration Tests: Test package usage in apps
  • Type Tests: Ensure TypeScript types are correct

​
Maintenance

  • Keep Updated: Update dependencies regularly
  • Document Changes: Maintain changelog
  • Breaking Changes: Communicate breaking changes clearly

​
Package Usage by Application

PackageUsed ByPurpose
@repo/uiAll appsConsistent UI components
@repo/supabase-clientAll appsDatabase access and auth
@repo/eslint-configAll appsCode quality and consistency
@repo/typescript-configAll appsType safety and compilation

​
Package Dependencies

@repo/ui
  └── Uses: Tailwind CSS, ShadCN UI

@repo/supabase-client
  └── Uses: @supabase/supabase-js

@repo/eslint-config
  └── Uses: ESLint, TypeScript ESLint

@repo/typescript-config
  └── Uses: TypeScript compiler