@1money/react-ui 1.7.20 → 1.7.21

package/CLAUDE.md

@@ -0,0 +1,104 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Development Server
+- `pnpm dev` - Start Storybook development server on port 6205
+- `pnpm start` - Alternative command to start development server
+
+### Building
+- `pnpm build` - Build the component library (both CommonJS and ES modules)
+- `pnpm build -n` - Build bypassing all pre-checks
+- `pnpm build:demo` - Build Storybook demo
+
+### Testing and Linting
+- `pnpm test` - Run Jest tests (passes with no tests by default)
+- `pnpm test:snapshot` - Update Jest snapshots
+- `pnpm lint` - Run all linting (ESLint, Prettier, Stylelint)
+- `pnpm lint:fix` - Auto-fix all linting issues
+- `pnpm lint:es` / `pnpm lint:es_fix` - ESLint only
+- `pnpm lint:prettier` / `pnpm lint:prettier_fix` - Prettier only
+- `pnpm lint:style` / `pnpm lint:style_fix` - Stylelint only
+
+### Component Generation
+- `pnpm new` - Interactive component scaffolding using omni-door
+- `pnpm new ComponentName -f` - Generate functional component with given name
+
+### Package Management
+- `pnpm release` - Release new version (auto-builds first)
+- `pnpm release -i` - Release ignoring version iteration
+- `pnpm release -m 0.3.25` - Release with specific version
+- `pnpm release -n` - Release bypassing pre-checks
+
+## Project Architecture
+
+### Component Library Structure
+This is a React component library built with PrimeReact as the base, using the omni-door CLI framework for scaffolding and build processes.
+
+**Core Dependencies:**
+- **PrimeReact**: Base UI component library (>=10.9.0)
+- **React**: >=16.8.0 with React 19+ for development
+- **TailwindCSS**: >=3.0.0 for styling system
+- **TypeScript**: Full TypeScript support with strict mode
+
+**Build System:**
+- Dual output: CommonJS (`lib/`) and ES modules (`es/`)
+- Gulp-based build pipeline via omni-door
+- SCSS preprocessing with modern API
+- Path aliasing: `@/` maps to `src/`
+
+### Directory Structure
+```
+src/
+├── components/           # All UI components
+│   └── ComponentName/
+│       ├── ComponentName.tsx      # Main component file
+│       ├── ComponentName.stories.tsx  # Storybook stories
+│       ├── interface.ts           # TypeScript interfaces
+│       ├── index.ts              # Export barrel
+│       ├── README.md             # Component documentation
+│       ├── __test__/             # Jest tests with snapshots
+│       └── style/                # SCSS styles
+├── utils/               # Utility functions (classnames, clipboard, uuid)
+├── variable.scss        # Global SCSS variables
+└── index.ts            # Main library export
+```
+
+### Component Development Patterns
+- **Base Components**: Most components wrap PrimeReact components with custom styling
+- **Props Interface**: Each component has a dedicated `interface.ts` file
+- **Styling**: SCSS modules with BEM-like naming via `classnames` utility
+- **Testing**: Jest with snapshot testing for visual regression
+- **Stories**: Storybook stories for documentation and testing
+
+### Key Files
+- `omni.config.js`: Main configuration for build, dev server, and scaffolding
+- `gulpfile.js`: Custom build pipeline configuration
+- `tsconfig.json`: TypeScript configuration with path mapping
+- `.storybook/`: Storybook configuration with custom theming
+
+### Package Exports
+The library provides both named exports and individual component imports:
+```js
+// Named imports
+import { Button, Input } from '@1money/react-ui';
+
+// Individual component imports
+import { Button } from '@1money/react-ui/Button';
+import '@1money/react-ui/index.css';
+```
+
+### Development Workflow
+1. Use `pnpm new ComponentName -f` to scaffold new components
+2. Components automatically include TypeScript interfaces, SCSS styles, Storybook stories, and Jest tests
+3. All components must pass linting (ESLint, Prettier, Stylelint) and tests before building
+4. Build process generates both CommonJS and ES module outputs with TypeScript declarations
+5. Storybook serves as both development environment and documentation
+
+### Important Notes
+- Components are patches applied to PrimeReact and react-pro-sidebar (see `patches/` directory)
+- Font assets (Aeonik, Inter, Outfit) are included in `public/fonts/`
+- Lottie animations are used in Loading component
+- Pre-commit hooks enforce code quality via husky and lint-staged

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 1Money Co
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,6 @@
 # @1money/react-ui
-The React Components Library for @1money co
+
+A comprehensive React component library built on PrimeReact, specifically designed for financial applications and modern web interfaces.
 
 [![Build Status](https://github.com/1Money-Co/1money-react-ui/actions/workflows/cicd-npm.yml/badge.svg)](https://github.com/1Money-Co/1money-react-ui/actions/workflows/cicd-npm.yml)
 [![NPM downloads](http://img.shields.io/npm/dm/%401money%2Freact-ui.svg?style=flat-square)](https://www.npmjs.com/package/@1money/react-ui)
@@ -7,32 +8,442 @@ The React Components Library for @1money co
 [![install size](https://packagephobia.now.sh/badge?p=%401money%2Freact-ui)](https://packagephobia.now.sh/result?p=%401money%2Freact-ui)
 [![license](http://img.shields.io/npm/l/%401money%2Freact-ui.svg)](https://github.com/1money/tpls/blob/master/packages/react-ui/LICENSE)
 
-[Online Preview](https://1money-co.github.io/1money-react-ui/)
+📖 [Online Documentation & Storybook](https://1money-co.github.io/1money-react-ui/)
 
 English | [简体中文](./README.zh-CN.md)
 
-## Quick start
-### Install
-```shell
-npm i -S @1money/react-ui
-# or
+## ✨ Features
+
+- 🎨 **30+ High-quality Components** - Built on PrimeReact with enhanced styling
+- 💰 **Financial Application Ready** - Components designed for fintech interfaces
+- 🎯 **TypeScript Support** - Full TypeScript definitions with strict typing
+- 📱 **Responsive Design** - Mobile-first approach with TailwindCSS integration
+- ♿ **Accessibility First** - WCAG compliant with keyboard navigation
+- 🌍 **I18n Ready** - Internationalization support out of the box
+- 🎭 **Customizable Theming** - Easy customization with SCSS variables
+- 📦 **Tree Shaking** - Optimized bundle size with individual component imports
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @1money/react-ui
+
+# yarn
 yarn add @1money/react-ui
-# or
-pnpm i -S @1money/react-ui
+
+# pnpm
+pnpm add @1money/react-ui
+```
+
+### Peer Dependencies
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+npm install react react-dom primereact primeicons tailwindcss
+```
+
+## 🚀 Quick Start
+
+### Basic Setup
+
+```tsx
+import '@1money/react-ui/index.css';
+import { Button, Input, Modal } from '@1money/react-ui';
+
+function App() {
+  return (
+    <div className="p-4">
+      <Button severity="primary">Get Started</Button>
+    </div>
+  );
+}
+```
+
+### Individual Component Imports
+
+For better tree shaking, import components individually:
+
+```tsx
+import { Button } from '@1money/react-ui/Button';
+import { Input } from '@1money/react-ui/Input';
+import { Modal } from '@1money/react-ui/Modal';
+import '@1money/react-ui/index.css';
+```
+
+## 📋 Component Categories
+
+### 🎮 Form Components
+Perfect for building complex forms and data input interfaces.
+
+```tsx
+import { Button, Input, Checkbox, Radio, Switch, Select } from '@1money/react-ui';
+
+// Form example
+<form className="space-y-4">
+  <Input 
+    type="text" 
+    label="Full Name" 
+    placeholder="Enter your name"
+    required 
+  />
+  
+  <Input 
+    type="number" 
+    label="Investment Amount" 
+    prefixEle="$"
+    placeholder="0.00"
+  />
+  
+  <Select 
+    label="Account Type"
+    options={[
+      { label: 'Checking', value: 'checking' },
+      { label: 'Savings', value: 'savings' },
+      { label: 'Investment', value: 'investment' }
+    ]}
+  />
+  
+  <div className="flex items-center gap-2">
+    <Checkbox inputId="terms" />
+    <label htmlFor="terms">I agree to the terms and conditions</label>
+  </div>
+  
+  <Button type="submit" severity="primary">
+    Create Account
+  </Button>
+</form>
+```
+
+### 💼 Financial Components
+Specialized components for financial applications.
+
+```tsx
+import { InputAmount, Badge, Progress, Table } from '@1money/react-ui';
+
+// Financial dashboard example
+<div className="financial-dashboard">
+  <div className="balance-card">
+    <h3>Account Balance</h3>
+    <InputAmount 
+      value={125430.50}
+      precision={2}
+      disabled
+      prefixEle="$"
+    />
+    <Badge severity="success" value="↑ 12.5%" />
+  </div>
+  
+  <Progress 
+    type="ring"
+    value={75}
+    label="Portfolio Growth"
+    color="var(--primary-color)"
+  />
+</div>
+```
+
+### 🎨 Layout & Navigation
+Build complex layouts and navigation systems.
+
+```tsx
+import { Sidebar, Tab, Menu, Collapse } from '@1money/react-ui';
+
+// Application layout
+<div className="app-layout">
+  <Sidebar 
+    items={[
+      { label: 'Dashboard', icon: 'dashboard', command: () => navigate('/dashboard') },
+      { label: 'Accounts', icon: 'account-balance', command: () => navigate('/accounts') },
+      { label: 'Transactions', icon: 'receipt', command: () => navigate('/transactions') },
+      { label: 'Settings', icon: 'settings', command: () => navigate('/settings') }
+    ]}
+  />
+  
+  <main className="main-content">
+    <Tab 
+      items={[
+        { label: 'Overview', content: <DashboardOverview /> },
+        { label: 'Analytics', content: <Analytics />, count: 3 },
+        { label: 'Reports', content: <Reports /> }
+      ]}
+    />
+  </main>
+</div>
+```
+
+### 📊 Data Display
+Present data in tables, lists, and other formats.
+
+```tsx
+import { Table, Cell, Typography, Loading } from '@1money/react-ui';
+
+// Transaction table
+const transactions = [
+  { id: 1, date: '2024-01-15', description: 'Coffee Shop', amount: -4.50, category: 'Food' },
+  { id: 2, date: '2024-01-14', description: 'Salary Deposit', amount: 3500.00, category: 'Income' },
+  { id: 3, date: '2024-01-13', description: 'Grocery Store', amount: -89.32, category: 'Shopping' }
+];
+
+<Table
+  data={transactions}
+  selectionMode="multiple"
+  pagination
+  pageSize={10}
+>
+  <Column field="date" header="Date" />
+  <Column field="description" header="Description" />
+  <Column 
+    field="amount" 
+    header="Amount"
+    body={(rowData) => (
+      <Typography.Body 
+        className={rowData.amount > 0 ? 'text-green-600' : 'text-red-600'}
+      >
+        ${Math.abs(rowData.amount).toFixed(2)}
+      </Typography.Body>
+    )}
+  />
+  <Column field="category" header="Category" />
+</Table>
+```
+
+### 💬 Feedback Components
+Provide user feedback and system status.
+
+```tsx
+import { Toast, Notification, Message, Progress } from '@1money/react-ui';
+
+// Payment processing feedback
+const PaymentFlow = () => {
+  const [processing, setProcessing] = useState(false);
+  const toast = useRef<Toast>(null);
+
+  const processPayment = async () => {
+    setProcessing(true);
+    
+    try {
+      await paymentAPI.process();
+      toast.current?.show({
+        severity: 'success',
+        summary: 'Payment Successful',
+        detail: 'Your payment has been processed successfully'
+      });
+    } catch (error) {
+      toast.current?.show({
+        severity: 'error',
+        summary: 'Payment Failed',
+        detail: error.message
+      });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  return (
+    <div>
+      <Button 
+        onClick={processPayment}
+        loading={processing}
+        disabled={processing}
+      >
+        Process Payment
+      </Button>
+      
+      {processing && (
+        <Progress 
+          type="bar"
+          mode="indeterminate"
+          className="mt-4"
+        />
+      )}
+      
+      <Toast ref={toast} />
+    </div>
+  );
+};
+```
+
+### 🎭 Interactive Components
+Modals, popups, and other interactive elements.
+
+```tsx
+import { Modal, Popup, Tooltip, ConfirmPopup } from '@1money/react-ui';
+
+// Account deletion confirmation
+const AccountSettings = () => {
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+
+  return (
+    <div className="account-settings">
+      <Tooltip target=".delete-btn" content="This action cannot be undone">
+        <Button 
+          className="delete-btn"
+          severity="danger"
+          outlined
+          onClick={() => setDeleteModalVisible(true)}
+        >
+          Delete Account
+        </Button>
+      </Tooltip>
+
+      <Modal
+        visible={deleteModalVisible}
+        onHide={() => setDeleteModalVisible(false)}
+        header="Confirm Account Deletion"
+        footer={
+          <div className="flex gap-2">
+            <Button 
+              severity="secondary" 
+              onClick={() => setDeleteModalVisible(false)}
+            >
+              Cancel
+            </Button>
+            <Button 
+              severity="danger"
+              onClick={handleAccountDeletion}
+            >
+              Delete Account
+            </Button>
+          </div>
+        }
+      >
+        <Message 
+          severity="warn" 
+          text="This will permanently delete your account and all associated data."
+        />
+        <Typography.Body className="mt-4">
+          Are you sure you want to proceed? This action cannot be undone.
+        </Typography.Body>
+      </Modal>
+    </div>
+  );
+};
+```
+
+## 🎨 Theming & Customization
+
+### CSS Custom Properties
+
+```css
+:root {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --success-color: #28a745;
+  --warning-color: #ffc107;
+  --danger-color: #dc3545;
+  --info-color: #17a2b8;
+  
+  --border-radius: 6px;
+  --font-family: 'Inter', sans-serif;
+  --transition-duration: 0.15s;
+}
+```
+
+### SCSS Variables
+
+```scss
+@import '@1money/react-ui/variable.scss';
+
+// Override default variables
+$primary-color: #007bff;
+$secondary-color: #6c757d;
+$border-radius: 8px;
+$font-size-base: 14px;
+```
+
+### Component-level Customization
+
+```tsx
+// Using prefixCls for component-level styling
+<Button 
+  prefixCls="custom-button"
+  className="my-custom-styles"
+>
+  Custom Button
+</Button>
 ```
 
-### Usage
-```js
-import UI from '@1money/react-ui';
+```css
+.custom-button {
+  background: linear-gradient(45deg, #007bff, #0056b3);
+  border: none;
+  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+}
 ```
 
-## Dev
-For debugging or maintenance, you can clone the whole git repository and run the project:
+## 🛠️ Development
 
-```shell
-git clone --depth 1
+### Prerequisites
+
+- Node.js >= 16
+- pnpm (recommended)
+
+### Getting Started
+
+```bash
+# Clone the repository
+git clone https://github.com/1Money-Co/1money-react-ui.git
+cd 1money-react-ui
+
+# Install dependencies
+pnpm install
+
+# Start development server (Storybook)
+pnpm dev
+
+# Build components
+pnpm build
+
+# Run tests
+pnpm test
+
+# Lint code
+pnpm lint
+```
+
+### Project Structure
 
-pnpm i && pnpm dev
 ```
+src/
+├── components/          # All UI components
+│   ├── Button/         # Individual component
+│   │   ├── Button.tsx  # Component implementation
+│   │   ├── interface.ts # TypeScript interfaces
+│   │   ├── index.ts    # Export barrel
+│   │   ├── style/      # Component styles
+│   │   └── README.md   # Component documentation
+│   └── ...
+├── utils/              # Utility functions
+├── variable.scss       # Global SCSS variables
+└── index.ts           # Main library export
+```
+
+## 📚 Documentation
+
+- 📖 [Storybook Documentation](https://1money-co.github.io/1money-react-ui/)
+- 🔧 [Development Guide](./DEV.md)
+- 📝 [Component Documentation](./src/components/)
+- 🤖 [Claude Code Guide](./CLAUDE.md)
+
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/new-component`
+3. Make your changes and add tests
+4. Run linting and tests: `pnpm lint && pnpm test`
+5. Create a pull request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+
+## 🆘 Support
+
+- 📖 [Documentation](https://1money-co.github.io/1money-react-ui/)
+- 🐛 [Issues](https://github.com/1Money-Co/1money-react-ui/issues)
+
+---
 
-[More Detials](./DEV.md)
+Made with ❤️ by the [@1money](https://github.com/1Money-Co) team