Searchable contents

packages/storybook_flutter/lib/src/plugins/contents.dart → packages/storybook_flutter/lib/src/plugins/contents/contents.dart

@@ -1,6 +1,9 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:storybook_flutter/src/plugins/contents/search_story_notifier.dart';
+import 'package:storybook_flutter/src/plugins/contents/search_story_notifier_provider.dart';
+import 'package:storybook_flutter/src/plugins/contents/search_text_field.dart';
 import 'package:storybook_flutter/src/plugins/plugin.dart';
 import 'package:storybook_flutter/src/story.dart';
 
@@ -19,18 +22,22 @@ class ContentsPlugin extends Plugin {
 
 Widget _buildIcon(BuildContext _) => const Icon(Icons.list);
 
-Widget _buildPanel(BuildContext _) => const _Contents();
+Widget _buildPanel(BuildContext _) =>
+    const SearchStoryNotifierProvider(child: _Contents());
 
-Widget _buildWrapper(BuildContext _, Widget? child) => Directionality(
-      textDirection: TextDirection.ltr,
-      child: Row(
+Widget _buildWrapper(BuildContext _, Widget? child) => MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Row(
         children: [
           const Material(
             child: DecoratedBox(
               decoration: BoxDecoration(
                 border: Border(right: BorderSide(color: Colors.black12)),
               ),
-              child: SizedBox(width: 250, child: _Contents()),
+              child: SizedBox(
+                width: 250,
+                child: SearchStoryNotifierProvider(child: _Contents()),
+              ),
             ),
           ),
           Expanded(child: ClipRect(clipBehavior: Clip.hardEdge, child: child)),
@@ -63,9 +70,10 @@ class _ContentsState extends State<_Contents> {
 
   Widget _buildStoryTile(Story story) {
     final description = story.description;
+    final current = context.watch<StoryNotifier>().currentStory;
 
     return ListTile(
-      selected: story == context.watch<StoryNotifier>().currentStory,
+      selected: story == current,
       title: Text(story.title),
       subtitle: description == null ? null : Text(description),
       onTap: () => context.read<StoryNotifier>().currentStoryName = story.name,
@@ -105,18 +113,27 @@ class _ContentsState extends State<_Contents> {
 
   @override
   Widget build(BuildContext context) {
-    final children = _buildListChildren(context.watch<StoryNotifier>().stories);
+    context.watch<StoryNotifier>();
+    final children = _buildListChildren(
+        context.watch<SearchStoryNotifier>().searchedStories);
 
     return SafeArea(
       top: false,
       right: false,
-      child: ListTileTheme(
-        style: ListTileStyle.drawer,
-        child: ListView(
-          padding: EdgeInsets.zero,
-          primary: false,
-          children: children,
-        ),
+      child: Column(
+        children: [
+          const SearchTextField(),
+          Expanded(
+            child: ListTileTheme(
+              style: ListTileStyle.drawer,
+              child: ListView(
+                padding: EdgeInsets.zero,
+                primary: false,
+                children: children,
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }

packages/storybook_flutter/lib/src/plugins/contents/search_story_notifier.dart

@@ -0,0 +1,29 @@
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:storybook_flutter/src/story.dart';
+
+class SearchStoryNotifier extends ChangeNotifier {
+  SearchStoryNotifier({required List<Story> stories})
+      : _stories = stories.toList(),
+        _filteredStories = stories.toList();
+
+  String _searchTerm = '';
+  final List<Story> _stories;
+  List<Story> _filteredStories;
+
+  List<Story> get searchedStories => UnmodifiableListView(_filteredStories);
+
+  void searchStoriesByTitle(String value) {
+    if (_searchTerm == value) return;
+    _searchTerm = value;
+    if (_searchTerm.isEmpty) {
+      _filteredStories = _stories;
+    } else {
+      _filteredStories = _stories
+          .where((story) =>
+              story.title.toLowerCase().contains(value.toLowerCase()))
+          .toList();
+    }
+    notifyListeners();
+  }
+}

packages/storybook_flutter/lib/src/plugins/contents/search_story_notifier_provider.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:storybook_flutter/src/plugins/contents/search_story_notifier.dart';
+import 'package:storybook_flutter/src/story.dart';
+
+class SearchStoryNotifierProvider extends StatelessWidget {
+  const SearchStoryNotifierProvider({Key? key, required this.child})
+      : super(key: key);
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) => ChangeNotifierProvider(
+        create: (_) =>
+            SearchStoryNotifier(stories: context.read<StoryNotifier>().stories),
+        child: child,
+      );
+}

packages/storybook_flutter/lib/src/plugins/contents/search_text_field.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:storybook_flutter/src/plugins/contents/search_story_notifier.dart';
+
+class SearchTextField extends StatefulWidget {
+  const SearchTextField({Key? key}) : super(key: key);
+
+  @override
+  State<SearchTextField> createState() => _SearchTextFieldState();
+}
+
+class _SearchTextFieldState extends State<SearchTextField> {
+  late final TextEditingController _searchController;
+
+  @override
+  void initState() {
+    super.initState();
+    _searchController = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => TextField(
+        controller: _searchController,
+        decoration: InputDecoration(
+          prefixIcon: const Icon(Icons.search),
+          suffixIcon: _isNotEmpty
+              ? IconButton(
+                  icon: const Icon(Icons.clear),
+                  onPressed: () => _clearSearch(context),
+                )
+              : null,
+        ),
+        textInputAction: TextInputAction.search,
+        onChanged: _searchStoriesByTitle,
+      );
+
+  void _searchStoriesByTitle(String value) {
+    context.read<SearchStoryNotifier>().searchStoriesByTitle(value);
+  }
+
+  void _clearSearch(BuildContext context) {
+    if (_isNotEmpty) {
+      _searchController.clear();
+      context.read<SearchStoryNotifier>().searchStoriesByTitle('');
+    }
+  }
+
+  bool get _isNotEmpty => _searchController.text.isNotEmpty;
+}

packages/storybook_flutter/lib/src/plugins/plugin.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/widgets.dart';
-import 'package:storybook_flutter/src/plugins/contents.dart';
+import 'package:storybook_flutter/src/plugins/contents/contents.dart';
 import 'package:storybook_flutter/src/plugins/device_frame.dart';
 import 'package:storybook_flutter/src/plugins/knobs.dart';
 import 'package:storybook_flutter/src/plugins/theme_mode.dart';
 
-export 'contents.dart';
+export 'contents/contents.dart';
 export 'device_frame.dart';
 export 'knobs.dart';
 export 'theme_mode.dart';

packages/storybook_flutter/lib/src/story.dart

@@ -26,6 +26,35 @@ class Story {
   List<String> get path => name.split(_sectionSeparator);
 
   String get title => name.split(_sectionSeparator).last;
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) {
+      return true;
+    }
+    if (other.runtimeType != runtimeType) {
+      return false;
+    }
+
+    return other is Story &&
+        other.name == name &&
+        other.description == description &&
+        const ListEquality<String>().equals(other.path, path) &&
+        other.title == title;
+  }
+
+  @override
+  int get hashCode => Object.hash(
+        name,
+        description,
+        path,
+        title,
+      );
+
+  @override
+  String toString() {
+    return 'Story(name: $name, description: $description, path: $path, title: $title)';
+  }
 }
 
 /// Use this notifier to get the current story.
@@ -45,11 +74,9 @@ class StoryNotifier extends ChangeNotifier {
 
   String? _currentStoryName;
 
-  Story? get currentStory {
-    final index = _stories.indexWhere((s) => s.name == _currentStoryName);
-
-    return index != -1 ? _stories[index] : null;
-  }
+  Story? get currentStory => _stories.firstWhereOrNull(
+        (story) => story.name == _currentStoryName,
+      );
 
   String? get currentStoryName => _currentStoryName;