shamil-ui 1.0.0
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 +115 -0
- package/package.json +97 -0
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# shamil-ui
|
|
2
|
+
|
|
3
|
+
Shared UI component library for the **Shamil** system. Built from scratch with React, TypeScript,
|
|
4
|
+
and Rollup.
|
|
5
|
+
|
|
6
|
+
## Purpose
|
|
7
|
+
|
|
8
|
+
`shamil-ui` provides reusable, theme-aware UI components that can be installed in any Shamil/Arena
|
|
9
|
+
microservice. It does **not** contain business logic or API utilities — those stay in
|
|
10
|
+
`@arena/common-web`.
|
|
11
|
+
|
|
12
|
+
## Tech Stack
|
|
13
|
+
|
|
14
|
+
- React 18+
|
|
15
|
+
- TypeScript 5
|
|
16
|
+
- Rollup (ESM + CJS + declarations)
|
|
17
|
+
- SCSS (component-scoped styles)
|
|
18
|
+
- Jest + React Testing Library
|
|
19
|
+
- ESLint + Prettier + Husky
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install shamil-ui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Make sure `react` and `react-dom` are peer dependencies in the consuming project.
|
|
28
|
+
|
|
29
|
+
### Local development with `npm link`
|
|
30
|
+
|
|
31
|
+
You can test the library in a microservice without publishing it:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
# In the shamil-ui package
|
|
35
|
+
cd shamil-ui
|
|
36
|
+
npm link
|
|
37
|
+
|
|
38
|
+
# In the consuming microservice
|
|
39
|
+
cd arena-audit-trail-web
|
|
40
|
+
npm link shamil-ui
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
`shamil-ui` uses **relative imports** internally, so the consuming webpack does not need to
|
|
44
|
+
configure any path aliases for `@/`. After rebuilding the library, reload the microservice to pick
|
|
45
|
+
up the latest changes.
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { Button, ThemeProvider } from 'shamil-ui'
|
|
51
|
+
import 'shamil-ui/dist/shamil-ui.css'
|
|
52
|
+
|
|
53
|
+
export const App = () => (
|
|
54
|
+
<ThemeProvider>
|
|
55
|
+
<Button variant="primary" size="md" onClick={() => console.log('clicked')}>
|
|
56
|
+
Click me
|
|
57
|
+
</Button>
|
|
58
|
+
</ThemeProvider>
|
|
59
|
+
)
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Theme Customization
|
|
63
|
+
|
|
64
|
+
Wrap your application with `ThemeProvider` and optionally pass a partial theme override:
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { ThemeProvider } from 'shamil-ui'
|
|
68
|
+
|
|
69
|
+
const customTheme = {
|
|
70
|
+
colors: {
|
|
71
|
+
primary: '#0052cc',
|
|
72
|
+
},
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export const App = () => <ThemeProvider theme={customTheme}>{/* ... */}</ThemeProvider>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Scripts
|
|
79
|
+
|
|
80
|
+
| Script | Description |
|
|
81
|
+
| ----------------------- | ------------------------------------- |
|
|
82
|
+
| `npm run build` | Build ESM, CJS, and type declarations |
|
|
83
|
+
| `npm run dev` | Build in watch mode |
|
|
84
|
+
| `npm test` | Run Jest tests |
|
|
85
|
+
| `npm run test:coverage` | Run tests with coverage |
|
|
86
|
+
| `npm run lint` | Lint source files |
|
|
87
|
+
| `npm run format` | Format files with Prettier |
|
|
88
|
+
| `npm run type-check` | TypeScript check without emit |
|
|
89
|
+
|
|
90
|
+
## Project Structure
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
src/
|
|
94
|
+
├── components/
|
|
95
|
+
│ └── Button/
|
|
96
|
+
│ ├── Button.tsx
|
|
97
|
+
│ ├── Button.types.ts
|
|
98
|
+
│ ├── Button.scss
|
|
99
|
+
│ ├── Button.test.tsx
|
|
100
|
+
│ └── index.ts
|
|
101
|
+
├── theme/
|
|
102
|
+
│ ├── tokens.ts
|
|
103
|
+
│ ├── ThemeProvider.tsx
|
|
104
|
+
│ ├── ThemeContext.tsx
|
|
105
|
+
│ └── index.ts
|
|
106
|
+
└── index.ts
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Adding a New Component
|
|
110
|
+
|
|
111
|
+
1. Create a folder under `src/components/ComponentName/`.
|
|
112
|
+
2. Add `ComponentName.tsx`, `ComponentName.types.ts`, `ComponentName.scss`,
|
|
113
|
+
`ComponentName.test.tsx`, and `index.ts`.
|
|
114
|
+
3. Export from `src/index.ts`.
|
|
115
|
+
4. Follow the existing Button component as a template.
|
package/package.json
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "shamil-ui",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Shared UI component library for the Shamil system",
|
|
5
|
+
"main": "dist/cjs/index.js",
|
|
6
|
+
"module": "dist/esm/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/esm/index.js",
|
|
11
|
+
"require": "./dist/cjs/index.js",
|
|
12
|
+
"types": "./dist/types/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./dist/shamil-ui.css": "./dist/shamil-ui.css"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "npm run clean && npm run build:types && rollup -c",
|
|
21
|
+
"build:types": "tsc -p tsconfig.build.json",
|
|
22
|
+
"clean": "rm -rf dist",
|
|
23
|
+
"dev": "rollup -c -w",
|
|
24
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
25
|
+
"lint:fix": "eslint src --ext .ts,.tsx --fix",
|
|
26
|
+
"format": "prettier --write .",
|
|
27
|
+
"check-format": "prettier --check .",
|
|
28
|
+
"test": "jest",
|
|
29
|
+
"test:coverage": "jest --coverage",
|
|
30
|
+
"test:watch": "jest --watch",
|
|
31
|
+
"type-check": "tsc --noEmit",
|
|
32
|
+
"prepare": "husky install"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"ace-builds": "^1.44.0",
|
|
36
|
+
"antd": "^6.4.3",
|
|
37
|
+
"antd-phone-input": "^0.3.19",
|
|
38
|
+
"antd-style": "^4.1.0",
|
|
39
|
+
"jsoneditor": "^10.4.3"
|
|
40
|
+
},
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"@ant-design/icons": "^6.0.0",
|
|
43
|
+
"@arena/common-web": "*",
|
|
44
|
+
"antd": "^6.0.0",
|
|
45
|
+
"react": ">=16.8.0",
|
|
46
|
+
"react-dom": ">=16.8.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@babel/core": "^7.24.0",
|
|
50
|
+
"@babel/plugin-transform-runtime": "^7.29.7",
|
|
51
|
+
"@babel/preset-env": "^7.24.0",
|
|
52
|
+
"@babel/preset-react": "^7.23.3",
|
|
53
|
+
"@babel/preset-typescript": "^7.23.3",
|
|
54
|
+
"@babel/runtime": "^7.24.0",
|
|
55
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
56
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
57
|
+
"@rollup/plugin-json": "^6.1.0",
|
|
58
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
59
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
60
|
+
"@testing-library/jest-dom": "^6.4.2",
|
|
61
|
+
"@testing-library/react": "^14.2.1",
|
|
62
|
+
"@types/jest": "^29.5.12",
|
|
63
|
+
"@types/react": "^18.2.64",
|
|
64
|
+
"@types/react-dom": "^18.2.21",
|
|
65
|
+
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
|
66
|
+
"@typescript-eslint/parser": "^7.2.0",
|
|
67
|
+
"eslint": "^8.57.0",
|
|
68
|
+
"eslint-config-prettier": "^9.1.0",
|
|
69
|
+
"eslint-plugin-prettier": "^5.1.3",
|
|
70
|
+
"eslint-plugin-react": "^7.34.0",
|
|
71
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
72
|
+
"husky": "^9.0.11",
|
|
73
|
+
"identity-obj-proxy": "^3.0.0",
|
|
74
|
+
"jest": "^29.7.0",
|
|
75
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
76
|
+
"postcss": "^8.5.15",
|
|
77
|
+
"prettier": "^3.2.5",
|
|
78
|
+
"react": "^18.2.0",
|
|
79
|
+
"react-dom": "^18.2.0",
|
|
80
|
+
"rollup": "^4.13.0",
|
|
81
|
+
"rollup-plugin-dts": "^6.1.0",
|
|
82
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
83
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
84
|
+
"sass": "^1.101.0",
|
|
85
|
+
"ts-jest": "^29.1.2",
|
|
86
|
+
"tslib": "^2.6.2",
|
|
87
|
+
"typescript": "^5.4.2"
|
|
88
|
+
},
|
|
89
|
+
"keywords": [
|
|
90
|
+
"shamil",
|
|
91
|
+
"ui",
|
|
92
|
+
"components",
|
|
93
|
+
"react",
|
|
94
|
+
"typescript"
|
|
95
|
+
],
|
|
96
|
+
"license": "UNLICENSED"
|
|
97
|
+
}
|