@adiba-banking-cloud/backoffice 0.0.2
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/LICENSE +21 -0
- package/README.md +247 -0
- package/package.json +95 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Jeffrey Bernadas
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
# Backoffice Console Library
|
|
2
|
+
|
|
3
|
+
A React component library for building modern backoffice applications. This library provides a set of reusable components and utilities designed specifically for backoffice interfaces.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Modern React components built with TypeScript
|
|
8
|
+
- Storybook documentation and component playground
|
|
9
|
+
- Built with Mantine UI framework
|
|
10
|
+
- Drag and drop functionality with @hello-pangea/dnd
|
|
11
|
+
- Chart components with Highcharts integration
|
|
12
|
+
- Customizable theme support
|
|
13
|
+
- Responsive design components
|
|
14
|
+
|
|
15
|
+
## Components
|
|
16
|
+
|
|
17
|
+
### Charts
|
|
18
|
+
- **Area Charts**: Interactive area charts with customizable colors and gradients
|
|
19
|
+
- **Column Charts**: Bar and column charts with rounded corners and customizable styling
|
|
20
|
+
- **Donut Charts**: Circular charts with customizable inner radius and labels
|
|
21
|
+
- **Pie Charts**: Circular charts with customizable segments and labels
|
|
22
|
+
- **Heatmap**: Data visualization with color gradients and interactive tooltips
|
|
23
|
+
- Features:
|
|
24
|
+
- Customizable colors and themes
|
|
25
|
+
- Interactive tooltips
|
|
26
|
+
- Legend support
|
|
27
|
+
- Responsive design
|
|
28
|
+
- Export functionality
|
|
29
|
+
- Mouse tracking
|
|
30
|
+
- Customizable grid lines and labels
|
|
31
|
+
|
|
32
|
+
### Drag and Drop
|
|
33
|
+
- **Kanban Board**:
|
|
34
|
+
- Drag and drop columns and cards
|
|
35
|
+
- Customizable card content
|
|
36
|
+
- Column reordering
|
|
37
|
+
- Card status management
|
|
38
|
+
|
|
39
|
+
### Menus
|
|
40
|
+
- **Side Navigation**:
|
|
41
|
+
- Collapsible sidebar
|
|
42
|
+
- Nested menu items
|
|
43
|
+
- Custom icons support
|
|
44
|
+
- Active state management
|
|
45
|
+
- **User Menu**:
|
|
46
|
+
- User profile information
|
|
47
|
+
- Quick actions
|
|
48
|
+
- Customizable dropdown
|
|
49
|
+
- **Application Menu**:
|
|
50
|
+
- Application switching
|
|
51
|
+
- Recent applications
|
|
52
|
+
- Favorites management
|
|
53
|
+
- **Notification Menu**:
|
|
54
|
+
- Real-time notifications
|
|
55
|
+
- Notification grouping
|
|
56
|
+
- Read/unread states
|
|
57
|
+
- **Settings Menu**:
|
|
58
|
+
- Quick settings access
|
|
59
|
+
- Theme customization
|
|
60
|
+
- User preferences
|
|
61
|
+
|
|
62
|
+
## Installation
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
# Install the library
|
|
66
|
+
npm install backoffice-console-library
|
|
67
|
+
|
|
68
|
+
# Install required peer dependencies
|
|
69
|
+
npm install react@^18.3.1
|
|
70
|
+
|
|
71
|
+
# Install required dependencies
|
|
72
|
+
npm install @mantine/core@^7.12.2 @mantine/hooks@^7.12.2 @hello-pangea/dnd@^16.5.0 highcharts-react-official@^3.2.2 highcharts-rounded-corners@^1.0.7 iconsax-react@^0.0.8 @fontsource/poppins@^5.1.0
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Or install everything at once:
|
|
76
|
+
```bash
|
|
77
|
+
npm install backoffice-console-library react@^18.3.1 @mantine/core@^7.12.2 @mantine/hooks@^7.12.2 @hello-pangea/dnd@^16.5.0 highcharts-react-official@^3.2.2 highcharts-rounded-corners@^1.0.7 iconsax-react@^0.0.8 @fontsource/poppins@^5.1.0
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Peer Dependencies
|
|
81
|
+
|
|
82
|
+
This library requires React 18.3.1 or higher as a peer dependency.
|
|
83
|
+
|
|
84
|
+
## Usage
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
import { ComponentName } from 'backoffice-console-library';
|
|
88
|
+
|
|
89
|
+
function App() {
|
|
90
|
+
return (
|
|
91
|
+
<ComponentName>
|
|
92
|
+
{/* Your content here */}
|
|
93
|
+
</ComponentName>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Development
|
|
99
|
+
|
|
100
|
+
### Prerequisites
|
|
101
|
+
|
|
102
|
+
- Node.js (Latest LTS version recommended)
|
|
103
|
+
- npm or yarn
|
|
104
|
+
|
|
105
|
+
### Setup
|
|
106
|
+
|
|
107
|
+
1. Clone the repository
|
|
108
|
+
2. Install dependencies:
|
|
109
|
+
```bash
|
|
110
|
+
npm install
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Available Scripts
|
|
114
|
+
|
|
115
|
+
- `npm run rollup` - Build the library using Rollup
|
|
116
|
+
- `npm run storybook` - Start Storybook development server
|
|
117
|
+
- `npm run build-storybook` - Build Storybook for production
|
|
118
|
+
- `npm run tsc` - Run TypeScript compiler
|
|
119
|
+
- `npm run deploy` - Build and publish to npm
|
|
120
|
+
|
|
121
|
+
### Development Workflow
|
|
122
|
+
|
|
123
|
+
1. Make your changes in the `src` directory
|
|
124
|
+
2. Test your components using Storybook
|
|
125
|
+
3. Build the library using `npm run rollup`
|
|
126
|
+
4. Deploy using `npm run deploy`
|
|
127
|
+
|
|
128
|
+
## Publishing to npm
|
|
129
|
+
|
|
130
|
+
### Prerequisites
|
|
131
|
+
1. An npm account (create one at https://www.npmjs.com/signup)
|
|
132
|
+
2. npm CLI installed globally (`npm install -g npm`)
|
|
133
|
+
3. Logged in to npm (`npm login`)
|
|
134
|
+
|
|
135
|
+
### Publishing Steps
|
|
136
|
+
|
|
137
|
+
1. **Prepare Your Package**
|
|
138
|
+
```bash
|
|
139
|
+
# Ensure all changes are committed
|
|
140
|
+
git add .
|
|
141
|
+
git commit -m "Prepare for release"
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
2. **Build the Package**
|
|
145
|
+
```bash
|
|
146
|
+
# Build the library
|
|
147
|
+
npm run rollup
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
3. **Update Version**
|
|
151
|
+
```bash
|
|
152
|
+
# Update version (patch, minor, or major)
|
|
153
|
+
npm version patch # for bug fixes
|
|
154
|
+
# OR
|
|
155
|
+
npm version minor # for new features
|
|
156
|
+
# OR
|
|
157
|
+
npm version major # for breaking changes
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
4. **Publish to npm**
|
|
161
|
+
```bash
|
|
162
|
+
npm publish
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Automated Publishing
|
|
166
|
+
The package includes a deploy script that automates the publishing process:
|
|
167
|
+
```bash
|
|
168
|
+
npm run deploy
|
|
169
|
+
```
|
|
170
|
+
This script will:
|
|
171
|
+
1. Stage and commit changes
|
|
172
|
+
2. Build the library
|
|
173
|
+
3. Increment the patch version
|
|
174
|
+
4. Publish to npm
|
|
175
|
+
|
|
176
|
+
### Version Management
|
|
177
|
+
- Use `npm version patch` for bug fixes (1.0.x)
|
|
178
|
+
- Use `npm version minor` for new features (1.x.0)
|
|
179
|
+
- Use `npm version major` for breaking changes (x.0.0)
|
|
180
|
+
|
|
181
|
+
### Publishing Checklist
|
|
182
|
+
Before publishing, ensure:
|
|
183
|
+
1. All tests pass
|
|
184
|
+
2. Documentation is up to date
|
|
185
|
+
3. Version number is correct
|
|
186
|
+
4. All dependencies are properly listed
|
|
187
|
+
5. Build output is correct
|
|
188
|
+
6. No sensitive information is included
|
|
189
|
+
|
|
190
|
+
### Troubleshooting
|
|
191
|
+
- If you get a 403 error, ensure you're logged in (`npm login`)
|
|
192
|
+
- If you get a 404 error, check if the package name is available
|
|
193
|
+
- If you get a version conflict, ensure you're not trying to publish an existing version
|
|
194
|
+
|
|
195
|
+
## Project Structure
|
|
196
|
+
|
|
197
|
+
```
|
|
198
|
+
backoffice-console-library/
|
|
199
|
+
├── src/
|
|
200
|
+
│ ├── components/ # React components
|
|
201
|
+
│ └── index.ts # Main entry point
|
|
202
|
+
├── .storybook/ # Storybook configuration
|
|
203
|
+
├── dist/ # Build output
|
|
204
|
+
└── package.json # Project configuration
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## Dependencies
|
|
208
|
+
|
|
209
|
+
### Required Dependencies
|
|
210
|
+
- `react` (^18.3.1) - Peer dependency
|
|
211
|
+
- `@mantine/core` (^7.12.2) - UI framework
|
|
212
|
+
- `@mantine/hooks` (^7.12.2) - UI hooks
|
|
213
|
+
- `@hello-pangea/dnd` (^16.5.0) - Drag and drop functionality
|
|
214
|
+
- `highcharts-react-official` (^3.2.2) - Chart components
|
|
215
|
+
- `highcharts-rounded-corners` (^1.0.7) - Chart styling
|
|
216
|
+
- `iconsax-react` (^0.0.8) - Icon components
|
|
217
|
+
- `@fontsource/poppins` (^5.1.0) - Font family
|
|
218
|
+
|
|
219
|
+
### Development Dependencies
|
|
220
|
+
- `typescript` (^5.6.2) - TypeScript support
|
|
221
|
+
- `rollup` (^3.29.5) - Module bundler
|
|
222
|
+
- `@rollup/plugin-typescript` (^11.1.6) - TypeScript plugin for Rollup
|
|
223
|
+
- `@rollup/plugin-commonjs` (^26.0.1) - CommonJS plugin for Rollup
|
|
224
|
+
- `@rollup/plugin-node-resolve` (^15.2.3) - Node resolution plugin for Rollup
|
|
225
|
+
- `@rollup/plugin-terser` (^0.4.4) - Minification plugin for Rollup
|
|
226
|
+
- `storybook` (^8.3.2) - Component documentation and testing
|
|
227
|
+
- `jest` (^29.7.0) - Testing framework
|
|
228
|
+
- `@testing-library/react` (^16.0.1) - React testing utilities
|
|
229
|
+
- `@babel/core` (^7.25.2) - JavaScript compiler
|
|
230
|
+
- `@babel/preset-react` (^7.24.7) - React preset for Babel
|
|
231
|
+
- `@babel/preset-typescript` (^7.24.7) - TypeScript preset for Babel
|
|
232
|
+
|
|
233
|
+
## Contributing
|
|
234
|
+
|
|
235
|
+
1. Fork the repository
|
|
236
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
237
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
238
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
239
|
+
5. Open a Pull Request
|
|
240
|
+
|
|
241
|
+
## License
|
|
242
|
+
|
|
243
|
+
This project is licensed under the ISC License.
|
|
244
|
+
|
|
245
|
+
## Support
|
|
246
|
+
|
|
247
|
+
For support, please open an issue in the repository.
|
package/package.json
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@adiba-banking-cloud/backoffice",
|
|
3
|
+
"author": "TUROG Technologies",
|
|
4
|
+
"version": "0.0.2",
|
|
5
|
+
"description": "An ADIBA component library for backoffice and dashboard applications",
|
|
6
|
+
"license": "ISC",
|
|
7
|
+
"main": "build/index.cjs.js",
|
|
8
|
+
"module": "build/index.esm.js",
|
|
9
|
+
"files": [
|
|
10
|
+
"build"
|
|
11
|
+
],
|
|
12
|
+
"publishConfig": {
|
|
13
|
+
"access": "public"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "rimraf ./dist && npm run build:js && npm run build:types",
|
|
17
|
+
"build:js": "rollup -c rollup.config.mjs",
|
|
18
|
+
"build:types": "tsc -p tsconfig.build.json",
|
|
19
|
+
"test:clean": "rimraf ./coverage",
|
|
20
|
+
"test": "react-scripts test --env=jsdom",
|
|
21
|
+
"lint": "eslint",
|
|
22
|
+
"lint:fix": "eslint --fix",
|
|
23
|
+
"format": "prettier --write .",
|
|
24
|
+
"storybook": "storybook dev -p 6006",
|
|
25
|
+
"build-storybook": "storybook build",
|
|
26
|
+
"prepare": "husky"
|
|
27
|
+
},
|
|
28
|
+
"sideEffects": false,
|
|
29
|
+
"types": "build/typings/index.d.ts",
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": ">=19",
|
|
32
|
+
"react-dom": ">=19"
|
|
33
|
+
},
|
|
34
|
+
"repository": {
|
|
35
|
+
"type": "git",
|
|
36
|
+
"url": "git+https://github.com/turog-technologies/adiba-common-libraries.git"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@babel/core": "^7.21.3",
|
|
40
|
+
"@babel/plugin-transform-runtime": "^7.21.0",
|
|
41
|
+
"@babel/preset-env": "^7.20.2",
|
|
42
|
+
"@babel/preset-react": "^7.18.6",
|
|
43
|
+
"@babel/preset-typescript": "^7.21.0",
|
|
44
|
+
"@chromatic-com/storybook": "^3.2.5",
|
|
45
|
+
"@eslint/js": "^9.13.0",
|
|
46
|
+
"@rollup/plugin-babel": "^6.0.3",
|
|
47
|
+
"@rollup/plugin-commonjs": "^28.0.1",
|
|
48
|
+
"@rollup/plugin-image": "^3.0.2",
|
|
49
|
+
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
50
|
+
"@storybook/addon-essentials": "^8.6.4",
|
|
51
|
+
"@storybook/addon-interactions": "^8.6.4",
|
|
52
|
+
"@storybook/addon-links": "^8.6.4",
|
|
53
|
+
"@storybook/addon-onboarding": "^8.6.4",
|
|
54
|
+
"@storybook/blocks": "^8.6.4",
|
|
55
|
+
"@storybook/react": "^8.6.4",
|
|
56
|
+
"@storybook/react-vite": "^8.6.4",
|
|
57
|
+
"@storybook/test": "^8.6.4",
|
|
58
|
+
"@testing-library/jest-dom": "^6.6.2",
|
|
59
|
+
"@testing-library/react": "^16.0.1",
|
|
60
|
+
"@testing-library/user-event": "^14.4.3",
|
|
61
|
+
"@types/jest": "^29.5.0",
|
|
62
|
+
"@types/react": "^19.0.10",
|
|
63
|
+
"@types/react-dom": "^19.0.4",
|
|
64
|
+
"babel-loader": "^10.0.0",
|
|
65
|
+
"eslint": "^9.13.0",
|
|
66
|
+
"eslint-config-prettier": "^10.1.1",
|
|
67
|
+
"eslint-plugin-jest": "^28.8.3",
|
|
68
|
+
"eslint-plugin-react": "^7.37.2",
|
|
69
|
+
"globals": "^16.0.0",
|
|
70
|
+
"husky": "^9.1.6",
|
|
71
|
+
"jest": "^29.5.0",
|
|
72
|
+
"prettier": "^3.5.3",
|
|
73
|
+
"react": "^19.0.0",
|
|
74
|
+
"react-docgen-typescript-plugin": "^1.0.5",
|
|
75
|
+
"react-dom": "^19.0.0",
|
|
76
|
+
"react-scripts": "^5.0.1",
|
|
77
|
+
"rollup": "^4.24.2",
|
|
78
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
79
|
+
"rollup-plugin-delete": "^3.0.1",
|
|
80
|
+
"rollup-plugin-node-externals": "^8.0.0",
|
|
81
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
82
|
+
"storybook": "^8.6.4",
|
|
83
|
+
"ts-jest": "^29.0.5",
|
|
84
|
+
"typescript": "^5.0.2",
|
|
85
|
+
"typescript-eslint": "^8.12.1",
|
|
86
|
+
"vite": "^6.2.1"
|
|
87
|
+
},
|
|
88
|
+
"dependencies": {
|
|
89
|
+
"@babel/runtime": "^7.21.0"
|
|
90
|
+
},
|
|
91
|
+
"bugs": {
|
|
92
|
+
"url": "https://github.com/turog-technologies/adiba-common-libraries/issues"
|
|
93
|
+
},
|
|
94
|
+
"homepage": "https://github.com/turog-technologies/adiba-common-libraries"
|
|
95
|
+
}
|