@promporn-promjan-group/shared-ui

A shared UI component library built with React + TypeScript + Vite, designed for reuse across multiple projects within the organization.

This README includes installation, setup, usage, versioning, and publishing instructions.

📦 Installation

shared-ui is distributed via a private GitLab NPM Registry. To install it in any project, follow these steps.

1️ Configure .npmrc

Create or update a .npmrc file at the root of your project:

@promporn-promjan-group:registry=https://gitlab.com/api/v4/projects/76125291/packages/npm/
//gitlab.com/api/v4/projects/76125291/packages/npm/:_authToken=<YOUR_ACCESS_TOKEN>

🔸 Replace <YOUR_ACCESS_TOKEN> with your personal GitLab Access Token 🔸 Token must have scope: read_api

2️ Install the library

npm install @promporn-promjan-group/shared-ui

Or using Yarn / PNPM:

yarn add @promporn-promjan-group/shared-ui
pnpm add @promporn-promjan-group/shared-ui

Usage

After installation, import components directly:

import { Checkbox, ButtonBase } from '@promporn-promjan-group/shared-ui';

export default function Example() {
  return (
    <div>
      <Checkbox label="Accept Terms" theme="primary" />
      <ButtonBase label="Submit" />
    </div>
  );
}

Tailwind CSS Setup (Important)

If your project uses Tailwind, you must whitelist shared-ui components.

In tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@promporn-promjan-group/shared-ui/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Updating to the Latest Version

Check available versions:

npm view @promporn-promjan-group/shared-ui versions

Update:

npm install @promporn-promjan-group/shared-ui@latest

Or pin to a specific version:

npm install @promporn-promjan-group/[email protected]

Publishing New Versions (for maintainers)

1) Update version in package.json

"version": "1.0.4"

2) Build

npm run build

3) Publish to GitLab Registry

npm publish

That's it! New versions become instantly available for all consumers.

🛠 Development

Install dependencies:

npm install

Start dev environment:

npm run dev

Unit Testing

This project uses Vitest + React Testing Library.

Run tests:

npm test

Run with UI:

npm run test:ui

Coverage report:

npm run test:coverage

Contributing

• Create feature branches with naming like:

  • feature/new-component
  • feature/unit-test
  • fix/lockfile

• Always create Merge Requests (MR) to main

• Use proper commit messages (feat:, fix:, chore:)

License

Private internal library — for organizational use only.