figma-inspector: added em dash to the sanitizers (#8320)

Author: szecket

tools/figma-inspector/backend/utils/export-variables.ts

@@ -40,6 +40,7 @@ export function formatStructName(name: string): string {
         .replace(/,\s*/g, "-") // Replace commas (and following spaces) with hyphens
         .replace(/\+/g, "-") // Replace + with hyphens (add this line)
         .replace(/\:/g, "-") // Replace : with ""
+        .replace(/—/g, "-") // Replace em dash hyphens
         .replace(/([a-z])([A-Z])/g, "$1-$2") // Add hyphens between camelCase
         .replace(/\s+/g, "-") // Convert spaces to hyphens
         .replace(/--+/g, "-") // Normalize multiple consecutive hyphens to single
@@ -65,6 +66,7 @@ export function sanitizePropertyName(name: string): string {
         .replace(/&/g, "and") // Replace &
         .replace(/\(/g, "_") // Replace ( with _
         .replace(/\)/g, "_") // Replace ) with _
+        .replace(/—/g, "_") // Replace em dash with underscore
         .replace(/[^a-zA-Z0-9_]/g, "_") // Replace other invalid chars (including -, +, :, etc.) with _
         .replace(/__+/g, "_"); // Collapse multiple underscores
 

tools/figma-inspector/src/main.tsx

@@ -6,7 +6,7 @@ import { getColorTheme, subscribeColorTheme } from "./utils/bolt-utils";
 import CodeSnippet from "./components/snippet/CodeSnippet";
 import { ExportType, useInspectorStore } from "./utils/store";
 import DialogFrame from "./components/DialogFrame.js";
-import { Button, Checkbox, DropdownMenu, Text } from "figma-kit";
+import { Text, Button, Checkbox, DropdownMenu } from "figma-kit";
 import "./main.css";
 
 export const App = () => {
@@ -102,40 +102,63 @@ export const App = () => {
                     />
                 </DialogFrame.Content>
                 <DialogFrame.Footer>
-                    <div className="border border-secondary  border-[var(--figma-color-bg-brand)]">
-                        <Text className="text-[var(--figma-color-bg-brand)]">
-                            Welcome to Figma
-                        </Text>
-                    </div>
+                    <Checkbox.Root>
+                        <Checkbox.Input
+                            checked={useVariables}
+                            onChange={(e) => setUseVariables(e.target.checked)}
+                        />
+                        <Checkbox.Label>Use Figma Variables</Checkbox.Label>
+                    </Checkbox.Root>
+
                     <DropdownMenu.Root>
                         <DropdownMenu.Trigger asChild>
-                            <Button>Export</Button>
+                            <Button
+                                variant={
+                                    exportsAreCurrent ? "secondary" : "primary"
+                                }
+                                style={{
+                                    visibility: useVariables
+                                        ? "visible"
+                                        : "hidden",
+                                }}
+                            >
+                                Export
+                            </Button>
                         </DropdownMenu.Trigger>
-                        <DropdownMenu.Content style={{}}>
+                        <DropdownMenu.Content>
                             <DropdownMenu.Item
                                 onClick={() =>
                                     exportFiles(ExportType.SeparateFiles)
                                 }
                             >
-                                Separate Files…
+                                Separate Files Per Collection…
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                                 onClick={() =>
                                     exportFiles(ExportType.SingleFile)
                                 }
                             >
-                                Single File…
+                                Singl Design-Tokens File…
                             </DropdownMenu.Item>
                         </DropdownMenu.Content>
                     </DropdownMenu.Root>
-
-                    <Checkbox.Root>
-                        <Checkbox.Input
-                            checked={useVariables}
-                            onChange={(e) => setUseVariables(e.target.checked)}
-                        />
-                        <Checkbox.Label>Use Figma Variables</Checkbox.Label>
-                    </Checkbox.Root>
+                    <Text
+                        style={{
+                            color: exportsAreCurrent
+                                ? "var(--figma-color-text-disabled)"
+                                : "var(--figma-color-text-primary",
+                        }}
+                    >
+                        {useVariables ? (
+                            exportsAreCurrent ? (
+                                <em>Exports are current</em>
+                            ) : (
+                                "Either variables have changed or no export found"
+                            )
+                        ) : (
+                            ""
+                        )}
+                    </Text>
                 </DialogFrame.Footer>
             </DialogFrame>
         </>