feat(skeleton): add skeleton component in lib

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -655,6 +655,12 @@ abstract class AppLocalizations {
   /// **'Untinted'**
   String get app_components_common_untinted_tech;
 
+  /// No description provided for @app_components_common_skeleton_tech.
+  ///
+  /// In en, this message translates to:
+  /// **'Skeleton'**
+  String get app_components_common_skeleton_tech;
+
   /// No description provided for @app_components_alert_tech.
   ///
   /// In en, this message translates to:
@@ -990,6 +996,30 @@ abstract class AppLocalizations {
   /// **'Extra label'**
   String get app_components_radioButton_radioButtonItem_extraLabel_label;
 
+  /// No description provided for @app_components_skeleton_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Skeleton'**
+  String get app_components_skeleton_label;
+
+  /// No description provided for @app_components_skeleton_description_text.
+  ///
+  /// In en, this message translates to:
+  /// **'Skeleton is a UI element that displays an animated placeholder shape while content is loading.'**
+  String get app_components_skeleton_description_text;
+
+  /// No description provided for @app_components_skeleton_animated_tech.
+  ///
+  /// In en, this message translates to:
+  /// **'Animated'**
+  String get app_components_skeleton_animated_tech;
+
+  /// No description provided for @app_components_skeleton_securityMargin_tech.
+  ///
+  /// In en, this message translates to:
+  /// **'Security Margin'**
+  String get app_components_skeleton_securityMargin_tech;
+
   /// No description provided for @app_components_switch_label.
   ///
   /// In en, this message translates to:

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -302,6 +302,9 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_common_untinted_tech => 'Untinted';
 
+  @override
+  String get app_components_common_skeleton_tech => 'Skeleton';
+
   @override
   String get app_components_alert_tech => 'Alert';
 
@@ -506,6 +509,19 @@ class AppLocalizationsAr extends AppLocalizations {
   String get app_components_radioButton_radioButtonItem_extraLabel_label =>
       'Extra label';
 
+  @override
+  String get app_components_skeleton_label => 'Skeleton';
+
+  @override
+  String get app_components_skeleton_description_text =>
+      'Skeleton هو عنصر واجهة مستخدم يعرض شكلاً متحركًا مؤقتًا أثناء تحميل المحتوى.';
+
+  @override
+  String get app_components_skeleton_animated_tech => 'Animated';
+
+  @override
+  String get app_components_skeleton_securityMargin_tech => 'Security Margin';
+
   @override
   String get app_components_switch_label => 'Switch';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -302,6 +302,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_common_untinted_tech => 'Untinted';
 
+  @override
+  String get app_components_common_skeleton_tech => 'Skeleton';
+
   @override
   String get app_components_alert_tech => 'Alert';
 
@@ -506,6 +509,19 @@ class AppLocalizationsEn extends AppLocalizations {
   String get app_components_radioButton_radioButtonItem_extraLabel_label =>
       'Extra label';
 
+  @override
+  String get app_components_skeleton_label => 'Skeleton';
+
+  @override
+  String get app_components_skeleton_description_text =>
+      'Skeleton is a UI element that displays an animated placeholder shape while content is loading.';
+
+  @override
+  String get app_components_skeleton_animated_tech => 'Animated';
+
+  @override
+  String get app_components_skeleton_securityMargin_tech => 'Security Margin';
+
   @override
   String get app_components_switch_label => 'Switch';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_fr.dart

@@ -304,6 +304,9 @@ class AppLocalizationsFr extends AppLocalizations {
   @override
   String get app_components_common_untinted_tech => 'Untinted';
 
+  @override
+  String get app_components_common_skeleton_tech => 'Skeleton';
+
   @override
   String get app_components_alert_tech => 'Alert';
 
@@ -509,6 +512,19 @@ class AppLocalizationsFr extends AppLocalizations {
   String get app_components_radioButton_radioButtonItem_extraLabel_label =>
       'Extra label';
 
+  @override
+  String get app_components_skeleton_label => 'Skeleton';
+
+  @override
+  String get app_components_skeleton_description_text =>
+      'Un Skeleton (ou squelette) est un élément d\'interface utilisateur qui affiche une forme animée servant de repère visuel pendant le chargement du contenu.';
+
+  @override
+  String get app_components_skeleton_animated_tech => 'Animated';
+
+  @override
+  String get app_components_skeleton_securityMargin_tech => 'Security Margin';
+
   @override
   String get app_components_switch_label => 'Switch';
 

app/lib/l10n/ouds_flutter_ar.arb

@@ -89,6 +89,9 @@
   "@_components_radio_button": {},
   "app_components_radioButton_description_text": "Radio button هو عنصر واجهة مستخدم يسمح باختيار خيار واحد فقط من مجموعة من الخيارات المتعارضة.",
 
+  "@_components_skeleton": {},
+  "app_components_skeleton_description_text": "Skeleton هو عنصر واجهة مستخدم يعرض شكلاً متحركًا مؤقتًا أثناء تحميل المحتوى.",
+
   "@_components_switch": {},
   "app_components_switch_description_text": "Switch هو عنصر واجهة مستخدم يسمح بالتبديل بين حالتين، عادةً \"تشغيل\" و \"إيقاف\"، ويستخدم لتمكين أو تعطيل الميزات أو الخيارات أو الإعدادات.",
   "app_components_switch_switch_a11y": "وصف محتوى المفتاح",

app/lib/l10n/ouds_flutter_en.arb

@@ -142,6 +142,7 @@
   "app_components_common_icon_tech": "Icon",
   "app_components_common_tinted_tech": "Tinted",
   "app_components_common_untinted_tech": "Untinted",
+  "app_components_common_skeleton_tech": "Skeleton",
 
   "@_components_alert": {},
   "app_components_alert_tech": "Alert",
@@ -220,6 +221,12 @@
   "app_components_radioButton_radioButtonItem_label": "Radio Button Item",
   "app_components_radioButton_radioButtonItem_extraLabel_label": "Extra label",
 
+  "@_components_skeleton": {},
+  "app_components_skeleton_label": "Skeleton",
+  "app_components_skeleton_description_text": "Skeleton is a UI element that displays an animated placeholder shape while content is loading.",
+  "app_components_skeleton_animated_tech": "Animated",
+  "app_components_skeleton_securityMargin_tech": "Security Margin",
+
   "@_components_switch": {},
   "app_components_switch_label": "Switch",
   "app_components_switch_switch_label": "Switch",

app/lib/l10n/ouds_flutter_fr.arb

@@ -81,6 +81,9 @@
   "@_components_radio_button": {},
   "app_components_radioButton_description_text": "Un Radio button (ou bouton radio) est un élément d'interface utilisateur qui permet de sélectionner une seule option parmi un ensemble de choix mutuellement exclusifs.",
 
+  "@_components_skeleton": {},
+  "app_components_skeleton_description_text": "Un Skeleton (ou squelette) est un élément d'interface utilisateur qui affiche une forme animée servant de repère visuel pendant le chargement du contenu.",
+
   "@_components_switch": {},
   "app_components_switch_description_text": "Un Switch (ou interrupteur) est un élément d'interface utilisateur qui permet de basculer entre deux états, généralement « Marche » et « Arrêt », et qui sert à activer ou désactiver des fonctionnalités, des options ou des paramètres.",
   "app_components_switch_switch_a11y": "Description du contenu de l'interrupteur",

app/lib/ui/components/alert/alert_code_generator.dart

@@ -75,6 +75,10 @@ class AlertCodeGenerator {
     if (customization.hasCloseButton) {
       buffer.writeln('  onClose: (){},');
     }
+    final skeleton = _skeletonCode(customization);
+    if (skeleton.isNotEmpty) {
+      buffer.writeln('  $skeleton');
+    }
 
     buffer.write(')');
 
@@ -99,6 +103,10 @@ class AlertCodeGenerator {
     if (status != null) {
       buffer.writeln('  status: $status,');
     }
+    final skeleton = _skeletonCode(customization);
+    if (skeleton.isNotEmpty) {
+      buffer.writeln('  $skeleton');
+    }
 
     buffer.write(')');
 
@@ -126,4 +134,11 @@ class AlertCodeGenerator {
         return "Neutral(${customization.hasIconStatus ? 'icon: ${customization.isTinted ? 'AppAssets.icons.assistanceTipsAndTricks' : 'AppAssets.icons.icUntintedSquare'} , tinted: ${customization.isTinted}' : ''})";
     }
   }
+
+  /// Method to generate the skeleton code
+  static String _skeletonCode(AlertCustomizationState customizationState) {
+    return customizationState.hasSkeleton == true
+        ? 'skeleton: OudsSkeleton(),'
+        : '';
+  }
 }

app/lib/ui/components/alert/alert_message_demo_screen.dart

@@ -13,6 +13,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/alert/ouds_alert_message.dart';
+import 'package:ouds_core/components/skeleton/ouds_skeleton.dart';
 import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
 import 'package:ouds_flutter_demo/main_app_bar.dart';
 import 'package:ouds_flutter_demo/ui/components/alert/alert_code_generator.dart';
@@ -137,6 +138,7 @@ class _AlertMessageDemoState extends State<_AlertMessageDemo> {
         onDescriptionLinkTapped: (link) async {
           await launchUrl(Uri.parse(link));
         },
+        skeleton: customizationState.hasSkeleton ? OudsSkeleton() : null,
       ),
     );
   }
@@ -312,6 +314,13 @@ class _CustomizationContentState extends State<_CustomizationContent> {
             focusNode: bulletThreeFocus,
             fieldType: FieldType.bulletThree,
           ),
+        CustomizableSwitch(
+          title: context.l10n.app_components_common_skeleton_tech,
+          value: customizationState.hasSkeleton,
+          onChanged: (value) {
+            customizationState.hasSkeleton = value;
+          },
+        ),
       ],
     );
   }

app/lib/ui/components/alert/inline_alert_demo_screen.dart

@@ -13,6 +13,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/alert/ouds_inline_alert.dart';
+import 'package:ouds_core/components/skeleton/ouds_skeleton.dart';
 import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
 import 'package:ouds_flutter_demo/main_app_bar.dart';
 import 'package:ouds_flutter_demo/ui/components/alert/alert_code_generator.dart';
@@ -24,6 +25,7 @@ import 'package:ouds_flutter_demo/ui/utilities/component/status_enum.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_chips.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_dropdown_menu.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section.dart';
+import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_switch.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_textfield.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/tinted_enum.dart';
 import 'package:ouds_flutter_demo/ui/utilities/detail_screen_header.dart';
@@ -117,6 +119,7 @@ class _InlineAlertDemoState extends State<_InlineAlertDemo> {
           customizationState,
           themeController,
         ),
+        skeleton: customizationState.hasSkeleton ? OudsSkeleton() : null,
       ),
     );
   }
@@ -196,6 +199,13 @@ class _CustomizationContentState extends State<_CustomizationContent> {
           focusNode: labelFocus,
           fieldType: FieldType.label,
         ),
+        CustomizableSwitch(
+          title: context.l10n.app_components_common_skeleton_tech,
+          value: customizationState.hasSkeleton,
+          onChanged: (value) {
+            customizationState.hasSkeleton = value;
+          },
+        ),
       ],
     );
   }

app/lib/ui/components/button/button_code_generator.dart

@@ -50,17 +50,17 @@ class ButtonCodeGenerator {
     switch (layout) {
       case OudsButtonLayout.textOnly:
         code =
-            """${coloredSurfaceCodeModifier(context)}$buttonSizeConstructor(\nlabel: "$label",\nappearance: ${appearance.toString()},${fullWidthCodeModifier(context)}${loaderCodeModifier(context)}\n${disableCode(context)}""";
+            """${coloredSurfaceCodeModifier(context)}$buttonSizeConstructor(\n label: "$label",\n appearance: ${appearance.toString()},${fullWidthCodeModifier(context)}${loaderCodeModifier(context)}\n${skeletonCode(context)}\n${disableCode(context)}""";
         break;
 
       case OudsButtonLayout.iconOnly:
         code =
-            """${coloredSurfaceCodeModifier(context)}$buttonSizeConstructor(\nicon: ${iconCode(context)},\nappearance: ${appearance.toString()},${fullWidthCodeModifier(context)}${loaderCodeModifier(context)}\n${disableCode(context)}""";
+            """${coloredSurfaceCodeModifier(context)}$buttonSizeConstructor(\n icon: ${iconCode(context)},\n appearance: ${appearance.toString()},${fullWidthCodeModifier(context)}${loaderCodeModifier(context)}\n${skeletonCode(context)}\n${disableCode(context)}\n${skeletonCode(context)}""";
         break;
 
       case OudsButtonLayout.iconAndText:
         code =
-            """${coloredSurfaceCodeModifier(context)}$buttonSizeConstructor(\nicon: ${iconCode(context)},\nlabel: "$label",\nappearance: ${appearance.toString()},${fullWidthCodeModifier(context)}${loaderCodeModifier(context)}\n${disableCode(context)}""";
+            """${coloredSurfaceCodeModifier(context)}$buttonSizeConstructor(\nicon: ${iconCode(context)},\n label: "$label",\n appearance: ${appearance.toString()},${fullWidthCodeModifier(context)}${loaderCodeModifier(context)}\n${skeletonCode(context)}\n${disableCode(context)}\n${skeletonCode(context)}""";
         break;
     }
 
@@ -76,15 +76,15 @@ class ButtonCodeGenerator {
     String end = customizationState?.hasOnColoredBox == true ? " ),\n);" : ");";
 
     // Return the onPressed callback code with its enabled or disabled state
-    return "onPressed: ${customizationState?.hasEnabled == true ? "() {}" : 'null'},\n$end";
+    return " onPressed: ${customizationState?.hasEnabled == true ? "() {}" : 'null'},\n$end";
   }
 
   static String loaderCodeModifier(BuildContext context) {
     final ButtonCustomizationState? customizationState = ButtonCustomization.of(
       context,
     );
     if (customizationState?.hasLoader == true) {
-      return "\nisLoading: true,";
+      return "\n isLoading: true,";
     } else {
       return "";
     }
@@ -95,7 +95,7 @@ class ButtonCodeGenerator {
       context,
     );
     if (customizationState?.hasFullWidth == true) {
-      return "\nisFullWidth: ${customizationState?.hasFullWidth},";
+      return "\n isFullWidth: ${customizationState?.hasFullWidth},";
     } else {
       return "";
     }
@@ -109,8 +109,8 @@ class ButtonCodeGenerator {
     );
     final bool isTinted = customizationState?.isTinted ?? true;
     return isTinted
-        ? "OudsIcon('AppAssets.icons.assistanceTipsAndTricks')"
-        : "OudsIcon('AppAssets.icons.icUntintedSquare', tinted: false)";
+        ? " OudsIcon('AppAssets.icons.assistanceTipsAndTricks')"
+        : " OudsIcon('AppAssets.icons.icUntintedSquare', tinted: false)";
   }
 
   // Method to generate the constructor name based on the selected size:
@@ -135,9 +135,19 @@ class ButtonCodeGenerator {
     // If the button should have a colored surface, wrap the button in OudsColoredBox
     if (customizationState?.hasOnColoredBox == true) {
       code =
-          '''OudsColoredBox(\ncolor: OudsColoredBoxColor.brandPrimary,\nchild: ''';
+          '''OudsColoredBox(\n color: OudsColoredBoxColor.brandPrimary,\n child: ''';
     }
 
     return code;
   }
+
+  // Method to generate the skeleton code
+  static String skeletonCode(BuildContext context) {
+    final ButtonCustomizationState? customizationState = ButtonCustomization.of(
+      context,
+    );
+    return customizationState?.hasSkeleton == true
+        ? ' skeleton: OudsSkeleton(),'
+        : '';
+  }
 }