wally-ui 1.9.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/src/app/components/button/button.html

@@ -1,28 +1,7 @@
-<button
-    [type]="type()"
-    [disabled]="disabled() || loading()"
-    [attr.aria-label]="ariaLabel() || null"
-    [attr.aria-describedby]="ariaDescribedBy() || null"
-    [attr.aria-pressed]="ariaPressed()"
-    [attr.aria-busy]="loading()"
+<button [type]="type()" [disabled]="disabled() || loading()" [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-describedby]="ariaDescribedBy() || null" [attr.aria-pressed]="ariaPressed()" [attr.aria-busy]="loading()"
     (click)="handleClick()"
-    class="
-        group
-        relative
-        w-full
-        flex items-center justify-center gap-2
-        text-white text-sm font-medium dark:text-[#0a0a0a]
-        bg-[#0a0a0a] hover:bg-[#0a0a0a]/85
-        disabled:bg-[#0a0a0a]/85
-        dark:bg-white dark:hover:bg-white/85
-        dark:disabled:bg-white/85
-        disabled:pointer-events-none
-        p-2.5
-        rounded-md
-        transition duration-300 ease-in-out
-        antialiased
-        cursor-pointer
-    ">
+    [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white disabled:pointer-events-none p-2.5 rounded-md transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()">
 
     @if (showNotification()) {
     <span class="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">
@@ -34,8 +13,7 @@
     }
 
     @if (loading()) {
-    <svg class="size-4 animate-spin text-white dark:text-[#0a0a0a]" xmlns="http://www.w3.org/2000/svg" fill="none"
-        viewBox="0 0 24 24">
+    <svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor"
             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">

package/playground/showcase/src/app/components/button/button.ts

@@ -1,5 +1,8 @@
-import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
+import { Component, computed, inject, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
 
 @Component({
   selector: 'wally-button',
@@ -10,10 +13,14 @@ import { CommonModule } from '@angular/common';
   templateUrl: './button.html',
 })
 export class Button {
+  private router = inject(Router);
+
   type: InputSignal<string> = input<string>('button');
   disabled: InputSignal<boolean> = input<boolean>(false);
   loading: InputSignal<boolean> = input<boolean>(false);
   showNotification: InputSignal<boolean> = input<boolean>(false);
+  variant: InputSignal<ButtonVariant> = input<ButtonVariant>('primary');
+  href: InputSignal<string> = input<string>('');
 
   // Accessibility properties
   ariaLabel: InputSignal<string> = input<string>('');
@@ -22,7 +29,29 @@ export class Button {
 
   click: OutputEmitterRef<void> = output<void>();
 
+  // Computed classes based on variant
+  variantClasses: Signal<string> = computed(() => {
+    const variantMap: Record<ButtonVariant, string> = {
+      primary: 'bg-[#0a0a0a] hover:bg-[#0a0a0a]/85 disabled:bg-[#0a0a0a]/85 dark:text-[#0a0a0a] dark:bg-white dark:hover:bg-white/85 dark:disabled:bg-white/85 dark:disabled:text-[#0a0a0a]/60',
+      secondary: '!text-[#0a0a0a] bg-neutral-200 hover:bg-neutral-200/60 disabled:bg-neutral-200/80 disabled:!text-neutral-400 dark:!text-white dark:bg-white/20 dark:hover:bg-white/10 dark:disabled:bg-white/5 dark:disabled:text-white/50',
+      destructive: 'dark:text-white bg-red-500 hover:bg-red-500/80 disabled:bg-red-500/80 disabled:text-white/80 dark:disabled:text-white/60',
+      outline: '!text-[#0a0a0a] bg-transparent border border-neutral-400 hover:bg-neutral-200/60 disabled:!text-neutral-500 dark:!text-white dark:border-neutral-500 dark:bg-neutral-500/10 dark:hover:bg-neutral-500/20 dark:disabled:!text-white/60',
+      ghost: '!text-[#0a0a0a] bg-transparent hover:bg-neutral-100 disabled:!text-neutral-400 dark:!text-white dark:hover:bg-white/5 dark:disabled:!text-white/50',
+      link: '!text-blue-600 bg-transparent underline-offset-4 hover:underline disabled:!text-blue-400 dark:!text-blue-600 dark:hover:!text-blue-500 dark:disabled:!text-blue-400'
+    };
+
+    return variantMap[this.variant()] || variantMap.primary;
+  });
+
   handleClick(): void {
+    if (this.variant() === 'link' && this.href()) {
+      if (this.href().startsWith('http://') || this.href().startsWith('https://')) {
+        window.open(this.href(), '_blank');
+      } else {
+        this.router.navigate([this.href()]);
+      }
+    }
+
     this.click.emit();
   }
 }

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -8,30 +8,171 @@ export const ButtonCodeExamples = {
   componentImport: `@Component({
   selector: 'app-example',
   imports: [Button],
-  templateUrl: './example.html',
-  styleUrl: './example.css'
+  templateUrl: './example.html'
 })`,
 
   // Basic usage
-  basicUsage: `<wally-button>Wally Button</wally-button>`,
+  basicUsage: `<wally-button>Click me</wally-button>`,
+
+  // === VARIANTS ===
+
+  // Primary (Default)
+  primaryVariant: `<!-- Default variant -->
+<wally-button>Primary Button</wally-button>
+
+<!-- Explicit primary -->
+<wally-button variant="primary">Primary Button</wally-button>`,
+
+  // Secondary
+  secondaryVariant: `<wally-button variant="secondary">Secondary Button</wally-button>`,
+
+  // Destructive
+  destructiveVariant: `<wally-button variant="destructive">Delete Account</wally-button>`,
+
+  // Outline
+  outlineVariant: `<wally-button variant="outline">Outline Button</wally-button>`,
+
+  // Ghost
+  ghostVariant: `<wally-button variant="ghost">Ghost Button</wally-button>`,
+
+  // Link
+  linkVariant: `<!-- Internal navigation -->
+<wally-button variant="link" href="/components">View Components</wally-button>
+
+<!-- External link -->
+<wally-button variant="link" href="https://github.com">GitHub</wally-button>`,
+
+  // === STATES ===
 
-  // States
   disabled: `<wally-button [disabled]="true">Disabled</wally-button>`,
-  loading: `<wally-button [loading]="true">Loading</wally-button>`,
+
+  loading: `<wally-button [loading]="true">Loading...</wally-button>`,
+
   notification: `<wally-button [showNotification]="true">Messages</wally-button>`,
 
-  // Types
+  // === PRODUCTION EXAMPLES ===
+
+  // CTA Button
+  ctaExample: `<!-- Call-to-Action Example -->
+<wally-button>
+  Get Started Free
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="2" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+  </svg>
+</wally-button>`,
+
+  // Login Form
+  loginExample: `<!-- Login Form Example -->
+<form (ngSubmit)="onLogin()">
+  <!-- ... form fields ... -->
+
+  <div class="flex gap-2">
+    <wally-button
+      type="submit"
+      [loading]="isLoggingIn()"
+      [disabled]="!loginForm.valid">
+      Sign In
+    </wally-button>
+
+    <wally-button
+      variant="secondary"
+      type="button"
+      (click)="goToSignUp()">
+      Create Account
+    </wally-button>
+  </div>
+</form>`,
+
+  loginExampleTs: `export class LoginComponent {
+  isLoggingIn = signal(false);
+  loginForm: FormGroup;
+
+  onLogin() {
+    this.isLoggingIn.set(true);
+
+    this.authService.login(this.loginForm.value)
+      .subscribe({
+        next: () => this.router.navigate(['/dashboard']),
+        error: () => this.isLoggingIn.set(false)
+      });
+  }
+}`,
+
+  // Delete Confirmation
+  deleteExample: `<!-- Delete Confirmation Modal -->
+<div class="modal">
+  <h2>Delete Account?</h2>
+  <p>This action cannot be undone.</p>
+
+  <div class="flex gap-2 justify-end">
+    <wally-button
+      variant="ghost"
+      (click)="closeModal()">
+      Cancel
+    </wally-button>
+
+    <wally-button
+      variant="destructive"
+      [loading]="isDeleting()"
+      (click)="confirmDelete()">
+      Delete Account
+    </wally-button>
+  </div>
+</div>`,
+
+  // Dashboard Actions
+  dashboardExample: `<!-- Dashboard Actions -->
+<div class="dashboard-header">
+  <wally-button variant="outline" (click)="exportData()">
+    Export
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+         stroke-width="1.5" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+    </svg>
+  </wally-button>
+
+  <wally-button (click)="createNew()">
+    Create New
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+         stroke-width="2" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+  </wally-button>
+</div>`,
+
+  // Icon Button with Notification
+  notificationButton: `<!-- Notification Icon Button -->
+<wally-button
+  [showNotification]="hasUnreadMessages()"
+  ariaLabel="View messages">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+  </svg>
+</wally-button>`,
+
+  // === BUTTON TYPES ===
+
   submit: `<wally-button type="submit">Submit Form</wally-button>`,
+  reset: `<wally-button type="reset" variant="ghost">Reset</wally-button>`,
+
+  // === EVENTS ===
 
-  // Events
   clickTemplate: `<wally-button (click)="handleClick()">Click Me</wally-button>`,
+
   clickMethod: `handleClick(): void {
-  this.clickMessage.set('Button clicked!');
+  console.log('Button clicked!');
+  // Your logic here
 }`,
 
-  // Icons
+  // === ICONS ===
+
   iconWithText: `<wally-button>
-  Save
+  Save Changes
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" class="size-5">
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -39,7 +180,7 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
-  iconOnly: `<wally-button>
+  iconOnly: `<wally-button ariaLabel="Notifications">
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" class="size-5">
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -47,8 +188,19 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
-  // Accessibility
-  ariaLabel: `<wally-button ariaLabel="Save document">
+  iconLeft: `<wally-button>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="2" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+  </svg>
+  Back
+</wally-button>`,
+
+  // === ACCESSIBILITY ===
+
+  ariaLabel: `<!-- Essential for icon-only buttons -->
+<wally-button ariaLabel="Save document">
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" class="size-5">
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -56,20 +208,21 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
-  ariaPressed: `<wally-button [ariaPressed]="isToggled">
-  Toggle Setting
+  ariaPressed: `<!-- For toggle buttons -->
+<wally-button [ariaPressed]="isMuted()">
+  {{ isMuted() ? 'Unmute' : 'Mute' }}
 </wally-button>`,
 
-  ariaBusy: `<wally-button [loading]="true">
-  Processing...
+  ariaBusy: `<!-- Automatically set when loading="true" -->
+<wally-button [loading]="isSaving()">
+  Save Changes
 </wally-button>`,
 
-  // Properties
-  propertyType: `type: string = 'button';`,
-  propertyDisabled: `disabled: boolean = false;`,
-  propertyLoading: `loading: boolean = false;`,
-  propertyShowNotification: `showNotification: boolean = false;`,
-  propertyAriaLabel: `ariaLabel: string = '';`,
-  propertyAriaPressed: `ariaPressed: boolean | undefined = undefined;`,
-  propertyAriaDescribedBy: `ariaDescribedBy: string = '';`,
-};
+  ariaDescribedBy: `<!-- Connect button to description -->
+<wally-button ariaDescribedBy="save-description">
+  Save
+</wally-button>
+<p id="save-description" class="sr-only">
+  Saves your changes permanently
+</p>`,
+};