@hero-design/rn 8.81.2 → 8.82.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hero-design/rn
 
+## 8.82.0-alpha.0
+
+### Minor Changes
+
+- [#3538](https://github.com/Thinkei/hero-design/pull/3538) [`5ed5328f70f9fc624f55d7528fb406a0b4536987`](https://github.com/Thinkei/hero-design/commit/5ed5328f70f9fc624f55d7528fb406a0b4536987) Thanks [@ttkien](https://github.com/ttkien)! - [DatePicker] add variant month-year
+
+### Patch Changes
+
+- [#3532](https://github.com/Thinkei/hero-design/pull/3532) [`b2a99b76972adb906c364ef193e030e352981d92`](https://github.com/Thinkei/hero-design/commit/b2a99b76972adb906c364ef193e030e352981d92) Thanks [@ttkien](https://github.com/ttkien)! - [Toast] Update colors
+
 ## 8.81.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.81.2",
+  "version": "8.82.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/sonar-project.properties

@@ -4,6 +4,6 @@ sonar.organization=thinkei
 
 sonar.sources=.
 sonar.inclusions=**/*
-sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js
+sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js,**/testUtils/**
 sonar.java.binaries=**/src/main/java
 sonar.javascript.lcov.reportPaths=./coverage/lcov.info

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -3,10 +3,17 @@ import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
+import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
 import useCalculateDate from './useCalculateDate';
 
+type DatePickerAndroidProps = Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+> & {
+  variant?: 'default' | 'month-year';
+};
 const DatePickerAndroid = ({
   value,
   minDate,
@@ -21,10 +28,8 @@ const DatePickerAndroid = ({
   helpText,
   style,
   testID,
-}: Omit<
-  DatePickerProps,
-  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
->) => {
+  variant = 'default',
+}: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
   const displayValue = value ? formatDate(displayFormat, value) : '';
   const pickerInitValue = value || new Date();
@@ -47,7 +52,20 @@ const DatePickerAndroid = ({
           testID={testID}
         />
       </View>
-      {open ? (
+      {open && variant === 'month-year' ? (
+        <MonthYearPickerDialogueAndroid
+          value={value}
+          minimumDate={minDate}
+          maximumDate={maxDate}
+          onChange={(action, date) => {
+            setOpen(false);
+            if (action === 'dateSetAction' && !!date) {
+              onChange(date);
+            }
+          }}
+        />
+      ) : null}
+      {open && variant === 'default' ? (
         <DateTimePicker
           testID="datePickerAndroid"
           mode="date"

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -3,6 +3,7 @@ import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
+import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
 import { useTheme } from '../../theme';
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -11,6 +12,12 @@ import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 import useCalculateDate, { getDateValue } from './useCalculateDate';
 
+type DatePickerIOSProps = Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+> & {
+  variant?: 'default' | 'month-year';
+};
 const DatePickerIOS = ({
   value,
   minDate,
@@ -27,10 +34,8 @@ const DatePickerIOS = ({
   style,
   testID,
   supportedOrientations = ['portrait'],
-}: Omit<
-  DatePickerProps,
-  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
->) => {
+  variant = 'default',
+}: DatePickerIOSProps) => {
   const [selectingDate, setSelectingDate] = useState<Date>(
     getDateValue(value || new Date(), minDate, maxDate)
   );
@@ -75,21 +80,36 @@ const DatePickerIOS = ({
         supportedOrientations={supportedOrientations}
       >
         <StyledPickerWrapper>
-          <DateTimePicker
-            testID="datePickerIOS"
-            value={selectingDate}
-            minimumDate={minDate}
-            maximumDate={maxDate}
-            mode="date"
-            onChange={(_: any, date: Date | undefined) => {
-              if (date) {
-                setSelectingDate(date);
-              }
-            }}
-            display="spinner"
-            style={{ flex: 1 }}
-            textColor={theme.colors.onDefaultGlobalSurface}
-          />
+          {variant === 'month-year' ? (
+            <MonthYearPickerViewIOS
+              value={value}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              onChange={(date: Date | undefined) => {
+                if (date) {
+                  setSelectingDate(date);
+                }
+              }}
+              style={{ flex: 1 }}
+            />
+          ) : null}
+          {variant === 'default' ? (
+            <DateTimePicker
+              testID="datePickerIOS"
+              value={selectingDate}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              mode="date"
+              onChange={(_: any, date: Date | undefined) => {
+                if (date) {
+                  setSelectingDate(date);
+                }
+              }}
+              display="spinner"
+              style={{ flex: 1 }}
+              textColor={theme.colors.onDefaultGlobalSurface}
+            />
+          ) : null}
         </StyledPickerWrapper>
       </BottomSheet>
     </TouchableOpacity>

package/src/components/DatePicker/__tests__/DatePickerAndroid.spec.tsx

@@ -54,4 +54,29 @@ describe('DatePickerAndroid', () => {
 
     expect(getByText('This is help text')).toBeTruthy();
   });
+
+  it('renders month-year picker', () => {
+    const onChangeSpy = jest.fn();
+    const { getByTestId, queryByText, getByText } = renderWithTheme(
+      <DatePickerAndroid
+        value={new Date('December 21, 1995')}
+        variant="month-year"
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChangeSpy}
+        displayFormat="MMMM yyyy"
+      />
+    );
+
+    expect(queryByText('Start date')).toBeDefined();
+    const textInput = getByTestId('text-input');
+    expect(textInput).toHaveProp('value', 'December 1995');
+    fireEvent.press(queryByText('Start date'));
+    expect(queryByText('Android month year picker')).toBeDefined();
+
+    // mock change date
+    fireEvent.press(getByText('Android month year picker'));
+    expect(queryByText('Android month year picker')).toBeNull();
+    expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
+  });
 });

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -115,4 +115,33 @@ describe('DatePickerIOS', () => {
 
     expect(getByText('This is help text')).toBeTruthy();
   });
+
+  it('renders month-year picker', () => {
+    const onChangeSpy = jest.fn();
+    const { queryByText, getByText, getByTestId, queryByTestId } =
+      renderWithTheme(
+        <DatePickerIOS
+          value={new Date('December 21, 1995')}
+          variant="month-year"
+          label="Start date"
+          confirmLabel="Confirm"
+          onChange={onChangeSpy}
+          displayFormat="MMMM yyyy"
+        />
+      );
+
+    expect(getByText('Start date')).toBeDefined();
+    const textInput = getByTestId('text-input');
+    expect(textInput).toHaveProp('value', 'December 1995');
+    fireEvent.press(getByText('Start date'));
+    expect(getByText('Confirm')).toBeDefined();
+    expect(queryByTestId('datePickerIOS')).toBeFalsy();
+    expect(getByText('IOS month year picker')).toBeDefined();
+
+    // mock change date
+    fireEvent.press(getByText('IOS month year picker'));
+    fireEvent.press(getByText('Confirm'));
+    expect(queryByText('iOS month year picker')).toBeNull();
+    expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
+  });
 });

package/src/components/DatePicker/index.tsx

@@ -10,10 +10,10 @@ const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
     return <DatePickerCalendar {...props} />;
   }
   if (Platform.OS === 'ios') {
-    return <DatePickerIOS {...props} />;
+    return <DatePickerIOS {...props} variant={variant} />;
   }
 
-  return <DatePickerAndroid {...props} />;
+  return <DatePickerAndroid {...props} variant={variant} />;
 };
 
 export default DatePicker;

package/src/components/DatePicker/types.ts

@@ -13,8 +13,9 @@ export interface DatePickerProps {
    * Datepicker variants.
    *  - default: is default UI of Android or iOS
    *  - calendar: calendar UI
+   *  - month-year: month and year UI
    */
-  variant?: 'default' | 'calendar';
+  variant?: 'default' | 'calendar' | 'month-year';
   /**
    * Mininum date. Restrict the range of possible date values.
    */

package/src/components/Toast/StyledToast.tsx

@@ -3,6 +3,9 @@ import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import { IntentType } from './types';
+import { TextProps } from '../Typography/Text';
+import Typography from '../Typography';
+import Icon, { IconProps } from '../Icon';
 
 const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
   ({ theme, position }) => ({
@@ -19,7 +22,7 @@ const Container = styled(Animated.View)<{
   themeIntent: IntentType;
 }>(({ theme, themeVariant, themeIntent }) => ({
   borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
-  backgroundColor: theme.__hd__.toast.colors[themeIntent],
+  backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
   shadowColor: theme.__hd__.toast.shadows.color,
@@ -56,6 +59,22 @@ const CTAWrapper = styled(TouchableOpacity)<
   justifyContent: 'center',
 }));
 
+const StyledBody = styled(Typography.Body)<
+  TextProps & {
+    themeIntent: IntentType;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.toast.colors.texts[themeIntent],
+}));
+
+const StyledIcon = styled(Icon)<
+  IconProps & {
+    themeIntent: IntentType;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.toast.colors.texts[themeIntent],
+}));
+
 export {
   ToastContainerWrapper,
   Container,
@@ -63,4 +82,6 @@ export {
   TextContainer,
   IconContainer,
   CTAWrapper,
+  StyledBody,
+  StyledIcon,
 };

package/src/components/Toast/Toast.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Animated, LayoutAnimation } from 'react-native';
-import Icon from '../Icon';
-import Typography from '../Typography';
 import {
   Container,
   ContentContainer,
   IconContainer,
   CTAWrapper,
   TextContainer,
+  StyledBody,
+  StyledIcon,
 } from './StyledToast';
 import { useToastConfig } from './ToastContext';
 import type { IconName } from '../Icon';
@@ -37,11 +37,7 @@ const ToastIcon = ({
 }) =>
   icon ? (
     <IconContainer testID="toast-left-icon">
-      <Icon
-        icon={icon}
-        size="small"
-        intent={themeIntent === 'snackbar' ? 'text-inverted' : 'text'}
-      />
+      <StyledIcon icon={icon} size="small" themeIntent={themeIntent} />
     </IconContainer>
   ) : null;
 
@@ -112,12 +108,9 @@ const Toast = ({
         ) : null}
         <TextContainer>
           {typeof content === 'string' ? (
-            <Typography.Body
-              variant="small"
-              intent={intent === 'snackbar' ? 'inverted' : 'body'}
-            >
+            <StyledBody variant="small" themeIntent={intent}>
               {content}
-            </Typography.Body>
+            </StyledBody>
           ) : (
             content
           )}
@@ -132,12 +125,9 @@ const Toast = ({
           }}
         >
           {typeof actionLabel === 'string' ? (
-            <Typography.Body
-              variant="small-bold"
-              intent={intent === 'snackbar' ? 'inverted' : 'body'}
-            >
+            <StyledBody variant="small-bold" themeIntent={intent}>
               {actionLabel}
-            </Typography.Body>
+            </StyledBody>
           ) : (
             actionLabel
           )}

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

@@ -12,7 +12,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#b5c3fd",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -71,7 +71,12 @@ exports[`Toast Icon render custom icon correctly 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -100,7 +105,12 @@ exports[`Toast Icon render custom icon correctly 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -147,7 +157,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#f46363",
+        "backgroundColor": "#fcebe7",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -206,7 +216,12 @@ exports[`Toast renders correctly when intent is error 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -235,7 +250,12 @@ exports[`Toast renders correctly when intent is error 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -294,7 +314,12 @@ exports[`Toast renders correctly when intent is error 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#cb300a",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -340,7 +365,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#b5c3fd",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -399,7 +424,12 @@ exports[`Toast renders correctly when intent is info 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -428,7 +458,12 @@ exports[`Toast renders correctly when intent is info 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -487,7 +522,12 @@ exports[`Toast renders correctly when intent is info 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#355bfb",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -594,7 +634,12 @@ exports[`Toast renders correctly when intent is notification 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#001f23",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -653,7 +698,12 @@ exports[`Toast renders correctly when intent is notification 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#001f23",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -754,16 +804,21 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
           style={
             [
               {
-                "color": "#ffffff",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
-          themeIntent="inverted"
+          themeIntent="body"
           themeTypeface="neutral"
           themeVariant="small"
         >
@@ -813,16 +868,21 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#ffffff",
+              },
+              undefined,
+            ],
           ]
         }
-        themeIntent="inverted"
+        themeIntent="body"
         themeTypeface="neutral"
         themeVariant="small-bold"
       >
@@ -865,7 +925,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#5ace7d",
+        "backgroundColor": "#f0fef4",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -924,7 +984,12 @@ exports[`Toast renders correctly when intent is success 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -953,7 +1018,12 @@ exports[`Toast renders correctly when intent is success 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -1012,7 +1082,12 @@ exports[`Toast renders correctly when intent is success 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#017d6d",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -1058,7 +1133,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#ffbe71",
+        "backgroundColor": "#fff6eb",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -1117,7 +1192,12 @@ exports[`Toast renders correctly when intent is warning 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -1146,7 +1226,12 @@ exports[`Toast renders correctly when intent is warning 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -1205,7 +1290,12 @@ exports[`Toast renders correctly when intent is warning 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#ac5d00",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"