npm package: @kixcellent/heart-ui
Description: Shared Vue 3 UI Components
Author: Francis S. Crisostomo
Latest version: 1.0.2


# @kixcellent/heart-ui

## National Center for Mental Health - Digitalization Project (NDP)

## Overview

This is the shared Vue 3 UI Components Library for the **HEART** and **HEAL** applications developed by the **National Center for Mental Health (NCMH)** Information Systems team. This package contains reusable components, hooks, styles, and utilities.

## 📜 License & Author

MIT © 2025 National Center for Mental Health  

> 👤 **Francis San Pablo Crisostomo**  
> 🚀 DevOps Engineer  
> 📧 Email: [francis.s.crisostomo@gmail.com](mailto:francis.s.crisostomo@gmail.com)  

---

## 📦 Package Structure

```
heart-ui/
│
├── dist/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── PrimaryButton.vue
│   │   └── SecondaryButton.vue
│   ├── hooks/
│   │   └── useGeneralHooks.js
│   ├── styles/
│   │   └── index.css
│   ├── utils/
│   │    └── actionUtils.js
│   └── index.js
│
├── .npmrc
├── package.json
└── README.md
```

## 🧩 Installation

To use `heart-ui` in any Laravel app (e.g., `heart-app` or `heal-app`), follow these steps:

1. **Make sure your `.npmrc` in your consuming project (e.g., `heart-app`) includes the correct registry and token:**

```ini
# .npmrc in heart-app
@ncmh:registry=https://private-registry.ncmh.local/repository/npm-hosted/
//private-registry.ncmh.local/repository/npm-hosted/:_authToken=NpmToken.xxxxxxxx
```

> Ensure your `.npmrc` includes access to your Nexus registry:

2. **Install the package:**

```bash
npm i @kixcellent/heart-ui
```

> 🔁 Use `npm i @kixcellent/heart-ui@1.0.0` if you want to use specific version.

## 🛠 Usage

Ensure you’ve structured your components inside `components/` folder using PascalCase filenames.

### Manual import

```vue
<script setup>
import { PrimaryButton, SecondaryButton } from '@kixcellent/heart-ui';
</script>

<template>
  <PrimaryButton label="Click Me" />
  <ScondaryButton label="Click Me" />
</template>
```

### 🎨 Styles

If your components depend on shared styles, import the base stylesheet once in your main entry file (`app.js` or `main.js`):

```js
import '@kixcellent/heart-ui/dist/styles/index.css';
```

## 🛠 Development

To develop or test components in this repo:

```bash
npm install
npm run dev
```

## 📤 Publishing to Nexus (Maintainer Only)

1. Update version in `package.json`
2. Ensure `.npmrc` is configured
3. Publish:

```bash
npm publish --access public
```

Ensure this is in your heart-ui/.npmrc:

```ini
registry=https://private-registry.ncmh.local/repository/npm-hosted/
//private-registry.ncmh.local/repository/npm-hosted/:_authToken=NpmToken.xxxxxxxx
```

Make sure your heart-ui/package.json includes:

```json
"publishConfig": {
  "registry": "https://private-registry.ncmh.local/repository/npm-hosted/"
}
```

---

## 📈 Changelog

### 0.1.0

- Initial release
- Includes all Vue components in `components/`
- Added reusable hooks, styles, and utilities.
- CSS included via `styles/index.css`

---

## 🤝 Contributing

1. Fork or clone the repo
2. Add your component in `components/`
3. Import styles in `styles/index.css` if needed
4. Run `npm run dev` to preview locally
5. Create a merge request

© 2025 National Center for Mental Health  
Maintainer: Francis S. Crisostomo