npm package: @moneymap/ui
Description: > **⚠️ Tailwind CSS v3 Required:** This library requires Tailwind CSS to be configured in your project. See [Setup](#setup-required) below.
Latest version: 0.0.7

# @moneymap/ui

> **⚠️ Tailwind CSS v3 Required:** This library requires Tailwind CSS to be configured in your project. See [Setup](#setup-required) below.

## Setup Required

### Tailwind CSS v3 Setup

1. **Install Tailwind CSS:**

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

2. **Configure Tailwind to scan the library** (`tailwind.config.js`):

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@moneymap/ui/**/*.{js,jsx,ts,tsx}', // Add this
  ],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
  plugins: [],
};
```

3. **Add CSS variables to your global CSS** (e.g., `globals.css` or `index.css`):

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}
```

---

# Maintainers

The sections below are for developers who need to build and publish the `@moneymap/ui` library to npm registry.

## Prerequisites

- Node.js and pnpm installed
- npm account with access to publish to `@moneymap` scope
- Access to the MoneyMap monorepo

## Project Structure

```
libs/ui/
├── src/                   # Source components
├── dist/                  # Build output (generated)
├── package.json           # Package configuration
├── rollup.config.cjs      # Build configuration
└── README.md              # This file
```

## Publishing Workflow

### 1. Clean and Build

Reset Nx cache and build the library:

```bash
# From workspace root
nx reset
nx build ui
```

This generates the build output in `libs/ui/dist/`:

- `dist/index.esm.js` - Compiled JavaScript bundle
- `dist/index.d.ts` - TypeScript declarations
- `dist/src/` - Source files for `@moneymap/source` export

### 2. Login to npm

Ensure you're logged into npm with an account that has publish access:

```bash
npm login
```

Verify your login:

```bash
npm whoami
```

### 3. Test Package (Dry Run)

Preview what will be published without actually publishing:

```bash
cd libs/ui
npm pack --dry-run
```

**Expected output should include:**

- ✅ `dist/index.esm.js`
- ✅ `dist/index.d.ts`
- ✅ `dist/src/` (source files)
- ✅ `package.json`
- ✅ `README.md`
- ❌ No config files (`.babelrc`, `rollup.config.cjs`, `tsconfig.*`)

### 4. Version Bump

**Important:** You must increment the version before publishing.

#### For Prerelease (Alpha/Beta)

```bash
# From libs/ui/
npm version prerelease --preid=alpha
# Example: 0.0.1-alpha.0 → 0.0.1-alpha.1
# Example: 0.0.1-beta.0 → 0.0.1-beta.1
```

#### For Patch Release

```bash
npm version patch
# Example: 0.0.1 → 0.0.2
```

#### For Minor Release

```bash
npm version minor
# Example: 0.0.1 → 0.1.0
```

#### For Major Release

```bash
npm version major
# Example: 0.0.1 → 1.0.0
```

#### Manual Version Update

Alternatively, edit `libs/ui/package.json` directly:

```json
{
  "version": "0.0.1"
}
```

### 5. Publish to npm

#### Publish Prerelease (Alpha/Beta)

```bash
# From libs/ui/
npm publish --tag alpha --access public
```

This publishes with the `alpha` tag, so it won't become the default `latest` version.

**Installing prerelease:**

```bash
npm install @moneymap/ui@alpha
# or specific version
npm install @moneymap/ui@0.0.1-alpha.1
```

#### Publish Stable Release

```bash
# From libs/ui/
npm publish --access public
```

This publishes with the `latest` tag (default).

**Installing stable:**

```bash
npm install @moneymap/ui
```

### 6. Verify Publication

Check the published package:

```bash
npm view @moneymap/ui

# Check all versions
npm view @moneymap/ui versions

# Check dist-tags
npm view @moneymap/ui dist-tags
```

## Quick Reference Commands

```bash
# Full deployment workflow (stable release)
nx reset
nx build ui
cd libs/ui
npm pack --dry-run              # Verify package contents
npm version patch               # Bump version
npm publish --access public     # Publish

# Full deployment workflow (prerelease)
nx reset
nx build ui
cd libs/ui
npm pack --dry-run
npm version prerelease --preid=alpha
npm publish --tag alpha --access public
```

## Troubleshooting

### Cannot publish over previously published version

You're trying to publish a version that already exists. Bump the version number:

```bash
npm version patch
```

### Package includes unwanted files

Check the `files` field in `libs/ui/package.json`:

```json
{
  "files": [
    "dist",
    "src/**/*.ts",
    "src/**/*.tsx",
    "!src/**/*.test.ts",
    "!src/**/*.spec.ts"
  ]
}
```

Run `npm pack --dry-run` to preview before publishing.

## Package Configuration

### package.json

The `libs/ui/package.json` controls what gets published:

```json
{
  "name": "@moneymap/ui",
  "version": "0.0.1",
  "main": "./dist/index.esm.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "@moneymap/source": "./src/index.ts",
      "types": "./dist/index.d.ts",
      "import": "./dist/index.esm.js"
    }
  },
  "files": [
    "dist",
    "src/**/*.ts",
    "src/**/*.tsx",
    "!src/**/*.test.ts",
    "!src/**/*.spec.ts"
  ]
}
```

### rollup.config.cjs

The build configuration uses Rollup with SWC for fast compilation:

```javascript
module.exports = withNx({
  main: './src/index.ts',
  outputPath: './dist',
  compiler: 'swc',
  format: ['esm'],
  external: ['react', 'react-dom', 'react/jsx-runtime'],
  assets: [
    { input: '.', output: '.', glob: 'README.md' },
    {
      input: './src',
      output: './src',
      glob: '**/*.ts',
      ignore: ['**/*.spec.ts', '**/*.test.ts'],
    },
    {
      input: './src',
      output: './src',
      glob: '**/*.tsx',
      ignore: ['**/*.spec.tsx', '**/*.test.tsx'],
    },
  ],
});
```

## Version Strategy

- **Prerelease (alpha/beta):** For testing new features
  - Format: `0.0.1-alpha.0`, `0.0.1-beta.1`
  - Publish with: `npm publish --tag alpha`

- **Patch (0.0.x):** Bug fixes and minor changes
  - Command: `npm version patch`

- **Minor (0.x.0):** New features, backward compatible
  - Command: `npm version minor`

- **Major (x.0.0):** Breaking changes
  - Command: `npm version major`

## Support

For questions or issues, contact the MoneyMap development team.