kasy-cli 1.8.1 → 1.8.2

package/lib/scaffold/CHANGELOG.json

@@ -1,4 +1,13 @@
 {
+  "1.8.0": {
+    "modules": {
+      "components": {
+        "pt": "Novo componente KasySwipeAction (arrastar para excluir/arquivar) + tela de notificações com excluir tudo e swipe-to-delete",
+        "en": "New KasySwipeAction component (swipe to delete/archive) + notifications screen with delete-all and swipe-to-delete",
+        "es": "Nuevo componente KasySwipeAction (deslizar para eliminar/archivar) + pantalla de notificaciones con eliminar todo y swipe-to-delete"
+      }
+    }
+  },
   "1.5.0": {
     "modules": {
       "widget": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasy-cli",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "CLI for scaffolding production-ready Flutter SaaS apps with Firebase, Supabase, or API REST backends.",
   "bin": {
     "kasy": "./bin/kasy.js"

package/templates/firebase/lib/components/components.dart

@@ -21,6 +21,7 @@ export 'kasy_chip.dart';
 export 'kasy_dialog.dart';
 export 'kasy_otp_verification_bottom_sheet.dart';
 export 'kasy_skeleton.dart';
+export 'kasy_swipe_action.dart';
 export 'kasy_text_area.dart';
 export 'kasy_text_field.dart';
 export 'kasy_text_field_otp.dart';

package/templates/firebase/lib/components/kasy_swipe_action.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Visual tone for the action revealed behind a [KasySwipeAction].
+enum KasySwipeActionTone {
+  /// Destructive action (delete, remove). Red background, white icon.
+  destructive,
+
+  /// Neutral action (archive, snooze). Surface tint, on-surface icon.
+  neutral,
+}
+
+/// Direction in which the user must swipe to reveal the action.
+enum KasySwipeActionDirection {
+  /// Swipe from right to left (common for delete on mobile lists).
+  endToStart,
+
+  /// Swipe from left to right.
+  startToEnd,
+
+  /// Both directions allowed.
+  both,
+}
+
+/// Wraps any [child] so the user can swipe it horizontally to trigger an
+/// action — most commonly a delete. Visual chrome and dismiss threshold come
+/// from the design system; the parent only supplies the action callback.
+///
+/// ```dart
+/// KasySwipeAction(
+///   key: ValueKey(item.id),
+///   onDismissed: () => repository.delete(item),
+///   child: NotificationTile(notification: item),
+/// );
+/// ```
+///
+/// For a confirmation step (e.g. asking before deleting), supply
+/// [confirmDismiss] returning `true` to proceed. Returning `false` (or
+/// awaiting a dialog that returns `false`) snaps the card back into place.
+class KasySwipeAction extends StatelessWidget {
+  final Widget child;
+  final VoidCallback onDismissed;
+  final KasySwipeActionTone tone;
+  final KasySwipeActionDirection direction;
+  final IconData icon;
+  final String? label;
+
+  /// Optional confirmation hook. Return `true` to dismiss, `false` to cancel.
+  final Future<bool> Function()? confirmDismiss;
+
+  const KasySwipeAction({
+    required Key super.key,
+    required this.child,
+    required this.onDismissed,
+    this.tone = KasySwipeActionTone.destructive,
+    this.direction = KasySwipeActionDirection.endToStart,
+    this.icon = KasyIcons.trash,
+    this.label,
+  }) : confirmDismiss = null;
+
+  const KasySwipeAction.withConfirm({
+    required Key super.key,
+    required this.child,
+    required this.onDismissed,
+    required Future<bool> Function() confirm,
+    this.tone = KasySwipeActionTone.destructive,
+    this.direction = KasySwipeActionDirection.endToStart,
+    this.icon = KasyIcons.trash,
+    this.label,
+  }) : confirmDismiss = confirm;
+
+  DismissDirection _flutterDirection() {
+    switch (direction) {
+      case KasySwipeActionDirection.endToStart:
+        return DismissDirection.endToStart;
+      case KasySwipeActionDirection.startToEnd:
+        return DismissDirection.startToEnd;
+      case KasySwipeActionDirection.both:
+        return DismissDirection.horizontal;
+    }
+  }
+
+  Color _backgroundColor(BuildContext context) {
+    switch (tone) {
+      case KasySwipeActionTone.destructive:
+        return context.colors.error;
+      case KasySwipeActionTone.neutral:
+        return context.colors.surfaceNeutralSoft;
+    }
+  }
+
+  Color _foregroundColor(BuildContext context) {
+    switch (tone) {
+      case KasySwipeActionTone.destructive:
+        return context.colors.onError;
+      case KasySwipeActionTone.neutral:
+        return context.colors.onSurface;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Color bg = _backgroundColor(context);
+    final Color fg = _foregroundColor(context);
+    final DismissDirection flutterDirection = _flutterDirection();
+
+    Widget buildBackground(Alignment alignment) {
+      final children = <Widget>[
+        Icon(icon, color: fg),
+        if (label != null) ...[
+          const SizedBox(width: KasySpacing.sm),
+          Text(
+            label!,
+            style: context.textTheme.labelLarge?.copyWith(color: fg),
+          ),
+        ],
+      ];
+      return Container(
+        alignment: alignment,
+        padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg),
+        color: bg,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: alignment == Alignment.centerRight
+              ? children
+              : children.reversed.toList(),
+        ),
+      );
+    }
+
+    return Dismissible(
+      key: key!,
+      direction: flutterDirection,
+      confirmDismiss: confirmDismiss == null
+          ? null
+          : (_) => confirmDismiss!.call(),
+      onDismissed: (_) => onDismissed(),
+      background: buildBackground(Alignment.centerLeft),
+      secondaryBackground: buildBackground(Alignment.centerRight),
+      child: child,
+    );
+  }
+}

package/templates/firebase/lib/features/home/home_components_page.dart

@@ -188,6 +188,7 @@ const Set<String> _kReadyComponents = <String>{
   'TextField',
   'Sidebar',
   'Skeleton',
+  'SwipeAction',
   'TextFieldOTP',
   'Toast',
 };
@@ -208,6 +209,7 @@ const Set<String> _kWebReadyComponents = <String>{
   'Hover',
   'Sidebar',
   'Skeleton',
+  'SwipeAction',
   'TextArea',
   'TextField',
   'TextFieldOTP',
@@ -238,6 +240,7 @@ const List<_CatalogRow> _kCatalog = [
   _CatalogRow('Hover'),
   _CatalogRow('Sidebar'),
   _CatalogRow('Skeleton'),
+  _CatalogRow('SwipeAction'),
   _CatalogRow('TextArea'),
   _CatalogRow('TextField'),
   _CatalogRow('TextFieldOTP'),

package/templates/firebase/lib/features/home/home_components_preview_registry.dart

@@ -490,6 +490,24 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'SwipeAction':
+      return const ComponentPreviewDefinition(
+        title: 'SwipeAction',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Destructive (delete)',
+            builder: _buildSwipeActionDestructive,
+          ),
+          ComponentPreviewVariant(
+            label: 'Neutral (archive)',
+            builder: _buildSwipeActionNeutral,
+          ),
+          ComponentPreviewVariant(
+            label: 'With confirm',
+            builder: _buildSwipeActionWithConfirm,
+          ),
+        ],
+      );
     default:
       return null;
   }
@@ -7710,3 +7728,171 @@ class _SkeletonGridCell extends StatelessWidget {
     );
   }
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SwipeAction — wrap any tile so the user can swipe it to reveal an action
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildSwipeActionDestructive(BuildContext context) =>
+    const _SwipeActionPreview(tone: KasySwipeActionTone.destructive);
+
+Widget _buildSwipeActionNeutral(BuildContext context) =>
+    const _SwipeActionPreview(
+      tone: KasySwipeActionTone.neutral,
+      icon: Icons.archive_outlined,
+    );
+
+Widget _buildSwipeActionWithConfirm(BuildContext context) =>
+    const _SwipeActionPreview(
+      tone: KasySwipeActionTone.destructive,
+      useConfirm: true,
+    );
+
+class _SwipeActionPreview extends StatefulWidget {
+  final KasySwipeActionTone tone;
+  final IconData? icon;
+  final bool useConfirm;
+
+  const _SwipeActionPreview({
+    required this.tone,
+    this.icon,
+    this.useConfirm = false,
+  });
+
+  @override
+  State<_SwipeActionPreview> createState() => _SwipeActionPreviewState();
+}
+
+class _SwipeActionPreviewState extends State<_SwipeActionPreview> {
+  late List<_SwipePreviewItem> _items = _initial();
+
+  List<_SwipePreviewItem> _initial() => List.generate(
+        4,
+        (i) => _SwipePreviewItem(
+          id: i,
+          title: 'Item ${i + 1}',
+          subtitle: 'Swipe left to ${widget.useConfirm ? 'try to ' : ''}remove',
+        ),
+      );
+
+  void _reset() => setState(() => _items = _initial());
+
+  Future<bool> _confirm() async {
+    bool confirmed = false;
+    await showKasyConfirmDialog(
+      context,
+      title: 'Remove item?',
+      message: 'This is just a preview — nothing is actually deleted.',
+      cancelLabel: 'Cancel',
+      confirmLabel: 'Remove',
+      destructive: true,
+      onConfirm: () => confirmed = true,
+    );
+    return confirmed;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_items.isEmpty) {
+      return Padding(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Column(
+          children: [
+            Text(
+              'All items removed',
+              style: context.textTheme.bodyMedium,
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            KasyButton(
+              label: 'Reset preview',
+              variant: KasyButtonVariant.outline,
+              onPressed: _reset,
+            ),
+          ],
+        ),
+      );
+    }
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        for (final item in _items)
+          widget.useConfirm
+              ? KasySwipeAction.withConfirm(
+                  key: ValueKey('swipe_confirm_${item.id}'),
+                  onDismissed: () =>
+                      setState(() => _items.removeWhere((i) => i.id == item.id)),
+                  confirm: _confirm,
+                  tone: widget.tone,
+                  icon: widget.icon ?? KasyIcons.trash,
+                  child: _SwipePreviewTile(item: item),
+                )
+              : KasySwipeAction(
+                  key: ValueKey('swipe_${item.id}'),
+                  onDismissed: () =>
+                      setState(() => _items.removeWhere((i) => i.id == item.id)),
+                  tone: widget.tone,
+                  icon: widget.icon ?? KasyIcons.trash,
+                  child: _SwipePreviewTile(item: item),
+                ),
+      ],
+    );
+  }
+}
+
+class _SwipePreviewItem {
+  final int id;
+  final String title;
+  final String subtitle;
+  const _SwipePreviewItem({
+    required this.id,
+    required this.title,
+    required this.subtitle,
+  });
+}
+
+class _SwipePreviewTile extends StatelessWidget {
+  final _SwipePreviewItem item;
+  const _SwipePreviewTile({required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(KasySpacing.md),
+      decoration: BoxDecoration(
+        color: context.colors.surface,
+        border: Border(
+          bottom: BorderSide(color: context.colors.outline, width: 0.5),
+        ),
+      ),
+      child: Row(
+        children: [
+          Container(
+            width: 40,
+            height: 40,
+            decoration: BoxDecoration(
+              color: context.colors.surfaceNeutralSoft,
+              borderRadius: BorderRadius.circular(KasyRadius.md),
+            ),
+            child: Icon(KasyIcons.assistant, color: context.colors.onSurface),
+          ),
+          const SizedBox(width: KasySpacing.md),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(item.title, style: context.textTheme.bodyMedium),
+                Text(
+                  item.subtitle,
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: context.colors.muted,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/notifications/ui/notifications_page.dart

@@ -154,13 +154,18 @@ class _NotificationsPageState extends ConsumerState<NotificationsPage> {
                   return switch (item) {
                     _HeaderItem(:final label) => _GroupLabel(label: label),
                     _TileItem(:final notification, :final animationIndex) =>
-                      _SwipeToDeleteTile(
-                        notification: notification,
-                        index: animationIndex,
-                        onTap: (n) => ref
-                            .read(notificationsProvider.notifier)
-                            .onTapNotification(n),
-                        onDismissed: (n) => _deleteOne(context, n),
+                      KasySwipeAction(
+                        key: ValueKey(
+                          'notification_${notification.id ?? animationIndex}',
+                        ),
+                        onDismissed: () => _deleteOne(context, notification),
+                        child: NotificationTileComponent(
+                          notification: notification,
+                          index: animationIndex,
+                          onTap: (n) => ref
+                              .read(notificationsProvider.notifier)
+                              .onTapNotification(n),
+                        ),
                       ),
                   };
                 },
@@ -262,38 +267,3 @@ class _GroupLabel extends StatelessWidget {
   }
 }
 
-/// Wraps [NotificationTileComponent] in a [Dismissible] so the user can
-/// swipe a notification to the left to delete it.
-class _SwipeToDeleteTile extends StatelessWidget {
-  final app.Notification notification;
-  final int index;
-  final void Function(app.Notification) onTap;
-  final void Function(app.Notification) onDismissed;
-
-  const _SwipeToDeleteTile({
-    required this.notification,
-    required this.index,
-    required this.onTap,
-    required this.onDismissed,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Dismissible(
-      key: ValueKey('notification_${notification.id ?? index}'),
-      direction: DismissDirection.endToStart,
-      background: Container(
-        alignment: Alignment.centerRight,
-        padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg),
-        color: context.colors.error,
-        child: Icon(KasyIcons.trash, color: context.colors.onError),
-      ),
-      onDismissed: (_) => onDismissed(notification),
-      child: NotificationTileComponent(
-        notification: notification,
-        index: index,
-        onTap: onTap,
-      ),
-    );
-  }
-}