diff --git a/docs/api.md b/docs/api.md index 701f7d3c3..7b76fad73 100644 --- a/docs/api.md +++ b/docs/api.md @@ -4,7 +4,10 @@ title: Api sidebar_position: 5 --- -# API docs +# API documentation -> Add the link to the API docs. https://dhis2.github.io/dhis2-mobile-ui/api/index.html). -> Explain how to navigate it (Functions section in Components package). +**DHIS2 Mobile UI library** API documentation is hosted +in [Github repository](https://dhis2.github.io/dhis2-mobile-ui/api/-mobile%20-u-i/org.hisp.dhis.mobile.ui.designsystem.component/index.html). + +It is split in *types*, *functions* and *properties*. As in Compose, the components are considered +as functions, you will have all them in the *functions* section. diff --git a/docs/demo.md b/docs/demo.md index 966040eb2..eae58a0aa 100644 --- a/docs/demo.md +++ b/docs/demo.md @@ -6,5 +6,5 @@ sidebar_position: 3 # Demo application -> Give a description of the demo application (purpose, content,...) -> Add the link to the artifacts, probably in the releases page. +In the [Release page](https://github.com/dhis2/dhis2-mobile-ui/releases) there is a list of demo +applications to showcase all the components. \ No newline at end of file diff --git a/docs/design-system.md b/docs/design-system.md index 41e94a23f..2210a75f1 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -6,4 +6,5 @@ sidebar_position: 4 # Design system -> Explain the figma design system, add the link and explain how to navigate it. +**DHIS2 Mobile UI library** is based in +the [DHIS2 Mobile Design System Figma library](https://www.figma.com/file/eRk6bt0B8BJlTO9PZXirHN/DHIS2-Mobile-Design-System). diff --git a/docs/getting-started.md b/docs/getting-started.md index 6e36f3e8a..1e9dbf574 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -4,61 +4,65 @@ title: Getting started sidebar_position: 2 --- -# DHIS2 Mobile UI +# Getting started > **@dhis2/dhis2-mobile-ui** is > a [Compose Multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/) DHIS2 design system > library for [Kotlin Multiplatform](https://kotlinlang.org/docs/multiplatform.html) applications. -This library currently supports **desktop** and **Android** targets, in the next versions it will -support **iOS**. +## DHIS2 UI Library Principles -## 1. Getting started +**DHIS2 Mobile UI library** is an open source design system for building DHIS2 Android and more +mobile targets in the future. The system is based on a foundation of principles, patterns, and +guidelines for designing user-friendly apps. A reusable component library provides the building +blocks to develop DHIS2 apps with consistent user experience. -### DHIS2 UI Library Principles +The UI library more than just a collection of components, there also are principles, such as +predefined colors, layout, typography, icons and patterns. You can find all of these in +the [DHIS2 UI documentation](https://ui.dhis2.nu/). -The UI library more than just a collection of components, there also are principles, such as predefined colors, layout, typography, icons and patterns. You can find all of these in the [DHIS2 UI documentation](https://ui.dhis2.nu/). +## 1. Installation -### Live demos documentation +### Android -//TODO link to github releases artifact maybe? +In the module **build.gradle.kts**: -### Installation +```kotlin +dependencies { + implementation("org.hisp.dhis.mobile:designsystem-android:0.3.0") +} +``` + +### Desktop In the module **build.gradle.kts**: ```kotlin dependencies { - implementation("org.hisp.dhis.mobile:designsystem:0.2") + implementation("org.hisp.dhis.mobile:designsystem-desktop:0.3.0") } ``` ## 2. Usage -```kotlin +```kotlin setContent { - DHIS2Theme { - // A surface container using the 'background' color from the theme - Surface( - modifier = Modifier.fillMaxSize(), - color = SurfaceColor.Container - ) { - Components() + DHIS2Theme { + Surface( + modifier = Modifier.fillMaxSize(), + color = SurfaceColor.Container + ) { + Button( + text = provideStringResource("show_more"), + icon = { + Icon( + painter = provideDHIS2Icon(resourceName = "dhis2_blood_a_n_positive"), + contentDescription = "" + ) + }, + style = ButtonStyle.KEYBOARDKEY + ) {} + } } - } } ``` - -### Add a Button -```kotlin -Button( - text = provideStringResource("show_more"), - icon = { - Icon( - painter = provideDHIS2Icon(resourceName = "dhis2_blood_a_n_positive"), - contentDescription = "" - ) - }, - style = ButtonStyle.KEYBOARDKEY -) {} -``` \ No newline at end of file diff --git a/docs/overview.md b/docs/overview.md index 5d0e3b397..d786e3049 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -4,15 +4,29 @@ title: Overview sidebar_position: 1 --- -# DHIS2 Mobile UI +# Overview -> Overview -> Give a general overview of the library. +**DHIS2 Mobile UI library** is an open source design system, it's based on [Compose multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/), is a +modern UI toolkit that enables building user interfaces across multiple platforms, including Android +and desktop, using a single codebase. This library simplifies the development process by allowing +developers to write Compose UI code once and target both Android and desktop platforms with minimal +changes. -> Targets: -> - Android -> - Desktop +## Targets -> For each target, explain the kind of projects it can be used for. The requirements (Kotlin, compose,...). -> For example, in Android the library can be used in any project that has Kotlin and Compose (it is not required to be multiplatform). -> In Desktop, the project must be multiplatform, or at least to be a Kotlin project with the Desktop target. +This library currently supports **desktop** and **Android** targets, in the next versions it will +support **iOS** and **web**. + +### Android + +**DHIS2 Mobile UI library** provides native support for Android. When targeting Android, you can +leverage the full power of Jetpack Compose, Google's modern UI toolkit for Android. The Compose +Multiplatform library seamlessly integrates with Android Studio and the Android build system. + +### Desktop + +**DHIS2 Mobile UI library** also supports desktop applications. When targeting desktop, you use a +similar set of Compose APIs, but with desktop-specific configuration. + +This library is part of Compose Multiplatform, which means it is designed to work exclusively with +Kotlin Multiplatform (KMP) projects.