@hero-design/rn 7.12.1 → 7.14.0

package/src/components/Calendar/CalendarRowItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Typography from '../Typography';
+import {
+  StyledCalendarCell,
+  StyledCalendarRowItem,
+  StyledMark,
+} from './StyledCalendar';
+
+const getCellVariant = (
+  isSelected: boolean = false,
+  isCurrent: boolean = false
+) => {
+  if (isSelected) return 'selected';
+  if (isCurrent) return 'current';
+
+  return 'default';
+};
+
+export interface CalendarRowItemProps {
+  date?: Date;
+  onPress?: () => void;
+  isCurrent?: boolean;
+  isSelected?: boolean;
+  textIntent?: 'body' | 'subdued';
+  marked?: boolean;
+}
+
+const CalendarRowItem = ({
+  date,
+  onPress,
+  isCurrent,
+  isSelected,
+  textIntent = 'body',
+  marked = false,
+}: CalendarRowItemProps) => (
+  <StyledCalendarRowItem testID="calendar-date-cell">
+    <StyledCalendarCell
+      variant={getCellVariant(isSelected, isCurrent)}
+      onPress={onPress}
+    >
+      <Typography.Text intent={isSelected ? 'inverted' : textIntent}>
+        {date ? date.getDate() : ''}
+      </Typography.Text>
+      {marked ? (
+        <StyledMark
+          testID="calendar-date-mark"
+          variant={isSelected ? 'inverted' : 'primary'}
+        />
+      ) : null}
+    </StyledCalendarCell>
+  </StyledCalendarRowItem>
+);
+
+export default CalendarRowItem;

package/src/components/Calendar/StyledCalendar.tsx

@@ -0,0 +1,76 @@
+import styled from '@emotion/native';
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+
+const StyledContainer = styled(View)(({ theme }) => ({
+  backgroundColor: theme.__hd__.calendar.colors.background,
+}));
+
+const StyledCalendarHeader = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  paddingHorizontal: theme.__hd__.calendar.space.headerHorizontalPadding,
+  paddingVertical: theme.__hd__.calendar.space.headerVerticalPadding,
+}));
+
+const StyledCalendarDayNameCell = styled(View)<ViewProps>(({ theme }) => ({
+  width: theme.__hd__.calendar.sizes.cellWidth,
+  height: theme.__hd__.calendar.sizes.cellHeight,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledCalendarCell = styled(TouchableOpacity)<{
+  variant?: 'default' | 'current' | 'selected';
+}>(({ theme, variant = 'default' }) => ({
+  borderColor: theme.__hd__.calendar.colors.border,
+  borderWidth: variant === 'current' ? 1 : 0,
+  borderRadius: theme.__hd__.calendar.radii.default,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor:
+    variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
+  width: theme.__hd__.calendar.sizes.cellCircleWidth,
+  height: theme.__hd__.calendar.sizes.cellCircleHeight,
+}));
+
+const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
+  flexDirection: 'row',
+  paddingHorizontal: theme.__hd__.calendar.space.rowVerticalPadding,
+  flexWrap: 'wrap',
+}));
+
+const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  alignItems: 'center',
+  width: theme.__hd__.calendar.sizes.cellWidth,
+  height: theme.__hd__.calendar.sizes.cellHeight,
+  justifyContent: 'center',
+}));
+
+const StyledDisabledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  alignItems: 'center',
+  width: theme.__hd__.calendar.sizes.cellWidth,
+  height: theme.__hd__.calendar.sizes.cellHeight,
+}));
+
+const StyledMark = styled(View)<{ variant: 'primary' | 'inverted' }>(
+  ({ theme, variant = 'primary' }) => ({
+    width: theme.__hd__.calendar.sizes.markWidth,
+    height: theme.__hd__.calendar.sizes.markHeight,
+    borderRadius: theme.__hd__.calendar.radii.default,
+    backgroundColor: theme.__hd__.calendar.colors[variant],
+    position: 'absolute',
+    bottom: '10%',
+  })
+);
+
+export {
+  StyledContainer,
+  StyledCalendarHeader,
+  StyledCalendarRow,
+  StyledCalendarRowItem,
+  StyledDisabledCalendarRowItem,
+  StyledCalendarDayNameCell,
+  StyledCalendarCell,
+  StyledMark,
+};

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import CalendarRowItem from '../CalendarRowItem';
+
+describe('CalendarRowItem', () => {
+  it.each`
+    textIntent
+    ${'body'}
+    ${'subdued'}
+  `('renders correctly', ({ textIntent }) => {
+    const { toJSON } = renderWithTheme(
+      <CalendarRowItem
+        date={new Date(2022, 10, 10)}
+        onPress={jest.fn()}
+        textIntent={textIntent}
+        marked
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    isCurrent
+    ${true}
+    ${false}
+  `(
+    'renders correctly when selected, and is current date equal to $current',
+    ({ isCurrent }) => {
+      const { toJSON } = renderWithTheme(
+        <CalendarRowItem
+          date={new Date(2022, 10, 10)}
+          onPress={jest.fn()}
+          marked
+          isSelected
+          isCurrent={isCurrent}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders correctly when is current date', () => {
+    const { toJSON } = renderWithTheme(
+      <CalendarRowItem
+        date={new Date(2022, 10, 10)}
+        onPress={jest.fn()}
+        marked
+        isSelected
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders mark when date is marked', () => {
+    const { queryByTestId } = renderWithTheme(
+      <CalendarRowItem
+        date={new Date(2022, 10, 10)}
+        onPress={jest.fn()}
+        marked
+      />
+    );
+
+    expect(queryByTestId('calendar-date-mark')).toBeTruthy();
+  });
+
+  it('not renders mark when date is not marked', () => {
+    const { queryByTestId } = renderWithTheme(
+      <CalendarRowItem date={new Date(2022, 10, 10)} onPress={jest.fn()} />
+    );
+
+    expect(queryByTestId('calendar-date-mark')).toBeNull();
+  });
+});

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

@@ -0,0 +1,411 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CalendarRowItem renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly 2`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#8b8d92",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="subdued"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly when is current date 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="inverted"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly when selected, and is current date equal to $current 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="inverted"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly when selected, and is current date equal to $current 2`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="inverted"
+    />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,50 @@
+import { getValidDate, initArray, isEqDate } from '../helpers';
+
+describe('initArray', () => {
+  it('returns correct value', () => {
+    const transform = (index: number) => `test ${index + 1}`;
+    const actual = initArray(5, transform);
+    const expected = ['test 1', 'test 2', 'test 3', 'test 4', 'test 5'];
+
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe('isEqDate', () => {
+  it.each`
+    dateA                               | dateB                               | expected
+    ${undefined}                        | ${undefined}                        | ${true}
+    ${new Date(2022, 10, 10)}           | ${undefined}                        | ${false}
+    ${undefined}                        | ${new Date(2022, 10, 10)}           | ${false}
+    ${new Date(2022, 10, 11)}           | ${new Date(2022, 10, 10)}           | ${false}
+    ${new Date(2022, 10, 10)}           | ${new Date(2022, 10, 10)}           | ${true}
+    ${new Date(2022, 10, 10, 5, 12, 3)} | ${new Date(2022, 10, 10, 6, 12, 4)} | ${true}
+  `(
+    'returns correct when dateA is $dateA and dateB is $dateB',
+    ({ dateA, dateB, expected }) => {
+      const actual = isEqDate(dateA, dateB);
+      expect(actual).toEqual(expected);
+    }
+  );
+});
+
+describe('getValidDate', () => {
+  const date = new Date(2022, 10, 10);
+  it.each`
+    minDate                   | maxDate                   | expected
+    ${undefined}              | ${undefined}              | ${date}
+    ${new Date(2022, 10, 8)}  | ${undefined}              | ${date}
+    ${new Date(2022, 10, 15)} | ${undefined}              | ${undefined}
+    ${undefined}              | ${new Date(2022, 10, 11)} | ${date}
+    ${undefined}              | ${new Date(2022, 10, 8)}  | ${undefined}
+    ${new Date(2022, 10, 8)}  | ${new Date(2022, 10, 11)} | ${date}
+    ${new Date(2022, 10, 12)} | ${new Date(2022, 10, 11)} | ${undefined}
+    ${new Date(2022, 10, 8)}  | ${new Date(2022, 10, 9)}  | ${undefined}
+  `(
+    'returns correct value when minDate is $minDate and maxDate is $maxDate',
+    ({ minDate, maxDate, expected }) => {
+      const actual = getValidDate(date, minDate, maxDate);
+      expect(actual).toBe(expected);
+    }
+  );
+});