@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

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

Peer Dependencies:

yarn add [email protected] [email protected]
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:

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:

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

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:

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 or explore the rn-playground for interactive examples.

Examples

Enhanced TextInput

The work-specific TextInput includes additional features:

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:

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:

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:

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 [email protected]: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.