Jakob WennbergandClaude Opus 4.7
f8f49f8426
* feat(inbox): skip AI extraction for multi-page PDFs (#553) Bedrock churns for minutes on multi-page PDFs (sales reports, bank statements, contracts) and returns nothing useful. Above 3 pages we now skip extraction entirely and mark the row with extraction_skipped=true; the document still lands in the inbox and can be attached or converted manually. Same gate applies to the /items/:id/attach path. Client can also opt out via skip_extraction=true (skip_reason=client_opt_out). The InvoiceInboxWorkspace renders an "Inte AI-tolkad" badge for skipped rows, distinct from the "Felaktig" failure state (status='error'). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(ui): introduce DataList + DropdownMenu primitives, roll out across list pages DataList replaces the per-row Card pattern across Granskning, Transactions, Invoices, Supplier invoices, and Pending. One bordered container with hairline rows matches the flat-with-hairlines aesthetic in CLAUDE.md — no shadows, no state-tinted borders, secondary token for selected/hover. DropdownMenu fills the gap for row-level action menus on TransactionInboxCard, TransactionHistoryList, and the page-level action menus on /transactions and /pending. Replaces ad-hoc Popover + buttons constructions. Migrates list pages and the transaction inbox/history components onto the new primitives. No behavior change beyond the visual unification. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore: add agent skills + gnubok domain skills, gitignore compliance reports .agents/skills/ + skills-lock.json + symlinks under .claude/skills/ check in the vercel-labs/agent-skills set pinned by the local skill manager (deploy-to-vercel, vercel-cli-with-tokens, react-best-practices, composition-patterns, react-native-skills, react-view-transitions, web-design-guidelines). Keeps the team on the same versions. .claude/skills/industry/ + .claude/skills/modifier/ are hand-authored vertical and entity-modifier skills for the specialized accountant agent — industries (konsult-it, e-handel, bygg-hantverk, reklambyra, saas-ai) and entity overlays (holding-ab, single-shareholder-ab-fmb, mixed- verksamhet). Project-owned content; lives in the repo by design. Also gitignores .compliance-reports/ — those are large generated SARIF/dossier artifacts from the compliance scanner. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(transactions): unify inbox/history chrome, drop swipe flow The transactions page mixed two-tier filtering, a swipe-view detour, and per-row Card chrome that didn't carry its weight. This pass collapses those into a single editorial-list surface and removes the unused swipe path entirely. User-visible changes: - Mode toggle (Att bokföra / Alla transaktioner) moved from a Tabs row under the header into a dropdown to the right of a unified search bar. Search now persists when switching modes. - Removed the swipe categorization view ("Gå igenom alla") and its trigger button. The 800-line SwipeCategorizationView component is deleted; suggestion-fetching shrinks to what the template picker still consumes. - Inbox rows now show one primary action: invoice/supplier-invoice match shortcut when auto-detected, else "Bokför". A new visible Link2 icon button opens the customer or supplier invoice picker manually (chosen by amount sign). Delete becomes a plain trash button — no overflow menu since it only ever held one item. - Bulk action bar swaps "Markera som privat" for "Ta bort" with a single combined confirmation. - Built SupplierInvoicePicker mirroring InvoicePicker so expense transactions can be matched to supplier invoices from the inbox. Wired through /api/transactions/{id}/match-supplier-invoice. - Template picker dialog renamed to "Bokför transaktion"; "Bokför manuellt…" and "Matcha med faktura…" promoted from muted ghost buttons at the bottom to outline buttons at the top, above the template list. - Breathing room: row padding py-3 → py-4, primary text text-sm → text-base, amount text-base, button heights h-8 → h-9, trailing gap-2 → gap-3 (in the DataList primitive itself, so every list benefits slightly). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: align package-lock.json with merged package.json The merge resolution took origin/main's package-lock.json (which dropped pdf-lib) but kept our package.json (which still requires pdf-lib for the invoice-inbox extension's PDFDocument import). `npm ci` rejected the mismatch. Regenerate the lock from the merged package.json so both files agree. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: regenerate package-lock.json with npm@10 for CI compat Local npm@11 produced a lock that npm@10 (CI) rejected with "Missing: @swc/helpers@0.5.21". Regenerated with npm@10 --package-lock-only so CI can install. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(transactions): supplier-invoice status-leak guard + drop dead prop Two follow-ups from the merge-risk audit: - SupplierInvoicePicker now mirrors InvoicePicker's status-leak guard: if a supplier invoice is still 'approved'/'overdue' but already has a payment voucher attached (journal_entry_id on supplier_invoice_payments), hide it. Closes a UX race window between payment and status flip. Partially-paid invoices still pass through. - Drop the unused onMarkPrivate prop on TransactionInboxCard and the matching handleMarkPrivate wrapper in the parent. Both became dead when the swipe-categorisation flow was removed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
166 lines
4.9 KiB
Markdown
166 lines
4.9 KiB
Markdown
# React Native Guidelines
|
|
|
|
A structured repository for creating and maintaining React Native Best Practices
|
|
optimized for agents and LLMs.
|
|
|
|
## Structure
|
|
|
|
- `rules/` - Individual rule files (one per rule)
|
|
- `_sections.md` - Section metadata (titles, impacts, descriptions)
|
|
- `_template.md` - Template for creating new rules
|
|
- `area-description.md` - Individual rule files
|
|
- `metadata.json` - Document metadata (version, organization, abstract)
|
|
- **`AGENTS.md`** - Compiled output (generated)
|
|
|
|
## Rules
|
|
|
|
### Core Rendering (CRITICAL)
|
|
|
|
- `rendering-text-in-text-component.md` - Wrap strings in Text components
|
|
- `rendering-no-falsy-and.md` - Avoid falsy && operator in JSX
|
|
|
|
### List Performance (HIGH)
|
|
|
|
- `list-performance-virtualize.md` - Use virtualized lists (LegendList,
|
|
FlashList)
|
|
- `list-performance-function-references.md` - Keep stable object references
|
|
- `list-performance-callbacks.md` - Hoist callbacks to list root
|
|
- `list-performance-inline-objects.md` - Avoid inline objects in renderItem
|
|
- `list-performance-item-memo.md` - Pass primitives for memoization
|
|
- `list-performance-item-expensive.md` - Keep list items lightweight
|
|
- `list-performance-images.md` - Use compressed images in lists
|
|
- `list-performance-item-types.md` - Use item types for heterogeneous lists
|
|
|
|
### Animation (HIGH)
|
|
|
|
- `animation-gpu-properties.md` - Animate transform/opacity instead of layout
|
|
- `animation-gesture-detector-press.md` - Use GestureDetector for press
|
|
animations
|
|
- `animation-derived-value.md` - Prefer useDerivedValue over useAnimatedReaction
|
|
|
|
### Scroll Performance (HIGH)
|
|
|
|
- `scroll-position-no-state.md` - Never track scroll in useState
|
|
|
|
### Navigation (HIGH)
|
|
|
|
- `navigation-native-navigators.md` - Use native stack and native tabs
|
|
|
|
### React State (MEDIUM)
|
|
|
|
- `react-state-dispatcher.md` - Use functional setState updates
|
|
- `react-state-fallback.md` - State should represent user intent only
|
|
- `react-state-minimize.md` - Minimize state variables, derive values
|
|
|
|
### State Architecture (MEDIUM)
|
|
|
|
- `state-ground-truth.md` - State must represent ground truth
|
|
|
|
### React Compiler (MEDIUM)
|
|
|
|
- `react-compiler-destructure-functions.md` - Destructure functions early
|
|
- `react-compiler-reanimated-shared-values.md` - Use .get()/.set() for shared
|
|
values
|
|
|
|
### User Interface (MEDIUM)
|
|
|
|
- `ui-expo-image.md` - Use expo-image for optimized images
|
|
- `ui-image-gallery.md` - Use Galeria for lightbox/galleries
|
|
- `ui-menus.md` - Native dropdown and context menus with Zeego
|
|
- `ui-native-modals.md` - Use native Modal with formSheet
|
|
- `ui-pressable.md` - Use Pressable instead of TouchableOpacity
|
|
- `ui-measure-views.md` - Measuring view dimensions
|
|
- `ui-safe-area-scroll.md` - Use contentInsetAdjustmentBehavior
|
|
- `ui-scrollview-content-inset.md` - Use contentInset for dynamic spacing
|
|
- `ui-styling.md` - Modern styling patterns (gap, boxShadow, gradients)
|
|
|
|
### Design System (MEDIUM)
|
|
|
|
- `design-system-compound-components.md` - Use compound components
|
|
|
|
### Monorepo (LOW)
|
|
|
|
- `monorepo-native-deps-in-app.md` - Install native deps in app directory
|
|
- `monorepo-single-dependency-versions.md` - Single dependency versions
|
|
|
|
### Third-Party Dependencies (LOW)
|
|
|
|
- `imports-design-system-folder.md` - Import from design system folder
|
|
|
|
### JavaScript (LOW)
|
|
|
|
- `js-hoist-intl.md` - Hoist Intl formatter creation
|
|
|
|
### Fonts (LOW)
|
|
|
|
- `fonts-config-plugin.md` - Load fonts natively at build time
|
|
|
|
## Creating a New Rule
|
|
|
|
1. Copy `rules/_template.md` to `rules/area-description.md`
|
|
2. Choose the appropriate area prefix:
|
|
- `rendering-` for Core Rendering
|
|
- `list-performance-` for List Performance
|
|
- `animation-` for Animation
|
|
- `scroll-` for Scroll Performance
|
|
- `navigation-` for Navigation
|
|
- `react-state-` for React State
|
|
- `state-` for State Architecture
|
|
- `react-compiler-` for React Compiler
|
|
- `ui-` for User Interface
|
|
- `design-system-` for Design System
|
|
- `monorepo-` for Monorepo
|
|
- `imports-` for Third-Party Dependencies
|
|
- `js-` for JavaScript
|
|
- `fonts-` for Fonts
|
|
3. Fill in the frontmatter and content
|
|
4. Ensure you have clear examples with explanations
|
|
|
|
## Rule File Structure
|
|
|
|
Each rule file should follow this structure:
|
|
|
|
````markdown
|
|
---
|
|
title: Rule Title Here
|
|
impact: MEDIUM
|
|
impactDescription: Optional description
|
|
tags: tag1, tag2, tag3
|
|
---
|
|
|
|
## Rule Title Here
|
|
|
|
Brief explanation of the rule and why it matters.
|
|
|
|
**Incorrect (description of what's wrong):**
|
|
|
|
```tsx
|
|
// Bad code example
|
|
```
|
|
````
|
|
|
|
**Correct (description of what's right):**
|
|
|
|
```tsx
|
|
// Good code example
|
|
```
|
|
|
|
Reference: [Link](https://example.com)
|
|
|
|
```
|
|
|
|
## File Naming Convention
|
|
|
|
- Files starting with `_` are special (excluded from build)
|
|
- Rule files: `area-description.md` (e.g., `animation-gpu-properties.md`)
|
|
- Section is automatically inferred from filename prefix
|
|
- Rules are sorted alphabetically by title within each section
|
|
|
|
## Impact Levels
|
|
|
|
- `CRITICAL` - Highest priority, causes crashes or broken UI
|
|
- `HIGH` - Significant performance improvements
|
|
- `MEDIUM` - Moderate performance improvements
|
|
- `LOW` - Incremental improvements
|
|
```
|