{"id":13611158,"url":"https://github.com/popovanton0/Blueprint","last_synced_at":"2025-04-13T01:34:57.831Z","repository":{"id":192286566,"uuid":"686784095","full_name":"popovanton0/Blueprint","owner":"popovanton0","description":"📐 Visualize the dimensions of your composables on a blueprint!","archived":false,"fork":false,"pushed_at":"2024-05-22T18:52:40.000Z","size":21672,"stargazers_count":132,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-01T19:56:50.024Z","etag":null,"topics":["android","compose-ui","debugging-tools","design-system","jetpack-compose","ui"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/popovanton0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-03T23:25:44.000Z","updated_at":"2024-07-17T04:41:25.000Z","dependencies_parsed_at":"2023-11-09T17:25:43.328Z","dependency_job_id":"49d33a37-06b2-41cd-8b8f-072eb5f8c084","html_url":"https://github.com/popovanton0/Blueprint","commit_stats":null,"previous_names":["popovanton0/blueprint"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2FBlueprint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2FBlueprint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2FBlueprint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2FBlueprint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/popovanton0","download_url":"https://codeload.github.com/popovanton0/Blueprint/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223558589,"owners_count":17165150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose-ui","debugging-tools","design-system","jetpack-compose","ui"],"created_at":"2024-08-01T19:01:52.350Z","updated_at":"2024-11-07T17:31:32.376Z","avatar_url":"https://github.com/popovanton0.png","language":"Kotlin","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"readme":"# 📐 Blueprint\n\n[![Release](https://jitpack.io/v/popovanton0/blueprint.svg)](https://jitpack.io/#popovanton0/blueprint)\n[![Introductory Medium Article](https://img.shields.io/badge/medium-article-grey?labelColor=black\u0026logo=medium\u0026logoColor=white\u0026link=https://proandroiddev.com/blueprint-visualizing-paddings-in-jetpack-compose-eb62413c6d74)](https://proandroiddev.com/blueprint-visualizing-paddings-in-jetpack-compose-eb62413c6d74)\n![License](https://img.shields.io/github/license/popovanton0/Blueprint?color=blue)\n\nVisualize the dimensions of your composables on a blueprint\n\n![Blueprint Usage Example](images/navbar-light.png#gh-light-mode-only)\n![Blueprint Usage Example](images/navbar-dark.png#gh-dark-mode-only)\n\n[Introductory Medium Article](https://proandroiddev.com/blueprint-visualizing-paddings-in-jetpack-compose-eb62413c6d74)\n\n## The Problem\n\nHave you ever desired to see, what *exactly* is that padding's value while looking at the composable\npreview window? Especially when you are developing a button with 5 color styles, 3 sizes, and 2\noptional icons; and each combination of these parameters has different paddings?\n\nCombinatorial explosion of UI components in design systems requires having a lot of context about\npaddings, dp's, sizes, corner radiuses, and other dimensional information in your head at the\nsame time.\n\n![Many combinations of buttons](images/combinations-light.png#gh-light-mode-only)\n![Many combinations of buttons](images/combinations-dark.png#gh-dark-mode-only)\n\nIn addition, code to produce those combinations can get tricky to analyze. So, verification also\nbecomes hard: you make screenshots, move them to Figma, overlay them on top, and try to see the\ndifference. Tedious 😩!\n\n## The Solution\n\nThe Blueprint library provides a way to visualize dimensional information in your UI using a simple\nDSL-based definition:\n\n1. Just wrap your target UI in a `Blueprint` composable\n2. Mark children\n   with [`Modifier.blueprintId(id: String)`](https://github.com/popovanton0/Blueprint/blob/main/blueprint/src/main/java/com/popovanton0/blueprint/BlueprintId.kt)\n   modifier\n3. Write the blueprint definition\n\n```kotlin\nBlueprint(\n    blueprintBuilder = {\n        widths {\n            group {\n                \"item0\".right lineTo \"item1\".left\n                \"item0\" lineTo \"item0\"\n                \"item2\" lineTo \"item3\"\n            }\n        }\n        heights {\n            group { \"item0Icon\" lineTo \"item0Text\" }\n            group { \"item0\" lineTo \"item0\" }\n            group(End) { \"item3Icon\".bottom lineTo \"item3Text\".top }\n        }\n    }\n) {\n    val items = remember { listOf(\"Songs\", \"Artists\", \"Playlists\", \"Settings\") }\n    NavigationBar {\n        items.forEachIndexed { index, item -\u003e\n            NavigationBarItem(\n                modifier = Modifier.blueprintId(\"item$index\"),\n                icon = { Icon(Modifier.blueprintId(\"item${index}Icon\"), TODO()) },\n                label = { Text(Modifier.blueprintId(\"item${index}Text\"), TODO()) },\n                selected = index == 0,\n                onClick = { TODO() }\n            )\n        }\n    }\n}\n```\n\n### Preview\n\n![Blueprint Usage Example](images/navbar-light.png#gh-light-mode-only)\n![Blueprint Usage Example](images/navbar-dark.png#gh-dark-mode-only)\n\n### And another example:\n\n![Blueprint Usage Example](images/button-light.png#gh-light-mode-only)\n![Blueprint Usage Example](images/button-dark.png#gh-dark-mode-only)\n\n### Correct arrow padding rendering animation\n\nhttps://github.com/popovanton0/Blueprint/assets/15000556/7a90b534-3c7e-437a-8e08-1fdd4329c752\n\n\u003cdetails\u003e\n\u003csummary\u003eDebug\u003c/summary\u003e\n\nhttps://github.com/popovanton0/Blueprint/assets/15000556/535a016f-0ca9-41d2-8e52-2ed7b36fbdc0\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMore examples\u003c/summary\u003e\n\u003cbr\u003e\nThese are snapshots from snapshot testing:\n\n|                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                            |\n|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| ![almost_none_space_to_draw](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_almost_none_space_to_draw.png)                   | ![no_blueprint_if_globally_disabled](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_no_blueprint_if_globally_disabled.png)                                                                                                                                                                                         |\n| ![arrow_customization 0](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_arrow_customization[0.0].png)                        | ![not_enough_space_to_draw](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_not_enough_space_to_draw.png)                                                                                                                                                                                                           |\n| ![arrow_customization 15](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_arrow_customization[15.0].png)                      | ![padding_not_applied](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_padding_not_applied.png)                                                                                                                                                                                                                     |\n| ![arrow_customization 45](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_arrow_customization[45.0].png)                      | ![reacts_to_blueprint_builder_update_(with_green)](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_reacts_to_blueprint_builder_update_(with_green).png)                                                                                                                                                             |\n| ![arrow_customization 90](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_arrow_customization[90.0].png)                      | ![reacts_to_blueprint_builder_update_(without_green)](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_reacts_to_blueprint_builder_update_(without_green).png)                                                                                                                                                       |\n| ![basicTest](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_basicTest.png)                                                   | ![size_labels](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_size_labels.png)                                                                                                                                                                                                                                     |\n| ![correct_line_widths_and_alignments](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_correct_line_widths_and_alignments.png) | ![when_blueprint_is_disabled_it_is_not_shown](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_when_blueprint_is_disabled_it_is_not_shown.png)                                                                                                                                                                       |\n| ![customFontSizeAndColor](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_customFontSizeAndColor.png)                         | ![when_specifying_blueprint_ids_that_are_not_referenced_in_the_composable_no_dimensions_are_shown](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_when_specifying_blueprint_ids_that_are_not_referenced_in_the_composable_no_dimensions_are_shown.png)                                                             |\n| ![emptyBlueprint](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_emptyBlueprint.png)                                         | ![when_specifying_blueprint_ids_that_are_then_removed_from_the_composition_dimensions_are_shown_and_then_hidden_(with_green)](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_when_specifying_blueprint_ids_that_are_then_removed_from_the_composition_dimensions_are_shown_and_then_hidden_(with_green).png)       |\n| ![fractional_dp_values_rendering](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_fractional_dp_values_rendering.png)         | ![when_specifying_blueprint_ids_that_are_then_removed_from_the_composition_dimensions_are_shown_and_then_hidden_(without_green)](/blueprint/src/test/snapshots/images/com.popovanton0.blueprint_BlueprintScreenshotTest_when_specifying_blueprint_ids_that_are_then_removed_from_the_composition_dimensions_are_shown_and_then_hidden_(without_green).png) |\n\n\u003c/details\u003e\n\n## Features\n\nYou can customize\n\n1. Line and border strokes (width and color)\n2. Font size and color\n3. Arrow style (length, angle, round or square cap)\n4. Decimal precision of the dimensional values\n\nOf course, Blueprint works in Android Studio's Preview✨!\n\nAlso, you can disable all the overhead of this library in your release builds by either:\n\n1. Disabling blueprint rendering\n   using [`blueprintEnabled`](https://github.com/popovanton0/Blueprint/blob/main/blueprint/src/main/java/com/popovanton0/blueprint/Blueprint.kt)\n   property.\n2. Using the `no-op` version of the library:\n    ```kotlin\n    dependencies {\n        debugImplementation(\"com.github.popovanton0.blueprint:blueprint:1.0.0-alpha05\")\n        releaseImplementation(\"com.github.popovanton0.blueprint:blueprint-no-op:1.0.0-alpha05\")\n    }\n   ```\n\n## Getting Started\n\n[![Release](https://jitpack.io/v/popovanton0/blueprint.svg)](https://jitpack.io/#popovanton0/blueprint)\n\n\u003cdetails\u003e\n\u003csummary\u003eGroovy\u003c/summary\u003e\n\nAdd the following code to your project's *root* `build.gradle` file:\n\n```groovy\nrepositories {\n    maven { url \"https://jitpack.io\" }\n}\n```\n\nNext, add the dependency below to your _module_'s `build.gradle` file:\n\n```gradle\ndependencies {\n    implementation \"com.github.popovanton0.blueprint:blueprint:1.0.0-alpha05\"\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003eKotlin\u003c/summary\u003e\n\nAdd the following code to your project's *root* `settings.gradle.kts` file:\n\n```kotlin\ndependencyResolutionManagement {\n    // ...\n    repositories {\n        // ...\n        maven { url = uri(\"https://jitpack.io\") }\n    }\n}\n```\n\nNext, add the dependency below to your _module_'s `build.gradle.kts` file:\n\n```kotlin\ndependencies {\n    implementation(\"com.github.popovanton0.blueprint:blueprint:1.0.0-alpha05\")\n}\n```\n\nOr using Gradle Version Catalog:\n\n```toml\n[versions]\nblueprint = \"1.0.0-alpha05\"\n\n[libraries]\nblueprint = { module = \"com.github.popovanton0.blueprint:blueprint\", version.ref = \"blueprint\" }\n```\n\n\u003c/details\u003e\n\n\u003e [!WARNING]\n\u003e Do not use this dependency notation: `com.github.popovanton0:blueprint:1.0.0-alpha05`.\n\u003e It doesn't work!\n\n### Licence\n\n```\nCopyright 2023 Anton Popov\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpopovanton0%2FBlueprint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpopovanton0%2FBlueprint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpopovanton0%2FBlueprint/lists"}