From 3c0cefd0d5e0da2198e267736e48f1655ff9e577 Mon Sep 17 00:00:00 2001 From: Lasim Date: Sun, 17 Aug 2025 14:14:55 +0200 Subject: [PATCH 1/6] feat(docs): add mandatory design pattern for structured data display to ensure visual consistency across the frontend --- docs/development/frontend/index.mdx | 12 + .../ui-design-system-structured-data.mdx | 490 ++++++++++++++++++ 2 files changed, 502 insertions(+) create mode 100644 docs/development/frontend/ui-design-system-structured-data.mdx diff --git a/docs/development/frontend/index.mdx b/docs/development/frontend/index.mdx index a0ca6f6..7a2bcdb 100644 --- a/docs/development/frontend/index.mdx +++ b/docs/development/frontend/index.mdx @@ -74,6 +74,17 @@ For table-specific implementations, refer to the [Table Design System](/developm The frontend uses **TailwindCSS** for styling with **shadcn-vue** component library for consistent UI elements. For comprehensive styling guidelines, component patterns, and design standards, see the [UI Design System](/development/frontend/ui-design-system) documentation. +### ⚠️ **Mandatory Design Patterns** + +All structured information displays must follow the **[Structured Data Display Pattern](/development/frontend/ui-design-system-structured-data)**. This includes: +- User profiles and settings +- Form layouts +- Configuration displays +- Installation details +- Any information presented in label-value pairs + +This pattern ensures visual consistency across the entire application. + ## Environment Configuration The frontend uses a sophisticated environment variable system that works seamlessly across development and production environments. For complete details on configuring and using environment variables, see the dedicated [Environment Variables Guide](/development/frontend/environment-variables). @@ -115,6 +126,7 @@ Continue reading the detailed guides: - [Frontend Architecture](/development/frontend/architecture) - Application architecture, patterns, and development principles - [UI Design System](/development/frontend/ui-design-system) - Component patterns, styling guidelines, and design standards +- **[Structured Data Display Pattern](/development/frontend/ui-design-system-structured-data)** - **Mandatory pattern** for consistent information display - [Environment Variables](/development/frontend/environment-variables) - Complete environment configuration guide - [Global Event Bus](/development/frontend/event-bus) - Cross-component communication system - [Internationalization (i18n)](/development/frontend/internationalization) - Multi-language support diff --git a/docs/development/frontend/ui-design-system-structured-data.mdx b/docs/development/frontend/ui-design-system-structured-data.mdx new file mode 100644 index 0000000..e3f0c86 --- /dev/null +++ b/docs/development/frontend/ui-design-system-structured-data.mdx @@ -0,0 +1,490 @@ +--- +title: Structured Data Display Pattern +description: Mandatory design pattern for displaying structured information consistently throughout the DeployStack frontend using description lists. +sidebar: Structured Data +--- + +# Structured Data Display Pattern + +This document establishes the **mandatory pattern** for displaying structured information throughout the DeployStack frontend. All structured data displays - whether read-only information or form layouts - must follow this consistent description list pattern. + +## Design Principle + +**Every piece of structured information must use the same visual pattern**: label on the left, content on the right, with consistent spacing and typography. + +This creates a cohesive, professional appearance across the entire application and eliminates visual inconsistency between different pages and components. + +## The Mandatory Pattern + +All structured data displays must use this HTML structure: + +```html +
+

Section Title

+

Section description

+
+ +
+
+
+
Field Label
+
+ Field Content +
+
+
+
+``` + +### Pattern Components + +| Element | Classes | Purpose | +|---------|---------|---------| +| `
` | `text-sm/6 font-medium text-gray-900` | Field label (left column) | +| `
` | `mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0` | Field content (right column) | +| Container | `px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0` | Responsive grid layout | +| List | `divide-y divide-gray-100` | Visual separation between fields | + +## When to Use This Pattern + +### ✅ **Required For** +- User profile information +- Server configuration details +- Installation information +- Settings pages +- Form layouts +- Team management displays +- Any structured data presentation + +### ❌ **Not Required For** +- Simple text content +- Marketing pages +- Dashboard cards (unless showing structured data) +- Navigation elements +- Alerts and notifications + +## Implementation Examples + +### Read-Only Information Display + +```html + +``` + +### Form Input Layout + +```html +