figma-plugin-utilities 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.1] - 2026-05-13
+
+### Added
+- ESLint configuration with TypeScript and Svelte support for code linting
+- Prettier setup with Svelte plugin for consistent code formatting
+- `lint` and `prettier` npm scripts for development workflow
+
+### Changed
+- Updated **ListItem** and **StatusBar** to use icon imports from `figma-ui3-kit-svelte/icons` after the UI kit icon export restructure.
+
 ## [0.3.0] - 2026-05-06
 
 WCAG 2.2 AA accessibility audit and remediation across all components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-plugin-utilities",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Shared Svelte components and utilities for Figma plugins",
   "type": "module",
   "svelte": "./src/index.js",
@@ -54,8 +54,25 @@
   ],
   "author": "Marius Roosendaal",
   "license": "MIT",
-  "dependencies": {
-    "figma-ui3-kit-svelte": "^0.5.0",
-    "svelte": "^4.2.20"
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@figma/plugin-typings": "^1.51.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@types/node": "^22.13.4",
+    "eslint": "^9.39.1",
+    "eslint-plugin-svelte": "^2.46.0",
+    "figma-ui3-kit-svelte": "file:..//_packages/figma-ui3-kit-svelte",
+    "globals": "^16.5.0",
+    "prettier": "3.7.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "^4.2.20",
+    "svelte-eslint-parser": "^0.39.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^5.2.0"
+  },
+  "scripts": {
+    "lint": "tsc --noEmit && eslint . --ext .ts,.js,.svelte && npx prettier --check \"src/**/*.{js,ts,svelte,html,css}\"",
+    "prettier": "npx prettier --write \"src/**/*.{js,ts,svelte,html,css}\""
   }
 }

package/src/components/EmptyState.svelte

@@ -30,9 +30,12 @@
   /** Whether to center vertically */
   export let centered = true;
 
-  let className = '';
+  /** ARIA role: "status" for info messages, "alert" for errors */
+  export let role = "status";
+
+  let className = "";
   export { className as class };
-  // Normalize actions
+
   $: normalizedActions = actions ? actions : action ? [action] : null;
 </script>
 
@@ -41,6 +44,7 @@
   class:centered
   class:small={size === "small"}
   class:large={size === "large"}
+  {role}
 >
   {#if icon}
     <div class="empty-state__icon" aria-hidden="true">

package/src/components/FieldGroup.svelte

@@ -1,28 +1,14 @@
 <script>
   import { Label } from "figma-ui3-kit-svelte";
 
-  /**
-   * Field group wrapper
-   * Wraps a form field with an optional label
-   *
-   * @example
-   * <FieldGroup label="Collection">
-   *   <Dropdown menuItems={options} bind:value={selected} />
-   * </FieldGroup>
-   */
-
   /** Label text (optional) */
   export let label = "";
 
-  /** For attribute for the label (optional) */
+  /** id of the associated control (optional) */
   export let labelFor = "";
 
   /** Size of the label (optional) */
   export let size = undefined;
-
-  $: if (typeof window !== "undefined" && label && !labelFor) {
-    console.warn("[FieldGroup] A label is rendered but no labelFor is set. Associate the label with its control using the labelFor prop.");
-  }
 </script>
 
 <div class="field-group" class:small={size === "small"}>

package/src/components/Footer.svelte

@@ -103,6 +103,10 @@
     width: 100%;
   }
 
+  .footer--full :global(> *) {
+    flex: 1;
+  }
+
   .footer--full :global(button) {
     flex: 1;
     width: 100%;

package/src/components/ListItem.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import { IconButton, IconMore, Menu } from "figma-ui3-kit-svelte";
+  import { IconButton, Menu } from "figma-ui3-kit-svelte";
+  import { IconMore } from "figma-ui3-kit-svelte/icons";
 
   /**
    * List item with optional action menu
@@ -73,7 +74,12 @@
     class="list-item"
     class:active
     on:click={handleClick}
-    on:keydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleClick(); } }}
+    on:keydown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick();
+      }
+    }}
     role="button"
     tabindex="0"
     aria-pressed={active}

package/src/components/LoadingState.svelte

@@ -21,7 +21,9 @@
 </script>
 
 <div class="loading-state {className}" role="status">
-  <Text variant="body-medium" color="--figma-color-text-secondary">{message}</Text>
+  <Text variant="body-medium" color="--figma-color-text-secondary"
+    >{message}</Text
+  >
 </div>
 
 <style>

package/src/components/StatusBar.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onDestroy, createEventDispatcher } from "svelte";
-  import { IconButton, IconClose } from "figma-ui3-kit-svelte";
+  import { IconButton } from "figma-ui3-kit-svelte";
+  import { IconClose } from "figma-ui3-kit-svelte/icons";
 
   // Status bar for notifications with auto-dismiss
   // Supports types: 'info', 'success', 'error', 'warning'

package/src/lib/colors.js

@@ -39,7 +39,8 @@ export function hexToRgb(hex) {
  * @returns {number} Relative luminance (0-1)
  */
 export function getLuminance({ r, g, b }) {
-  const adjust = (c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const adjust = (c) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
   return 0.2126 * adjust(r) + 0.7152 * adjust(g) + 0.0722 * adjust(b);
 }
 

package/src/lib/figma-helpers.ts

@@ -9,7 +9,7 @@
  */
 export function sendToUI<T extends Record<string, unknown>>(
   type: string,
-  data?: T
+  data?: T,
 ): void {
   if (data) {
     figma.ui.postMessage({ type, ...data });
@@ -32,7 +32,7 @@ export async function getCollections(): Promise<VariableCollection[]> {
  * @returns Promise resolving to array of variables
  */
 export async function getVariables(
-  type?: VariableResolvedDataType
+  type?: VariableResolvedDataType,
 ): Promise<Variable[]> {
   return figma.variables.getLocalVariablesAsync(type);
 }
@@ -61,7 +61,7 @@ export function showSuccess(message: string, timeout = 3000): void {
  * @returns Array of selected nodes
  */
 export function getSelection<T extends SceneNode>(
-  nodeType?: NodeType
+  nodeType?: NodeType,
 ): readonly T[] {
   const selection = figma.currentPage.selection;
   if (nodeType) {
@@ -85,10 +85,7 @@ export function focusNodes(nodes: readonly SceneNode[]): void {
  * @param family - Font family name
  * @param style - Font style (e.g., "Regular", "Bold")
  */
-export async function loadFont(
-  family: string,
-  style: string
-): Promise<void> {
+export async function loadFont(family: string, style: string): Promise<void> {
   await figma.loadFontAsync({ family, style });
 }
 
@@ -109,7 +106,7 @@ export async function saveToStorage<T>(key: string, value: T): Promise<void> {
  */
 export async function loadFromStorage<T>(
   key: string,
-  defaultValue?: T
+  defaultValue?: T,
 ): Promise<T | undefined> {
   try {
     const value = await figma.clientStorage.getAsync(key);

package/src/lib/index.js

@@ -1,8 +1,5 @@
 // Message utilities
-export {
-  sendToPlugin,
-  createMessageHandler,
-} from "./messages.js";
+export { sendToPlugin, createMessageHandler } from "./messages.js";
 
 // Color utilities
 export {

package/src/lib/resize.js

@@ -73,10 +73,10 @@ export function resizeToFit(options = {}) {
 /**
  * Set up automatic resizing when content changes
  * Uses ResizeObserver to watch for size changes
- * 
+ *
  * IMPORTANT: The container element must NOT have height: 100% or fixed height.
  * Use bind:this on a wrapper element that flows naturally with content.
- * 
+ *
  * @param {object} options - Auto-resize options
  * @param {HTMLElement} options.container - Container element to observe (required, must not have fixed height)
  * @param {number} [options.width] - Width in pixels (uses default if not specified)

package/src/lib/validation.js

@@ -58,7 +58,7 @@ export function validateUrl(url, options = { required: true }) {
     }
 
     return { valid: true };
-  } catch (err) {
+  } catch {
     return {
       valid: false,
       error: "Invalid URL format",
@@ -148,6 +148,7 @@ export function sanitizeInput(input, maxLength) {
   }
 
   // Remove null bytes and control characters (except newlines and tabs)
+  // eslint-disable-next-line no-control-regex
   str = str.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F]/g, "");
 
   // Trim whitespace