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

package/locales/en_AU.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_AU.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+export { locale as default };

package/locales/en_CA.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_CA.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+export { locale as default };

package/locales/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var locales_en_AU = require('./en_AU.js');
+var locales_en_CA = require('./en_CA.js');
+
+var index = {
+    'en-AU': locales_en_AU,
+    'en-CA': locales_en_CA,
+};
+
+module.exports = index;

package/locales/index.mjs

@@ -0,0 +1,9 @@
+import locale from './en_AU.mjs';
+import locale$1 from './en_CA.mjs';
+
+var index = {
+    'en-AU': locale,
+    'en-CA': locale$1,
+};
+
+export { index as default };

package/locales/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/locales/types.mjs

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.1.0-alpha.0",
+  "version": "1.2.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -16,10 +16,14 @@
     "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
-    "publish:npm": "yarn publish --access public"
+    "publish:npm": "yarn publish --access public",
+    "set-dev-env": "npm pkg set react-native=src/index.ts"
   },
   "dependencies": {
-    "@hero-design/rn": "^8.101.3-alpha.0"
+    "@emotion/native": "^11.9.3",
+    "@emotion/primitives-core": "11.0.0",
+    "@emotion/react": "^11.9.3",
+    "@hero-design/rn": "^8.101.1"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.43.1",
@@ -45,7 +49,6 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
     "@babel/runtime": "^7.25.0",
-    "@emotion/jest": "^11.11.0",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
@@ -107,6 +110,7 @@
     "react-test-renderer": "18.2.0",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^3.0.1",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",

package/rollup.config.mjs

@@ -7,12 +7,15 @@ import replace from '@rollup/plugin-replace';
 import flow from 'rollup-plugin-flow';
 import { visualizer } from 'rollup-plugin-visualizer';
 import pkg from './package.json' assert { type: 'json' };
+import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
 const generateBuildStats = process.env.GENERATE_BUILD_STATS === 'true';
 const bundleTemplate = process.env.BUNDLE_TEMPLATE || 'treemap';
-const fileName = process.env.FILE_NAME || `stats/${pkg.version}/rn-work-uikit-stats.html`;
+const fileName =
+  process.env.FILE_NAME || `stats/${pkg.version}/rn-work-uikit-stats.html`;
 
 export default [
   {
@@ -63,6 +66,19 @@ export default [
             }),
           ]
         : []),
+      del({ targets: ['locales', 'types'] }),
+      copy({
+        targets: [
+          {
+            src: 'node_modules/@hero-design/rn/locales',
+            dest: '.',
+          },
+          {
+            src: 'node_modules/@hero-design/rn/types',
+            dest: '.',
+          },
+        ],
+      }),
     ],
   },
-]; 
+];

package/src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,126 +1,120 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`first test to ensure configure correctly should render TextInput with props in snapshot 1`] = `
-<View
-  style={
+<Pressable
+  accessibilityState={
     {
-      "flex": 1,
+      "disabled": false,
     }
   }
+  disabled={false}
+  onPress={[Function]}
+  style={
+    [
+      [
+        {
+          "flexDirection": "row",
+          "marginTop": 7.846153846153847,
+          "minHeight": 54.92307692307692,
+          "paddingHorizontal": 15.692307692307693,
+          "width": "100%",
+        },
+      ],
+      {},
+    ]
+  }
+  testID="text-input"
 >
   <View
-    pointerEvents="auto"
+    pointerEvents="none"
+    style={
+      [
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRadius": 8,
+            "borderWidth": 2,
+          },
+        ],
+        [
+          {
+            "backgroundColor": "#ffffff",
+          },
+          {},
+        ],
+      ]
+    }
+    testID="text-input-border"
+    themeFocused={false}
+    themeState="filled"
+  />
+  <View
     style={
       [
         [
           {
+            "backgroundColor": "transparent",
+            "borderRadius": 8,
+            "flex": 1,
+            "flexDirection": "column",
+            "marginBottom": 7.846153846153847,
             "marginTop": 7.846153846153847,
-            "width": "100%",
+            "overflow": "hidden",
           },
         ],
         undefined,
       ]
     }
-    testID="text-input"
   >
     <View
-      onLayout={[Function]}
       style={
         [
           [
             {
               "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
               "flexDirection": "row",
-              "padding": 15.692307692307693,
+              "flexGrow": 2,
+              "flexShrink": 1,
+              "gap": 3.9230769230769234,
             },
           ],
           undefined,
         ]
       }
     >
-      <View
-        style={
-          [
-            [
-              {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-              },
-            ],
-            [
-              {
-                "backgroundColor": "#ffffff",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="text-input-border"
-        themeFocused={false}
-        themeState="filled"
-      />
-      <View />
       <AnimatedView
-        pointerEvents="none"
         style={
-          [
-            [
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "left": 23.53846153846154,
-                "position": "absolute",
-                "right": 15.692307692307693,
-                "top": -10.461538461538462,
-                "zIndex": 1,
-              },
-            ],
-            [
-              {
-                "transformOrigin": "left top",
-              },
-              {
-                "transform": [
-                  {
-                    "translateY": {
-                      "addListener": [MockFunction],
-                      "removeListener": [MockFunction],
-                      "setValue": [MockFunction],
-                    },
-                  },
-                  {
-                    "scale": {
-                      "addListener": [MockFunction],
-                      "removeListener": [MockFunction],
-                      "setValue": [MockFunction],
-                    },
-                  },
-                ],
-              },
-            ],
-          ]
+          {
+            "opacity": {
+              "_offset": 0,
+              "_value": 0,
+              "addListener": [MockFunction],
+              "interpolate": [MockFunction],
+              "removeAllListeners": [MockFunction],
+              "removeListener": [MockFunction],
+              "setValue": [MockFunction],
+            },
+          }
         }
-        themeHasPrefix={false}
-        themeVariant="text"
       />
-      <View
+      <AnimatedView
+        accessibilityElementsHidden={false}
+        accessibilityLabel="Text input field"
         style={
-          [
-            [
-              {
-                "alignItems": "center",
-                "alignSelf": "stretch",
-                "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-            ],
-            undefined,
-          ]
+          {
+            "flex": 1,
+            "opacity": {
+              "_offset": 0,
+              "_value": 0,
+              "addListener": [MockFunction],
+              "interpolate": [MockFunction],
+              "removeAllListeners": [MockFunction],
+              "removeListener": [MockFunction],
+              "setValue": [MockFunction],
+            },
+          }
         }
+        testID="input-row-input-wrapper"
       >
         <TextInput
           accessibilityState={
@@ -139,13 +133,12 @@ exports[`first test to ensure configure correctly should render TextInput with p
             [
               [
                 {
-                  "alignSelf": "stretch",
                   "flexGrow": 2,
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 15.692307692307693,
                   "height": undefined,
-                  "marginHorizontal": 7.846153846153847,
                   "maxHeight": 141.23076923076923,
+                  "minHeight": 23.53846153846154,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -155,62 +148,44 @@ exports[`first test to ensure configure correctly should render TextInput with p
                   "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
-                undefined,
+                {},
               ],
             ]
           }
-          testID="text-input-text-input"
+          testID="text-input"
           themeVariant="text"
           value="test value"
         />
-      </View>
+      </AnimatedView>
     </View>
     <View
       style={
         [
           [
             {
-              "minHeight": 15.692307692307693,
-              "paddingHorizontal": 15.692307692307693,
-              "paddingTop": 1.9615384615384617,
+              "alignItems": "flex-start",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
             },
           ],
           undefined,
         ]
       }
-    >
-      <View
-        style={
-          [
-            [
-              {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-              },
-            ],
-            undefined,
-          ]
-        }
-      />
-    </View>
+    />
   </View>
   <View
-    pointerEvents="box-none"
-    position="bottom"
     style={
       [
         [
           {
-            "elevation": 9999,
-            "flexDirection": "column-reverse",
-            "paddingHorizontal": 23.53846153846154,
-            "paddingVertical": 15.692307692307693,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
           },
         ],
         undefined,
       ]
     }
   />
-</View>
+</Pressable>
 `;

package/src/__tests__/index.spec.tsx

@@ -16,3 +16,18 @@ describe('first test to ensure configure correctly', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 });
+
+describe('Export Completeness', () => {
+  it('should include all exports from @hero-design/rn', () => {
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const baseRN = require('@hero-design/rn');
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const workUIKit = require('../index');
+
+    const baseExports = Object.keys(baseRN);
+
+    baseExports.forEach((exportName) => {
+      expect(workUIKit).toHaveProperty(exportName);
+    });
+  });
+});

package/src/__tests__/theme-export-override.spec.ts

@@ -0,0 +1,96 @@
+// Mock the entire theme module to avoid import resolution issues
+jest.mock('../theme', () => {
+  const mockWorkTheme = {
+    colors: { text: 'work-color' },
+    fonts: { base: 'work-font' },
+    space: { base: 'work-space' },
+    __hd__: {
+      textInput: {
+        colors: {
+          text: '#WORK_THEME_COLOR',
+          background: '#WORK_BACKGROUND',
+        },
+        space: { containerPadding: 'WORK_PADDING' },
+        fonts: { text: 'WORK_FONT' },
+      },
+      button: { base: 'button' },
+      accordion: { base: 'accordion' },
+    },
+  };
+
+  const mockGetTheme = jest.fn(() => mockWorkTheme);
+
+  return {
+    __esModule: true,
+    default: mockWorkTheme,
+    getTheme: mockGetTheme,
+    Theme: {},
+    CustomTheme: {},
+    ThemeProvider: jest.fn(),
+    ThemeSwitcher: jest.fn(),
+    useTheme: jest.fn(),
+    withTheme: jest.fn(),
+  };
+});
+
+// Mock the base @hero-design/rn
+jest.mock('@hero-design/rn', () => ({
+  getTheme: jest.fn(() => ({
+    colors: { text: 'base-color' },
+    __hd__: {
+      textInput: {
+        colors: { text: 'BASE_THEME_COLOR' },
+        space: { containerPadding: 'BASE_PADDING' },
+      },
+    },
+  })),
+  // Mock styled function
+  styled: jest.fn(() => jest.fn(() => 'MockStyledComponent')),
+  // Mock Typography component
+  Typography: {
+    Caption: 'MockCaption',
+  },
+  // Re-export everything else as is
+  Button: 'MockButton',
+  TextInput: 'MockTextInput',
+  ThemeProvider: 'MockBaseThemeProvider',
+  useTheme: jest.fn(),
+}));
+
+describe('Theme Export Override', () => {
+  beforeEach(() => {
+    // Clear module cache to ensure fresh imports
+    jest.resetModules();
+  });
+
+  it('should export work-specific theme with overridden textInput from index', () => {
+    // Re-import to get the mocked version
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const { theme: workTheme } = require('../index');
+
+    // Verify that the theme has the work-specific textInput overrides
+    expect(workTheme.__hd__.textInput.colors.text).toBe('#WORK_THEME_COLOR');
+    expect(workTheme.__hd__.textInput.colors.background).toBe(
+      '#WORK_BACKGROUND'
+    );
+    expect(workTheme.__hd__.textInput.space.containerPadding).toBe(
+      'WORK_PADDING'
+    );
+    expect(workTheme.__hd__.textInput.fonts.text).toBe('WORK_FONT');
+  });
+
+  it('should export work-specific getTheme function with overridden textInput', () => {
+    // Re-import to get the mocked version
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const { getTheme: workGetTheme } = require('../index');
+
+    const workTheme = workGetTheme();
+
+    // Verify that getTheme returns work-specific textInput theme
+    expect(workTheme.__hd__.textInput.colors.text).toBe('#WORK_THEME_COLOR');
+    expect(workTheme.__hd__.textInput.space.containerPadding).toBe(
+      'WORK_PADDING'
+    );
+    expect(workTheme.__hd__.textInput.fonts.text).toBe('WORK_FONT');
+  });
+});

package/src/components/TextInput/ErrorOrHelpText.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Icon } from '@hero-design/rn';
+import {
+  StyledErrorRow,
+  StyledError,
+  StyledHelperText,
+} from './StyledTextInput';
+
+export interface ErrorOrHelpTextProps {
+  /** Error message to display (takes priority) */
+  error?: string;
+  /** Helper text to display when no error */
+  helpText?: string;
+}
+
+/**
+ * ErrorOrHelpText Component
+ *
+ * Displays either error messages or help text below the TextInput.
+ * Shows error messages with a danger icon when present, otherwise displays help text.
+ *
+ * Key Features:
+ * - Conditional rendering: error takes priority over help text
+ * - Error messages include a danger icon for visual clarity
+ * - Uses styled components for consistent theming
+ * - Includes proper test IDs for testing
+ *
+ * Rendering Logic:
+ * 1. If error exists: Show error message with danger icon
+ * 2. If no error but helpText exists: Show help text
+ * 3. If neither exists: Render nothing
+ *
+ * @param props - The component props (see ErrorOrHelpTextProps interface for details)
+ */
+const ErrorOrHelpText: React.FC<ErrorOrHelpTextProps> = ({
+  error,
+  helpText,
+}) => {
+  return error ? (
+    // Error state: Show error message with danger icon
+    <StyledErrorRow>
+      <Icon
+        testID="input-error-icon"
+        icon="circle-info"
+        size="xsmall"
+        intent="danger"
+      />
+      <StyledError testID="input-error-message">{error}</StyledError>
+    </StyledErrorRow>
+  ) : (
+    // Help text state: Show help text if provided
+    !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
+  );
+};
+
+ErrorOrHelpText.displayName = 'ErrorOrHelpText';
+
+export default React.memo(ErrorOrHelpText);