Add comprehensive component library and demo application
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -0,0 +1,165 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { EmptyStateComponent } from '../../../../../ui-essentials/src/lib/components/feedback';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-empty-state-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, EmptyStateComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Empty State Demo</h2>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Sizes</h3>
|
||||
<div class="demo-grid">
|
||||
@for (size of sizes; track size) {
|
||||
<ui-empty-state
|
||||
[size]="size"
|
||||
title="No items found"
|
||||
description="There are no items to display at the moment."
|
||||
actionLabel="Add Item"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-5.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 009.586 13H4' /></svg>"
|
||||
(action)="handleDemoClick('Size: ' + size)">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">{{ size }} size</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant Types -->
|
||||
<section class="demo-section">
|
||||
<h3>Variants</h3>
|
||||
<div class="demo-grid">
|
||||
<ui-empty-state
|
||||
variant="default"
|
||||
title="No data available"
|
||||
description="There's nothing here yet. Start by adding some content."
|
||||
actionLabel="Get Started"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' /></svg>"
|
||||
(action)="handleDemoClick('Default variant')">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Default</p>
|
||||
|
||||
<ui-empty-state
|
||||
variant="search"
|
||||
title="No search results"
|
||||
description="We couldn't find anything matching your search. Try adjusting your filters or search terms."
|
||||
actionLabel="Clear Filters"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /></svg>"
|
||||
(action)="handleDemoClick('Search variant')">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Search</p>
|
||||
|
||||
<ui-empty-state
|
||||
variant="error"
|
||||
title="Something went wrong"
|
||||
description="We encountered an error while loading your content. Please try again."
|
||||
actionLabel="Retry"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' /></svg>"
|
||||
(action)="handleDemoClick('Error variant')">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Error</p>
|
||||
|
||||
<ui-empty-state
|
||||
variant="loading"
|
||||
title="Loading content..."
|
||||
description="Please wait while we fetch your data.">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Loading</p>
|
||||
|
||||
<ui-empty-state
|
||||
variant="success"
|
||||
title="All done!"
|
||||
description="You've completed all tasks. Great work!"
|
||||
actionLabel="Start Over"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' /></svg>"
|
||||
(action)="handleDemoClick('Success variant')">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Success</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- States -->
|
||||
<section class="demo-section">
|
||||
<h3>States</h3>
|
||||
<div class="demo-grid">
|
||||
<ui-empty-state
|
||||
title="Normal state"
|
||||
description="This is a normal empty state with an action button."
|
||||
actionLabel="Take Action"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z' /></svg>"
|
||||
(action)="handleDemoClick('Normal state')">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Normal</p>
|
||||
|
||||
<ui-empty-state
|
||||
title="Disabled action"
|
||||
description="This empty state has a disabled action button."
|
||||
actionLabel="Disabled Action"
|
||||
[disabled]="true"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728' /></svg>"
|
||||
(action)="handleDemoClick('Disabled state')">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">Disabled</p>
|
||||
|
||||
<ui-empty-state
|
||||
title="No action button"
|
||||
description="This empty state doesn't have an action button."
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /></svg>">
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">No Action</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Projection -->
|
||||
<section class="demo-section">
|
||||
<h3>Custom Content</h3>
|
||||
<div class="demo-grid">
|
||||
<ui-empty-state
|
||||
title="Custom content"
|
||||
description="You can add custom content inside the empty state."
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM7 21h10a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z' /></svg>">
|
||||
<div style="margin: 16px 0; padding: 16px; background: var(--semantic-color-surface-secondary, #f8f9fa); border-radius: 8px;">
|
||||
<p style="margin: 0; color: var(--semantic-color-text-secondary, #6c757d); font-size: 14px;">
|
||||
This is custom content projected into the empty state component.
|
||||
You can add any HTML or Angular components here.
|
||||
</p>
|
||||
</div>
|
||||
</ui-empty-state>
|
||||
<p class="demo-label">With Content Projection</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Example</h3>
|
||||
<ui-empty-state
|
||||
title="Interactive Demo"
|
||||
description="Click the button below to see the interaction in action."
|
||||
actionLabel="Click Me!"
|
||||
icon="<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122' /></svg>"
|
||||
(action)="handleDemoClick('Interactive example')">
|
||||
</ui-empty-state>
|
||||
<div class="demo-output">
|
||||
<p><strong>Action clicked:</strong> {{ lastAction || 'None' }}</p>
|
||||
<p><strong>Click count:</strong> {{ clickCount }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './empty-state-demo.component.scss'
|
||||
})
|
||||
export class EmptyStateDemoComponent {
|
||||
sizes = ['sm', 'md', 'lg'] as const;
|
||||
variants = ['default', 'search', 'error', 'loading', 'success'] as const;
|
||||
clickCount = 0;
|
||||
lastAction: string | null = null;
|
||||
|
||||
handleDemoClick(action: string): void {
|
||||
this.clickCount++;
|
||||
this.lastAction = action;
|
||||
console.log('Empty state action clicked:', action);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user