@hero-design/rn 7.13.0 → 7.14.0

package/src/components/Calendar/index.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import format from 'date-fns/fp/format';
+import ContentNavigator from '../ContentNavigator';
+import Typography from '../Typography';
+import {
+  StyledCalendarDayNameCell,
+  StyledCalendarHeader,
+  StyledCalendarRow,
+  StyledCalendarRowItem,
+  StyledContainer,
+  StyledDisabledCalendarRowItem,
+} from './StyledCalendar';
+import CalendarRowItem from './CalendarRowItem';
+import { getValidDate, initArray, isEqDate } from './helpers';
+
+const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+// Sunday first column => 0
+// Sunday last column  => 1
+const WEEK_INDEX_OFFSET = 1;
+const SUNDAY_INDEX = 6;
+
+// Always render 7 rows x 6 items for consistent layout
+const TOTAL_DATES_ITEMS = 7 * 6;
+
+type ParsedMaskedDate = {
+  [key: string]: boolean;
+};
+
+export interface CalendarProps {
+  /**
+   * Selected date value.
+   */
+  value?: Date;
+  /**
+   * Visible date of month that calendar opens to display. Default is now.
+   */
+  visibleDate: Date;
+  /**
+   * Mininum date. Restrict the range of possible date values.
+   */
+  minDate?: Date;
+  /**
+   * Maximum date. Restrict the range of possible date values.
+   */
+  maxDate?: Date;
+  /**
+   * Callback is called when selected date value is changed.
+   */
+  onChange?: (date: Date) => void;
+  /**
+   * Handler to be called when the user taps the previous button.
+   */
+  onPreviousPress?: () => void;
+  /**
+   * Handler to be called when the user taps the next button.
+   */
+  onNextPress?: () => void;
+  /**
+   * Handler to be called when the user taps the title.
+   */
+  onTitlePress?: () => void;
+  /**
+   * Mark dates to display on calendar..
+   */
+  markedDates?: Date[];
+}
+
+const Calendar = ({
+  value,
+  visibleDate,
+  onChange,
+  onPreviousPress = () => {},
+  onNextPress = () => {},
+  onTitlePress = () => {},
+  minDate,
+  maxDate,
+  markedDates = [],
+}: CalendarProps) => {
+  const currentMonth = visibleDate.getMonth();
+  const currentYear = visibleDate.getFullYear();
+  const now = new Date();
+  const parsedMaskedDate: ParsedMaskedDate = markedDates.reduce(
+    (current, markedDate) => ({
+      ...current,
+      [markedDate.toDateString()]: true,
+    }),
+    {}
+  );
+
+  const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+  const lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  const firstDayWeekIndexOfMonth =
+    firstDateOfMonth.getDay() === 0
+      ? SUNDAY_INDEX
+      : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+
+  const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+
+  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, index => {
+    const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    const count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(
+      new Date(currentYear, currentMonth - 1, count),
+      minDate,
+      maxDate
+    );
+  });
+
+  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, index =>
+    getValidDate(
+      new Date(currentYear, currentMonth, index + 1),
+      minDate,
+      maxDate
+    )
+  );
+
+  const daysOfNextMonth = initArray(
+    TOTAL_DATES_ITEMS -
+      (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
+    index =>
+      getValidDate(
+        new Date(currentYear, currentMonth + 1, index + 1),
+        minDate,
+        maxDate
+      )
+  );
+
+  const disablePrevButton =
+    minDate === undefined
+      ? false
+      : !daysOfPreviousMonth.some(date => date !== undefined) &&
+        minDate >= firstDateOfMonth;
+
+  const disableNextButton =
+    maxDate === undefined
+      ? false
+      : !daysOfNextMonth.some(date => date !== undefined) ||
+        maxDate <= lastDateOfMonth;
+
+  return (
+    <StyledContainer>
+      <StyledCalendarHeader>
+        <ContentNavigator
+          value={format('MMMM yyyy', visibleDate)}
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          onPress={onTitlePress}
+          previousDisabled={disablePrevButton}
+          nextDisabled={disableNextButton}
+          fontSize="large"
+        />
+      </StyledCalendarHeader>
+      <StyledCalendarRow>
+        {DAYS_OF_WEEK.map(day => (
+          <StyledCalendarRowItem key={day}>
+            <StyledCalendarDayNameCell>
+              <Typography.Text>{day}</Typography.Text>
+            </StyledCalendarDayNameCell>
+          </StyledCalendarRowItem>
+        ))}
+      </StyledCalendarRow>
+      <StyledCalendarRow>
+        {daysOfPreviousMonth.map(date =>
+          date ? (
+            <CalendarRowItem
+              key={date.toDateString()}
+              date={date}
+              isCurrent={isEqDate(now, date)}
+              isSelected={isEqDate(value, date)}
+              onPress={() => onChange?.(date)}
+              textIntent="subdued"
+              marked={parsedMaskedDate[date.toDateString()]}
+            />
+          ) : (
+            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+          )
+        )}
+        {daysOfCurrentMonth.map(date =>
+          date ? (
+            <CalendarRowItem
+              key={date.toDateString()}
+              date={date}
+              isCurrent={isEqDate(now, date)}
+              isSelected={isEqDate(value, date)}
+              onPress={() => onChange?.(date)}
+              marked={parsedMaskedDate[date.toDateString()]}
+            />
+          ) : (
+            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+          )
+        )}
+        {daysOfNextMonth.map(date =>
+          date ? (
+            <CalendarRowItem
+              key={date.toDateString()}
+              date={date}
+              isCurrent={isEqDate(now, date)}
+              isSelected={isEqDate(value, date)}
+              onPress={() => onChange?.(date)}
+              textIntent="subdued"
+              marked={parsedMaskedDate[date.toDateString()]}
+            />
+          ) : (
+            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+          )
+        )}
+      </StyledCalendarRow>
+    </StyledContainer>
+  );
+};
+
+export default Calendar;

package/src/components/Collapse/index.tsx

@@ -13,7 +13,7 @@ import {
 } from './StyledCollapse';
 import { usePrevious } from '../../utils/hooks';
 
-interface CollapseProps extends ViewProps {
+export interface CollapseProps extends ViewProps {
   /*
    * The collapse's content.
    */
@@ -39,35 +39,33 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
   const previousOpenState = usePrevious(open);
 
   useEffect(() => {
-    if (open !== previousOpenState && previousOpenState !== undefined) {
+    if (
+      (open !== previousOpenState && previousOpenState !== undefined) ||
+      open
+    ) {
       Animated.timing(collapseAnim, {
         toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.ease),
+        easing: Easing.inOut(Easing.cubic),
         useNativeDriver: false,
       }).start();
     }
   }, [open, previousOpenState, contentHeight]);
 
-  const fetchMaxHeight = useCallback(
-    ({ height }) => {
-      setContentHeight(height);
-    },
-    [contentHeight]
-  );
+  const fetchMaxHeight = useCallback(({ height }) => {
+    setContentHeight(height);
+  }, []);
 
   return (
     <StyledWrapper
-      style={[
-        style,
-        {
-          height: collapseAnim,
-        },
-      ]}
+      style={{
+        height: collapseAnim,
+      }}
       testID={testID}
     >
       <StyledHiddenWrapper>
         <StyledChildWrapper
           onLayout={event => fetchMaxHeight(event.nativeEvent.layout)}
+          style={style}
         >
           {children}
         </StyledChildWrapper>

package/src/components/ContentNavigator/index.tsx

@@ -28,6 +28,10 @@ interface ContentNavigatorProps {
    * Whether the next icon is disabled.
    */
   nextDisabled?: boolean;
+  /**
+   * Content font size.
+   */
+  fontSize?: 'medium' | 'large';
   /**
    * Additional style.
    */
@@ -45,6 +49,7 @@ function ContentNavigator({
   value,
   previousDisabled = false,
   nextDisabled = false,
+  fontSize = 'medium',
   testID,
   style,
 }: ContentNavigatorProps) {
@@ -58,6 +63,7 @@ function ContentNavigator({
       />
       <Value
         fontWeight="semi-bold"
+        fontSize={fontSize}
         onPress={onPress}
         testID="content-navigator-value"
       >

package/src/components/Empty/StyledEmpty.tsx

@@ -0,0 +1,47 @@
+import { View, Text } from 'react-native';
+import styled from '@emotion/native';
+
+type ThemeVariant = 'light' | 'dark';
+
+const StyledWrapper = styled(View)(() => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledIllustration = styled(View)(({ theme }) => ({
+  height: theme.__hd__.empty.sizes.illustration,
+  width: theme.__hd__.empty.sizes.illustration,
+  borderRadius: theme.__hd__.empty.radii.illustration,
+  backgroundColor: theme.__hd__.empty.colors.illustrationBackground,
+  marginBottom: theme.__hd__.empty.space.large,
+}));
+
+const StyledTitle = styled(Text)<{ themeVariant: ThemeVariant }>(
+  ({ theme, themeVariant }) => ({
+    fontFamily: theme.__hd__.empty.fonts.title,
+    fontSize: theme.__hd__.empty.fontSizes.title,
+    textAlign: 'center',
+    marginBottom: theme.__hd__.empty.space.medium,
+    color:
+      themeVariant === 'dark'
+        ? theme.__hd__.empty.colors.invertedText
+        : theme.__hd__.empty.colors.text,
+  })
+);
+
+const StyledDescription = styled(Text)<{ themeVariant: ThemeVariant }>(
+  ({ theme, themeVariant }) => ({
+    fontFamily: theme.__hd__.empty.fonts.description,
+    fontSize: theme.__hd__.empty.fontSizes.description,
+    textAlign: 'center',
+    color:
+      themeVariant === 'dark'
+        ? theme.__hd__.empty.colors.invertedText
+        : theme.__hd__.empty.colors.subduedText,
+  })
+);
+
+export { StyledWrapper, StyledIllustration, StyledTitle, StyledDescription };

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

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty renders empty state content correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "flex": 1,
+        "flexDirection": "column",
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#dadbde",
+          "borderRadius": 999,
+          "height": 168,
+          "marginBottom": 24,
+          "width": 168,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "marginBottom": 16,
+          "textAlign": "center",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="light"
+  >
+    You have no notification at this time
+  </Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#727478",
+          "fontFamily": "BeVietnamPro-Light",
+          "fontSize": 16,
+          "textAlign": "center",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="light"
+  >
+    We'll notify you later.
+  </Text>
+</View>
+`;

package/src/components/Empty/__tests__/index.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Empty from '..';
+
+describe('Empty', () => {
+  it('renders empty state content correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <Empty
+        title="You have no notification at this time"
+        description="We'll notify you later."
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Empty/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+import {
+  StyledWrapper,
+  StyledIllustration,
+  StyledTitle,
+  StyledDescription,
+} from './StyledEmpty';
+
+interface EmptyProps {
+  /**
+   * Empty's title.
+   */
+  title: string;
+  /**
+   * Empty's description.
+   */
+  description?: string;
+  /**
+   * Empty's variant
+   * 'dark' if rendered on a dark background and 'white' otherwise
+   */
+  variant?: 'light' | 'dark';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Empty = ({
+  title,
+  description,
+  style,
+  testID,
+  variant = 'light',
+}: EmptyProps): JSX.Element => (
+  <StyledWrapper style={style} testID={testID}>
+    <StyledIllustration />
+    <StyledTitle themeVariant={variant}>{title}</StyledTitle>
+    {description && (
+      <StyledDescription themeVariant={variant}>
+        {description}
+      </StyledDescription>
+    )}
+  </StyledWrapper>
+);
+
+export default Empty;

package/src/components/FAB/ActionGroup/ActionItem.tsx

@@ -1,7 +1,11 @@
 import React, { ComponentProps } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../../Icon';
-import { StyledActionItem, StyledActionItemText } from './StyledActionItem';
+import {
+  StyledActionItem,
+  StyledActionItemText,
+  StyledIcon,
+} from './StyledActionItem';
 
 export interface ActionItemProps {
   testID?: string;
@@ -18,7 +22,7 @@ const ActionItem = ({
   testID,
 }: ActionItemProps) => (
   <StyledActionItem style={style} onPress={onPress} testID={testID}>
-    <Icon icon={icon} />
+    <StyledIcon icon={icon} />
     <StyledActionItemText>{title}</StyledActionItemText>
   </StyledActionItem>
 );

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -43,6 +43,7 @@ const StyledBackdrop = styled(Animated.View)<
 const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   fontSize: theme.__hd__.fab.fontSizes.header,
   lineHeight: theme.__hd__.fab.lineHeights.header,
+  color: theme.__hd__.fab.colors.titleText,
   fontFamily: theme.__hd__.fab.fonts.header,
   marginRight: theme.__hd__.fab.space.headerTextMarginRight,
   marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,

package/src/components/FAB/ActionGroup/StyledActionItem.tsx

@@ -1,6 +1,7 @@
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../../Typography';
+import Icon, { IconProps } from '../../Icon';
 
 const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>(
   ({ theme }) => ({
@@ -25,7 +26,12 @@ const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>(
     fontSize: theme.__hd__.fab.fontSizes.actionItemText,
     lineHeight: theme.__hd__.fab.lineHeights.actionItemText,
     fontFamily: theme.__hd__.fab.fonts.actionItemText,
+    color: theme.__hd__.fab.colors.actionItemText,
   })
 );
 
-export { StyledActionItem, StyledActionItemText };
+const StyledIcon = styled(Icon)<IconProps>(({ theme }) => ({
+  color: theme.__hd__.fab.colors.actionItemText,
+}));
+
+export { StyledIcon, StyledActionItem, StyledActionItemText };