@hero-design/rn 8.112.4 → 8.112.5

package/types/theme/global/colors/types.d.ts

@@ -50,8 +50,9 @@ export type BrandSystemPalette = {
     decorativeSecondarySurface?: string;
 };
 export type ThemeMode = 'light' | 'dark';
-export type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark' | 'ehWork' | 'ehJobs';
+type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark' | 'ehWork' | 'ehJobs';
 export type SystemPalette = GlobalSystemPalette & BrandSystemPalette & {
     themeMode?: ThemeMode;
     name?: ThemeName;
 };
+export {};

package/types/theme/global/index.d.ts

@@ -62,7 +62,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         decorativeSecondary?: string;
         decorativeSecondarySurface?: string;
         themeMode?: import("./colors/types").ThemeMode;
-        name?: import("./colors/types").ThemeName;
+        name?: "swagLight" | "swagLightJobs" | "ehWorkDark" | "ehWork" | "ehJobs";
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;

package/types/theme/global/shadows/index.d.ts

@@ -1,5 +1,3 @@
 import type { SystemPalette } from '../colors/types';
 declare const getShadows: (palette: SystemPalette) => import("./types").ShadowPalette;
-type Shadows = ReturnType<typeof getShadows>;
 export { getShadows };
-export type { Shadows };

package/types/theme/global/shadows/types.d.ts

@@ -1,4 +1,4 @@
-export type ShadowStyles = {
+type ShadowStyles = {
     shadowOffset: {
         width: number;
         height: number;
@@ -13,3 +13,4 @@ export type ShadowPalette = {
     medium: ShadowStyles;
     deep: ShadowStyles;
 };
+export {};

package/types/theme/global/typography.d.ts

@@ -31,4 +31,4 @@ declare const getFonts: ({ neutral, playful, }: {
 declare const getFontSizes: (baseFontSize: number) => FontSizes;
 declare const getLineHeights: (fontSizes: FontSizes) => LineHeights;
 export { getFonts, getFontSizes, getLineHeights };
-export type { Fonts, FontSizes, LineHeights };
+export type { Fonts, FontSizes };

package/.cursor/rules/performance-optimization.mdc

@@ -1,64 +0,0 @@
----
-pattern: "**/*.{ts,tsx}"
-description: "Performance optimization rules for React Native components in rn package"
----
-
-# Performance Optimization Rules for RN Package
-
-## React Native Performance Best Practices
-
-### Component Optimization
-- Use `React.memo()` for components that receive stable props
-- Implement `useMemo()` for expensive calculations
-- Use `useCallback()` for event handlers passed to child components
-- Avoid creating objects/functions in render methods
-- Prefer `useState` functional updates when state depends on previous state
-
-### List Performance
-- Use `FlatList` or `SectionList` instead of `ScrollView` with `map()`
-- Implement `getItemLayout` for `FlatList` when item heights are known
-- Use `keyExtractor` prop for consistent item identification
-- Implement `removeClippedSubviews` for large lists
-- Use `windowSize` and `initialNumToRender` for performance tuning
-
-### Memory Management
-- Clean up subscriptions in `useEffect` cleanup functions
-- Use `InteractionManager.runAfterInteractions()` for non-critical operations
-- Avoid memory leaks by properly unmounting components
-- Use `React.useRef()` instead of `useState` for mutable values
-- Implement proper error boundaries to prevent crashes
-
-### Animation Performance
-- Use `Animated` API for smooth 60fps animations
-- Prefer `transform` and `opacity` animations over layout changes
-- Use `useNativeDriver: true` when possible
-- Avoid animating `width`, `height`, or `top` properties
-- Use `LayoutAnimation` for list item changes
-
-### Bundle Size Optimization
-- Use dynamic imports for large components (`React.lazy()`)
-- Implement code splitting for feature modules
-- Remove unused dependencies and imports
-- Use tree shaking compatible libraries
-- Optimize asset sizes and formats
-
-### React Native Specific Performance Considerations
-- Test with mobile-typical data sizes (large datasets, complex forms)
-- Optimize for mobile app's specific use cases
-- Ensure smooth performance on older devices
-- Test with base theme and custom styling
-- Monitor performance metrics in mobile environment
-
-### Performance Monitoring
-- Use React DevTools Profiler for component analysis
-- Implement performance logging for critical paths
-- Monitor memory usage during development
-- Test performance on various device types
-- Use Flipper for React Native debugging
-
-### Anti-Patterns to Avoid
-- Don't use `console.log` in production builds
-- Avoid inline object/function creation in render
-- Don't use `setState` in render methods
-- Avoid unnecessary re-renders with proper dependency arrays
-- Don't ignore performance warnings from React Native

package/.cursor/rules/rn-rules.mdc

@@ -1,165 +0,0 @@
----
-pattern: "**/*.{ts,tsx}"
-description: "General development rules for React Native components in rn package"
----
-
-# RN Package Development Rules
-
-## Package Context
-This is the base React Native component library that provides core components, themes, and utilities for React Native applications.
-
-## Component Structure Guidelines
-
-### File Organization
-- **Component files**: `ComponentName/ComponentName.tsx` (main component)
-- **Styled components**: `ComponentName/StyledComponentName.tsx` (e.g., `StyledButton.tsx`)
-- **Types**: `ComponentName/types.ts` (if complex types are needed)
-- **Tests**: `ComponentName/__tests__/ComponentName.spec.tsx`
-
-### Component Structure Example
-```tsx
-// Button/Button.tsx
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
-import { StyledButtonContainer, StyledButtonText } from './StyledButton';
-
-export interface ButtonProps {
-  /** Button label */
-  text?: ReactChild;
-  /** Visual intent color */
-  intent?: 'primary' | 'secondary' | 'danger';
-  /** Button type */
-  variant?: 'filled' | 'outlined' | 'text';
-  /** Loading state */
-  loading?: boolean;
-  /** Press handler */
-  onPress: () => void;
-  /** Additional style */
-  style?: StyleProp<ViewStyle>;
-}
-
-const Button = ({ text, intent = 'primary', variant = 'filled', loading, onPress, style }: ButtonProps): JSX.Element => {
-  const theme = useTheme();
-  const themeVariant = getThemeVariant(variant, intent);
-
-  return (
-    <StyledButtonContainer
-      disabled={loading}
-      onPress={onPress}
-      themeButtonVariant={themeVariant}
-      style={style}
-    >
-      {loading ? (
-        <LoadingIndicator themeVariant={themeVariant} />
-      ) : (
-        <StyledButtonText themeButtonVariant={themeVariant}>
-          {text}
-        </StyledButtonText>
-      )}
-    </StyledButtonContainer>
-  );
-};
-```
-
-### Styled Component Conventions
-- **Naming**: `const StyledComponentName = styled.View\`\``
-- **Props naming**: Use descriptive names like `themeButtonVariant`, `themeIsPressed`, `themeIsCompact`
-- **Theme access**: Use component-specific theme tokens via `theme.__hd__.componentName.*` instead of global theme tokens
-
-```tsx
-// StyledButton.tsx
-import styled from '@emotion/native';
-
-interface StyledButtonProps {
-  themeButtonVariant: ThemeVariant;
-  disabled?: boolean;
-}
-
-const StyledButtonContainer = styled.TouchableHighlight<StyledButtonProps>`
-  ${({ theme, themeButtonVariant, disabled }) => `
-    background-color: ${theme.__hd__.button.colors.background[themeButtonVariant]};
-    border-radius: ${theme.__hd__.button.borderRadius};
-    padding: ${theme.__hd__.button.spacing.default};
-    opacity: ${disabled ? 0.5 : 1};
-  `}
-`;
-```
-
-## Theme Token Usage
-
-### Adding Theme Tokens
-1. **Define in theme**: Add new tokens to `theme/global` files
-2. **Use consistently**: Apply tokens across components
-3. **Document usage**: Add JSDoc comments for token purposes
-
-### Theme Token Examples
-```tsx
-// Using component-specific theme tokens
-background-color: ${theme.__hd__.button.colors.background[themeVariant]};
-color: ${theme.__hd__.button.colors.text[themeVariant]};
-padding: ${theme.__hd__.button.spacing.default};
-border-radius: ${theme.__hd__.button.borderRadius};
-
-// Using global theme tokens when needed
-margin: ${theme.spacing.md};  // Global spacing
-font-family: ${theme.typography.fontFamily}; // Global typography
-```
-
-### Modifying Theme Tokens
-- **Global changes**: Update `theme/global` files
-- **Component-specific**: Use component theme overrides
-- **Testing**: Verify changes across all components
-
-## Component Development Rules
-
-### Basic Rules
-- **Prefer functional components with hooks over class components**
-- Import `styled` from `@emotion/native` for styling consistency
-- Use `useTheme()` hook instead of prop drilling theme
-- Follow React Native design patterns and accessibility requirements
-- Use TypeScript strictly - no `any` types without good reason
-- Fix linting errors immediately
-- Use proper React Native components (`Text`, `View`) instead of HTML elements
-
-### Props Interface Guidelines
-```tsx
-// Good example from Button component
-export interface ButtonProps {
-  /** Button label */
-  text?: ReactChild;
-  /** Visual intent color */
-  intent?: 'primary' | 'secondary' | 'danger';
-  /** Button type */
-  variant?: 'filled' | 'outlined' | 'text';
-  /** Loading state */
-  loading?: boolean;
-  /** Press handler */
-  onPress: () => void;
-  /** Additional style */
-  style?: StyleProp<ViewStyle>;
-  /** Testing id */
-  testID?: string;
-}
-```
-
-## Documentation Rules
-- Document Props interfaces with JSDoc comments directly on each property: `/** Description */`
-- Use simplified @param comments: `@param props - The component props (see [ComponentName]Props interface for details)`
-- Avoid mentioning implementation details like "memoized component" in JSDoc comments
-- Focus JSDoc comments on what the component does, not how it's implemented
-- Keep type information in the Props interface, not duplicated in @param comments
-
-## React Native Specific Patterns
-- Components should work with base theme system
-- Test with standard React Native color palettes and spacing
-- Ensure compatibility with React Native requirements
-- Follow React Native accessibility guidelines
-- Test performance with typical mobile data sizes
-
-## Quality Gates
-- All tests must pass with 100% coverage on main components
-- No linting errors
-- No TypeScript errors
-- Components must work with base theme system
-- Accessibility compliance for mobile environment

package/.cursor/rules/testing-rules.mdc

@@ -1,114 +0,0 @@
----
-pattern: "**/*.spec.{ts,tsx}"
-description: "Comprehensive testing guidelines for React Native components in rn package"
----
-
-# Testing Guidelines for RN Package
-
-## Testing Philosophy
-- Write user-behavior focused tests that describe what users see and experience
-- Use descriptive test names like "when user sees an empty input field" instead of "idle state"
-- Group related assertions with explanatory comments about user expectations
-- Focus on user interactions and outcomes rather than implementation details
-- Test the component's public API, not internal implementation
-- Write tests that will catch regressions and ensure reliability
-
-## Testing Tools and Setup
-- Use `@testing-library/react-native` for all component testing
-- Use `renderWithTheme()` from `../testUtils/renderWithTheme` for components that need theme context
-- Use semantic matchers like `toBeDisabled()`, `toHaveProp()` when available
-- For complex React Native styles, use manual checking when `toHaveStyle()` doesn't work
-- Handle React Native's nested style arrays with `StyleSheet.flatten()` or custom helpers
-- Use `jest` for test runner and assertion library
-- Use `@testing-library/jest-native` for additional React Native matchers
-
-## Test Structure and Organization
-- Follow AAA pattern: Arrange, Act, Assert
-- Use `describe` blocks to group related tests
-- Use descriptive `it` statements that explain the expected behavior
-- Keep tests focused and test one thing at a time
-- Use `beforeEach` and `afterEach` for setup and cleanup
-- Mock external dependencies and APIs
-- Use `test.each` for parameterized tests when testing multiple scenarios
-
-## Test Coverage Requirements
-- Aim for 100% line coverage on main component files
-- Create dedicated test files for each component (not just integration tests)
-- Separate large test files by component responsibility
-- Use consistent naming: `ComponentName.spec.tsx`
-- Keep test utilities in `testUtils/` directory at package root
-- Use snapshot testing for visual regression prevention
-- Create README.md files in test directories explaining testing approach
-
-## Component Testing Patterns
-- Test component rendering with different props
-- Test user interactions (press, type, scroll)
-- Test component state changes
-- Test prop changes and their effects
-- Test conditional rendering based on props/state
-- Test component lifecycle methods
-- Test ref forwarding and imperative APIs
-
-## Accessibility Testing
-- Test screen reader support with `getByRole`, `getByLabelText`
-- Test keyboard navigation and focus management
-- Test accessibility props like `accessibilityLabel`, `accessibilityHint`
-- Test accessibility states like `accessibilityState`
-- Test with accessibility tools and screen readers
-- Ensure proper semantic markup and ARIA attributes
-
-## Error Handling and Edge Cases
-- Test error states and error boundaries
-- Test with invalid or missing props
-- Test with extreme values (empty strings, null, undefined)
-- Test component behavior with network failures
-- Test graceful degradation when features are unavailable
-- Test component recovery from error states
-
-## Performance Testing
-- Test component rendering performance with large datasets
-- Test memory leaks and cleanup
-- Test component re-rendering behavior
-- Test with typical mobile data sizes
-- Use React DevTools Profiler for performance analysis
-- Test component performance on different device types
-
-## React Native Specific Testing
-- Test with React Native specific APIs and components
-- Test component behavior with different screen sizes
-- Test component behavior with different orientations
-- Test component behavior with different device capabilities
-- Test component behavior with different platform-specific features
-- Test component behavior with different React Native versions
-
-## Mocking and Test Utilities
-- Mock React Native modules that aren't available in test environment
-- Create custom render functions for common test scenarios
-- Use `jest.mock()` for external dependencies
-- Create test data factories for consistent test data
-- Use `@testing-library/user-event` for user interaction simulation
-- Mock navigation and routing for component tests
-
-## Test Data Management
-- Use consistent test data across tests
-- Create reusable test data factories
-- Use realistic data that matches production scenarios
-- Test with both valid and invalid data
-- Use mobile-specific data patterns and structures
-- Keep test data minimal but representative
-
-## Integration Testing
-- Test component integration with other components
-- Test component behavior within larger feature flows
-- Test component interaction with global state
-- Test component behavior with routing and navigation
-- Test component behavior with React Native services
-- Use integration tests sparingly, prefer unit tests
-
-## Continuous Integration
-- Ensure all tests pass in CI environment
-- Use consistent test commands across environments
-- Set up test coverage reporting
-- Use parallel test execution for faster CI runs
-- Ensure tests are deterministic and don't flake
-- Use proper test isolation to avoid test interference