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,283 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DatePickerComponent } from '../../../../../ui-essentials/src/lib/components/forms/date-picker/date-picker.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-date-picker-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, DatePickerComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>Date Picker Demo</h2>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Sizes</h3>
|
||||
<div class="demo-row">
|
||||
@for (size of sizes; track size) {
|
||||
<div class="demo-item">
|
||||
<h4>{{ size | uppercase }}</h4>
|
||||
<ui-date-picker
|
||||
[size]="size"
|
||||
[label]="size + ' Date Picker'"
|
||||
[placeholder]="'Select date'"
|
||||
[(ngModel)]="sampleValues[size]">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant Styles -->
|
||||
<section class="demo-section">
|
||||
<h3>Variants</h3>
|
||||
<div class="demo-row">
|
||||
@for (variant of variants; track variant) {
|
||||
<div class="demo-item">
|
||||
<h4>{{ variant | titlecase }}</h4>
|
||||
<ui-date-picker
|
||||
[variant]="variant"
|
||||
[label]="variant + ' Variant'"
|
||||
[placeholder]="'Select date'"
|
||||
[(ngModel)]="variantValues[variant]">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- States -->
|
||||
<section class="demo-section">
|
||||
<h3>States</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-item">
|
||||
<h4>Default</h4>
|
||||
<ui-date-picker
|
||||
label="Default State"
|
||||
placeholder="Select date"
|
||||
helperText="Choose your preferred date"
|
||||
[(ngModel)]="stateValues['default']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Error</h4>
|
||||
<ui-date-picker
|
||||
label="Error State"
|
||||
placeholder="Select date"
|
||||
state="error"
|
||||
errorMessage="Please select a valid date"
|
||||
[(ngModel)]="stateValues['error']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Success</h4>
|
||||
<ui-date-picker
|
||||
label="Success State"
|
||||
placeholder="Select date"
|
||||
state="success"
|
||||
helperText="Great choice!"
|
||||
[(ngModel)]="stateValues['success']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Warning</h4>
|
||||
<ui-date-picker
|
||||
label="Warning State"
|
||||
placeholder="Select date"
|
||||
state="warning"
|
||||
helperText="Date is in the past"
|
||||
[(ngModel)]="stateValues['warning']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Special Features -->
|
||||
<section class="demo-section">
|
||||
<h3>Features</h3>
|
||||
<div class="demo-row">
|
||||
<div class="demo-item">
|
||||
<h4>Required Field</h4>
|
||||
<ui-date-picker
|
||||
label="Required Date"
|
||||
placeholder="Select date"
|
||||
[required]="true"
|
||||
helperText="This field is required"
|
||||
[(ngModel)]="featureValues['required']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Disabled</h4>
|
||||
<ui-date-picker
|
||||
label="Disabled Date Picker"
|
||||
placeholder="Cannot select"
|
||||
[disabled]="true"
|
||||
helperText="This field is disabled"
|
||||
[(ngModel)]="featureValues['disabled']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Not Clearable</h4>
|
||||
<ui-date-picker
|
||||
label="No Clear Button"
|
||||
placeholder="Select date"
|
||||
[clearable]="false"
|
||||
helperText="Clear button is hidden"
|
||||
[(ngModel)]="featureValues['notClearable']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="demo-item">
|
||||
<h4>Date Range Limits</h4>
|
||||
<ui-date-picker
|
||||
label="Limited Date Range"
|
||||
placeholder="Select date"
|
||||
[minDate]="minDate"
|
||||
[maxDate]="maxDate"
|
||||
helperText="Only dates in 2024 allowed"
|
||||
[(ngModel)]="featureValues['limited']">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interactive Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Example</h3>
|
||||
<div class="demo-interactive">
|
||||
<ui-date-picker
|
||||
label="Event Date"
|
||||
placeholder="Select event date"
|
||||
helperText="Choose a date for your event"
|
||||
[(ngModel)]="interactiveValue"
|
||||
(dateChange)="onDateChange($event)">
|
||||
</ui-date-picker>
|
||||
|
||||
<div class="demo-output">
|
||||
<h4>Selected Date:</h4>
|
||||
<p>{{ interactiveValue ? formatDate(interactiveValue) : 'No date selected' }}</p>
|
||||
<p><strong>Change count:</strong> {{ changeCount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Form Integration -->
|
||||
<section class="demo-section">
|
||||
<h3>Form Integration</h3>
|
||||
<form (ngSubmit)="onSubmit()" #demoForm="ngForm" class="demo-form">
|
||||
<div class="form-row">
|
||||
<ui-date-picker
|
||||
label="Start Date"
|
||||
name="startDate"
|
||||
placeholder="Select start date"
|
||||
[(ngModel)]="formValues.startDate"
|
||||
[required]="true"
|
||||
#startDate="ngModel">
|
||||
</ui-date-picker>
|
||||
|
||||
<ui-date-picker
|
||||
label="End Date"
|
||||
name="endDate"
|
||||
placeholder="Select end date"
|
||||
[(ngModel)]="formValues.endDate"
|
||||
[minDate]="formValues.startDate"
|
||||
[required]="true"
|
||||
#endDate="ngModel">
|
||||
</ui-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" [disabled]="!demoForm.valid" class="submit-btn">
|
||||
Submit Form
|
||||
</button>
|
||||
<button type="button" (click)="resetForm(demoForm)" class="reset-btn">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-status">
|
||||
<p><strong>Form Valid:</strong> {{ demoForm.valid }}</p>
|
||||
<p><strong>Form Values:</strong></p>
|
||||
<pre>{{ formValues | json }}</pre>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './date-picker-demo.component.scss'
|
||||
})
|
||||
export class DatePickerDemoComponent {
|
||||
sizes = ['sm', 'md', 'lg'] as const;
|
||||
variants = ['outlined', 'filled', 'underlined'] as const;
|
||||
|
||||
sampleValues: Record<string, Date | null> = {
|
||||
sm: null,
|
||||
md: null,
|
||||
lg: null
|
||||
};
|
||||
|
||||
variantValues: Record<string, Date | null> = {
|
||||
outlined: null,
|
||||
filled: null,
|
||||
underlined: null
|
||||
};
|
||||
|
||||
stateValues: Record<string, Date | null> = {
|
||||
default: null,
|
||||
error: null,
|
||||
success: new Date(),
|
||||
warning: null
|
||||
};
|
||||
|
||||
featureValues: Record<string, Date | null> = {
|
||||
required: null,
|
||||
disabled: new Date(),
|
||||
notClearable: null,
|
||||
limited: null
|
||||
};
|
||||
|
||||
interactiveValue: Date | null = null;
|
||||
changeCount = 0;
|
||||
|
||||
formValues = {
|
||||
startDate: null as Date | null,
|
||||
endDate: null as Date | null
|
||||
};
|
||||
|
||||
// Date limits for demo
|
||||
minDate = new Date(2024, 0, 1); // January 1, 2024
|
||||
maxDate = new Date(2024, 11, 31); // December 31, 2024
|
||||
|
||||
onDateChange(date: Date | null): void {
|
||||
this.changeCount++;
|
||||
console.log('Date changed:', date);
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
console.log('Form submitted:', this.formValues);
|
||||
alert('Form submitted! Check console for values.');
|
||||
}
|
||||
|
||||
resetForm(form: any): void {
|
||||
form.resetForm();
|
||||
this.formValues = {
|
||||
startDate: null,
|
||||
endDate: null
|
||||
};
|
||||
}
|
||||
|
||||
formatDate(date: Date): string {
|
||||
return date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user