@figma-vars/hooks 1.1.1 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma-vars/hooks",
-  "version": "1.1.1",
+  "version": "1.3.1",
   "description": "Typed React hooks for managing Figma Variables, modes, tokens, and bindings via API.",
   "author": "Mark Learst",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "sideEffects": false,
   "exports": {
@@ -52,14 +52,21 @@
     "url": "https://github.com/sponsors/marklearst"
   },
   "devDependencies": {
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.0.3",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/coverage-v8": "^2.0.5",
+    "jsdom": "^26.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.0.5"
   },
   "directories": {
     "doc": "docs"
@@ -70,7 +77,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
+    "test": "vitest",
     "postversion": "git push && git push --tags"
   }
 }

package/dist/constants/index.d.ts

@@ -1,3 +0,0 @@
-export declare const FIGMA_API_BASE_URL = "https://api.figma.com";
-export declare const FIGMA_FILES_ENDPOINT = "https://api.figma.com/v1/files";
-export declare const FIGMA_VARIABLES_ENDPOINT: (fileKey: string) => string;

package/dist/contexts/FigmaTokenContext.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-interface FigmaTokenContextType {
-    token: string | null;
-}
-interface FigmaVarsProviderProps {
-    children: ReactNode;
-    token: string | null;
-}
-export declare const FigmaVarsProvider: ({ children, token, }: FigmaVarsProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useFigmaTokenContext: () => FigmaTokenContextType;
-export {};

package/dist/hooks/useFigmaToken.d.ts

@@ -1,6 +0,0 @@
-/**
- * Retrieves the Figma API token from the FigmaVarsProvider.
- * This hook must be used within a component wrapped by FigmaVarsProvider.
- */
-declare const useFigmaToken: () => string | null;
-export default useFigmaToken;

package/dist/hooks/useVariableCollections.d.ts

@@ -1,13 +0,0 @@
-import { FigmaCollection } from 'types';
-/**
- * A hook to fetch all variable collections for a given file.
- * @param fileKey - The key of the Figma file to fetch collections from.
- * @returns An object containing the variable collections, loading state, and any errors.
- */
-export declare const useVariableCollections: (fileKey: string) => {
-    collections: FigmaCollection[];
-    collectionsById: Record<string, FigmaCollection>;
-    isLoading: boolean;
-    isValidating: boolean;
-    error: any;
-};

package/dist/hooks/useVariableModes.d.ts

@@ -1,8 +0,0 @@
-import { UseVariableModesResult } from '../types/hooks';
-/**
- * A hook to fetch all variable modes for a given file.
- *
- * @param fileKey - The key of the file to fetch variables from.
- * @returns An object containing the variable modes, loading state, and any errors.
- */
-export declare const useVariableModes: (fileKey: string) => UseVariableModesResult;

package/dist/hooks/useVariables.d.ts

@@ -1,14 +0,0 @@
-import { FigmaVariable } from 'types';
-/**
- * A hook to fetch all local variables for a given file.
- *
- * @param fileKey - The key of the file to fetch variables from.
- * @returns An object containing the variables, loading state, and any errors.
- */
-export declare const useVariables: (fileKey: string) => {
-    variables: FigmaVariable[];
-    variablesById: Record<string, FigmaVariable>;
-    isLoading: boolean;
-    isValidating: boolean;
-    error: any;
-};

package/dist/mutations/bulkUpdateVariables.d.ts

@@ -1,7 +0,0 @@
-import { BulkUpdatePayload, BulkUpdateResponse } from '../types/mutations';
-export declare const useBulkUpdateVariables: () => {
-    bulkUpdate: (fileKey: string, payload: BulkUpdatePayload) => Promise<void>;
-    loading: boolean;
-    error: string | null;
-    data: BulkUpdateResponse | null;
-};

package/dist/mutations/createVariable.d.ts

@@ -1,7 +0,0 @@
-import { CreateVariablePayload, VariableActionResponse } from '../types/mutations';
-export declare const useCreateVariable: () => {
-    createVariable: (payload: CreateVariablePayload) => Promise<void>;
-    loading: boolean;
-    error: string | null;
-    data: VariableActionResponse | null;
-};

package/dist/mutations/deleteVariable.d.ts

@@ -1,7 +0,0 @@
-import { VariableActionResponse } from '../types/mutations';
-export declare const useDeleteVariable: () => {
-    deleteVariable: (variableId: string) => Promise<void>;
-    loading: boolean;
-    error: string | null;
-    data: Omit<VariableActionResponse, "variable"> | null;
-};

package/dist/mutations/updateVariable.d.ts

@@ -1,7 +0,0 @@
-import { UpdateVariablePayload, VariableActionResponse } from '../types/mutations';
-export declare const useUpdateVariable: () => {
-    updateVariable: (variableId: string, payload: UpdateVariablePayload) => Promise<void>;
-    loading: boolean;
-    error: string | null;
-    data: VariableActionResponse | null;
-};

package/dist/types/figma.d.ts

@@ -1,48 +0,0 @@
-export type ResolvedType = 'BOOLEAN' | 'FLOAT' | 'STRING' | 'COLOR';
-export type VariableScope = 'ALL_SCOPES' | 'TEXT_CONTENT' | 'CORNER_RADIUS' | 'WIDTH_HEIGHT' | 'GAP' | 'STROKE_FLOAT' | 'OPACITY' | 'EFFECT_FLOAT' | 'FONT_WEIGHT' | 'FONT_SIZE' | 'LINE_HEIGHT' | 'LETTER_SPACING' | 'PARAGRAPH_SPACING' | 'PARAGRAPH_INDENT' | 'FONT_FAMILY' | 'FONT_STYLE' | 'FONT_VARIATIONS' | 'ALL_FILLS' | 'FRAME_FILL' | 'SHAPE_FILL' | 'TEXT_FILL' | 'STROKE_COLOR' | 'EFFECT_COLOR';
-export interface Color {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}
-export interface VariableAlias {
-    type: 'VARIABLE_ALIAS';
-    id: string;
-}
-export type VariableValue = string | boolean | number | Color | VariableAlias;
-export interface FigmaVariable {
-    id: string;
-    name: string;
-    variableCollectionId: string;
-    resolvedType: ResolvedType;
-    valuesByMode: Record<string, VariableValue>;
-    description: string;
-    hiddenFromPublishing: boolean;
-    scopes: VariableScope[];
-    codeSyntax: Record<string, string>;
-    updatedAt: string;
-}
-export interface VariableMode {
-    modeId: string;
-    name: string;
-}
-export interface FigmaCollection {
-    id: string;
-    name: string;
-    modes: VariableMode[];
-    defaultModeId: string;
-    variableIds: string[];
-    hiddenFromPublishing: boolean;
-    updatedAt: string;
-}
-export interface LocalVariablesResponse {
-    meta: {
-        variableCollections: Record<string, FigmaCollection>;
-        variables: Record<string, FigmaVariable>;
-    };
-}
-export interface FigmaError {
-    statusCode: number;
-    message: string;
-}

package/dist/types/hooks.d.ts

@@ -1,19 +0,0 @@
-import { VariableMode } from './figma';
-export interface HookState<T> {
-    data: T | null;
-    loading: boolean;
-    error: Error | null;
-}
-export interface UseVariableModesResult {
-    modes: VariableMode[];
-    modesByCollectionId: Record<string, VariableMode[]>;
-    modesById: Record<string, VariableMode>;
-    isLoading: boolean;
-    isValidating: boolean;
-    error: Error | null;
-}
-export interface SyncStatus {
-    isSyncing: boolean;
-    lastSynced: Date | null;
-    error: string | null;
-}

package/dist/types/index.d.ts

@@ -1,3 +0,0 @@
-export * from './figma';
-export * from './hooks';
-export * from './mutations';

package/dist/types/mutations.d.ts

@@ -1,76 +0,0 @@
-import { FigmaVariable, ResolvedType, VariableScope, VariableValue } from './figma';
-export interface FigmaOperationResponse {
-    success: boolean;
-    message?: string;
-}
-export interface VariableValueUpdate {
-    modeId: string;
-    value: string;
-}
-export type SpecificType = VariableValueUpdate[];
-export interface CreateVariablePayload {
-    name: string;
-    variableCollectionId: string;
-    resolvedType: ResolvedType;
-    description?: string;
-    hiddenFromPublishing?: boolean;
-    scopes?: VariableScope[];
-    codeSyntax?: Record<string, string>;
-}
-export interface VariableActionResponse {
-    error: boolean;
-    status: number;
-    message?: string;
-    variable?: FigmaVariable;
-}
-export interface UpdateVariablePayload {
-    name?: string;
-    description?: string;
-    hiddenFromPublishing?: boolean;
-    scopes?: VariableScope[];
-    codeSyntax?: Record<string, string>;
-}
-export type VariableAction = 'CREATE' | 'UPDATE' | 'DELETE';
-export interface VariableCollectionChange {
-    action: VariableAction;
-    id: string;
-    name?: string;
-    initialModeId?: string;
-    hiddenFromPublishing?: boolean;
-}
-export interface VariableModeChange {
-    action: VariableAction;
-    id: string;
-    name?: string;
-    variableCollectionId: string;
-}
-export interface VariableChange {
-    action: VariableAction;
-    id: string;
-    name?: string;
-    variableCollectionId?: string;
-    resolvedType?: ResolvedType;
-    description?: string;
-    hiddenFromPublishing?: boolean;
-    scopes?: VariableScope[];
-    codeSyntax?: Record<string, string>;
-}
-export interface VariableModeValue {
-    variableId: string;
-    modeId: string;
-    value: VariableValue;
-}
-export interface BulkUpdatePayload {
-    variableCollections?: VariableCollectionChange[];
-    variableModes?: VariableModeChange[];
-    variables?: VariableChange[];
-    variableModeValues?: VariableModeValue[];
-}
-export interface BulkUpdateResponse {
-    error: boolean;
-    status: number;
-    message?: string;
-    meta?: {
-        tempIdToRealId: Record<string, string>;
-    };
-}

package/dist/utils/authHelpers.d.ts

@@ -1,4 +0,0 @@
-/**
- * Retrieves the Figma API token from environment variables or any other secure storage mechanism you've implemented.
- */
-export declare const getFigmaToken: () => string | null;

package/dist/utils/fetchHelpers.d.ts

@@ -1,10 +0,0 @@
-interface FetchOptions {
-    method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
-    body?: BodyInit | null;
-    headers?: HeadersInit;
-}
-/**
- * A helper function for making authenticated fetch requests to the Figma API.
- */
-export declare const fetchWithAuth: (url: string, options?: FetchOptions) => Promise<any>;
-export {};

package/dist/utils/filterVariables.d.ts

@@ -1,5 +0,0 @@
-import { FigmaVariable, ResolvedType } from 'types';
-export declare function filterVariables(variables: FigmaVariable[], criteria: {
-    resolvedType?: ResolvedType;
-    name?: string;
-}): FigmaVariable[];