We shall improve how stories are named and organized in the Monarch Controller UI.
Current issues or limitations
On the Controller UI, all story files end in _stories which is repetitive.
The story names are function names which follow Dart syntax rules. As a result, long story names are hard to read.
The only way to organize stories is by file.
Requirements
Remove the _stories duplication on the Controller UI.
Let users declare a human friendly name for a story. This name shall display on the Controller UI.
Let users declare tags for any story. The user shall be able to filter stories using tags on the Controller UI.
Use @pragma for names and tags
The simplest way to let users declare human-friendly names and tags is to use the @pragma annotation. The @pragma annotation takes two parameters:
pragma(String name, [Object? options])
The first parameter is a String which we can use for the story name. The second parameter is an options Object which we can use as an array of Strings for the story tags. For example:
In the example above, the story someCardWithSomeColor will be displayed on the Controller UI as "Some Colorful Card" and it will have the tags "cards" and "onboarding".
This approach is also the easiest for the user. The @pragma annotation is part of the Dart SDK thus users won't have to add any new dependencies to pubspec.yaml and they won't have to import any new packages to their stories files.
The documentation of the @pragma annotation suggests we should use prefixes on the first parameter. However, stories can only go inside files that end in _stories.dart thus I think we can be idiosyncratic about how we use @pragma.
Related issues
These requirements emerged from these two PRs from user @debuggerx01
We shall improve how stories are named and organized in the Monarch Controller UI.
Current issues or limitations
_storieswhich is repetitive.Requirements
_storiesduplication on the Controller UI.Use
@pragmafor names and tagsThe simplest way to let users declare human-friendly names and tags is to use the
@pragmaannotation. The@pragmaannotation takes two parameters:The first parameter is a String which we can use for the story name. The second parameter is an options Object which we can use as an array of Strings for the story tags. For example:
In the example above, the story
someCardWithSomeColorwill be displayed on the Controller UI as "Some Colorful Card" and it will have the tags "cards" and "onboarding".This approach is also the easiest for the user. The
@pragmaannotation is part of the Dart SDK thus users won't have to add any new dependencies to pubspec.yaml and they won't have to import any new packages to their stories files.The documentation of the
@pragmaannotation suggests we should use prefixes on the first parameter. However, stories can only go inside files that end in_stories.dartthus I think we can be idiosyncratic about how we use@pragma.Related issues
These requirements emerged from these two PRs from user @debuggerx01