kasy-cli 1.31.14 → 1.34.0

package/templates/firebase/tool/design_check.dart

@@ -0,0 +1,152 @@
+// Kasy design-system guard-rail.
+//
+// Fails (exit 1) when a FEATURE SCREEN reaches around the design system and
+// hardcodes a value that should come from a token / component. The design
+// primitives themselves (lib/components, lib/core) are exempt — that is where
+// the system is built, so raw values are expected there.
+//
+// This is intentionally a plain script, not a hidden dependency: read it, tune
+// the lists below, or delete it. It enforces the project's *defaults*; it never
+// locks anyone in.
+//
+// Run it locally or in CI:
+//   dart run tool/design_check.dart
+//
+// Escape hatch for a deliberate one-off: put `// design-check: ignore` on the
+// offending line (the reason should be obvious from a nearby comment).
+//
+// See DESIGN_SYSTEM.md for the tokens/roles to use instead.
+
+import 'dart:io';
+
+/// The guard-rail only scans FEATURE SCREENS ([_scanRoot]). The design system
+/// itself (lib/components, lib/core) and the app bootstrap (lib/main.dart) are
+/// the *implementation* of the system, so raw values are expected there and are
+/// out of scope by construction.
+const String _scanRoot = 'lib/features';
+
+/// Path fragments that are exempt even inside the feature layer.
+/// - admin: internal admin tooling (kept out of the product design pass).
+/// - generated files: not authored by hand.
+/// - showcase/mockups: deliberately render raw values to demo them.
+/// - subscriptions: the paywall is mid-redesign; re-enable when it lands.
+const List<String> _exemptPathFragments = <String>[
+  '/admin/',
+  'admin_card.dart',
+  '.g.dart',
+  '.freezed.dart',
+  'home_components_preview_registry.dart',
+  'home_components_preview_page.dart',
+  'home_components_page.dart',
+  'design_system_page.dart',
+  'onboarding_module_mockups.dart',
+  '/features/subscriptions/',
+];
+
+const String _ignoreMarker = '// design-check: ignore';
+
+class _Rule {
+  const _Rule(this.id, this.pattern, this.message);
+  final String id;
+  final RegExp pattern;
+  final String message;
+
+  /// Optional secondary token that must ALSO be on the line for the rule to
+  /// fire (used to scope `size:` to Icon lines only).
+  bool matches(String line) => pattern.hasMatch(line);
+}
+
+final List<_Rule> _rules = <_Rule>[
+  _Rule(
+    'raw-material',
+    RegExp(r'\b(ElevatedButton|OutlinedButton|TextButton|AlertDialog|SnackBar)\s*\(|(?<![A-Za-z])Card\s*\('),
+    'Use the Kasy component (KasyButton / showKasyConfirmDialog / showKasyToast '
+        '/ KasyCard) instead of the raw Material widget.',
+  ),
+  _Rule(
+    'hardcoded-font-size',
+    RegExp(r'fontSize:\s*\d'),
+    'Use a typography role (context.textTheme.* / KasyTextTheme.*) instead of a '
+        'literal fontSize.',
+  ),
+  _Rule(
+    'raw-color',
+    // `Color(0x...)` literals, or `Colors.<named>` — but NOT `KasyColors.` (the
+    // token class, hence the lookbehind) and NOT the transparent / white* /
+    // black* helpers, which are the legitimate way to build scrims & overlays.
+    RegExp(r'Color\(0x|(?<![A-Za-z])Colors\.(?!transparent\b)(?!white)(?!black)[A-Za-z]'),
+    'Use a colour token (context.colors.*) instead of a raw Color/Colors value.',
+  ),
+];
+
+// The icon rule needs two signals on the same line, so it is handled separately.
+final RegExp _iconCall = RegExp(r'\bIcon\s*\(');
+final RegExp _numericSize = RegExp(r'size:\s*\d');
+
+bool _isExempt(String path) =>
+    _exemptPathFragments.any((String frag) => path.contains(frag));
+
+void main() {
+  final Directory libDir = Directory(_scanRoot);
+  if (!libDir.existsSync()) {
+    stderr.writeln('design_check: run me from the package root (no $_scanRoot here).');
+    exit(2);
+  }
+
+  final List<String> violations = <String>[];
+  int scanned = 0;
+
+  for (final FileSystemEntity entity in libDir.listSync(recursive: true)) {
+    if (entity is! File || !entity.path.endsWith('.dart')) continue;
+    final String path = entity.path.replaceAll(r'\', '/');
+    if (_isExempt('/$path')) continue;
+    scanned++;
+
+    final List<String> lines = entity.readAsLinesSync();
+    for (int i = 0; i < lines.length; i++) {
+      final String line = lines[i];
+      if (line.contains(_ignoreMarker)) continue;
+      final String code = _stripComment(line);
+      if (code.trim().isEmpty) continue;
+
+      for (final _Rule rule in _rules) {
+        if (rule.matches(code)) {
+          violations.add(_format(path, i + 1, rule.id, rule.message, line));
+        }
+      }
+      if (_iconCall.hasMatch(code) && _numericSize.hasMatch(code)) {
+        violations.add(_format(
+          path,
+          i + 1,
+          'hardcoded-icon-size',
+          'Use a KasyIconSize.* token instead of a literal Icon size.',
+          line,
+        ));
+      }
+    }
+  }
+
+  if (violations.isEmpty) {
+    stdout.writeln('design_check: OK ($scanned feature files clean).');
+    exit(0);
+  }
+
+  stdout.writeln('design_check: ${violations.length} violation(s) found.\n');
+  stdout.writeln(violations.join('\n\n'));
+  stdout.writeln(
+    '\nFix by using a token/role/component (see DESIGN_SYSTEM.md), or mark a '
+    'deliberate exception with `$_ignoreMarker` on the line.',
+  );
+  exit(1);
+}
+
+/// Drops an end-of-line `//` comment so rules don't match commented-out code or
+/// doc text (keeps string literals intact enough for these coarse checks).
+String _stripComment(String line) {
+  final int idx = line.indexOf('//');
+  return idx == -1 ? line : line.substring(0, idx);
+}
+
+String _format(String path, int line, String id, String message, String src) {
+  return '  $path:$line  [$id]\n    ${src.trim()}\n    → $message';
+}

package/templates/firebase/web/stripe_success.html

@@ -4,84 +4,112 @@
 
   Stripe redirects the checkout tab here (success_url) after a successful
   payment. It is intentionally a tiny standalone page — NOT the full Flutter
-  app — so the user does not end up with two heavy app tabs open. The original
-  app tab keeps polling and flips to premium on its own (via the webhook), so
-  here we just congratulate the user and let them close this tab / return.
+  app — so the user does not end up with two heavy app tabs open, and so the
+  "return to the app" button can reliably window.close() this tab (only a light
+  page opened via window.open is allowed to close itself). The original app tab
+  keeps polling and flips to premium on its own (via the webhook).
 
-  Localized client-side from navigator.language (pt / es / en).
+  Styled to match the kit's design system (Inter + the same color tokens as the
+  Flutter app). Localized from the ?lang= the app appends (the language picked
+  IN the app), falling back to the browser language.
 -->
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Payment complete</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+    rel="stylesheet"
+  />
   <style>
+    /* Kit design tokens (mirror lib/core/theme/colors.dart). */
     :root {
       --accent: #0485F7;
-      --success: #16A34A;
-      --bg: #F6F8FB;
+      --accent-fg: #FFFFFF;
+      --success: #17C964;
+      --bg: #F5F5F5;
       --card: #FFFFFF;
-      --text: #0B1524;
-      --muted: #5B6776;
-      --border: rgba(11, 21, 36, 0.08);
+      --text: #18181B;
+      --muted: #71717A;
+      --border: rgba(24, 24, 27, 0.10);
+      --shadow: 0 12px 40px rgba(24, 24, 27, 0.10);
     }
     @media (prefers-color-scheme: dark) {
       :root {
-        --bg: #0B1220;
-        --card: #131C2B;
-        --text: #F3F6FB;
-        --muted: #9AA7B8;
-        --border: rgba(255, 255, 255, 0.10);
+        --bg: #060607;
+        --card: #18181B;
+        --text: #FCFCFC;
+        --muted: #A1A1AA;
+        --border: rgba(255, 255, 255, 0.08);
+        --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
       }
     }
     * { box-sizing: border-box; }
     html, body { height: 100%; margin: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-        Helvetica, Arial, sans-serif;
+      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, Helvetica, Arial, sans-serif;
       background: var(--bg);
       color: var(--text);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 24px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
     .card {
       width: 100%;
       max-width: 420px;
       background: var(--card);
       border: 1px solid var(--border);
-      border-radius: 20px;
+      border-radius: 24px;
       padding: 40px 32px;
       text-align: center;
-      box-shadow: 0 12px 40px rgba(11, 21, 36, 0.08);
+      box-shadow: var(--shadow);
     }
     .check {
       width: 72px;
       height: 72px;
       margin: 0 auto 24px;
       border-radius: 50%;
-      background: rgba(22, 163, 74, 0.12);
+      background: rgba(23, 201, 100, 0.12);
       display: flex;
       align-items: center;
       justify-content: center;
     }
-    .check svg { width: 38px; height: 38px; stroke: var(--success); }
-    h1 { font-size: 22px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.4px; }
-    p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 28px; }
+    .check svg { width: 36px; height: 36px; stroke: var(--success); }
+    h1 {
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.2px;
+      margin: 0 0 10px;
+    }
+    p {
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--muted);
+      margin: 0 0 28px;
+    }
     button {
       width: 100%;
       border: none;
-      border-radius: 12px;
+      border-radius: 14px;
       padding: 14px 20px;
-      font-size: 15px;
+      font-family: inherit;
+      font-size: 16px;
       font-weight: 600;
-      color: #FFFFFF;
+      color: var(--accent-fg);
       background: var(--accent);
       cursor: pointer;
       transition: opacity 0.15s ease;
     }
     button:hover { opacity: 0.92; }
+    button:active { opacity: 0.85; }
   </style>
 </head>
 <body>
@@ -119,7 +147,17 @@
       },
     };
 
-    var lang = (navigator.language || "en").slice(0, 2).toLowerCase();
+    // Prefer the language the app passed (?lang=xx) — the one the user picked
+    // IN the app — then fall back to the browser language.
+    function pickLang() {
+      try {
+        var q = new URLSearchParams(window.location.search).get("lang");
+        if (q) return q.slice(0, 2).toLowerCase();
+      } catch (e) {}
+      return (navigator.language || "en").slice(0, 2).toLowerCase();
+    }
+
+    var lang = pickLang();
     var t = I18N[lang] || I18N.en;
     document.documentElement.lang = lang in I18N ? lang : "en";
     document.title = t.doc;

package/lib/scaffold/backends/api/patch/lib/features/onboarding/ui/animations/movefade_anim.dart

@@ -1,34 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
-
-class MoveFadeAnim extends StatelessWidget {
-  final int? delayInMs;
-  final Widget child;
-
-  const MoveFadeAnim({
-    super.key,
-    required this.child,
-    this.delayInMs,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Animate(
-      effects: [
-        FadeEffect(
-          delay: Duration(milliseconds: delayInMs ?? 0),
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeIn,
-        ),
-        MoveEffect(
-          delay: Duration(milliseconds: delayInMs ?? 0),
-          duration: const Duration(milliseconds: 450),
-          curve: Curves.easeOut,
-          begin: const Offset(0, 50),
-          end: Offset.zero,
-        ),
-      ],
-      child: child,
-    );
-  }
-}

package/lib/scaffold/backends/api/patch/lib/features/onboarding/ui/components/onboarding_att_setup.dart

@@ -1,67 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:kasy_kit/components/components.dart';
-import 'package:kasy_kit/core/data/api/analytics_api.dart';
-import 'package:kasy_kit/core/data/api/tracking_api.dart';
-import 'package:kasy_kit/core/states/user_state_notifier.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_background.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_illustration_scaffold.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_module_mockups.dart';
-import 'package:kasy_kit/features/subscriptions/repositories/subscription_repository.dart';
-import 'package:kasy_kit/i18n/translations.g.dart';
-import 'package:permission_handler/permission_handler.dart';
-
-/// ATT Permission Step
-/// ATT is only available on iOS
-/// This is the consent screen for iOS 14+ that asks the user to allow the app to access the ATT framework
-/// In a few words you need this to get the IDFA (Identifier for Advertisers) which is used for tracking purposes
-/// So you can create better facebook ads, google ads, etc...
-class AttPermissionStep extends ConsumerWidget {
-  final String nextRoute;
-
-  const AttPermissionStep({
-    super.key,
-    required this.nextRoute,
-  });
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final translations = Translations.of(context).onboarding.att;
-
-    return OnboardingBackground(
-      child: OnboardingIllustrationScaffold(
-        step: 6,
-        title: translations.title,
-        description: translations.description,
-        image: const TrackingPermissionMockup(),
-        footerActions: [
-          KasyButton(
-            label: translations.continue_button,
-            expand: true,
-            onPressed: () async {
-              final Map<Permission, PermissionStatus> permission = await [
-                Permission.appTrackingTransparency,
-              ].request();
-              final isGranted =
-                  permission.values.first == PermissionStatus.granted;
-              ref.read(analyticsApiProvider).logEvent('att_request', {
-                'granted': isGranted,
-              });
-              final userId =
-                  ref.read(userStateNotifierProvider).user.idOrNull;
-              if (userId != null) {
-                ref
-                    .read(subscriptionRepositoryProvider)
-                    .initUser(userId)
-                    .ignore();
-                ref.read(facebookEventApiProvider).initUser(userId).ignore();
-              }
-              if (!context.mounted) return;
-              Navigator.of(context).pushNamed(nextRoute);
-            },
-          ),
-        ],
-      ),
-    );
-  }
-}

package/lib/scaffold/backends/api/patch/lib/features/onboarding/ui/widgets/onboarding_radio_question.dart

@@ -1,183 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:kasy_kit/components/components.dart';
-import 'package:kasy_kit/core/animations/movefade_anim.dart';
-import 'package:kasy_kit/core/theme/theme.dart';
-import 'package:kasy_kit/core/widgets/responsive_layout.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_background.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_progress.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_step_header.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_sticky_footer.dart';
-import 'package:kasy_kit/features/onboarding/ui/widgets/selectable_row_tile.dart';
-
-typedef OptionBuilder = Widget Function(String key, bool selected);
-
-typedef ReassuranceBuilder = Widget? Function(String key);
-
-typedef OnOptionIdSelected = void Function(String id);
-
-typedef OnValidate = void Function(String? key);
-
-/// Single choice question with selectable tiles, matching the clean‑premium
-/// onboarding layout (shared header, left‑aligned title, sticky footer).
-class OnboardingRadioQuestion extends ConsumerStatefulWidget {
-  final int step;
-  final int totalSteps;
-  final String title;
-  final String description;
-  final String btnText;
-  final List<String> optionIds;
-  final OptionBuilder optionBuilder;
-  final ReassuranceBuilder? reassuranceBuilder;
-  final OnOptionIdSelected? onOptionIdSelected;
-  final OnValidate? onValidate;
-
-  const OnboardingRadioQuestion({
-    super.key,
-    required this.title,
-    required this.description,
-    required this.btnText,
-    required this.optionIds,
-    required this.optionBuilder,
-    required this.step,
-    this.totalSteps = kOnboardingSteps,
-    this.onOptionIdSelected,
-    this.onValidate,
-    this.reassuranceBuilder,
-  });
-
-  @override
-  ConsumerState<OnboardingRadioQuestion> createState() =>
-      _OnboardingRadioQuestionState();
-}
-
-class _OnboardingRadioQuestionState
-    extends ConsumerState<OnboardingRadioQuestion> {
-  String? selectedChoiceId;
-
-  @override
-  Widget build(BuildContext context) {
-    const gutter = KasySpacing.lg;
-
-    final scrollBody = Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        OnboardingStepHeader(step: widget.step, totalSteps: widget.totalSteps),
-        Padding(
-          padding: const EdgeInsets.fromLTRB(gutter, KasySpacing.lg, gutter, 0),
-          child: MoveFadeAnim(
-            delayInMs: 120,
-            child: Text(
-              widget.title,
-              textAlign: TextAlign.start,
-              style: context.textTheme.headlineMedium?.copyWith(
-                color: context.colors.onBackground,
-                fontSize: 26,
-                fontWeight: FontWeight.w700,
-                letterSpacing: -0.2,
-                height: 1.2,
-              ),
-            ),
-          ),
-        ),
-        Padding(
-          padding: const EdgeInsets.fromLTRB(
-            gutter,
-            KasySpacing.smd,
-            gutter,
-            KasySpacing.lg,
-          ),
-          child: MoveFadeAnim(
-            delayInMs: 200,
-            child: Text(
-              widget.description,
-              textAlign: TextAlign.start,
-              style: context.textTheme.bodyLarge?.copyWith(
-                color: context.colors.muted,
-                height: 1.45,
-              ),
-            ),
-          ),
-        ),
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: gutter),
-          child: OnboardingSelectableRowGroup(
-            physics: const NeverScrollableScrollPhysics(),
-            options: widget.optionIds.map(
-              (e) {
-                final index = widget.optionIds.indexOf(e);
-                return Animate(
-                  effects: [
-                    FadeEffect(
-                      delay: Duration(milliseconds: 280 + index * 80),
-                      duration: const Duration(milliseconds: 450),
-                      curve: Curves.easeOut,
-                    ),
-                    MoveEffect(
-                      delay: Duration(milliseconds: 280 + index * 80),
-                      duration: const Duration(milliseconds: 450),
-                      curve: Curves.easeOut,
-                      begin: const Offset(0, 24),
-                      end: Offset.zero,
-                    ),
-                  ],
-                  child: widget.optionBuilder(e, e == selectedChoiceId),
-                );
-              },
-            ).toList(),
-            onSelect: (index, selected) {
-              widget.onOptionIdSelected?.call(widget.optionIds[index]);
-              setState(() {
-                selectedChoiceId = widget.optionIds[index];
-              });
-            },
-            onSelectInfoWidget: widget.optionIds
-                .map((el) => widget.reassuranceBuilder?.call(el))
-                .toList(),
-          ),
-        ),
-        const SizedBox(height: KasySpacing.xl),
-      ],
-    );
-
-    return OnboardingBackground(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          Expanded(
-            child: SafeArea(
-              bottom: false,
-              child: SingleChildScrollView(
-                padding: const EdgeInsets.only(bottom: KasySpacing.md),
-                child: ResponsiveBuilder(
-                  small: scrollBody,
-                  medium: Center(
-                    child: ConstrainedBox(
-                      constraints: const BoxConstraints(maxWidth: 600),
-                      child: scrollBody,
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-          DeviceSizeBuilder(
-            builder: (device) => OnboardingStickyFooter(
-              maxContentWidth: device == DeviceType.small ? null : 600,
-              children: [
-                KasyButton(
-                  label: widget.btnText,
-                  expand: true,
-                  onPressed: selectedChoiceId == null
-                      ? null
-                      : () => widget.onValidate?.call(selectedChoiceId),
-                ),
-              ],
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}

package/lib/scaffold/backends/supabase/patch/lib/features/onboarding/ui/animations/movefade_anim.dart

@@ -1,34 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
-
-class MoveFadeAnim extends StatelessWidget {
-  final int? delayInMs;
-  final Widget child;
-
-  const MoveFadeAnim({
-    super.key,
-    required this.child,
-    this.delayInMs,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Animate(
-      effects: [
-        FadeEffect(
-          delay: Duration(milliseconds: delayInMs ?? 0),
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeIn,
-        ),
-        MoveEffect(
-          delay: Duration(milliseconds: delayInMs ?? 0),
-          duration: const Duration(milliseconds: 450),
-          curve: Curves.easeOut,
-          begin: const Offset(0, 50),
-          end: Offset.zero,
-        ),
-      ],
-      child: child,
-    );
-  }
-}