@hero-design/rn-work-uikit 1.2.3-alpha.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.2.3-alpha.0",
+  "version": "1.3.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,7 +13,7 @@
     "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage && cat ./coverage/lcov.info",
     "build:js": "rollup -c",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
+    "build:types": "rollup -c rollup.config.mjs --configPlugin dts",
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
     "publish:npm": "yarn publish --access public",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.103.2-alpha.0"
+    "@hero-design/rn": "^8.103.2"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.43.1",
@@ -64,6 +64,7 @@
     "@react-native/eslint-config": "0.76.9",
     "@react-native/metro-config": "0.76.9",
     "@react-native/typescript-config": "0.76.9",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -80,6 +81,7 @@
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
     "babel-plugin-inline-import": "^3.0.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "config-tsconfig": "8.42.5",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
@@ -111,6 +113,7 @@
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.1",
+    "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",

package/rollup.config.mjs

@@ -9,6 +9,8 @@ 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';
+import alias from '@rollup/plugin-alias';
+import dts from 'rollup-plugin-dts';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
@@ -48,6 +50,11 @@ export default [
       '@ptomasroos/react-native-multi-slider',
     ],
     plugins: [
+      alias({
+        entries: [
+          { find: '@hero-design/rn', replacement: '../rn/src/index.internal.ts' }
+        ]
+      }),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
       }),
@@ -59,11 +66,11 @@ export default [
       babel({ extensions, babelHelpers: 'bundled' }),
       ...(generateBuildStats
         ? [
-            visualizer({
-              filename: fileName,
-              template: bundleTemplate,
-            }),
-          ]
+          visualizer({
+            filename: fileName,
+            template: bundleTemplate,
+          }),
+        ]
         : []),
       del({ targets: ['locales', 'assets'] }),
       copy({
@@ -80,4 +87,12 @@ export default [
       }),
     ],
   },
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'types/index.d.ts',
+      format: 'es',
+    },
+    plugins: [dts()],
+  },
 ];

package/src/__tests__/index.spec.tsx

@@ -1,22 +1,3 @@
-import React from 'react';
-import renderWithTheme from '../../testUtils/renderWithTheme';
-import { TextInput } from '..';
-
-describe('first test to ensure configure correctly', () => {
-  it('should render TextInput with props in snapshot', () => {
-    const onChangeTextSpy = jest.fn();
-    const { toJSON } = renderWithTheme(
-      <TextInput
-        placeholder="Enter text here"
-        value="test value"
-        onChangeText={onChangeTextSpy}
-        testID="text-input"
-      />
-    );
-    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

package/src/components/Select/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  Select as InternalSelect,
+  MultiSelectProps,
+  SingleSelectProps,
+  SelectOptionType,
+} from '@hero-design/rn';
+import TextInput from '../TextInput';
+
+function Select<V, T extends SelectOptionType<V> = SelectOptionType<V>>(
+  props: SingleSelectProps<V, T>
+) {
+  return <InternalSelect {...props} TextInputComponent={TextInput} />;
+}
+
+Select.Multi = function <
+  V,
+  T extends SelectOptionType<V> = SelectOptionType<V>
+>(props: MultiSelectProps<V, T>) {
+  return <InternalSelect.Multi {...props} TextInputComponent={TextInput} />;
+};
+
+export default Select;

package/src/components/TextInput/Group/__tests__/__snapshots__/index.spec.tsx.snap

@@ -174,7 +174,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 "flexDirection": "row",
                 "flexGrow": 2,
                 "flexShrink": 1,
-                "gap": 3.9230769230769234,
                 "opacity": 1,
               },
             ],
@@ -457,7 +456,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 "flexDirection": "row",
                 "flexGrow": 2,
                 "flexShrink": 1,
-                "gap": 3.9230769230769234,
                 "opacity": 1,
               },
             ],
@@ -791,7 +789,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
                 "flexDirection": "row",
                 "flexGrow": 2,
                 "flexShrink": 1,
-                "gap": 3.9230769230769234,
                 "opacity": 1,
               },
             ],

package/src/components/TextInput/PrefixComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon, IconName } from '@hero-design/rn';
 import { View, ViewProps } from 'react-native';
-import type { State } from './StyledTextInput';
+import { StyledPrefixComponentWrapper, type State } from './StyledTextInput';
 
 export interface PrefixComponentProps extends ViewProps {
   /** Current input state for styling decisions */
@@ -46,9 +46,9 @@ const PrefixComponent: React.FC<PrefixComponentProps> = ({
 }) => {
   const actualPrefix = typeof prefix === 'string' ? prefix : '';
 
-  if (typeof prefix === 'string' && actualPrefix) {
+  if (actualPrefix) {
     return (
-      <View testID="input-prefix" {...rest}>
+      <StyledPrefixComponentWrapper testID="input-prefix" {...rest}>
         <Icon
           intent={state === 'disabled' ? 'disabled-text' : 'text'}
           icon={actualPrefix}
@@ -57,7 +57,7 @@ const PrefixComponent: React.FC<PrefixComponentProps> = ({
           accessibilityLabel={`Prefix icon: ${actualPrefix}`}
           accessibilityRole="image"
         />
-      </View>
+      </StyledPrefixComponentWrapper>
     );
   }
 

package/src/components/TextInput/StyledTextInput.tsx

@@ -115,16 +115,19 @@ const StyledInputWrapper = styled(View)(({ theme }) => ({
 }));
 
 const StyledInputRow = styled(Pressable)<{ themeOpacity: number }>(
-  ({ theme, themeOpacity }) => ({
+  ({ themeOpacity }) => ({
     flexDirection: 'row',
     alignItems: 'center',
     flexGrow: 2,
     flexShrink: 1,
-    gap: theme.__hd__.textInput.space.prefixAndInputContainerGap,
     opacity: themeOpacity,
   })
 );
 
+const StyledPrefixComponentWrapper = styled(View)(({ theme }) => ({
+  marginRight: theme.__hd__.textInput.space.prefixAndInputContainerGap,
+}));
+
 const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
   paddingHorizontal:
     theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
@@ -159,4 +162,5 @@ export {
   StyledBottomContainer,
   StyledSuffixContainer,
   StyledLabel,
+  StyledPrefixComponentWrapper,
 };

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

@@ -158,7 +158,6 @@ exports[`TextInput when user applies custom styling should respect user-provided
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -169,6 +168,16 @@ exports[`TextInput when user applies custom styling should respect user-provided
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -535,7 +544,6 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -816,7 +824,6 @@ exports[`TextInput when user encounters a disabled field should display content
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -1096,7 +1103,6 @@ exports[`TextInput when user encounters a read-only field should display content
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -1107,6 +1113,16 @@ exports[`TextInput when user encounters a read-only field should display content
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -1450,7 +1466,6 @@ exports[`TextInput when user has entered text should show the input content and
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -1461,6 +1476,16 @@ exports[`TextInput when user has entered text should show the input content and
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -1775,7 +1800,6 @@ exports[`TextInput when user interacts with placeholder text starting from empty
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 0,
             },
           ],
@@ -1786,6 +1810,16 @@ exports[`TextInput when user interacts with placeholder text starting from empty
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -2115,7 +2149,6 @@ exports[`TextInput when user needs programmatic control should provide ref metho
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -2366,7 +2399,6 @@ exports[`TextInput when user provides default values starting with pre-filled co
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -2377,6 +2409,16 @@ exports[`TextInput when user provides default values starting with pre-filled co
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -2713,7 +2755,6 @@ exports[`TextInput when user provides default values when both default and contr
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -2724,6 +2765,16 @@ exports[`TextInput when user provides default values when both default and contr
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -3090,7 +3141,6 @@ exports[`TextInput when user sees a loading state should show loading indicator
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -3101,6 +3151,16 @@ exports[`TextInput when user sees a loading state should show loading indicator
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -3434,7 +3494,6 @@ exports[`TextInput when user sees a required field should indicate the field is
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 0,
             },
           ],
@@ -3445,6 +3504,16 @@ exports[`TextInput when user sees a required field should indicate the field is
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -3787,7 +3856,6 @@ exports[`TextInput when user sees a textarea with character count should display
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -3798,6 +3866,16 @@ exports[`TextInput when user sees a textarea with character count should display
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -4178,7 +4256,6 @@ exports[`TextInput when user sees a textarea with character count should hide ch
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 1,
             },
           ],
@@ -4189,6 +4266,16 @@ exports[`TextInput when user sees a textarea with character count should hide ch
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -4536,7 +4623,6 @@ exports[`TextInput when user sees an empty input field should display label and
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 0,
             },
           ],
@@ -4547,6 +4633,16 @@ exports[`TextInput when user sees an empty input field should display label and
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -4860,7 +4956,6 @@ exports[`TextInput when user sees an error state should display error message to
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 0,
             },
           ],
@@ -4871,6 +4966,16 @@ exports[`TextInput when user sees an error state should display error message to
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -5229,7 +5334,6 @@ exports[`TextInput when user sees helper text should display guidance text to as
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 0,
             },
           ],
@@ -5240,6 +5344,16 @@ exports[`TextInput when user sees helper text should display guidance text to as
     >
       <View>
         <View
+          style={
+            [
+              [
+                {
+                  "marginRight": 3.9230769230769234,
+                },
+              ],
+              undefined,
+            ]
+          }
           testID="input-prefix"
         >
           <Text
@@ -5540,7 +5654,6 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
               "flexDirection": "row",
               "flexGrow": 2,
               "flexShrink": 1,
-              "gap": 3.9230769230769234,
               "opacity": 0,
             },
           ],

package/src/hero-editor.d.ts

@@ -0,0 +1,8 @@
+declare module 'hero-editor/dist/app.js' {
+  const script: string;
+  export default script;
+}
+
+declare module 'hero-editor' {
+  export function isEmptyContent(content: unknown): boolean;
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 // Re-export everything from @hero-design/rn except theme exports we want to override
 import TextInput from './components/TextInput';
+import Select from './components/Select';
 
 export * from '@hero-design/rn';
 
@@ -14,4 +15,4 @@ export {
 } from './theme';
 
 export { default as theme } from './theme';
-export { TextInput };
+export { TextInput, Select };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -253,7 +253,6 @@ exports[`theme returns correct theme object 1`] = `
       },
       "space": {
         "closeIconMargin": 11.76923076923077,
-        "contentPaddingBottom": 23.53846153846154,
         "floatingContentMargin": 15.692307692307693,
         "floatingHeaderIconPadding": 7.846153846153847,
         "floatingInnerPadding": 7.846153846153847,