wally-ui 1.0.17 → 1.2.0

package/README.md

@@ -1,10 +1,79 @@
 # Wally UI
 
-Where's Wally? Right here — bringing you ready-to-use Angular components.
+A modern Angular component library built with standalone components and Tailwind CSS. Wally UI provides a collection of reusable, accessible components that integrate seamlessly into your Angular applications.
 
 **[Live Demo](https://wally-ui.com/)**
 
-## Usage
+## Features
+
+- Built for Angular 17+ with standalone component architecture
+- Server-Side Rendering (SSR) support
+- Dark mode support out of the box
+- Tailwind CSS v3/v4 styling
+- TypeScript interfaces and type safety
+- Individual component installation
+- Zero configuration setup
+
+## Requirements
+
+- Angular 17+ (required for standalone component support)
+- Tailwind CSS v3 or v4
+- Node.js 18+
+
+## Installation
+
+Install components individually using the CLI:
+
 ```bash
-npx wally-ui add button     # Add button component
-npx wally-ui list           # List available components
+# Install specific component
+npx wally-ui add button
+
+# List all available components
+npx wally-ui list
+```
+
+## Project Structure
+
+When installing a component, Wally UI creates the following structure:
+
+```
+src/
+└── app/
+    └── components/
+        └── wally-ui/
+            └── button/
+                ├── button.ts
+                └── button.html
+```
+
+## Quick Start
+
+1. Install a component:
+```bash
+npx wally-ui add button
+```
+
+2. Import and use in your component:
+```typescript
+import { Component } from '@angular/core';
+import { Button } from './components/wally-ui/button/button';
+
+@Component({
+  selector: 'app-example',
+  imports: [Button],
+  template: `<wally-button text="Click me"></wally-button>`
+})
+export class ExampleComponent {}
+```
+
+## Development Status
+
+Wally UI is currently in experimental development. Components are being actively developed and new features are continuously added. More components will be available soon.
+
+## Documentation
+
+Visit [wally-ui.com](https://wally-ui.com/) for complete documentation, examples, and component API references.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.0.17",
+  "version": "1.2.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/app.routes.ts

@@ -9,4 +9,8 @@ export const routes: Routes = [
         path: 'components',
         loadChildren: () => import('./pages/components/components.routes').then(m => m.componentsRoutes)
     },
+    {
+        path: 'mcp',
+        loadComponent: () => import('./pages/mcp/mcp').then(m => m.MCP)
+    }
 ];

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

@@ -0,0 +1,18 @@
+<nav class="">
+  <div class="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-400">
+    @for (item of items(); track item.label; let isLast = $last) {
+      @if (!isLast && item.url) {
+        <a
+          [routerLink]="item.url"
+          class="hover:text-blue-500 transition-colors">
+          {{ item.label }}
+        </a>
+        <span class="text-gray-400 dark:text-gray-600">/</span>
+      } @else {
+        <span class="text-[#0a0a0a] dark:text-white font-medium">
+          {{ item.label }}
+        </span>
+      }
+    }
+  </div>
+</nav>

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

@@ -0,0 +1,20 @@
+import { Component, input, InputSignal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+export interface BreadcrumbItem {
+  label: string;
+  url?: string;
+}
+
+@Component({
+  selector: 'wally-breadcrumb',
+  imports: [
+    CommonModule,
+    RouterModule
+  ],
+  templateUrl: './breadcrumb.html',
+})
+export class Breadcrumb {
+  items: InputSignal<BreadcrumbItem[]> = input<BreadcrumbItem[]>([]);
+}

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

@@ -1,8 +1,9 @@
-<button [type]="type()" [disabled]="disabled() || loading()" class="
+<button [type]="type()" [disabled]="disabled() || loading()" (click)="handleClick()" class="
         group
         relative
         w-full
-        flex items-center justify-center
+        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
@@ -10,7 +11,7 @@
         disabled:pointer-events-none
         p-2.5
         rounded-md
-        transition delay-150 duration-300 ease-in-out
+        transition duration-300 ease-in-out
         antialiased
         cursor-pointer
     ">
@@ -25,7 +26,7 @@
     }
 
     @if (loading()) {
-    <svg class="mr-3 -ml-1 size-4 animate-spin text-white dark:text-[#0a0a0a]" xmlns="http://www.w3.org/2000/svg" fill="none"
+    <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">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor"
@@ -34,12 +35,5 @@
     </svg>
     }
 
-    <span class="
-    text-white
-    text-sm
-    font-medium
-    dark:text-[#0a0a0a]
-    ">
-        {{ text() }}
-    </span>
+    <ng-content></ng-content>
 </button>

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

@@ -1,4 +1,4 @@
-import { Component, input, InputSignal } from '@angular/core';
+import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -10,9 +10,14 @@ import { CommonModule } from '@angular/common';
   templateUrl: './button.html',
 })
 export class Button {
-  text: InputSignal<string> = input<string>('Wally Button');
   type: InputSignal<string> = input<string>('button');
   disabled: InputSignal<boolean> = input<boolean>(false);
   loading: InputSignal<boolean> = input<boolean>(false);
   showNotification: InputSignal<boolean> = input<boolean>(false);
+
+  click: OutputEmitterRef<void> = output<void>();
+
+  handleClick(): void {
+    this.click.emit();
+  }
 }

package/playground/showcase/src/app/core/services/ai-prompt.service.ts

@@ -0,0 +1,43 @@
+import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AiPromptService {
+
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+
+  generateClaudeUrl(pageUrl?: string): string {
+    const url = pageUrl || this.getCurrentUrl();
+    const basePrompt = `I'm looking at this Wally UI documentation: ${url} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
+
+    return `https://claude.ai/new?q=${encodeURIComponent(basePrompt)}`;
+  }
+
+  generateChatGptUrl(pageUrl?: string): string {
+    const url = pageUrl || this.getCurrentUrl();
+    const basePrompt = `I'm looking at this Wally UI documentation: ${url} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
+
+    return `https://chatgpt.com/?prompt=${encodeURIComponent(basePrompt)}`;
+  }
+
+  private getCurrentUrl(): string {
+    if (isPlatformBrowser(this.platformId)) {
+      return window.location.href;
+    }
+    // Fallback for SSR - you can customize this
+    return 'https://wally-ui.com/components/button';
+  }
+
+  generateCustomPromptUrl(aiService: 'claude' | 'chatgpt', customPrompt: string, pageUrl?: string): string {
+    const url = pageUrl || this.getCurrentUrl();
+    const fullPrompt = `${customPrompt} ${url}`;
+
+    if (aiService === 'claude') {
+      return `https://claude.ai/new?q=${encodeURIComponent(fullPrompt)}`;
+    } else {
+      return `https://chatgpt.com/?prompt=${encodeURIComponent(fullPrompt)}`;
+    }
+  }
+}

package/playground/showcase/src/app/pages/components/breadcrumb-docs/breadcrumb-docs.html

@@ -0,0 +1,208 @@
+<div class="font-mono">
+  <div class="max-w-4xl mx-auto p-6">
+    <div class="mb-4">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </div>
+
+    <h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
+      Breadcrumb
+    </h1>
+    <p class="text-gray-700 dark:text-gray-400 mb-6">
+      A navigation component that shows the current page location within a hierarchy.
+    </p>
+
+    <div class="flex flex-wrap gap-2 mb-6">
+      <a [href]="claudeUrl" target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-gray-200 dark:bg-[#121212] text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-[#1a1a1a] hover:text-[#0a0a0a] dark:hover:text-white transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24">
+          <path fill="currentColor"
+            d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
+        </svg>
+
+        Open in Claude
+      </a>
+
+      <a [href]="chatGptUrl" target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-gray-200 dark:bg-[#121212] text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-[#1a1a1a] hover:text-[#0a0a0a] dark:hover:text-white transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 48 48">
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
+        </svg>
+
+        Open in ChatGPT
+      </a>
+    </div>
+
+    <!-- Installation -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
+      <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+        <code class="text-sm text-[#0a0a0a] dark:text-white">
+          npx wally-ui add breadcrumb
+        </code>
+      </div>
+    </section>
+
+    <!-- Preview -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
+        Preview
+      </h2>
+      <div class="p-6 border rounded-lg bg-white dark:bg-[#121212] h-60">
+          <div class="flex items-center justify-center h-full">
+            <wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
+          </div>
+      </div>
+    </section>
+
+    <!-- Import -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
+      <div class="space-y-4">
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <code class="text-sm text-[#0a0a0a] dark:text-white">
+            import {{ '{' }} Breadcrumb, BreadcrumbItem {{ '}' }} from './components/wally-ui/breadcrumb/breadcrumb';
+          </code>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <code class="text-sm text-[#0a0a0a] dark:text-white">
+            &#64;Component({{ '{' }}<br>
+            &nbsp;&nbsp;selector: 'app-example',<br>
+            &nbsp;&nbsp;imports: [Breadcrumb],<br>
+            &nbsp;&nbsp;templateUrl: './example.html',<br>
+            &nbsp;&nbsp;styleUrl: './example.css'<br>
+            {{ '}' }})
+          </code>
+        </div>
+      </div>
+    </section>
+
+    <!-- Basic Usage -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Basic Usage</h2>
+
+      <div class="space-y-8">
+        <div>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <code class="text-sm text-[#0a0a0a] dark:text-white">
+              {{ '<' }}wally-breadcrumb [items]="breadcrumbItems"{{ '>' }}{{ '<' }}/wally-breadcrumb{{ '>' }}
+            </code>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Examples -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Examples</h2>
+
+      <div class="space-y-8">
+        <!-- Multi-level Breadcrumb -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Multi-level Navigation</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <code class="text-sm text-[#0a0a0a] dark:text-white">
+              breadcrumbItems: BreadcrumbItem[] = [<br>
+              &nbsp;&nbsp;{{ '{' }} label: 'Home', url: '/' {{ '}' }},<br>
+              &nbsp;&nbsp;{{ '{' }} label: 'Components', url: '/components' {{ '}' }},<br>
+              &nbsp;&nbsp;{{ '{' }} label: 'Button' {{ '}' }}<br>
+              ];
+            </code>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
+          </div>
+        </div>
+
+        <!-- Single Item -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Single Item</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <code class="text-sm text-[#0a0a0a] dark:text-white">
+              breadcrumbItems: BreadcrumbItem[] = [<br>
+              &nbsp;&nbsp;{{ '{' }} label: 'Components' {{ '}' }}<br>
+              ];
+            </code>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Properties -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
+
+      <div class="space-y-4">
+        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
+          <div class="font-mono text-sm mb-2">
+            <span class="text-blue-600 dark:text-blue-400">items</span><span class="text-[#0a0a0a] dark:text-white">:
+            </span>
+            <span class="text-purple-600 dark:text-purple-400">BreadcrumbItem[]</span> <span
+              class="text-[#0a0a0a] dark:text-white"> = </span>
+            <span class="text-green-600 dark:text-green-400">[]</span>
+            <span class="text-[#0a0a0a] dark:text-white">;</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Array of breadcrumb items to display</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Interface -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Interface</h2>
+
+      <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+        <code class="text-sm text-[#0a0a0a] dark:text-white">
+          interface BreadcrumbItem {{ '{' }}<br>
+          &nbsp;&nbsp;label: string;<br>
+          &nbsp;&nbsp;url?: string;<br>
+          {{ '}' }}
+        </code>
+      </div>
+    </section>
+
+    <!-- Under Construction -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Under Construction</h2>
+
+      <div class="space-y-4">
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Custom Separators</h3>
+            <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Support for custom separator characters and icons between breadcrumb items.
+          </p>
+        </div>
+
+        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+          <div class="flex items-center gap-2 mb-2">
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Dropdown Overflow</h3>
+            <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">
+            Collapse breadcrumb items into a dropdown when there are too many to display.
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

package/playground/showcase/src/app/pages/components/breadcrumb-docs/breadcrumb-docs.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
+
+import { AiPromptService } from '../../../core/services/ai-prompt.service';
+
+@Component({
+  selector: 'app-breadcrumb-docs',
+  imports: [
+    Breadcrumb
+  ],
+  templateUrl: './breadcrumb-docs.html',
+  styleUrl: './breadcrumb-docs.css'
+})
+export class BreadcrumbDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Components', url: '/components' },
+    { label: 'Breadcrumb' }
+  ];
+
+  exampleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Components', url: '/components' },
+    { label: 'Breadcrumb' }
+  ];
+
+  simpleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Components' }
+  ];
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}