@moatamed-sce/ui-components 0.1.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
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# `@moatamed-sce/ui-components`
|
|
2
|
+
|
|
3
|
+
SCE Platform design system — presentational Angular components (atoms, molecules, organisms, templates).
|
|
4
|
+
|
|
5
|
+
**Dumb only** — no NgRx store, no HTTP. Depends on `@moatamed-sce/core`.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
**This monorepo:** path alias `@moatamed-sce/ui-components` → `libs/ui-components/src`.
|
|
10
|
+
|
|
11
|
+
**npm (public):**
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @moatamed-sce/ui-components @moatamed-sce/core
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Peers: Angular 21, PrimeNG 21, `@ngx-translate/core` 18, RxJS 7.8. See `package.json` for the full peer list (includes optional map/cropper peers used by specific components).
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { provideSceUi } from '@moatamed-sce/core';
|
|
23
|
+
import { SceButton, SceEngineeringOfficeVerificationBadgeComponent } from '@moatamed-sce/ui-components';
|
|
24
|
+
// Secondary entry points (path aliases in monorepo):
|
|
25
|
+
// import { SceIcon } from '@moatamed-sce/ui-components/atoms';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Wire styles + icon assets as described in [INSTALL.md](../../docs/design-system/INSTALL.md).
|
|
29
|
+
|
|
30
|
+
## Brand identity atoms
|
|
31
|
+
|
|
32
|
+
| Component | Selector | Notes |
|
|
33
|
+
| -------------------------- | ------------------------------------------- | --------------------------------------------- |
|
|
34
|
+
| Verification badge (موثّق) | `sce-engineering-office-verification-badge` | Prefer over raw checkmark `<img>` |
|
|
35
|
+
| Office brand logo | `sce-office-brand-logo` | Photo/icon detection + `office1.svg` fallback |
|
|
36
|
+
| Account role icon | `sce-dashboard-account-role-icon` | Dashboard roles |
|
|
37
|
+
|
|
38
|
+
Live demos: design-system lab → `/atoms/verification-badge`, `/atoms/office-brand-logo`, `/icons`.
|
|
39
|
+
|
|
40
|
+
## Docs
|
|
41
|
+
|
|
42
|
+
- [INSTALL.md](../../docs/design-system/INSTALL.md)
|
|
43
|
+
- [DISTRIBUTION.md](../../docs/design-system/DISTRIBUTION.md)
|
|
44
|
+
- [VERSIONING.md](../../docs/design-system/VERSIONING.md)
|
|
45
|
+
- [SEARCH.md](../../docs/design-system/SEARCH.md)
|
|
46
|
+
|
|
47
|
+
## Build / publish
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
nx build ui-components --configuration=production
|
|
51
|
+
# → dist/libs/ui-components (depends on core)
|
|
52
|
+
|
|
53
|
+
npm run publish:sce-libs # dry-run both packages
|
|
54
|
+
npm run publish:sce-libs:npm # publish to npmjs.org
|
|
55
|
+
```
|