@hero-design/rn-work-uikit 1.9.5 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hero-design/rn-work-uikit
 
+## 1.10.0
+
+### Minor Changes
+
+- [#4688](https://github.com/Thinkei/hero-design/pull/4688) [`3d2afde0f5db3e46a63fc12c5ef2984085022531`](https://github.com/Thinkei/hero-design/commit/3d2afde0f5db3e46a63fc12c5ef2984085022531) Thanks [@ttkien](https://github.com/ttkien)! - Upgrade react-native 0.81
+
+### Patch Changes
+
+- Updated dependencies [[`3d2afde0f5db3e46a63fc12c5ef2984085022531`](https://github.com/Thinkei/hero-design/commit/3d2afde0f5db3e46a63fc12c5ef2984085022531)]:
+  - @hero-design/react-native-month-year-picker@8.44.0
+  - @hero-design/rn@9.0.0
+
+## 1.9.6
+
+### Patch Changes
+
+- [#4628](https://github.com/Thinkei/hero-design/pull/4628) [`16247abc62d3e7d4cc8b389fa524f71897709203`](https://github.com/Thinkei/hero-design/commit/16247abc62d3e7d4cc8b389fa524f71897709203) Thanks [@tqdungit](https://github.com/tqdungit)! - Add `.npmignore` published packages
+
+- Updated dependencies [[`16247abc62d3e7d4cc8b389fa524f71897709203`](https://github.com/Thinkei/hero-design/commit/16247abc62d3e7d4cc8b389fa524f71897709203)]:
+  - @hero-design/rn@8.115.1
+
 ## 1.9.5
 
 ### Patch Changes

package/README.md

@@ -1,103 +1,259 @@
 # @hero-design/rn-work-uikit
 
-EH Work specific UI components built on top of `@hero-design/rn`.
+## Overview
 
-## 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.
+`@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
 
-Install the package and its peer dependencies:
-
-```bash
-# Install the main package
+```sh
 yarn add @hero-design/rn-work-uikit
+```
+
+**Peer Dependencies:**
 
-# 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
+```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
 ```
 
-**Note**: Some peer dependencies may require additional platform-specific setup (iOS/Android). Please refer to their respective documentation for installation instructions.
+**Requirements:**
+- React 18.3.1
+- React Native 0.77.3
+- Node.js >= 20.0.0 (20.19.5 recommended)
+- 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:
 
-```typescript
-import { Button, Typography, Box } from '@hero-design/rn-work-uikit';
+```tsx
+import React from 'react';
+import { ThemeSwitcher, Button, Card, Typography } from '@hero-design/rn-work-uikit';
 
-function MyComponent() {
+function App() {
   return (
-    <Box>
-      <Typography>Hello EH Work!</Typography>
-      <Button onPress={() => {}} text="EH Work Button" />
-    </Box>
+    <ThemeSwitcher name="ehWork">
+      <Card>
+        <Typography.Title>Welcome to EH Work</Typography.Title>
+        <Button text="Get Started" intent="primary" onPress={() => {}} />
+      </Card>
+    </ThemeSwitcher>
   );
 }
 ```
 
-## Development
+### Using Work Specific Components
 
-### Scripts
+EH Work-specific components are automatically available and override the base components:
 
-- `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
+```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>
+  );
+}
+```
 
-### Adding Custom Components
+## Theming
 
-To add EH Work-specific components:
+The package includes a work-specific theme that extends the base `@hero-design/rn` theme with EH Work branding and customizations.
 
-1. Create your component in `src/components/`
-2. Export it from `src/index.ts`
-3. Add tests for your component
+### Basic Theme Usage
 
-Example:
-```typescript
-// src/components/MyWorkComponent.tsx
-import React from 'react';
-import { Button } from '@hero-design/rn';
+```tsx
+import { ThemeSwitcher } from '@hero-design/rn-work-uikit';
+
+function App() {
+  return (
+    <ThemeSwitcher name="ehWork">
+      {/* Your app components */}
+    </ThemeSwitcher>
+  );
+}
+```
+
+### Work Theme Customization
 
-export const MyWorkComponent = (props) => {
-  return <Button {...props} workTheme />;
-};
+The work theme includes EH Work-specific colors, typography, and component styles:
 
-// src/index.ts
-export { MyWorkComponent } from './components/MyWorkComponent';
+```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>;
+}
 ```
 
-## Architecture
+### 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
 
-This package follows **composition over inheritance**:
+The work-specific `TextInput` includes additional features:
 
-- **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
+```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
 
-1. Follow existing code style and patterns
-2. Add tests for new components
-3. Update documentation for new features
-4. Ensure all checks pass: `yarn test && yarn lint && yarn type-check`
+Contributions to `@hero-design/rn-work-uikit` are welcome!
 
-## Dependencies
+To get started:
 
-- `@hero-design/rn` - The base UI kit
-- React Native peer dependencies (see installation section above)
+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).