feat(utils): add case-insensitive option to filterVariables #14
Conversation
Add caseInsensitive option to filterVariables() for flexible name matching,
enabling case-agnostic search in variable filtering scenarios.
Problem:
- Users searching for 'color' wouldn't find 'Primary Color'
- No way to perform case-insensitive variable name searches
- Common UX pattern in search interfaces not supported
Solution:
- Added caseInsensitive boolean option to FilterVariablesCriteria
- When true, both variable name and search term are lowercased
- Defaults to false for backward compatibility
Usage:
import { filterVariables } from '@figma-vars/hooks';
// Case-insensitive search
filterVariables(vars, { name: 'color', caseInsensitive: true });
// Matches: 'Primary Color', 'COLOR_BG', 'MyColor'
Changes:
- src/utils/filterVariables.ts: Added caseInsensitive option + interface
- src/utils/index.ts: Export FilterVariablesCriteria type
- tests/utils/filterVariables.test.ts: Added 6 tests for case-insensitive
Test coverage: 100%
Refs: Codex Audit Item #13
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #14 +/- ##
==========================================
+ Coverage 90.90% 90.98% +0.07%
==========================================
Files 35 35
Lines 935 943 +8
Branches 263 267 +4
==========================================
+ Hits 850 858 +8
Misses 84 84
Partials 1 1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds a caseInsensitive option to the filterVariables utility function, enabling case-agnostic search when filtering Figma variables by name. This addresses a common UX pattern where users expect search to work regardless of letter casing.
Key Changes:
- Added
FilterVariablesCriteriainterface with new optionalcaseInsensitiveboolean field (defaults tofalse) - Updated
filterVariablesimplementation to perform case-insensitive name matching when enabled - Comprehensive test coverage with 6 new test cases covering various case-sensitivity scenarios
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/utils/filterVariables.ts |
Adds FilterVariablesCriteria interface and implements case-insensitive name matching logic with updated documentation |
src/utils/index.ts |
Exports the new FilterVariablesCriteria type for public API usage |
tests/utils/filterVariables.test.ts |
Adds 6 test cases covering case-insensitive matching scenarios and backward compatibility |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (criteria.caseInsensitive) { | ||
| match = | ||
| match && v.name.toLowerCase().includes(criteria.name.toLowerCase()) |
There was a problem hiding this comment.
The criteria.name.toLowerCase() is being called once per variable in the filter loop. Consider computing the lowercase search term once before the filter to improve performance, especially when filtering large arrays of variables. Store it in a constant like const lowerName = criteria.name.toLowerCase() before the filter operation and use that in the comparison.
1 participant
Add caseInsensitive option to filterVariables() for flexible name matching, enabling case-agnostic search in variable filtering scenarios.
Problem:
Solution:
Usage:
import { filterVariables } from '@figma-vars/hooks';
// Case-insensitive search filterVariables(vars, { name: 'color', caseInsensitive: true }); // Matches: 'Primary Color', 'COLOR_BG', 'MyColor'
Changes:
Test coverage: 100%
Refs: Codex Audit Item #13