products_page_component_diagram.md

C4Component
  title Structural diagram for components used on Products page

  Container_Boundary(appComponents, "App components") {
    Container_Boundary(appOrganisms, "App Organisms") {
      Component(ProductsTable, "ProductsTable")
      Component(ProductNewPopup, "ProductNewPopup")
    }
    Container_Boundary(appPages, "App Pages") {
      Component(ProductsPage, "ProductsPage")
    }
  }
    
  Container_Boundary(uiKit, "UI Kit") {

    Container_Boundary(uiKitAtoms, "UI Kit Atoms") {
      Component(Avatar, "Avatar")
      Component(Button, "Button")
      Component(Checkbox, "Checkbox")
      Component(Heading, "Heading")
      Component(Icon, "Icon", "A set of BaseIcon + Icon{{NameOfSvg}} components")
      Component(Input, "Input")
      Component(Label, "Label")
      Component(Menu, "Menu")
    }
      
    Container_Boundary(uiKitMolecules, "UI Kit Molecules") {
      Component(Autocomplete, "Autocomplete")
      Component(NavigationBarHeader, "NavigationBarHeader")
      Component(NavigationBarMenu, "NavigationBarMenu")
      Component(Modal, "Modal")
      Component(Popover, "Popover", "Popover.Button & Popover.Panel")
      Component(Select, "Select")
      Component(Toast, "Toast")
    }
      
    Container_Boundary(uiKitOrganisms, "UI Kit Organisms") {
      Component(Form, "Form")
      Component(NavigationBar, "NavigationBar")
      Component(Table, "Table")
    }
      
    Container_Boundary(uiKitTemplates, "UI Kit Templates") {
      Component(PageLayout, "PageLayout")
    }
  }
  
  Rel(Autocomplete, Input, "")
  Rel(Autocomplete, Popover, "")
  Rel(Autocomplete, Button, "")
  Rel(Autocomplete, Icon, "")
  Rel(Input, Label, "")
  Rel(Modal, Button, "")
  Rel(Modal, Icon, "")
  Rel(Popover, Button, "")
  Rel(Select, Button, "")
  Rel(Select, Label, "")
  Rel(Select, Popover, "")
  Rel(Select, Icon, "")
  Rel(Toast, Button, "")
  Rel(Toast, Icon, "")
  
  Rel(NavigationBarHeader, Avatar, "")
  Rel(NavigationBarHeader, Popover, "")
  Rel(NavigationBarMenu, Menu, "")
  Rel(NavigationBarMenu, Button, "")
  Rel(NavigationBarMenu, Icon, "")
  Rel(NavigationBar, NavigationBarHeader, "")
  Rel(NavigationBar, NavigationBarMenu, "")
  
  Rel(Table, Checkbox, "")
  Rel(Table, Button, "")
  Rel(Table, Icon, "")
  Rel(Table, Popover, "")
  UpdateRelStyle(Table, Checkbox)
  
  Rel(PageLayout, NavigationBar, "")
  Rel(PageLayout, Heading, "")
  Rel(PageLayout, Button, "")
  
  Rel(ProductNewPopup, Form, "")
  Rel(ProductNewPopup, Checkbox, "")
  Rel(ProductNewPopup, Input, "")
  Rel(ProductNewPopup, Autocomplete, "")
  Rel(ProductNewPopup, Select, "")
  Rel(ProductNewPopup, Button, "")
  Rel(ProductsTable, Table, "")

  Rel(ProductsPage, PageLayout, "")
  Rel(ProductsPage, ProductNewPopup, "")
  Rel(ProductsPage, ProductsTable, "")
  Rel(ProductsPage, Toast, "")
  

Loading

This structural diagram is built on top of Mermaid + Markdown + C4 Model Diagrams. It shows the hierarchy and relations between components on the Products page in the app. Let's assume that the company already has implemented UI Kit and follows Atomic Design principles. Therefore, for making the Products page/section engineers can reuse a lot of UI representations and common logic and event handlings (e.g. for forms in the Form component), and, by this, reduce costs for time-to-market. For simplicity, the diagram hides some basic and hardly used components/design tokens like Typography or Coloring.