[YDS-199] 컴포넌트 내부 코드 리팩토링 및 base 컴포넌트 추가 (#201)

* add: .editorconfig * refactor: YdsRounding * refactor: YdsTypography * refactor: Rounding 수정 * refactor: YdsTextStyle 설명 수정 * refactor: YdsRounding 복구 * move: Icon 패키지 base로 옮김 * feat: Text * refactor: import our Text * refactor: alterColorIfPressed -> pressedColorFor * refactor: ButtonColorState: pressed를 주입해주는 방식으로 수정 * fix: 마이너 오류 해결 * refactor: Rounding 방식 변경 * refactor: Border enum으로 변경 move: ItemColor, Rounding 패키지 rules로 이동 * move: Animation 파일 rules 패키지로 이동 * feat: YDS 전용 Surface 추가 (Material의 것과 거의 같음) * move: NoRippleButton 이름 변경 (-> YdsBaseButton) refactor: Yds의 Surface 사용하도록 변경 * move: NoRippleButton 이름 변경 (-> YdsBaseButton) refactor: Yds의 Surface 사용하도록 변경 * fix: 마이너 버그 수정 * feat: 기본 Surface 추가, Badge 수정 * fix: 기본 ContentColor, TextStyle 제공 * feat: Column, Row 내에서 사용하는 Divider 추가 * refactor: YdsIcon -> Icon, Material 라이브러리 의존하지 않게 수정 * feat: rounding dp값을 직접 받을 수 있도록 Surface 파라미터 수정 * del: YdsRounding 삭제 YdsRounding을 사용중이던 컴포넌트의 파라미터 dp로 대체 * refactor: Text -> YdsText
yourssu · Sep 27, 2023 · b8f07d6 · b8f07d6
1 parent 67afd80
commit b8f07d6
Show file tree

Hide file tree

Showing 30 changed files with 756 additions and 484 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+max_line_length = 150
+
+[*.{kt,kts}]
+ij_kotlin_allow_trailing_comma = true
+ij_kotlin_allow_trailing_comma_on_call_site = true
diff --git a/compose/src/main/java/com/yourssu/design/system/compose/YdsTheme.kt b/compose/src/main/java/com/yourssu/design/system/compose/YdsTheme.kt
@@ -1,26 +1,21 @@
 package com.yourssu.design.system.compose
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.Shapes
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
+import com.yourssu.design.system.compose.base.ProvideTextStyle
+import com.yourssu.design.system.compose.foundation.LocalContentColor
 import com.yourssu.design.system.compose.foundation.LocalYdsColorScheme
 import com.yourssu.design.system.compose.foundation.LocalYdsTypography
-import com.yourssu.design.system.compose.rule.Border
-import com.yourssu.design.system.compose.rule.LocalYdsBorder
 import com.yourssu.design.system.compose.foundation.YdsColorScheme
 import com.yourssu.design.system.compose.foundation.YdsTypography
 import com.yourssu.design.system.compose.foundation.darkColorScheme
-import com.yourssu.design.system.compose.foundation.getYDSTypography
 import com.yourssu.design.system.compose.foundation.lightColorScheme
-import com.yourssu.design.system.compose.rule.LocalYdsRounding
 
 @Composable
 fun YdsTheme(
-    typography: YdsTypography = getYDSTypography(),
-    rounding: Shapes = YdsTheme.rounding,
-    border: Border = YdsTheme.border,
+    typography: YdsTypography = YdsTheme.typography,
     content: @Composable () -> Unit
 ) {
     val colors = if (isSystemInDarkTheme()) {
@@ -31,10 +26,12 @@ fun YdsTheme(
     CompositionLocalProvider(
         LocalYdsColorScheme provides colors,
         LocalYdsTypography provides typography,
-        LocalYdsRounding provides rounding,
-        LocalYdsBorder provides border,
-        content = content
-    )
+        LocalContentColor provides colors.textPrimary,
+    ) {
+        ProvideTextStyle(value = typography.body1) {
+            content()
+        }
+    }
 }
 
 object YdsTheme {
@@ -47,14 +44,4 @@ object YdsTheme {
         @Composable
         @ReadOnlyComposable
         get() = LocalYdsTypography.current
-
-    val rounding: Shapes
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalYdsRounding.current
-
-    val border: Border
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalYdsBorder.current
 }
diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/Badge.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/Badge.kt
@@ -1,19 +1,29 @@
 package com.yourssu.design.system.compose.atom
 
 import androidx.annotation.DrawableRes
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.runtime.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
+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.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yourssu.design.system.compose.R
 import com.yourssu.design.system.compose.YdsTheme
-import com.yourssu.design.system.compose.foundation.IconSize
-import com.yourssu.design.system.compose.foundation.ItemColor
-import com.yourssu.design.system.compose.foundation.YdsIcon
+import com.yourssu.design.system.compose.base.Icon
+import com.yourssu.design.system.compose.base.IconSize
+import com.yourssu.design.system.compose.base.Surface
+import com.yourssu.design.system.compose.base.YdsText
+import com.yourssu.design.system.compose.rule.ItemColor
 
 @Composable
 fun Badge(
@@ -26,8 +36,8 @@ fun Badge(
         modifier = modifier
             .requiredHeight(24.dp)
             .wrapContentWidth(),
-        shape = YdsTheme.rounding.small,
-        color = itemColor.getSemanticColor(),
+        rounding = 2.dp,
+        color = itemColor.semanticColor,
         contentColor = YdsTheme.colors.monoItemText
     ) {
         Row(
@@ -36,13 +46,13 @@ fun Badge(
             verticalAlignment = Alignment.CenterVertically
         ) {
             icon?.let { iconId ->
-                YdsIcon(
+                Icon(
                     id = iconId,
                     iconSize = IconSize.ExtraSmall
                 )
                 Spacer(Modifier.width(4.dp))
             }
-            Text(text = text, style = YdsTheme.typography.caption1)
+            YdsText(text = text, style = YdsTheme.typography.caption1)
         }
     }
 }

diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/BottomSheet.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/BottomSheet.kt
@@ -12,8 +12,8 @@ import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yourssu.design.system.compose.YdsTheme
-import com.yourssu.design.system.compose.foundation.Duration
-import com.yourssu.design.system.compose.foundation.YdsInAndOutEasing
+import com.yourssu.design.system.compose.rule.Duration
+import com.yourssu.design.system.compose.rule.YdsInAndOutEasing
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterialApi::class)

diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/BoxButton.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/BoxButton.kt
@@ -2,21 +2,28 @@ package com.yourssu.design.system.compose.atom
 
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CornerBasedShape
-import androidx.compose.material.ButtonDefaults.elevation
-import androidx.compose.material.Text
-import androidx.compose.runtime.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+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.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.yourssu.design.system.compose.R
 import com.yourssu.design.system.compose.YdsTheme
-import com.yourssu.design.system.compose.base.NoRippleButton
-import com.yourssu.design.system.compose.foundation.IconSize
-import com.yourssu.design.system.compose.foundation.YdsIcon
-import com.yourssu.design.system.compose.states.ButtonSizeState
+import com.yourssu.design.system.compose.base.Icon
+import com.yourssu.design.system.compose.base.IconSize
+import com.yourssu.design.system.compose.base.YdsBaseButton
+import com.yourssu.design.system.compose.base.YdsText
 import com.yourssu.design.system.compose.states.ButtonColorState
+import com.yourssu.design.system.compose.states.ButtonSizeState
 
 enum class BoxButtonType {
     Filled,
@@ -107,48 +114,47 @@ fun BoxButton(
     isWarned: Boolean = false,
     sizeType: BoxButtonSize = BoxButtonSize.Large,
     buttonType: BoxButtonType = BoxButtonType.Filled,
-    rounding: CornerBasedShape = YdsTheme.rounding.large,
+    rounding: Dp = 8.dp,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
-    val roundingShape = when (sizeType) {
-        BoxButtonSize.ExtraLarge -> YdsTheme.rounding.large
+    val roundingDp = when (sizeType) {
+        BoxButtonSize.ExtraLarge -> 8.dp
         BoxButtonSize.Large -> rounding
-        BoxButtonSize.Medium, BoxButtonSize.Small -> YdsTheme.rounding.medium
+        BoxButtonSize.Medium, BoxButtonSize.Small -> 4.dp
     }
     val (typo, iconSize, height, horizontalPadding) = boxButtonSizeStateBySize(size = sizeType)
 
-    NoRippleButton(
+    YdsBaseButton(
         onClick = onClick,
         colors = boxButtonColorByType(isWarned = isWarned, type = buttonType),
         modifier = Modifier
             .then(modifier)
             .height(height),
         enabled = !isDisabled,
         showBorder = (buttonType == BoxButtonType.Line),
-        elevation = elevation(0.dp, 0.dp, 0.dp),
         interactionSource = interactionSource,
-        shape = roundingShape,
+        rounding = roundingDp,
         contentPadding = PaddingValues(
             horizontal = horizontalPadding
         )
     ) {
         leftIcon?.let { icon ->
-            YdsIcon(
+            Icon(
                 id = icon,
                 iconSize = iconSize
             )
             Spacer(modifier = Modifier.width(4.dp))
         }
 
-        Text(
+        YdsText(
             text = text,
             style = typo
         )
 
         // leftIcon이 null일 때만
         leftIcon ?: rightIcon?.let { icon ->
             Spacer(modifier = Modifier.width(4.dp))
-            YdsIcon(
+            Icon(
                 id = icon,
                 iconSize = iconSize
             )

diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/CheckBox.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/CheckBox.kt
@@ -1,19 +1,28 @@
 package com.yourssu.design.system.compose.atom
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.Text
-import androidx.compose.runtime.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+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.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yourssu.design.system.compose.R
 import com.yourssu.design.system.compose.YdsTheme
+import com.yourssu.design.system.compose.base.IconSize
+import com.yourssu.design.system.compose.base.YdsText
+import com.yourssu.design.system.compose.base.Icon
 import com.yourssu.design.system.compose.base.noRippleClickable
-import com.yourssu.design.system.compose.foundation.IconSize
-import com.yourssu.design.system.compose.foundation.YdsIcon
 import com.yourssu.design.system.compose.states.ButtonSizeState
 
 enum class CheckBoxSize {
@@ -83,15 +92,15 @@ fun CheckBox(
             .then(clickableModifier),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        YdsIcon(
+        Icon(
             id = icon,
             iconSize = iconSize,
             tint = contentColor
         )
 
         Spacer(Modifier.width(betweenSpace))
 
-        Text(
+        YdsText(
             text = text,
             style = typo,
             color = contentColor