1965040 - Find ways to refactor common elements/repeated patterns out of our code connect files

Status: RESOLVED WONTFIX

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

Now that we have a decent number of code connect files I think we could start pulling out commonly repeated sets of props and maybe even templates. I imagine we could do something like:

export const ICON_SRC = {
  iconSrc: figma.boolean("Show icon", {
    true: "chrome://example.svg",
      false: undefined,
    }),
};

export const DESCRIPTION = {
  description: figma.boolean("Show description", {
    true: figma.string("Description"),
  }),
};

...

export const COMMON_TEXT_PROPS = {
  ICON_SRC,
  DESCRIPTION,
  LABEL,
  ...
};

Then in our files that use these same props we could just do something like:

...
props: {
  ...COMMON_TEXT_PROPS,
  someCustomProps: { ... }
}

it would be nice to also be able to do this with templates we use in slots, like having a default moz-button we can import and use, but I'm not 100% sure code connect actually supports that.

Comment 1

[Hanna Jones [:hjones]]

Thinking on it some more I wonder if there's some overlap with bug 1963946. Since we don't have a label component in code creating these kinds of common props might be a viable alternative.

Comment 2

[Catherine Meade]

Attachment: WIP: Bug 1965040 – Refactor common Code Connect patterns into shared file r?#reusable-components-reviewers

Comment 3

[Catherine Meade]

After attempting to implement some JavaScript to handle shared properties within the Figma Connect config files, I found that this is not supported functionality within Figma Code Connect, as Code Connect requires object literals as properties and does not execute code within config files due to a static parser. The attempt can be see on the attached WIP patch.

Our options are to forego shared properties or write custom parsing tooling.

At this point the resulting clean-up is not worth the initial creation and maintenance of a custom parser. However, this may be worth revisiting in the future.

Related Github issue:
https://github.com/figma/code-connect/issues/255