feat(design toolbox): display code implementation for each component #343

florentmaitre · 2025-02-12T14:15:58Z

No description provided.

github-actions · 2025-02-12T14:26:16Z

🟢 Netlify deploy for commit `ebbd895` succeeded

Deploy preview: https://67bc8471d957a627b9acc142--ouds-android.netlify.app
Deploy log: https://app.netlify.com/sites/ouds-android/deploys/67bc8471d957a627b9acc142

paulinea · 2025-02-13T15:01:35Z

app/src/main/java/com/orange/ouds/app/ui/utilities/Code.kt

+
+private val CODE_INDENT = "  "
+
+interface CodeFormattable {


Should we rename it to FormattableCode?

paulinea · 2025-02-13T15:22:13Z

app/src/main/java/com/orange/ouds/app/ui/utilities/Code.kt

+@DslMarker
+annotation class CodeDslMarker
+
+private val CODE_INDENT = "  "


We can add const as suggested by AS

paulinea · 2025-02-13T15:31:29Z

app/src/main/java/com/orange/ouds/app/ui/components/ComponentCode.kt

+
+fun Code.Builder.coloredBoxCall(onColoredBox: Boolean, content: Code.Builder.() -> Unit) {
+    if (onColoredBox) {
+        functionCall("OudsColoredBox") {


Should we replace "OudsColoredBox" by OudsColoredBox.javaClass.simpleName which seems safer if we rename it?

You are right, we can't use Composable methods references but I did not realize that we could use the associated object, that's a good idea 👍

BTW, this won't work with OudsCheckbox because the associated object is internal.

paulinea · 2025-02-13T15:35:09Z

app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt

+                state = this@DemoScreen,
+                modifier = Modifier
+                    .padding(all = OudsTheme.spaces.fixed.medium)
+                    .padding(top = OudsTheme.spaces.fixed.medium)


Do we need this line?

Yes, it matches the Figma and I thought it was easier to read than setting three paddings (horizontal, bottom and top):

But we can change how it's written if you prefer the other way. Or move the second top padding to the bottom padding of the ButtonDemo.

paulinea · 2025-02-13T15:37:23Z

app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt

+    val text = stringResource(id = R.string.app_components_button_label)
+    CodeSnippet(modifier = modifier) {
+        coloredBoxCall(state.onColoredBox) {
+            functionCall("OudsButton") {


Same thing as before, should we use OudsButton.javaClass.simpleName?

paulinea · 2025-02-13T15:39:45Z

app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt

+            functionCall("OudsButton") {
+                if (state.layout in listOf(ButtonDemoState.Layout.IconOnly, ButtonDemoState.Layout.IconAndText)) {
+                    constructorCallArgument<OudsButton.Icon>("icon") {
+                        functionCallArgument("painter", "painterResource") {


Should we define constants for function names like painterResource, stringResource`, ...?

paulinea · 2025-02-13T15:46:22Z

app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt

+                state = this@DemoScreen,
+                modifier = Modifier
+                    .padding(all = OudsTheme.spaces.fixed.medium)
+                    .padding(top = OudsTheme.spaces.fixed.medium)


Same thing here, do we need this line?

paulinea · 2025-02-13T16:03:01Z

app/src/main/java/com/orange/ouds/app/ui/utilities/Code.kt

+
+    override fun format(context: Context): String {
+        val valueString = when (value) {
+            is Float -> "${value}F"


Float is more represented with a lower case f no?

That's what I thought too. But if you write val a: Float = 1.0, then Android Studio suggests to change this code to val a: Float = 1.0F.

Also, the documentation seems to use f: https://kotlinlang.org/docs/numbers.html#literal-constants-for-numbers

…e snippets

florentmaitre linked an issue Feb 12, 2025 that may be closed by this pull request

Display code implementation for each component #248

Open

florentmaitre deployed to netlify February 12, 2025 14:21 — with GitHub Actions View deployment

florentmaitre marked this pull request as draft February 12, 2025 14:33

florentmaitre force-pushed the 248-display-code-implementation-for-each-component branch from 752d732 to ed5e392 Compare February 12, 2025 15:07

florentmaitre marked this pull request as ready for review February 12, 2025 15:11

florentmaitre deployed to netlify February 12, 2025 15:12 — with GitHub Actions View deployment

florentmaitre changed the title ~~chore: display code implementation for each component~~ feat(design toolbox): display code implementation for each component Feb 12, 2025

paulinea requested changes Feb 13, 2025

View reviewed changes

florentmaitre force-pushed the 248-display-code-implementation-for-each-component branch from ed5e392 to dfcb99b Compare February 14, 2025 13:36

florentmaitre deployed to netlify February 14, 2025 13:43 — with GitHub Actions View deployment

florentmaitre force-pushed the 248-display-code-implementation-for-each-component branch from dfcb99b to e058406 Compare February 17, 2025 13:16

florentmaitre marked this pull request as draft February 17, 2025 13:16

florentmaitre deployed to netlify February 17, 2025 13:21 — with GitHub Actions View deployment

paulinea force-pushed the 248-display-code-implementation-for-each-component branch from e058406 to b1e7272 Compare February 24, 2025 12:59

paulinea deployed to netlify February 24, 2025 13:03 — with GitHub Actions View deployment

paulinea added 14 commits February 24, 2025 15:30

Implement standalone checkbox component

1942e68

Add checkbox component to demo app

e72a7b1

Add semantics

b81cff2

Throw an exception in the case of an error/disabled checkbox

72f669a

Update Paparazzi snapshots

1cd7475

Remove empty line

caf32b9

Add missing package name

e5c372b

Set interaction source on checkbox

3f419bd

Fix test

80af06d

Update checkbox demo to display an indeterminate state

c1a93dc

Fix imports

7062c2c

Review: Reorder resources alphabetically

4f67d6b

Review: Improve kdoc

b73b92c

Review: Update exception messages

f577f6c

paulinea and others added 24 commits February 24, 2025 15:30

Review: Change width to withIn modifier

867e3d7

Review: Rename methods by adding selector to be more precise

af97b42

Review: Use Color.Unspecified for exception cases

da44e18

Review: Remove useless kdoc

20b5deb

Review: Remove useless code

d2df77e

Review: Update checkbox sample code

621195a

Review: Fix typo in resource name

4d8d16c

Review: Add vertical scroll to the column

e5efc54

Review: Add interactionSource as OudsCheckbox parameter

cb009f8

Review: Add interactionSource as OudsButton parameter

837417b

Update checkbox snapshots

ffab445

Review: Update interactionSource doc

9b0c812

Review: Improve interactionSource set on components

432f5a2

Review: Remove Modifier from preview

d168c7a

Review: Use rememberSaveable to keep state on configuration change

c3fd2c1

Update checkbox illustration

5a27863

Add code DSL

8343ab8

Add CodeSnipped composable

28fc7ad

Add code snippet for OudsButton and OudsLink

c78faab

Review: Rename CodeFormattable to Formattable

e94a437

Review: Add const keyword to CODE_INDENT

28aae81

Review: Use component class names instead of hardcoded strings in cod…

022a446

…e snippets

Review: Add helpers for function arguments in code snippets

b90584b

Add code snippet for OudsCheckbox

ebbd895

paulinea force-pushed the 248-display-code-implementation-for-each-component branch from b1e7272 to ebbd895 Compare February 24, 2025 14:31

paulinea deployed to netlify February 24, 2025 14:35 — with GitHub Actions View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(design toolbox): display code implementation for each component #343

feat(design toolbox): display code implementation for each component #343

florentmaitre commented Feb 12, 2025

github-actions bot commented Feb 12, 2025 •

edited

Loading

paulinea Feb 13, 2025

paulinea Feb 13, 2025

paulinea Feb 13, 2025

florentmaitre Feb 14, 2025

florentmaitre Feb 14, 2025

paulinea Feb 13, 2025

florentmaitre Feb 14, 2025 •

edited

Loading

paulinea Feb 13, 2025

paulinea Feb 13, 2025

paulinea Feb 13, 2025

paulinea Feb 13, 2025

florentmaitre Feb 14, 2025

florentmaitre Feb 14, 2025

feat(design toolbox): display code implementation for each component #343

Are you sure you want to change the base?

feat(design toolbox): display code implementation for each component #343

Conversation

florentmaitre commented Feb 12, 2025

github-actions bot commented Feb 12, 2025 • edited Loading

🟢 Netlify deploy for commit ebbd895 succeeded

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

florentmaitre Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 12, 2025 •

edited

Loading

🟢 Netlify deploy for commit `ebbd895` succeeded

florentmaitre Feb 14, 2025 •

edited

Loading