@moatamed-sce/ui-components 0.1.0 → 0.1.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/README.md
CHANGED
|
@@ -1,55 +1,75 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @moatamed-sce/ui-components
|
|
2
2
|
|
|
3
|
-
SCE Platform
|
|
3
|
+
The SCE Platform component library: around 300 standalone, presentational Angular components — RTL-first, bilingual (Arabic/English), OnPush, signal-based.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## What's in it
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Every component is **dumb**: no NgRx store, no HTTP calls of its own, state in and events out. The catalog is organised as atomic design.
|
|
8
8
|
|
|
9
|
-
**
|
|
9
|
+
- **Atoms** — `SceButton`, `SceIcon`, badges, tags, chips, dividers, skeletons, progress indicators, verification badges (`sce-engineering-office-verification-badge`), office brand logos, account role icons.
|
|
10
|
+
- **Molecules** — `SceFormInput` (a universal form field rendering text, password, select, multiselect, textarea, checkbox, radio, phone, date and datetime), cards, info fields, video player, QR code, geo-location field, account switcher.
|
|
11
|
+
- **Organisms** — `SceGenericTableComponent` (config-driven table with sorting, pagination, expansion, row actions and menus), `SceFilterFormComponent`, `SceDynamicFormComponent` (builds a typed `FormGroup` from a field schema), `ScePopupComponent`, `SceEmptyStateComponent`, `SceStatusPageComponent`, file viewer, guided tour, dialogs.
|
|
12
|
+
- **Charts and maps** — an ECharts suite and OpenStreetMap/Google map wrappers, behind optional peer dependencies.
|
|
13
|
+
- **Templates** — page shells, auth layouts, dashboard page headers, landing layouts.
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
## Install
|
|
12
16
|
|
|
13
17
|
```bash
|
|
14
|
-
npm install @moatamed-sce/
|
|
18
|
+
npm install @moatamed-sce/core @moatamed-sce/ui-components
|
|
19
|
+
ng add @moatamed-sce/core
|
|
15
20
|
```
|
|
16
21
|
|
|
17
|
-
|
|
22
|
+
`ui-components` needs `@moatamed-sce/core` for its tokens, stylesheets and icon assets. Running `ng add @moatamed-sce/core` wires the stylesheet cascade, the icon assets and the providers in one step; without it, the components build but render unstyled.
|
|
23
|
+
|
|
24
|
+
## Peer dependencies
|
|
18
25
|
|
|
19
|
-
|
|
26
|
+
Angular **21**, PrimeNG 21, `@ngx-translate/core` 18, RxJS 7.8, and `@moatamed-sce/core`. `echarts` and `ngx-echarts` back the chart components; `leaflet`, `qrcode` and `ngx-image-cropper` are optional peers required only by the map, QR and cropper components. Exact ranges live in this package's `package.json`.
|
|
27
|
+
|
|
28
|
+
## Quick start
|
|
20
29
|
|
|
21
30
|
```ts
|
|
22
|
-
import {
|
|
23
|
-
import { SceButton,
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
import { Component, signal } from '@angular/core';
|
|
32
|
+
import { SceButton, SceEmptyStateComponent } from '@moatamed-sce/ui-components';
|
|
33
|
+
|
|
34
|
+
@Component({
|
|
35
|
+
selector: 'app-offers',
|
|
36
|
+
standalone: true,
|
|
37
|
+
imports: [SceButton, SceEmptyStateComponent],
|
|
38
|
+
template: `
|
|
39
|
+
@if (offers().length === 0) {
|
|
40
|
+
<sce-empty-state [title]="'OFFERS.EMPTY_TITLE' | translate" />
|
|
41
|
+
}
|
|
42
|
+
<sce-button variant="primary" [fullWidth]="false" (click)="refresh()"> Refresh </sce-button>
|
|
43
|
+
`,
|
|
44
|
+
})
|
|
45
|
+
export class OffersComponent {
|
|
46
|
+
readonly offers = signal<string[]>([]);
|
|
47
|
+
refresh(): void {}
|
|
48
|
+
}
|
|
26
49
|
```
|
|
27
50
|
|
|
28
|
-
|
|
51
|
+
Import everything from the package root. `@moatamed-sce/ui-components/atoms` and the other subpaths are **monorepo-only path aliases** — they are not published entry points and will not resolve from npm.
|
|
29
52
|
|
|
30
|
-
##
|
|
53
|
+
## Two gotchas worth knowing up front
|
|
31
54
|
|
|
32
|
-
|
|
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 |
|
|
55
|
+
**`sce-button` defaults `fullWidth` to `true`.** A `<sce-button>` with no inputs stretches to fill its container. Pass `[fullWidth]="false"` for an inline button — this catches almost everyone once.
|
|
37
56
|
|
|
38
|
-
|
|
57
|
+
**Most `sce-*-field` components are not `ControlValueAccessor`s.** Putting `formControlName` on them compiles and silently does nothing: no value ever reaches your form. They expose `value` / `valueChange` instead. For reactive forms, use **`sce-form-input`**, which is a real CVA and covers most field types, or bind `value` / `valueChange` by hand.
|
|
39
58
|
|
|
40
|
-
##
|
|
59
|
+
## Translations are not included
|
|
41
60
|
|
|
42
|
-
|
|
43
|
-
- [DISTRIBUTION.md](../../docs/design-system/DISTRIBUTION.md)
|
|
44
|
-
- [VERSIONING.md](../../docs/design-system/VERSIONING.md)
|
|
45
|
-
- [SEARCH.md](../../docs/design-system/SEARCH.md)
|
|
61
|
+
The published tarball ships only icons and stylesheets — **no i18n JSON**. Components reference keys like `COMMON.SAVE`; without your own ngx-translate dictionary they render the raw key. Supply `ar.json` and `en.json` yourself.
|
|
46
62
|
|
|
47
|
-
##
|
|
63
|
+
## Styling
|
|
48
64
|
|
|
49
|
-
|
|
50
|
-
nx build ui-components --configuration=production
|
|
51
|
-
# → dist/libs/ui-components (depends on core)
|
|
65
|
+
Components are styled with the tokens from `@moatamed-sce/core`. Note that **`--space-N` is literally N pixels** (`--space-4` is 4px, not 16px), and that dark mode is an attribute on `<html>`, not a class.
|
|
52
66
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
67
|
+
## Docs
|
|
68
|
+
|
|
69
|
+
- [Consuming the packages in an external app](../../docs/design-system/CONSUMING.md)
|
|
70
|
+
- [Design tokens](../../docs/design-system/TOKENS.md)
|
|
71
|
+
- [Component catalog](../../docs/design-system/COMPONENTS.md)
|
|
72
|
+
|
|
73
|
+
## License
|
|
74
|
+
|
|
75
|
+
MIT
|