Packages - Meelio

Meelio’s monorepo uses workspace packages to share code between the web app and browser extension. This architecture promotes code reuse, consistency, and maintainability.

Package Overview

@repo/shared

Core business logic, stores, hooks, and components

@repo/ui

shadcn/ui component library

@repo/logger

Logging utility for debugging

Configuration Packages

ESLint, TypeScript, Tailwind, Prettier, and Jest configs

@repo/shared

The main package containing all shared business logic, state management, and React components used across both applications.

Package Configuration

{
  "name": "@repo/shared",
  "version": "0.0.0",
  "private": true,
  "main": "./src/index.ts",
  "types": "./src/index.ts"
}

Location: packages/shared/package.json

Exports

The package uses path-based exports for granular imports:

import { /* exports */ } from '@repo/shared'

Export Paths

API (./api/*)

Path: ./src/api/**/*.tsAPI clients and service integrations for backend communication.

Components (./components/*)

Path: ./src/components/**/*.{tsx,ts}Shared React components used across both apps. These are higher-level components built on top of @repo/ui.

Context (./context/*)

Path: ./src/context/**/*.{ts,tsx}React context providers for global state management.

Data (./data/*)

Path: ./src/data/**/*.{ts,json}Static data, constants, and configuration objects.

Hooks (./hooks/*)

Path: ./src/hooks/**/*.{ts,tsx}Custom React hooks for shared functionality:

State management hooks
Data fetching hooks
UI interaction hooks
Browser API hooks (for extension)

i18n (./i18n/*)

Path: ./src/i18n/**/*.{ts,tsx}Internationalization configuration and translation utilities.

Library (./lib/*)

Path: ./src/lib/**/*.tsCore utilities and helper functions:

Database clients (Dexie)
Date utilities
String manipulation
Type guards

Providers (./providers/*)

Path: ./src/providers/**/*.{ts,tsx}React providers wrapping context, queries, and global state.

Stores (./stores/*)

Path: ./src/stores/**/*.{ts,tsx}Zustand stores for state management:

User store
Settings store
UI state store
App-specific stores

Types (./types/*)

Path: ./src/types/**/*.{ts,tsx}TypeScript type definitions and interfaces shared across the monorepo.

Utils (./utils/*)

Path: ./src/utils/**/*.{ts,tsx}General utility functions and helpers.

Dependencies

State & Data

Zustand (v5) - State management
@tanstack/react-query (v5.67.3) - Server state management
Dexie (v3.2.4) - IndexedDB wrapper
Axios (v1.5.0) - HTTP client

Forms & Validation

react-hook-form (v7.47.0) - Form handling
@hookform/resolvers (v3.3.2) - Validation resolvers
Zod (v3.24.0) - Schema validation

UI & Animation

Framer Motion (v11.13.4) - Animation library
GSAP (v3.12.2) - Advanced animations
Lucide React (v0.468.0) - Icons
Recharts (v2.13.0) - Charts
Sonner (v1.7.1) - Toast notifications

Utilities

date-fns (v4.1.0) - Date manipulation
date-fns-tz (v3.2.0) - Timezone support
i18next (v24.0.5) - Internationalization
react-i18next (v15.1.4) - React i18n bindings
ical.js (v2.2.1) - Calendar utilities
uuid (v9.0.0) - UUID generation

Usage Example

import { useUserStore } from '@repo/shared/stores/userStore'
import { formatDate } from '@repo/shared/utils/date'
import { Button } from '@repo/shared/components/Button'
import { useAuth } from '@repo/shared/hooks/useAuth'

function MyComponent() {
  const { user } = useUserStore()
  const { login } = useAuth()
  
  return (
    <Button onClick={login}>
      {user?.name} - {formatDate(new Date())}
    </Button>
  )
}

@repo/ui

A comprehensive UI component library built with shadcn/ui and Radix UI, providing accessible and customizable components.

Package Configuration

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true
}

Location: packages/ui/package.json

Components

Built on Radix UI primitives with Tailwind CSS styling:

Alert Dialog

Modal dialogs for important actions

Badge

Status indicators and labels

Button

Interactive button component

Card

Container for content sections

Checkbox

Form checkbox input

Dialog

Modal dialog overlay

Dropdown Menu

Contextual menu component

Form

Form field components

Input

Text input field

Label

Form labels

Popover

Floating content overlay

Progress

Progress indicator

Radio Group

Radio button groups

Select

Dropdown select input

Separator

Visual divider

Sheet

Side panel overlay

Sidebar

Navigation sidebar

Slider

Range slider input

Switch

Toggle switch

Tooltip

Hover tooltips

Exports

import { Button } from '@repo/ui/components/button'
import { Dialog } from '@repo/ui/components/dialog'
import { Input } from '@repo/ui/components/input'

Dependencies

Radix UI Components

@radix-ui/react-alert-dialog (v1.0.4)
@radix-ui/react-checkbox (v1.1.2)
@radix-ui/react-dialog (v1.0.0)
@radix-ui/react-dropdown-menu (v2.0.5)
@radix-ui/react-label (v2.0.2)
@radix-ui/react-popover (v1.1.2)
@radix-ui/react-progress (v1.1.7)
@radix-ui/react-radio-group (v1.1.3)
@radix-ui/react-select (v1.2.2)
@radix-ui/react-separator (v1.1.0)
@radix-ui/react-slider (v1.1.2)
@radix-ui/react-switch (v1.0.3)
@radix-ui/react-tooltip (v1.1.3)
And more…

All components are built with class-variance-authority for variant management and Tailwind CSS for styling.

@repo/logger

A simple logging utility for consistent logging across the monorepo.

Package Configuration

{
  "name": "@repo/logger",
  "version": "0.0.0",
  "private": true,
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}

Location: packages/logger/package.json

API

import { logger } from '@repo/logger'

logger.log('Information message')
logger.info('Info message')
logger.warn('Warning message')
logger.error('Error message')

Implementation

src/index.ts

const log = (str: any) => {
  console.log("logger: " + str);
};

const info = (str: any) => {
  console.info("logger: " + str);
};

const warn = (str: any) => {
  console.warn("logger: " + str);
};

const error = (str: any) => {
  console.error("logger: " + str);
};

export const logger = {
  log,
  info,
  warn,
  error,
};

The logger prefixes all messages with "logger: " for easy identification in console output.

Development

npm run build

Configuration Packages

Shared configuration packages ensure consistency across all apps and packages.

@repo/eslint-config

ESLint configuration with TypeScript support.

Configuration Files

library.js - Library-specific linting rules
next.js - Next.js configuration (future-ready)
react-internal.js - React component rules
server.js - Server-side code rules

Location: packages/eslint-config/

Dependencies:

@vercel/style-guide (v5.2.0)
eslint-config-turbo (v2.0.0)
eslint-config-prettier (v9.1.0)
@typescript-eslint/parser & @typescript-eslint/eslint-plugin (v7.1.0)

Usage:

{
  "extends": ["@repo/eslint-config/react-internal.js"]
}

@repo/typescript-config

Shared TypeScript configurations for consistent type checking.

Package Details

{
  "name": "@repo/typescript-config",
  "version": "0.0.0",
  "private": true,
  "license": "MIT"
}

Location: packages/typescript-config/package.json

Contains base tsconfig.json files that apps and packages extend. Usage:

tsconfig.json

{
  "extends": "@repo/typescript-config/base.json",
  "compilerOptions": {
    // App-specific overrides
  }
}

@repo/tailwind-config

Shared Tailwind CSS configuration.

Package Details

{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "main": "index.ts",
  "license": "MIT"
}

Location: packages/tailwind-config/package.json

Includes:

index.ts - Base Tailwind configuration
postcss.config.js - PostCSS setup

Dependencies:

tailwindcss (v3.3.3)
tailwindcss-animate (v1.0.7)
autoprefixer (v10.4.15)
postcss (v8.4.29)

Usage:

tailwind.config.ts

import baseConfig from '@repo/tailwind-config'

export default {
  ...baseConfig,
  content: ['./src/**/*.{ts,tsx}'],
}

@repo/prettier-config

Prettier configuration for consistent code formatting.

Package Details

{
  "name": "@repo/prettier-config",
  "version": "0.0.0",
  "main": "index.js",
  "license": "MIT"
}

Location: packages/prettier-config/package.json

Plugins:

@ianvs/prettier-plugin-sort-imports (v4.1.0) - Auto-sort imports
prettier-plugin-tailwindcss (v0.4.1) - Sort Tailwind classes

Usage:

package.json

{
  "prettier": "@repo/prettier-config"
}

@repo/jest-presets

Jest testing presets for consistent test configuration.

Package Details

{
  "name": "@repo/jest-presets",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "files": ["node/jest-preset.js"]
}

Location: packages/jest-presets/package.json

Dependencies:

ts-jest (v29.1.1) - TypeScript support for Jest

Usage:

package.json

{
  "jest": {
    "preset": "@repo/jest-presets/node"
  }
}

Package Dependencies

File Structure

packages/
├── shared/
│   ├── src/
│   │   ├── api/
│   │   ├── components/
│   │   ├── context/
│   │   ├── data/
│   │   ├── hooks/
│   │   ├── i18n/
│   │   ├── lib/
│   │   ├── providers/
│   │   ├── stores/
│   │   ├── types/
│   │   ├── utils/
│   │   └── index.tsx
│   └── package.json
├── ui/
│   ├── src/
│   │   ├── components/ui/
│   │   ├── hooks/
│   │   ├── lib/
│   │   └── styles/
│   └── package.json
├── logger/
│   ├── src/index.ts
│   └── package.json
├── eslint-config/
│   ├── library.js
│   ├── react-internal.js
│   └── package.json
├── typescript-config/
│   ├── base.json
│   └── package.json
├── tailwind-config/
│   ├── index.ts
│   ├── postcss.config.js
│   └── package.json
├── prettier-config/
│   ├── index.js
│   └── package.json
└── jest-presets/
    ├── node/jest-preset.js
    └── package.json

Getting Started

Monorepo Structure

Components

Contributing

​Package Overview

@repo/shared

@repo/ui

@repo/logger

Configuration Packages

​@repo/shared

​Exports

​Export Paths

​Dependencies

​Usage Example

​@repo/ui

​Components

Alert Dialog

Badge

Button

Card

Checkbox

Dialog

Dropdown Menu

Form

Input

Label

Popover

Progress

Radio Group

Select

Separator

Sheet

Sidebar

Slider

Switch

Tooltip

​Exports

​Dependencies

​@repo/logger

​API

​Implementation

​Development

​Configuration Packages

​@repo/eslint-config

​@repo/typescript-config

​@repo/tailwind-config

​@repo/prettier-config

​@repo/jest-presets

​Package Dependencies

​File Structure

​Next Steps

Apps Overview

Contributing

Build docs developers (and LLMs) love

Package Overview

@repo/shared

Exports

Export Paths

Dependencies

Usage Example

@repo/ui

Components

Exports

Dependencies

@repo/logger

API

Implementation

Development

Configuration Packages

@repo/eslint-config

@repo/typescript-config

@repo/tailwind-config

@repo/prettier-config

@repo/jest-presets

Package Dependencies

File Structure

Next Steps