[Feat/#15] selector components

app/src/main/java/org/memento/domain/type/SelectorType.kt

@@ -0,0 +1,76 @@
+package org.memento.domain.type
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.memento.ui.theme.darkModeColors
+import org.memento.ui.theme.defaultMementoTypography
+
+enum class SelectorType(
+    val width: Dp,
+    val height: Dp,
+    val paddingHorizontal: Dp = 0.dp,
+    val paddingVertical: Dp = 0.dp,
+    val cornerRadius: Dp,
+    val clickedBackgroundColor: Color,
+    val unClickedBackgroundColor: Color,
+    val textColor: Color,
+    val textStyle: TextStyle,
+) {
+    TIMESELECTOR(
+        width = 94.dp,
+        height = 36.dp,
+        paddingHorizontal = 12.dp,
+        paddingVertical = 8.dp,
+        cornerRadius = 2.dp,
+        clickedBackgroundColor = darkModeColors.gray07,
+        unClickedBackgroundColor = darkModeColors.gray09,
+        textColor = darkModeColors.gray02,
+        textStyle = defaultMementoTypography.body_r_14,
+    ),
+    DATESELECTOR(
+        width = 124.dp,
+        height = 36.dp,
+        paddingHorizontal = 22.dp,
+        paddingVertical = 8.dp,
+        cornerRadius = 2.dp,
+        clickedBackgroundColor = darkModeColors.gray07,
+        unClickedBackgroundColor = darkModeColors.gray09,
+        textColor = darkModeColors.gray02,
+        textStyle = defaultMementoTypography.body_r_14,
+    ),
+    TAG(
+        width = 200.dp,
+        height = 36.dp,
+        paddingHorizontal = 67.dp,
+        paddingVertical = 8.dp,
+        cornerRadius = 2.dp,
+        clickedBackgroundColor = darkModeColors.gray07,
+        unClickedBackgroundColor = darkModeColors.gray09,
+        textColor = darkModeColors.gray02,
+        textStyle = defaultMementoTypography.body_r_14,
+    ),
+    DEADLINE(
+        width = 200.dp,
+        height = 36.dp,
+        paddingHorizontal = 70.dp,
+        paddingVertical = 8.dp,
+        cornerRadius = 2.dp,
+        clickedBackgroundColor = darkModeColors.gray07,
+        unClickedBackgroundColor = darkModeColors.gray09,
+        textColor = darkModeColors.gray02,
+        textStyle = defaultMementoTypography.body_r_14,
+    ),
+    BASIC(
+        width = 200.dp,
+        height = 36.dp,
+        paddingHorizontal = 81.dp,
+        paddingVertical = 8.dp,
+        cornerRadius = 2.dp,
+        clickedBackgroundColor = darkModeColors.gray07,
+        unClickedBackgroundColor = darkModeColors.gray09,
+        textColor = darkModeColors.gray02,
+        textStyle = defaultMementoTypography.body_r_14,
+    ),
+}

app/src/main/java/org/memento/presentation/MementoChipSelector.kt

@@ -0,0 +1,182 @@
+package org.memento.presentation
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+import org.memento.R
+import org.memento.domain.type.SelectorType
+import org.memento.presentation.util.changeHexToColor
+import org.memento.presentation.util.noRippleClickable
+
+@Composable
+fun MementoChipSelector(
+    selectorType: SelectorType,
+    isClicked: Boolean = false,
+    onClickedChange: (Boolean) -> Unit = {},
+    content: String,
+    tagColor: String?,
+    modifier: Modifier = Modifier,
+) {
+    var clicked by remember { mutableStateOf(isClicked) }
+
+    Box(
+        modifier =
+            Modifier
+                .then(modifier)
+                .clip(RoundedCornerShape(selectorType.cornerRadius))
+                .background(color = if (clicked) selectorType.clickedBackgroundColor else selectorType.unClickedBackgroundColor)
+                .noRippleClickable {
+                    clicked = !clicked
+                    onClickedChange(clicked)
+                },
+        Alignment.Center,
+    ) {
+        when (selectorType) {
+            SelectorType.TIMESELECTOR -> {
+                Text(
+                    text = stringResource(id = R.string.time_example),
+                    style = selectorType.textStyle,
+                    color = Color.Transparent,
+                    modifier =
+                        Modifier.padding(
+                            horizontal = selectorType.paddingHorizontal,
+                            vertical = selectorType.paddingVertical,
+                        ),
+                )
+                Text(
+                    text = content,
+                    style = selectorType.textStyle,
+                    color = selectorType.textColor,
+                )
+            }
+
+            SelectorType.DATESELECTOR -> {
+                Text(
+                    text = stringResource(id = R.string.date_example),
+                    style = selectorType.textStyle,
+                    color = Color.Transparent,
+                    modifier =
+                        Modifier
+                            .padding(
+                                horizontal = selectorType.paddingHorizontal,
+                                vertical = selectorType.paddingVertical,
+                            ),
+                )
+                Text(
+                    text = content,
+                    style = selectorType.textStyle,
+                    color = selectorType.textColor,
+                )
+            }
+
+            SelectorType.TAG -> {
+                Box(
+                    modifier =
+                        Modifier
+                            .align(Alignment.Center),
+                ) {
+                    Row(
+                        modifier =
+                            Modifier
+                                .padding(
+                                    horizontal = selectorType.paddingHorizontal,
+                                    vertical = selectorType.paddingVertical,
+                                ),
+                    ) {
+                        Icon(
+                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_tag),
+                            contentDescription = null,
+                            tint = Color.Transparent,
+                            modifier = Modifier.padding(end = 5.dp),
+                        )
+                        Text(
+                            text = stringResource(id = R.string.Today),
+                            style = selectorType.textStyle,
+                            color = Color.Transparent,
+                        )
+                    }
+                    Row(
+                        modifier =
+                            Modifier
+                                .align(Alignment.Center),
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        tagColor?.let { changeHexToColor(hex = it) }?.let {
+                            Icon(
+                                imageVector = ImageVector.vectorResource(id = R.drawable.ic_tag),
+                                contentDescription = stringResource(id = R.string.tag_icon),
+                                tint = it,
+                                modifier = Modifier.padding(end = 5.dp),
+                            )
+                        }
+                        Text(
+                            text = content,
+                            style = selectorType.textStyle,
+                            color = selectorType.textColor,
+                        )
+                    }
+                }
+            }
+
+            SelectorType.DEADLINE -> {
+                Row(
+                    modifier =
+                        Modifier
+                            .padding(
+                                horizontal = selectorType.paddingHorizontal,
+                                vertical = selectorType.paddingVertical,
+                            ),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Image(
+                        imageVector = ImageVector.vectorResource(id = R.drawable.ic_deadline),
+                        contentDescription = stringResource(id = R.string.deadline_icon),
+                        modifier = Modifier.padding(end = 5.dp),
+                    )
+                    Text(
+                        text = content,
+                        style = selectorType.textStyle,
+                        color = selectorType.textColor,
+                    )
+                }
+            }
+
+            SelectorType.BASIC -> {
+                Text(
+                    text = stringResource(id = R.string.Today),
+                    style = selectorType.textStyle,
+                    color = Color.Transparent,
+                    modifier =
+                        Modifier
+                            .padding(
+                                horizontal = selectorType.paddingHorizontal,
+                                vertical = selectorType.paddingVertical,
+                            ),
+                )
+                Text(
+                    text = content,
+                    style = selectorType.textStyle,
+                    color = selectorType.textColor,
+                )
+            }
+        }
+    }
+}

app/src/main/java/org/memento/presentation/MementoTodoCheckBox.kt

@@ -0,0 +1,58 @@
+package org.memento.presentation
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import org.memento.ui.theme.darkModeColors
+import org.memento.ui.theme.defaultMementoTypography
+
+@Composable
+fun MementoTodoCheckBox(
+    content: String,
+    isChecked: Boolean = false,
+    onCheckedChange: (Boolean) -> Unit = {},
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier =
+            Modifier
+                .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Checkbox(
+            checked = isChecked,
+            onCheckedChange = onCheckedChange,
+            colors =
+                CheckboxDefaults.colors(
+                    uncheckedColor = darkModeColors.gray05,
+                    checkedColor = darkModeColors.gray05,
+                    checkmarkColor = darkModeColors.black,
+                ),
+        )
+
+        Text(
+            text = content,
+            style = defaultMementoTypography.body_b_16,
+            color = darkModeColors.white,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            textDecoration = if (isChecked) TextDecoration.LineThrough else null,
+        )
+    }
+}
+
+@Preview
+@Composable
+fun MementoTodoCheckBoxPreview() {
+    MementoTodoCheckBox(
+        content = "title",
+    )
+}

app/src/main/res/drawable/ic_deadline.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M4.205,15V3"
+      android:fillColor="#00000000"
+      android:strokeColor="#A9ADBB"/>
+  <path
+      android:pathData="M13.755,4H4.405C4.295,4 4.205,4.09 4.205,4.2V9.8C4.205,9.91 4.295,10 4.405,10H13.797C13.964,10 14.057,9.809 13.956,9.678L11.807,6.902C11.748,6.825 11.752,6.717 11.817,6.645L13.903,4.334C14.02,4.205 13.928,4 13.755,4Z"
+      android:fillColor="#A9ADBB"/>
+</vector>

app/src/main/res/drawable/ic_tag.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="15dp"
+    android:height="14dp"
+    android:viewportWidth="15"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M7.705,7m-5,0a5,5 0,1 1,10 0a5,5 0,1 1,-10 0"
+      android:fillColor="#A9ADBB"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -13,4 +13,14 @@
     <string name="dialog_button_ok">OK</string>
     <string name="dialog_button_cancel">Cancel</string>
 
+    <!--    contentDescription-->
+    <string name="deadline_icon">Deadline Icon</string>
+    <string name="tag_icon">Tag Icon</string>
+
+    <!--    UI Example Text-->
+    <string name="Today">Today</string>
+    <string name="date_example">Jan 30, 2025</string>
+    <string name="time_example">00:00 AM</string>
+
+
 </resources>