npm package: @hero-design/rn-work-uikit
Description: EH Work specific UI components built on top of @hero-design/rn
Latest version: 1.13.6

# @hero-design/rn-work-uikit

## Overview

`@hero-design/rn-work-uikit` is an EH Work-specific UI component library built on top of `@hero-design/rn`. It re-exports all components from the base React Native library and provides EH Work-specific overrides for `TextInput`, `Select`, `DatePicker`, `TimePicker`, `FormGroup`, and `RichTextEditor` with custom styling, behavior, and theme configuration.

## Installation

```sh
yarn add @hero-design/rn-work-uikit
```

**Peer Dependencies:**

```sh
yarn add react@18.3.1 react-native@0.77.3
yarn add @hero-design/react-native-month-year-picker@^8.43.2
yarn add @ptomasroos/react-native-multi-slider@^2.2.2
yarn add @react-native-community/datetimepicker@^3.5.2
yarn add @react-native-community/slider@^4.5.1
yarn add react-native-gesture-handler@~2.20.2
yarn add react-native-linear-gradient@^2.8.3
yarn add react-native-pager-view@^6.7.0
yarn add react-native-safe-area-context@^4.7.0
yarn add react-native-svg@^15.11.2
yarn add react-native-vector-icons@^9.1.0
yarn add react-native-webview@^13.10.2
```

**Requirements:**
- React 18.3.1
- React Native 0.77.3
- Node.js >= 20.0.0 (20.x or 22.x supported)
- Yarn >= 4.0.2 (enabled via Corepack: `corepack enable`)
- iOS Simulator (iPhone 14, iOS 18+) or Android Emulator (Pixel 6, API 30) for development

## Usage

### Basic Example

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

```tsx
import React from 'react';
import { ThemeSwitcher, Button, Card, Typography } from '@hero-design/rn-work-uikit';

function App() {
  return (
    <ThemeSwitcher name="ehWork">
      <Card>
        <Typography.Title>Welcome to EH Work</Typography.Title>
        <Button text="Get Started" intent="primary" onPress={() => {}} />
      </Card>
    </ThemeSwitcher>
  );
}
```

### Using Work Specific Components

EH Work-specific components are automatically available and override the base components:

```tsx
import { TextInput, Select, DatePicker, FormGroup } from '@hero-design/rn-work-uikit';

function WorkForm() {
  return (
    <FormGroup>
      <TextInput
        label="Employee Name"
        placeholder="Enter name"
      />
      <Select
        label="Department"
        options={[
          { value: 'engineering', label: 'Engineering' },
          { value: 'sales', label: 'Sales' },
        ]}
      />
      <DatePicker
        label="Start Date"
        onDateChange={(date) => console.log(date)}
      />
    </FormGroup>
  );
}
```

## Theming

The package includes a work-specific theme that extends the base `@hero-design/rn` theme with EH Work branding and customizations.

### Basic Theme Usage

```tsx
import { ThemeSwitcher } from '@hero-design/rn-work-uikit';

function App() {
  return (
    <ThemeSwitcher name="ehWork">
      {/* Your app components */}
    </ThemeSwitcher>
  );
}
```

### Work Theme Customization

The work theme includes EH Work-specific colors, typography, and component styles:

```tsx
import { ThemeProvider, getTheme, useTheme } from '@hero-design/rn-work-uikit';
import { styled } from '@emotion/native';

const StyledView = styled.View`
  background-color: ${({ theme }) => theme.colors.defaultGlobalSurface};
  padding: ${({ theme }) => theme.space.medium}px;
`;

function MyComponent() {
  const theme = useTheme();
  return <StyledView>EH Work Content</StyledView>;
}
```

### Design Tokens

For comprehensive design tokens documentation and examples, visit the [Hero Design documentation site](https://design.employmenthero.com/mobile/intro) or explore the [rn-playground](https://github.com/Thinkei/hero-design/tree/master/apps/rn-playground) for interactive examples.

## Examples

### Enhanced TextInput

The work-specific `TextInput` includes additional features:

```tsx
import { TextInput } from '@hero-design/rn-work-uikit';

function FormExample() {
  return (
    <>
      <TextInput
        label="Email"
        placeholder="Enter your email"
        keyboardType="email-address"
        autoCapitalize="none"
        error="Invalid email"
        helpText="We'll never share your email"
        maxLength={100}
      />
      <TextInput
        label="Password"
        placeholder="Enter password"
        secureTextEntry
      />
    </>
  );
}
```

### Rich Text Editor

The work-specific `RichTextEditor` provides rich text editing capabilities:

```tsx
import { RichTextEditor } from '@hero-design/rn-work-uikit';

function CommentEditor() {
  const [content, setContent] = useState([]);

  return (
    <RichTextEditor
      name="comment-editor"
      label="Comment"
      value={content}
      onChange={setContent}
      placeholder="Write a comment..."
      helpText="You can format your text"
    />
  );
}
```

### FormGroup

The work-specific `FormGroup` provides consistent form layout:

```tsx
import { FormGroup, TextInput, Select, DatePicker } from '@hero-design/rn-work-uikit';

function EmployeeForm() {
  return (
    <FormGroup>
      <TextInput label="First Name" />
      <TextInput label="Last Name" />
      <Select
        label="Department"
        options={[
          { value: 'eng', label: 'Engineering' },
          { value: 'sales', label: 'Sales' },
        ]}
      />
      <DatePicker label="Hire Date" />
    </FormGroup>
  );
}
```

### Using Base Components

All base components from `@hero-design/rn` are available:

```tsx
import {
  Button,
  Card,
  Typography,
  List,
  ListItem,
  Avatar,
  Badge,
  Modal,
  BottomSheet,
  Icon,
} from '@hero-design/rn-work-uikit';

function WorkApp() {
  return (
    <>
      <Card>
        <Typography.Title level={2}>EH Work Dashboard</Typography.Title>
        <Button text="Action" intent="primary" onPress={() => {}} />
      </Card>
      <List>
        <ListItem
          left={<Avatar source={{ uri: 'avatar-url' }} />}
          title="Employee Name"
          subtitle="Department"
          right={<Badge count={5} />}
        />
      </List>
    </>
  );
}
```

## Contributing

Contributions to `@hero-design/rn-work-uikit` are welcome!

To get started:

1. Clone the repository: `git clone git@github.com:Thinkei/hero-design.git`
2. Enable Corepack: `corepack enable`
3. Install dependencies: `yarn install`
4. Build the package: `yarn turbo run build --filter=@hero-design/rn-work-uikit`
5. Run the playground: `yarn dev:rn`

For detailed contributing guidelines, see the main repository [Contributing documentation](https://design.employmenthero.com/mobile/Contributing/coContribution).