@paygreen/pgui

Core UI components library for Paygreen applications built with React and Chakra UI.

📦 Installation

Base Installation

# Install the core library
npm install @paygreen/pgui

# Install required peer dependencies
npm install react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion

Component-Specific Dependencies

Install additional packages based on the components you want to use:

| Component | Required Package | Command | |-----------|------------------|---------| | DatePicker | react-datepicker | npm install react-datepicker | | Select | react-select | npm install react-select | | InputPhone | react-phone-number-input | npm install react-phone-number-input | | InputMask | use-mask-input | npm install use-mask-input | | DataTable | @tanstack/react-table | npm install @tanstack/react-table | | All Icons | react-icons | npm install react-icons |

Complete Installation (All Components)

# Install everything at once
npm install @paygreen/pgui react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion react-datepicker react-select react-phone-number-input use-mask-input @tanstack/react-table react-icons

🎨 CSS Setup

// In your main App.js or index.js
import '@paygreen/pgui/src/styles/index.css';

🚀 Basic Usage

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { DatePicker, Select, Input, systemTheme } from '@paygreen/pgui';
import '@paygreen/pgui/src/styles/index.css';

function App() {
  return (
    <ChakraProvider value={systemTheme}>
      {/* Your components */}
    </ChakraProvider>
  );
}

🔧 Development & Testing

Why YALC?

YALC (Yet Another Local Cache) is the best tool for testing libraries locally because it:

• ✅ No symlinks - Avoids React duplicate issues from npm link
• ✅ Real package simulation - Works exactly like published packages
• ✅ Fast updates - Push changes instantly to consuming projects
• ✅ No conflicts - Prevents peer dependency resolution issues
• ✅ Production-like - Tests the actual built package, not source

Setting up YALC

1. Install YALC globally

npm install -g yalc

2. In this library (pgui/)

# Generate types if necessary 
npx @chakra-ui/cli typegen ./src/theme/index.ts

# Build and publish to local store
npm run build
yalc publish

# For development - rebuild and push changes
npm run build
yalc push  # Updates all projects using this package

3. In your test project

# Install from local YALC store
yalc add @paygreen/pgui
npm install

# When done testing, clean up
yalc remove @paygreen/pgui
npm install @paygreen/pgui  # Back to npm registry

Development Workflow

# 1. Make changes to components in pgui/
# 2. Build and push
npm run build && yalc push

# 3. Your test project automatically gets the updates
# 4. Test your changes

# 5. When ready, publish to npm
npm publish

Useful YALC Commands

# See which packages are published locally
yalc installations show

# Remove package from YALC store
yalc remove @paygreen/pgui --all

# Clean all YALC installations
yalc remove --all

🏗️ Building

# Build the library
npm run build

# Output files:
# - dist/index.mjs (ES modules)
# - dist/index.js (CommonJS)
# - dist/index.d.ts (TypeScript definitions)
# - dist/pgui.css (Compiled styles)

🐛 Troubleshooting

CSS Not Loading

Make sure you import the CSS file:

import '@paygreen/pgui/src/styles/index.css';

Missing Dependencies

If you get an error about missing packages, install the required dependency for the component you're using (see table above).

Source Map Warnings

If you see warnings about react-datepicker source maps, add this to your .env file:

GENERATE_SOURCEMAP=false

📋 Requirements

• React ^18.0.0 || ^19.0.0
• Node.js >= 16
• TypeScript >= 4.5 (if using TypeScript)

📄 License

Private - Paygreen Internal Use Only