npm package: @finsweet/components-ui
Description: Shared UI components library built with Svelte
Author: Finsweet
Latest version: 2.0.12

# @finsweet/components-ui

A shared UI components library built with Svelte, TypeScript, and modern tooling.

## 📦 Installation

```bash
npm install @finsweet/components-ui
```

## 🚀 Deployment Instructions

### Prerequisites

1. **Node.js** (version 16 or higher)
2. **npm account** with publishing permissions
3. **Git** for version control

### Step-by-Step Deployment Process

#### 1. Setup and Authentication

First, ensure you're logged into npm:

```bash
npm whoami
```

If not logged in:

```bash
npm login
```

#### 2. Project Structure Requirements

**Important**: Components and utilities must be in `src/lib/` for `svelte-package` to work correctly.

#### 3. Configuration Files

Ensure your `svelte.config.js` is properly configured:

```javascript
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
};
```

**Note**: Avoid using the deprecated `package` configuration in `svelte.config.js`.

#### 4. Build and Package

Install dependencies:

```bash
npm install
```

Build the project:

```bash
npm run build
```

Package for distribution:

```bash
npm run package
```

This creates the `dist/` directory with:

- Compiled Svelte components
- TypeScript declarations (`.d.ts` files)
- JavaScript modules
- Proper export structure

#### 5. Version Management

Update the version in `package.json` before publishing:

```bash
# Patch version (1.0.0 → 1.0.1)
npm version patch

# Minor version (1.0.0 → 1.1.0)
npm version minor

# Major version (1.0.0 → 2.0.0)
npm version major
```

#### 6. Publish to npm

Publish the package:

```bash
npm publish --access public
```

The `prepublishOnly` script will automatically run `npm run package` before publishing.

### 🔧 Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run package` - Create distribution package
- `npm run preview` - Preview built application
- `npm run check` - Run Svelte type checking

### 📋 Package Contents

The published package includes:

- **Components**: Reusable Svelte components
- **Utils**: Utility functions and helpers
- **TypeScript definitions**: Full type support
- **Modern ES modules**: Tree-shakeable imports

### 🛠 Development Dependencies

- `@sveltejs/package` - Svelte packaging tool
- `@sveltejs/vite-plugin-svelte` - Vite integration
- `typescript` - Type checking
- `vite` - Build tool
- Additional UI dependencies: `@floating-ui/dom`, `clipboard`, `simplebar`

### 📝 Usage Example

```javascript
// Import components
import { Button } from '@finsweet/components-ui';

// Import utilities
import { hello } from '@finsweet/components-ui/utils';
```

### 🔄 Continuous Deployment

For automated deployments, consider:

1. **GitHub Actions** for CI/CD
2. **Semantic versioning** with conventional commits
3. **Automated testing** before publishing
4. **Changeset management** for version tracking

### 📚 Troubleshooting

**Common Issues:**

1. **"src/lib does not exist"**: Ensure components are in `src/lib/` directory
2. **"config.package is no longer supported"**: Remove package config from `svelte.config.js`
3. **Permission denied**: Verify npm login and package name availability
4. **Type errors**: Run `npm run check` to validate TypeScript

### 🔗 Links

- [npm package](https://www.npmjs.com/package/@finsweet/components-ui)
- [Repository](https://github.com/@finsweet/components-ui.git)

---

**Current Version**: 1.0.0  
**Package Size**: ~1.7 kB  
**License**: MIT