Skip to content

Commit 9938b6d

Browse files
committed
docs(readme): update for 1.4.0 release
1 parent 598db4c commit 9938b6d

File tree

1 file changed

+22
-23
lines changed

1 file changed

+22
-23
lines changed

README.md

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
# @figma-vars/hooks
2-
31
<p align="left">
42
<img src="assets/figma-vars-tagline-light.png" alt="FigmaVars Logo" width="700px" />
53
</p>
@@ -110,21 +108,26 @@ Here's an example of creating a new variable:
110108
```tsx
111109
// src/components/CreateVariableForm.tsx
112110
import { useCreateVariable } from '@figma-vars/hooks'
111+
import type { CreateVariablePayload } from '@figma-vars/hooks'
113112

114-
function CreateVariableForm({ collectionId, modeId }) {
113+
function CreateVariableForm({ collectionId }: { collectionId: string }) {
115114
const { mutate, data, isLoading, error } = useCreateVariable()
116115

117-
const handleSubmit = (event) => {
116+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
118117
event.preventDefault()
119-
const variableName = event.target.elements.variableName.value
120-
121-
mutate({
122-
name: `colors/${variableName}`,
123-
collectionId: collectionId,
124-
valuesByMode: {
125-
[modeId]: { r: 1, g: 0, b: 0, a: 1 },
126-
},
127-
})
118+
const form = event.currentTarget
119+
const variableName = (
120+
form.elements.namedItem('variableName') as HTMLInputElement
121+
)?.value
122+
123+
if (!variableName) return
124+
125+
const payload: CreateVariablePayload = {
126+
name: variableName,
127+
variableCollectionId: collectionId,
128+
resolvedType: 'COLOR', // Example type
129+
}
130+
mutate(payload)
128131
}
129132

130133
return (
@@ -208,17 +211,13 @@ function ErrorHandling() {
208211
}
209212
```
210213

211-
### Documentation Generation
212-
213-
This library uses TSDoc to generate documentation. You can find the generated documentation in the `docs` folder.
214-
215214
---
216215

217216
## 🧩 API Reference
218217

219218
### Core Hooks
220219

221-
- `useVariables()`: Fetches all local variables for the file key provided to the `FigmaVarsProvider`. Returns an object with `data`, `isLoading`, and `error` properties. The `data` object contains `variables`, `variableCollections`, and `modes` from the Figma API.
220+
- `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`.
222221
- `useVariableCollections()`: A convenience hook that returns just the variable collections from the main `useVariables` data.
223222
- `useVariableModes()`: A convenience hook that returns just the variable modes from the main `useVariables` data.
224223
- `useFigmaToken()`: A simple hook to access the token and file key from the context.
@@ -227,14 +226,14 @@ This library uses TSDoc to generate documentation. You can find the generated do
227226

228227
All mutation hooks return an object with the following shape: `{ mutate, data, isLoading, error }`.
229228

230-
- `useCreateVariable()`: Creates a new variable. The `mutate` function expects the variable data as its payload.
231-
- `useUpdateVariable()`: Updates an existing variable. The `mutate` function expects an object with `id` and the `data` to update.
232-
- `useDeleteVariable()`: Deletes a variable. The `mutate` function expects the `id` of the variable to delete.
233-
- `useBulkUpdateVariables()`: Updates multiple variables in a single batch operation. The `mutate` function expects an array of variables to update.
229+
- `useCreateVariable()`: Creates a new variable. The `mutate` function expects a `CreateVariablePayload` object.
230+
- `useUpdateVariable()`: Updates an existing variable. The `mutate` function expects an object `{ variableId, payload }` where `payload` is an `UpdateVariablePayload`.
231+
- `useDeleteVariable()`: Deletes a variable. The `mutate` function expects the `variableId` (string) of the variable to delete.
232+
- `useBulkUpdateVariables()`: Creates, updates, or deletes multiple entities in a single batch operation. The `mutate` function expects a `BulkUpdatePayload` object.
234233

235234
### Types
236235

237-
All types are exported from `@figma-vars/hooks`. The core response type from Figma for local variables is `Variables_LocalVariablesResponse`.
236+
All types are exported from `@figma-vars/hooks`. The core response type from Figma for local variables is `LocalVariablesResponse`.
238237

239238
---
240239

0 commit comments

Comments
 (0)