@tap-payments/os-micro-frontend-shared 0.1.451 → 0.1.452
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +151 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,157 @@
|
|
|
1
1
|
# os-micro-frontend-shared
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Shared React component library for Tap Payments micro frontends
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@tap-payments/os-micro-frontend-shared)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
|
|
8
|
+
## What is this?
|
|
9
|
+
|
|
10
|
+
A comprehensive React component library providing:
|
|
11
|
+
- **100+ UI components** (buttons, tables, dialogs, forms, filters)
|
|
12
|
+
- **18 custom hooks** (toast, window dimensions, theme mode)
|
|
13
|
+
- **47 utility modules** (date/currency formatting, validation)
|
|
14
|
+
- **Full TypeScript support** with type definitions
|
|
15
|
+
- **MUI-based theming** with dark/light modes and RTL/LTR support
|
|
16
|
+
- **High-performance virtual tables** for large datasets
|
|
17
|
+
|
|
18
|
+
## Quick Start
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @tap-payments/os-micro-frontend-shared
|
|
22
|
+
# or
|
|
23
|
+
yarn add @tap-payments/os-micro-frontend-shared
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { Button, VirtualTable, useToast } from '@tap-payments/os-micro-frontend-shared'
|
|
28
|
+
|
|
29
|
+
function MyApp() {
|
|
30
|
+
const toast = useToast()
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Button
|
|
34
|
+
variant="confirm"
|
|
35
|
+
onClick={() => toast.success('Hello!')}
|
|
36
|
+
>
|
|
37
|
+
Click me
|
|
38
|
+
</Button>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Documentation
|
|
44
|
+
|
|
45
|
+
📚 **[Full Documentation →](./docs/overview.md)**
|
|
46
|
+
|
|
47
|
+
| Document | Description | Read Time |
|
|
48
|
+
|----------|-------------|-----------|
|
|
49
|
+
| **[Quick Reference](./docs/quick_reference.md)** | Cheat sheet, snippets, common tasks | 5 min |
|
|
50
|
+
| **[Overview](./docs/overview.md)** | Architecture, patterns, design decisions | 15 min |
|
|
51
|
+
| **[Setup & Stack](./docs/setup_and_stack.md)** | Installation, development, workflows | 10 min |
|
|
52
|
+
| **[Component Guide](./docs/component_guide.md)** | All components categorized with examples | Reference |
|
|
53
|
+
|
|
54
|
+
**For AI Agents**: Start with [quick_reference.md](./docs/quick_reference.md) for instant context.
|
|
55
|
+
|
|
56
|
+
**For Developers**: Read in order: [quick_reference](./docs/quick_reference.md) → [overview](./docs/overview.md) → [setup_and_stack](./docs/setup_and_stack.md).
|
|
57
|
+
|
|
58
|
+
## Key Features
|
|
59
|
+
|
|
60
|
+
- ✅ **ESM-only** - Modern module system with tree-shaking
|
|
61
|
+
- ✅ **Peer dependencies** - Avoid version conflicts
|
|
62
|
+
- ✅ **Full TypeScript** - Complete type safety
|
|
63
|
+
- ✅ **100+ Components** - Comprehensive UI library
|
|
64
|
+
- ✅ **Virtual tables** - High-performance lists
|
|
65
|
+
- ✅ **React Hook Form** - Integrated form components
|
|
66
|
+
- ✅ **Theming** - Dark/light modes, RTL/LTR
|
|
67
|
+
- ✅ **Memoized** - Optimized for performance
|
|
68
|
+
|
|
69
|
+
## Development
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
# Install dependencies
|
|
73
|
+
yarn install
|
|
74
|
+
|
|
75
|
+
# Start dev server
|
|
76
|
+
yarn dev
|
|
77
|
+
|
|
78
|
+
# Build library
|
|
79
|
+
yarn ts:build
|
|
80
|
+
|
|
81
|
+
# Test locally in another project
|
|
82
|
+
yarn push:local # requires yalc
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
See [Setup & Stack Guide](./docs/setup_and_stack.md) for detailed instructions.
|
|
86
|
+
|
|
87
|
+
## Publishing
|
|
88
|
+
|
|
89
|
+
### Automated (Recommended)
|
|
90
|
+
|
|
91
|
+
Merging a PR to `main` automatically:
|
|
92
|
+
1. Bumps patch version
|
|
93
|
+
2. Commits version change
|
|
94
|
+
3. Builds library
|
|
95
|
+
4. Publishes to npm
|
|
96
|
+
|
|
97
|
+
### Manual
|
|
8
98
|
|
|
9
99
|
```bash
|
|
10
|
-
|
|
11
|
-
|
|
100
|
+
# Test version (with -test tag)
|
|
101
|
+
yarn push:test
|
|
102
|
+
|
|
103
|
+
# Production
|
|
104
|
+
yarn push
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
See [Publishing Documentation](./docs/setup_and_stack.md#staging-vs-production-publishing) for details.
|
|
108
|
+
|
|
109
|
+
## Contributing
|
|
110
|
+
|
|
111
|
+
1. Create feature branch
|
|
112
|
+
2. Make changes in `src/`
|
|
113
|
+
3. Run `yarn lint:fix` and `yarn prettier:fix`
|
|
114
|
+
4. Commit (pre-commit hooks will run)
|
|
115
|
+
5. Push and create PR to `main`
|
|
116
|
+
|
|
117
|
+
See [Development Workflows](./docs/setup_and_stack.md#common-workflows) for detailed guide.
|
|
118
|
+
|
|
119
|
+
## Project Structure
|
|
120
|
+
|
|
12
121
|
```
|
|
122
|
+
src/
|
|
123
|
+
├── components/ # 100+ React components
|
|
124
|
+
├── hooks/ # 18 custom React hooks
|
|
125
|
+
├── utils/ # 47 utility modules
|
|
126
|
+
├── types/ # TypeScript type definitions
|
|
127
|
+
├── constants/ # App constants and configs
|
|
128
|
+
└── theme/ # MUI theme configuration
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
See [Folder Structure](./docs/overview.md#folder--module-structure) for details.
|
|
132
|
+
|
|
133
|
+
## Tech Stack
|
|
134
|
+
|
|
135
|
+
- React 18 + TypeScript 5
|
|
136
|
+
- MUI (Material-UI) 5 + Emotion
|
|
137
|
+
- React Hook Form + Yup
|
|
138
|
+
- Vite 6 (build + dev)
|
|
139
|
+
- ESLint + Prettier
|
|
140
|
+
|
|
141
|
+
See [Tech Stack Details](./docs/setup_and_stack.md#tech-stack) for complete list.
|
|
142
|
+
|
|
143
|
+
## License
|
|
144
|
+
|
|
145
|
+
MIT © [Tap Payments](https://tap.company)
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## Links
|
|
150
|
+
|
|
151
|
+
- [npm Package](https://www.npmjs.com/package/@tap-payments/os-micro-frontend-shared)
|
|
152
|
+
- [Documentation](./docs/)
|
|
153
|
+
- [Tap Payments](https://tap.company)
|
|
154
|
+
|
|
155
|
+
## Support
|
|
156
|
+
|
|
157
|
+
For issues, questions, or contributions, please refer to the [documentation](./docs/) or create an issue.
|
package/package.json
CHANGED