os-micro-frontend-shared

Shared React component library for Tap Payments micro frontends

What is this?

A comprehensive React component library providing:

• 100+ UI components (buttons, tables, dialogs, forms, filters)
• 18 custom hooks (toast, window dimensions, theme mode)
• 47 utility modules (date/currency formatting, validation)
• Full TypeScript support with type definitions
• MUI-based theming with dark/light modes and RTL/LTR support
• High-performance virtual tables for large datasets

Quick Start

npm install @tap-payments/os-micro-frontend-shared
# or
yarn add @tap-payments/os-micro-frontend-shared

import { Button, VirtualTable, useToast } from '@tap-payments/os-micro-frontend-shared'

function MyApp() {
  const toast = useToast()

  return (
    <Button variant="primary" onClick={() => toast.success('Hello!')}>
      Click me
    </Button>
  )
}

Documentation

📚 Full Documentation →

For Developers: Read in order: overview → setup → component guide.

Key Features

• ✅ ESM-only - Modern module system with tree-shaking
• ✅ Peer dependencies - Avoid version conflicts
• ✅ Full TypeScript - Complete type safety
• ✅ 100+ Components - Comprehensive UI library
• ✅ Virtual tables - High-performance lists
• ✅ React Hook Form - Integrated form components
• ✅ Theming - Dark/light modes, RTL/LTR
• ✅ Memoized - Optimized for performance

Development

# Install dependencies
yarn install

# Start dev server
yarn dev

# Build library
yarn build

# Test locally in another project
yarn push:local   # requires yalc

See Setup Guide for detailed instructions.

Publishing

Automated (Recommended)

Merging a PR to main automatically:

1. Bumps patch version
2. Commits version change
3. Builds library
4. Publishes to npm

The version commit uses the format chore(release): vX.Y.Z.

To find the commit for a published version:

git log --oneline --grep="release: vX.Y.Z"

Manual

# Test version (with -test tag)
yarn push:test

# Production
yarn push

See Publishing for details.

Contributing

1. Create feature branch
2. Make changes in src/
3. Run yarn lint:fix and yarn prettier:fix
4. Commit (pre-commit hooks will run)
5. Push and create PR to main

See Development for the detailed guide.

Project Structure

src/
├── components/      # 100+ React components
├── hooks/          # 18 custom React hooks
├── utils/          # 47 utility modules
├── types/          # TypeScript type definitions
├── constants/      # App constants and configs
└── theme/          # MUI theme configuration

See Folder / Module Structure for details.

Tech Stack

• React 18 + TypeScript 5
• MUI (Material-UI) 5 + Emotion
• React Hook Form + Yup
• Vite 6 (build + dev)
• ESLint + Prettier

See Tech Stack for the complete list.

License

MIT © Tap Payments

Links

• npm Package
• Documentation
• Tap Payments

Support

For issues, questions, or contributions, please refer to the documentation or create an issue.