kasy-cli 1.2.1

package/templates/firebase/lib/core/widgets/responsive_layout.dart

@@ -0,0 +1,215 @@
+import 'package:flutter/widgets.dart';
+
+enum DeviceType {
+  small(0),
+  medium(768),
+  large(1024),
+  xlarge(1280);
+
+  final int breakpoint;
+
+  const DeviceType(this.breakpoint);
+
+  static DeviceType fromWidth(double width) {
+    return switch (width) {
+      < 768 => DeviceType.small,
+      < 1024 => DeviceType.medium,
+      < 1280 => DeviceType.large,
+      _ => DeviceType.xlarge,
+    };
+  }
+}
+
+/// A widget that adapts its content to the current device type.
+/// It uses the [LayoutBuilder] widget to get the current device width
+/// and returns the widget that matches the current device type.
+/// Breakpoints are:
+/// - small: < 768
+/// - medium: >= 768
+/// - large: >= 1024
+/// - xlarge: >= 1280
+/// It's designed as mobile first meaning that if you don't provide a widget
+/// for a specific device type, it will fallback to the previous one. (the small widget is required)
+class ResponsiveLayout extends StatelessWidget {
+  final Widget small;
+  final Widget? medium;
+  final Widget? large;
+  final Widget? xlarge;
+
+  const ResponsiveLayout({
+    super.key,
+    required this.small,
+    this.medium,
+    this.large,
+    this.xlarge,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        switch (getDeviceType(constraints)) {
+          case DeviceType.small:
+            return small;
+          case DeviceType.medium:
+            return medium ?? small;
+          case DeviceType.large:
+            return large ?? medium ?? small;
+          case DeviceType.xlarge:
+            return xlarge ?? large ?? medium ?? small;
+        }
+      },
+    );
+  }
+
+  DeviceType getDeviceType(BoxConstraints constraints) {
+    return switch (constraints.maxWidth) {
+      > 1280 => DeviceType.xlarge,
+      > 1024 => DeviceType.large,
+      > 768 => DeviceType.medium,
+      _ => DeviceType.small,
+    };
+  }
+}
+
+/// A widget that adapts its content to the current device type.
+/// It uses the Most upper widget to get the current device width
+/// and returns the widget that matches the current device type.
+/// Use this when you want just some parts of the page to be adapted to the device type.
+///
+/// Breakpoints are:
+/// - small: < 768
+/// - medium: >= 768
+/// - large: >= 1024
+/// - xlarge: >= 1280
+/// It's designed as mobile first meaning that if you don't provide a widget
+/// for a specific device type, it will fallback to the previous one. (the small widget is required)
+class ResponsiveBuilder extends StatelessWidget {
+  final Widget small;
+  final Widget? medium;
+  final Widget? large;
+  final Widget? xlarge;
+
+  const ResponsiveBuilder({
+    super.key,
+    required this.small,
+    this.medium,
+    this.large,
+    this.xlarge,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DeviceSizeBuilder(
+      builder: (device) => switch (device) {
+        DeviceType.small => small,
+        DeviceType.medium => medium ?? small,
+        DeviceType.large => large ?? medium ?? small,
+        DeviceType.xlarge => xlarge ?? large ?? medium ?? small,
+      },
+    );
+  }
+}
+
+// ------------------------------------------------------
+// -- DeviceSizeBuilder
+// ------------------------------------------------------
+
+typedef DeviceTypeBuilder = Widget Function(DeviceType);
+
+/// A widget that helps you adapt  content to the current device type.
+/// It uses the Most upper View to get the current device width
+/// A builder is provided to let you adapt the content to the current device type.
+/// It will rebuild the content when the device type changes.
+class DeviceSizeBuilder extends StatefulWidget {
+  final DeviceTypeBuilder builder;
+
+  const DeviceSizeBuilder({
+    super.key,
+    required this.builder,
+  });
+
+  @override
+  State<DeviceSizeBuilder> createState() => _DeviceSizeBuilderState();
+}
+
+class _DeviceSizeBuilderState extends State<DeviceSizeBuilder>
+    with WidgetsBindingObserver {
+  late DeviceType _lastSize;
+  WidgetsBinding get widgetBinding => WidgetsBinding.instance;
+
+  @override
+  void initState() {
+    super.initState();
+    widgetBinding.addObserver(this);
+  }
+
+  @override
+  void dispose() {
+    widgetBinding.removeObserver(this);
+    super.dispose();
+  }
+
+  // detect the viewport width
+  // I don't use View.of(context).physicalSize.width;
+  // because it returns the complete screen width on Web
+  double get viewportWidth => MediaQuery.of(context).size.width;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _lastSize = DeviceType.fromWidth(viewportWidth);
+  }
+
+  @override
+  void didChangeMetrics() {
+    final newSize = DeviceType.fromWidth(viewportWidth);
+    if (_lastSize != newSize) {
+      _lastSize = newSize;
+      setState(() {});
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.builder(_lastSize);
+  }
+}
+
+/// The maximum width for large devices.
+const kMaxLargeLayoutWidth = 650.0;
+
+/// A widget that constrains its child to a maximum width on large devices.
+/// It uses the [LayoutBuilder] widget to get the current device width
+/// and constrains the child to the maximum width on large devices.
+/// the content will be centered on the screen.
+class LargeLayoutContainer extends StatelessWidget {
+  final Widget child;
+  final double? maxWidth;
+
+  const LargeLayoutContainer({
+    super.key,
+    required this.child,
+    this.maxWidth,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) => DeviceSizeBuilder(
+        builder: (device) => Align(
+          alignment: Alignment.topCenter,
+          child: ConstrainedBox(
+            constraints: switch (device) {
+              DeviceType.small => constraints,
+              _ => BoxConstraints(
+                  maxWidth: maxWidth ?? kMaxLargeLayoutWidth,
+                ),
+            },
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/core/widgets/update_bottom_sheet.dart

@@ -0,0 +1,192 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+/// Shows a modal bottom sheet displaying app update information
+Future<void> showUpdateBottomSheet({
+  required BuildContext context,
+  required String version,
+  bool useRootNavigator = true,
+}) async {
+  await showModalBottomSheet(
+    context: context,
+    useSafeArea: true,
+    useRootNavigator: useRootNavigator,
+    barrierColor: context.colors.background.withValues(alpha: 0.90),
+    isScrollControlled: true,
+    builder: (context) => _UpdateBottomSheet(version: version),
+  );
+}
+
+class _UpdateBottomSheet extends StatelessWidget {
+  final String version;
+
+  const _UpdateBottomSheet({required this.version});
+
+  @override
+  Widget build(BuildContext context) {
+    final translations = Translations.of(context).update_bottom_sheet;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: context.colors.surface,
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(KasyRadius.xl),
+          topRight: Radius.circular(KasyRadius.xl),
+        ),
+        border: Border.all(
+          color: context.colors.primary.withValues(alpha: 0.2),
+          strokeAlign: BorderSide.strokeAlignOutside,
+          width: 2,
+        ),
+      ),
+      child: SafeArea(
+        minimum: const EdgeInsets.only(bottom: KasySpacing.md),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Flexible(
+              flex: 0,
+              child: Align(
+                child: ClipRRect(
+                  borderRadius: const BorderRadius.only(
+                    topLeft: Radius.circular(KasyRadius.xl),
+                    topRight: Radius.circular(KasyRadius.xl),
+                  ),
+                  child: Image.asset(
+                    'assets/images/update.png',
+                    fit: BoxFit.cover,
+                  ),
+                ),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(
+                KasySpacing.lg,
+                KasySpacing.lg,
+                KasySpacing.md,
+                0,
+              ),
+              child: Row(
+                children: [
+                  Container(
+                    width: 48,
+                    height: 48,
+                    decoration: BoxDecoration(
+                      color: context.colors.primary.withValues(alpha: 0.1),
+                      borderRadius: KasyRadius.mdBorderRadius,
+                    ),
+                    child: Icon(
+                      KasyIcons.star,
+                      color: context.colors.primary,
+                      size: 24,
+                    ),
+                  ),
+                  const SizedBox(width: KasySpacing.md),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          translations.title,
+                          style: context.textTheme.headlineSmall?.copyWith(
+                            color: context.colors.onSurface,
+                            fontWeight: FontWeight.w700,
+                          ),
+                        ),
+                        Text(
+                          "Version $version",
+                          style: context.textTheme.bodyMedium?.copyWith(
+                            color: context.colors.muted,
+                            fontWeight: FontWeight.w500,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  KasyButton.iconOnly(
+                    icon: KasyIcons.close,
+                    variant: KasyButtonVariant.ghost,
+                    foregroundColor: context.colors.muted,
+                    onPressed: () => Navigator.of(context).pop(),
+                    semanticLabel: translations.title,
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: KasySpacing.lg),
+            Flexible(
+              child: ConstrainedBox(
+                constraints: BoxConstraints(
+                  maxHeight: MediaQuery.of(context).size.height * 0.6,
+                ),
+                child: ListView.separated(
+                  shrinkWrap: true,
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: KasySpacing.lg,
+                  ),
+                  itemBuilder: (context, index) {
+                    final highlight = translations.highlights[index];
+                    return _UpdateHighlightTile(highlight: highlight);
+                  },
+                  separatorBuilder: (context, index) =>
+                      const SizedBox(height: KasySpacing.sm),
+                  itemCount: translations.highlights.length,
+                ),
+              ),
+            ),
+            const SizedBox(height: KasySpacing.xl),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg),
+              child: SizedBox(
+                width: double.infinity,
+                child: KasyButton(
+                label: translations.continue_button,
+                expand: true,
+                onPressed: () => Navigator.of(context).pop(),
+              ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _UpdateHighlightTile extends StatelessWidget {
+  final String highlight;
+
+  const _UpdateHighlightTile({required this.highlight});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          width: KasySpacing.xs + 2,
+          height: KasySpacing.xs + 2,
+          margin: const EdgeInsets.only(top: KasySpacing.sm),
+          decoration: BoxDecoration(
+            color: context.colors.primary,
+            shape: BoxShape.circle,
+          ),
+        ),
+        const SizedBox(width: KasySpacing.md),
+        Expanded(
+          child: Text(
+            highlight,
+            style: context.textTheme.bodyMedium?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w500,
+              height: 1.4,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

package/templates/firebase/lib/environnements.dart

@@ -0,0 +1,160 @@
+// ignore_for_file: avoid_redundant_argument_values
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:kasy_kit/core/config/app_env.dart';
+import 'package:kasy_kit/core/states/user_state_notifier.dart';
+
+part 'environnements.freezed.dart';
+
+// URLs for terms of service and privacy policy
+const kTermsUrl = '';
+const kPrivacyUrl = '';
+
+final environmentProvider = Provider<Environment>(
+  (ref) => Environment.fromEnv(),
+);
+
+/// The environment of the app.
+/// - dev: Development environment
+/// - prod: Production environment
+/// Feel free to add more environments with your custom properties if needed.
+@freezed
+sealed class Environment with _$Environment {
+  const factory Environment.dev({
+    // Name of the environment (dev, prod, ...) just for debug purpose
+    required String name,
+
+    /// Url of your backend API / or Supabase URL / or Firebase Functions region
+    required String backendUrl,
+
+    /// RevenueCat API key for Android
+    /// (only if you want to use in-app purchases with RevenueCat)
+    String? revenueCatAndroidApiKey,
+
+    /// RevenueCat API key for iOS
+    /// (only if you want to use in-app purchases with RevenueCat)
+    String? revenueCatIOSApiKey,
+
+    /// RevenueCat Web Billing API key (rcb_xxx or rcb_sb_xxx)
+    /// (only if you want to use subscriptions on web)
+    String? revenueCatWebApiKey,
+
+    /// this is used to open the app store page of your app for reviews
+    String? appStoreId,
+
+    /// only if you want to use ads
+    String? androidInterstitialAdUnitId,
+
+    /// only if you want to use ads
+    String? iOSInterstitialAdUnitID,
+
+    /// Environment variable to handle Mixpanel analytics
+    /// You can get it from https://mixpanel.com
+    String? mixpanelToken,
+
+    /// The default authentication mode of the app (anonymous or authRequired)
+    /// See [AuthenticationMode]
+    required AuthenticationMode authenticationMode,
+  }) = DevEnvironment;
+
+  const factory Environment.prod({
+    required String name,
+
+    /// Url of your backend API / or Supabase URL / or Firebase Functions region
+    required String backendUrl,
+
+    /// RevenueCat API key for Android
+    /// (only if you want to use in-app purchases with RevenueCat)
+    String? revenueCatAndroidApiKey,
+
+    /// RevenueCat API key for iOS
+    /// (only if you want to use in-app purchases with RevenueCat)
+    String? revenueCatIOSApiKey,
+
+    /// RevenueCat Web Billing API key (rcb_xxx or rcb_sb_xxx)
+    /// (only if you want to use subscriptions on web)
+    String? revenueCatWebApiKey,
+
+    /// only if you want to use ads
+    String? androidInterstitialAdUnitId,
+
+    /// only if you want to use ads
+    String? iOSInterstitialAdUnitID,
+
+    /// this is used to open the app store page of your app for reviews
+    String? appStoreId,
+
+    /// Sentry is an error reporting tool that will help you to track errors in production
+    /// You can get it from https://sentry.io
+    /// by default sentry will read the SENTRY_DSN environment variable except for web
+    /// you can also setup it directly here. Prefer using environment variables
+    String? sentryDsn,
+
+    /// Environment variable to handle Mixpanel analytics
+    /// You can get it from https://mixpanel.com
+    String? mixpanelToken,
+
+    /// The default authentication mode of the app (anonymous or authRequired)
+    /// See [AuthenticationMode]
+    required AuthenticationMode authenticationMode,
+  }) = ProdEnvironment;
+
+  const Environment._();
+
+  factory Environment.fromEnv() {
+    final String environmentInput = AppEnv.env;
+    switch (environmentInput) {
+      case 'dev':
+        return Environment.dev(
+          name: 'dev',
+          backendUrl: AppEnv.backendUrl,
+          appStoreId: '',
+          revenueCatAndroidApiKey: AppEnv.rcAndroidApiKey,
+          revenueCatIOSApiKey: AppEnv.rcIosApiKey,
+          revenueCatWebApiKey: AppEnv.rcWebApiKey,
+          mixpanelToken: AppEnv.mixpanelToken,
+          // ─── Authentication mode ──────────────────────────────────────────
+          // AuthenticationMode.anonymous (default) → a hidden anonymous Firebase Auth
+          //   account is created automatically on first launch. The user can
+          //   link it to an email or social login later — data is preserved.
+          //   ✔ User data preserved on sign-up  ✔ Works with kit_setup anonymousSignup
+          //   Requires: Anonymous provider enabled in Firebase Auth + backend deployed.
+          //
+          // AuthenticationMode.authRequired → user browses freely without creating
+          //   an account. Protected features redirect to /signin when auth is needed.
+          //   ✔ No friction on first launch  ✔ No anonymous Firebase accounts
+          authenticationMode: AuthenticationMode.anonymous,
+        );
+      case 'prod':
+        return Environment.prod(
+          name: 'production',
+          backendUrl: AppEnv.backendUrl,
+          appStoreId: AppEnv.appStoreId,
+          revenueCatAndroidApiKey: AppEnv.rcAndroidApiKey,
+          revenueCatIOSApiKey: AppEnv.rcIosApiKey,
+          revenueCatWebApiKey: AppEnv.rcWebApiKey,
+          sentryDsn: AppEnv.sentryDsn,
+          mixpanelToken: AppEnv.mixpanelToken,
+          // See dev comment above for details on each mode.
+          authenticationMode: AuthenticationMode.anonymous,
+        );
+      default:
+        throw Exception('Unknown environment $environmentInput');
+    }
+  }
+
+  bool get isRevenueCatConfigured => switch (defaultTargetPlatform) {
+    TargetPlatform.iOS =>
+      revenueCatIOSApiKey != null && revenueCatIOSApiKey!.isNotEmpty,
+    TargetPlatform.android =>
+      revenueCatAndroidApiKey != null && revenueCatAndroidApiKey!.isNotEmpty,
+    _ =>
+      kIsWeb &&
+          (revenueCatWebApiKey != null && revenueCatWebApiKey!.isNotEmpty),
+  };
+}
+
+/// This callback is called when the app is launched.
+typedef OnEnvCallback = Future<void> Function();