Improve design document and fix diagrams

metrics/web/docs/features/storybook/01_metrics_storybook_design.md

@@ -339,6 +339,9 @@ Consider the following structure of the `Metrics Storybook`:
 >       * `buttons/`
 >         * `chapters/`
 >           * `inactive_button_chapter.dart`
+>         * `controls/`
+>           * `buttons_chapter_control_name.dart`
+>           * `inactive_button_chapter_controls.dart`
 >         * `buttons_story.dart`
 >       * `...`
 >       * `chapter_controls.dart`
@@ -411,14 +414,18 @@ The `Story` is a class that groups together a list of `Chapter`s. The main purpo
 
 The `Chapter` represents a specific widget we want to show in the storybook. The class contains a name of the specific chapter and a [ChapterControls](#chapter-controls). There is, also, the `build` method, which is responsible for building the widget, represented by the `Chapter` and applying the `ChapterControls`.
 
-The `ChapterControls` class contains controls property, that UI widgets can use to build the [editing panel](#editing-panel) for the widget. The `controls` is a `Map` with the name of the control as a key, and a `ChapterControl` class as a value.
+The `ChapterControls` is an abstract class that contains controls property, that UI widgets can use to build the [editing panel](#editing-panel) for the widget. The `controls` is a `Map` with the name of the control as a key, and a `ChapterControl` class as a value.
+
+There is an `addControls` abstract method, that inherited classes should define to add different controls for the specific widget in one place.
 
 The `ChapterControls` has several methods to add different `controls` to the chapter:
 
-- ***textControl()*** - adds the `ChapterControl<String>` to the controls Map.
-- ***boolControl()*** - adds the `ChapterControl<bool>` to the controls Map.
-- ***colorControl()*** - adds the `ChapterControl<Color>` to the controls Map.
-- ***numberControl()*** - adds the `ChapterControl<Number>` to the controls Map.
+- ***addTextControl()*** - adds the `ChapterControl<String>` to the controls Map.
+- ***addBoolControl()*** - adds the `ChapterControl<bool>` to the controls Map.
+- ***addColorControl()*** - adds the `ChapterControl<Color>` to the controls Map.
+- ***addNumberControl()*** - adds the `ChapterControl<Number>` to the controls Map.
+
+And the `getControlValueByName()` to get the `ChapterControl` by related name.
 
 The `ChapterControl` is deeply related to the `ChapterControls` and is used to build a single editing field for the storybook widget.
 

metrics/web/docs/features/storybook/diagrams/metrics_storybook_class_diagram.puml

@@ -13,6 +13,12 @@ package widgets/theme {
     }
 }
 
+package metrics/core/lib/src/domain/entities {
+    abstract class Enum<T> {
+        + value : T
+    }
+}
+
 package storybook {
     package state {
         class ChaptersNotifier {
@@ -28,6 +34,32 @@ package storybook {
     }
 
     package stories {
+        package buttons {
+            package chapters {
+                class InactiveButtonChapter {
+                    - _chapterControls : ChapterControls
+                    + name : String
+                    + controls : Map<String, ChapterControl>
+
+                    + build() : Widget
+                }
+            }
+            package controls {
+                class InactiveButtonChapterControls {
+                    + addControls() : void
+                }
+                class ButtonsChapterControlName {
+                    + {static} const label : ButtonsChapterControlName
+                    + {static} const  values : Set<ButtonsChapterControlName>
+                    + toString() : String
+                }
+            }
+            class ButtonsStory {
+                + name : String
+                + chapters : List<Chapter>
+            }
+        }
+
         abstract class Story {
             + name : String
             + chapters : List<Chapter>
@@ -43,10 +75,11 @@ package storybook {
         class ChapterControls {
             + controls : Map<String, ChapterControl>
 
-            + textControl(String name, String value) : String
-            + boolControl(String name, bool value) : bool
-            + colorControl(String name, Color value) : Color
-            + numberControl(String name, Number value) : Number
+            + addTextControl(String name, String value) : void
+            + addBoolControl(String name, bool value) : void
+            + addColorControl(String name, Color value) : void
+            + addNumberControl(String name, Number value) : void
+            + getControlValue(String name) : dynamic
         }
 
         class ChapterControl<T> {
@@ -91,25 +124,25 @@ package storybook {
             }
 
             class ChapterControlTextField {
-                + property : ChapterControl<String> 
+                + property : ChapterControl<String>
 
                 + build(BuildContext context) : Widget
             }
 
             class ChapterControlCheckboxField {
-                + property : ChapterControl<Bool> 
+                + property : ChapterControl<Bool>
 
                 + build(BuildContext context) : Widget
             }
 
             class ChapterControlColorField {
-                + property : ChapterControl<Color> 
+                + property : ChapterControl<Color>
 
                 + build(BuildContext context) : Widget
             }
-            
+
             class ChapterControlSliderField {
-                + property : ChapterControl<Number> 
+                + property : ChapterControl<Number>
 
                 + build(BuildContext context) : Widget
             }
@@ -124,11 +157,19 @@ Storybook -up-> Preview : creates
 InjectionContainer -up-> StoriesNotifier : creates
 InjectionContainer -up-> ChaptersNotifier : creates
 InjectionContainer -up-> ThemeNotifier : creates
-Storybook -down-> Story : uses
+Storybook -down-> ButtonsStory : uses
 Story -right-> Chapter : uses
 Chapter -right-> ChapterControls : creates
 ChapterControls -> ChapterControl : creates
 
+ButtonsStory -down-|> Story : extends
+ButtonsStory -> InactiveButtonChapter : creates
+InactiveButtonChapter -down-|> Chapter : extends
+InactiveButtonChapterControls -down-|> ChapterControls: extends
+InactiveButtonChapter -right-> InactiveButtonChapterControls : creates
+InactiveButtonChapterControls -right-> ButtonsChapterControlName : uses
+ButtonsChapterControlName -right-|> Enum : extends
+
 EditingPanel -up-> ChaptersNotifier : uses
 Sidebar -up-> StoriesNotifier : uses
 Preview -up-> ChaptersNotifier : uses

metrics/web/docs/features/storybook/diagrams/metrics_storybook_stories_class_diagram.puml

@@ -17,10 +17,11 @@ package storybook {
         class ChapterControls {
             + controls : Map<String, ChapterControl>
 
-            + textControl(String name, String value) : String
-            + boolControl(String name, bool value) : bool
-            + colorControl(String name, Color value) : Color
-            + numberControl(String name, Number value) : Number
+            + addTextControl(String name, String value) : void
+            + addBoolControl(String name, bool value) : void
+            + addColorControl(String name, Color value) : void
+            + addNumberControl(String name, Number value) : void
+            + getControlValue(String name) : dynamic
         }
 
         class ChapterControl<T> {