@hero-design/rn 8.88.0 → 8.89.0-alpha.1

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -13,9 +13,12 @@ exports[`CalendarRowItem renders correctly 1`] = `
       [
         {
           "alignItems": "center",
+          "backgroundColor": undefined,
           "flexBasis": "14%",
-          "height": 48,
+          "height": 120,
           "justifyContent": "center",
+          "lineHeight": 0,
+          "maxHeight": 56,
           "width": 120,
         },
         undefined,
@@ -55,14 +58,16 @@ exports[`CalendarRowItem renders correctly 1`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": undefined,
+          "backgroundColor": "transparent",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
-          "height": 44,
+          "height": "100%",
           "justifyContent": "center",
+          "maxHeight": 56,
+          "maxWidth": 56,
           "opacity": 1,
-          "width": 44,
+          "width": "100%",
         }
       }
     >
@@ -141,9 +146,12 @@ exports[`CalendarRowItem renders correctly 2`] = `
       [
         {
           "alignItems": "center",
+          "backgroundColor": undefined,
           "flexBasis": "14%",
-          "height": 48,
+          "height": 120,
           "justifyContent": "center",
+          "lineHeight": 0,
+          "maxHeight": 56,
           "width": 120,
         },
         undefined,
@@ -183,14 +191,16 @@ exports[`CalendarRowItem renders correctly 2`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": undefined,
+          "backgroundColor": "transparent",
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
-          "height": 44,
+          "height": "100%",
           "justifyContent": "center",
+          "maxHeight": 56,
+          "maxWidth": 56,
           "opacity": 1,
-          "width": 44,
+          "width": "100%",
         }
       }
     >
@@ -269,10 +279,13 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
       [
         {
           "alignItems": "center",
+          "backgroundColor": undefined,
           "flexBasis": "14%",
-          "height": 48,
+          "height": 56,
           "justifyContent": "center",
-          "width": 48,
+          "lineHeight": 0,
+          "maxHeight": 56,
+          "width": 56,
         },
         undefined,
       ]
@@ -314,10 +327,12 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
-          "height": 44,
+          "height": "100%",
           "justifyContent": "center",
+          "maxHeight": 56,
+          "maxWidth": 56,
           "opacity": 1,
-          "width": 44,
+          "width": "100%",
         }
       }
     >
@@ -396,10 +411,13 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       [
         {
           "alignItems": "center",
+          "backgroundColor": undefined,
           "flexBasis": "14%",
-          "height": 48,
+          "height": 56,
           "justifyContent": "center",
-          "width": 48,
+          "lineHeight": 0,
+          "maxHeight": 56,
+          "width": 56,
         },
         undefined,
       ]
@@ -441,10 +459,12 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
-          "height": 44,
+          "height": "100%",
           "justifyContent": "center",
+          "maxHeight": 56,
+          "maxWidth": 56,
           "opacity": 1,
-          "width": 44,
+          "width": "100%",
         }
       }
     >
@@ -523,10 +543,13 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       [
         {
           "alignItems": "center",
+          "backgroundColor": undefined,
           "flexBasis": "14%",
-          "height": 48,
+          "height": 56,
           "justifyContent": "center",
-          "width": 48,
+          "lineHeight": 0,
+          "maxHeight": 56,
+          "width": 56,
         },
         undefined,
       ]
@@ -568,10 +591,12 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
           "borderColor": "#001f23",
           "borderRadius": 999,
           "borderWidth": 0,
-          "height": 44,
+          "height": "100%",
           "justifyContent": "center",
+          "maxHeight": 56,
+          "maxWidth": 56,
           "opacity": 1,
-          "width": 44,
+          "width": "100%",
         }
       }
     >

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -1,4 +1,10 @@
-import { getValidDate, initArray, isEqDate } from '../helpers';
+import {
+  getValidDate,
+  initArray,
+  isDateInRange,
+  isEqDate,
+  setStartOrEndDate,
+} from '../helpers';
 
 describe('initArray', () => {
   it('returns correct value', () => {
@@ -48,3 +54,106 @@ describe('getValidDate', () => {
     }
   );
 });
+
+describe('isDateInRange', () => {
+  it('returns correct value', () => {
+    const range = {
+      startDate: new Date('2022-10-09'),
+      endDate: new Date('2022-10-15'),
+    };
+    const dateInRange = new Date('2022-10-10');
+    const dateOutRange = new Date('2022-10-16');
+
+    const actualInRange = isDateInRange({ date: dateInRange, range });
+    const actualOutRange = isDateInRange({ date: dateOutRange, range });
+
+    expect(actualInRange).toEqual(true);
+    expect(actualOutRange).toEqual(false);
+  });
+});
+
+describe('setStartOrEndDate', () => {
+  // Test case 1: Selecting same date as start or end date
+  it('should not change dates when selecting same date as start date', () => {
+    const date = new Date('2024-03-15');
+    const startDate = new Date('2024-03-15');
+    const endDate = new Date('2024-03-20');
+
+    const result = setStartOrEndDate({ date, startDate, endDate });
+    expect(result).toEqual({ startDate, endDate });
+  });
+
+  // Test case 2: Initial selection (no start date)
+  it('should set start date when no dates are selected', () => {
+    const date = new Date('2024-03-15');
+
+    const result = setStartOrEndDate({ date });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-15'),
+      endDate: undefined,
+    });
+  });
+
+  // Test case 3: Setting end date after start date
+  it('should set end date when start date exists and selected date is after', () => {
+    const date = new Date('2024-03-20');
+    const startDate = new Date('2024-03-15');
+
+    const result = setStartOrEndDate({ date, startDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-15'),
+      endDate: new Date('2024-03-20'),
+    });
+  });
+
+  // Test case 4: Setting end date before start date (should reorder)
+  it('should reorder dates when end date is selected before start date', () => {
+    const date = new Date('2024-03-10');
+    const startDate = new Date('2024-03-15');
+
+    const result = setStartOrEndDate({ date, startDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-10'),
+      endDate: new Date('2024-03-15'),
+    });
+  });
+
+  // Test case 5: Clicking within existing range
+  it('should start new selection when clicking within existing range', () => {
+    const date = new Date('2024-03-17');
+    const startDate = new Date('2024-03-15');
+    const endDate = new Date('2024-03-20');
+
+    const result = setStartOrEndDate({ date, startDate, endDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-17'),
+      endDate: undefined,
+    });
+  });
+
+  // Test case 6: Extending range before start date
+  it('should extend range when clicking before start date', () => {
+    const date = new Date('2024-03-10');
+    const startDate = new Date('2024-03-15');
+    const endDate = new Date('2024-03-20');
+
+    const result = setStartOrEndDate({ date, startDate, endDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-10'),
+      endDate: new Date('2024-03-20'),
+    });
+  });
+
+  // Test case 7: Extending range after end date
+  it('should extend range when clicking after end date', () => {
+    const date = new Date('2024-03-25');
+    const startDate = new Date('2024-03-15');
+    const endDate = new Date('2024-03-20');
+
+    const result = setStartOrEndDate({ date, startDate, endDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-15'),
+      endDate: new Date('2024-03-25'),
+    });
+  });
+});

package/src/components/Calendar/helpers.ts

@@ -4,6 +4,23 @@ export const initArray = <T>(length: number, func: (value: number) => T): T[] =>
 export const isEqDate = (dateA?: Date, dateB?: Date) =>
   dateA?.toDateString() === dateB?.toDateString();
 
+export const isDateInRange = ({
+  date,
+  range,
+}: {
+  date: Date;
+  range?: {
+    startDate?: Date;
+    endDate?: Date;
+  };
+}) => {
+  if (!range || range.startDate === undefined || range.endDate === undefined) {
+    return false;
+  }
+
+  return date >= range.startDate && date <= range.endDate;
+};
+
 export const getValidDate = (
   date: Date,
   minDate?: Date,
@@ -27,3 +44,61 @@ export const getValidDate = (
 
   return undefined;
 };
+
+export const setStartOrEndDate = ({
+  date,
+  startDate,
+  endDate,
+}: {
+  date: Date;
+  startDate?: Date;
+  endDate?: Date;
+}) => {
+  // Prevent selecting same date
+  if (isEqDate(date, startDate) || isEqDate(date, endDate)) {
+    return {
+      startDate,
+      endDate,
+    };
+  }
+
+  // No start date yet - set as start
+  if (!startDate) {
+    return {
+      startDate: date,
+      endDate: undefined,
+    };
+  }
+
+  // Have start but no end - set as end and reorder if needed
+  if (!endDate) {
+    return date < startDate
+      ? {
+          startDate: date,
+          endDate: startDate,
+        }
+      : {
+          startDate,
+          endDate: date,
+        };
+  }
+
+  // Clicking within range - start new selection
+  if (date >= startDate && date <= endDate) {
+    return {
+      startDate: date,
+      endDate: undefined,
+    };
+  }
+
+  // Clicking outside range - extend range
+  return date < startDate
+    ? {
+        startDate: date,
+        endDate,
+      }
+    : {
+        startDate,
+        endDate: date,
+      };
+};

package/src/components/Calendar/index.tsx

@@ -4,7 +4,7 @@ import {
 } from '@hero-design/react-native-month-year-picker';
 import format from 'date-fns/fp/format';
 import React, { useMemo, useState } from 'react';
-import { Platform, TouchableOpacity } from 'react-native';
+import { LayoutChangeEvent, Platform, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../theme';
 import { noop } from '../../utils/functions';
 import Box from '../Box';
@@ -21,6 +21,7 @@ import {
   StyledDisabledCalendarRowItem,
 } from './StyledCalendar';
 import { getValidDate, initArray, isEqDate } from './helpers';
+import CalendarRange from './CalendarRange';
 
 const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 // Sunday first column => 0
@@ -125,8 +126,13 @@ const Calendar = ({
   const [contentHeight, setContentHeight] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
   const calendarItemWidth = useMemo(
-    () => (contentWidth > 0 ? contentWidth / 7 : undefined),
-    [contentWidth]
+    () =>
+      contentWidth > 0
+        ? Math.floor(
+            (contentWidth - theme.__hd__.calendar.space.cellPadding) / 7
+          )
+        : undefined,
+    [contentWidth, theme]
   );
 
   const useMonthPicker = onMonthChange !== noop;
@@ -186,6 +192,12 @@ const Calendar = ({
       : !daysOfNextMonth.some((date) => date !== undefined) ||
         maxDate <= lastDateOfMonth;
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setContentHeight(height);
+    setContentWidth(width);
+  };
+
   return (
     <StyledContainer testID={testID}>
       <StyledCalendarHeader>
@@ -251,17 +263,7 @@ const Calendar = ({
           />
         </Box>
       ) : (
-        <Box
-          onLayout={
-            Platform.OS === 'ios'
-              ? (e) => {
-                  const { width, height } = e.nativeEvent.layout;
-                  setContentHeight(height);
-                  setContentWidth(width);
-                }
-              : undefined
-          }
-        >
+        <Box onLayout={onLayout}>
           <StyledCalendarRow>
             {DAYS_OF_WEEK.map((day) => (
               <StyledCalendarRowItem key={day}>
@@ -353,4 +355,6 @@ const Calendar = ({
   );
 };
 
-export default Calendar;
+export default Object.assign(Calendar, {
+  Range: CalendarRange,
+});

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -156,7 +156,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     height: number;
     width: number;
   }>({ height: 0, width: 0 });
-  const [labelWidth, setLabelWidth] = React.useState<number>(0);
 
   const focusAnimation = useRef(new Animated.Value(0)).current;
 
@@ -174,11 +173,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     setInputSize((prev) => ({ ...prev, height, width }));
   }, []);
 
-  const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    setLabelWidth(width);
-  }, []);
-
   useEffect(() => {
     const removeFocusListener = Events.on(
       emitter,
@@ -373,15 +367,15 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               {
                 translateY: focusAnimation.interpolate({
                   inputRange: [0, 1],
-                  outputRange: [inputSize.height / 2, 0],
+                  outputRange: [inputSize.height / 2, theme.space.xsmall],
                 }),
               },
               {
                 translateX: focusAnimation.interpolate({
                   inputRange: [0, 1],
                   outputRange: [
-                    -inputSize.width / 2 + labelWidth / 2 + theme.space.large,
-                    -inputSize.width / 2 + labelWidth / 2 + theme.space.small,
+                    theme.space.medium,
+                    -theme.space.xlarge + theme.space.xsmall,
                   ],
                 }),
               },
@@ -395,16 +389,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
           },
         ]}
       >
-        {required && (
-          <StyledAsteriskLabelInsideTextInput
-            style={{
-              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
-            }}
-            themeState={state}
-          >
-            *
-          </StyledAsteriskLabelInsideTextInput>
-        )}
         {!!label && (
           <StyledLabelInsideTextInput
             style={{
@@ -412,8 +396,18 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
             }}
             testID="input-label"
             themeState={state}
-            onLayout={onLabelLayout}
           >
+            {required && (
+              <StyledAsteriskLabelInsideTextInput
+                style={{
+                  backgroundColor:
+                    theme.__hd__.textInput.colors.labelBackground,
+                }}
+                themeState={state}
+              >
+                *
+              </StyledAsteriskLabelInsideTextInput>
+            )}
             {label}
           </StyledLabelInsideTextInput>
         )}

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -36,7 +36,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "translateY": 0,
             },
             {
-              "translateX": 24,
+              "translateX": 16,
             },
             {
               "scale": 1,
@@ -50,7 +50,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
     >
       <Text
         allowFontScaling={false}
-        onLayout={[Function]}
         style={
           [
             {
@@ -359,7 +358,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               "translateY": 0,
             },
             {
-              "translateX": 24,
+              "translateX": 16,
             },
             {
               "scale": 1,
@@ -373,7 +372,6 @@ exports[`RichTextEditor should render correctly 1`] = `
     >
       <Text
         allowFontScaling={false}
-        onLayout={[Function]}
         style={
           [
             {

package/src/index.ts

@@ -10,6 +10,7 @@ import theme, {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkPalette,
   ThemeSwitcher,
   withTheme,
 } from './theme';
@@ -90,6 +91,7 @@ export {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkPalette,
   Accordion,
   Alert,
   AppCue,

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

@@ -319,19 +319,24 @@ exports[`theme returns correct theme object 1`] = `
         "border": "#001f23",
         "inverted": "#ffffff",
         "primary": "#401960",
+        "rowItem": {
+          "highlighted": "#ece8ef",
+          "selected": "#401960",
+        },
       },
       "radii": {
         "default": 999,
       },
       "sizes": {
-        "cellCircleHeight": 44,
-        "cellCircleWidth": 44,
-        "cellHeight": 48,
-        "cellWidth": 48,
+        "cellCircleHeight": 52,
+        "cellCircleWidth": 52,
+        "cellHeight": 56,
+        "cellWidth": 56,
         "markHeight": 4,
         "markWidth": 4,
       },
       "space": {
+        "cellPadding": 32,
         "headerHorizontalPadding": 12,
         "headerMarginRight": 8,
         "headerVerticalPadding": 16,

package/src/theme/components/calendar.ts

@@ -6,9 +6,13 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     border: theme.colors.primaryOutline,
     primary: theme.colors.primary,
     inverted: theme.colors.onDarkGlobalSurface,
+    rowItem: {
+      selected: theme.colors.primary,
+      highlighted: theme.colors.highlightedSurface,
+    },
   };
 
-  const cellSize = theme.sizes.xxxlarge;
+  const cellSize = theme.sizes.xxxxlarge;
   const markSize = theme.sizes.xsmall;
 
   const sizes = {
@@ -26,6 +30,7 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     headerHorizontalPadding: theme.space.smallMedium,
     headerMarginRight: theme.space.small,
     iosPickerMarginVertical: theme.space['5xlarge'],
+    cellPadding: theme.space.xlarge,
   };
 
   const radii = {

package/src/theme/global/colors/ehWorkDark.ts

@@ -0,0 +1,59 @@
+const ehWorkDarkPalette = {
+  black: '#000000',
+  white: '#ffffff',
+  // Surface
+  defaultGlobalSurface: '#27272A',
+  neutralGlobalSurface: '#121214',
+  darkGlobalSurface: '#fcfbff',
+  overlayGlobalSurface: '#ffffff',
+  // On Surface
+  onDefaultGlobalSurface: '#ffffff',
+  mutedOnDefaultGlobalSurface: '#a9a9b2',
+  inactiveOnDefaultGlobalSurface: '#71717a',
+  disabledOnDefaultGlobalSurface: '#52525b',
+  onDarkGlobalSurface: '#121214',
+  // Outline:
+  primaryOutline: '#a9a9b2',
+  secondaryOutline: '#3f3f46',
+  inactiveOutline: '#71717a',
+  disabledOutline: '#52525b',
+  // Archived:
+  archivedSurface: '#52525b',
+  mutedArchived: '#3f3f46',
+  archived: '#71717a',
+  onArchivedSurface: '#a9a9b2',
+  // Error:
+  errorSurface: '#7a1d06',
+  mutedError: '#9b2508',
+  error: '#bd2d09',
+  onErrorSurface: '#fecfca',
+  // Warning:
+  warningSurface: '#963e03',
+  mutedWarning: '#c35004',
+  warning: '#dc6204',
+  onWarningSurface: '#fff0d5',
+  // Success:
+  successSurface: '#00483e',
+  mutedSuccess: '#016256',
+  success: '#017d6d',
+  onSuccessSurface: '#a7f3e9',
+  // Info:
+  infoSurface: '#004a61',
+  mutedInfo: '#006585',
+  info: '#007da3',
+  onInfoSurface: '#a0e8ff',
+  // Brand:
+  primary: '#cdacfe',
+  onPrimary: '#fdfbff',
+  secondary: '#7622d7',
+  onSecondary: '#ffffff',
+  defaultSurface: '#fdfbff',
+  highlightedSurface: '#460078',
+  pressedSurface: '#9a58fc',
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#74409a',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff',
+};
+
+export default ehWorkDarkPalette;

package/src/theme/global/index.ts

@@ -7,6 +7,7 @@ import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
 import eBensSystemPalette from './colors/eBens';
+import ehWorkDarkPalette from './colors/ehWorkDark';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
@@ -56,4 +57,5 @@ export {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  ehWorkDarkPalette,
 };