@hero-design/rn 8.111.0 → 8.112.1

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

@@ -0,0 +1,64 @@
+---
+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

@@ -0,0 +1,165 @@
+---
+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

@@ -0,0 +1,114 @@
+---
+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

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:2763) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2743) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -9,9 +9,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
 ...and 12 more
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/_work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 2m 5.7s
+created lib/index.js, es/index.js in 1m 34.7s
 
 /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 38.3s
+created ., . in 25.3s

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @hero-design/rn
 
+## 8.112.1
+
+### Patch Changes
+
+- [#4310](https://github.com/Thinkei/hero-design/pull/4310) [`4742897580f05ae3d5f089df7aa0b1a34a90e15c`](https://github.com/Thinkei/hero-design/commit/4742897580f05ae3d5f089df7aa0b1a34a90e15c) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [TimePicker] Correct 12-hour format for iOS picker
+
+## 8.112.0
+
+### Minor Changes
+
+- [#4304](https://github.com/Thinkei/hero-design/pull/4304) [`02ecf1c8ab33f3d95dcc2d168d70f11d8c415883`](https://github.com/Thinkei/hero-design/commit/02ecf1c8ab33f3d95dcc2d168d70f11d8c415883) Thanks [@phucdph](https://github.com/phucdph)! - [Icon] Add `global-pound`, `pound-icon-shine`, `pound-sign`, `file-pound-outline`, `pound-box-outlined`, `pound-card-outlined`, `pound-coin-shine-outlined`, `pound-credit-card-outlined` icons
+
+### Patch Changes
+
+- [#4303](https://github.com/Thinkei/hero-design/pull/4303) [`ee5b1d700200af991bb360e3f514f29790e33511`](https://github.com/Thinkei/hero-design/commit/ee5b1d700200af991bb360e3f514f29790e33511) Thanks [@ngvuthanhnhan-eh-hi](https://github.com/ngvuthanhnhan-eh-hi)! - Suppress `lint` warnings in CI Logs
+
+- Updated dependencies [[`ee5b1d700200af991bb360e3f514f29790e33511`](https://github.com/Thinkei/hero-design/commit/ee5b1d700200af991bb360e3f514f29790e33511)]:
+  - @hero-design/colors@8.46.3
+  - @hero-design/react-native-month-year-picker@8.43.2
+
 ## 8.111.0
 
 ### Minor Changes