docs: Metrics storybook design

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

@@ -0,0 +1,35 @@
+@startuml metrics_storybook_architecture_components_diagram
+
+skinparam componentStyle rectangle
+
+component "Metrics Storybook" as MS
+
+component "Story (e.g., Buttons)" as ButtonsStory
+component "Chapter (e.g., Positive Button)" as PositiveButtonChapter
+
+component "Story (e.g., Toasts)" as ToastsStory
+component "Chapter (e.g., Positive Toast)" as PositiveToastChapter
+component "Chapter Controls" as PositiveToastChapterControls
+component "Text Control (e.g., text input)" as FirstPositiveToastChapterTextControl
+component "Bool Control (e.g., checkbox)" as SecondPositiveToastChapterBoolControl
+component "Chapter (e.g., Negative Toast)" as NegativeToastChapter
+component "Chapter Controls" as NegativeToastChapterControls
+component "Text Control (e.g., text input)" as FirstNegativeToastChapterTextControl
+component "Bool Control (e.g., checkbox)" as SecondNegativeToastChapterBoolControl
+
+MS -down-> ButtonsStory
+MS -down-> ToastsStory
+
+ButtonsStory -down-> PositiveButtonChapter
+
+ToastsStory -down-> PositiveToastChapter
+PositiveToastChapter -down-> PositiveToastChapterControls
+PositiveToastChapterControls -down-> FirstPositiveToastChapterTextControl
+PositiveToastChapterControls -down-> SecondPositiveToastChapterBoolControl
+
+ToastsStory -down-> NegativeToastChapter
+NegativeToastChapter -down-> NegativeToastChapterControls
+NegativeToastChapterControls -down-> FirstNegativeToastChapterTextControl
+NegativeToastChapterControls -down-> SecondNegativeToastChapterBoolControl
+
+@enduml

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

@@ -0,0 +1,188 @@
+@startuml metrics_storybook_class_diagram
+
+package widgets/theme {
+    class ThemeNotifier {
+        - _selectedTheme : ThemeType
+        + isDark : bool
+        + selectedTheme : ThemeType
+
+        + changeTheme(ThemeType themeType) : void
+        + toggleTheme() : void
+        + setTheme(Brightness brightness) : void
+        - _isBrightnessDark(Brightness brightness) : bool
+    }
+}
+
+package metrics/core/lib/src/domain/entities {
+    abstract class Enum<T> {
+        + value : T
+    }
+}
+
+package storybook {
+    package state {
+        class ChaptersNotifier {
+            + currentChapter : Chapter
+
+            + selectChapter(Chapter chapter) : void
+            + refreshChapter() : void
+        }
+
+        class StoriesNotifier {
+            + stories : List<Story>
+        }
+    }
+
+    package stories {
+        package buttons {
+            package chapters {
+                class InactiveButtonChapter {
+                    - _chapterControls : InactiveButtonChapterControls
+                    + name : String
+                    + controls : Map<String, ChapterControl>
+
+                    + build() : Widget
+                }
+            }
+            package controls {
+                class InactiveButtonChapterControls {
+                    - {static}  _controls : Map<String, ChapterControl>
+
+                    + controls : Map<String, ChapterControl>
+                }
+                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>
+        }
+
+        abstract class Chapter {
+            + name : String
+            + controls : ChapterControls
+
+            + build() : Widget
+        }
+
+        abstract class ChapterControls {
+            - _controls : Map<String, ChapterControl>
+            + controls : Map<String, ChapterControl>
+
+            + getControlValue(String name) : dynamic
+        }
+
+        class ChapterControl<T> {
+            + name : String
+            + value : T
+        }
+    }
+
+    package mappers {
+        class ChapterControlMapper {
+            + map(ChapterControl<T> control) : Widget
+        }
+    }
+
+    package widgets {
+        class Storybook {
+            + stories : List<Story>
+        }
+
+        class InjectionContainer {
+            + stories : List<Story>
+        }
+
+        class Sidebar {
+            + build(BuildContext context) : Widget
+        }
+
+        class Preview {
+            + build(BuildContext context) : Widget
+        }
+
+        class EditingPanel {
+            - _widgets : List<Widget>
+
+            + build(BuildContext context) : Widget
+        }
+
+        package control_fields {
+            class ChapterControlField {
+                + label : String
+                + child : Widget
+            }
+
+            class ChapterControlTextField {
+                + property : ChapterControl<String>
+
+                + build(BuildContext context) : Widget
+            }
+
+            class ChapterControlCheckboxField {
+                + property : ChapterControl<Bool>
+
+                + build(BuildContext context) : Widget
+            }
+
+            class ChapterControlColorField {
+                + property : ChapterControl<Color>
+
+                + build(BuildContext context) : Widget
+            }
+
+            class ChapterControlSliderField {
+                + property : ChapterControl<Number>
+
+                + build(BuildContext context) : Widget
+            }
+        }
+    }
+}
+
+Storybook -up-> InjectionContainer : creates and provides a list of stories
+Storybook -up-> EditingPanel : creates
+Storybook -up-> Sidebar : creates
+Storybook -up-> Preview : creates
+InjectionContainer -up-> StoriesNotifier : creates
+InjectionContainer -up-> ChaptersNotifier : creates
+InjectionContainer -up-> ThemeNotifier : creates
+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
+EditingPanel -up-> ChapterControlMapper : uses
+ChapterControlField -> ChaptersNotifier : uses
+
+ChapterControlMapper -> ChapterControlTextField : uses
+ChapterControlMapper -> ChapterControlCheckboxField : uses
+ChapterControlMapper -> ChapterControlColorField : uses
+ChapterControlMapper -> ChapterControlSliderField : uses
+
+ChapterControlTextField -down-> ChapterControlField : uses
+ChapterControlCheckboxField -down-> ChapterControlField : uses
+ChapterControlColorField -down-> ChapterControlField : uses
+ChapterControlSliderField -down-> ChapterControlField : uses
+
+@enduml

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

@@ -0,0 +1,56 @@
+@startuml metrics_storybook_sequence_diagram
+
+skinparam ParticipantPadding 20
+skinparam BoxPadding 10
+
+actor Bob
+
+box "Metrics Storybook"
+    participant UI
+    participant Storybook << (W,#ADD1B2) >>
+    participant InjectionContainer << (C,#ADD1B2) >>
+    participant StoriesNotifier << (C,#ADD1B2) >>
+    participant ChaptersNotifier << (C,#ADD1B2) >>
+    participant ThemeNotifier << (C,#ADD1B2) >>
+    participant Sidebar << (W,#ADD1B2) >>
+    participant Preview << (W,#ADD1B2) >>
+    participant "Editing Panel" as EP << (W,#ADD1B2) >>
+    participant ChapterControls << (W,#ADD1B2) >>
+end box
+
+Bob -> UI : enters the application
+UI -> Storybook : creates stories (with chapters)
+Storybook -> InjectionContainer : provides stories
+InjectionContainer -> StoriesNotifier : registers and provides stories
+InjectionContainer -> ChaptersNotifier : registers
+StoriesNotifier -> Sidebar : provides stories
+Sidebar -> UI : displays a list of stories and chapters
+UI -> Bob : shows a UI with a list of storybook widgets
+
+alt Bob clicks on the chapter (widget) in the Sidebar:
+    Bob -> UI : clicks on the menu item in the sidebar
+    UI -> ChaptersNotifier : selects a chapter
+    ChaptersNotifier -> Preview : provides a chapter
+    ChaptersNotifier -> EP : provides a chapter
+    EP -> ChapterControls : gets a chapter's controls
+    Preview -> UI : displays a selected chapter
+    EP -> UI : displays list of controls to change a chapter's appearance
+    UI -> Bob : shows a UI with the selected widget\n and a list of controls to change a chapter's appearance
+end
+
+alt Bob changes a chapter's appearance using control:
+    Bob -> EP : changes a chapter's control value
+    EP -> ChaptersNotifier : refreshes a chapter
+    ChaptersNotifier -> Preview : notifies about changing chapter's appearance
+    Preview -> UI : displays changed chapter
+    UI -> Bob : shows a UI with the changed widget
+end
+
+alt Bob clicks the toggle theme button:
+    Bob -> UI : clicks the toggle theme button
+    UI -> ThemeNotifier : toggle theme
+    ThemeNotifier -> UI : notifies about theme changes
+    UI -> Bob : shows UI in the toggled theme
+end
+
+@enduml

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

@@ -0,0 +1,35 @@
+@startuml metrics_storybook_class_diagram
+
+package storybook {
+    package stories {
+        abstract class Story {
+            + name : String
+            + chapters : List<Chapter>
+        }
+
+        abstract class Chapter {
+            + name : String
+            + controls : ChapterControls
+
+            + build() : Widget
+        }
+
+        abstract class ChapterControls {
+            - _controls : Map<String, ChapterControl>
+            + controls : Map<String, ChapterControl>
+
+            + getControlValue(String name) : dynamic
+        }
+
+        class ChapterControl<T> {
+            + name : String
+            + value : T
+        }
+    }
+}
+
+Story -right-> Chapter : uses
+Chapter -right-> ChapterControls : creates
+ChapterControls -> ChapterControl : creates
+
+@enduml

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

@@ -0,0 +1,70 @@
+@startsalt metrics_storybook_user_interface_diagram
+{#
+  {-
+    Metrics Storybook
+    {!
+      {T
+        +
+        +Metrics Logo <&image>
+        +
+        + Buttons
+        ++ <color:green>Inactive Button
+        ++ Neutral Button
+        ++ Positive Button
+        + Toasts
+        ++ Negative Graph Indicator
+        ++ Positive Graph Indicator
+        + Graph Indicators
+        ++ Inactive Graph Indicator
+        ++ Neutral Graph Indicator
+        ++ Positive Graph Indicator
+        +
+        +
+        +
+        +
+        +
+        <color:red>Sidebar 
+      } | {-
+         <color:red>Toggle theme button <&sun>
+        {!
+          {
+            .
+            .
+            .
+            .
+            [Inactive button]
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            <color:red>Preview field
+          } | {
+            .
+            .
+            .
+            .
+            Label
+            "Inactive Button   "
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            .
+            <color:red>Editing panel
+          }
+        }
+      }
+    }
+  }
+}
+@endsalt