Dropsource / monarch

Monarch is a tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.
https://monarchapp.io
MIT License
427 stars 21 forks source link

controller: support for non-English user. #114

Open debuggerx01 opened 10 months ago

debuggerx01 commented 10 months ago

First of all, thanks for this wonderful tool.

This pr optimizes the experience of non-English users, including the following two optimizations:

  1. Use @pragma('some non-Eng name like 测试') to name a story
  2. Remove the '_stories' suffix from the story tree when using stories files containing non-English characters to name Optimization effect: image
fertrig commented 10 months ago

Thank you so much for the PR!

1. Use @pragma to name a story

This is a good idea. However, we need to add a prefix to make it future proof. We plan on using annotations on stories in the future so I want to make sure this change won't clash with any future work. Here is what I have in mind.

Use the pragma hint monarch:name to give a story a human-friendly name. Examples:

@pragma('monarch:name', 'some colorful card')
Widget someCardWithSomeColor() => Card(...);

@pragma('monarch:name', '测试')
Widget mediumCard() => const Center(...);

In the future, the pragma hint monarch:name will let us use hints and annotations like:

@pragma('monarch:name', 'some colorful card')
@pragma('monarch:tags', ['cards', 'login'])
@pragma('monarch:ios-only')
Widget someCardWithSomeColor() => Card(...);

// or use a strongly typed annotation like:
@MonarchStory(name: 'some colorful card', tags: ['cards', 'login'], iosOnly: true)
Widget someCardWithSomeColor() => Card(...);

2. Removal of _stories from the controller story tree

I think this a great idea as well. But I think we should remove _stories from all stories, not just the stories with non-Latin script characters. That will remove duplication in the UI.

Could you please create a separate PR for the removal of _stories from the story tree? That way we can trace the changes better.

Thank you so much!

debuggerx01 commented 10 months ago

Thank you so much for the PR!

1. Use @pragma to name a story

This is a good idea. However, we need to add a prefix to make it future proof. We plan on using annotations on stories in the future so I want to make sure this change won't clash with any future work. Here is what I have in mind.

Use the pragma hint monarch:name to give a story a human-friendly name. Examples:

@pragma('monarch:name', 'some colorful card')
Widget someCardWithSomeColor() => Card(...);

@pragma('monarch:name', '测试')
Widget mediumCard() => const Center(...);

In the future, the pragma hint monarch:name will let us use hints and annotations like:

@pragma('monarch:name', 'some colorful card')
@pragma('monarch:tags', ['cards', 'login'])
@pragma('monarch:ios-only')
Widget someCardWithSomeColor() => Card(...);

// or use a strongly typed annotation like:
@MonarchStory(name: 'some colorful card', tags: ['cards', 'login'], iosOnly: true)
Widget someCardWithSomeColor() => Card(...);

2. Removal of _stories from the controller story tree

I think this a great idea as well. But I think we should remove _stories from all stories, not just the stories with non-Latin script characters. That will remove duplication in the UI.

Could you please create a separate PR for the removal of _stories from the story tree? That way we can trace the changes better.

Thank you so much!

Thank you for reply, the PR for the removal of _stories comes here: #118

The only reason I choose the @pragma annotation is that it is built-in, but if user need to add a prefix like @pragma('monarch:name', 'some colorful card'), I think it is a bit cumbersome, maybe use strongly typed annotation will be better, and I hope that when monarch init is executed, annotation dependencies can be automatically added to the project.

fertrig commented 10 months ago

The only reason I choose the @pragma annotation is that it is built-in...

I also like the @pragma annotation for that reason. It is super simple to use. That is good. I also think the prefix is a bit cumbersome. However, it is necessary for now because I don't know how the API will evolve in the future.

I want users to use pragma without any hints. That is super simple. However, I don't know if users will want to use pragma to do human friendly story names or to organize their stories with tags or to do something else we will discover.

For example, I know some users who want to organize their stories using tags or categories:

@pragma('onboarding')
Widget stepOne() => ...;

@pragma('login-screen, error-state')
Widget invalidCredentials() => ...;

It feels risky to assume the most common use of the pragma annotation will be what you are proposing. It may turn out to be that way but I rather be explicit for now.

The strongly type annotation would be nice and it will come later too.

PS. I hope to have some time to fully review and test your changes next week.