npm package: @g9000/test-lib-2
Description: A tiny Vue 3 component library with Changesets and automated publishing
Latest version: 0.1.0

# Tiny Component Library

A minimal Vue 3 component library with automated versioning and publishing using Changesets.

## Features

- 🎨 Vue 3 + TypeScript components
- 📦 Vite for fast builds
- 🔄 Changesets for version management
- 🚀 Automated publishing via GitHub Actions
- 📝 Full TypeScript support

## Installation

```bash
npm install tiny-component-lib
# or
pnpm add tiny-component-lib
# or
yarn add tiny-component-lib
```

## Usage

### Import all components

```typescript
import { createApp } from "vue";
import TinyComponentLib from "tiny-component-lib";
import "tiny-component-lib/style.css";

const app = createApp(App);
app.use(TinyComponentLib);
app.mount("#app");
```

### Import individual components

```vue
<script setup lang="ts">
import { Button, Card } from "tiny-component-lib";
import "tiny-component-lib/style.css";
</script>

<template>
  <Button variant="primary" @click="handleClick"> Click me </Button>

  <Card variant="elevated">
    <template #header>Card Title</template>
    <p>Card content goes here</p>
    <template #footer>Card Footer</template>
  </Card>
</template>
```

## Components

### Button

```vue
<Button variant="primary" size="medium" @click="handleClick">
  Click me
</Button>
```

**Props:**

- `variant`: `'primary' | 'secondary' | 'danger'` (default: `'primary'`)
- `size`: `'small' | 'medium' | 'large'` (default: `'medium'`)
- `disabled`: `boolean` (default: `false`)

**Events:**

- `click`: Emitted when button is clicked

### Card

```vue
<Card variant="elevated">
  <template #header>Optional Header</template>
  Card content
  <template #footer>Optional Footer</template>
</Card>
```

**Props:**

- `variant`: `'default' | 'bordered' | 'elevated'` (default: `'default'`)

**Slots:**

- `header`: Optional header slot
- `default`: Main content
- `footer`: Optional footer slot

## Development

### Setup

```bash
pnpm install
```

### Dev Server

Run the demo app with hot reload:

```bash
pnpm dev
```

### Build

Build the library:

```bash
pnpm build
```

## Publishing Workflow

This library uses [Changesets](https://github.com/changesets/changesets) for version management and automated publishing.

### Creating a Changeset

When you make changes that should be released:

1. Make your code changes
2. Run `pnpm changeset`
3. Select the type of change:
   - `patch`: Bug fixes (0.0.X)
   - `minor`: New features (0.X.0)
   - `major`: Breaking changes (X.0.0)
4. Write a summary of your changes
5. Commit the generated changeset file

### Automated Release Process

1. **Create a PR** with your changes and changeset file
2. **Merge to main** - GitHub Actions will detect the changeset
3. **Version Packages PR** - Bot automatically creates a PR with:
   - Version bumps in package.json
   - Updated CHANGELOG.md
4. **Merge Version PR** - Automatically publishes to npm

### Prerequisites for Publishing

Before the first publish, set up:

1. **NPM Token**: Add `NPM_TOKEN` secret in GitHub repository settings

   - Generate token at https://www.npmjs.com/settings/tokens
   - Use "Automation" token type
   - Add as repository secret

2. **Package Name**: Update in `package.json` if needed

   ```json
   {
     "name": "your-package-name"
   }
   ```

3. **Repository URL**: Update in `package.json`
   ```json
   {
     "repository": {
       "type": "git",
       "url": "https://github.com/your-username/your-repo.git"
     }
   }
   ```

## Project Structure

```
tiny-component-lib/
├── .changeset/          # Changeset configuration and files
├── .github/
│   └── workflows/       # CI/CD workflows
├── src/
│   ├── components/      # Vue components
│   │   ├── Button.vue
│   │   └── Card.vue
│   ├── demo/           # Demo app
│   ├── index.ts        # Library entry point
│   └── style.css       # Base styles
├── dist/               # Build output
├── package.json
├── tsconfig.json
└── vite.config.ts
```

## License

MIT