jules/ui-essentials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive component library and demo application

Browse Source 
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
2025-09-03 05:38:09 +10:00
parent c803831f60
commit 5983722793
246 changed files with 52845 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
projects/demo-ui-essentials/src/app/demos/badge-demo/badge-demo.component.ts Normal file
View File

@@ -0,0 +1,155 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BadgeComponent } from '../../../../../ui-essentials/src/lib/components/data-display/badge';
@Component({
selector: 'ui-badge-demo',
standalone: true,
imports: [
CommonModule,
BadgeComponent
],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div style="padding: 2rem;">
<h2>Badge Component Showcase</h2>
<!-- Size Variants -->
<section style="margin-bottom: 3rem;">
<h3>Size Variants</h3>
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
<div style="text-align: center;">
<ui-badge size="xs" variant="primary">Extra Small</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">XS</p>
</div>
<div style="text-align: center;">
<ui-badge size="sm" variant="primary">Small</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">Small</p>
</div>
<div style="text-align: center;">
<ui-badge size="md" variant="primary">Medium</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">Medium</p>
</div>
<div style="text-align: center;">
<ui-badge size="lg" variant="primary">Large</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">Large</p>
</div>
</div>
</section>
<!-- Variant Colors -->
<section style="margin-bottom: 3rem;">
<h3>Color Variants</h3>
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
<ui-badge variant="default">Default</ui-badge>
<ui-badge variant="primary">Primary</ui-badge>
<ui-badge variant="secondary">Secondary</ui-badge>
<ui-badge variant="success">Success</ui-badge>
<ui-badge variant="warning">Warning</ui-badge>
<ui-badge variant="danger">Danger</ui-badge>
<ui-badge variant="info">Info</ui-badge>
</div>
</section>
<!-- Shape Variants -->
<section style="margin-bottom: 3rem;">
<h3>Shape Variants</h3>
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
<div style="text-align: center;">
<ui-badge shape="pill" variant="primary">Pill Shape</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">Pill</p>
</div>
<div style="text-align: center;">
<ui-badge shape="rounded" variant="success">Rounded</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">Rounded</p>
</div>
<div style="text-align: center;">
<ui-badge shape="square" variant="warning">Square</ui-badge>
<p style="font-size: 12px; margin: 0.5rem 0;">Square</p>
</div>
</div>
</section>
<!-- Dot Badges -->
<section style="margin-bottom: 3rem;">
<h3>Dot Badges</h3>
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
<ui-badge variant="success" [isDot]="true"></ui-badge>
<ui-badge variant="warning" [isDot]="true"></ui-badge>
<ui-badge variant="danger" [isDot]="true"></ui-badge>
<ui-badge variant="info" [isDot]="true"></ui-badge>
<ui-badge variant="primary" [isDot]="true"></ui-badge>
</div>
</section>
<!-- Usage Examples -->
<section style="margin-bottom: 3rem;">
<h3>Usage Examples</h3>
<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #007bff;">
<h4>Basic Badge:</h4>
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-badge variant="success" size="md"&gt;
Active
&lt;/ui-badge&gt;</code></pre>
<h4>Dot Badge:</h4>
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-badge
variant="warning"
[isDot]="true"
ariaLabel="Warning status"&gt;
&lt;/ui-badge&gt;</code></pre>
<h4>Custom Shape:</h4>
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-badge
variant="danger"
shape="square"
size="lg"
title="Critical status"&gt;
Critical
&lt;/ui-badge&gt;</code></pre>
</div>
</section>
</div>
`,
styles: [`
h2 {
color: hsl(279, 14%, 11%);
font-size: 2rem;
margin-bottom: 2rem;
border-bottom: 2px solid hsl(258, 100%, 47%);
padding-bottom: 0.5rem;
}
h3 {
color: hsl(279, 14%, 25%);
font-size: 1.5rem;
margin-bottom: 1rem;
}
h4 {
color: hsl(287, 12%, 35%);
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
section {
border: 1px solid hsl(289, 14%, 90%);
border-radius: 8px;
padding: 1.5rem;
background: hsl(286, 20%, 99%);
}
pre {
font-size: 0.875rem;
line-height: 1.5;
margin: 0.5rem 0;
}
code {
font-family: 'JetBrains Mono', monospace;
color: #d63384;
}
`]
})
export class BadgeDemoComponent {
// Simple demo with no interactive functionality for now
}