feat(ui_components)!: available same type component usage (#200)

packages/wyatt_ui_components/example/lib/component_theme.dart

@@ -1,14 +1,18 @@
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
-import 'package:wyatt_ui_components_example/components/custom_app_bar.dart';
 import 'package:wyatt_ui_components_example/components/custom_bottom_bar.dart';
 import 'package:wyatt_ui_components_example/components/custom_error_widget.dart';
 import 'package:wyatt_ui_components_example/components/custom_loader_widget.dart';
+import 'package:wyatt_ui_components_example/components/custom_root_app_bar.dart';
+import 'package:wyatt_ui_components_example/components/custom_second_app_bar.dart';
 
 class AppThemeComponent {
-  static ComponentThemeData get components => const ComponentThemeData.raw(
-        topAppBar: CustomAppBar(),
-        bottomNavigationBar: CustomBottomNavigationBar(),
-        error: CustomErrorWidget(),
-        loader: CustomLoaderWidget(),
+  static ComponentThemeData get components => ComponentThemeData.raw(
+        topAppBars: const {
+          'root': CustomRootAppBar(),
+          'second': CustomSecondAppBar(),
+        }.registry(),
+        bottomNavigationBars: const CustomBottomNavigationBar().registry(),
+        errors: const CustomErrorWidget().registry(),
+        loaders: const CustomLoaderWidget().registry(),
       );
 }

packages/wyatt_ui_components/example/lib/components/custom_app_bar.g.dart

@@ -1,99 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'custom_app_bar.dart';
-
-// **************************************************************************
-// ComponentCopyWithGenerator
-// **************************************************************************
-
-class $CustomAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
-  const $CustomAppBarCWProxyImpl(this._value);
-  final CustomAppBar _value;
-  @override
-  CustomAppBar title(TextWrapper? title) => this(title: title);
-  @override
-  CustomAppBar centerTitle(bool? centerTitle) => this(centerTitle: centerTitle);
-  @override
-  CustomAppBar shape(ShapeBorder? shape) => this(shape: shape);
-  @override
-  CustomAppBar systemOverlayStyle(SystemUiOverlayStyle? systemOverlayStyle) =>
-      this(systemOverlayStyle: systemOverlayStyle);
-  @override
-  CustomAppBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
-      this(automaticallyImplyLeading: automaticallyImplyLeading);
-  @override
-  CustomAppBar flexibleSpace(Widget? flexibleSpace) =>
-      this(flexibleSpace: flexibleSpace);
-  @override
-  CustomAppBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
-  @override
-  CustomAppBar elevation(double? elevation) => this(elevation: elevation);
-  @override
-  CustomAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
-      this(scrolledUnderElevation: scrolledUnderElevation);
-  @override
-  CustomAppBar shadowColor(Color? shadowColor) =>
-      this(shadowColor: shadowColor);
-  @override
-  CustomAppBar surfaceTintColor(Color? surfaceTintColor) =>
-      this(surfaceTintColor: surfaceTintColor);
-  @override
-  CustomAppBar backgroundColor(MultiColor? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
-  @override
-  CustomAppBar iconTheme(IconThemeData? iconTheme) =>
-      this(iconTheme: iconTheme);
-  @override
-  CustomAppBar primary(bool? primary) => this(primary: primary);
-  @override
-  CustomAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
-      this(excludeHeaderSemantics: excludeHeaderSemantics);
-  @override
-  CustomAppBar toolbarHeight(double? toolbarHeight) =>
-      this(toolbarHeight: toolbarHeight);
-  @override
-  CustomAppBar leadingWidth(double? leadingWidth) =>
-      this(leadingWidth: leadingWidth);
-  @override
-  CustomAppBar leading(Widget? leading) => this(leading: leading);
-  @override
-  CustomAppBar actions(List<Widget>? actions) => this(actions: actions);
-  @override
-  CustomAppBar expandedWidget(List<Widget>? expandedWidget) =>
-      this(expandedWidget: expandedWidget);
-  @override
-  CustomAppBar key(Key? key) => this(key: key);
-  @override
-  CustomAppBar call({
-    TextWrapper? title,
-    bool? centerTitle,
-    ShapeBorder? shape,
-    SystemUiOverlayStyle? systemOverlayStyle,
-    bool? automaticallyImplyLeading,
-    Widget? flexibleSpace,
-    PreferredSizeWidget? bottom,
-    double? elevation,
-    double? scrolledUnderElevation,
-    Color? shadowColor,
-    Color? surfaceTintColor,
-    MultiColor? backgroundColor,
-    IconThemeData? iconTheme,
-    bool? primary,
-    bool? excludeHeaderSemantics,
-    double? toolbarHeight,
-    double? leadingWidth,
-    Widget? leading,
-    List<Widget>? actions,
-    List<Widget>? expandedWidget,
-    Key? key,
-  }) =>
-      CustomAppBar(
-        title: title ?? _value.title,
-        key: key ?? _value.key,
-      );
-}
-
-mixin $CustomAppBarCWMixin on Component {
-  $TopAppBarComponentCWProxy get copyWith =>
-      $CustomAppBarCWProxyImpl(this as CustomAppBar);
-}

packages/wyatt_ui_components/example/lib/components/custom_root_app_bar.dart

@@ -1,12 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
-part 'custom_app_bar.g.dart';
+part 'custom_root_app_bar.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomAppBar extends TopAppBarComponent with $CustomAppBarCWMixin {
-  const CustomAppBar({super.title, super.key});
+class CustomRootAppBar extends TopAppBarComponent
+    with $CustomRootAppBarCWMixin {
+  const CustomRootAppBar({super.title, super.key});
 
   @override
   Widget build(BuildContext context) => AppBar(

packages/wyatt_ui_components/example/lib/components/custom_root_app_bar.g.dart

@@ -0,0 +1,101 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'custom_root_app_bar.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $CustomRootAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
+  const $CustomRootAppBarCWProxyImpl(this._value);
+  final CustomRootAppBar _value;
+  @override
+  CustomRootAppBar title(TextWrapper? title) => this(title: title);
+  @override
+  CustomRootAppBar centerTitle(bool? centerTitle) =>
+      this(centerTitle: centerTitle);
+  @override
+  CustomRootAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  CustomRootAppBar systemOverlayStyle(
+          SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  CustomRootAppBar automaticallyImplyLeading(bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  CustomRootAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  CustomRootAppBar bottom(PreferredSizeWidget? bottom) => this(bottom: bottom);
+  @override
+  CustomRootAppBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  CustomRootAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  CustomRootAppBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  CustomRootAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  CustomRootAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  CustomRootAppBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  CustomRootAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  CustomRootAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  CustomRootAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  CustomRootAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
+  CustomRootAppBar leading(Widget? leading) => this(leading: leading);
+  @override
+  CustomRootAppBar actions(List<Widget>? actions) => this(actions: actions);
+  @override
+  CustomRootAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
+  CustomRootAppBar key(Key? key) => this(key: key);
+  @override
+  CustomRootAppBar call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  }) =>
+      CustomRootAppBar(
+        title: title ?? _value.title,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $CustomRootAppBarCWMixin on Component {
+  $TopAppBarComponentCWProxy get copyWith =>
+      $CustomRootAppBarCWProxyImpl(this as CustomRootAppBar);
+}

packages/wyatt_ui_components/example/lib/components/custom_second_app_bar.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+
+part 'custom_second_app_bar.g.dart';
+
+@ComponentCopyWithExtension()
+class CustomSecondAppBar extends TopAppBarComponent
+    with $CustomSecondAppBarCWMixin {
+  const CustomSecondAppBar({super.title, super.key});
+
+  @override
+  Widget build(BuildContext context) => AppBar(
+        backgroundColor: Colors.green,
+        title: Text(
+          super.title?.data ?? '',
+        ),
+      );
+}

packages/wyatt_ui_components/example/lib/components/custom_second_app_bar.g.dart

@@ -0,0 +1,103 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'custom_second_app_bar.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $CustomSecondAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
+  const $CustomSecondAppBarCWProxyImpl(this._value);
+  final CustomSecondAppBar _value;
+  @override
+  CustomSecondAppBar title(TextWrapper? title) => this(title: title);
+  @override
+  CustomSecondAppBar centerTitle(bool? centerTitle) =>
+      this(centerTitle: centerTitle);
+  @override
+  CustomSecondAppBar shape(ShapeBorder? shape) => this(shape: shape);
+  @override
+  CustomSecondAppBar systemOverlayStyle(
+          SystemUiOverlayStyle? systemOverlayStyle) =>
+      this(systemOverlayStyle: systemOverlayStyle);
+  @override
+  CustomSecondAppBar automaticallyImplyLeading(
+          bool? automaticallyImplyLeading) =>
+      this(automaticallyImplyLeading: automaticallyImplyLeading);
+  @override
+  CustomSecondAppBar flexibleSpace(Widget? flexibleSpace) =>
+      this(flexibleSpace: flexibleSpace);
+  @override
+  CustomSecondAppBar bottom(PreferredSizeWidget? bottom) =>
+      this(bottom: bottom);
+  @override
+  CustomSecondAppBar elevation(double? elevation) => this(elevation: elevation);
+  @override
+  CustomSecondAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
+      this(scrolledUnderElevation: scrolledUnderElevation);
+  @override
+  CustomSecondAppBar shadowColor(Color? shadowColor) =>
+      this(shadowColor: shadowColor);
+  @override
+  CustomSecondAppBar surfaceTintColor(Color? surfaceTintColor) =>
+      this(surfaceTintColor: surfaceTintColor);
+  @override
+  CustomSecondAppBar backgroundColor(MultiColor? backgroundColor) =>
+      this(backgroundColor: backgroundColor);
+  @override
+  CustomSecondAppBar iconTheme(IconThemeData? iconTheme) =>
+      this(iconTheme: iconTheme);
+  @override
+  CustomSecondAppBar primary(bool? primary) => this(primary: primary);
+  @override
+  CustomSecondAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
+      this(excludeHeaderSemantics: excludeHeaderSemantics);
+  @override
+  CustomSecondAppBar toolbarHeight(double? toolbarHeight) =>
+      this(toolbarHeight: toolbarHeight);
+  @override
+  CustomSecondAppBar leadingWidth(double? leadingWidth) =>
+      this(leadingWidth: leadingWidth);
+  @override
+  CustomSecondAppBar leading(Widget? leading) => this(leading: leading);
+  @override
+  CustomSecondAppBar actions(List<Widget>? actions) => this(actions: actions);
+  @override
+  CustomSecondAppBar expandedWidget(List<Widget>? expandedWidget) =>
+      this(expandedWidget: expandedWidget);
+  @override
+  CustomSecondAppBar key(Key? key) => this(key: key);
+  @override
+  CustomSecondAppBar call({
+    TextWrapper? title,
+    bool? centerTitle,
+    ShapeBorder? shape,
+    SystemUiOverlayStyle? systemOverlayStyle,
+    bool? automaticallyImplyLeading,
+    Widget? flexibleSpace,
+    PreferredSizeWidget? bottom,
+    double? elevation,
+    double? scrolledUnderElevation,
+    Color? shadowColor,
+    Color? surfaceTintColor,
+    MultiColor? backgroundColor,
+    IconThemeData? iconTheme,
+    bool? primary,
+    bool? excludeHeaderSemantics,
+    double? toolbarHeight,
+    double? leadingWidth,
+    Widget? leading,
+    List<Widget>? actions,
+    List<Widget>? expandedWidget,
+    Key? key,
+  }) =>
+      CustomSecondAppBar(
+        title: title ?? _value.title,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $CustomSecondAppBarCWMixin on Component {
+  $TopAppBarComponentCWProxy get copyWith =>
+      $CustomSecondAppBarCWProxyImpl(this as CustomSecondAppBar);
+}

packages/wyatt_ui_components/example/lib/main.dart

@@ -47,14 +47,22 @@ class Home extends StatelessWidget {
   @override
   Widget build(BuildContext context) => Scaffold(
         appBar: PreferredSize(
-          preferredSize: const Size.fromHeight(60),
-          child: context.components.topAppBarComponent
-              .title(const TextWrapper('Example title')),
+          preferredSize: const Size.fromHeight(120),
+          child: Column(
+            children: [
+              context.components
+                  .topAppBarComponent()
+                  .title(const TextWrapper('Example title')),
+              context.components
+                  .topAppBarComponent('second')
+                  .title(const TextWrapper('Example title')),
+            ],
+          ),
         ),
         body: Column(
           children: [
             Expanded(
-              child: context.components.errorComponent.call(
+              child: context.components.errorComponent()(
                 message: const TextWrapper('Example error'),
               ),
             ),
@@ -62,12 +70,13 @@ class Home extends StatelessWidget {
               height: 10,
             ),
             Expanded(
-              child: context.components.loaderComponent.call(
+              child: context.components.loaderComponent()(
                 colors: const MultiColor.single(Colors.green),
               ),
             ),
           ],
         ),
-        bottomNavigationBar: context.components.bottomNavigationBar,
+        bottomNavigationBar:
+            context.components.bottomNavigationBarComponent()(),
       );
 }