CremaArchive/ui-essentials
Archived
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

184
projects/demo-ui-essentials/src/app/demos/autocomplete-demo/autocomplete-demo.component.scss Normal file
View File

@@ -0,0 +1,184 @@
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
.demo-container {
padding: 32px;
max-width: 1200px;
margin: 0 auto;
h2 {
color: $semantic-color-text-primary;
font-size: 32px;
margin-bottom: 48px;
border-bottom: $semantic-border-width-1 solid $semantic-color-border-primary;
padding-bottom: 16px;
}
h3 {
color: $semantic-color-text-primary;
font-size: 24px;
margin-bottom: 32px;
}
h4 {
color: $semantic-color-text-primary;
font-size: 20px;
margin-bottom: 16px;
}
}
.demo-section {
margin-bottom: 64px;
padding: 32px;
background: $semantic-color-surface-primary;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
border-radius: $semantic-border-radius-lg;
box-shadow: $semantic-shadow-elevation-1;
}
.demo-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
align-items: start;
}
.demo-item {
display: flex;
flex-direction: column;
gap: 12px;
> label {
font-weight: 500;
color: $semantic-color-text-secondary;
font-size: 14px;
}
}
.demo-form {
.form-values {
margin-top: 32px;
padding: 16px;
background: $semantic-color-surface-secondary;
border-radius: $semantic-border-radius-md;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
h4 {
margin-bottom: 12px;
}
pre {
background: $semantic-color-background;
padding: 12px;
border-radius: $semantic-border-radius-sm;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 12px;
color: $semantic-color-text-primary;
overflow-x: auto;
margin-bottom: 12px;
}
p {
margin: 0;
color: $semantic-color-text-secondary;
font-size: 14px;
}
}
}
.event-log {
margin-top: 32px;
.log-container {
max-height: 300px;
overflow-y: auto;
background: $semantic-color-background;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
border-radius: $semantic-border-radius-md;
margin-bottom: 16px;
}
.log-entry {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 12px;
padding: 8px 12px;
border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
font-size: 12px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
&:last-child {
border-bottom: none;
}
.log-event {
font-weight: 500;
color: $semantic-color-brand-primary;
}
.log-data {
color: $semantic-color-text-primary;
overflow-wrap: break-word;
}
.log-time {
color: $semantic-color-text-tertiary;
font-size: 11px;
}
}
.clear-log-btn {
padding: 8px 12px;
background: $semantic-color-surface-secondary;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
border-radius: $semantic-border-radius-sm;
color: $semantic-color-text-secondary;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: $semantic-color-surface-elevated;
border-color: $semantic-color-border-focus;
}
&:focus-visible {
outline: 2px solid $semantic-color-brand-primary;
outline-offset: 2px;
}
}
}
// Responsive design
@media (max-width: 1024px - 1) {
.demo-row {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
}
@media (max-width: 768px - 1) {
.demo-container {
padding: 24px;
}
.demo-section {
padding: 24px;
}
.demo-row {
grid-template-columns: 1fr;
gap: 24px;
}
.event-log {
.log-entry {
grid-template-columns: 1fr;
gap: 8px;
.log-time {
text-align: right;
}
}
}
}