chore: add dropdown component

.gitignore

@@ -54,4 +54,5 @@ unlinked.ds
 unlinked_spec.ds
 
 # FVM Version Cache
-.fvm/
+.fvm/
+.vscode/launch.json

packages/catalog/.gitignore

@@ -41,3 +41,5 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+
+macos/

packages/catalog/.metadata

@@ -4,7 +4,7 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "b0850beeb25f6d5b10426284f506557f66181b36"
+  revision: "2663184aa79047d0a33a14a3b607954f8fdd8730"
   channel: "stable"
 
 project_type: app
@@ -13,26 +13,11 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
-    - platform: android
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
-    - platform: ios
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
-    - platform: linux
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
+      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
     - platform: macos
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
-    - platform: web
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
-    - platform: windows
-      create_revision: b0850beeb25f6d5b10426284f506557f66181b36
-      base_revision: b0850beeb25f6d5b10426284f506557f66181b36
+      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
 
   # User provided section
 

packages/catalog/lib/usecases/dropdown.dart

@@ -0,0 +1,65 @@
+import 'package:cave/cave.dart';
+import 'package:flutter/material.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+List<String> locations = [
+  "Exhibition Room",
+  "Room 1",
+  "Room 2",
+  "Room 3",
+  "Hallway",
+  "Toilet",
+  "Stairway",
+  "Room 4",
+];
+
+@widgetbook.UseCase(
+  name: 'DevFest Dropdown',
+  type: DevfestDropDown,
+  designLink:
+      "https://www.figma.com/design/CMEZj7OPDW09hOuTg1tAgF/DevFest-Lagos-'24---Mobile-App.?node-id=5457-8141&node-type=FRAME&t=13HTMdJAt4XcDqvU-0",
+)
+Widget devfestDropdown(BuildContext context) {
+  String? currentLocation;
+  String? destination;
+  return StatefulBuilder(builder: (context, setState) {
+    return Scaffold(
+      backgroundColor: DevfestTheme.of(context).backgroundColor,
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              DevfestDropDown<String>(
+                items: locations,
+                selectedItem: currentLocation,
+                onChanged: (value) {
+                  currentLocation = value;
+                  setState(() {});
+                },
+                title: 'Where are you in Landmark?',
+                hint: 'Current location',
+                prefixIcon: const Icon(IconsaxOutline.location),
+                suffixIcon: const Icon(IconsaxOutline.arrow_down_1),
+              ),
+              const SizedBox(height: 16),
+              DevfestDropDown<String>(
+                items: locations,
+                selectedItem: destination,
+                onChanged: (value) {
+                  destination = value;
+                  setState(() {});
+                },
+                title: 'Where are you headed?',
+                hint: 'Desired destination',
+                prefixIcon: const Icon(IconsaxOutline.location_tick),
+                suffixIcon: const Icon(IconsaxOutline.arrow_down_1),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  });
+}

packages/catalog/pubspec.lock

@@ -242,6 +242,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_animate:
+    dependency: transitive
+    description:
+      name: flutter_animate
+      sha256: "7c8a6594a9252dad30cc2ef16e33270b6248c4dedc3b3d06c86c4f3f4dc05ae5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.0"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -258,6 +266,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.9.3"
+  flutter_shaders:
+    dependency: transitive
+    description:
+      name: flutter_shaders
+      sha256: "02750b545c01ff4d8e9bbe8f27a7731aa3778402506c67daa1de7f5fc3f4befe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.2"
   flutter_test:
     dependency: "direct dev"
     description: flutter

packages/cave/lib/themes/text_field_theme.dart

@@ -6,26 +6,32 @@ import 'effects.dart';
 
 @immutable
 class DevfestTextFieldTheme extends ThemeExtension<DevfestTextFieldTheme> {
-  final InputBorder border;
-  final InputBorder enabledBorder;
-  final InputBorder focusedBorder;
-  final InputBorder errorBorder;
-  final TextStyle errorStyle;
-  final TextStyle hintStyle;
-  final TextStyle style;
+  final InputBorder? border;
+  final InputBorder? enabledBorder;
+  final InputBorder? focusedBorder;
+  final InputBorder? errorBorder;
+  final TextStyle? errorStyle;
+  final TextStyle? hintStyle;
+  final TextStyle? style;
+  final Color? prefixColor;
+  final Color? suffixColor;
 
-  const DevfestTextFieldTheme._({
+  const DevfestTextFieldTheme({
     required this.border,
     required this.enabledBorder,
     required this.errorBorder,
     required this.focusedBorder,
     required this.errorStyle,
     required this.hintStyle,
     required this.style,
+    required this.prefixColor,
+    required this.suffixColor,
   });
 
   DevfestTextFieldTheme.light()
-      : this._(
+      : this(
+          prefixColor: DevfestColors.grey10,
+          suffixColor: DevfestColors.grey10,
           border: const OutlineInputBorder(
             borderRadius: BorderRadius.all(Radius.circular(16)),
             borderSide: BorderSide(color: DevfestColors.grey80, width: 1.4),
@@ -72,7 +78,9 @@ class DevfestTextFieldTheme extends ThemeExtension<DevfestTextFieldTheme> {
         );
 
   DevfestTextFieldTheme.dark()
-      : this._(
+      : this(
+          prefixColor: DevfestColors.grey100,
+          suffixColor: DevfestColors.grey100,
           border: const OutlineInputBorder(
             borderRadius: BorderRadius.all(Radius.circular(16)),
             borderSide: BorderSide(color: DevfestColors.grey80, width: 1.4),
@@ -114,7 +122,7 @@ class DevfestTextFieldTheme extends ThemeExtension<DevfestTextFieldTheme> {
           style: const TextStyle(
             fontSize: 16,
             fontWeight: FontWeight.w500,
-            color: DevfestColors.grey10,
+            color: DevfestColors.grey70,
           ),
           errorStyle: const TextStyle(
             fontSize: 16,
@@ -124,28 +132,32 @@ class DevfestTextFieldTheme extends ThemeExtension<DevfestTextFieldTheme> {
         );
 
   @override
-  ThemeExtension<DevfestTextFieldTheme> copyWith({
+  DevfestTextFieldTheme copyWith({
     InputBorder? border,
     InputBorder? focusedBorder,
     InputBorder? enabledBorder,
     InputBorder? errorBorder,
     TextStyle? hintStyle,
     TextStyle? errorStyle,
     TextStyle? style,
+    Color? prefixColor,
+    Color? suffixColor,
   }) {
-    return DevfestTextFieldTheme._(
+    return DevfestTextFieldTheme(
       border: border ?? this.border,
       enabledBorder: enabledBorder ?? this.enabledBorder,
       focusedBorder: focusedBorder ?? this.focusedBorder,
       errorBorder: errorBorder ?? this.errorBorder,
       hintStyle: hintStyle ?? this.hintStyle,
       errorStyle: errorStyle ?? this.errorStyle,
       style: style ?? this.style,
+      prefixColor: prefixColor ?? this.prefixColor,
+      suffixColor: suffixColor ?? this.suffixColor,
     );
   }
 
   @override
-  ThemeExtension<DevfestTextFieldTheme> lerp(
+  DevfestTextFieldTheme lerp(
       covariant ThemeExtension<DevfestTextFieldTheme>? other, double t) {
     return this;
   }

packages/cave/lib/themes/theme_data.dart

@@ -26,7 +26,7 @@ class DevFestThemeData extends ThemeExtension<DevFestThemeData> {
 
   DevFestThemeData.light()
       : this(
-          textTheme: DevfestTextTheme.light(),
+          textTheme: const DevfestTextTheme.light(),
           backgroundColor: DevfestColors.primariesYellow100,
           buttonTheme: const DevfestButtonTheme.light(),
           outlinedButtonTheme: const DevfestOutlinedButtonTheme.light(),
@@ -36,7 +36,7 @@ class DevFestThemeData extends ThemeExtension<DevFestThemeData> {
 
   DevFestThemeData.dark()
       : this(
-          textTheme: DevfestTextTheme.dark(),
+          textTheme: const DevfestTextTheme.dark(),
           backgroundColor: DevfestColors.backgroundDark,
           textFieldTheme: DevfestTextFieldTheme.dark(),
           buttonTheme: const DevfestButtonTheme.dark(),
@@ -50,12 +50,14 @@ class DevFestThemeData extends ThemeExtension<DevFestThemeData> {
     DevfestButtonTheme? buttonTheme,
     DevfestOutlinedButtonTheme? outlinedButtonTheme,
     DevfestBottomNavTheme? bottomNavTheme,
+    DevfestTextFieldTheme? textFieldTheme,
   }) {
     return DevFestThemeData(
       textTheme: textTheme ?? this.textTheme,
       buttonTheme: buttonTheme ?? this.buttonTheme,
       outlinedButtonTheme: outlinedButtonTheme ?? this.outlinedButtonTheme,
       bottomNavTheme: bottomNavTheme ?? this.bottomNavTheme,
+      textFieldTheme: textFieldTheme ?? this.textFieldTheme,
     );
   }
 
@@ -69,6 +71,7 @@ class DevFestThemeData extends ThemeExtension<DevFestThemeData> {
       outlinedButtonTheme:
           outlinedButtonTheme?.lerp(other.outlinedButtonTheme, t),
       bottomNavTheme: bottomNavTheme?.lerp(other.bottomNavTheme, t),
+      textFieldTheme: textFieldTheme?.lerp(other.textFieldTheme, t),
     );
   }
 }