.changeset/config.json

@@ -3,7 +3,7 @@
   "changelog": "@changesets/changelog-git",
   "commit": false,
   "fixed": [],
-  "linked": [],
+  "linked": [["@ballerine/ui", "@ballerine/backoffice-v2"]],
   "access": "public",
   "baseBranch": "dev",
   "updateInternalDependencies": "patch",

.cursor/rules/backoffice-v2.mdc

@@ -0,0 +1,146 @@
+---
+description: Rules and best practices for backoffice-v2 React TypeScript development
+globs: ["apps/backoffice-v2/**/*.{ts,tsx}"]
+---
+
+# Backoffice V2 Development Rules
+
+## Component Architecture
+- Use functional components with TypeScript
+- Implement smart/dumb component pattern
+- Place components in feature-based directories
+- Use compound components for complex UIs
+- Follow atomic design principles
+
+```typescript
+export const MyComponent: FunctionComponent<Props> = () => {
+  return <div>...</div>;
+};
+
+// Compound component example
+MyComponent.SubComponent = ({ children }) => {
+  return <div>{children}</div>;
+};
+```
+
+## Hooks and Logic
+- Separate business logic into custom hooks
+- Place hooks in dedicated `hooks` directories
+- Use the `use` prefix for all hooks
+- Implement hook composition pattern
+- Keep hooks focused and reusable
+
+```typescript
+// Logic hook example
+export const useComponentLogic = () => {
+  // Business logic
+  return {
+    // Hook return values
+  };
+};
+```
+
+## State Management
+- Use React Query for server state
+- Use Context for shared state
+- Implement state machines for complex flows
+- Use local state for UI-only state
+- Follow unidirectional data flow
+
+## TypeScript Best Practices
+- Use strict TypeScript configuration
+- Define interfaces for all props
+- Use discriminated unions for state
+- Leverage type inference
+- Export types from separate files
+
+## UI Components
+- Use Radix UI for accessible components
+- Implement proper ARIA attributes
+- Follow consistent styling patterns
+- Use composition over inheritance
+- Keep components small and focused
+
+## Forms and Validation
+- Use React Hook Form for forms
+- Implement Zod for validation
+- Handle form submission states
+- Show validation feedback
+- Use controlled inputs when needed
+
+## Data Fetching
+- Use React Query for API calls
+- Implement proper loading states
+- Handle error states gracefully
+- Cache responses appropriately
+- Type API responses
+
+## Error Handling
+- Use error boundaries
+- Implement fallback UI
+- Handle async errors
+- Show user-friendly messages
+- Log errors appropriately
+
+## Performance
+- Use React.memo wisely
+- Implement proper code splitting
+- Use lazy loading for routes
+- Optimize re-renders
+- Profile performance regularly
+
+## Testing
+- Write unit tests for components
+- Test custom hooks independently
+- Use React Testing Library
+- Mock external dependencies
+- Maintain good coverage
+
+## File Structure
+- Follow feature-based organization
+- Use index files for exports
+- Keep related files together
+- Use consistent naming
+- Implement barrel exports
+
+## Styling
+- Use Tailwind CSS
+- Follow utility-first approach
+- Use CSS variables for theming
+- Keep styles maintainable
+- Use CSS modules when needed
+
+## Documentation
+- Document complex logic
+- Write clear component docs
+- Document hook usage
+- Keep docs up to date
+- Use JSDoc when helpful
+
+## Code Quality
+- Follow ESLint rules
+- Use consistent formatting
+- Write clear variable names
+- Keep functions pure
+- Use meaningful types
+
+## Security
+- Validate user input
+- Implement proper authentication
+- Handle sensitive data carefully
+- Follow security best practices
+- Use HTTPS for API calls
+
+## Accessibility
+- Follow WCAG guidelines
+- Use semantic HTML
+- Test with screen readers
+- Ensure keyboard navigation
+- Provide proper focus management
+
+## Best Practices
+- Follow React patterns
+- Keep code DRY
+- Handle edge cases
+- Write maintainable code
+- Review code regularly 

.cursor/rules/comments.mdc

@@ -0,0 +1,11 @@
+---
+description: How to write comments
+globs: 
+---
+Write comments thoughtfully:
+- Do NOT write comments that explain obvious code or restate WHAT the code does.
+- Comments should primarily explain WHY code exists or WHY a particular approach was chosen.
+- Only add comments for complex, non-intuitive logic where the code itself doesn't clearly communicate intent.
+- Always provide clear documentation for functions (purpose, inputs, outputs).
+- Avoid unnecessary comments that add visual noise without adding value.
+- Write comments only when they provide genuine insight or when explicitly requested.

.cursor/rules/kyb-app.mdc

@@ -0,0 +1,115 @@
+---
+description: Rules and best practices for kyb-app React TypeScript development
+globs: ["apps/kyb-app/**/*.{ts,tsx}"]
+---
+
+# KYB App Development Rules
+
+## Component Structure
+- Use functional components with TypeScript
+- Export components as named exports
+- Place components in feature-based directories
+- Use `FunctionComponent` type for React components
+
+```typescript
+export const MyComponent: FunctionComponent<Props> = () => {
+  return <div>...</div>;
+};
+```
+
+## Hooks
+- Place hooks in a `hooks` directory within the feature directory
+- Export hooks as named exports
+- Use the `use` prefix for all hooks
+- Prefer custom hooks for reusable logic
+- Keep hooks focused and single-purpose
+
+```typescript
+export const useMyHook = () => {
+  // Hook logic
+};
+```
+
+## State Management
+- Use React Query for server state
+- Use React Context for global UI state
+- Use local state for component-specific state
+- Prefer `useState` for simple state
+- Use `useReducer` for complex state logic
+
+## TypeScript
+- Use strict TypeScript configuration
+- Define interfaces for all props
+- Use type inference where possible
+- Export types and interfaces from separate files
+- Use discriminated unions for complex state
+
+## Styling
+- Use Tailwind CSS for styling
+- Follow utility-first approach
+- Use `ctw` utility for conditional classes
+- Keep styles close to components
+- Use CSS modules for complex styling needs
+
+## File Organization
+- Group related files in feature directories
+- Use index files for clean exports
+- Keep files focused and single-purpose
+- Follow consistent naming conventions
+- Use barrel exports for cleaner imports
+
+## Error Handling
+- Use error boundaries for component errors
+- Implement proper error states
+- Handle async errors gracefully
+- Show user-friendly error messages
+- Log errors appropriately
+
+## Performance
+- Use React.memo for expensive renders
+- Implement proper dependency arrays in hooks
+- Avoid unnecessary re-renders
+- Use lazy loading for routes
+- Implement proper code splitting
+
+## Testing
+- Write unit tests for components
+- Test custom hooks independently
+- Use React Testing Library
+- Follow testing best practices
+- Maintain good test coverage
+
+## Forms
+- Use React Hook Form for form handling
+- Implement proper form validation
+- Handle form submission states
+- Show validation feedback
+- Use controlled components when needed
+
+## API Integration
+- Use React Query for data fetching
+- Implement proper loading states
+- Handle error states gracefully
+- Cache responses appropriately
+- Use TypeScript for API types
+
+## Accessibility
+- Follow WCAG guidelines
+- Use semantic HTML
+- Implement proper ARIA attributes
+- Ensure keyboard navigation
+- Test with screen readers
+
+## Code Quality
+- Use ESLint for code quality
+- Follow consistent code style
+- Write clear documentation
+- Use meaningful variable names
+- Keep functions pure when possible
+
+## Best Practices
+- Follow React best practices
+- Keep components small and focused
+- Use proper prop types
+- Implement proper loading states
+- Handle edge cases appropriately