Merge pull request #32 from Onix-Systems/dev

Dev
Onix-Systems · Nov 28, 2023 · 85c831c · 85c831c
2 parents 52f2987 + 047f3c4
commit 85c831c
Show file tree

Hide file tree

Showing 37 changed files with 1,902 additions and 480 deletions.
diff --git a/...__/{{project_name.snakeCase()}}/lib/presentation/widgets/actions/app_standard_button.dart b/...__/{{project_name.snakeCase()}}/lib/presentation/widgets/actions/app_standard_button.dart
@@ -40,7 +40,7 @@ class AppStandardButton extends StatelessWidget {
           onPressed: enabled ? onPressed : null,
           child: Text(
             value,
-            style: context.appTextStyles.button,
+            style: context.appTextStyles.text,
           )),
     );
   }

diff --git a/lib/core/app/app_consts.dart b/lib/core/app/app_consts.dart
@@ -12,4 +12,9 @@ class AppConsts {
       'https://apple.stackexchange.com/questions/48502/how-can-i-permanently-add-my-ssh-private-key-to-keychain-so-it-is-automatically/250572#250572';
 
   static const String figmaBaseUrl = 'https://api.figma.com/v1';
+
+  static const String figmaStylesFirstCharValidChars =
+      'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+  static const String figmaStylesValidChars = signingKeyPassChars;
 }
diff --git a/lib/core/app/localization/generated/intl/messages_en.dart b/lib/core/app/localization/generated/intl/messages_en.dart
@@ -90,6 +90,14 @@ class MessageLookup extends MessageLookupByLibrary {
         "exitLabel": MessageLookupByLibrary.simpleMessage("Exit"),
         "fields": MessageLookupByLibrary.simpleMessage("Fields"),
         "figmaFileKey": MessageLookupByLibrary.simpleMessage("Figma file key"),
+        "figmaGetStylesEmpty": MessageLookupByLibrary.simpleMessage(
+            "No styles found in this file"),
+        "figmaGetStylesEmptyFileId":
+            MessageLookupByLibrary.simpleMessage("Figma file id is empty"),
+        "figmaGetStylesEmptyToken":
+            MessageLookupByLibrary.simpleMessage("Figma token is empty"),
+        "figmaGetStylesError": MessageLookupByLibrary.simpleMessage(
+            "Error loading styles: check internet connection, figma file id and token"),
         "figmaToken": MessageLookupByLibrary.simpleMessage("Figma token"),
         "firebaseAuth": MessageLookupByLibrary.simpleMessage(
             "Integrate Firebase with FirebaseAuth?"),

diff --git a/lib/core/app/localization/generated/intl/messages_uk.dart b/lib/core/app/localization/generated/intl/messages_uk.dart
@@ -93,6 +93,14 @@ class MessageLookup extends MessageLookupByLibrary {
         "fields": MessageLookupByLibrary.simpleMessage("Поля"),
         "figmaFileKey":
             MessageLookupByLibrary.simpleMessage("Ключ файлу Figma"),
+        "figmaGetStylesEmpty": MessageLookupByLibrary.simpleMessage(
+            "В цьому figma файлі не знайдено стилів"),
+        "figmaGetStylesEmptyFileId":
+            MessageLookupByLibrary.simpleMessage("Figma id пустий"),
+        "figmaGetStylesEmptyToken":
+            MessageLookupByLibrary.simpleMessage("Figma token пустий"),
+        "figmaGetStylesError": MessageLookupByLibrary.simpleMessage(
+            "Помилка завантаження стилів: перевірте інтернет з\'єднання, id figma файлу та токен"),
         "figmaToken": MessageLookupByLibrary.simpleMessage("Токен Figma"),
         "firstLastName":
             MessageLookupByLibrary.simpleMessage(" Ім\'я та прізвище"),

diff --git a/lib/core/app/localization/generated/l10n.dart b/lib/core/app/localization/generated/l10n.dart
diff --git a/lib/core/app/localization/l10n/intl_en.arb b/lib/core/app/localization/l10n/intl_en.arb
@@ -113,5 +113,9 @@
   "dataComponentExistsInSource": " in {sourceName} source",
   "getStylesFromFigma": "Get styles from Figma",
   "figmaFileKey": "Figma file key",
-  "figmaToken": "Figma token"
+  "figmaToken": "Figma token",
+  "figmaGetStylesError": "Error loading styles: check internet connection, figma file id and token",
+  "figmaGetStylesEmpty": "No styles found in this file",
+  "figmaGetStylesEmptyFileId": "Figma file id is empty",
+  "figmaGetStylesEmptyToken": "Figma token is empty"
 }
diff --git a/lib/core/app/localization/l10n/intl_uk.arb b/lib/core/app/localization/l10n/intl_uk.arb
@@ -111,5 +111,9 @@
   "dataComponentExistsInSource": " в джерелі {sourceName}",
   "getStylesFromFigma": "Отримати стилі з Figma",
   "figmaFileKey": "Ключ файлу Figma",
-  "figmaToken": "Токен Figma"
+  "figmaToken": "Токен Figma",
+  "figmaGetStylesError": "Помилка завантаження стилів: перевірте інтернет з'єднання, id figma файлу та токен",
+  "figmaGetStylesEmpty": "В цьому figma файлі не знайдено стилів",
+  "figmaGetStylesEmptyFileId": "Figma id пустий",
+  "figmaGetStylesEmptyToken": "Figma token пустий"
 }
diff --git a/lib/core/di/bloc.dart b/lib/core/di/bloc.dart
@@ -1,5 +1,6 @@
 import 'package:get_it/get_it.dart';
 import 'package:onix_flutter_bricks/app/bloc/app_bloc_imports.dart';
+import 'package:onix_flutter_bricks/presentation/screen/figma_styles_screen/bloc/figma_styles_screen_bloc.dart';
 import 'package:onix_flutter_bricks/presentation/screen/procedure_selection_screen/bloc/procedure_selection_screen_bloc.dart';
 import 'package:onix_flutter_bricks/presentation/screen/splash_screen/bloc/splash_screen_bloc.dart';
 import 'package:onix_flutter_bricks/presentation/screen/project_name_screen/bloc/project_name_screen_bloc.dart';
@@ -22,6 +23,7 @@ void registerBloc(GetIt getIt) {
     ..registerFactory<DataComponentsScreenBloc>(DataComponentsScreenBloc.new)
     ..registerFactory<FieldsDialogBloc>(FieldsDialogBloc.new)
     ..registerFactory<ScreensScreenBloc>(ScreensScreenBloc.new)
+    ..registerFactory<FigmaStylesScreenBloc>(FigmaStylesScreenBloc.new)
     ..registerFactory<ProjectSettingsScreenBloc>(ProjectSettingsScreenBloc.new)
     ..registerFactory<PlatformsScreenBloc>(PlatformsScreenBloc.new)
     ..registerFactory<ProjectNameScreenBloc>(ProjectNameScreenBloc.new)

diff --git a/lib/core/router/app_router.dart b/lib/core/router/app_router.dart
@@ -1,6 +1,7 @@
 //@formatter:off
 import 'package:go_router/go_router.dart';
 import 'package:onix_flutter_bricks/domain/entity/config/config.dart';
+import 'package:onix_flutter_bricks/presentation/screen/figma_styles_screen/figma_styles_screen.dart';
 import 'package:onix_flutter_bricks/presentation/screen/splash_screen/splash_screen.dart';
 import 'package:onix_flutter_bricks/presentation/screen/project_name_screen/project_name_screen.dart';
 import 'package:onix_flutter_bricks/presentation/screen/procedure_selection_screen/procedure_selection_screen.dart';
@@ -22,6 +23,7 @@ class AppRouter {
   static const _platformsScreen = '/platforms';
   static const _projectSettingsScreen = '/project_settings';
   static const _screensScreen = '/screens';
+  static const _stylesScreen = '/styles';
   static const _dataComponentsScreen = '/data_components';
   static const _swaggerParserScreen = '/swagger_parser';
   static const _summaryScreen = '/summary';
@@ -38,6 +40,7 @@ class AppRouter {
   static String get platformsScreen => _platformsScreen;
   static String get projectSettingsScreen => _projectSettingsScreen;
   static String get screensScreen => _screensScreen;
+  static String get stylesScreen => _stylesScreen;
   static String get dataComponentsScreen => _dataComponentsScreen;
   static String get swaggerParserScreen => _swaggerParserScreen;
   static String get summaryScreen => _summaryScreen;
@@ -97,6 +100,13 @@ class AppRouter {
             config: state.extra as Config,
           ),
         ),
+        GoRoute(
+          path: _stylesScreen,
+          name: 'StylesScreen',
+          builder: (context, state) => FigmaStylesScreen(
+            config: state.extra as Config,
+          ),
+        ),
         GoRoute(
           path: _dataComponentsScreen,
           name: 'DataComponentsScreen',

diff --git a/lib/domain/entity/app_styles/app_styles.dart b/lib/domain/entity/app_styles/app_styles.dart
@@ -1,9 +1,44 @@
+import 'package:onix_flutter_bricks/core/app/app_consts.dart';
+import 'package:recase/recase.dart';
+
 abstract class AppStyle {
   final String id;
-  final String name;
+  String name;
 
   AppStyle({
     required this.id,
     required this.name,
   });
+
+  bool validate() {
+    bool valid = true;
+    var newName = name;
+
+    if (!AppConsts.figmaStylesFirstCharValidChars
+        .contains(name.split('').first)) {
+      newName = 'style $newName';
+    }
+
+    if (name
+        .split('')
+        .any((element) => !AppConsts.figmaStylesValidChars.contains(element))) {
+      for (var i = 0; i < name.length; i++) {
+        if (!AppConsts.figmaStylesValidChars.contains(name[i])) {
+          newName = newName.replaceFirst(name[i], ' ');
+        }
+      }
+    }
+
+    newName = newName.trim().replaceAll(RegExp(r'\s+|\s'), ' ');
+
+    if (newName == 'style' ||
+        newName == 'style Dark' ||
+        newName == 'style Light') {
+      valid = false;
+    } else {
+      name = newName.camelCase;
+    }
+
+    return valid;
+  }
 }
diff --git a/lib/domain/entity/app_styles/app_text_style.dart b/lib/domain/entity/app_styles/app_text_style.dart
@@ -40,6 +40,6 @@ class AppTextStyle extends AppStyle {
 
   @override
   String toString() {
-    return 'AppTextStyle(id: $id, name: $name, fontFamily: $fontFamily, fontSize: $fontSize, fontWeight: $fontWeight, letterSpacing: $letterSpacing, color: $color)';
+    return 'FontFamily: $fontFamily, fontSize: $fontSize, fontWeight: $fontWeight, letterSpacing: $letterSpacing${color.isNotEmpty ? ', color: $color' : ''}';
   }
 }
diff --git a/lib/domain/service/figma_service/figma_service.dart b/lib/domain/service/figma_service/figma_service.dart
@@ -1,17 +1,20 @@
 import 'dart:convert';
 
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 import 'package:onix_flutter_bricks/core/app/app_consts.dart';
+import 'package:onix_flutter_bricks/core/di/app.dart';
 import 'package:onix_flutter_bricks/domain/entity/app_styles/app_color_style.dart';
 import 'package:onix_flutter_bricks/domain/entity/app_styles/app_styles.dart';
 import 'package:http/http.dart' as http;
 import 'package:onix_flutter_bricks/domain/entity/app_styles/app_text_style.dart';
+import 'package:onix_flutter_bricks/util/extension/swagger_extensions.dart';
 import 'package:recase/recase.dart';
 
 class FigmaService {
   Future<List<AppStyle>> getStyles(String figmaId, String token) async {
     final Set<AppStyle> figmaStyles = {};
+    final Set<AppTextStyle> figmaTextStyles = {};
+    final Set<AppColorStyle> figmaColorStyles = {};
 
     try {
       final fileResponse = await http.get(
@@ -43,21 +46,28 @@ class FigmaService {
 
         for (final key in nodes.keys) {
           final node = nodes[key];
+
           if (styles[key]['styleType'] == 'TEXT') {
             final textStyle = node['document']['style'];
-            figmaStyles.add(
-              AppTextStyle(
-                fontFamily: textStyle['fontFamily'],
-                fontSize: textStyle['fontSize'],
-                fontWeight: textStyle['fontWeight'],
-                letterSpacing: textStyle['letterSpacing'],
-                id: key.toString(),
-                name: styles[key]['name'].toString().camelCase,
-                color: '',
-              ),
+            final appTextStyle = AppTextStyle(
+              fontFamily: textStyle['fontFamily'],
+              fontSize: textStyle['fontSize'],
+              fontWeight: textStyle['fontWeight'],
+              letterSpacing: textStyle['letterSpacing'],
+              id: key.toString(),
+              name: styles[key]['name'].toString().camelCase,
+              color: '',
             );
+            if (!figmaTextStyles
+                .map((e) => e.name)
+                .contains(appTextStyle.name)) {
+              figmaTextStyles.add(appTextStyle);
+            }
           } else {
             final fill = node['document']['fills'][0];
+            if (fill['type'] != 'SOLID') {
+              continue;
+            }
             final color = AppColorStyle(
                 id: key.toString(),
                 name: styles[key]['name'].toString().camelCase,
@@ -67,18 +77,58 @@ class FigmaService {
                   ((fill['color']['g'] * 255) as double).toInt(),
                   ((fill['color']['b'] * 255) as double).toInt(),
                 ));
+            color.validate();
+            if (figmaColorStyles.map((e) => e.name).contains(color.name) ||
+                figmaColorStyles
+                    .map((e) => e.name)
+                    .contains('${color.name}Dark') ||
+                figmaColorStyles
+                    .map((e) => e.name)
+                    .contains('${color.name}Light')) {
+              final nameParts = color.name.sentenceCase.split(' ');
+              nameParts.insert(1, '${color.id.hashCode}');
+              color.name = nameParts.join(' ').camelCase;
+            }
             if (!color.name.endsWith('Dark') && !color.name.endsWith('Light')) {
-              figmaStyles.add(color.copyWithName(name: '${color.name}Dark'));
-              figmaStyles.add(color.copyWithName(name: '${color.name}Light'));
+              figmaColorStyles
+                  .add(color.copyWithName(name: '${color.name}Dark'.camelCase));
+              figmaColorStyles.add(
+                  color.copyWithName(name: '${color.name}Light'.camelCase));
             } else {
-              figmaStyles.add(color);
+              figmaColorStyles
+                  .add(color.copyWithName(name: color.name.camelCase));
             }
           }
         }
       }
 
+      for (final color in List<AppColorStyle>.from(figmaColorStyles)) {
+        if (color.name.endsWith('Dark')) {
+          final colorName = color.name.replaceLast('Dark', '');
+          if (!figmaColorStyles
+              .map((e) => e.name)
+              .contains('${colorName}Light')) {
+            figmaColorStyles
+                .add(color.copyWithName(name: '${colorName}Light'.camelCase));
+          }
+        }
+        if (color.name.endsWith('Light')) {
+          final colorName = color.name.replaceLast('Light', '');
+          if (!figmaColorStyles
+              .map((e) => e.name)
+              .contains('${colorName}Dark')) {
+            figmaColorStyles
+                .add(color.copyWithName(name: '${colorName}Dark'.camelCase));
+          }
+        }
+      }
+
+      figmaStyles.addAll(figmaTextStyles);
+      figmaStyles.addAll(figmaColorStyles);
+
       return figmaStyles.toList();
     } catch (e) {
+      logger.f(e);
       figmaStyles.add(AppTextStyle(
           color: '',
           fontFamily: 'Error',

diff --git a/lib/domain/service/file_generator_service/style_generator/gen/app_colors_file_content.dart b/lib/domain/service/file_generator_service/style_generator/gen/app_colors_file_content.dart
@@ -19,7 +19,7 @@ abstract class AppColors {
     List<AppColorStyle> darkColors = [];
     List<AppColorStyle> lightColors = [];
 
-    for (var element in colors) {
+    for (var element in colors.where((element) => element.validate())) {
       if (element.name.endsWith('Dark')) {
         darkColors.add(element);
       } else if (element.name.endsWith('Light')) {

diff --git a/lib/domain/service/file_generator_service/style_generator/gen/theme_colors_file_content.dart b/lib/domain/service/file_generator_service/style_generator/gen/theme_colors_file_content.dart
@@ -1,11 +1,14 @@
 import 'package:onix_flutter_bricks/domain/entity/app_styles/app_color_style.dart';
+import 'package:onix_flutter_bricks/util/extension/swagger_extensions.dart';
+import 'package:recase/recase.dart';
 
 class ThemeColorsFileContent {
   static String generate({
     required List<AppColorStyle> colors,
     required String projectName,
   }) {
     final colorNames = _getColorNames(colors);
+
     return '''import 'package:flutter/material.dart';
 import 'package:$projectName/presentation/style/app_colors.dart';
 
@@ -52,12 +55,21 @@ class ThemeColors extends ThemeExtension<ThemeColors> {
   static List<String> _getColorNames(List<AppColorStyle> colors) {
     final names = <String>[];
 
-    for (final name in colors
-        .map((e) => e.name.replaceAll('Dark', '').replaceAll('Light', ''))) {
-      if (names.contains(name)) {
+    for (var name
+        in colors.where((element) => element.validate()).map((e) => e.name)) {
+      if (name.endsWith('Dark')) {
+        name = name.replaceLast('Dark', '');
+        if (!names.contains(name)) {
+          names.add(name.camelCase);
+        }
         continue;
       }
-      names.add(name);
+      if (name.endsWith('Light')) {
+        name = name.replaceLast('Light', '');
+        if (!names.contains(name)) {
+          names.add(name.camelCase);
+        }
+      }
     }
 
     names.sort((a, b) => a.compareTo(b));