Skip to content

Commit 6089340

Browse files
osugikojiosugikoji
committed
refactor: Add design system components
1 parent 5f5f788 commit 6089340

File tree

12 files changed

+734
-0
lines changed

12 files changed

+734
-0
lines changed

‎sample/android/src/main/java/co/yml/ychat/android/ui/components/ballonmessage/BalloonMessage.kt‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
package co.yml.ychat.android.ui.components.ballonmessage
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.shape.CircleShape
11+
import androidx.compose.foundation.shape.RoundedCornerShape
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.draw.clip
16+
import androidx.compose.ui.graphics.Color
17+
import androidx.compose.ui.tooling.preview.Preview
18+
import co.yml.ychat.android.ui.components.loading.TypingTextLoading
19+
import co.yml.ychat.android.ui.theme.Dimens
20+
import co.yml.ychat.android.ui.theme.Green1
21+
import co.yml.ychat.android.ui.theme.Icons
22+
import co.yml.ychat.android.ui.theme.Red1
23+
import co.yml.ychat.android.ui.theme.TypographyStyle
24+
import co.yml.ychat.android.ui.theme.White1
25+
import co.yml.ychat.android.ui.theme.YChatTheme
26+
27+
@Composable
28+
fun BalloonSenderMessage(
29+
text: String,
30+
isError: Boolean = false,
31+
) {
32+
Box(
33+
Modifier
34+
.fillMaxWidth()
35+
.padding(start = Dimens.XXXL),
36+
contentAlignment = Alignment.CenterEnd
37+
) {
38+
Row(
39+
modifier = Modifier
40+
.clip(
41+
RoundedCornerShape(
42+
topStart = Dimens.MD,
43+
topEnd = Dimens.MD,
44+
bottomEnd = Dimens.MD,
45+
)
46+
)
47+
.background(YChatTheme.colors.accent)
48+
.padding(horizontal = Dimens.MD)
49+
.padding(vertical = Dimens.XS)
50+
) {
51+
TypographyStyle.MediumBody.Text(
52+
text = text,
53+
color = YChatTheme.colors.onAccent
54+
)
55+
if (isError) {
56+
Icons.Warning.Icon(
57+
tint = Color.Red1,
58+
modifier = Modifier.padding(start = Dimens.XS)
59+
)
60+
}
61+
}
62+
}
63+
}
64+
65+
@Composable
66+
fun BalloonBotMessage(text: String) {
67+
Box(
68+
Modifier
69+
.fillMaxWidth()
70+
.padding(end = Dimens.XXXL),
71+
contentAlignment = Alignment.CenterStart
72+
) {
73+
Row(horizontalArrangement = Arrangement.spacedBy(Dimens.XXS)) {
74+
Icons.Bot.Icon(
75+
Modifier
76+
.clip(CircleShape)
77+
.background(Color.Green1)
78+
.padding(Dimens.XS),
79+
tint = Color.White1
80+
)
81+
TypographyStyle.MediumBody.Text(
82+
text = text,
83+
modifier = Modifier
84+
.clip(
85+
RoundedCornerShape(
86+
bottomStart = Dimens.MD,
87+
topEnd = Dimens.MD,
88+
bottomEnd = Dimens.MD,
89+
)
90+
)
91+
.background(YChatTheme.colors.primary4)
92+
.padding(horizontal = Dimens.MD)
93+
.padding(vertical = Dimens.XS),
94+
color = YChatTheme.colors.text1
95+
)
96+
}
97+
}
98+
}
99+
100+
@Composable
101+
fun BalloonTyping() {
102+
Box(
103+
Modifier.fillMaxWidth(),
104+
contentAlignment = Alignment.CenterStart
105+
) {
106+
TypingTextLoading(
107+
modifier = Modifier
108+
.clip(
109+
RoundedCornerShape(
110+
bottomStart = Dimens.MD,
111+
topEnd = Dimens.MD,
112+
bottomEnd = Dimens.MD,
113+
)
114+
)
115+
.background(YChatTheme.colors.primary4)
116+
.padding(horizontal = Dimens.MD)
117+
.padding(vertical = Dimens.XS),
118+
)
119+
}
120+
}
121+
122+
@Preview
123+
@Composable
124+
private fun BalloonPreview() {
125+
YChatTheme {
126+
Column(
127+
Modifier
128+
.background(YChatTheme.colors.background)
129+
.padding(Dimens.SM),
130+
verticalArrangement = Arrangement.spacedBy(Dimens.SM)
131+
) {
132+
BalloonSenderMessage("Say this is a test")
133+
BalloonSenderMessage("Say this is a test", true)
134+
BalloonBotMessage("This is indeed a test")
135+
BalloonTyping()
136+
}
137+
}
138+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/components/button/ButtonOutlined.kt‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
package co.yml.ychat.android.ui.components.button
2+
3+
import androidx.compose.foundation.BorderStroke
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.PaddingValues
8+
import androidx.compose.foundation.layout.fillMaxHeight
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.material.ButtonDefaults
12+
import androidx.compose.material.OutlinedButton
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.tooling.preview.Preview
17+
import androidx.compose.ui.unit.dp
18+
import co.yml.ychat.android.ui.theme.Dimens
19+
import co.yml.ychat.android.ui.theme.TypographyStyle
20+
import co.yml.ychat.android.ui.theme.YChatTheme
21+
22+
@Composable
23+
fun ButtonOutlined(
24+
text: String,
25+
modifier: Modifier = Modifier,
26+
enabled: Boolean = true,
27+
onClick: () -> Unit = {},
28+
) {
29+
val borderColor = if (enabled) YChatTheme.colors.accent else YChatTheme.colors.primary4
30+
val textColor = if (enabled) YChatTheme.colors.accent else YChatTheme.colors.primary4
31+
OutlinedButton(
32+
onClick = onClick,
33+
modifier = modifier.fillMaxWidth(),
34+
enabled = enabled,
35+
shape = RoundedCornerShape(Dimens.XS),
36+
border = BorderStroke(1.dp, borderColor),
37+
colors = ButtonDefaults.outlinedButtonColors(
38+
contentColor = borderColor,
39+
backgroundColor = Color.Transparent,
40+
),
41+
contentPadding = PaddingValues(Dimens.SM),
42+
) {
43+
TypographyStyle.SmallTitle.Text(text = text, color = textColor)
44+
}
45+
}
46+
47+
@Preview
48+
@Composable
49+
private fun ButtonOutlinedPreview() {
50+
YChatTheme {
51+
Column(
52+
modifier = Modifier
53+
.fillMaxHeight()
54+
.fillMaxWidth()
55+
.background(YChatTheme.colors.background),
56+
verticalArrangement = Arrangement.Center
57+
) {
58+
ButtonOutlined("Outlined button")
59+
ButtonOutlined("Outlined button", enabled = false)
60+
}
61+
}
62+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/components/divider/HorizontalDivider.kt‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
package co.yml.ychat.android.ui.components.divider
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.height
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.material.Divider
9+
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.tooling.preview.Preview
12+
import androidx.compose.ui.unit.dp
13+
import co.yml.ychat.android.ui.theme.Dimens
14+
import co.yml.ychat.android.ui.theme.YChatTheme
15+
16+
@Composable
17+
fun HorizontalDivider(modifier: Modifier = Modifier) {
18+
Divider(
19+
modifier = modifier
20+
.height(1.dp)
21+
.fillMaxWidth()
22+
.background(YChatTheme.colors.divider)
23+
)
24+
}
25+
26+
@Preview
27+
@Composable
28+
private fun HorizontalDividerPreview() {
29+
YChatTheme {
30+
Column(
31+
modifier = Modifier
32+
.background(YChatTheme.colors.background)
33+
.padding(Dimens.XXXL)
34+
) {
35+
HorizontalDivider()
36+
}
37+
}
38+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/components/feedback/Feedback.kt‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
package co.yml.ychat.android.ui.components.feedback
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.height
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.foundation.layout.width
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Alignment
10+
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.res.stringResource
12+
import androidx.compose.ui.text.style.TextAlign
13+
import androidx.compose.ui.tooling.preview.Preview
14+
import androidx.compose.ui.unit.dp
15+
import co.yml.ychat.android.ui.components.button.ButtonOutlined
16+
import co.yml.ychat.android.ui.components.feedback.model.FeedbackState
17+
import co.yml.ychat.android.ui.theme.Dimens
18+
import co.yml.ychat.android.ui.theme.Icons
19+
import co.yml.ychat.android.ui.theme.TypographyStyle
20+
import co.yml.ychat.android.ui.theme.YChatTheme
21+
22+
private const val ICON_SIZE = 128
23+
24+
@Composable
25+
fun Feedback(
26+
feedbackState: FeedbackState,
27+
onButtonClick: (() -> Unit)? = null,
28+
) {
29+
Feedback(
30+
icons = feedbackState.icon,
31+
title = stringResource(id = feedbackState.title),
32+
message = stringResource(id = feedbackState.message),
33+
buttonText = feedbackState.buttonText?.let { stringResource(id = it) },
34+
onButtonClick = onButtonClick,
35+
)
36+
}
37+
38+
@Composable
39+
fun Feedback(
40+
icons: Icons,
41+
title: String,
42+
message: String,
43+
buttonText: String? = null,
44+
onButtonClick: (() -> Unit)? = null,
45+
) {
46+
Column(
47+
horizontalAlignment = Alignment.CenterHorizontally,
48+
modifier = Modifier.padding(horizontal = Dimens.XXXL)
49+
) {
50+
icons.Icon(
51+
modifier = Modifier
52+
.width(ICON_SIZE.dp)
53+
.height(ICON_SIZE.dp)
54+
.padding(bottom = Dimens.MD)
55+
)
56+
TypographyStyle.LargeTitle.Text(
57+
text = title,
58+
modifier = Modifier.padding(bottom = Dimens.XS),
59+
textAlign = TextAlign.Center,
60+
)
61+
TypographyStyle.SmallBody.Text(
62+
text = message,
63+
modifier = Modifier.padding(bottom = Dimens.MD),
64+
textAlign = TextAlign.Center,
65+
)
66+
if (onButtonClick != null && buttonText != null) {
67+
ButtonOutlined(text = buttonText, onClick = onButtonClick)
68+
}
69+
}
70+
}
71+
72+
@Preview
73+
@Composable
74+
private fun StandardTextFieldPreview() {
75+
YChatTheme {
76+
Column(modifier = Modifier.background(YChatTheme.colors.background)) {
77+
Feedback(
78+
feedbackState = FeedbackState.ERROR,
79+
onButtonClick = {},
80+
)
81+
Feedback(
82+
feedbackState = FeedbackState.CONSTRUCTION,
83+
)
84+
}
85+
}
86+
}

‎sample/android/src/main/java/co/yml/ychat/android/ui/components/feedback/model/FeedbackState.kt‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package co.yml.ychat.android.ui.components.feedback.model
2+
3+
import androidx.annotation.StringRes
4+
import co.yml.ychat.android.R
5+
import co.yml.ychat.android.ui.theme.Icons
6+
7+
enum class FeedbackState(
8+
val icon: Icons,
9+
@StringRes val title: Int,
10+
@StringRes val message: Int,
11+
@StringRes val buttonText: Int? = null,
12+
) {
13+
ERROR(
14+
Icons.WarningOutline,
15+
R.string.feedback_state_error_title,
16+
R.string.feedback_state_error_message,
17+
R.string.feedback_state_error_action,
18+
),
19+
CONSTRUCTION(
20+
Icons.Construction,
21+
R.string.feedback_state_construction_title,
22+
R.string.feedback_state_construction_message,
23+
)
24+
}

0 commit comments

Comments
 (0)