Remember variable export settings and themes in file

[Copilot]

Overview

This PR implements persistence of variable export settings and theme selections in the Figma file's shared plugin data. Now when users restart the plugin, their previously configured export settings and selected themes will be remembered.

Implementation

• Added new shared plugin data keys: variableExportSettings and selectedExportThemes
• Created a usePluginData hook to standardize reading/writing shared plugin data
• Added code to save selected themes when they are changed by the user
• Enhanced the options dialog to save variable export settings as they're modified
• Updated the startup process to load saved settings and apply them during initialization
• Added selectedExportThemes to the UI state model to keep theme selection in sync

Technical Details

The implementation uses Figma's shared plugin data API to store settings in the file itself. This ensures that when multiple users work on the same file, they'll see the same export configuration.

When settings are changed:

1. Settings are serialized as JSON
2. Written to shared plugin data using the new writeSharedPluginData message handler
3. Stored in both Redux state and Figma document storage

When the plugin starts:

1. Settings are read from shared plugin data
2. Applied to the Redux store
3. Made available to the ManageStylesAndVariables component

Fixes #3373.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d5a322efc35c170593bc28de131458c58f73b3a4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

⤵️ 📦 ✨ The artifact was successfully created! Want to test it? Download it here 👀 🎁

[six7]

Getting test failures

The logs indicate that the test suite for DuplicateTokenGroupModal.test.tsx is encountering issues with warnings related to controlled components (value props without onChange handlers). Based on the retrieved content, here are the steps to resolve the issue:

Issue Analysis

The error logs highlight a warning:

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

This means some input fields in the DuplicateTokenGroupModal component are using a value prop but lack an onChange handler, rendering them read-only.

Solution

You need to ensure that:

1. All fields using the value prop have an onChange handler.
2. If the field is meant to be read-only, explicitly set the readOnly attribute.

Suggested Fix

Update the DuplicateTokenGroupModal component to include an onChange handler for inputs with the value prop. Here's an example fix:

// Inside DuplicateTokenGroupModal.jsx or DuplicateTokenGroupModal.tsx
<input
  type="text"
  value={someValue}
  onChange={(e) => setSomeValue(e.target.value)} // Ensure this handler exists
  readOnly={!isEditable} // Add readOnly condition if necessary
/>

Code Reference

The file DuplicateTokenGroupModal.test.tsx is located at:

• src/app/components/modals/DuplicateTokenGroupModal.test.tsx

The test setup file is located at:

• tests/config/setupTest.tsx

Additional Recommendations

• Ensure the onChange handler aligns with the component's state management.
• Use the customRender method from the test setup file (setupTest.tsx) to mock the state where the inputs are tested.
• Test the updated component to verify the warnings are resolved.

[six7]

can you solve my prior comment? you were stopped because of an error

[Copilot]

can you solve my prior comment? you were stopped because of an error

I've fixed the test failures by adding the readOnly attribute to the input field in DuplicateTokenGroupModal when no onChange handler is provided. This prevents the React warning about controlled components without handlers. The tests are now passing for this component. I also updated the startup tests to account for the selectedExportThemes field in the state. Changes are in commit 306f1b4.

[github-actions[bot]]

Commit SHA:efbd0c8e0b6c49dfb78e6acef60729e7099de9e4

Test coverage results :test_tube:

Code coverage diff between base branch:main and head branch: copilot/fix-3373 

Status	File	% Stmts	% Branch	% Funcs	% Lines
:red_circle:	total	67.45 (-0.09)	58.01 (-0.06)	64.07 (-0.24)	67.8 (-0.09)
:red_circle:	packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/savePluginDataFactory.ts	95 (-5)	75 (-8.33)	100 (0)	95 (-5)
:red_circle:	packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx	73.43 (-2.37)	54.16 (0)	74.54 (-2.81)	73.43 (-2.37)
:sparkles: :new:	packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/saveVariableExportSettings.ts	100	100	100	100
:red_circle:	packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/setCreateStylesWithVariableReferences.ts	33.33 (-16.67)	100 (0)	50 (0)	33.33 (-16.67)
:red_circle:	packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/setPrefixStylesWithThemeName.ts	33.33 (-16.67)	100 (0)	50 (0)	33.33 (-16.67)
:red_circle:	packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/setRemoveStylesAndVariablesWithoutConnection.ts	33.33 (-16.67)	100 (0)	50 (0)	33.33 (-16.67)
:red_circle:	packages/tokens-studio-for-figma/src/app/store/models/effects/settingsState/setRenameExistingStylesAndVariables.ts	33.33 (-16.67)	100 (0)	50 (0)	33.33 (-16.67)
:sparkles: :new:	packages/tokens-studio-for-figma/src/figmaStorage/SelectedExportThemesProperty.ts	25	0	0	25
:sparkles: :new:	packages/tokens-studio-for-figma/src/figmaStorage/VariableExportSettingsProperty.ts	25	0	0	25
:green_circle:	packages/tokens-studio-for-figma/src/plugin/controller.ts	98.14 (0.07)	100 (0)	75 (0)	100 (0)
:sparkles: :new:	packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/setSelectedExportThemes.ts	50	100	0	50
:sparkles: :new:	packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/setVariableExportSettings.ts	50	100	0	50
:sparkles: :new:	packages/tokens-studio-for-figma/src/utils/getSelectedExportThemes.ts	75	50	100	75
:sparkles: :new:	packages/tokens-studio-for-figma/src/utils/getVariableExportSettings.ts	75	50	100	75
:red_circle:	packages/tokens-studio-for-figma/src/utils/plugin/startup.ts	80 (-20)	80 (-3.33)	100 (0)	80 (-20)

[github-actions[bot]]

Commit SHA:efbd0c8e0b6c49dfb78e6acef60729e7099de9e4 Current PR reduces the test coverage percentage by 1 for some tests

[sonarqubecloud[bot]]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud