|
| 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