@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: [email protected]

📦 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:

# .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:

npm i @kixcellent/heart-ui

🔁 Use npm i @kixcellent/[email protected] if you want to use specific version.

🛠 Usage

Ensure you’ve structured your components inside components/ folder using PascalCase filenames.

Manual import

<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):

import '@kixcellent/heart-ui/dist/styles/index.css';

🛠 Development

To develop or test components in this repo:

npm install
npm run dev

📤 Publishing to Nexus (Maintainer Only)

1. Update version in package.json
2. Ensure .npmrc is configured
3. Publish:

npm publish --access public

Ensure this is in your heart-ui/.npmrc:

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:

"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