kasy-cli 1.21.8 → 1.22.0

package/templates/firebase/lib/features/onboarding/ui/widgets/onboarding_module_mockups.dart

@@ -0,0 +1,639 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+/// Live, in‑Flutter mockups of the kit's modules used as onboarding heroes.
+///
+/// They are purely presentational (no interaction) and built entirely from
+/// theme tokens, so they adapt to light/dark and to the brand color. Each one
+/// is a tiny, faithful preview of a real module the kit ships with.
+
+// ─────────────────────────────────────────────────────────────────────────
+// Shared building blocks
+// ─────────────────────────────────────────────────────────────────────────
+
+/// A soft brand glow behind a floating card, framed in a clean stage.
+class _MockStage extends StatelessWidget {
+  const _MockStage({required this.child, this.maxWidth = 300});
+
+  final Widget child;
+  final double maxWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    final primary = context.colors.primary;
+    return Center(
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: maxWidth),
+        child: Stack(
+          alignment: Alignment.center,
+          clipBehavior: Clip.none,
+          children: [
+            // Radial brand glow centered behind the card.
+            Positioned.fill(
+              child: Center(
+                child: Container(
+                  width: maxWidth * 0.9,
+                  height: maxWidth * 0.9,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    gradient: RadialGradient(
+                      colors: [
+                        primary.withValues(alpha: context.isDark ? 0.22 : 0.16),
+                        primary.withValues(alpha: 0),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            child,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A floating surface card with hairline border + soft elevation.
+class _Card extends StatelessWidget {
+  const _Card({
+    required this.child,
+    this.padding = const EdgeInsets.all(KasySpacing.md),
+  });
+
+  final Widget child;
+  final EdgeInsets padding;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      padding: padding,
+      decoration: BoxDecoration(
+        color: colors.surface,
+        borderRadius: KasyRadius.xlBorderRadius,
+        border: Border.all(
+          // Hairline: a faint light edge in dark mode, a faint dark edge in light.
+          color: context.isDark
+              ? Colors.white.withValues(alpha: 0.06)
+              : Colors.black.withValues(alpha: 0.06),
+        ),
+        boxShadow: [
+          // Always a dark shadow (never tinted by onBackground, which flips to
+          // near‑white in dark mode and produced a strange halo).
+          BoxShadow(
+            color: Colors.black.withValues(
+              alpha: context.isDark ? 0.30 : 0.10,
+            ),
+            blurRadius: 24,
+            offset: const Offset(0, 12),
+          ),
+        ],
+      ),
+      child: child,
+    );
+  }
+}
+
+/// Brand‑colored rounded icon badge.
+class _IconBadge extends StatelessWidget {
+  const _IconBadge(this.icon, {this.size = 40, this.glyph = 20});
+
+  final IconData icon;
+  final double size;
+  final double glyph;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            colors.primary,
+            Color.lerp(colors.primary, Colors.black, 0.18)!,
+          ],
+        ),
+        borderRadius: BorderRadius.circular(size * 0.3),
+      ),
+      child: Icon(icon, color: colors.onPrimary, size: glyph),
+    );
+  }
+}
+
+/// Skeleton line used to suggest text without spelling it out.
+class _Bar extends StatelessWidget {
+  const _Bar({required this.width, this.height = 8, this.strong = false});
+
+  final double width;
+  final double height;
+  final bool strong;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      width: width,
+      height: height,
+      decoration: BoxDecoration(
+        color: colors.onSurface.withValues(alpha: strong ? 0.55 : 0.14),
+        borderRadius: KasyRadius.fullBorderRadius,
+      ),
+    );
+  }
+}
+
+/// Faux primary pill (looks like [KasyButton] without being interactive).
+class _PillButton extends StatelessWidget {
+  const _PillButton(this.label, {this.filled = true});
+
+  final String label;
+  final bool filled;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      height: 38,
+      alignment: Alignment.center,
+      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+      decoration: BoxDecoration(
+        color: filled ? colors.primary : Colors.transparent,
+        borderRadius: KasyRadius.mdBorderRadius,
+        border: filled
+            ? null
+            : Border.all(color: colors.outlineButton),
+      ),
+      child: Text(
+        label,
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+        textAlign: TextAlign.center,
+        style: context.textTheme.labelLarge?.copyWith(
+          color: filled ? colors.onPrimary : colors.onSurface,
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Paywall / subscriptions
+// ─────────────────────────────────────────────────────────────────────────
+
+class PaywallMockup extends StatelessWidget {
+  const PaywallMockup({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    final t = Translations.of(context).onboarding.mockups.paywall;
+    return _MockStage(
+      maxWidth: 320,
+      child: _Card(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              children: [
+                const _IconBadge(KasyIcons.star),
+                const SizedBox(width: KasySpacing.smd),
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      t.title,
+                      style: context.textTheme.titleMedium?.copyWith(
+                        color: colors.onSurface,
+                        fontWeight: FontWeight.w800,
+                      ),
+                    ),
+                    const SizedBox(height: 4),
+                    const _Bar(width: 96),
+                  ],
+                ),
+              ],
+            ),
+            const SizedBox(height: KasySpacing.lg),
+            _PlanRow(
+              title: t.annual,
+              price: t.price_year,
+              badge: t.save_badge,
+              selected: true,
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            _PlanRow(title: t.monthly, price: t.price_month),
+            const SizedBox(height: KasySpacing.lg),
+            _PillButton(t.cta),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PlanRow extends StatelessWidget {
+  const _PlanRow({
+    required this.title,
+    required this.price,
+    this.badge,
+    this.selected = false,
+  });
+
+  final String title;
+  final String price;
+  final String? badge;
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.smd,
+        vertical: KasySpacing.smd,
+      ),
+      decoration: BoxDecoration(
+        color: selected ? colors.surfacePrimarySoft : colors.surfaceNeutralSoft,
+        borderRadius: KasyRadius.lgBorderRadius,
+        border: Border.all(
+          color: selected ? colors.primary : Colors.transparent,
+          width: 1.5,
+        ),
+      ),
+      child: Row(
+        children: [
+          Container(
+            width: 18,
+            height: 18,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: selected ? colors.primary : Colors.transparent,
+              border: Border.all(
+                color: selected ? colors.primary : colors.outlineButton,
+                width: 2,
+              ),
+            ),
+            child: selected
+                ? Icon(KasyIcons.check, size: 12, color: colors.onPrimary)
+                : null,
+          ),
+          const SizedBox(width: KasySpacing.smd),
+          Expanded(
+            child: Text(
+              title,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: context.textTheme.titleSmall?.copyWith(
+                color: colors.onSurface,
+                fontWeight: FontWeight.w700,
+              ),
+            ),
+          ),
+          const SizedBox(width: KasySpacing.sm),
+          if (badge != null) ...[
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
+              decoration: BoxDecoration(
+                color: colors.primary,
+                borderRadius: KasyRadius.fullBorderRadius,
+              ),
+              child: Text(
+                badge!,
+                style: context.textTheme.labelSmall?.copyWith(
+                  color: colors.onPrimary,
+                  fontWeight: FontWeight.w800,
+                  letterSpacing: 0.4,
+                ),
+              ),
+            ),
+            const SizedBox(width: KasySpacing.sm),
+          ],
+          Text(
+            price,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: colors.muted,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Authentication
+// ─────────────────────────────────────────────────────────────────────────
+
+class AuthMockup extends StatelessWidget {
+  const AuthMockup({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    final t = Translations.of(context).onboarding.mockups.auth;
+    return _MockStage(
+      child: _Card(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              t.welcome,
+              style: context.textTheme.titleMedium?.copyWith(
+                color: colors.onSurface,
+                fontWeight: FontWeight.w800,
+              ),
+            ),
+            const SizedBox(height: KasySpacing.md),
+            _FakeField(icon: KasyIcons.person, hint: t.email_hint),
+            const SizedBox(height: KasySpacing.sm),
+            const _FakeField(
+              icon: KasyIcons.security,
+              hint: '••••••••',
+              obscured: true,
+            ),
+            const SizedBox(height: KasySpacing.md),
+            _PillButton(t.sign_in),
+            const SizedBox(height: KasySpacing.md),
+            Row(
+              children: [
+                const Expanded(child: _Bar(width: double.infinity, height: 1)),
+                Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: KasySpacing.sm),
+                  child: Text(
+                    t.divider,
+                    style: context.textTheme.labelSmall?.copyWith(
+                      color: colors.muted,
+                    ),
+                  ),
+                ),
+                const Expanded(child: _Bar(width: double.infinity, height: 1)),
+              ],
+            ),
+            const SizedBox(height: KasySpacing.md),
+            const Row(
+              children: [
+                Expanded(child: _SocialChip(KasyIcons.language)),
+                SizedBox(width: KasySpacing.sm),
+                Expanded(child: _SocialChip(KasyIcons.favorite)),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _FakeField extends StatelessWidget {
+  const _FakeField({
+    required this.icon,
+    required this.hint,
+    this.obscured = false,
+  });
+
+  final IconData icon;
+  final String hint;
+  final bool obscured;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      height: 44,
+      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+      decoration: BoxDecoration(
+        color: colors.surfaceNeutralSoft,
+        borderRadius: KasyRadius.mdBorderRadius,
+        border: Border.all(color: colors.outline),
+      ),
+      child: Row(
+        children: [
+          Icon(icon, size: 16, color: colors.muted),
+          const SizedBox(width: KasySpacing.sm),
+          Text(
+            hint,
+            style: context.textTheme.bodyMedium?.copyWith(
+              color: colors.muted,
+              letterSpacing: obscured ? 2 : 0.1,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SocialChip extends StatelessWidget {
+  const _SocialChip(this.icon);
+
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      height: 40,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        color: colors.surfaceNeutralSoft,
+        borderRadius: KasyRadius.mdBorderRadius,
+        border: Border.all(color: colors.outline),
+      ),
+      child: Icon(icon, size: 18, color: colors.onSurface),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Notifications (push toast stack)
+// ─────────────────────────────────────────────────────────────────────────
+
+class NotificationsMockup extends StatelessWidget {
+  const NotificationsMockup({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    final t = Translations.of(context).onboarding.mockups.notification;
+    return _MockStage(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // Faded card behind for depth.
+          Transform.translate(
+            offset: const Offset(0, 14),
+            child: Transform.scale(
+              scale: 0.92,
+              child: const Opacity(
+                opacity: 0.5,
+                child: _Card(
+                  child: SizedBox(
+                    height: 40,
+                    width: double.infinity,
+                    child: Row(
+                      children: [
+                        _Bar(width: 32, height: 32),
+                        SizedBox(width: KasySpacing.smd),
+                        Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            _Bar(width: 120, strong: true),
+                            SizedBox(height: 6),
+                            _Bar(width: 80),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          _Card(
+            child: Row(
+              children: [
+                const _IconBadge(KasyIcons.notificationActive, glyph: 18),
+                const SizedBox(width: KasySpacing.smd),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        children: [
+                          Flexible(
+                            child: Text(
+                              t.title,
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: context.textTheme.titleSmall?.copyWith(
+                                color: colors.onSurface,
+                                fontWeight: FontWeight.w800,
+                              ),
+                            ),
+                          ),
+                          const Spacer(),
+                          Text(
+                            t.time,
+                            style: context.textTheme.labelSmall?.copyWith(
+                              color: colors.muted,
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 6),
+                      const _Bar(width: 160),
+                      const SizedBox(height: 6),
+                      const _Bar(width: 110),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Permission dialogs (iOS‑style alert) — push & tracking
+// ─────────────────────────────────────────────────────────────────────────
+
+class PushPermissionMockup extends StatelessWidget {
+  const PushPermissionMockup({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final t = Translations.of(context).onboarding.mockups.push_permission;
+    return _PermissionDialogMockup(
+      icon: KasyIcons.notificationActive,
+      title: t.title,
+      primaryLabel: t.allow,
+      secondaryLabel: t.deny,
+    );
+  }
+}
+
+class TrackingPermissionMockup extends StatelessWidget {
+  const TrackingPermissionMockup({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final t = Translations.of(context).onboarding.mockups.tracking_permission;
+    return _PermissionDialogMockup(
+      icon: KasyIcons.privacy,
+      title: t.title,
+      primaryLabel: t.allow,
+      secondaryLabel: t.deny,
+    );
+  }
+}
+
+class _PermissionDialogMockup extends StatelessWidget {
+  const _PermissionDialogMockup({
+    required this.icon,
+    required this.title,
+    required this.primaryLabel,
+    required this.secondaryLabel,
+  });
+
+  final IconData icon;
+  final String title;
+  final String primaryLabel;
+  final String secondaryLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return _MockStage(
+      maxWidth: 272,
+      child: _Card(
+        padding: const EdgeInsets.fromLTRB(
+          KasySpacing.lg,
+          KasySpacing.lg,
+          KasySpacing.lg,
+          KasySpacing.md,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Center(child: _IconBadge(icon, size: 52, glyph: 26)),
+            const SizedBox(height: KasySpacing.md),
+            Text(
+              title,
+              textAlign: TextAlign.center,
+              style: context.textTheme.titleMedium?.copyWith(
+                color: colors.onSurface,
+                fontWeight: FontWeight.w800,
+              ),
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            const Center(child: _Bar(width: 180)),
+            const SizedBox(height: 6),
+            const Center(child: _Bar(width: 130)),
+            const SizedBox(height: KasySpacing.lg),
+            _PillButton(primaryLabel),
+            const SizedBox(height: KasySpacing.sm),
+            _PillButton(secondaryLabel, filled: false),
+          ],
+        ),
+      ),
+    );
+  }
+}