wally-ui 1.0.15 → 1.0.16
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/package.json +2 -2
- package/playground/showcase/src/app/app.routes.server.ts +8 -0
- package/playground/showcase/src/app/app.routes.ts +5 -1
- package/playground/showcase/src/app/pages/components/button/button.css +0 -0
- package/playground/showcase/src/app/pages/components/button/button.html +192 -0
- package/playground/showcase/src/app/pages/components/button/button.spec.ts +23 -0
- package/playground/showcase/src/app/pages/components/button/button.ts +12 -0
- package/playground/showcase/src/app/pages/components/components.css +0 -0
- package/playground/showcase/src/app/pages/components/components.html +16 -0
- package/playground/showcase/src/app/pages/components/components.routes.ts +12 -0
- package/playground/showcase/src/app/pages/components/components.spec.ts +23 -0
- package/playground/showcase/src/app/pages/components/components.ts +11 -0
- package/playground/showcase/src/app/pages/home/home.html +6 -6
- package/playground/showcase/src/app/pages/home/home.ts +1 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wally-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.16",
|
|
4
4
|
"description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"wally": "dist/cli.js"
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"bugs": {
|
|
46
46
|
"url": "https://github.com/WalissonCF/wally-ui/issues"
|
|
47
47
|
},
|
|
48
|
-
"homepage": "https://
|
|
48
|
+
"homepage": "https://wally-ui.com/",
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/fs-extra": "^11.0.4",
|
|
51
51
|
"@types/node": "^24.5.1",
|
|
@@ -5,6 +5,14 @@ export const serverRoutes: ServerRoute[] = [
|
|
|
5
5
|
path: '',
|
|
6
6
|
renderMode: RenderMode.Prerender
|
|
7
7
|
},
|
|
8
|
+
{
|
|
9
|
+
path: 'components',
|
|
10
|
+
renderMode: RenderMode.Prerender,
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
path: 'components/button',
|
|
14
|
+
renderMode: RenderMode.Prerender,
|
|
15
|
+
},
|
|
8
16
|
{
|
|
9
17
|
path: '**',
|
|
10
18
|
renderMode: RenderMode.Prerender
|
|
File without changes
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
<div class="font-mono">
|
|
2
|
+
<div class="max-w-4xl mx-auto p-6">
|
|
3
|
+
<h1 class="text-4xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
4
|
+
Button
|
|
5
|
+
</h1>
|
|
6
|
+
<p class="text-lg mb-12 text-gray-700 dark:text-gray-400">
|
|
7
|
+
A versatile button component with loading states, notifications, and customizable text.
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
<!-- Basic Usage -->
|
|
11
|
+
<section class="mb-12">
|
|
12
|
+
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
13
|
+
Basic Usage
|
|
14
|
+
</h2>
|
|
15
|
+
|
|
16
|
+
<div class="space-y-8">
|
|
17
|
+
<div>
|
|
18
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
19
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
20
|
+
{{ '<' }}wally-button{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
21
|
+
</code>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
24
|
+
<wally-button></wally-button>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</section>
|
|
29
|
+
|
|
30
|
+
<!-- Custom Text -->
|
|
31
|
+
<section class="mb-12">
|
|
32
|
+
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
33
|
+
Custom Text
|
|
34
|
+
</h2>
|
|
35
|
+
|
|
36
|
+
<div class="space-y-8">
|
|
37
|
+
<div>
|
|
38
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
39
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
40
|
+
{{ '<' }}wally-button text="Save Changes"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
41
|
+
</code>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
44
|
+
<wally-button text="Save Changes"></wally-button>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</section>
|
|
49
|
+
|
|
50
|
+
<!-- States -->
|
|
51
|
+
<section class="mb-12">
|
|
52
|
+
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
53
|
+
States
|
|
54
|
+
</h2>
|
|
55
|
+
|
|
56
|
+
<div class="space-y-8">
|
|
57
|
+
<!-- Disabled -->
|
|
58
|
+
<div>
|
|
59
|
+
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
60
|
+
Disabled
|
|
61
|
+
</h3>
|
|
62
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
63
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
64
|
+
{{ '<' }}wally-button text="Disabled" [disabled]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
65
|
+
</code>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
68
|
+
<wally-button text="Disabled" [disabled]="true"></wally-button>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<!-- Loading -->
|
|
73
|
+
<div>
|
|
74
|
+
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
75
|
+
Loading
|
|
76
|
+
</h3>
|
|
77
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
78
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
79
|
+
{{ '<' }}wally-button text="Loading" [loading]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
80
|
+
</code>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
83
|
+
<wally-button text="Loading" [loading]="true"></wally-button>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- With Notification -->
|
|
88
|
+
<div>
|
|
89
|
+
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
90
|
+
With Notification Badge
|
|
91
|
+
</h3>
|
|
92
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
93
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
94
|
+
{{ '<' }}wally-button text="Messages" [showNotification]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
95
|
+
</code>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
98
|
+
<wally-button text="Messages" [showNotification]="true"></wally-button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</section>
|
|
103
|
+
|
|
104
|
+
<!-- Button Types -->
|
|
105
|
+
<section class="mb-12">
|
|
106
|
+
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
|
|
107
|
+
Button Types
|
|
108
|
+
</h2>
|
|
109
|
+
|
|
110
|
+
<div class="space-y-8">
|
|
111
|
+
<div>
|
|
112
|
+
<h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">Submit Button</h3>
|
|
113
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
114
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
115
|
+
{{ '<' }}wally-button text="Submit Form" type="submit"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
|
|
116
|
+
</code>
|
|
117
|
+
</div>
|
|
118
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
119
|
+
<wally-button text="Submit Form" type="submit"></wally-button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</section>
|
|
124
|
+
|
|
125
|
+
<!-- Properties -->
|
|
126
|
+
<section class="mb-12">
|
|
127
|
+
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">Properties</h2>
|
|
128
|
+
|
|
129
|
+
<div class="space-y-4">
|
|
130
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
131
|
+
<div class="font-mono text-sm mb-2">
|
|
132
|
+
<span class="text-blue-600 dark:text-blue-400">text</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
133
|
+
<span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
134
|
+
<span class="text-green-600 dark:text-green-400">'Wally Button'</span>
|
|
135
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
136
|
+
</div>
|
|
137
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">The text displayed on the button</p>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
141
|
+
<div class="font-mono text-sm mb-2">
|
|
142
|
+
<span class="text-blue-600 dark:text-blue-400">type</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
143
|
+
<span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
144
|
+
<span class="text-green-600 dark:text-green-400">'button'</span>
|
|
145
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
146
|
+
</div>
|
|
147
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
151
|
+
<div class="font-mono text-sm mb-2">
|
|
152
|
+
<span class="text-blue-600 dark:text-blue-400">disabled</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
153
|
+
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
154
|
+
<span class="text-green-600 dark:text-green-400">false</span>
|
|
155
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
156
|
+
</div>
|
|
157
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Whether the button is disabled</p>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
161
|
+
<div class="font-mono text-sm mb-2">
|
|
162
|
+
<span class="text-blue-600 dark:text-blue-400">loading</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
163
|
+
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
164
|
+
<span class="text-green-600 dark:text-green-400">false</span>
|
|
165
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
166
|
+
</div>
|
|
167
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner when true</p>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
|
|
171
|
+
<div class="font-mono text-sm mb-2">
|
|
172
|
+
<span class="text-blue-600 dark:text-blue-400">showNotification</span><span class="text-[#0a0a0a] dark:text-white">: </span>
|
|
173
|
+
<span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
|
|
174
|
+
<span class="text-green-600 dark:text-green-400">false</span>
|
|
175
|
+
<span class="text-[#0a0a0a] dark:text-white">;</span>
|
|
176
|
+
</div>
|
|
177
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</section>
|
|
181
|
+
|
|
182
|
+
<!-- Import -->
|
|
183
|
+
<section class="mb-12">
|
|
184
|
+
<h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">Import</h2>
|
|
185
|
+
<div class="p-4 rounded-lg bg-gray-200 dark:bg-[#121212]">
|
|
186
|
+
<code class="text-sm text-[#0a0a0a] dark:text-white">
|
|
187
|
+
import {{ '{' }} Button {{ '}' }} from './components/button/button';
|
|
188
|
+
</code>
|
|
189
|
+
</div>
|
|
190
|
+
</section>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
+
|
|
3
|
+
import { Button } from './button';
|
|
4
|
+
|
|
5
|
+
describe('Button', () => {
|
|
6
|
+
let component: Button;
|
|
7
|
+
let fixture: ComponentFixture<Button>;
|
|
8
|
+
|
|
9
|
+
beforeEach(async () => {
|
|
10
|
+
await TestBed.configureTestingModule({
|
|
11
|
+
imports: [Button]
|
|
12
|
+
})
|
|
13
|
+
.compileComponents();
|
|
14
|
+
|
|
15
|
+
fixture = TestBed.createComponent(Button);
|
|
16
|
+
component = fixture.componentInstance;
|
|
17
|
+
fixture.detectChanges();
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it('should create', () => {
|
|
21
|
+
expect(component).toBeTruthy();
|
|
22
|
+
});
|
|
23
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import { Button as WallyButton } from '../../../components/button/button';
|
|
3
|
+
|
|
4
|
+
@Component({
|
|
5
|
+
selector: 'app-button-docs',
|
|
6
|
+
imports: [WallyButton],
|
|
7
|
+
templateUrl: './button.html',
|
|
8
|
+
styleUrl: './button.css'
|
|
9
|
+
})
|
|
10
|
+
export class ButtonDocs {
|
|
11
|
+
|
|
12
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<div class="h-dvh antialiased font-mono">
|
|
2
|
+
<div class="w-full h-full flex flex-col items-center justify-center p-4">
|
|
3
|
+
<div class="max-w-md w-full">
|
|
4
|
+
<h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
5
|
+
Components
|
|
6
|
+
</h1>
|
|
7
|
+
<p class="text-gray-700 dark:text-gray-400 mb-8">
|
|
8
|
+
Explore our collection of reusable Angular components.
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<a href="/components/button" class="text-blue-500 underline hover:text-blue-700">
|
|
12
|
+
View Documentation
|
|
13
|
+
</a>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Routes } from '@angular/router';
|
|
2
|
+
|
|
3
|
+
export const componentsRoutes: Routes = [
|
|
4
|
+
{
|
|
5
|
+
path: '',
|
|
6
|
+
loadComponent: () => import('./components').then(m => m.Components)
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
path: 'button',
|
|
10
|
+
loadComponent: () => import('./button/button').then(m => m.ButtonDocs)
|
|
11
|
+
}
|
|
12
|
+
];
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
+
|
|
3
|
+
import { Components } from './components';
|
|
4
|
+
|
|
5
|
+
describe('Components', () => {
|
|
6
|
+
let component: Components;
|
|
7
|
+
let fixture: ComponentFixture<Components>;
|
|
8
|
+
|
|
9
|
+
beforeEach(async () => {
|
|
10
|
+
await TestBed.configureTestingModule({
|
|
11
|
+
imports: [Components]
|
|
12
|
+
})
|
|
13
|
+
.compileComponents();
|
|
14
|
+
|
|
15
|
+
fixture = TestBed.createComponent(Components);
|
|
16
|
+
component = fixture.componentInstance;
|
|
17
|
+
fixture.detectChanges();
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it('should create', () => {
|
|
21
|
+
expect(component).toBeTruthy();
|
|
22
|
+
});
|
|
23
|
+
});
|
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
17
|
<div class="w-full max-w-md">
|
|
18
|
-
<code
|
|
19
|
-
class="w-full mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
|
|
20
|
-
onclick="navigator.clipboard.writeText('npx wally-ui add button')">
|
|
21
|
-
<pre class="m-0">$ npx wally-ui add button</pre>
|
|
22
|
-
</code>
|
|
23
|
-
|
|
24
18
|
<code
|
|
25
19
|
class="w-full mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
|
|
26
20
|
onclick="navigator.clipboard.writeText('npx wally-ui list')">
|
|
27
21
|
<pre class="m-0">$ npx wally-ui list</pre>
|
|
28
22
|
</code>
|
|
29
23
|
</div>
|
|
24
|
+
|
|
25
|
+
<div class="mt-4 w-full max-w-md">
|
|
26
|
+
<a href="/components/button" class="text-blue-500 underline">
|
|
27
|
+
Documentation
|
|
28
|
+
</a>
|
|
29
|
+
</div>
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|