@utilitywarehouse/hearth-react-native 0.27.1 → 0.27.2-testid-fix-1

package/src/components/VerificationInput/VerificationInput.utils.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { findDiffIndex, getNextIndexFromValueChange } from './VerificationInput.utils';
+
+describe('findDiffIndex', () => {
+  it('returns first differing index', () => {
+    expect(findDiffIndex('12', '19')).toBe(1);
+  });
+
+  it('returns previous length when next appends', () => {
+    expect(findDiffIndex('12', '123')).toBe(2);
+  });
+
+  it('returns next length when next shortens with same prefix', () => {
+    expect(findDiffIndex('123', '12')).toBe(2);
+  });
+});
+
+describe('getNextIndexFromValueChange', () => {
+  it('moves to the slot after the one that changed when inserting in an empty later slot', () => {
+    expect(
+      getNextIndexFromValueChange({
+        prevValue: '12',
+        nextValue: '123',
+        length: 6,
+      })
+    ).toBe(3);
+  });
+
+  it('caps at length when value becomes full', () => {
+    expect(
+      getNextIndexFromValueChange({
+        prevValue: '12345',
+        nextValue: '123456',
+        length: 6,
+      })
+    ).toBe(6);
+  });
+
+  it('stays at edited index for deletions', () => {
+    expect(
+      getNextIndexFromValueChange({
+        prevValue: '123',
+        nextValue: '12',
+        length: 6,
+      })
+    ).toBe(2);
+  });
+});

package/src/components/VerificationInput/VerificationInput.utils.ts

@@ -0,0 +1,32 @@
+interface GetNextIndexFromValueChangeOptions {
+  prevValue: string;
+  nextValue: string;
+  length: number;
+}
+
+export const findDiffIndex = (prevValue: string, nextValue: string): number => {
+  const minLength = Math.min(prevValue.length, nextValue.length);
+
+  for (let i = 0; i < minLength; i += 1) {
+    if (prevValue[i] !== nextValue[i]) {
+      return i;
+    }
+  }
+
+  return minLength;
+};
+
+export const getNextIndexFromValueChange = ({
+  prevValue,
+  nextValue,
+  length,
+}: GetNextIndexFromValueChangeOptions): number => {
+  const diff = nextValue.length - prevValue.length;
+  const editedIndex = findDiffIndex(prevValue, nextValue);
+
+  if (diff >= 0) {
+    return Math.min(editedIndex + 1, length);
+  }
+
+  return Math.max(editedIndex, 0);
+};

package/tsconfig.eslint.json

@@ -5,7 +5,8 @@
     "./src/**/*.stories.tsx",
     "./src/**/*.figma.tsx",
     "./.storybook/**/*",
-    "./docs/**/*"
+    "./docs/**/*",
+    "./vitest.unit.config.ts"
   ],
   "exclude": [
     "node_modules"

package/vitest.config.js

@@ -1,35 +1,33 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-import { defineConfig } from "vitest/config";
+import { defineConfig } from 'vitest/config';
 
-import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 const dirname =
-  typeof __dirname !== "undefined"
-    ? __dirname
-    : path.dirname(fileURLToPath(import.meta.url));
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   test: {
-    workspace: [
+    projects: [
       {
         extends: true,
         plugins: [
           // The plugin will run tests for the stories defined in your Storybook config
           // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, ".storybook") }),
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
         ],
         test: {
-          name: "storybook",
+          name: 'storybook',
           browser: {
             enabled: true,
             headless: true,
-            provider: "playwright",
-            instances: [{ browser: "chromium" }],
+            provider: 'playwright',
+            instances: [{ browser: 'chromium' }],
           },
-          setupFiles: [".storybook/vitest.setup.js"],
+          setupFiles: ['.storybook/vitest.setup.ts'],
         },
       },
     ],

package/vitest.unit.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    exclude: ['src/**/*.stories.ts', 'src/**/*.stories.tsx'],
+    environment: 'node',
+  },
+});

package/.turbo/turbo-lint.log

@@ -1,72 +0,0 @@
-
-> @utilitywarehouse/hearth-react-native@0.27.1 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
-  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
-  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
-  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
-  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
-  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
-  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
-  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
-  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   86:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  313:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
-  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
-   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
-   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
-  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
-  174:7  warning  React Hook useImperativeHandle has a missing dependency: 'updateValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-✖ 25 problems (0 errors, 25 warnings)
-
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1499.293 |    61.6%
-react-hooks/exhaustive-deps               |   127.430 |     5.2%
-react-hooks/rules-of-hooks                |    84.158 |     3.5%
-no-global-assign                          |    65.981 |     2.7%
-no-unexpected-multiline                   |    44.926 |     1.8%
-@typescript-eslint/ban-ts-comment         |    39.212 |     1.6%
-@typescript-eslint/triple-slash-reference |    36.913 |     1.5%
-no-misleading-character-class             |    36.268 |     1.5%
-no-useless-escape                         |    28.431 |     1.2%
-@typescript-eslint/no-unused-expressions  |    25.564 |     1.1%