@figma-vars/hooks 2.0.0-beta.1 → 2.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -18
- package/dist/api/index.d.ts.map +1 -1
- package/dist/api/mutator.d.ts.map +1 -1
- package/dist/constants/index.d.ts.map +1 -1
- package/dist/contexts/FigmaTokenContext.d.ts.map +1 -1
- package/dist/contexts/FigmaVarsProvider.d.ts.map +1 -1
- package/dist/contexts/index.d.ts +1 -1
- package/dist/contexts/index.d.ts.map +1 -1
- package/dist/contexts/useFigmaTokenContext.d.ts.map +1 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/useBulkUpdateVariables.d.ts.map +1 -1
- package/dist/hooks/useCreateVariable.d.ts.map +1 -1
- package/dist/hooks/useDeleteVariable.d.ts.map +1 -1
- package/dist/hooks/useFigmaToken.d.ts.map +1 -1
- package/dist/hooks/useUpdateVariable.d.ts.map +1 -1
- package/dist/hooks/useVariableCollections.d.ts.map +1 -1
- package/dist/hooks/useVariableModes.d.ts.map +1 -1
- package/dist/hooks/useVariables.d.ts +3 -1
- package/dist/hooks/useVariables.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +55 -46
- package/dist/types/contexts.d.ts.map +1 -1
- package/dist/types/figma.d.ts +3 -3
- package/dist/types/figma.d.ts.map +1 -1
- package/dist/types/hooks.d.ts.map +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/mutations.d.ts +3 -3
- package/dist/types/mutations.d.ts.map +1 -1
- package/dist/utils/filterVariables.d.ts.map +1 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/package.json +11 -2
package/README.md
CHANGED
|
@@ -26,6 +26,8 @@ Built for the modern web, this library provides a suite of hooks to fetch, manag
|
|
|
26
26
|
- **✍️ Ergonomic Mutations**: A `useMutation`-style API for creating, updating, and deleting variables, providing clear loading and error states.
|
|
27
27
|
- **🔒 TypeScript-first**: Strictly typed for an ergonomic and safe developer experience. Get autocompletion for all API responses.
|
|
28
28
|
- **📖 Storybook & Next.js Ready**: Perfect for building live design token dashboards or style guides.
|
|
29
|
+
- **🔄 Local JSON Support**: Use local JSON files exported from Figma Dev Mode plugins when you don't have a Figma Enterprise account, enabling offline development and static deployments.
|
|
30
|
+
- **🚧 Style Dictionary Integration**: Coming soon in future beta releases - seamless integration with Amazon's Style Dictionary for multi-platform design token distribution.
|
|
29
31
|
|
|
30
32
|
---
|
|
31
33
|
|
|
@@ -103,7 +105,7 @@ export function TokenList() {
|
|
|
103
105
|
|
|
104
106
|
return (
|
|
105
107
|
<ul>
|
|
106
|
-
{variables.map(
|
|
108
|
+
{variables.map(variable => (
|
|
107
109
|
<li key={variable.id}>
|
|
108
110
|
{variable.name}: {JSON.stringify(variable.valuesByMode)}
|
|
109
111
|
</li>
|
|
@@ -130,9 +132,7 @@ function CreateVariableForm({ collectionId }: { collectionId: string }) {
|
|
|
130
132
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
131
133
|
event.preventDefault()
|
|
132
134
|
const form = event.currentTarget
|
|
133
|
-
const variableName = (
|
|
134
|
-
form.elements.namedItem('variableName') as HTMLInputElement
|
|
135
|
-
)?.value
|
|
135
|
+
const variableName = (form.elements.namedItem('variableName') as HTMLInputElement)?.value
|
|
136
136
|
|
|
137
137
|
if (!variableName) return
|
|
138
138
|
|
|
@@ -147,11 +147,11 @@ function CreateVariableForm({ collectionId }: { collectionId: string }) {
|
|
|
147
147
|
return (
|
|
148
148
|
<form onSubmit={handleSubmit}>
|
|
149
149
|
<input
|
|
150
|
-
name=
|
|
151
|
-
placeholder=
|
|
150
|
+
name='variableName'
|
|
151
|
+
placeholder='New variable name'
|
|
152
152
|
/>
|
|
153
153
|
<button
|
|
154
|
-
type=
|
|
154
|
+
type='submit'
|
|
155
155
|
disabled={isLoading}>
|
|
156
156
|
{isLoading ? 'Creating...' : 'Create Variable'}
|
|
157
157
|
</button>
|
|
@@ -162,6 +162,60 @@ function CreateVariableForm({ collectionId }: { collectionId: string }) {
|
|
|
162
162
|
}
|
|
163
163
|
```
|
|
164
164
|
|
|
165
|
+
### Using Local JSON Files (No Enterprise Account Required)
|
|
166
|
+
|
|
167
|
+
If you don't have a Figma Enterprise account (required for the Variables API), you can still use this library with local JSON files exported from Figma Dev Mode plugins. This is perfect for:
|
|
168
|
+
|
|
169
|
+
- **Offline Development**: Work on your design system without an internet connection
|
|
170
|
+
- **Static Deployments**: Deploy design token dashboards to static hosting
|
|
171
|
+
- **CI/CD Pipelines**: Use exported JSON files in automated workflows
|
|
172
|
+
- **Team Collaboration**: Share design tokens without API access
|
|
173
|
+
|
|
174
|
+
#### Getting Your JSON File
|
|
175
|
+
|
|
176
|
+
We recommend using the [Variables Exporter for Dev Mode](https://www.figma.com/community/plugin/1491572182178544621) plugin:
|
|
177
|
+
|
|
178
|
+
1. Install the plugin in Figma
|
|
179
|
+
2. Open your Figma file in Dev Mode
|
|
180
|
+
3. Run the plugin and export your variables as JSON
|
|
181
|
+
4. Save the JSON file to your project (e.g., `src/assets/figma-variables.json`)
|
|
182
|
+
|
|
183
|
+
This plugin exports the exact same format that the Figma Variables API returns, ensuring perfect compatibility with this library.
|
|
184
|
+
|
|
185
|
+
#### Using the Fallback File
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
// src/main.tsx or App.tsx
|
|
189
|
+
import React from 'react'
|
|
190
|
+
import ReactDOM from 'react-dom/client'
|
|
191
|
+
import { FigmaVarsProvider } from '@figma-vars/hooks'
|
|
192
|
+
import App from './App'
|
|
193
|
+
import variablesData from './assets/figma-variables.json'
|
|
194
|
+
|
|
195
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
196
|
+
<React.StrictMode>
|
|
197
|
+
<FigmaVarsProvider
|
|
198
|
+
token={null} // No token needed when using fallbackFile
|
|
199
|
+
fileKey={null} // No fileKey needed when using fallbackFile
|
|
200
|
+
fallbackFile={variablesData}>
|
|
201
|
+
<App />
|
|
202
|
+
</FigmaVarsProvider>
|
|
203
|
+
</React.StrictMode>
|
|
204
|
+
)
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
You can also pass the JSON as a string if you prefer:
|
|
208
|
+
|
|
209
|
+
```tsx
|
|
210
|
+
import variablesJson from './assets/figma-variables.json?raw'
|
|
211
|
+
;<FigmaVarsProvider
|
|
212
|
+
token={null}
|
|
213
|
+
fileKey={null}
|
|
214
|
+
fallbackFile={variablesJson}>
|
|
215
|
+
<App />
|
|
216
|
+
</FigmaVarsProvider>
|
|
217
|
+
```
|
|
218
|
+
|
|
165
219
|
### Figma PAT Security
|
|
166
220
|
|
|
167
221
|
When using the Figma API, it's essential to keep your Personal Access Token (PAT) secure. Here are some best practices:
|
|
@@ -184,14 +238,11 @@ function AdvancedUsage() {
|
|
|
184
238
|
|
|
185
239
|
// Use the token and file key to make custom API requests
|
|
186
240
|
const apiRequest = async () => {
|
|
187
|
-
const response = await fetch(
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
},
|
|
193
|
-
}
|
|
194
|
-
)
|
|
241
|
+
const response = await fetch(`https://api.figma.com/v1/files/${fileKey}/variables`, {
|
|
242
|
+
headers: {
|
|
243
|
+
'X-Figma-Token': token,
|
|
244
|
+
},
|
|
245
|
+
})
|
|
195
246
|
|
|
196
247
|
const data = await response.json()
|
|
197
248
|
console.log(data)
|
|
@@ -231,11 +282,19 @@ function ErrorHandling() {
|
|
|
231
282
|
|
|
232
283
|
### Core Hooks
|
|
233
284
|
|
|
234
|
-
- `useVariables()`: Fetches all local variables for the file key provided to the `FigmaVarsProvider`. Returns a SWR hook state with `data`, `isLoading`, and `error` properties. The actual Figma response is in `data.data`.
|
|
285
|
+
- `useVariables()`: Fetches all local variables for the file key provided to the `FigmaVarsProvider`. Returns a SWR hook state with `data`, `isLoading`, and `error` properties. The actual Figma response is in `data.data`. When `fallbackFile` is provided, it uses the local JSON data instead of making an API request.
|
|
235
286
|
- `useVariableCollections()`: A convenience hook that returns just the variable collections from the main `useVariables` data.
|
|
236
287
|
- `useVariableModes()`: A convenience hook that returns just the variable modes from the main `useVariables` data.
|
|
237
288
|
- `useFigmaToken()`: A simple hook to access the token and file key from the context.
|
|
238
289
|
|
|
290
|
+
### Provider Props
|
|
291
|
+
|
|
292
|
+
The `FigmaVarsProvider` accepts the following props:
|
|
293
|
+
|
|
294
|
+
- `token`: Figma Personal Access Token (PAT) for API authentication. Can be `null` when using `fallbackFile`.
|
|
295
|
+
- `fileKey`: Figma file key for the target file. Required for API requests but can be `null` when using `fallbackFile`.
|
|
296
|
+
- `fallbackFile`: Optional local JSON file (as object or string) to use instead of API requests. Perfect for users without Figma Enterprise accounts.
|
|
297
|
+
|
|
239
298
|
### Mutation Hooks
|
|
240
299
|
|
|
241
300
|
All mutation hooks return an object with the following shape: `{ mutate, data, isLoading, error }`.
|
|
@@ -261,8 +320,8 @@ import { FigmaVarsProvider, useVariables } from '@figma-vars/hooks'
|
|
|
261
320
|
|
|
262
321
|
export const TokensStory = () => (
|
|
263
322
|
<FigmaVarsProvider
|
|
264
|
-
token=
|
|
265
|
-
fileKey=
|
|
323
|
+
token='YOUR_TOKEN'
|
|
324
|
+
fileKey='YOUR_FILE_KEY'>
|
|
266
325
|
<TokenList />
|
|
267
326
|
</FigmaVarsProvider>
|
|
268
327
|
)
|
package/dist/api/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mutator.d.ts","sourceRoot":"","sources":["../../src/api/mutator.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mutator.d.ts","sourceRoot":"","sources":["../../src/api/mutator.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAsB,OAAO,CAC3B,SAAS,GAAG,OAAO,EACnB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAE/D,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,EACtB,IAAI,CAAC,EAAE,KAAK,GACX,OAAO,CAAC,SAAS,CAAC,CAuCpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,kBAAkB,0BAA0B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,kBAAkB,0BAA0B,CAAA;AAEzD,eAAO,MAAM,oBAAoB,mCAAmC,CAAA;AAIpE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wBAAwB,GAAI,SAAS,MAAM,WACR,CAAA;AAEhD;;GAEG;AACH,eAAO,MAAM,6BAA6B,uCAAmC,CAAA;AAE7E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,6BAA6B,GAAI,YAAY,MAAM,WACX,CAAA;AAErD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,8BAA8B,GAAI,SAAS,MAAM,WACR,CAAA;AAEtD;;GAEG;AACH,eAAO,MAAM,iBAAiB,qBAAqB,CAAA;AAEnD;;GAEG;AACH,eAAO,MAAM,kBAAkB,kBAAkB,CAAA;AAEjD;;GAEG;AACH,eAAO,MAAM,wBAAwB,mCAAmC,CAAA;AAExE;;GAEG;AACH,eAAO,MAAM,iCAAiC,8DAA2D,CAAA;AAEzG;;GAEG;AACH,eAAO,MAAM,4BAA4B,mCAAmC,CAAA;AAE5E;;GAEG;AACH,eAAO,MAAM,gCAAgC,qCACT,CAAA;AAEpC;;GAEG;AACH,eAAO,MAAM,gCAAgC,qCACT,CAAA;AAEpC;;GAEG;AACH,eAAO,MAAM,gCAAgC,qCACT,CAAA;AAEpC;;GAEG;AACH,eAAO,MAAM,iCAAiC,8DACe,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FigmaTokenContext.d.ts","sourceRoot":"","sources":["../../src/contexts/FigmaTokenContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"FigmaTokenContext.d.ts","sourceRoot":"","sources":["../../src/contexts/FigmaTokenContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAE3D,eAAO,MAAM,iBAAiB,4DAElB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FigmaVarsProvider.d.ts","sourceRoot":"","sources":["../../src/contexts/FigmaVarsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"FigmaVarsProvider.d.ts","sourceRoot":"","sources":["../../src/contexts/FigmaVarsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,sBAAsB,EACvB,MAAM,gBAAgB,CAAA;AAGvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,GAAI,6CAK/B,sBAAsB,4CAUxB,CAAA"}
|
package/dist/contexts/index.d.ts
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
* }
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
|
-
export { FigmaVarsProvider
|
|
21
|
+
export { FigmaVarsProvider } from './FigmaVarsProvider';
|
|
22
22
|
export { useFigmaTokenContext } from './useFigmaTokenContext';
|
|
23
23
|
export { FigmaTokenContext } from './FigmaTokenContext';
|
|
24
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFigmaTokenContext.d.ts","sourceRoot":"","sources":["../../src/contexts/useFigmaTokenContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"useFigmaTokenContext.d.ts","sourceRoot":"","sources":["../../src/contexts/useFigmaTokenContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAE3D,eAAO,MAAM,oBAAoB,QAAO,qBAQvC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AACrE;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBulkUpdateVariables.d.ts","sourceRoot":"","sources":["../../src/hooks/useBulkUpdateVariables.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"useBulkUpdateVariables.d.ts","sourceRoot":"","sources":["../../src/hooks/useBulkUpdateVariables.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAOxD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,sBAAsB,4EAclC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCreateVariable.d.ts","sourceRoot":"","sources":["../../src/hooks/useCreateVariable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"useCreateVariable.d.ts","sourceRoot":"","sources":["../../src/hooks/useCreateVariable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAO5D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,gFAc7B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDeleteVariable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDeleteVariable.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,oDAc7B,
|
|
1
|
+
{"version":3,"file":"useDeleteVariable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDeleteVariable.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,oDAc7B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFigmaToken.d.ts","sourceRoot":"","sources":["../../src/hooks/useFigmaToken.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,aAAa,QAAO,MAAM,GAAG,IAGlC,
|
|
1
|
+
{"version":3,"file":"useFigmaToken.d.ts","sourceRoot":"","sources":["../../src/hooks/useFigmaToken.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,aAAa,QAAO,MAAM,GAAG,IAGlC,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUpdateVariable.d.ts","sourceRoot":"","sources":["../../src/hooks/useUpdateVariable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"useUpdateVariable.d.ts","sourceRoot":"","sources":["../../src/hooks/useUpdateVariable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAO5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB;gBAOZ,MAAM;aACT,qBAAqB;EAcnC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVariableCollections.d.ts","sourceRoot":"","sources":["../../src/hooks/useVariableCollections.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"useVariableCollections.d.ts","sourceRoot":"","sources":["../../src/hooks/useVariableCollections.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,sBAAsB;;;CAiBlC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVariableModes.d.ts","sourceRoot":"","sources":["../../src/hooks/useVariableModes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"useVariableModes.d.ts","sourceRoot":"","sources":["../../src/hooks/useVariableModes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,gBAAgB,QAAO,sBA0BnC,CAAA"}
|
|
@@ -4,7 +4,9 @@ import { LocalVariablesResponse } from '../types/figma';
|
|
|
4
4
|
*
|
|
5
5
|
* @remarks
|
|
6
6
|
* This hook uses SWR for caching and revalidation. It fetches the variables for the
|
|
7
|
-
* file key provided via the FigmaVarsProvider context.
|
|
7
|
+
* file key provided via the FigmaVarsProvider context. If a fallbackFile is provided,
|
|
8
|
+
* it will use that instead of making an API request, which is useful for users without
|
|
9
|
+
* Figma Enterprise accounts or for offline development.
|
|
8
10
|
*
|
|
9
11
|
* @returns SWR response object with `data`, `error`, `isLoading`, and `isValidating`.
|
|
10
12
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVariables.d.ts","sourceRoot":"","sources":["../../src/hooks/useVariables.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"useVariables.d.ts","sourceRoot":"","sources":["../../src/hooks/useVariables.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAGzD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,0LA+BxB,CAAA"}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),c=require("react"),_=require("swr"),p=c.createContext(void 0),g=({children:e,token:r,fileKey:t,fallbackFile:o})=>{const s=o===void 0?{token:r,fileKey:t}:{token:r,fileKey:t,fallbackFile:o};return b.jsx(p.Provider,{value:s,children:e})},l=()=>{const e=c.useContext(p);if(e===void 0)throw new Error("useFigmaTokenContext must be used within a FigmaVarsProvider");return e},h="https://api.figma.com",w=`${h}/v1/variables`,T=w,y=e=>`${w}/${e}`,v="application/json",A="X-FIGMA-TOKEN",u="A Figma API token is required.",I="An error occurred while fetching data from the Figma API.";async function V(e,r){if(!r)throw new Error(u);const t=await fetch(e,{method:"GET",headers:{[A]:r,"Content-Type":v}});if(!t.ok){let o=I;try{const s=await t.json();s!=null&&s.message&&(o=s.message)}catch{}throw new Error(o)}return t.json()}const E=()=>{const{token:e,fileKey:r,fallbackFile:t}=l(),o=async(n,a)=>t?typeof t=="string"?JSON.parse(t):t:V(n,a),s=e&&r?`https://api.figma.com/v1/files/${r}/variables/local`:null;return _(s&&e||t?[s||"fallback",e||"fallback"]:null,s&&e||t?([n,a])=>o(n,a):()=>Promise.resolve(void 0))},R=()=>{const{data:e}=E(),r=c.useMemo(()=>e!=null&&e.meta?Object.values(e.meta.variableCollections):[],[e]),t=c.useMemo(()=>e!=null&&e.meta?e.meta.variableCollections:{},[e]);return{collections:r,collectionsById:t}},C=()=>{const{data:e}=E();return c.useMemo(()=>{const r=[],t={},o={};if(e!=null&&e.meta)for(const s of Object.values(e.meta.variableCollections)){r.push(...s.modes),t[s.id]=s.modes;for(const i of s.modes)o[i.modeId]=i}return{modes:r,modesByCollectionId:t,modesById:o}},[e])};function M(e,r){switch(r.type){case"loading":return{...e,status:"loading",error:null};case"success":return{...e,status:"success",data:r.payload};case"error":return{...e,status:"error",error:r.payload};default:return e}}const d=e=>{const r={status:"idle",data:null,error:null},[t,o]=c.useReducer(M,r);return{mutate:c.useCallback(async i=>{o({type:"loading"});try{const n=await e(i);return o({type:"success",payload:n}),n}catch(n){o({type:"error",payload:n});return}},[e]),...t,isLoading:t.status==="loading",isSuccess:t.status==="success",isError:t.status==="error"}};async function m(e,r,t,o){if(!r)throw new Error(u);const n={method:{CREATE:"POST",UPDATE:"PUT",DELETE:"DELETE"}[t],headers:{"Content-Type":"application/json",[A]:r}};o&&(n.body=JSON.stringify(o));const a=await fetch(`${h}${e}`,n);if(!a.ok){const f=await a.json().catch(()=>({}));throw new Error(f.err||f.message||"An API error occurred")}return a.status===204||!a.body?{}:a.json()}const P=()=>{const{token:e}=l();return d(async t=>{if(!e)throw new Error(u);return await m(T,e,"CREATE",t)})},F=()=>{const{token:e}=l();return d(async({variableId:t,payload:o})=>{if(!e)throw new Error(u);return await m(y(t),e,"UPDATE",o)})},O=()=>{const{token:e}=l();return d(async t=>{if(!e)throw new Error(u);return await m(y(t),e,"DELETE",void 0)})},S=()=>{const{token:e}=l();return d(async t=>{if(!e)throw new Error(u);return await m(T,e,"CREATE",t)})};function D(e,r){return e.filter(t=>{let o=!0;return r.resolvedType&&(o=o&&t.resolvedType===r.resolvedType),r.name&&(o=o&&t.name.includes(r.name)),o})}exports.FigmaVarsProvider=g;exports.filterVariables=D;exports.useBulkUpdateVariables=S;exports.useCreateVariable=P;exports.useDeleteVariable=O;exports.useUpdateVariable=F;exports.useVariableCollections=R;exports.useVariableModes=C;exports.useVariables=E;
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAE5C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,OAAO,CAAA;AAEd;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAEvC;;;;;;;;;;GAUG;AACH,cAAc,OAAO,CAAA"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _ } from "react/jsx-runtime";
|
|
2
|
-
import { createContext as I, useContext as v, useMemo as d, useReducer as
|
|
3
|
-
import
|
|
4
|
-
const f = I(void 0),
|
|
2
|
+
import { createContext as I, useContext as v, useMemo as d, useReducer as g, useCallback as R } from "react";
|
|
3
|
+
import b from "swr";
|
|
4
|
+
const f = I(void 0), S = ({
|
|
5
5
|
children: t,
|
|
6
6
|
token: o,
|
|
7
7
|
fileKey: e,
|
|
@@ -12,17 +12,19 @@ const f = I(void 0), N = ({
|
|
|
12
12
|
}, u = () => {
|
|
13
13
|
const t = v(f);
|
|
14
14
|
if (t === void 0)
|
|
15
|
-
throw new Error(
|
|
15
|
+
throw new Error(
|
|
16
|
+
"useFigmaTokenContext must be used within a FigmaVarsProvider"
|
|
17
|
+
);
|
|
16
18
|
return t;
|
|
17
|
-
}, p = "https://api.figma.com", h = `${p}/v1/variables`, w = h, A = (t) => `${h}/${t}`,
|
|
18
|
-
async function
|
|
19
|
+
}, p = "https://api.figma.com", h = `${p}/v1/variables`, w = h, A = (t) => `${h}/${t}`, C = "application/json", T = "X-FIGMA-TOKEN", i = "A Figma API token is required.", P = "An error occurred while fetching data from the Figma API.";
|
|
20
|
+
async function F(t, o) {
|
|
19
21
|
if (!o)
|
|
20
|
-
throw new Error(
|
|
22
|
+
throw new Error(i);
|
|
21
23
|
const e = await fetch(t, {
|
|
22
24
|
method: "GET",
|
|
23
25
|
headers: {
|
|
24
26
|
[T]: o,
|
|
25
|
-
"Content-Type":
|
|
27
|
+
"Content-Type": C
|
|
26
28
|
}
|
|
27
29
|
});
|
|
28
30
|
if (!e.ok) {
|
|
@@ -37,12 +39,12 @@ async function M(t, o) {
|
|
|
37
39
|
return e.json();
|
|
38
40
|
}
|
|
39
41
|
const y = () => {
|
|
40
|
-
const { token: t, fileKey: o } = u(), e = t && o ? `https://api.figma.com/v1/files/${o}/variables/local` : null;
|
|
41
|
-
return
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
const { token: t, fileKey: o, fallbackFile: e } = u(), r = async (n, a) => e ? typeof e == "string" ? JSON.parse(e) : e : F(n, a), s = t && o ? `https://api.figma.com/v1/files/${o}/variables/local` : null;
|
|
43
|
+
return b(
|
|
44
|
+
s && t || e ? [s || "fallback", t || "fallback"] : null,
|
|
45
|
+
s && t || e ? ([n, a]) => r(n, a) : () => Promise.resolve(void 0)
|
|
44
46
|
);
|
|
45
|
-
},
|
|
47
|
+
}, V = () => {
|
|
46
48
|
const { data: t } = y(), o = d(
|
|
47
49
|
() => t != null && t.meta ? Object.values(t.meta.variableCollections) : [],
|
|
48
50
|
[t]
|
|
@@ -54,15 +56,17 @@ const y = () => {
|
|
|
54
56
|
collections: o,
|
|
55
57
|
collectionsById: e
|
|
56
58
|
};
|
|
57
|
-
},
|
|
59
|
+
}, k = () => {
|
|
58
60
|
const { data: t } = y();
|
|
59
61
|
return d(() => {
|
|
60
62
|
const o = [], e = {}, r = {};
|
|
61
63
|
if (t != null && t.meta)
|
|
62
|
-
for (const s of Object.values(
|
|
64
|
+
for (const s of Object.values(
|
|
65
|
+
t.meta.variableCollections
|
|
66
|
+
)) {
|
|
63
67
|
o.push(...s.modes), e[s.id] = s.modes;
|
|
64
|
-
for (const
|
|
65
|
-
r[
|
|
68
|
+
for (const c of s.modes)
|
|
69
|
+
r[c.modeId] = c;
|
|
66
70
|
}
|
|
67
71
|
return {
|
|
68
72
|
modes: o,
|
|
@@ -88,16 +92,16 @@ const l = (t) => {
|
|
|
88
92
|
status: "idle",
|
|
89
93
|
data: null,
|
|
90
94
|
error: null
|
|
91
|
-
}, [e, r] =
|
|
95
|
+
}, [e, r] = g(O, o);
|
|
92
96
|
return {
|
|
93
|
-
mutate:
|
|
94
|
-
async (
|
|
97
|
+
mutate: R(
|
|
98
|
+
async (c) => {
|
|
95
99
|
r({ type: "loading" });
|
|
96
100
|
try {
|
|
97
|
-
const
|
|
98
|
-
return r({ type: "success", payload:
|
|
99
|
-
} catch (
|
|
100
|
-
r({ type: "error", payload:
|
|
101
|
+
const n = await t(c);
|
|
102
|
+
return r({ type: "success", payload: n }), n;
|
|
103
|
+
} catch (n) {
|
|
104
|
+
r({ type: "error", payload: n });
|
|
101
105
|
return;
|
|
102
106
|
}
|
|
103
107
|
},
|
|
@@ -111,8 +115,8 @@ const l = (t) => {
|
|
|
111
115
|
};
|
|
112
116
|
async function m(t, o, e, r) {
|
|
113
117
|
if (!o)
|
|
114
|
-
throw new Error(
|
|
115
|
-
const
|
|
118
|
+
throw new Error(i);
|
|
119
|
+
const n = {
|
|
116
120
|
method: {
|
|
117
121
|
CREATE: "POST",
|
|
118
122
|
UPDATE: "PUT",
|
|
@@ -123,19 +127,21 @@ async function m(t, o, e, r) {
|
|
|
123
127
|
[T]: o
|
|
124
128
|
}
|
|
125
129
|
};
|
|
126
|
-
r && (
|
|
127
|
-
const
|
|
128
|
-
if (!
|
|
129
|
-
const E = await
|
|
130
|
-
throw new Error(
|
|
130
|
+
r && (n.body = JSON.stringify(r));
|
|
131
|
+
const a = await fetch(`${p}${t}`, n);
|
|
132
|
+
if (!a.ok) {
|
|
133
|
+
const E = await a.json().catch(() => ({}));
|
|
134
|
+
throw new Error(
|
|
135
|
+
E.err || E.message || "An API error occurred"
|
|
136
|
+
);
|
|
131
137
|
}
|
|
132
|
-
return
|
|
138
|
+
return a.status === 204 || !a.body ? {} : a.json();
|
|
133
139
|
}
|
|
134
|
-
const
|
|
140
|
+
const B = () => {
|
|
135
141
|
const { token: t } = u();
|
|
136
142
|
return l(async (e) => {
|
|
137
143
|
if (!t)
|
|
138
|
-
throw new Error(
|
|
144
|
+
throw new Error(i);
|
|
139
145
|
return await m(
|
|
140
146
|
w,
|
|
141
147
|
t,
|
|
@@ -143,12 +149,15 @@ const G = () => {
|
|
|
143
149
|
e
|
|
144
150
|
);
|
|
145
151
|
});
|
|
146
|
-
},
|
|
152
|
+
}, G = () => {
|
|
147
153
|
const { token: t } = u();
|
|
148
154
|
return l(
|
|
149
|
-
async ({
|
|
155
|
+
async ({
|
|
156
|
+
variableId: e,
|
|
157
|
+
payload: r
|
|
158
|
+
}) => {
|
|
150
159
|
if (!t)
|
|
151
|
-
throw new Error(
|
|
160
|
+
throw new Error(i);
|
|
152
161
|
return await m(
|
|
153
162
|
A(e),
|
|
154
163
|
t,
|
|
@@ -157,11 +166,11 @@ const G = () => {
|
|
|
157
166
|
);
|
|
158
167
|
}
|
|
159
168
|
);
|
|
160
|
-
},
|
|
169
|
+
}, j = () => {
|
|
161
170
|
const { token: t } = u();
|
|
162
171
|
return l(async (e) => {
|
|
163
172
|
if (!t)
|
|
164
|
-
throw new Error(
|
|
173
|
+
throw new Error(i);
|
|
165
174
|
return await m(
|
|
166
175
|
A(e),
|
|
167
176
|
t,
|
|
@@ -173,7 +182,7 @@ const G = () => {
|
|
|
173
182
|
const { token: t } = u();
|
|
174
183
|
return l(async (e) => {
|
|
175
184
|
if (!t)
|
|
176
|
-
throw new Error(
|
|
185
|
+
throw new Error(i);
|
|
177
186
|
return await m(
|
|
178
187
|
w,
|
|
179
188
|
t,
|
|
@@ -189,13 +198,13 @@ function x(t, o) {
|
|
|
189
198
|
});
|
|
190
199
|
}
|
|
191
200
|
export {
|
|
192
|
-
|
|
201
|
+
S as FigmaVarsProvider,
|
|
193
202
|
x as filterVariables,
|
|
194
203
|
L as useBulkUpdateVariables,
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
204
|
+
B as useCreateVariable,
|
|
205
|
+
j as useDeleteVariable,
|
|
206
|
+
G as useUpdateVariable,
|
|
207
|
+
V as useVariableCollections,
|
|
208
|
+
k as useVariableModes,
|
|
200
209
|
y as useVariables
|
|
201
210
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../src/types/contexts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../src/types/contexts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;OAGG;IACH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAAA;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;OAGG;IACH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAAA;CAC/C"}
|
package/dist/types/figma.d.ts
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*
|
|
12
12
|
* @public
|
|
13
13
|
*/
|
|
14
|
-
export type ResolvedType =
|
|
14
|
+
export type ResolvedType = 'BOOLEAN' | 'FLOAT' | 'STRING' | 'COLOR';
|
|
15
15
|
/**
|
|
16
16
|
* Enum of all valid Figma variable scopes.
|
|
17
17
|
*
|
|
@@ -26,7 +26,7 @@ export type ResolvedType = "BOOLEAN" | "FLOAT" | "STRING" | "COLOR";
|
|
|
26
26
|
*
|
|
27
27
|
* @public
|
|
28
28
|
*/
|
|
29
|
-
export type VariableScope =
|
|
29
|
+
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';
|
|
30
30
|
/**
|
|
31
31
|
* RGBA color value used by Figma variables of type COLOR.
|
|
32
32
|
*
|
|
@@ -66,7 +66,7 @@ export interface Color {
|
|
|
66
66
|
*/
|
|
67
67
|
export interface VariableAlias {
|
|
68
68
|
/** Type identifier for variable alias objects. Always 'VARIABLE_ALIAS'. */
|
|
69
|
-
type:
|
|
69
|
+
type: 'VARIABLE_ALIAS';
|
|
70
70
|
/** The referenced variable's Figma variable ID. */
|
|
71
71
|
id: string;
|
|
72
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"figma.d.ts","sourceRoot":"","sources":["../../src/types/figma.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,
|
|
1
|
+
{"version":3,"file":"figma.d.ts","sourceRoot":"","sources":["../../src/types/figma.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEnE;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,aAAa,GACrB,YAAY,GACZ,cAAc,GACd,eAAe,GACf,cAAc,GACd,KAAK,GACL,cAAc,GACd,SAAS,GACT,cAAc,GACd,aAAa,GACb,WAAW,GACX,aAAa,GACb,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,iBAAiB,GACjB,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,cAAc,GACd,cAAc,CAAA;AAElB;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,yBAAyB;IACzB,CAAC,EAAE,MAAM,CAAA;IACT,wBAAwB;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,mCAAmC;IACnC,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,IAAI,EAAE,gBAAgB,CAAA;IACtB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;CACX;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,aAAa,CAAA;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,MAAM,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAC3C,WAAW,EAAE,MAAM,CAAA;IACnB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,YAAY;IAC3B,qBAAqB;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE;QACJ,wDAAwD;QACxD,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;QACpD,oDAAoD;QACpD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;KACzC,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAA;CAChB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/types/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/types/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAExD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,kBAAkB;IACjC,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAA;IAClB,mEAAmE;IACnE,OAAO,EAAE,qBAAqB,CAAA;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,sBAAsB;IACrC,0DAA0D;IAC1D,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IACnD,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;CACxC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,cAAc,aAAa,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA"}
|
|
@@ -80,7 +80,7 @@ export interface UpdateVariablePayload {
|
|
|
80
80
|
*
|
|
81
81
|
* @public
|
|
82
82
|
*/
|
|
83
|
-
export type VariableAction =
|
|
83
|
+
export type VariableAction = 'CREATE' | 'UPDATE' | 'DELETE';
|
|
84
84
|
/**
|
|
85
85
|
* Represents a change operation on a Figma variable collection.
|
|
86
86
|
*
|
|
@@ -288,7 +288,7 @@ export interface BulkUpdateResponse {
|
|
|
288
288
|
* @public
|
|
289
289
|
*/
|
|
290
290
|
export interface MutationState<TData> {
|
|
291
|
-
status:
|
|
291
|
+
status: 'idle' | 'loading' | 'success' | 'error';
|
|
292
292
|
data: TData | null;
|
|
293
293
|
error: Error | null;
|
|
294
294
|
}
|
|
@@ -305,7 +305,7 @@ export interface MutationState<TData> {
|
|
|
305
305
|
*/
|
|
306
306
|
export interface MutationResult<TData, TPayload> {
|
|
307
307
|
mutate: (payload: TPayload) => Promise<TData | undefined>;
|
|
308
|
-
status:
|
|
308
|
+
status: 'idle' | 'loading' | 'success' | 'error';
|
|
309
309
|
data: TData | null;
|
|
310
310
|
error: Error | null;
|
|
311
311
|
isLoading: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../src/types/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../src/types/mutations.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filterVariables.d.ts","sourceRoot":"","sources":["../../src/utils/filterVariables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"filterVariables.d.ts","sourceRoot":"","sources":["../../src/utils/filterVariables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,aAAa,EAAE,EAC1B,QAAQ,EAAE;IAAE,YAAY,CAAC,EAAE,YAAY,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACvD,aAAa,EAAE,CAQjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@figma-vars/hooks",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.3",
|
|
4
4
|
"description": "Typed React hooks for managing Figma Variables, modes, tokens, and bindings via API.",
|
|
5
5
|
"author": "Mark Learst",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,6 +34,11 @@
|
|
|
34
34
|
"engines": {
|
|
35
35
|
"node": ">=20.0.0"
|
|
36
36
|
},
|
|
37
|
+
"lint-staged": {
|
|
38
|
+
"*.{js,jsx,ts,tsx,json,md}": [
|
|
39
|
+
"prettier --write"
|
|
40
|
+
]
|
|
41
|
+
},
|
|
37
42
|
"peerDependencies": {
|
|
38
43
|
"react": "^18.3.1 || ^19.0.0",
|
|
39
44
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
@@ -73,7 +78,10 @@
|
|
|
73
78
|
"@vitest/coverage-v8": "^2.0.5",
|
|
74
79
|
"@vitest/ui": "2.1.9",
|
|
75
80
|
"dotenv": "^16.5.0",
|
|
81
|
+
"husky": "^9.1.7",
|
|
76
82
|
"jsdom": "^26.1.0",
|
|
83
|
+
"lint-staged": "^16.1.5",
|
|
84
|
+
"prettier": "^3.6.2",
|
|
77
85
|
"publint": "^0.3.1",
|
|
78
86
|
"react": "^19.0.0",
|
|
79
87
|
"react-dom": "^19.0.0",
|
|
@@ -103,7 +111,8 @@
|
|
|
103
111
|
"build": "tsc && vite build",
|
|
104
112
|
"postbuild": "cp dist/index.d.ts dist/index.d.cts || copy dist/index.d.ts dist/index.d.cts",
|
|
105
113
|
"lint": "biome format --write .",
|
|
106
|
-
"format": "
|
|
114
|
+
"format": "prettier --write .",
|
|
115
|
+
"format:check": "prettier --check .",
|
|
107
116
|
"preview": "vite preview",
|
|
108
117
|
"test": "vitest",
|
|
109
118
|
"test:ui": "vitest --ui",
|