Archived
Will Anderson
351 lines
12 KiB
Rust
351 lines
12 KiB
Rust
//! Profile card example — demonstrates el-ui styling, layout, i18n, config, and secrets.
|
||
//!
|
||
//! This example shows what building with el-ui looks like:
|
||
//!
|
||
//! - Styling via semantic tokens and the StyleModifier trait
|
||
//! - Responsive layout: VStack/HStack that wrap automatically
|
||
//! - Localization via LocaleContext and t()/t_plural()
|
||
//! - Configuration from el.toml / env vars
|
||
//! - Secrets that never appear in logs
|
||
|
||
use std::collections::HashMap;
|
||
|
||
use el_config::prelude::*;
|
||
use el_i18n::prelude::*;
|
||
use el_layout::prelude::*;
|
||
use el_secrets::prelude::*;
|
||
use el_style::prelude::*;
|
||
|
||
// --- Domain model ---
|
||
|
||
struct UserProfile {
|
||
handle: String,
|
||
display_name: String,
|
||
bio: String,
|
||
follower_count: i64,
|
||
following_count: i64,
|
||
is_verified: bool,
|
||
is_following: bool,
|
||
}
|
||
|
||
// --- Profile card component ---
|
||
|
||
/// A profile card component.
|
||
///
|
||
/// In a real el-ui app, this would be a .el component file compiled by
|
||
/// el-ui-compiler. Here we show the same patterns in pure Rust so the
|
||
/// example is self-contained and runnable.
|
||
struct ProfileCard {
|
||
profile: UserProfile,
|
||
theme: Theme,
|
||
style: StyleSet,
|
||
locale: LocaleContext,
|
||
}
|
||
|
||
impl StyleModifier for ProfileCard {
|
||
fn style_mut(&mut self) -> &mut StyleSet {
|
||
&mut self.style
|
||
}
|
||
}
|
||
|
||
impl ProfileCard {
|
||
fn new(profile: UserProfile, theme: Theme, locale: LocaleContext) -> Self {
|
||
Self {
|
||
profile,
|
||
theme,
|
||
style: StyleSet::default(),
|
||
locale,
|
||
}
|
||
}
|
||
|
||
/// "Render" the card — in a real app the backend converts this to
|
||
/// native views. Here we produce a human-readable description.
|
||
fn render(&self) -> String {
|
||
let t = &self.locale;
|
||
let theme = &self.theme;
|
||
|
||
// --- Header HStack (avatar + name + verified badge) ---
|
||
// HStack wraps automatically if the container is narrow (mobile-first)
|
||
let header = HStack::new()
|
||
.spacing(12)
|
||
.alignment(VAlign::Center)
|
||
.wrap(true);
|
||
|
||
// --- Name text: Title style ---
|
||
let name_style = theme.typography.resolve(&TextStyle::Title);
|
||
|
||
// --- Body text: Body style ---
|
||
let body_style = theme.typography.resolve(&TextStyle::Body);
|
||
|
||
// --- Stats HStack (followers / following) ---
|
||
let _stats_layout = HStack::new().spacing(24).wrap(true);
|
||
|
||
// --- Follow button ---
|
||
// VStack wraps children that don't fit, so this works on any screen width
|
||
let _card_layout = VStack::new()
|
||
.spacing(16)
|
||
.alignment(HAlign::Leading)
|
||
.wrap(true);
|
||
|
||
// --- Localized strings ---
|
||
let follow_label = if self.profile.is_following {
|
||
t.t("profile.following")
|
||
} else {
|
||
t.t("profile.follow")
|
||
};
|
||
|
||
let followers_label =
|
||
t.t_plural("profile.followers", self.profile.follower_count);
|
||
let following_label =
|
||
t.t_plural("profile.following_count", self.profile.following_count);
|
||
|
||
// --- Color resolution ---
|
||
let (bg_r, bg_g, bg_b, _) = theme.colors.resolve(&Color::Surface);
|
||
let (text_r, text_g, text_b, _) = theme.colors.resolve(&Color::OnSurface);
|
||
let (primary_r, primary_g, primary_b, _) = theme.colors.resolve(&Color::Primary);
|
||
|
||
// --- Shadow ---
|
||
let shadow_css = theme
|
||
.shadows
|
||
.resolve(&Shadow::Md)
|
||
.map(|s| s.to_css())
|
||
.unwrap_or_default();
|
||
|
||
// --- Formatted stats (locale-aware numbers) ---
|
||
let follower_count_fmt = format_integer(self.profile.follower_count, &self.locale.locale);
|
||
let following_count_fmt = format_integer(self.profile.following_count, &self.locale.locale);
|
||
|
||
// --- RTL layout signal ---
|
||
let layout_direction = if self.locale.is_rtl() { "rtl" } else { "ltr" };
|
||
|
||
// --- Build the output ---
|
||
format!(
|
||
r#"
|
||
┌─ ProfileCard ─────────────────────────────────────────────
|
||
│ Layout direction: {}
|
||
│ Theme mode: {:?}
|
||
│
|
||
│ [Card background: rgb({},{},{}), shadow: {}]
|
||
│
|
||
│ {} {} [Header HStack, spacing=12, wrap=true]
|
||
│ Avatar [44×44pt, radius=Full — meets touch target]
|
||
│ {} [font: {}pt weight={}, color: rgb({},{},{})]
|
||
│ {} [verified badge]
|
||
│
|
||
│ {} [Body style, {}pt, color: rgb({},{},{})]
|
||
│
|
||
│ [Stats HStack, spacing=24, wrap=true]
|
||
│ {} {} — follower count (locale-formatted)
|
||
│ {} {} — following count
|
||
│
|
||
│ [Button: Primary variant]
|
||
│ {} [color: rgb({},{},{})]
|
||
│
|
||
│ [Card ends]
|
||
└────────────────────────────────────────────────────────────
|
||
"#,
|
||
layout_direction,
|
||
theme.mode,
|
||
bg_r, bg_g, bg_b,
|
||
shadow_css,
|
||
header.spacing,
|
||
if header.wrap { "wrap=true" } else { "wrap=false" },
|
||
self.profile.display_name,
|
||
name_style.size,
|
||
name_style.weight.value(),
|
||
text_r, text_g, text_b,
|
||
if self.profile.is_verified { "✓" } else { "" },
|
||
self.profile.bio,
|
||
body_style.size,
|
||
text_r, text_g, text_b,
|
||
follower_count_fmt,
|
||
followers_label,
|
||
following_count_fmt,
|
||
following_label,
|
||
follow_label,
|
||
primary_r, primary_g, primary_b,
|
||
)
|
||
}
|
||
}
|
||
|
||
// --- Application entry point ---
|
||
|
||
fn main() {
|
||
// 1. Configuration — layered, typed
|
||
let el_toml = r#"
|
||
[config]
|
||
app.name = "ProfileCard Example"
|
||
app.version = "1.0.0"
|
||
profile.max_bio_length = "160"
|
||
|
||
[env.development]
|
||
app.debug = "true"
|
||
"#;
|
||
|
||
let toml_source = load_from_toml(el_toml, &Environment::Development)
|
||
.expect("el.toml should be valid");
|
||
|
||
let mut config = Config::new(Environment::Development);
|
||
config.push_source(Box::new(toml_source));
|
||
|
||
let app_name = config.get::<String>("app.name").unwrap_or_default();
|
||
let app_version = config.get::<String>("app.version").unwrap_or_default();
|
||
let max_bio: u32 = config.get_or("profile.max_bio_length", 160u32);
|
||
let debug: bool = config.get_or("app.debug", false);
|
||
|
||
println!("=== {} v{} ===", app_name, app_version);
|
||
println!("Environment: {}", config.environment);
|
||
println!("Debug mode: {}", debug);
|
||
println!("Max bio: {} chars", max_bio);
|
||
|
||
// 2. Secrets — loaded at startup, never logged
|
||
let mut secret_src = InMemorySource::new();
|
||
secret_src.insert("analytics.key", "ana_abc123xyz");
|
||
|
||
let secrets = SecretsResolver::new()
|
||
.source(Box::new(secret_src))
|
||
.require("analytics.key")
|
||
.resolve()
|
||
.expect("required secrets must be present at startup");
|
||
|
||
let analytics_key = secrets.require("analytics.key");
|
||
// This will always print [REDACTED] — never the actual key
|
||
println!("Analytics key: {} (safely [REDACTED] in logs)", analytics_key);
|
||
// To actually use it:
|
||
let _actual_key: &str = analytics_key.expose();
|
||
|
||
// 3. Localization — English
|
||
let mut en_bundle = LocaleBundle::new(Locale::en_us());
|
||
en_bundle.insert("profile.follow", "Follow");
|
||
en_bundle.insert("profile.following", "Following");
|
||
let mut forms = HashMap::new();
|
||
forms.insert("one".to_string(), "{n} Follower".to_string());
|
||
forms.insert("other".to_string(), "{n} Followers".to_string());
|
||
en_bundle.insert_plural("profile.followers", forms);
|
||
let mut following_forms = HashMap::new();
|
||
following_forms.insert("one".to_string(), "{n} Following".to_string());
|
||
following_forms.insert("other".to_string(), "{n} Following".to_string());
|
||
en_bundle.insert_plural("profile.following_count", following_forms);
|
||
|
||
let en_ctx = LocaleContext::new(Locale::en_us(), en_bundle);
|
||
|
||
// 4. Theme — light, system colors
|
||
let light_theme = Theme::default_light();
|
||
let dark_theme = Theme::default_dark();
|
||
|
||
// 5. Profile data
|
||
let profile = UserProfile {
|
||
handle: "alice".to_string(),
|
||
display_name: "Alice Chen".to_string(),
|
||
bio: "Building beautiful things with el-ui. Rust enthusiast.".to_string(),
|
||
follower_count: 12_483,
|
||
following_count: 342,
|
||
is_verified: true,
|
||
is_following: false,
|
||
};
|
||
|
||
// 6. Render the card (light theme, English)
|
||
println!("\n=== Light Theme, English ===");
|
||
let card = ProfileCard::new(
|
||
UserProfile {
|
||
handle: profile.handle.clone(),
|
||
display_name: profile.display_name.clone(),
|
||
bio: profile.bio.clone(),
|
||
follower_count: profile.follower_count,
|
||
following_count: profile.following_count,
|
||
is_verified: profile.is_verified,
|
||
is_following: profile.is_following,
|
||
},
|
||
light_theme,
|
||
en_ctx.clone(),
|
||
);
|
||
// Apply style modifiers — fluent, zero-cost at compile time
|
||
let styled_card = card
|
||
.padding(16)
|
||
.background(Color::Surface)
|
||
.radius(Radius::Lg)
|
||
.shadow(Shadow::Md)
|
||
.max_width(Dimension::Fixed(480));
|
||
|
||
println!("{}", styled_card.render());
|
||
|
||
// 7. Render with dark theme
|
||
println!("=== Dark Theme, English ===");
|
||
let card_dark = ProfileCard::new(
|
||
UserProfile {
|
||
handle: profile.handle.clone(),
|
||
display_name: profile.display_name.clone(),
|
||
bio: profile.bio.clone(),
|
||
follower_count: 1, // test singular
|
||
following_count: profile.following_count,
|
||
is_verified: profile.is_verified,
|
||
is_following: true,
|
||
},
|
||
dark_theme,
|
||
en_ctx,
|
||
);
|
||
let styled_dark = card_dark
|
||
.padding(16)
|
||
.background(Color::Surface)
|
||
.radius(Radius::Lg)
|
||
.shadow(Shadow::Lg);
|
||
|
||
println!("{}", styled_dark.render());
|
||
|
||
// 8. Layout demonstration
|
||
println!("=== Layout Engine Demo ===");
|
||
|
||
// Grid: auto columns — picks 1, 2, 3... based on container width
|
||
let grid = GridLayout::new().columns_auto(200.0).gap(16);
|
||
for width in [300.0f32, 600.0, 900.0, 1200.0] {
|
||
println!(
|
||
" Container {}px → {} columns",
|
||
width,
|
||
grid.active_columns(width)
|
||
);
|
||
}
|
||
|
||
// Responsive value
|
||
let cols: Responsive<u32> = Responsive::fixed(1).md(2).lg(3);
|
||
println!("\n Responsive columns:");
|
||
for bp in [
|
||
Breakpoint::Base,
|
||
Breakpoint::Sm,
|
||
Breakpoint::Md,
|
||
Breakpoint::Lg,
|
||
Breakpoint::Xl,
|
||
] {
|
||
println!(" {:?}: {} col(s)", bp, cols.resolve(bp));
|
||
}
|
||
|
||
// Platform sizing
|
||
let ios_sizing = PlatformSizing::for_platform(PlatformFamily::Ios);
|
||
let android_sizing = PlatformSizing::for_platform(PlatformFamily::Android);
|
||
println!("\n Min touch targets:");
|
||
println!(" iOS: {}pt", ios_sizing.min_touch_target);
|
||
println!(" Android: {}dp", android_sizing.min_touch_target);
|
||
|
||
// 9. Locale formatting
|
||
println!("\n=== Locale-Aware Formatting ===");
|
||
let number = 1_234_567.89;
|
||
for (tag, locale) in [
|
||
("en-US", Locale::en_us()),
|
||
("de-DE", Locale::new("de-DE")),
|
||
("fr-FR", Locale::fr_fr()),
|
||
("ja-JP", Locale::ja()),
|
||
] {
|
||
let formatted = format_number(number, &locale, 2);
|
||
let currency = format_currency(1234.56, &locale, "USD");
|
||
println!(" {}: {} | {}", tag, formatted, currency);
|
||
}
|
||
|
||
// 10. RTL detection
|
||
println!("\n=== RTL Detection ===");
|
||
for tag in ["en-US", "ar-SA", "he", "fa", "zh-TW"] {
|
||
let locale = Locale::new(tag);
|
||
println!(" {}: {}", tag, if locale.is_rtl() { "RTL" } else { "LTR" });
|
||
}
|
||
|
||
println!("\nAll systems operational. el-ui is ready.");
|
||
}
|