@wearenotch/ui-angular 0.3.2 → 0.6.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 +107 -0
- package/package.json +4 -5
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# @wearenotch/ui-angular
|
|
2
|
+
|
|
3
|
+
Angular components for the Notch Design System.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @wearenotch/ui-angular @wearenotch/tokens
|
|
9
|
+
# or
|
|
10
|
+
npm install @wearenotch/ui-angular @wearenotch/tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`@angular/common`, `@angular/core`, and `@angular/forms` (>=17) are peer dependencies.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
Import the tokens stylesheet **once** in your global styles:
|
|
18
|
+
|
|
19
|
+
```scss
|
|
20
|
+
/* src/styles.scss */
|
|
21
|
+
@import '@wearenotch/tokens/css';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Every component is **standalone** — import it directly into the consuming component's `imports` array. No `NgModule` required.
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { Component } from '@angular/core';
|
|
28
|
+
import { ButtonComponent, InputComponent, FormFieldComponent } from '@wearenotch/ui-angular';
|
|
29
|
+
|
|
30
|
+
@Component({
|
|
31
|
+
selector: 'app-sign-in',
|
|
32
|
+
standalone: true,
|
|
33
|
+
imports: [ButtonComponent, InputComponent, FormFieldComponent],
|
|
34
|
+
template: `
|
|
35
|
+
<form>
|
|
36
|
+
<notch-form-field label="Email" htmlFor="email">
|
|
37
|
+
<notch-input id="email" type="email" [(ngModel)]="email" />
|
|
38
|
+
</notch-form-field>
|
|
39
|
+
<notch-button variant="primary" type="submit">Sign in</notch-button>
|
|
40
|
+
</form>
|
|
41
|
+
`,
|
|
42
|
+
})
|
|
43
|
+
export class SignInComponent {
|
|
44
|
+
email = '';
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Dark mode
|
|
49
|
+
|
|
50
|
+
Dark mode is CSS-only — toggle the `data-theme` attribute on `<html>`:
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
No service, no observable — every component reads tokens that respond to `data-theme="dark"`.
|
|
57
|
+
|
|
58
|
+
## Components
|
|
59
|
+
|
|
60
|
+
35 components covering primitives, forms, feedback, navigation, layout, and data display. All use:
|
|
61
|
+
|
|
62
|
+
- `standalone: true`
|
|
63
|
+
- `ChangeDetectionStrategy.OnPush`
|
|
64
|
+
- `ViewEncapsulation.None`
|
|
65
|
+
- `notch-` selector prefix (e.g. `notch-button`, `notch-form-field`)
|
|
66
|
+
- Signal API (`input()`, `output()`, `signal()`, `computed()`)
|
|
67
|
+
|
|
68
|
+
**Primitives** Button, DangerButton, IconButton, Badge, Tag, Avatar, Spinner, Skeleton, Tooltip
|
|
69
|
+
**Forms** Input, Textarea, Select, MultiSelect, Checkbox, Switch, Slider, FormField, FileUpload, DatePicker, RichTextEditor
|
|
70
|
+
**Feedback** Alert, Notification, ProgressBar, EmptyState
|
|
71
|
+
**Navigation** Tabs, Accordion, Breadcrumbs, Pagination, Stepper
|
|
72
|
+
**Layout** Card, Modal, List, Carousel
|
|
73
|
+
**Data display** Table, Chart
|
|
74
|
+
|
|
75
|
+
## Forms integration
|
|
76
|
+
|
|
77
|
+
Form controls (Input, Textarea, Select, MultiSelect, Checkbox, Switch, Slider, DatePicker, FileUpload, RichTextEditor) implement `ControlValueAccessor` — use `[(ngModel)]` or reactive `formControlName`.
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
<notch-input formControlName="email" />
|
|
81
|
+
<notch-select [options]="countries" formControlName="country" />
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Services
|
|
85
|
+
|
|
86
|
+
Two singletons (`providedIn: 'root'`) — inject anywhere:
|
|
87
|
+
|
|
88
|
+
- `ModalService` — open / close modals imperatively
|
|
89
|
+
- `NotificationService` — fire toast notifications
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
constructor(private modal: ModalService) {}
|
|
93
|
+
|
|
94
|
+
openConfirm() {
|
|
95
|
+
this.modal.open(ConfirmDialogComponent, { title: 'Delete account?' });
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Scripts
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
pnpm --filter @wearenotch/ui-angular test # run jest
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## License
|
|
106
|
+
|
|
107
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wearenotch/ui-angular",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Angular components for the Notch Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Notch <support@wearenotch.com>",
|
|
@@ -31,12 +31,11 @@
|
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@angular/common": ">=17.0.0",
|
|
34
|
-
"@angular/core": ">=17.0.0"
|
|
35
|
-
|
|
36
|
-
"dependencies": {
|
|
37
|
-
"@angular/forms": "^21.2.4"
|
|
34
|
+
"@angular/core": ">=17.0.0",
|
|
35
|
+
"@angular/forms": ">=17.0.0"
|
|
38
36
|
},
|
|
39
37
|
"devDependencies": {
|
|
38
|
+
"@angular/forms": "^21.2.4",
|
|
40
39
|
"@jest/globals": "^30.3.0",
|
|
41
40
|
"@testing-library/angular": "^19.1.1",
|
|
42
41
|
"@testing-library/jest-dom": "^6.9.1",
|