Skip to content

Commit 8071458

Browse files
junerverjunerver
committed
🎨 [App]: Unify example page styles to match HomeScreen
- Remove Surface wrapper from 22 example files - Add consistent Arrangement.spacedBy(16.dp) spacing - Remove description paragraphs below titles - Remove manual Spacer between ExampleCards - Clean up unused Surface imports
1 parent 312099e commit 8071458

24 files changed

Lines changed: 464 additions & 623 deletions

‎app/src/commonMain/kotlin/xyz/junerver/composehooks/example/UseAsyncExample.kt‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
package xyz.junerver.composehooks.example
22

3+
import androidx.compose.foundation.layout.Arrangement
34
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.Row
5-
import androidx.compose.foundation.layout.Spacer
6-
import androidx.compose.foundation.layout.height
7-
import androidx.compose.material3.Surface
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.material3.MaterialTheme
88
import androidx.compose.material3.Text
99
import androidx.compose.runtime.Composable
1010
import androidx.compose.ui.Modifier
@@ -40,32 +40,37 @@ fun UseAsyncExample() {
4040

4141
val (cancelableAsyncRun, cancel, isRunning) = useCancelableAsync()
4242

43-
Surface {
44-
Column {
45-
Text(text = "count:${getState()}")
46-
Spacer(modifier = Modifier.height(20.dp))
47-
Text("The asynchronous closure is passed as an argument to `useAsync`")
48-
TButton(text = "delay +1") {
49-
async()
43+
Column(
44+
modifier = Modifier.padding(16.dp),
45+
verticalArrangement = Arrangement.spacedBy(16.dp),
46+
) {
47+
Text(
48+
text = "useAsync Examples",
49+
style = MaterialTheme.typography.headlineMedium,
50+
)
51+
52+
Text(text = "count:${getState()}")
53+
Text("The asynchronous closure is passed as an argument to `useAsync`")
54+
TButton(text = "delay +1") {
55+
async()
56+
}
57+
Text("equivalent to `rememberCoroutineScope`")
58+
TButton(text = "delay +1") {
59+
asyncRun {
60+
delay(1.seconds)
61+
setState { it + 1 }
5062
}
51-
Text("equivalent to `rememberCoroutineScope`")
63+
}
64+
Text("useCancelableAsync")
65+
Row {
5266
TButton(text = "delay +1") {
53-
asyncRun {
67+
cancelableAsyncRun {
5468
delay(1.seconds)
5569
setState { it + 1 }
5670
}
5771
}
58-
Text("useCancelableAsync")
59-
Row {
60-
TButton(text = "delay +1") {
61-
cancelableAsyncRun {
62-
delay(1.seconds)
63-
setState { it + 1 }
64-
}
65-
}
66-
TButton(text = "cancel", enabled = isRunning.value) {
67-
cancel()
68-
}
72+
TButton(text = "cancel", enabled = isRunning.value) {
73+
cancel()
6974
}
7075
}
7176
}

‎app/src/commonMain/kotlin/xyz/junerver/composehooks/example/UseFormExample.kt‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import androidx.compose.material3.Card
1212
import androidx.compose.material3.CardDefaults
1313
import androidx.compose.material3.MaterialTheme
1414
import androidx.compose.material3.OutlinedTextField
15-
import androidx.compose.material3.Surface
1615
import androidx.compose.material3.Text
1716
import androidx.compose.runtime.Composable
1817
import androidx.compose.runtime.getValue
@@ -49,41 +48,33 @@ import xyz.junerver.composehooks.ui.component.TButton
4948
*/
5049
@Composable
5150
fun UseFormExample() {
52-
Surface {
53-
ScrollColumn(modifier = Modifier.padding(16.dp)) {
54-
// Page title
55-
Text(
56-
text = "useForm Examples",
57-
style = MaterialTheme.typography.headlineMedium,
58-
color = MaterialTheme.colorScheme.primary,
59-
modifier = Modifier.padding(bottom = 16.dp),
60-
)
61-
62-
// Basic form example
63-
ExampleCard(title = "Basic Form Example") {
64-
BasicFormExample()
65-
}
66-
67-
Spacer(modifier = Modifier.height(16.dp))
68-
69-
// Form operations example
70-
ExampleCard(title = "Form Operations") {
71-
FormOperationsExample()
72-
}
51+
ScrollColumn(
52+
modifier = Modifier.padding(16.dp),
53+
verticalArrangement = Arrangement.spacedBy(16.dp),
54+
) {
55+
Text(
56+
text = "useForm Examples",
57+
style = MaterialTheme.typography.headlineMedium,
58+
)
7359

74-
Spacer(modifier = Modifier.height(16.dp))
60+
// Basic form example
61+
ExampleCard(title = "Basic Form Example") {
62+
BasicFormExample()
63+
}
7564

76-
// Field watching example
77-
ExampleCard(title = "Field Watching") {
78-
FieldWatchingExample()
79-
}
65+
// Form operations example
66+
ExampleCard(title = "Form Operations") {
67+
FormOperationsExample()
68+
}
8069

81-
Spacer(modifier = Modifier.height(16.dp))
70+
// Field watching example
71+
ExampleCard(title = "Field Watching") {
72+
FieldWatchingExample()
73+
}
8274

83-
// Enhanced form example (touched/dirty/submit)
84-
ExampleCard(title = "Enhanced Form (Touched/Dirty/Submit)") {
85-
EnhancedFormExample()
86-
}
75+
// Enhanced form example (touched/dirty/submit)
76+
ExampleCard(title = "Enhanced Form (Touched/Dirty/Submit)") {
77+
EnhancedFormExample()
8778
}
8879
}
8980
}

‎app/src/commonMain/kotlin/xyz/junerver/composehooks/example/UseGetStateExample.kt‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
88
import androidx.compose.foundation.layout.height
99
import androidx.compose.foundation.layout.padding
1010
import androidx.compose.material3.MaterialTheme
11-
import androidx.compose.material3.Surface
1211
import androidx.compose.material3.Text
1312
import androidx.compose.runtime.Composable
1413
import androidx.compose.ui.Modifier
@@ -38,30 +37,28 @@ import xyz.junerver.composehooks.utils.now
3837
*/
3938
@Composable
4039
fun UseGetStateExample() {
41-
Surface {
42-
ScrollColumn(
43-
modifier = Modifier.padding(16.dp),
44-
verticalArrangement = Arrangement.spacedBy(16.dp),
45-
) {
46-
Text(
47-
text = "useGetState Examples",
48-
style = MaterialTheme.typography.headlineMedium,
49-
)
50-
51-
// Basic usage example
52-
ExampleCard(title = "Basic Usage") {
53-
BasicUsageExample()
54-
}
40+
ScrollColumn(
41+
modifier = Modifier.padding(16.dp),
42+
verticalArrangement = Arrangement.spacedBy(16.dp),
43+
) {
44+
Text(
45+
text = "useGetState Examples",
46+
style = MaterialTheme.typography.headlineMedium,
47+
)
5548

56-
// Closure problem solution example
57-
ExampleCard(title = "Solving Closure Problems") {
58-
ClosureProblemExample()
59-
}
49+
// Basic usage example
50+
ExampleCard(title = "Basic Usage") {
51+
BasicUsageExample()
52+
}
6053

61-
// Rapid state updates example
62-
ExampleCard(title = "Handling Rapid State Updates") {
63-
RapidStateUpdatesExample()
64-
}
54+
// Closure problem solution example
55+
ExampleCard(title = "Solving Closure Problems") {
56+
ClosureProblemExample()
57+
}
58+
59+
// Rapid state updates example
60+
ExampleCard(title = "Handling Rapid State Updates") {
61+
RapidStateUpdatesExample()
6562
}
6663
}
6764
}

‎app/src/commonMain/kotlin/xyz/junerver/composehooks/example/UseImmutableListExample.kt‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import androidx.compose.foundation.lazy.LazyColumn
1111
import androidx.compose.foundation.lazy.items
1212
import androidx.compose.material3.Card
1313
import androidx.compose.material3.MaterialTheme
14-
import androidx.compose.material3.Surface
1514
import androidx.compose.material3.Text
1615
import androidx.compose.runtime.Composable
1716
import androidx.compose.runtime.getValue
@@ -41,30 +40,28 @@ import xyz.junerver.composehooks.ui.component.randomBackground
4140
*/
4241
@Composable
4342
fun UseImmutableListExample() {
44-
Surface {
45-
ScrollColumn(
46-
modifier = Modifier.padding(16.dp),
47-
verticalArrangement = Arrangement.spacedBy(16.dp),
48-
) {
49-
Text(
50-
text = "useImmutableList Examples",
51-
style = MaterialTheme.typography.headlineMedium,
52-
)
53-
54-
// Basic usage example
55-
ExampleCard(title = "Basic Usage") {
56-
BasicUsageExample()
57-
}
43+
ScrollColumn(
44+
modifier = Modifier.padding(16.dp),
45+
verticalArrangement = Arrangement.spacedBy(16.dp),
46+
) {
47+
Text(
48+
text = "useImmutableList Examples",
49+
style = MaterialTheme.typography.headlineMedium,
50+
)
5851

59-
// List operations example
60-
ExampleCard(title = "List Operations") {
61-
ListOperationsExample()
62-
}
52+
// Basic usage example
53+
ExampleCard(title = "Basic Usage") {
54+
BasicUsageExample()
55+
}
6356

64-
// List reduce example
65-
ExampleCard(title = "List Reduce") {
66-
ListReduceExample()
67-
}
57+
// List operations example
58+
ExampleCard(title = "List Operations") {
59+
ListOperationsExample()
60+
}
61+
62+
// List reduce example
63+
ExampleCard(title = "List Reduce") {
64+
ListReduceExample()
6865
}
6966
}
7067
}

‎app/src/commonMain/kotlin/xyz/junerver/composehooks/example/UseLastChangedExample.kt‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package xyz.junerver.composehooks.example
22

3+
import androidx.compose.foundation.layout.Arrangement
34
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.Row
56
import androidx.compose.foundation.layout.Spacer
@@ -46,17 +47,13 @@ import xyz.junerver.composehooks.utils.now
4647

4748
@Composable
4849
fun UseLastChangedExample() {
49-
ScrollColumn(modifier = Modifier.padding(16.dp)) {
50+
ScrollColumn(
51+
modifier = Modifier.padding(16.dp),
52+
verticalArrangement = Arrangement.spacedBy(16.dp),
53+
) {
5054
Text(
5155
text = "useLastChanged & useTimeAgo",
5256
style = MaterialTheme.typography.headlineMedium,
53-
modifier = Modifier.padding(bottom = 8.dp),
54-
)
55-
56-
Text(
57-
text = "These hooks are used to track the last change time of a value and display time differences in a human-readable format.",
58-
style = MaterialTheme.typography.bodyLarge,
59-
modifier = Modifier.padding(bottom = 16.dp),
6057
)
6158

6259
Spacer(modifier = Modifier.height(8.dp))

‎app/src/commonMain/kotlin/xyz/junerver/composehooks/example/UseLatestExample.kt‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package xyz.junerver.composehooks.example
22

3+
import androidx.compose.foundation.layout.Arrangement
34
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.Row
56
import androidx.compose.foundation.layout.Spacer
@@ -34,21 +35,15 @@ import xyz.junerver.composehooks.ui.component.randomBackground
3435
*/
3536
@Composable
3637
fun UseLatestExample() {
37-
ScrollColumn(modifier = Modifier.padding(16.dp)) {
38+
ScrollColumn(
39+
modifier = Modifier.padding(16.dp),
40+
verticalArrangement = Arrangement.spacedBy(16.dp),
41+
) {
3842
Text(
3943
text = "useLatest Examples",
4044
style = MaterialTheme.typography.headlineMedium,
41-
modifier = Modifier.padding(bottom = 8.dp),
42-
)
43-
44-
Text(
45-
text = "This hook is used to get the latest value of a variable, solving closure problems in asynchronous contexts.",
46-
style = MaterialTheme.typography.bodyLarge,
47-
modifier = Modifier.padding(bottom = 16.dp),
4845
)
4946

50-
Spacer(modifier = Modifier.height(8.dp))
51-
5247
// Interactive Demo
5348
ExampleCard(title = "Interactive Demo") {
5449
InteractiveDemo()

0 commit comments

Comments
 (0)