@hero-design/rn-work-uikit

@hero-design/rn-work-uikit

EH Work specific UI components built on top of @hero-design/rn.

Purpose

This package provides a customized UI kit specifically for the EH Work application. It inherits all components from the base @hero-design/rn package and allows for EH Work-specific customizations without affecting other applications.

Installation

Install the package and its peer dependencies:

# Install the main package
yarn add @hero-design/rn-work-uikit

# Install peer dependencies
yarn add @hero-design/react-native-month-year-picker \
         @ptomasroos/react-native-multi-slider \
         @react-native-community/datetimepicker \
         @react-native-community/slider \
         react-native-gesture-handler \
         react-native-linear-gradient \
         react-native-pager-view \
         react-native-safe-area-context \
         react-native-svg \
         react-native-vector-icons \
         react-native-webview

Note: Some peer dependencies may require additional platform-specific setup (iOS/Android). Please refer to their respective documentation for installation instructions.

Usage

This package re-exports all components from @hero-design/rn, so you can use it as a drop-in replacement:

import { Button, Typography, Box } from '@hero-design/rn-work-uikit';

function MyComponent() {
  return (
    <Box>
      <Typography>Hello EH Work!</Typography>
      <Button onPress={() => {}} text="EH Work Button" />
    </Box>
  );
}

Development

Scripts

• yarn test - Run tests
• yarn lint - Run linting
• yarn type-check - Run TypeScript type checking
• yarn build - Build the package
• yarn build:watch - Build in watch mode

Adding Custom Components

To add EH Work-specific components:

• Create your component in src/components/
• Export it from src/index.ts
• Add tests for your component

Example:

// src/components/MyWorkComponent.tsx
import React from 'react';
import { Button } from '@hero-design/rn';

export const MyWorkComponent = (props) => {
  return <Button {...props} workTheme />;
};

// src/index.ts
export { MyWorkComponent } from './components/MyWorkComponent';

Architecture

This package follows composition over inheritance:

• Re-exports: All @hero-design/rn components are available
• Extensions: EH Work-specific components extend base components
• Isolation: No modifications to the base package
• Compatibility: Maintains full API compatibility

Contributing

• Follow existing code style and patterns
• Add tests for new components
• Update documentation for new features
• Ensure all checks pass: yarn test && yarn lint && yarn type-check

Dependencies

• @hero-design/rn - The base UI kit
• React Native peer dependencies (see installation section above)