Merge pull request #35 from TimerTiTi/34-graph-designsystem

close #34 graph designsystem
TimerTiTi · Jan 28, 2024 · c86231a · c86231a
2 parents e6c9f13 + a1253de
commit c86231a
Show file tree

Hide file tree

Showing 18 changed files with 979 additions and 86 deletions.
diff --git a/...signsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsAnimatedCounter.kt b/...signsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsAnimatedCounter.kt
@@ -43,12 +43,11 @@ internal fun TdsAnimatedCounter(
         for (i in countString.indices) {
             val oldChar = oldCountString.getOrNull(i)
             val newChar = countString[i]
-            val char =
-                if (oldChar == newChar) {
-                    oldCountString[i]
-                } else {
-                    countString[i]
-                }
+            val char = if (oldChar == newChar) {
+                oldCountString[i]
+            } else {
+                countString[i]
+            }
 
             AnimatedContent(
                 modifier = Modifier.weight(1f),

diff --git a/core/designsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsButton.kt b/core/designsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsButton.kt
@@ -40,15 +40,13 @@ fun TdsTextButton(
     enabled: Boolean = true,
 ) {
     Button(
-        modifier =
-        modifier
+        modifier = modifier
             .widthIn(min = 36.dp)
             .heightIn(min = 36.dp),
         onClick = onClick,
         enabled = enabled,
         shape = RectangleShape,
-        colors =
-        ButtonDefaults.buttonColors(
+        colors = ButtonDefaults.buttonColors(
             containerColor = Color.Transparent,
             disabledContainerColor = Color.Transparent,
         ),
@@ -74,15 +72,13 @@ fun TdsTextButton(
     enabled: Boolean = true,
 ) {
     Button(
-        modifier =
-        modifier
+        modifier = modifier
             .widthIn(min = 36.dp)
             .heightIn(min = 36.dp),
         onClick = onClick,
         enabled = enabled,
         shape = RectangleShape,
-        colors =
-        ButtonDefaults.buttonColors(
+        colors = ButtonDefaults.buttonColors(
             containerColor = Color.Transparent,
             disabledContainerColor = Color.Transparent,
         ),
@@ -107,17 +103,15 @@ fun TdsIconButton(
     content: @Composable () -> Unit,
 ) {
     Box(
-        modifier =
-        modifier
+        modifier = modifier
             .size(size)
             .clip(CircleShape)
             .clickable(
                 onClick = onClick,
                 enabled = enabled,
                 role = Role.Button,
                 interactionSource = interactionSource,
-                indication =
-                rememberRipple(
+                indication = rememberRipple(
                     bounded = false,
                     radius = size / 2,
                 ),

diff --git a/.../src/main/kotlin/com/titi/app/core/designsystem/component/TdsCircularProgressIndicator.kt b/.../src/main/kotlin/com/titi/app/core/designsystem/component/TdsCircularProgressIndicator.kt
@@ -0,0 +1,80 @@
+package com.titi.app.core.designsystem.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
+import com.titi.app.core.designsystem.extension.times
+import com.titi.app.core.designsystem.theme.TdsColor
+import com.titi.app.core.designsystem.theme.TdsTextStyle
+import com.titi.app.core.designsystem.theme.TiTiTheme
+
+@Composable
+fun TdsCircularProgressIndicator(
+    modifier: Modifier = Modifier,
+    sumTime: Int,
+    maxTime: Int,
+    color: Color,
+) {
+    BoxWithConstraints(
+        modifier = modifier,
+        contentAlignment = Alignment.Center,
+    ) {
+        val density = LocalDensity.current
+        val minSize = min(maxWidth, maxHeight)
+        val strokeWidth = minSize * 0.2
+        val insideSize = minSize * 0.4
+        val fontSize = with(density) { (insideSize / 2).toSp() }
+
+        CircularProgressIndicator(
+            modifier = Modifier.fillMaxSize(),
+            progress = sumTime / maxTime.toFloat(),
+            color = color,
+            trackColor = color.copy(alpha = 0.5f),
+            strokeCap = StrokeCap.Round,
+            strokeWidth = strokeWidth,
+        )
+
+        TdsText(
+            modifier = Modifier
+                .width(insideSize)
+                .wrapContentHeight(),
+            text = sumTime.toString(),
+            textStyle = TdsTextStyle.SEMI_BOLD_TEXT_STYLE,
+            fontSize = fontSize,
+            color = TdsColor.BACKGROUND,
+            textAlign = TextAlign.Center,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun TdsCircularProgressIndicatorPreview() {
+    TiTiTheme {
+        TdsCircularProgressIndicator(
+            modifier = Modifier
+                .size(110.dp)
+                .background(Color.Black),
+            sumTime = 500,
+            maxTime = 1000,
+            color = TdsColor.D1.getColor(),
+        )
+    }
+}
diff --git a/core/designsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsDialog.kt b/core/designsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsDialog.kt
@@ -35,15 +35,13 @@ fun TdsDialog(
             tdsDialogInfo.onDismiss?.invoke()
             onShowDialog(false)
         },
-        properties =
-        DialogProperties(
+        properties = DialogProperties(
             dismissOnBackPress = tdsDialogInfo.cancelable,
             dismissOnClickOutside = tdsDialogInfo.cancelable,
         ),
     ) {
         Surface(
-            modifier =
-            Modifier
+            modifier = Modifier
                 .fillMaxWidth()
                 .wrapContentHeight(),
             shape = RoundedCornerShape(14.dp),
@@ -109,8 +107,7 @@ private fun TdsConfirmDialogButtons(
     onShowDialog: (Boolean) -> Unit,
 ) {
     Row(
-        modifier =
-        Modifier
+        modifier = Modifier
             .fillMaxWidth()
             .height(44.dp),
     ) {
@@ -148,8 +145,7 @@ private fun TdsAlertDialogButton(
     onShowDialog: (Boolean) -> Unit,
 ) {
     TdsTextButton(
-        modifier =
-        Modifier
+        modifier = Modifier
             .fillMaxWidth()
             .height(44.dp),
         onClick = {
@@ -168,8 +164,7 @@ private fun TdsAlertDialogButton(
 private fun TdsConfirmDialogPreview() {
     TiTiTheme {
         TdsDialog(
-            tdsDialogInfo =
-            TdsDialogInfo.Confirm(
+            tdsDialogInfo = TdsDialogInfo.Confirm(
                 title = "새로운 기록 설정",
                 message = "2023.03.10 목표시간 설정",
                 cancelable = false,
@@ -197,8 +192,7 @@ private fun TdsConfirmDialogPreview() {
 private fun TdsAlertDialogPreview() {
     TiTiTheme {
         TdsDialog(
-            tdsDialogInfo =
-            TdsDialogInfo.Alert(
+            tdsDialogInfo = TdsDialogInfo.Alert(
                 title = "새로운 기록 설정",
                 message = "2023.03.10 목표시간 설정",
                 cancelable = false,

diff --git a/core/designsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsDivider.kt b/core/designsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsDivider.kt
@@ -16,8 +16,7 @@ import com.titi.app.core.designsystem.theme.TdsColor
 @Composable
 fun RowScope.TdsDivider(thickness: Dp = 1.dp, color: TdsColor = TdsColor.DIVIDER) {
     Divider(
-        modifier =
-        Modifier
+        modifier = Modifier
             .width(thickness)
             .fillMaxHeight(),
         thickness = thickness,
@@ -28,8 +27,7 @@ fun RowScope.TdsDivider(thickness: Dp = 1.dp, color: TdsColor = TdsColor.DIVIDER
 @Composable
 fun ColumnScope.TdsDivider(thickness: Dp = 1.dp, color: TdsColor = TdsColor.DIVIDER) {
     Divider(
-        modifier =
-        Modifier
+        modifier = Modifier
             .fillMaxWidth()
             .height(thickness),
         thickness = thickness,

diff --git a/...esignsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsInputTextField.kt b/...esignsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsInputTextField.kt
@@ -36,15 +36,13 @@ fun TdsOutlinedInputTextField(
         modifier = modifier,
         value = text,
         onValueChange = onValueChange,
-        textStyle =
-        TdsTextStyle.NORMAL_TEXT_STYLE.getTextStyle(fontSize = fontSize)
+        textStyle = TdsTextStyle.NORMAL_TEXT_STYLE.getTextStyle(fontSize = fontSize)
             .copy(textAlign = TextAlign.Center),
         keyboardOptions = keyboardOptions,
         keyboardActions = keyboardActions,
     ) { innerTextField ->
         Box(
-            modifier =
-            modifier
+            modifier = modifier
                 .border(
                     width = 1.dp,
                     color = TdsColor.DIVIDER.getColor(),
@@ -75,8 +73,7 @@ fun TdsOutlinedInputTextField(
         modifier = modifier,
         value = text,
         onValueChange = onValueChange,
-        textStyle =
-        TdsTextStyle.NORMAL_TEXT_STYLE.getTextStyle(fontSize = fontSize)
+        textStyle = TdsTextStyle.NORMAL_TEXT_STYLE.getTextStyle(fontSize = fontSize)
             .copy(textAlign = TextAlign.Center),
         keyboardOptions = keyboardOptions,
         keyboardActions = keyboardActions,
@@ -105,8 +102,7 @@ fun TdsOutlinedInputTextField(
 private fun TdsInputTextFieldPreview() {
     TiTiTheme {
         TdsOutlinedInputTextField(
-            modifier =
-            Modifier
+            modifier = Modifier
                 .width(60.dp)
                 .height(40.dp),
             text = "ABC",

diff --git a/...nsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsInputTimeTextField.kt b/...nsystem/src/main/kotlin/com/titi/app/core/designsystem/component/TdsInputTimeTextField.kt
@@ -54,8 +54,7 @@ fun TdsInputTimeTextField(
         verticalAlignment = Alignment.CenterVertically,
     ) {
         TdsOutlinedInputTextField(
-            modifier =
-            Modifier
+            modifier = Modifier
                 .height(40.dp)
                 .weight(1f)
                 .focusRequester(hourFocus)
@@ -78,8 +77,7 @@ fun TdsInputTimeTextField(
                 keyboardType = KeyboardType.Decimal,
                 imeAction = ImeAction.Done,
             ),
-            keyboardActions =
-            KeyboardActions(
+            keyboardActions = KeyboardActions(
                 onDone = {
                     focusManger.moveFocus(FocusDirection.Next)
                 },
@@ -103,8 +101,7 @@ fun TdsInputTimeTextField(
         )
 
         TdsOutlinedInputTextField(
-            modifier =
-            Modifier
+            modifier = Modifier
                 .height(40.dp)
                 .weight(1f)
                 .focusRequester(minutesFocus)
@@ -125,13 +122,11 @@ fun TdsInputTimeTextField(
                 }
             },
             fontSize = 22.sp,
-            keyboardOptions =
-            KeyboardOptions(
+            keyboardOptions = KeyboardOptions(
                 keyboardType = KeyboardType.Decimal,
                 imeAction = ImeAction.Done,
             ),
-            keyboardActions =
-            KeyboardActions(
+            keyboardActions = KeyboardActions(
                 onDone = {
                     focusManger.moveFocus(FocusDirection.Next)
                 },
@@ -155,8 +150,7 @@ fun TdsInputTimeTextField(
         )
 
         TdsOutlinedInputTextField(
-            modifier =
-            Modifier
+            modifier = Modifier
                 .height(40.dp)
                 .weight(1f)
                 .focusRequester(secondsFocus)
@@ -174,13 +168,11 @@ fun TdsInputTimeTextField(
                 }
             },
             fontSize = 22.sp,
-            keyboardOptions =
-            KeyboardOptions(
+            keyboardOptions = KeyboardOptions(
                 keyboardType = KeyboardType.Decimal,
                 imeAction = ImeAction.Done,
             ),
-            keyboardActions =
-            KeyboardActions(
+            keyboardActions = KeyboardActions(
                 onDone = {
                     focusManger.clearFocus()
                 },