ronpos-web-ui

Complete Vue 3 UI component library for RONPOS applications.

Overview

This package provides a complete UI library that includes:

• ✅ All shadcn-vue components (Button, Input, Dialog, Select, Table, etc.)
• ✅ Custom RONPOS-specific components (DataTable with API integration, etc.)

Install once, get everything. No need to use shadcn-vue CLI in your projects.

Components Included

shadcn-vue Components:

• Alert, Avatar, Badge, Button, Card, Checkbox
• Dialog, Dropdown Menu, Input, Label, Select
• Separator, Table, and more...

Custom RONPOS Components:

• DataTable (with server-side pagination, search, sort, RONPOS API integration)
• Future custom components as requested by teams

Architecture

Components are built using:

• Vue 3.5 with Composition API
• Reka UI (Radix Vue v2) for accessible primitives
• Tailwind CSS for styling
• class-variance-authority for variant management
• TypeScript for type safety

Installation

npm install ronpos-web-ui
# or
yarn add ronpos-web-ui

That's it! All components (shadcn-vue + custom RONPOS) are included.

Usage

Import shadcn-vue components

<script setup lang="ts">
import { Button, Input, Dialog, DialogContent, DialogTrigger } from 'ronpos-web-ui';
</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button>Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <Input placeholder="Enter text..." />
    </DialogContent>
  </Dialog>
</template>

Import custom RONPOS components

<script setup lang="ts">
import { DataTable, type DataTableColumn } from 'ronpos-web-ui';

const columns: DataTableColumn<User>[] = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
];
</script>

<template>
  <DataTable :columns="columns" :fetch-data="fetchUsers" />
</template>

Use utilities

import { cn } from 'ronpos-web-ui';

const className = cn('px-4 py-2', 'bg-blue-500', props.className);

Development

Build

yarn build

Watch mode

yarn dev

Type checking

yarn type-check

Requesting Custom Components

If you need a RONPOS-specific component that doesn't exist in shadcn-vue:

1. Create a request with your requirements
2. Frontend team will develop the component in ronpos-web-ui
3. New version will be published
4. Update your project: yarn upgrade ronpos-web-ui

Publishing

This package is published to GitLab's npm registry. Configure your .npmrc:

ronpos-web-ui:registry=https://gitlab.com/api/v4/packages/npm/

Publish with:

npm version patch  # or minor/major
npm publish

Philosophy

Components follow the shadcn-vue philosophy:

1. Copy, don't install - Components are designed to be copied into your project
2. Customizable - Full control over styling and behavior
3. Accessible - Built on Reka UI primitives for WCAG compliance
4. Type-safe - Full TypeScript support

License

Proprietary - RONPOS internal use only