@hero-design/rn 8.99.4 → 8.100.0-alpha.0

package/src/components/Select/SingleSelect/index.tsx

@@ -6,16 +6,11 @@ import type {
 import { TouchableOpacity, View } from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import TextInput from '../../TextInput';
-import {
-  deepCompareValue,
-  getScrollParams,
-  toFlatOptions,
-  toSections,
-  useKeyboard,
-} from '../helpers';
+import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
 import type { OptionType, SectionType, SelectProps } from '../types';
 import OptionList from './OptionList';
+import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {

package/src/components/Select/__tests__/helpers.spec.tsx

@@ -1,5 +1,4 @@
 import {
-  deepCompareValue,
   getScrollParams,
   isSections,
   toFlatOptions,
@@ -73,38 +72,3 @@ describe('getScrollParams', () => {
     });
   });
 });
-
-describe('deepCompareValue', () => {
-  it.each`
-    a                  | b                  | expected
-    ${1}               | ${1}               | ${true}
-    ${'test'}          | ${'test'}          | ${true}
-    ${true}            | ${true}            | ${true}
-    ${null}            | ${null}            | ${true}
-    ${undefined}       | ${undefined}       | ${true}
-    ${1}               | ${2}               | ${false}
-    ${'test'}          | ${'other'}         | ${false}
-    ${true}            | ${false}           | ${false}
-    ${null}            | ${undefined}       | ${false}
-    ${NaN}             | ${NaN}             | ${false}
-    ${1}               | ${NaN}             | ${false}
-    ${[1, 2, 3]}       | ${[1, 2, 3]}       | ${true}
-    ${['a', 'b']}      | ${['a', 'b']}      | ${true}
-    ${[]}              | ${[]}              | ${true}
-    ${[1, 2]}          | ${[1, 2, 3]}       | ${false}
-    ${[1, 2]}          | ${[2, 1]}          | ${false}
-    ${[1, [2, 3]]}     | ${[1, [2, 3]]}     | ${true}
-    ${[1, [2, 3]]}     | ${[1, [2, 4]]}     | ${false}
-    ${{ a: 1, b: 2 }}  | ${{ a: 1, b: 2 }}  | ${true}
-    ${{}}              | ${{}}              | ${true}
-    ${{ a: 1 }}        | ${{ a: 2 }}        | ${false}
-    ${{ a: 1 }}        | ${{ b: 1 }}        | ${false}
-    ${{ a: 1 }}        | ${{ a: 1, b: 2 }}  | ${false}
-    ${{ a: { b: 1 } }} | ${{ a: { b: 1 } }} | ${true}
-    ${{ a: { b: 1 } }} | ${{ a: { b: 2 } }} | ${false}
-    ${1}               | ${'1'}             | ${false}
-    ${[]}              | ${{}}              | ${false}
-  `('should compare $a and $b correctly', ({ a, b, expected }) => {
-    expect(deepCompareValue(a, b)).toBe(expected);
-  });
-});

package/src/components/Select/helpers.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-import { Keyboard } from 'react-native';
 import type { SectionData, CombinedOptionsType, OptionType } from './types';
 
 export const getKey = <V, T extends OptionType<V>>(
@@ -71,76 +69,3 @@ export const getScrollParams = <V, T extends OptionType<V>>(
     itemIndex: itemIndex < 0 ? 0 : itemIndex,
   };
 };
-
-export const useKeyboard = () => {
-  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-
-  useEffect(() => {
-    const keyboardWillShowListener = Keyboard.addListener(
-      'keyboardWillShow',
-      (e) => {
-        setKeyboardVisible(true);
-        setKeyboardHeight(e.endCoordinates.height);
-      }
-    );
-    const keyboardWillHideListener = Keyboard.addListener(
-      'keyboardWillHide',
-      () => {
-        setKeyboardVisible(false);
-      }
-    );
-
-    return () => {
-      keyboardWillShowListener.remove();
-      keyboardWillHideListener.remove();
-    };
-  }, []);
-
-  return { isKeyboardVisible, keyboardHeight };
-};
-
-export const deepCompareValue = <V,>(a: V, b: V): boolean => {
-  // Handle strict equality first (handles primitives, null, undefined)
-  if (a === b) return true;
-
-  // Special handling for NaN (NaN !== NaN in JS)
-  if (
-    typeof a === 'number' &&
-    typeof b === 'number' &&
-    Number.isNaN(a) &&
-    Number.isNaN(b)
-  ) {
-    return false;
-  }
-
-  // If either is null or undefined (but they are not strictly equal), return false
-  if (a == null || b == null) return false;
-
-  // If types don't match, they can't be equal
-  if (typeof a !== typeof b) return false;
-
-  // Handle array comparison
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    return a.every((val, index) => deepCompareValue(val, b[index]));
-  }
-
-  // If one is array and the other isn't, return false
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-
-  // Handle object comparison
-  if (typeof a === 'object' && typeof b === 'object') {
-    const keysA = Object.keys(a) as (keyof V)[];
-    const keysB = Object.keys(b) as (keyof V)[];
-
-    if (keysA.length !== keysB.length) return false;
-
-    return keysA.every(
-      (key) => keysB.includes(key) && deepCompareValue(a[key], b[key])
-    );
-  }
-
-  // If none of the above conditions matched, they're not equal
-  return false;
-};

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -65,6 +65,7 @@ exports[`Option renders correctly when not selected 1`] = `
             "width": 8,
           }
         }
+        testID="status-dot"
         themeIntent="danger"
       />
     </View>
@@ -164,6 +165,7 @@ exports[`Option renders correctly when selected 1`] = `
             "width": 8,
           }
         }
+        testID="status-dot"
         themeIntent="danger"
       />
     </View>
@@ -285,6 +287,7 @@ exports[`OptionContent renders correctly when there is a badge 1`] = `
           "width": 8,
         }
       }
+      testID="status-dot"
       themeIntent="danger"
     />
   </View>

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -140,6 +140,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
               "width": 8,
             }
           }
+          testID="status-dot"
           themeIntent="danger"
         />
       </View>

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -570,6 +570,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                           "width": 8,
                         }
                       }
+                      testID="status-dot"
                       themeIntent="danger"
                     />
                   </View>
@@ -1502,6 +1503,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "width": 8,
                         }
                       }
+                      testID="status-dot"
                       themeIntent="danger"
                     />
                   </View>
@@ -2434,6 +2436,7 @@ exports[`useIsFocused renders correctly 1`] = `
                           "width": 8,
                         }
                       }
+                      testID="status-dot"
                       themeIntent="danger"
                     />
                   </View>

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -463,6 +463,7 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                         "width": 8,
                       }
                     }
+                    testID="status-dot"
                     themeIntent="danger"
                   />
                 </View>
@@ -1078,6 +1079,7 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                         "width": 8,
                       }
                     }
+                    testID="status-dot"
                     themeIntent="danger"
                   />
                 </View>

package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap

@@ -138,6 +138,7 @@ exports[`TabWithBadge renders correctly with status badge config 1`] = `
           "width": 8,
         }
       }
+      testID="status-dot"
       themeIntent="danger"
     />
   </View>

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

@@ -350,6 +350,7 @@ exports[`Tabs renders correctly 1`] = `
                       "width": 8,
                     }
                   }
+                  testID="status-dot"
                   themeIntent="danger"
                 />
               </View>
@@ -1026,6 +1027,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       "width": 8,
                     }
                   }
+                  testID="status-dot"
                   themeIntent="danger"
                 />
               </View>
@@ -1702,6 +1704,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "width": 8,
                     }
                   }
+                  testID="status-dot"
                   themeIntent="danger"
                 />
               </View>

package/src/index.ts

@@ -31,6 +31,7 @@ import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Carousel from './components/Carousel';
 import Card from './components/Card';
+import Chart from './components/Chart';
 import Chip from './components/Chip';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
@@ -110,6 +111,7 @@ export {
   Button,
   Calendar,
   Card,
+  Chart,
   Carousel,
   Chip,
   Collapse,

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

@@ -428,6 +428,26 @@ exports[`theme returns correct theme object 1`] = `
         "pageControlWrapperHeight": 48,
       },
     },
+    "chart": {
+      "colors": {
+        "gridStroke": "#e8e9ea",
+      },
+      "sizes": {
+        "defaultWebEmptyStateHeight": 24,
+        "defaultWebEmptyStateWidth": 176,
+        "xAxisDefaultTextHeight": 32,
+        "yAxisDefaultTextHeight": 8,
+        "yAxisDefaultTextWidth": 32,
+      },
+      "space": {
+        "headerMarginBottom": 16,
+        "xAxisGridTextMarginTop": 12,
+        "xAxisMarginLeft": 16,
+        "yAxisGridMarginTop": 8,
+        "yAxisGridTextMarginRight": 16,
+        "yAxisMarginBottom": 24,
+      },
+    },
     "checkbox": {
       "borderWidths": {
         "icon": 2,
@@ -501,6 +521,14 @@ exports[`theme returns correct theme object 1`] = `
         "wrapperVerticalPadding": 8,
       },
     },
+    "columnChart": {
+      "sizes": {
+        "columnWidth": 16,
+      },
+      "space": {
+        "segmentGap": 2,
+      },
+    },
     "contentNavigator": {
       "space": {
         "valueHorizontalPadding": 8,

package/src/theme/components/chart.ts

@@ -0,0 +1,28 @@
+import type { GlobalTheme } from '../global';
+
+const getChartTheme = (theme: GlobalTheme) => {
+  const space = {
+    xAxisMarginLeft: theme.space.medium,
+    xAxisGridTextMarginTop: theme.space.smallMedium,
+    yAxisMarginBottom: theme.space.large,
+    yAxisGridMarginTop: theme.space.small,
+    yAxisGridTextMarginRight: theme.space.medium,
+    headerMarginBottom: theme.space.medium,
+  };
+
+  const sizes = {
+    xAxisDefaultTextHeight: theme.sizes.xlarge,
+    yAxisDefaultTextHeight: theme.sizes.small,
+    yAxisDefaultTextWidth: theme.sizes.xlarge,
+    defaultWebEmptyStateWidth: theme.sizes['19xlarge'], // Only use for web doc
+    defaultWebEmptyStateHeight: theme.sizes.large, // Only use for web doc
+  };
+
+  const colors = {
+    gridStroke: theme.colors.secondaryOutline,
+  };
+
+  return { space, sizes, colors };
+};
+
+export default getChartTheme;

package/src/theme/components/columnChart.ts

@@ -0,0 +1,15 @@
+import type { GlobalTheme } from '../global';
+
+const getColumnChartTheme = (theme: GlobalTheme) => {
+  const sizes = {
+    columnWidth: theme.sizes.medium,
+  };
+
+  const space = {
+    segmentGap: theme.space.xxsmall,
+  };
+
+  return { sizes, space };
+};
+
+export default getColumnChartTheme;

package/src/theme/getTheme.ts

@@ -14,6 +14,8 @@ import getCarouselTheme, { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
 import getChipTheme from './components/chip';
+import getChartTheme from './components/chart';
+import getColumnChartTheme from './components/columnChart';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
@@ -73,6 +75,8 @@ type Theme = GlobalTheme & {
     cardCarousel: ReturnType<typeof getCardCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     chip: ReturnType<typeof getChipTheme>;
+    chart: ReturnType<typeof getChartTheme>;
+    columnChart: ReturnType<typeof getColumnChartTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
@@ -133,6 +137,8 @@ const getTheme = (
       card: getCardTheme(globalTheme),
       carousel: getCarouselTheme(globalTheme),
       cardCarousel: getCardCarouselTheme(globalTheme),
+      chart: getChartTheme(globalTheme),
+      columnChart: getColumnChartTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       chip: getChipTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),

package/src/types.ts

@@ -20,6 +20,8 @@ import { ActionGroupHandles } from './components/FAB/ActionGroup';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
 import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
+import type { ColumnChartProps } from './components/Chart/ColumnChart';
+import { LineChartProps } from './components/Chart/Line';
 
 export type {
   BottomNavigationTabType,
@@ -44,4 +46,6 @@ export type {
   LocaleCode,
   LocaleValues,
   DateTimeFormats,
+  ColumnChartProps,
+  LineChartProps,
 };

package/src/utils/__tests__/helpers.spec.ts

@@ -1,4 +1,4 @@
-import { omit, pick } from '../helpers';
+import { deepCompareValue, omit, pick } from '../helpers';
 
 describe('pick', () => {
   it('works', () => {
@@ -43,3 +43,38 @@ describe('omit', () => {
     });
   });
 });
+
+describe('deepCompareValue', () => {
+  it.each`
+    a                  | b                  | expected
+    ${1}               | ${1}               | ${true}
+    ${'test'}          | ${'test'}          | ${true}
+    ${true}            | ${true}            | ${true}
+    ${null}            | ${null}            | ${true}
+    ${undefined}       | ${undefined}       | ${true}
+    ${1}               | ${2}               | ${false}
+    ${'test'}          | ${'other'}         | ${false}
+    ${true}            | ${false}           | ${false}
+    ${null}            | ${undefined}       | ${false}
+    ${NaN}             | ${NaN}             | ${false}
+    ${1}               | ${NaN}             | ${false}
+    ${[1, 2, 3]}       | ${[1, 2, 3]}       | ${true}
+    ${['a', 'b']}      | ${['a', 'b']}      | ${true}
+    ${[]}              | ${[]}              | ${true}
+    ${[1, 2]}          | ${[1, 2, 3]}       | ${false}
+    ${[1, 2]}          | ${[2, 1]}          | ${false}
+    ${[1, [2, 3]]}     | ${[1, [2, 3]]}     | ${true}
+    ${[1, [2, 3]]}     | ${[1, [2, 4]]}     | ${false}
+    ${{ a: 1, b: 2 }}  | ${{ a: 1, b: 2 }}  | ${true}
+    ${{}}              | ${{}}              | ${true}
+    ${{ a: 1 }}        | ${{ a: 2 }}        | ${false}
+    ${{ a: 1 }}        | ${{ b: 1 }}        | ${false}
+    ${{ a: 1 }}        | ${{ a: 1, b: 2 }}  | ${false}
+    ${{ a: { b: 1 } }} | ${{ a: { b: 1 } }} | ${true}
+    ${{ a: { b: 1 } }} | ${{ a: { b: 2 } }} | ${false}
+    ${1}               | ${'1'}             | ${false}
+    ${[]}              | ${{}}              | ${false}
+  `('should compare $a and $b correctly', ({ a, b, expected }) => {
+    expect(deepCompareValue(a, b)).toBe(expected);
+  });
+});

package/src/utils/helpers.ts

@@ -1,4 +1,6 @@
-import { Platform } from 'react-native';
+import { Platform, Keyboard } from 'react-native';
+
+import { useEffect, useState } from 'react';
 
 export const isIOS = Platform.OS === 'ios';
 export const isAndroid = Platform.OS === 'android';
@@ -36,3 +38,76 @@ export function hexToRgba(hex: string, a: number) {
   const [r, g, b] = arrByte;
   return `rgba(${r},${g},${b},${a})`;
 }
+
+export const deepCompareValue = <V>(a: V, b: V): boolean => {
+  // Handle strict equality first (handles primitives, null, undefined)
+  if (a === b) return true;
+
+  // Special handling for NaN (NaN !== NaN in JS)
+  if (
+    typeof a === 'number' &&
+    typeof b === 'number' &&
+    Number.isNaN(a) &&
+    Number.isNaN(b)
+  ) {
+    return false;
+  }
+
+  // If either is null or undefined (but they are not strictly equal), return false
+  if (a == null || b == null) return false;
+
+  // If types don't match, they can't be equal
+  if (typeof a !== typeof b) return false;
+
+  // Handle array comparison
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every((val, index) => deepCompareValue(val, b[index]));
+  }
+
+  // If one is array and the other isn't, return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+  // Handle object comparison
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a) as (keyof V)[];
+    const keysB = Object.keys(b) as (keyof V)[];
+
+    if (keysA.length !== keysB.length) return false;
+
+    return keysA.every(
+      (key) => keysB.includes(key) && deepCompareValue(a[key], b[key])
+    );
+  }
+
+  // If none of the above conditions matched, they're not equal
+  return false;
+};
+
+export const useKeyboard = () => {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const keyboardWillShowListener = Keyboard.addListener(
+      'keyboardWillShow',
+      (e) => {
+        setKeyboardVisible(true);
+        setKeyboardHeight(e.endCoordinates.height);
+      }
+    );
+    const keyboardWillHideListener = Keyboard.addListener(
+      'keyboardWillHide',
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+
+    return () => {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+
+  return { isKeyboardVisible, keyboardHeight };
+};