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

228
projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss Normal file
View File

@@ -0,0 +1,228 @@
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
.demo-container {
padding: $semantic-spacing-layout-md;
max-width: 1200px;
margin: 0 auto;
h2 {
font-size: $semantic-typography-heading-h2-size;
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-content-heading;
font-weight: $semantic-typography-font-weight-bold;
}
h3 {
font-size: $semantic-typography-heading-h3-size;
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-content-paragraph;
font-weight: $semantic-typography-font-weight-semibold;
}
}
.demo-section {
margin-bottom: $semantic-spacing-layout-lg;
padding: $semantic-spacing-component-lg;
background: $semantic-color-surface-primary;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
border-radius: $semantic-border-radius-lg;
box-shadow: $semantic-shadow-elevation-1;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: $semantic-spacing-layout-md;
margin-bottom: $semantic-spacing-content-heading;
}
.demo-item {
padding: $semantic-spacing-component-md;
background: $semantic-color-surface-secondary;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
border-radius: $semantic-border-radius-md;
overflow: hidden;
box-sizing: border-box;
h4 {
font-size: $semantic-typography-heading-h4-size;
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-content-list-item;
font-weight: $semantic-typography-font-weight-medium;
}
p {
font-size: $semantic-typography-font-size-sm;
color: $semantic-color-text-secondary;
margin-bottom: $semantic-spacing-content-paragraph;
}
}
.demo-actions {
display: flex;
gap: $semantic-spacing-content-paragraph;
align-items: center;
margin-bottom: $semantic-spacing-content-heading;
padding: $semantic-spacing-component-md;
background: $semantic-color-surface-variant;
border-radius: $semantic-border-radius-md;
}
.demo-button {
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
background: $semantic-color-primary;
color: $semantic-color-on-primary;
border: none;
border-radius: $semantic-border-radius-sm;
font-size: $semantic-typography-font-size-sm;
font-weight: $semantic-typography-font-weight-medium;
cursor: pointer;
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease-in-out;
&:hover {
background: $semantic-color-primary-hover;
box-shadow: $semantic-shadow-elevation-2;
}
&:focus-visible {
outline: 2px solid $semantic-color-focus;
outline-offset: 2px;
}
&--secondary {
background: $semantic-color-surface-primary;
color: $semantic-color-text-primary;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
&:hover {
background: $semantic-color-surface-secondary;
}
}
}
.demo-info {
font-size: $semantic-typography-font-size-sm;
color: $semantic-color-text-tertiary;
margin-top: $semantic-spacing-content-list-item;
}
.form-demo {
display: grid;
gap: $semantic-spacing-content-heading;
}
.demo-input {
width: 100%;
box-sizing: border-box;
padding: $semantic-spacing-component-sm;
border: $semantic-border-width-1 solid $semantic-color-border-primary;
border-radius: $semantic-border-radius-md;
font-size: $semantic-typography-font-size-md;
color: $semantic-color-text-primary;
background: $semantic-color-surface-primary;
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease-in-out;
&:focus {
outline: none;
border-color: $semantic-color-primary;
box-shadow: 0 0 0 2px $semantic-color-primary-container;
}
&:disabled {
background: $semantic-color-surface-disabled;
color: $semantic-color-text-disabled;
cursor: not-allowed;
}
&--error {
border-color: $semantic-color-error;
background: $semantic-color-error-container;
}
&--success {
border-color: $semantic-color-success;
background: $semantic-color-tertiary-container;
}
}
.demo-textarea {
@extend .demo-input;
min-height: 100px;
resize: vertical;
}
.demo-select {
@extend .demo-input;
cursor: pointer;
}
.demo-checkbox,
.demo-radio {
display: flex;
align-items: center;
gap: $semantic-spacing-content-line-normal;
cursor: pointer;
input {
margin: 0;
}
label {
font-size: $semantic-typography-font-size-sm;
color: $semantic-color-text-primary;
cursor: pointer;
}
}
.validation-demo {
display: grid;
gap: $semantic-spacing-content-paragraph;
padding: $semantic-spacing-component-md;
background: $semantic-color-surface-variant;
border-radius: $semantic-border-radius-md;
}
.form-status {
padding: $semantic-spacing-component-sm;
background: $semantic-color-surface-primary;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
border-radius: $semantic-border-radius-sm;
font-family: 'JetBrains Mono', 'Consolas', monospace;
font-size: $semantic-typography-font-size-xs;
}
.code-demo {
background: $semantic-color-surface-variant;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
border-radius: $semantic-border-radius-md;
padding: $semantic-spacing-component-md;
margin-top: $semantic-spacing-content-paragraph;
pre {
font-family: 'JetBrains Mono', 'Consolas', monospace;
font-size: $semantic-typography-font-size-xs;
color: $semantic-color-text-secondary;
overflow-x: auto;
margin: 0;
}
}
.layout-demo {
display: grid;
gap: $semantic-spacing-content-heading;
}
// Ensure form fields are properly contained
ui-form-field {
display: block;
width: 100%;
box-sizing: border-box;
}
// Responsive adjustments
@media (max-width: $semantic-breakpoint-md - 1) {
.demo-grid {
grid-template-columns: 1fr;
gap: $semantic-spacing-layout-sm;
}
}