wally-ui 1.5.0 β 1.5.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,79 +1,161 @@
|
|
|
1
1
|
# Wally UI
|
|
2
2
|
|
|
3
|
-
A modern Angular component library built with standalone components
|
|
3
|
+
> A modern Angular component library built with standalone components, Tailwind CSS, and enterprise-grade accessibility.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/wally-ui)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
**[Live Demo & Documentation](https://wally-ui.com/)**
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
10
|
+
## Why Wally UI?
|
|
11
|
+
|
|
12
|
+
- **Zero Configuration**: Install components individually - no bloated bundles
|
|
13
|
+
- **Accessibility First**: Enterprise-grade a11y with ARIA support and screen reader compatibility
|
|
14
|
+
- **Dark Mode Native**: Complete light/dark theme support out of the box
|
|
15
|
+
- **SSR Ready**: Full Server-Side Rendering support for performance
|
|
16
|
+
- **Tailwind Powered**: Beautiful, customizable styling with Tailwind CSS v3/v4
|
|
16
17
|
|
|
17
18
|
## Requirements
|
|
18
19
|
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
|
|
20
|
+
- **Tailwind CSS v3 or v4**
|
|
21
|
+
- **Node.js 18+**
|
|
22
|
+
|
|
23
|
+
## π¦ Available Components
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
| Component | Status | Description |
|
|
26
|
+
|-----------|--------|-------------|
|
|
27
|
+
| **Input** | β
**New** | Full-featured input with validation, loading states, and FormGroup support |
|
|
28
|
+
| **Button** | π§ Under Construction | Versatile button with loading states and notifications |
|
|
29
|
+
| **Breadcrumb** | π§ Under Construction | Navigation breadcrumb component |
|
|
24
30
|
|
|
25
|
-
|
|
31
|
+
## π Quick Start
|
|
26
32
|
|
|
33
|
+
### 1. Install a component
|
|
27
34
|
```bash
|
|
28
|
-
# Install
|
|
35
|
+
# Install the Input component (recommended for forms)
|
|
36
|
+
npx wally-ui add input
|
|
37
|
+
|
|
38
|
+
# Install other components
|
|
29
39
|
npx wally-ui add button
|
|
30
40
|
|
|
31
41
|
# List all available components
|
|
32
42
|
npx wally-ui list
|
|
33
43
|
```
|
|
34
44
|
|
|
45
|
+
### 2. Import and use in your Angular component
|
|
46
|
+
```typescript
|
|
47
|
+
import { Component } from '@angular/core';
|
|
48
|
+
import { Input } from './components/wally-ui/input/input';
|
|
49
|
+
|
|
50
|
+
@Component({
|
|
51
|
+
selector: 'app-example',
|
|
52
|
+
imports: [Input], // Standalone component import
|
|
53
|
+
template: `
|
|
54
|
+
<wally-input
|
|
55
|
+
label="Email Address"
|
|
56
|
+
type="email"
|
|
57
|
+
placeholder="Enter your email">
|
|
58
|
+
</wally-input>
|
|
59
|
+
`
|
|
60
|
+
})
|
|
61
|
+
export class ExampleComponent {}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 3. For reactive forms (recommended)
|
|
65
|
+
```typescript
|
|
66
|
+
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
67
|
+
import { Input } from './components/wally-ui/input/input';
|
|
68
|
+
|
|
69
|
+
@Component({
|
|
70
|
+
imports: [Input, ReactiveFormsModule],
|
|
71
|
+
template: `
|
|
72
|
+
<form [formGroup]="userForm">
|
|
73
|
+
<wally-input
|
|
74
|
+
formControlName="email"
|
|
75
|
+
label="Email"
|
|
76
|
+
type="email"
|
|
77
|
+
[valid]="isFieldValid('email')"
|
|
78
|
+
[errorMessage]="getFieldError('email')">
|
|
79
|
+
</wally-input>
|
|
80
|
+
</form>
|
|
81
|
+
`
|
|
82
|
+
})
|
|
83
|
+
export class FormComponent {
|
|
84
|
+
userForm = this.fb.group({
|
|
85
|
+
email: ['', [Validators.required, Validators.email]]
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
35
90
|
## Project Structure
|
|
36
91
|
|
|
37
|
-
|
|
92
|
+
Components are installed directly into your project with zero dependencies:
|
|
38
93
|
|
|
39
94
|
```
|
|
40
|
-
src/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
95
|
+
src/app/components/wally-ui/
|
|
96
|
+
βββ input/
|
|
97
|
+
β βββ input.ts # Component logic with Angular signals
|
|
98
|
+
β βββ input.html # Template with Tailwind styling
|
|
99
|
+
βββ button/
|
|
100
|
+
βββ button.ts
|
|
101
|
+
βββ button.html
|
|
47
102
|
```
|
|
48
103
|
|
|
49
|
-
##
|
|
104
|
+
## Features Showcase
|
|
50
105
|
|
|
51
|
-
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
|
|
106
|
+
### Input Component (v1.5.0)
|
|
107
|
+
```html
|
|
108
|
+
<!-- All input states supported -->
|
|
109
|
+
<wally-input label="Username" placeholder="Enter username"></wally-input>
|
|
110
|
+
<wally-input [loading]="true" placeholder="Processing..."></wally-input>
|
|
111
|
+
<wally-input [valid]="true" placeholder="Valid input"></wally-input>
|
|
112
|
+
<wally-input errorMessage="Field is required"></wally-input>
|
|
113
|
+
<wally-input [disabled]="true" placeholder="Disabled input"></wally-input>
|
|
55
114
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
import { Component } from '@angular/core';
|
|
59
|
-
import { Button } from './components/wally-ui/button/button';
|
|
115
|
+
<!-- Password with toggle -->
|
|
116
|
+
<wally-input type="password" label="Password"></wally-input>
|
|
60
117
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
imports: [Button],
|
|
64
|
-
template: `<wally-button>Click me</wally-button>`
|
|
65
|
-
})
|
|
66
|
-
export class ExampleComponent {}
|
|
118
|
+
<!-- FormGroup integration -->
|
|
119
|
+
<wally-input formControlName="email" type="email"></wally-input>
|
|
67
120
|
```
|
|
68
121
|
|
|
69
|
-
|
|
122
|
+
**Features:**
|
|
123
|
+
- β
Complete ControlValueAccessor implementation
|
|
124
|
+
- β
Angular Signals architecture (Angular 20+ optimized)
|
|
125
|
+
- β
Loading, valid, error, disabled states
|
|
126
|
+
- β
Password visibility toggle
|
|
127
|
+
- β
Full accessibility (ARIA attributes, screen readers)
|
|
128
|
+
- β
Dark mode support
|
|
129
|
+
- β
TypeScript interfaces
|
|
130
|
+
|
|
131
|
+
## AI Assistant Ready
|
|
132
|
+
|
|
133
|
+
This library is designed to work seamlessly with AI coding assistants:
|
|
70
134
|
|
|
71
|
-
|
|
135
|
+
- **Clear Documentation**: Comprehensive examples and API references
|
|
136
|
+
- **Semantic Naming**: Intuitive component and property names
|
|
137
|
+
- **Copy-Paste Ready**: All examples work out of the box
|
|
138
|
+
- **IntelliSense**: Full TypeScript support for autocomplete
|
|
72
139
|
|
|
73
|
-
## Documentation
|
|
140
|
+
## Documentation & Examples
|
|
74
141
|
|
|
75
|
-
|
|
142
|
+
- **[Complete Documentation](https://wally-ui.com/documentation)**
|
|
143
|
+
- **[Component Examples](https://wally-ui.com/documentation/components)**
|
|
144
|
+
- **[Live Playground](https://wally-ui.com/)**
|
|
145
|
+
|
|
146
|
+
## Roadmap
|
|
147
|
+
|
|
148
|
+
- [ ] **Select Component** - Dropdown with search and multi-select
|
|
149
|
+
- [ ] **Modal Component** - Overlay dialogs and popups
|
|
150
|
+
- [ ] **Table Component** - Data tables with sorting and pagination
|
|
151
|
+
- [ ] **Form Component** - Complete form wrapper with validation
|
|
152
|
+
- [ ] **Card Component** - Content containers
|
|
153
|
+
- [ ] **Badge Component** - Status indicators
|
|
76
154
|
|
|
77
155
|
## License
|
|
78
156
|
|
|
79
|
-
MIT
|
|
157
|
+
MIT Β© [Walisson Carvalho](https://github.com/walissoncarvalho)
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
**Built with for the Angular community**
|
package/package.json
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
|
-
<nav class="">
|
|
2
|
-
<
|
|
1
|
+
<nav class="transition duration-200 ease-in-out" aria-label="Breadcrumb">
|
|
2
|
+
<ol class="flex items-center flex-wrap gap-x-2 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400 antialiased">
|
|
3
3
|
@for (item of items(); track item.label; let isLast = $last) {
|
|
4
4
|
@if (!isLast && item.url) {
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
<li class="flex items-center gap-2">
|
|
6
|
+
<a
|
|
7
|
+
[routerLink]="item.url"
|
|
8
|
+
class="hover:text-blue-500 transition-colors">
|
|
9
|
+
{{ item.label }}
|
|
10
|
+
</a>
|
|
11
|
+
<span class="text-neutral-500 dark:text-neutral-500" aria-hidden="true">/</span>
|
|
12
|
+
</li>
|
|
11
13
|
} @else {
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
<li>
|
|
15
|
+
<span class="text-[#0a0a0a] dark:text-white font-medium" [attr.aria-current]="isLast ? 'page' : null">
|
|
16
|
+
{{ item.label }}
|
|
17
|
+
</span>
|
|
18
|
+
</li>
|
|
15
19
|
}
|
|
16
20
|
}
|
|
17
|
-
</
|
|
21
|
+
</ol>
|
|
18
22
|
</nav>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@if (label()) {
|
|
2
|
-
<div class="py-2">
|
|
2
|
+
<div class="py-2 antialiased">
|
|
3
3
|
<label [for]="inputId" class="block text-sm font-medium text-[#0a0a0a] dark:text-white">
|
|
4
4
|
{{ label() }}
|
|
5
5
|
</label>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
focus:outline-none focus:ring-2 focus:ring-neutral-300
|
|
20
20
|
bg-gray-100
|
|
21
21
|
dark:bg-[#1b1b1b] dark:text-white dark:placeholder:text-neutral-500 dark:focus:ring-neutral-700
|
|
22
|
-
disabled:opacity-70 disabled:pointer-events-none disabled:cursor-not-allowed
|
|
22
|
+
disabled:opacity-70 disabled:pointer-events-none disabled:cursor-not-allowed antialiased
|
|
23
23
|
transition duration-200 ease-in-out
|
|
24
24
|
py-4 px-4" [ngClass]="{
|
|
25
25
|
'pe-12': type() === 'password',
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
@if (errorMessage()) {
|
|
66
66
|
<div class="py-1" [id]="inputId + '-error'">
|
|
67
|
-
<span class="text-sm text-red-500 font-medium">
|
|
67
|
+
<span class="text-sm text-red-500 font-medium antialiased">
|
|
68
68
|
{{ errorMessage() }}
|
|
69
69
|
</span>
|
|
70
70
|
</div>
|