[Jetpack Compose] Manage @Composable properties

[corentin-stamper]

Configuration

Code Connect CLI version: 1.1.4

Sources

package ...

import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Shape
import com.figma.code.connect.Figma
import com.figma.code.connect.FigmaConnect
import com.figma.code.connect.FigmaProperty
import com.figma.code.connect.FigmaType
import com.figma.code.connect.FigmaVariant

@FigmaConnect(url = "https://www.figma.com/...")
@FigmaVariant("Variant", "Primary")
@FigmaVariant("Variant style", "Regular")
class PrimaryButtonDoc {
    @FigmaProperty(FigmaType.Text, "Label")
    val label: String = ""

    @FigmaProperty(FigmaType.Enum, "State")
    val enabled: Boolean = Figma.mapping(
        "Default" to true,
        "Disabled" to false,
    )

    @FigmaProperty(FigmaType.Enum, "Shape")
    val shape: Shape
        @Composable get() = Figma.mapping(
            "Rounded" to ButtonDefaults.shape,
            "Squared" to ButtonDefaults.outlinedShape,
        )

    @Composable
    fun Snippet() {
        Button(
            onClick = {},
            enabled = enabled,
            shape = shape,
        ) {}
    }
}

Result (parser)

figma connect publish --token ... --verbose

Config file found, parsing /... using specified include globs
Running parser: ./gradlew -p . parseCodeConnect -PfilePath=tmp/figma-code-connect-parser-input.json.tmp -q
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':code-connect:parseCodeConnect'.
> null cannot be cast to non-null type org.jetbrains.kotlin.psi.KtDotQualifiedExpression

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

BUILD FAILED in 6s
Error returned from parser: Parser exited with code 1. Try re-running the command with --verbose for more information.

Problem/Question

I'm trying to map an enum to a @Composable values using the get() = accessor. This format produce an issue during the parsing.

It's works with this format but I got a lint error (because the @Composable annotation is required)

@FigmaProperty(FigmaType.Enum, "Shape")
val shape: Shape = Figma.mapping(
    "Rounded" to ButtonDefaults.roundedCornerShape,
    "Squared" to ButtonDefaults.squaredCornerShape,
)

[tomduncalf-figma]

Hey @corentin-stamper, thanks for the report. Could you expand on why this property needs to be @Composable? I'm not a Compose expert, if this is something we need to be able to support we can look into modifying our parser to do so

[corentin-stamper]

Hey @tomduncalf-figma, thanks for the answer.

In my exemple, I need to map my "Shape" enum to Material3 values. These values are @Composable.

Without the @Composable annotation, I got this error :

@Composable invocations can only happen from the context of a @Composable function

[tomduncalf-figma]

Thanks @corentin-stamper, this sounds like something we should probably add support for. I'll raise for discussion with the team and add to the backlog if we agree we should do it