Skip to content

Commit 83dbc60

Browse files
committed
docs: add architecture document
- Add ARCHITECTURE.md to document the high-level structure and design decisions of the library.
1 parent c76244f commit 83dbc60

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

docs/ARCHITECTURE.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Project Architecture: @figma-vars/hooks
2+
3+
## Overview
4+
5+
This library provides typed React hooks and utilities for managing Figma Variables, tokens, modes, and bindings via the Figma API. The architecture is designed for strict type safety, modularity, and easy integration with modern React, Vite, and testing workflows.
6+
7+
---
8+
9+
## Directory Structure
10+
11+
- **src/** – Main source code
12+
13+
- **api/** – Figma API request logic
14+
- **constants/** – Project-wide constants
15+
- **contexts/** – React context providers and definitions
16+
- **hooks/** – Core and advanced React hooks for Figma Variables
17+
- **mutations/** – Functions and hooks for creating/updating/deleting variables
18+
- **experimental/** – Opt-in, unstable, or advanced features
19+
- **types/** – All TypeScript types, organized by domain
20+
- **utils/** – Utility functions
21+
- **index.ts** – Main entry point for library exports
22+
23+
- **tests/** – Unit and integration tests (Vitest), with mocks and setup helpers
24+
- **docs/** – Documentation and architecture guides
25+
- **.github/** – GitHub Actions workflows for CI/CD and npm publish
26+
27+
---
28+
29+
## Path Aliases (TypeScript/Vite/Vitest)
30+
31+
- All source folders under `src/` are aliased for absolute imports (e.g., `hooks/useVariables`)
32+
- See `tsconfig.json` for current aliases
33+
34+
---
35+
36+
## Key Patterns
37+
38+
- **Strict TypeScript:** All logic is strictly typed, with types separated by domain.
39+
- **Absolute Imports:** Enabled via `baseUrl` and `paths` in `tsconfig.json`, with `vite-tsconfig-paths` for Vite/Vitest compatibility.
40+
- **Composable Hooks:** Hooks are modular, composable, and follow React's best practices.
41+
- **Testing:** Vitest and Testing Library are used for unit and integration tests. Path aliases work in tests.
42+
- **CI/CD:** Automated publish via GitHub Actions and pnpm.
43+
44+
---
45+
46+
## Contributing
47+
48+
- Follow the guidelines in `CONTRIBUTING.md`.
49+
- Use absolute imports for all internal modules.
50+
- Add new types to the appropriate file in `src/types/`.
51+
- Place new hooks in `src/hooks/` or `src/experimental/` as appropriate.
52+
- Write or update tests in `tests/`.
53+
54+
---
55+
56+
## Future Improvements
57+
58+
- Expand test coverage for all hooks and utilities
59+
- Add more advanced/experimental features
60+
- Improve documentation and usage examples
61+
- Support more Figma API endpoints as needed

0 commit comments

Comments
 (0)