Merge branch 'main' into feat/multiple-choice-dropdown

README.md

@@ -16,9 +16,6 @@ The router has two subgraphs, the `UnauthenticatedRouter` used for unauthenticat
 
 The [app router][app_router] is provided by [auto_route][auto_route], and contains the previous sections with some nested screens.
 
-The [theme folder][theme] contains the theme definitions, for example colors, styles and dimensions. 
-Another important plugin related to the UI is [flutter_screenutil][flutter_screenutil], used for adapting screen and font size.
-
 ### Core section
 
 The models are defined in the [models folder][models]. If you need to use different models for database or networking, you can create them in `db` and `service` folders respectively.
@@ -114,7 +111,6 @@ In order to setup pre-push hook you need to go to the root of the project and ru
 [app_router]: https://github.com/xmartlabs/flutter-template/blob/main/lib/ui/app_router.dart
 [bloc]: https://bloclibrary.dev
 [auto_route]: https://pub.dev/packages/auto_route
-[theme]: https://github.com/xmartlabs/flutter-template/tree/main/lib/ui/theme
 [flutter_screenutil]: https://pub.dev/packages/flutter_screenutil
 [models]: https://github.com/xmartlabs/flutter-template/tree/main/lib/core/model
 [repository_folder]: https://github.com/xmartlabs/flutter-template/tree/main/lib/core/repository

catalog/README.md

@@ -1,39 +1,56 @@
-<!--
-This README describes the package. If you publish this package to pub.dev,
-this README's contents appear on the landing page for your package.
+# Catalog' Flutter template
 
-For information about how to write a good package README, see the guide for
-[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
-
-For general information about developing packages, see the Dart guide for
-[creating packages](https://dart.dev/guides/libraries/create-library-packages)
-and the Flutter guide for
-[developing packages and plugins](https://flutter.dev/developing-packages).
--->
-
-TODO: Put a short description of the package here that helps potential users
-know whether this package might be useful for them.
+Catalog is a Flutter package that provides a base implementation for UX/UI components based on the [design template of Xmartlabs][figma].
+It aims to simplify and expedite the development process for Flutter projects, ensuring a consistent and visually appealing user interface.
 
 ## Features
 
-TODO: List what your package can do. Maybe include images, gifs, or videos.
+- Ready-to-use main UI components inspired by Xmartlabs design principles.
+- Customizable components to fit your project's specific requirements.
 
 ## Getting started
 
-TODO: List prerequisites and provide or point to information on how to
-start using the package.
+### Installation
 
-## Usage
+Integrate the package in your project, adding the following line to your `pubspec.yaml` file:
 
-TODO: Include short and useful examples for package users. Add longer examples
-to `/example` folder.
-
-```dart
-const like = 'sample';
+```yaml
+dependencies flutter:
+    catalog:
+        path: ../
 ```
 
-## Additional information
+## Arch Overview
+
+The catalog project is organized into a singular folder named 'Theme.' 
+Within the [theme folder][theme], various files contribute to the overall theme definition:
+
+- App Theme:
+This file outlines the app's styles, encompassing elements such as the app bar, dialogs, radio buttons, and other components.
+
+- App Buttons:
+Styles for the default buttons of the app are defined within this file.
+
+- App Color Scheme:
+Default color schemes for the app are established in this file.
+
+- Custom Colors:
+As a Theme Extension, this file incorporates custom colors specific to the app.
+
+- App Dimensions:
+Default dimensions for various elements within the app are specified in this file.
+
+- App Text Styles:
+Default text styles across the app are defined in this file.
+
+- Custom Text Styles:
+As another Theme Extension, this file articulates the custom text styles unique to the app.
+
+This organized structure within the 'Theme' folder ensures a systematic approach to managing and defining the visual aspects of the app.
+
+### Contributing
+We welcome contributions! If you find a bug or have a feature request, please open an [issue].
 
-TODO: Tell users more about the package: where to find more information, how to
-contribute to the package, how to file issues, what response they can expect
-from the package authors, and more.
+[issue]: https://github.com/xmartlabs/flutter-template/issues
+[theme]: https://github.com/xmartlabs/flutter-template/tree/main/lib/ui/theme
+[figma]: https://www.figma.com/file/OWDUY4WaDjyfiOE6Z8mfsC/XL---Tourmaline?node-id=0%3A1&mode=dev

catalog/gallery/README.md

@@ -0,0 +1,20 @@
+# Gallery App
+
+Gallery is a Flutter app designed to showcase and share the design system of our project.
+This app serves as a visual reference for developers and provides a streamlined process for the design team to approve the correct implementation of components.
+
+## Features
+
+- **Design System Showcase:** View and explore the design system components used in the app.
+- **Interactive Examples:** Interact with live examples of components to see them in action.
+- **Easy Sharing:** Share specific components or screens with the design team for review.
+
+
+## Design System Documentation
+For comprehensive documentation on our design system, including guidelines, principles, and usage instructions, please refer to [Design System].
+
+### Contributing
+We welcome contributions! If you find a bug or have a feature request, please open an [issue].
+
+[issue]: https://github.com/xmartlabs/flutter-template/issues
+[Design System]: https://www.figma.com/file/OWDUY4WaDjyfiOE6Z8mfsC/XL---Tourmaline?node-id=0%3A1&mode=dev

catalog/gallery/lib/catalog/catalog_app_checkbox.dart

@@ -0,0 +1,27 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:catalog/widgets/app_checkbox.dart';
+import 'package:flutter/material.dart';
+import 'package:gallery/catalog/catalog_scaffold_screen.dart';
+
+@RoutePage()
+class CatalogAppCheckboxScreen extends StatelessWidget {
+  const CatalogAppCheckboxScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) => CatalogScaffold(
+        title: 'APP CHECKBOX',
+        child: AppCheckbox(
+          shrinkWrap: true,
+          initialValue: true,
+          onPressed: (bool? value) {},
+          items: const [
+            (value: false, title: 'Option 1', subtitle: null),
+            (value: false, title: 'Option 2', subtitle: null),
+            (value: false, title: 'Option 3', subtitle: null),
+            (value: false, title: 'Option 4', subtitle: null),
+            (value: false, title: 'Option 5', subtitle: null),
+            (value: false, title: 'Option 6', subtitle: null),
+          ],
+        ),
+      );
+}

catalog/gallery/lib/catalog/catalog_app_dialog.dart

@@ -0,0 +1,24 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:catalog/widgets/app_dialog.dart';
+import 'package:flutter/material.dart';
+import 'package:gallery/catalog/catalog_scaffold_screen.dart';
+
+@RoutePage()
+class CatalogDialogScreen extends StatelessWidget {
+  const CatalogDialogScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) => const CatalogScaffold(
+        title: 'DIALOG',
+        child: AppDialog(
+          title: 'Modal title',
+          content: 'This is place holder text. The basic dialog for modals '
+              'should contain only valuable and relevant information. Simplify '
+              'dialogs by removing unnecessary elements or content that does '
+              'not support user tasks. If you find that the number of required '
+              'elements for your design are making ',
+          cancelButtonText: 'Cancel',
+          actionButtonText: 'Confirm',
+        ),
+      );
+}

catalog/gallery/lib/catalog/catalog_app_dropdown_screen.dart

@@ -27,6 +27,7 @@ class CatalogDropdownScreen extends StatelessWidget {
                   (value: 5, label: 'Option 5'),
                   (value: 6, label: 'Option 6'),
                 ],
+                onSelected: (int? value) {},
               ),
             ],
           ),

catalog/gallery/lib/catalog/catalog_app_radio_button.dart

@@ -0,0 +1,26 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:catalog/widgets/app_radio_button.dart';
+import 'package:flutter/material.dart';
+import 'package:gallery/catalog/catalog_scaffold_screen.dart';
+
+@RoutePage()
+class CatalogAppRadioButtonScreen extends StatelessWidget {
+  const CatalogAppRadioButtonScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) => CatalogScaffold(
+        title: 'APP RADIO BUTTON',
+        child: AppRadioButton(
+          initialValue: 1,
+          onPressed: (int? value) {},
+          items: const [
+            (value: 1, label: 'Option 1'),
+            (value: 2, label: 'Option 2'),
+            (value: 3, label: 'Option 3'),
+            (value: 4, label: 'Option 4'),
+            (value: 5, label: 'Option 5'),
+            (value: 6, label: 'Option 6'),
+          ],
+        ),
+      );
+}

catalog/gallery/lib/catalog/catalog_app_text_fields_screen.dart

@@ -0,0 +1,65 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:catalog/catalog.dart';
+import 'package:catalog/widgets/app_text_fields.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:gallery/catalog/catalog_scaffold_screen.dart';
+
+@RoutePage()
+class CatalogTextFieldsScreen extends StatefulWidget {
+  const CatalogTextFieldsScreen({super.key});
+
+  @override
+  State<CatalogTextFieldsScreen> createState() =>
+      _CatalogTextFieldsScreenState();
+}
+
+class _CatalogTextFieldsScreenState extends State<CatalogTextFieldsScreen> {
+  int _characterCount = 0;
+  final labelTextController = TextEditingController();
+  final textAreaTextController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) => CatalogScaffold(
+      title: 'TEXT FIELDS',
+      child: Container(
+        margin: const EdgeInsets.all(20),
+        child: Column(
+          children: [
+            AppTextField(
+              controller: labelTextController,
+              labelText: 'Label',
+              helperText: 'Helper text',
+              hintText: 'Text',
+              suffixIcon: Icon(
+                Icons.close,
+                color: context.theme.colors.textColor.shade200,
+              ),
+              prefixIcon: Icon(
+                Icons.close,
+                color: context.theme.colors.textColor.shade200,
+              ),
+              keyboardType: TextInputType.emailAddress,
+            ),
+            SizedBox(height: 10.h),
+            AppTextField(
+              keyboardType: TextInputType.multiline,
+              controller: textAreaTextController,
+              maxLength: 100,
+              labelText: 'Label',
+              hintText: 'Text',
+              currentLength: _characterCount,
+              onChange: (value) {
+                setState(() {
+                  _characterCount = value.length;
+                });
+              },
+              minLines: 8,
+              maxLines: 10,
+            ),
+            SizedBox(height: 10.h),
+          ],
+        ),
+      ),
+    );
+}

catalog/gallery/lib/main/catalog_main_screen.dart

@@ -40,6 +40,10 @@ enum _CatalogScreen {
   textFields,
   colors,
   typography,
+  dropdown,
+  dialog,
+  radioButtons,
+  checkbox,
 }
 
 extension _CatalogScreenExtensions on _CatalogScreen {
@@ -53,6 +57,14 @@ extension _CatalogScreenExtensions on _CatalogScreen {
         return 'Colors';
       case _CatalogScreen.typography:
         return 'Typography';
+      case _CatalogScreen.dropdown:
+        return 'Dropdown';
+      case _CatalogScreen.dialog:
+        return 'Dialog';
+      case _CatalogScreen.radioButtons:
+        return 'Radio Buttons';
+      case _CatalogScreen.checkbox:
+        return 'Checkbox';
     }
   }
 
@@ -66,6 +78,14 @@ extension _CatalogScreenExtensions on _CatalogScreen {
         return const CatalogAppColorsRoute();
       case _CatalogScreen.typography:
         return const CatalogAppTypographyRoute();
+      case _CatalogScreen.dropdown:
+        return const CatalogDropdownRoute();
+      case _CatalogScreen.dialog:
+        return const CatalogDialogRoute();
+      case _CatalogScreen.radioButtons:
+        return const CatalogAppRadioButtonRoute();
+      case _CatalogScreen.checkbox:
+        return const CatalogAppCheckboxRoute();
     }
   }
 }

catalog/gallery/lib/router/catalog_router.dart

@@ -1,8 +1,12 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:gallery/catalog/catalog_app_button_screen.dart';
 import 'package:gallery/catalog/catalog_app_colors_screen.dart';
+import 'package:gallery/catalog/catalog_app_radio_button.dart';
 import 'package:gallery/catalog/catalog_app_typography_screen.dart';
-import 'package:gallery/catalog/catalog_text_fields_screen.dart';
+import 'package:gallery/catalog/catalog_app_checkbox.dart';
+import 'package:gallery/catalog/catalog_app_dropdown_screen.dart';
+import 'package:gallery/catalog/catalog_app_text_fields_screen.dart';
+import 'package:gallery/catalog/catalog_app_dialog.dart';
 import 'package:gallery/main/catalog_main_screen.dart';
 
 part 'catalog_router.gr.dart';
@@ -21,5 +25,9 @@ class CatalogRouter extends _$CatalogRouter {
           AutoRoute(page: CatalogTextFieldsRoute.page),
           AutoRoute(page: CatalogAppColorsRoute.page),
           AutoRoute(page: CatalogAppTypographyRoute.page),
+          AutoRoute(page: CatalogDropdownRoute.page),
+          AutoRoute(page: CatalogDialogRoute.page),
+          AutoRoute(page: CatalogAppRadioButtonRoute.page),
+          AutoRoute(page: CatalogAppCheckboxRoute.page),
         ];
 }