@hero-design/rn-work-uikit 1.1.0 → 1.2.0-alpha.0

package/.cursorrules

@@ -0,0 +1,57 @@
+# RN Work UIKit Specific Rules
+
+## Package Context
+This is the work-specific React Native component library that extends @hero-design/rn with work-focused components like TextInput, specialized themes, and work-specific patterns.
+
+## Testing Rules for RN Work UIKit
+- 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
+- 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
+- Aim for 100% line coverage on main component files
+- Create dedicated test files for each component (not just integration tests)
+- Test edge cases: undefined props, complex styles, error states
+- Test imperative APIs: ref methods, focus/blur behavior
+- Test accessibility: screen reader support, keyboard navigation
+
+## Component Development Rules
+- Import `styled` from `@hero-design/rn` for consistency with base theme
+- Use `useTheme()` hook instead of prop drilling theme
+- Extend base components from `@hero-design/rn` when possible
+- Follow work-specific 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
+
+## 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
+
+## File Organization
+- 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
+
+## Work-Specific Patterns
+- Components should work with work theme overrides
+- Test with work-specific color palettes and spacing
+- Ensure compatibility with work app requirements
+- Follow work accessibility guidelines
+- Test performance with work-typical data sizes
+
+## Quality Gates
+- All tests must pass with 100% coverage on main components
+- No linting errors
+- No TypeScript errors
+- Components must work with both base and work themes
+- Accessibility compliance for work environment 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn-work-uikit
 
+## 1.2.0-alpha.0
+
+### Minor Changes
+
+- [`c96a992a3d05781029ab5614d465093f9117bd0d`](https://github.com/Thinkei/hero-design/commit/c96a992a3d05781029ab5614d465093f9117bd0d) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] add TextInput for Work
+
 ## 1.1.0
 
 ### Minor Changes

package/DEVELOPMENT.md

@@ -0,0 +1,118 @@
+# RN Work UIKit Development Guide
+
+## Overview
+This package contains work-specific React Native components that extend the base `@hero-design/rn` design system. Components here are tailored for work applications with specific themes, accessibility requirements, and interaction patterns.
+
+## Development Rules
+
+### Component Architecture
+- **Extend Base Components**: Build upon `@hero-design/rn` components when possible
+- **Theme Integration**: Use `useTheme()` hook, import `styled` from `@hero-design/rn`
+- **Work-Specific**: Components should work with work theme overrides and requirements
+- **TypeScript**: Strict typing, no `any` types without good reason
+
+### Testing Standards
+- **User-Behavior Focused**: Write tests that describe what users see and experience
+- **Test Structure**: Use descriptive names like "when user sees an empty input field"
+- **Coverage**: Aim for 100% line coverage on main component files
+- **Testing Library**: Use `@testing-library/react-native` exclusively
+- **Theme Testing**: Use `renderWithTheme()` from `../../../../testUtils/renderWithTheme`
+
+### Test Patterns
+```typescript
+describe('ComponentName', () => {
+  describe('when user encounters [scenario]', () => {
+    it('should [expected user experience]', () => {
+      // User performs action
+      const { getByTestId } = renderWithTheme(<Component />);
+      
+      // User should see expected result
+      expect(getByTestId('element')).toBeTruthy();
+    });
+  });
+});
+```
+
+### File Organization
+```
+src/
+├── components/
+│   └── ComponentName/
+│       ├── index.tsx                 # Main component
+│       ├── ComponentName.tsx         # Implementation
+│       ├── types.ts                  # TypeScript types
+│       ├── constants.ts              # Constants
+│       └── __tests__/
+│           ├── index.spec.tsx        # Integration tests
+│           ├── ComponentName.spec.tsx # Unit tests
+│           └── README.md             # Test documentation
+├── theme/                            # Work-specific theme overrides
+├── testUtils/                        # Test utilities
+└── utils/                            # Shared utilities
+```
+
+### Testing Checklist
+- [ ] User-behavior focused test names
+- [ ] All props and combinations tested
+- [ ] Edge cases: undefined props, error states
+- [ ] Accessibility: screen readers, keyboard navigation
+- [ ] Imperative APIs: ref methods, focus/blur
+- [ ] Animation states and visibility
+- [ ] Theme compatibility (base + work themes)
+- [ ] Performance with work-typical data
+- [ ] Semantic matchers used where possible
+- [ ] React Native components in tests (not HTML)
+
+### Code Quality
+- [ ] No linting errors
+- [ ] No TypeScript errors
+- [ ] 100% test coverage on main components
+- [ ] Accessibility compliance
+- [ ] Performance benchmarks met
+- [ ] Work theme compatibility verified
+
+### Common Patterns
+
+#### Theme Usage
+```typescript
+import { useTheme } from '../../theme';
+import { styled } from '@hero-design/rn';
+
+const StyledComponent = styled.View<{ themeState: State }>(
+  ({ theme, themeState }) => ({
+    backgroundColor: theme.__hd__.componentName.colors.background[themeState],
+  })
+);
+```
+
+#### Testing Styles
+```typescript
+// For simple styles
+expect(element).toHaveProp('style', { color: '#000000' });
+
+// For complex React Native styles
+const flattenedStyle = StyleSheet.flatten(element.props.style);
+expect(flattenedStyle.backgroundColor).toBe('#ffffff');
+```
+
+#### Testing Accessibility
+```typescript
+expect(element).toHaveProp('accessibilityElementsHidden', false);
+expect(element).toBeDisabled(); // Use semantic matchers
+```
+
+## Work-Specific Requirements
+- Components must work in work applications
+- Follow work accessibility guidelines
+- Test with work-specific color palettes
+- Ensure performance with work data sizes
+- Maintain compatibility with work app requirements
+
+## Getting Started
+1. Create component following file structure
+2. Implement with work theme integration
+3. Write comprehensive tests following patterns
+4. Ensure 100% coverage and quality gates
+5. Document component usage and patterns
+
+Remember: Focus on what users experience, not how code works internally. 

package/eslint.config.js

@@ -35,6 +35,26 @@ module.exports = [
       'import/no-cycle': 'error',
       'react/no-unused-prop-types': 'warn',
       'react/no-array-index-key': 'warn',
+      '@typescript-eslint/no-explicit-any': 'error',
+      // Prevent direct imports of styled from emotion packages
+      // Use styled from @hero-design/rn instead for proper theme typing
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@emotion/native',
+              importNames: ['styled', 'default'],
+              message: 'Import styled from @hero-design/rn instead of @emotion/native for proper theme typing',
+            },
+            {
+              name: '@emotion/react',
+              importNames: ['styled', 'default'],
+              message: 'Import styled from @hero-design/rn instead of @emotion/react for proper theme typing',
+            },
+          ],
+        },
+      ],
     },
   },
 ];