refactor(typography): refactor typography implementation

separate typography to token,foundation,atoms, & molecules
banua-coder · ryanaidilp · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024
commit b582d431466afc6af6c0426e5d41481d79af3e1e
diff --git a/app/smart/lib/error_app.dart b/app/smart/lib/error_app.dart
@@ -30,20 +30,18 @@ class ErrorApp extends StatelessWidget {
                           fit: BoxFit.cover,
                         ),
                         Gap(SmartDimension.size16.h),
-                        Text(
+                        SmartTextHeadingXs(
                           context.i10n.errors.somethingWrong.description,
                           textAlign: TextAlign.center,
-                          style: SmartTextStyle.headingXs(),
                         ),
                         Gap(SmartDimension.size8.h),
                         Padding(
                           padding: EdgeInsets.symmetric(
                             horizontal: SmartDimension.size64.w,
                           ),
-                          child: Text(
+                          child: SmartTextBodySm(
                             context.i10n.errors.somethingWrong.description,
                             textAlign: TextAlign.center,
-                            style: SmartTextStyle.bodySm(),
                           ),
                         ),
                       ],
@@ -63,18 +61,15 @@ class ErrorApp extends StatelessWidget {
                           mainAxisAlignment: MainAxisAlignment.center,
                           mainAxisSize: MainAxisSize.min,
                           children: [
-                            Text(
+                            SmartTextBodySm(
                               getIt<PackageInfoUtil>().appName(),
-                              style: SmartTextStyle.bodySm(),
                             ),
                             const Text(
                               ' - ',
                             ),
-                            Text(
+                            SmartTextBodySm(
                               'v${getIt<PackageInfoUtil>().version()}',
-                              style: SmartTextStyle.bodySm(
-                                fontWeight: FontWeight.w700,
-                              ),
+                              fontWeight: FontWeight.w700,
                             ),
                           ],
                         ),

diff --git a/app/smart_widgetbook/lib/presentation/pages/animation_page.dart b/app/smart_widgetbook/lib/presentation/pages/animation_page.dart
@@ -47,12 +47,8 @@ class AnimationPage extends StatelessWidget {
                     padding: EdgeInsets.symmetric(
                       horizontal: SmartDimension.size16.w,
                     ),
-                    child: SelectableText(
+                    child: SmartTextBodyXs(
                       SmartAnimations.values[index].name,
-                      style: SmartTextStyle.bodyXs(
-                        fontWeight: FontWeight.bold,
-                        color: context.smartColor.text.neutral.subtle,
-                      ),
                       textAlign: TextAlign.center,
                     ),
                   ),

diff --git a/app/smart_widgetbook/lib/presentation/pages/button_page.dart b/app/smart_widgetbook/lib/presentation/pages/button_page.dart
@@ -61,8 +61,8 @@ class _ButtonPageState extends State<ButtonPage> {
                     color: context.smartColor.icon.neutral.main,
                     size: 20.sp,
                   ),
-                  label: Text(value.name),
-                  labelStyle: SmartTextStyle.bodySm(
+                  label: SmartTextBodySm(
+                    value.name,
                     fontWeight: FontWeight.bold,
                     color: context.smartColor.text.neutral.strong,
                   ),

diff --git a/app/smart_widgetbook/lib/presentation/pages/color_page.dart b/app/smart_widgetbook/lib/presentation/pages/color_page.dart
@@ -44,11 +44,9 @@ class _ColorItem extends StatelessWidget {
         height: 48.h,
         color: color,
         child: Center(
-          child: Text(
+          child: SmartTextBody(
             '$name - $color',
-            style: SmartTextStyle.body(
-              color: textColor ?? context.smartColor.text.neutral.main,
-            ),
+            color: textColor,
           ),
         ),
       );

diff --git a/app/smart_widgetbook/lib/presentation/pages/logo_page.dart b/app/smart_widgetbook/lib/presentation/pages/logo_page.dart
@@ -42,12 +42,8 @@ class LogoPage extends StatelessWidget {
                     logo: SmartLogo.values[index],
                     fit: BoxFit.contain,
                   ),
-                  SelectableText(
+                  SmartTextBodyXs(
                     SmartLogo.values[index].name,
-                    style: SmartTextStyle.bodyXs(
-                      fontWeight: FontWeight.bold,
-                      color: context.smartColor.text.neutral.subtle,
-                    ),
                     textAlign: TextAlign.center,
                   ),
                 ],

diff --git a/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/icon_color_page.dart b/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/icon_color_page.dart
@@ -26,11 +26,9 @@ class IconColorPage extends StatelessWidget {
               color: colorData.color,
             ),
             Gap(SmartDimension.size12.w),
-            Text(
+            SmartTextBody(
               colorData.token.replaceAll('.', '/'),
-              style: SmartTextStyle.body(
-                color: colorData.color,
-              ),
+              color: colorData.color,
             ),
           ],
         ),

diff --git a/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/outline_color_page.dart b/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/outline_color_page.dart
@@ -28,11 +28,8 @@ class OutlineColorPage extends StatelessWidget {
             ),
             color: Colors.transparent,
           ),
-          child: Text(
+          child: SmartTextBody(
             colorData.token.replaceAll('.', '/'),
-            style: SmartTextStyle.body(
-              color: context.smartColor.text.neutral.main,
-            ),
             textAlign: TextAlign.center,
           ),
         ),

diff --git a/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/overlay_color_page.dart b/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/overlay_color_page.dart
@@ -25,11 +25,9 @@ class OverlayColorPage extends StatelessWidget {
               color: context.smartColor.outline.neutral.main,
             ),
           ),
-          child: Text(
+          child: SmartTextBody(
             colorData.token.replaceAll('.', '/'),
-            style: SmartTextStyle.body(
-              color: colorData.textColor,
-            ),
+
             textAlign: TextAlign.center,
           ),
         ),

diff --git a/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/text_color_page.dart b/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/text_color_page.dart
@@ -15,11 +15,8 @@ class TextColorPage extends StatelessWidget {
     return Scaffold(
       backgroundColor: context.smartColor.background.neutral.main,
       body: Center(
-        child: Text(
+        child: SmartTextBody(
           colorData.token.replaceAll('.', '/'),
-          style: SmartTextStyle.body(
-            color: colorData.color,
-          ),
         ),
       ),
     );

diff --git a/packages/smart_ui_kit/lib/smart_ui_kit.dart b/packages/smart_ui_kit/lib/smart_ui_kit.dart
@@ -9,6 +9,12 @@ export 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 export 'package:gap/gap.dart';
 export 'package:nil/nil.dart';
 
+// atoms
+export 'src/atoms/atoms.dart';
+
+// molecules
+export 'src/molecules/molecules.dart';
+
 // components
 export 'src/components/components.dart';
 

diff --git a/packages/smart_ui_kit/lib/src/atoms/atoms.dart b/packages/smart_ui_kit/lib/src/atoms/atoms.dart
@@ -0,0 +1 @@
+export 'smart_text.dart';
diff --git a/packages/smart_ui_kit/lib/src/atoms/smart_text.dart b/packages/smart_ui_kit/lib/src/atoms/smart_text.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:smart_ui_kit/smart_ui_kit.dart';
+import 'package:smart_ui_kit/src/foundations/foundations.dart';
+
+class SmartText extends StatelessWidget {
+  const SmartText(
+    this.text, {
+    super.key,
+    this.overflow,
+    this.maxLines,
+    this.softWrap,
+    this.textStyle,
+    this.semanticsLabel,
+    this.textAlign,
+  });
+
+  final String text;
+  final int? maxLines;
+  final bool? softWrap;
+  final TextAlign? textAlign;
+  final TextOverflow? overflow;
+  final TextStyle? textStyle;
+  final String? semanticsLabel;
+
+  @override
+  Widget build(BuildContext context) => Text(
+        text,
+        style: textStyle ??
+            SmartTypographyFoundation.body(
+              color: context.smartColor.text.neutral.main,
+            ),
+        overflow: overflow,
+        maxLines: maxLines,
+        softWrap: softWrap,
+        textAlign: textAlign,
+        semanticsLabel: semanticsLabel,
+      );
+}
diff --git a/packages/smart_ui_kit/lib/src/foundations/colors/smart_color_foundation.dart b/packages/smart_ui_kit/lib/src/foundations/colors/smart_color_foundation.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:smart_ui_kit/src/foundations/colors/colors.dart';
 import 'package:smart_ui_kit/src/tokens/colors/colors.dart';
 
-
 part '_smart_action_color.dart';
 part '_smart_background_color.dart';
 part '_smart_foreground_color.dart';

diff --git a/packages/smart_ui_kit/lib/src/foundations/typography/smart_typography_foundation.dart b/packages/smart_ui_kit/lib/src/foundations/typography/smart_typography_foundation.dart
@@ -1,24 +1,24 @@
 import 'package:flutter/widgets.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:smart_ui_kit/smart_ui_kit.dart';
-import 'package:smart_ui_kit/src/tokens/typography/smart_typography.dart';
+import 'package:smart_ui_kit/src/tokens/typography/typography.dart';
 
 class SmartTypographyFoundation {
   const SmartTypographyFoundation._();
 
   static TextStyle _base({
-    double fontSize = SmartTypography.body,
-    FontWeight? fontWeight = FontWeight.w400,
+    double? fontSize,
+    FontWeight? fontWeight,
     Color? color,
     TextDecoration? decoration,
     double? height,
     double? letterSpacing,
     double? wordSpacing,
   }) =>
       GoogleFonts.manrope(
-        fontSize: fontSize * 1.sp,
+        fontSize: (fontSize ?? SmartTypography.body.fontSize) * 1.sp,
         color: color,
-        fontWeight: fontWeight,
+        fontWeight: fontWeight ?? SmartTypography.body.fontWeight,
         decoration: decoration,
         height: height,
         letterSpacing: letterSpacing,
@@ -33,10 +33,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.heading3Xl,
+        fontSize: SmartTypography.heading3Xl.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.heading3Xl.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -49,10 +49,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.heading2Xl,
+        fontSize: SmartTypography.heading2Xl.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.heading2Xl.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -65,10 +65,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.headingXl,
+        fontSize: SmartTypography.headingXl.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.headingXl.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -81,10 +81,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.headingLg,
+        fontSize: SmartTypography.headingLg.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.headingLg.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -97,10 +97,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.heading,
+        fontSize: SmartTypography.heading.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.heading.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -113,10 +113,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.headingSm,
+        fontSize: SmartTypography.headingSm.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.headingSm.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -129,10 +129,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.headingXs,
+        fontSize: SmartTypography.headingXs.fontSize,
         color: color,
         height: height,
-        fontWeight: FontWeight.w700,
+        fontWeight: SmartTypography.headingXs.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -146,10 +146,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.bodyLg,
+        fontSize: SmartTypography.bodyLg.fontSize,
         color: color,
         height: height,
-        fontWeight: fontWeight,
+        fontWeight: fontWeight ?? SmartTypography.bodyLg.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -179,10 +179,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.bodySm,
+        fontSize: SmartTypography.bodySm.fontSize,
         color: color,
         height: height,
-        fontWeight: fontWeight,
+        fontWeight: fontWeight ?? SmartTypography.bodySm.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );
@@ -196,10 +196,10 @@ class SmartTypographyFoundation {
     double? wordSpacing,
   }) =>
       _base(
-        fontSize: SmartTypography.bodyXs,
+        fontSize: SmartTypography.bodyXs.fontSize,
         color: color,
         height: height,
-        fontWeight: fontWeight,
+        fontWeight: fontWeight ?? SmartTypography.bodyXs.fontWeight,
         wordSpacing: wordSpacing,
         letterSpacing: letterSpacing,
       );

diff --git a/packages/smart_ui_kit/lib/src/molecules/molecules.dart b/packages/smart_ui_kit/lib/src/molecules/molecules.dart
@@ -0,0 +1 @@
+export 'text/text.dart';