@hero-design/rn 7.9.0 → 7.10.2-rc.0

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -20,34 +20,54 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
   }
 >
   <View
+    pointerEvents="auto"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "padding": 16,
-          "position": "relative",
+          "marginVertical": 8,
           "width": "100%",
         },
         undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "padding": 16,
           },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#8b8d92",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            undefined,
+          ]
+        }
+        themeVariant="readonly"
+      />
+      <View
+        pointerEvents="none"
+        style={
           Array [
             Object {
               "backgroundColor": "#ffffff",
+              "flexDirection": "row",
               "left": 16,
               "paddingHorizontal": 4,
               "position": "absolute",
@@ -55,49 +75,106 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               "zIndex": 1,
             },
             undefined,
-          ],
-        ]
-      }
-      testID="input-label"
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-    >
-      Allow notifications
-    </Text>
-    <TextInput
-      editable={false}
-      multiline={true}
-      onPressIn={[Function]}
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 20,
+              },
+              Array [
+                Object {
+                  "color": "#8b8d92",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="small"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="readonly"
+        >
+          Allow notifications
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexGrow": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          editable={false}
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onPressIn={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flexGrow": 2,
+                "fontSize": 14,
+                "marginHorizontal": 8,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#292a2b",
+              },
+            ]
+          }
+          testID="text-input"
+          value="Monday"
+        />
+      </View>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+    <View
       style={
         Array [
           Object {
             "flex": 1,
-            "fontSize": 16,
-            "marginHorizontal": 8,
-          },
-          Object {
-            "color": "#292a2b",
-          },
-        ]
-      }
-      testID="text-input"
-      value="Monday"
-    />
-    <HeroIcon
-      name="arrow-down"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 16,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
-      testID="input-suffix"
-      themeIntent="text"
-      themeSize="xsmall"
     />
   </View>
   <Modal
@@ -743,34 +820,54 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
   }
 >
   <View
+    pointerEvents="auto"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "padding": 16,
-          "position": "relative",
+          "marginVertical": 8,
           "width": "100%",
         },
         undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "padding": 16,
           },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#8b8d92",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            undefined,
+          ]
+        }
+        themeVariant="readonly"
+      />
+      <View
+        pointerEvents="none"
+        style={
           Array [
             Object {
               "backgroundColor": "#ffffff",
+              "flexDirection": "row",
               "left": 16,
               "paddingHorizontal": 4,
               "position": "absolute",
@@ -778,49 +875,106 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               "zIndex": 1,
             },
             undefined,
-          ],
-        ]
-      }
-      testID="input-label"
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-    >
-      Allow notifications
-    </Text>
-    <TextInput
-      editable={false}
-      multiline={true}
-      onPressIn={[Function]}
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 20,
+              },
+              Array [
+                Object {
+                  "color": "#8b8d92",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="small"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="readonly"
+        >
+          Allow notifications
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexGrow": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          editable={false}
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onPressIn={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flexGrow": 2,
+                "fontSize": 14,
+                "marginHorizontal": 8,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#292a2b",
+              },
+            ]
+          }
+          testID="text-input"
+          value="Monday"
+        />
+      </View>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+    <View
       style={
         Array [
           Object {
             "flex": 1,
-            "fontSize": 16,
-            "marginHorizontal": 8,
-          },
-          Object {
-            "color": "#292a2b",
-          },
-        ]
-      }
-      testID="text-input"
-      value="Monday"
-    />
-    <HeroIcon
-      name="arrow-down"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 16,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
-      testID="input-suffix"
-      themeIntent="text"
-      themeSize="xsmall"
     />
   </View>
   <Modal

package/src/components/TextInput/StyledTextInput.tsx

@@ -1,30 +1,152 @@
-import { TextInput, View } from 'react-native';
+import { TextInput, View, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
-const Container = styled(View)(({ theme }) => ({
-  position: 'relative',
+export type Variant =
+  | 'default'
+  | 'filled'
+  | 'focused'
+  | 'disabled'
+  | 'readonly'
+  | 'error';
+
+const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
-  borderWidth: theme.__hd__.textInput.borderWidths.container,
-  borderRadius: theme.__hd__.textInput.radii.container,
-  padding: theme.__hd__.textInput.space.containerPadding,
-  flexDirection: 'row',
-  alignItems: 'center',
+  marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
 }));
 
-const Label = styled(Typography.Text)(({ theme }) => ({
+const StyledLabelContainer = styled(View)(({ theme }) => ({
   position: 'absolute',
+  flexDirection: 'row',
   left: theme.__hd__.textInput.space.labelLeft,
   top: theme.__hd__.textInput.space.labelTop,
   backgroundColor: theme.__hd__.textInput.colors.labelBackground,
   zIndex: 1,
   paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
 }));
+const StyledLabel = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.labels[themeVariant],
+}));
 
-const StyledTextInput = styled(TextInput)(({ theme }) => ({
+const StyledAsteriskLabel = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+}));
+
+const StyledLabelContainerInsideTextInput = styled(View)((): any => ({
+  flexDirection: 'row',
+  zIndex: 9999,
+  alignItems: 'center',
+  ...StyleSheet.absoluteFillObject,
+}));
+
+const StyledLabelInsideTextInput = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  textAlignVertical: 'center',
+  alignContent: 'center',
+  fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
+  alignItems: 'center',
+  color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant],
+}));
+
+const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+  fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
+}));
+const StyledErrorContainer = styled(View)(({ theme }) => ({
+  marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
+  marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: 1,
+  flexGrow: 4,
+}));
+
+const StyledError = styled(Typography.Text)(({ theme }) => ({
+  color: theme.__hd__.textInput.colors.error,
+  fontSize: theme.__hd__.textInput.fontSizes.error,
+  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
+}));
+
+const StyledMaxLengthMessage = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.maxLengthLabels[themeVariant],
+  fontSize: theme.__hd__.textInput.fontSizes.maxLength,
+  marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
+  alignSelf: 'flex-end',
   flex: 1,
+  flexGrow: 1,
+  textAlign: 'right',
+}));
+
+const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
+  fontSize: theme.__hd__.textInput.fontSizes.error,
+  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
+}));
+
+const StyledTextInput = styled(TextInput)(({ theme }) => ({
+  textAlignVertical: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.text,
+  alignSelf: 'stretch',
+  flexGrow: 2,
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
-export { Container, Label, StyledTextInput };
+const StyledBorderBackDrop = styled(View)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  ...StyleSheet.absoluteFillObject,
+  borderWidth:
+    themeVariant === 'focused'
+      ? theme.__hd__.textInput.borderWidths.container.focused
+      : theme.__hd__.textInput.borderWidths.container.normal,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  borderColor:
+    theme.__hd__.textInput.colors.borders[themeVariant] ??
+    theme.__hd__.textInput.colors.borders.default,
+}));
+
+const StyledTextInputContainer = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  padding: theme.__hd__.textInput.space.containerPadding,
+}));
+
+const StyledTextInputAndLabelContainer = styled(View)(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  flexGrow: 2,
+}));
+
+const StyledErrorAndHelpTextContainer = styled(View)(() => ({
+  flex: 1,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+}));
+
+export {
+  StyledTextInputContainer,
+  StyledLabel,
+  StyledLabelContainer,
+  StyledAsteriskLabel,
+  StyledAsteriskLabelInsideTextInput,
+  StyledTextInput,
+  StyledError,
+  StyledMaxLengthMessage,
+  StyledLabelInsideTextInput,
+  StyledContainer,
+  StyledErrorContainer,
+  StyledHelperText,
+  StyledTextInputAndLabelContainer,
+  StyledLabelContainerInsideTextInput,
+  StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
+};

package/src/components/TextInput/__tests__/.log/ti-10343.log

@@ -0,0 +1,62 @@
+[11:04:28.905] Global cache location '/Users/kientran/Library/Caches/typescript/4.2', safe file path '/volumes/data/projects/hero-design/node_modules/typescript/lib/typingsafelist.json', types map path /volumes/data/projects/hero-design/node_modules/typescript/lib/typesmap.json
+[11:04:28.906] Processing cache location '/Users/kientran/Library/Caches/typescript/4.2'
+[11:04:28.906] Trying to find '/Users/kientran/Library/Caches/typescript/4.2/package.json'...
+[11:04:28.908] Loaded content of '/Users/kientran/Library/Caches/typescript/4.2/package.json': {"private":true,"dependencies":{"types-registry":"^0.1.611"},"devDependencies":{"@types/argparse":"^2.0.10","@types/babel__core":"^7.1.19","@types/babel__preset-env":"^7.9.2","@types/call-bind":"^1.0.1","@types/debug":"^4.1.7","@types/dedent":"^0.7.0","@types/define-properties":"^1.1.3","@types/envinfo":"^7.8.1","@types/es-abstract":"^1.17.3","@types/eslint":"^8.4.6","@types/eslint-config-prettier":"^6.11.0","@types/eslint-scope":"^3.7.4","@types/eslint-utils":"^3.0.2","@types/estraverse":"^5.1.2","@types/glob-parent":"^5.1.1","@types/graceful-fs":"^4.1.5","@types/inherits":"^0.0.30","@types/is-callable":"^1.1.0","@types/is-regex":"^1.0.0","@types/is-string":"^1.0.0","@types/jest":"^28.1.1","@types/js-yaml":"^4.0.5","@types/object-inspect":"^1.8.1","@types/object-keys":"^1.0.1","@types/object.fromentries":"^2.0.1","@types/prelude-ls":"^1.1.29","@types/prettier":"^2.7.1","@types/prop-types":"^15.7.5","@types/react":"^18.0.21","@types/react-dom":"^18.0.6","@types/react-native":"^0.70.3","@types/react-test-renderer":"^18.0.0","@types/regenerator-runtime":"^0.13.1","@types/resolve":"^1.20.2","@types/scheduler":"^0.16.2","@types/semver":"^7.3.12","@types/type-check":"^0.3.27","@types/use-subscription":"^1.0.0","@types/ws":"^8.5.3","@types/yargs-parser":"^21.0.0"}}
+[11:04:28.908] Loaded content of '/Users/kientran/Library/Caches/typescript/4.2/package-lock.json'
+[11:04:28.938] Adding entry into typings cache: 'argparse' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/argparse/index.d.ts'
+[11:04:28.956] Adding entry into typings cache: 'babel__core' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/babel__core/index.d.ts'
+[11:04:28.963] Adding entry into typings cache: 'babel__preset-env' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/babel__preset-env/index.d.ts'
+[11:04:28.972] Adding entry into typings cache: 'call-bind' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/call-bind/index.d.ts'
+[11:04:28.984] Adding entry into typings cache: 'debug' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/debug/index.d.ts'
+[11:04:28.993] Adding entry into typings cache: 'dedent' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/dedent/index.d.ts'
+[11:04:29.001] Adding entry into typings cache: 'define-properties' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/define-properties/index.d.ts'
+[11:04:29.009] Adding entry into typings cache: 'envinfo' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/envinfo/index.d.ts'
+[11:04:29.017] Adding entry into typings cache: 'es-abstract' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/es-abstract/index.d.ts'
+[11:04:29.023] Adding entry into typings cache: 'eslint' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/eslint/index.d.ts'
+[11:04:29.028] Adding entry into typings cache: 'eslint-config-prettier' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/eslint-config-prettier/index.d.ts'
+[11:04:29.031] Adding entry into typings cache: 'eslint-scope' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/eslint-scope/index.d.ts'
+[11:04:29.034] Adding entry into typings cache: 'eslint-utils' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/eslint-utils/index.d.ts'
+[11:04:29.038] Adding entry into typings cache: 'estraverse' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/estraverse/index.d.ts'
+[11:04:29.042] Adding entry into typings cache: 'glob-parent' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/glob-parent/index.d.ts'
+[11:04:29.043] Adding entry into typings cache: 'graceful-fs' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/graceful-fs/index.d.ts'
+[11:04:29.047] Adding entry into typings cache: 'inherits' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/inherits/index.d.ts'
+[11:04:29.048] Adding entry into typings cache: 'is-callable' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/is-callable/index.d.ts'
+[11:04:29.049] Adding entry into typings cache: 'is-regex' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/is-regex/index.d.ts'
+[11:04:29.052] Adding entry into typings cache: 'is-string' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/is-string/index.d.ts'
+[11:04:29.059] Adding entry into typings cache: 'jest' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/jest/index.d.ts'
+[11:04:29.063] Adding entry into typings cache: 'js-yaml' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/js-yaml/index.d.ts'
+[11:04:29.067] Adding entry into typings cache: 'object-inspect' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/object-inspect/index.d.ts'
+[11:04:29.068] Adding entry into typings cache: 'object-keys' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/object-keys/index.d.ts'
+[11:04:29.069] Adding entry into typings cache: 'object.fromentries' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/object.fromentries/index.d.ts'
+[11:04:29.069] Adding entry into typings cache: 'prelude-ls' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/prelude-ls/index.d.ts'
+[11:04:29.075] Adding entry into typings cache: 'prettier' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/prettier/index.d.ts'
+[11:04:29.079] Adding entry into typings cache: 'prop-types' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/prop-types/index.d.ts'
+[11:04:29.084] Adding entry into typings cache: 'react' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/react/index.d.ts'
+[11:04:29.089] Adding entry into typings cache: 'react-dom' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/react-dom/index.d.ts'
+[11:04:29.091] Adding entry into typings cache: 'react-native' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/react-native/index.d.ts'
+[11:04:29.092] Adding entry into typings cache: 'react-test-renderer' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/react-test-renderer/index.d.ts'
+[11:04:29.092] Adding entry into typings cache: 'regenerator-runtime' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/regenerator-runtime/index.d.ts'
+[11:04:29.093] Adding entry into typings cache: 'resolve' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/resolve/index.d.ts'
+[11:04:29.093] Adding entry into typings cache: 'scheduler' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/scheduler/index.d.ts'
+[11:04:29.094] Adding entry into typings cache: 'semver' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/semver/index.d.ts'
+[11:04:29.099] Adding entry into typings cache: 'type-check' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/type-check/index.d.ts'
+[11:04:29.100] Adding entry into typings cache: 'use-subscription' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/use-subscription/index.d.ts'
+[11:04:29.101] Adding entry into typings cache: 'ws' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/ws/index.d.ts'
+[11:04:29.105] Adding entry into typings cache: 'yargs-parser' => '/Users/kientran/Library/Caches/typescript/4.2/node_modules/@types/yargs-parser/index.d.ts'
+[11:04:29.105] Finished processing cache location '/Users/kientran/Library/Caches/typescript/4.2'
+[11:04:29.106] Process id: 10344
+[11:04:29.106] NPM location: /Users/kientran/.nvm/versions/node/v16.17.0/bin/npm (explicit '--npmLocation' not  provided)
+[11:04:29.106] validateDefaultNpmLocation: false
+[11:04:29.106] Npm config file: /Users/kientran/Library/Caches/typescript/4.2/package.json
+[11:04:29.106] Updating types-registry npm package...
+[11:04:29.106] Exec: /Users/kientran/.nvm/versions/node/v16.17.0/bin/npm install --ignore-scripts types-registry@latest
+[11:04:30.593]     Succeeded. stdout:
+    
+    up to date, audited 71 packages in 1s
+
+3 packages are looking for funding
+  run `npm fund` for details
+
+found 0 vulnerabilities
+
+[11:04:30.593] Updated types-registry npm package