AppComposition.drawio.svg

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="900px" height="402px" viewBox="-0.5 -0.5 900 402" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2023-01-19T10:40:47.058Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36&quot; version=&quot;20.8.5&quot; etag=&quot;bqxb0WKhRh9QA3rIX8Ts&quot; type=&quot;google&quot;&gt;&lt;diagram id=&quot;xLuj1pa2tr4lBsHyKv-3&quot;&gt;5VpLc+MoEP41rtk5jMuS/MoxcZLZw6Zqq3zYnSORiMQECS1Cfsyv30YCPfFGHsuW13OxRLtp4OPrpkGMnFW4+8pRHLwwD9ORPfF2I+dxZNuWYy/gISX7XLK4s3KBz4mnlErBmvzASjhR0pR4OKkpCsaoIHFd6LIowq6oyRDnbFtXe2O03mqMfNwSrF1E29K/iCeCXLqcTUr575j4gW7Zmqh/QqSVlSAJkMe2FZHzNHJWnDGRv4W7FaYSPI1LXu/5wL9FxziORJcKdl5hg2iqxqb6JfZ6sJylkYel/mTkPGwDIvA6Rq78dwvTC7JAhBRKFrwqc5gLvDvYJasYKDAEsxALvgcVVWGhoFHcsKaqvC2RnmsiBBWUnbkSIjW7fmG6BABeFAZmPBwDHnMKLTy8wosvX14QibQQzBXyQpFryRfZQ5aIjGIgnTARYPkMmZdSILA9+Q29I3i8PD8ln80GgMMCWszqgRyFEvH8V1rkboATwZGQDZjqCxZ/oXiTeaDLwphFMA/Q9Er+FyCRuQSWM8RxIqcIjML4Jhi5gXYF6Cce+2N4RmjziviBrqJUBJl3Iu7lDWDhjluEAmqIOmtgAOwdrxiFQTiPEXQRhG+E0oYIUeJHUKT4TVqQNCPglfdKHBLPk40YSVqncQ88XTZ4Om/z1FkaeNoHTac9u20D2B7QKUKegsc2wGMtDPDc9QDP7GMvvs+5+pJ5Ynd3TjBAgIR0CRTHOckBZWChAKylt5V+oH2GMl9GDKmaAMxpXPrG51t1jk7TPzdM/6yH6Z9fvXcULB/COxZXD890OSA8y4+DxzNGIs0WzfsjY0ixgkevSayXzUjnBZ2iSwJDkhmF7oNUolh8kulEgvZ5mvBPyrJcZZ9ZFYJEflKKbzXqdHIrU9RZ9MCbu2N483B23tQp0WJRgyOM+ygiP5AgWfIXogjyvjBLB2+dNJ2CzblIozcyVxyMm0u5c8lgbFnHeNWqB68aj292x9JpJk1Mn/Yxk+2jBhPUP0V2FwCAQHiWNeSydG+fP1wlSM2YeVmQpi1AsOfjtSoyLgLmswjRp1LacKZS5w/GYgXUd8iT9uqwEbZwrA4jIMP3f1cL36Sx8UwXH3fKeF7a1/xWdrCGdcJS7mqRSjkF4j7Wi0vnKeGYwrK9qZs/Cd/ZL4Cv9rRBAJ4PCnAF0281SH8aYH2aXQV4OSC+fe9we4iYC7seMYu1uBIxbccQMYtzxpMQaW9q1wH0XW4HqofCQ4PkNEAynP3bprP/Pk6NrLtfwCtnw3ml3d7qFBxMBJMJ/JXRzzb56LnoV8zgzdBv2qafPSD92mvAgPha58FXk7NPgLOq95xn50haIWZELRjK8p9SUHElq+FKy1l1sj7Uny4m/6lvKXsH9OEl73FJjWLo3djiDMqWI3NgvCOiqAbvlVpQKivJwqkMGzCvM3z2LFaQVBB6fQmM6SzxfCtI+7NnAc/JpwhnAMexLwmO6aNg4yCxQAtQeM/uPZgOERso3sjZYCv1NuQ+1swwOU4fk/M/2LBNu27YCuROQqTDV8jRVF4OeiP+EdcXNMNxQvP1tG7hgPZ3nHTWFUkntS1+lV7W1apWUheptgESeJN9+/LwZpRf/7tZ17wkE6FY3j7ME6fyDqfz9C8=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="0" y="40" width="610" height="360" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="10" y="60" width="380" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 378px; height: 1px; padding-top: 90px; margin-left: 12px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Main</b><br />- host for other modules (aka MFEs)<br />- container &amp; orchestrator<br />- top-level components, that are present on each page (e.g. navbar)<br />- auth guard, etc.</div></div></div></foreignObject><text x="12" y="94" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Main...</text></switch></g><rect x="30" y="160" width="170" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="30" y="160" width="160" height="50" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 185px; margin-left: 32px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Auth Module</b><br />- separate app, dedicated to auth (e.g. login, signup, etc.)</div></div></div></foreignObject><text x="32" y="189" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Auth Module...</text></switch></g><rect x="220" y="160" width="170" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="410" y="160" width="170" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="220" y="160" width="160" height="70" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 195px; margin-left: 222px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Feature A Module</b><br /> - another separate app, dedicated to some feature, let's say "My settings"</div></div></div></foreignObject><text x="222" y="199" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Feature A Module...</text></switch></g><rect x="410" y="160" width="160" height="70" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 195px; margin-left: 412px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Feature B Module</b><br /> - another separate app, let's say dedicated to "My organization management"</div></div></div></foreignObject><text x="412" y="199" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Feature B Module...</text></switch></g><rect x="30" y="260" width="170" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="30" y="260" width="160" height="40" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 280px; margin-left: 32px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Feature C Module</b><br /> - ...</div></div></div></foreignObject><text x="32" y="284" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Feature C Module...</text></switch></g><rect x="220" y="260" width="170" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 305px; margin-left: 221px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">...</div></div></div></foreignObject><text x="305" y="309" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">...</text></switch></g><rect x="410" y="260" width="170" height="90" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 305px; margin-left: 411px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">...</div></div></div></foreignObject><text x="495" y="309" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">...</text></switch></g><path d="M 660 65 L 620 65 L 620 205 L 586.37 205" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 581.12 205 L 588.12 201.5 L 586.37 205 L 588.12 208.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 660 65 L 620 65 L 620 305 L 586.37 305" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 581.12 305 L 588.12 301.5 L 586.37 305 L 588.12 308.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 660 125 L 300 125 L 300 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 300 158.88 L 296.5 151.88 L 300 153.63 L 303.5 151.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="650" y="0" width="230" height="280" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="660" y="40" width="210" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 65px; margin-left: 661px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shared components</div></div></div></foreignObject><text x="765" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shared components</text></switch></g><path d="M 660 125 L 110 125 L 110 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 110 158.88 L 106.5 151.88 L 110 153.63 L 113.5 151.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="660" y="100" width="210" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 125px; margin-left: 661px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shared store</div></div></div></foreignObject><text x="765" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shared store</text></switch></g><path d="M 660 185 L 635 185 L 635 20 L 305 20 L 305 33.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 305 38.88 L 301.5 31.88 L 305 33.63 L 308.5 31.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 660 185 L 640 185 L 640 370 L 115 370 L 115 356.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 115 351.12 L 118.5 358.12 L 115 356.37 L 111.5 358.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 870 185 L 890 185 L 890 65 L 876.37 65" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 871.12 65 L 878.12 61.5 L 876.37 65 L 878.12 68.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="660" y="160" width="210" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 185px; margin-left: 661px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shared utils</div></div></div></foreignObject><text x="765" y="189" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shared utils</text></switch></g><rect x="660" y="220" width="210" height="50" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 245px; margin-left: 661px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shared ...</div></div></div></foreignObject><text x="765" y="249" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shared ...</text></switch></g><rect x="660" y="0" width="150" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 148px; height: 1px; padding-top: 15px; margin-left: 662px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Shared package</b></div></div></div></foreignObject><text x="662" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Shared package</text></switch></g><rect x="650" y="300" width="230" height="100" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="650" y="300" width="230" height="100" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 228px; height: 1px; padding-top: 350px; margin-left: 652px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>@config</b><br />- shared eslint config<br />- shared jest config<br />- shared tsconfig<br />- shared webpack config<br />- shared config for whatever dev tool</div></div></div></foreignObject><text x="652" y="354" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">@config...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>