Stories names and tags

[fertrig]

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:

@pragma('Some Colorful Card', ['cards','onboarding'])
Widget someCardWithSomeColor() => Card(...);

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

• controller: remove stories suffix.
• controller: support for non-English user.