@fattureincloud-mobile/fic-mobile-ds 1.0.0 → 1.2.0

package/src/components/base/DatePicker/DatePicker.tsx

@@ -0,0 +1,427 @@
+import { capitalize } from 'lodash';
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+// @ts-ignore
+import { ViewProps } from 'react-native';
+import { Calendar, DateData } from 'react-native-calendars';
+import { Direction } from 'react-native-calendars/src/types';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon, IconProps } from '../../../providers/IconProvider';
+import { CalendarTheme } from '../../../styles/calendarTheme';
+import { Colors } from '../../../styles/colors';
+import { DEFAULT_ICON_SIZE } from '../../buttons/FicButton/constants';
+import { Body } from '../../typographies/Body';
+import { FontWeight } from '../../typographies/font';
+import { HeaderArrows } from '../HeaderArrows';
+
+type CustomIconNames = {
+  left: string;
+  right: string;
+};
+
+export interface IDatePickerProps {
+  onDatePicked: (date: string) => void;
+  value?: string;
+  /**
+   * Use this value when you want to use a period picker, it is used to show the starting date of the period when picking the ending one.
+   * Must be formatted following the current Locale.
+   */
+  startingDate?: string;
+  /**
+   * Use this value when you want to use a period picker, it is used to show the ending date of the period when picking the starting one.
+   * Must be formatted following the current Locale.
+   */
+  endingDate?: string;
+  /**
+   * Minimum selectable date, dates before this one will be disabled.
+   * Must be formatted following the current Locale.
+   */
+  minDate?: string;
+  /**
+   * Maximum selectable date, dates after this one will be disabled.
+   * Must be formatted following the current Locale.
+   */
+  maxDate?: string;
+  /**
+   * Always show six weeks on each month (only when hideExtraDays = false)
+   */
+  showSixWeeks?: boolean | undefined;
+  /**
+   * Do not show days of other months in month page
+   */
+  hideExtraDays?: boolean;
+  /**
+   * Icon names for the month and year arrows
+   * If not provided, default icons will be used
+   */
+  monthIconNames?: CustomIconNames;
+  yearIconNames?: CustomIconNames;
+  format?: string;
+  firstDay?: number;
+  theme?: CalendarTheme;
+  withYearSelector?: boolean;
+  headerIconProps?: HeaderIconProps;
+}
+
+export type CalendarUnit = 'month' | 'year';
+
+export type IconComponent = {
+  component: JSX.Element;
+  calendarUnit: CalendarUnit;
+};
+
+export type HeaderIconProps = Omit<
+  IconProps,
+  'name' | 'size' | keyof ViewProps
+>;
+
+const DatePicker: React.FC<IDatePickerProps> = (props: IDatePickerProps) => {
+  const { datePickers } = useTheme();
+
+  const {
+    onDatePicked,
+    value,
+    startingDate,
+    endingDate,
+    minDate,
+    maxDate,
+    showSixWeeks = true,
+    hideExtraDays = false,
+    format = moment.localeData().longDateFormat('L'),
+    firstDay,
+    theme = datePickers,
+    withYearSelector = false,
+    monthIconNames,
+    yearIconNames,
+    headerIconProps,
+  } = props;
+
+  // The style for selected days in period 💄
+  const periodMarkingStyle = useMemo(
+    () => ({
+      color: theme.selectedDayBackgroundColor,
+      textColor: theme.selectedDayTextColor,
+    }),
+    [theme.selectedDayBackgroundColor, theme.selectedDayTextColor]
+  );
+
+  const formattedStartingDay =
+    startingDate && moment(startingDate, format).format('YYYY-MM-DD');
+  const formattedEndingDay =
+    endingDate && moment(endingDate, format).format('YYYY-MM-DD');
+  const selectedDate =
+    value && moment(value, format).isValid()
+      ? moment(value, format).format('YYYY-MM-DD')
+      : undefined;
+
+  const [currentYear, setCurrentYear] = useState(
+    value
+      ? moment(value, format).year()
+      : maxDate
+      ? moment(maxDate, format).year()
+      : moment().year()
+  );
+  const [currentMonth, setCurrentMonth] = useState(
+    value
+      ? moment(value, format).month() + 1
+      : maxDate
+      ? moment(maxDate, format).month() + 1
+      : moment().month() + 1
+  );
+
+  useEffect(() => {
+    if (value !== undefined) {
+      // Improved efficiency. No need to update the state if the value is the same.
+      const newMonthFromValue = moment(value, format).month() + 1;
+      const newYearFromValue = moment(value, format).year();
+      if (currentMonth !== newMonthFromValue) {
+        setCurrentMonth(newMonthFromValue);
+      }
+      if (currentYear !== newYearFromValue) {
+        setCurrentYear(newYearFromValue);
+      }
+    }
+  }, [value]);
+
+  const currentDate = useMemo(
+    () =>
+      moment(`${currentYear}-${currentMonth}`, 'YYYY-M').format('YYYY-MM-DD'),
+    [currentYear, currentMonth]
+  );
+
+  // Creates the object with all the days between startDate and endDate styled correctly
+  const createDatePeriod = useCallback(
+    (startDate: string, endDate: string) => {
+      const dateRange = {
+        [startDate]: { startingDay: true, ...periodMarkingStyle },
+        [endDate]: { endingDay: true, ...periodMarkingStyle },
+      };
+
+      if (startDate && endDate) {
+        let start = moment(startDate).startOf('day').add(1, 'days');
+        const end = moment(endDate).startOf('day');
+
+        while (end.isAfter(start)) {
+          Object.assign(dateRange, {
+            [start.format('YYYY-MM-DD')]: periodMarkingStyle,
+          });
+          start = start.add(1, 'days');
+        }
+      }
+
+      return dateRange;
+    },
+    [periodMarkingStyle]
+  );
+
+  const onDateSelected = useCallback(
+    (date: DateData) => onDatePicked(moment(date.dateString).format(format)),
+    [format, onDatePicked]
+  );
+
+  const markingType =
+    (!!formattedStartingDay && formattedStartingDay !== selectedDate) ||
+    (!!formattedEndingDay && formattedEndingDay !== selectedDate)
+      ? 'period'
+      : undefined;
+
+  const formattedMinDate =
+    minDate && moment(minDate, format).format('YYYY-MM-DD');
+  const formattedMaxDate =
+    maxDate && moment(maxDate, format).format('YYYY-MM-DD');
+
+  const isTodayBetweenStartingDayAndSelected =
+    !!selectedDate &&
+    !!formattedStartingDay &&
+    moment().isBetween(
+      moment(formattedStartingDay).startOf('day'),
+      moment(selectedDate).endOf('day')
+    );
+  const isTodayBetweenSelectedAndEndingDay =
+    !!selectedDate &&
+    !!formattedEndingDay &&
+    moment().isBetween(
+      moment(selectedDate).startOf('day'),
+      moment(formattedEndingDay).endOf('day')
+    );
+  const isSelectedDateToday =
+    !!selectedDate && moment().isSame(moment(selectedDate), 'day');
+  const isTodayInRange =
+    !!selectedDate &&
+    (isTodayBetweenStartingDayAndSelected ||
+      isTodayBetweenSelectedAndEndingDay ||
+      isSelectedDateToday);
+
+  const {
+    todayBackgroundColor,
+    todayTextColor,
+    arrowColor,
+    monthTextColor,
+    textMonthFontWeight,
+    ...restTheme
+  } = theme;
+
+  const markedDates: any = useMemo(() => {
+    const toReturn: any = {};
+
+    // Filling markedDates for the calendar
+    if (!!formattedStartingDay) {
+      // If startingDay is defined, treat this calendar as a period picker for the endingDay
+      if (!!selectedDate) {
+        if (formattedStartingDay === selectedDate) {
+          toReturn[formattedStartingDay] = { selected: true };
+        } else {
+          // Sets all the days between the selected dates with the selected style
+          Object.assign(
+            toReturn,
+            createDatePeriod(formattedStartingDay, selectedDate)
+          );
+        }
+      } else {
+        toReturn[formattedStartingDay] = {
+          startingDay: true,
+          ...periodMarkingStyle,
+        };
+      }
+    } else if (!!formattedEndingDay) {
+      // If endingDay is defined, treat this calendar as a period picker for the startingDay
+      if (!!selectedDate) {
+        if (formattedEndingDay === selectedDate) {
+          toReturn[formattedEndingDay] = { selected: true };
+        } else {
+          // Sets all the days between the selected dates with the selected style
+          Object.assign(
+            toReturn,
+            createDatePeriod(selectedDate, formattedEndingDay)
+          );
+        }
+      } else {
+        toReturn[formattedEndingDay] = {
+          endingDay: true,
+          ...periodMarkingStyle,
+        };
+      }
+    } else if (!!selectedDate) {
+      // Simple picker
+      toReturn[selectedDate] = { selected: true };
+    }
+
+    // If today is not selected, we want to style the day with the todayBackgroundColor
+    if (!isTodayInRange) {
+      if (markingType === 'period') {
+        // Whether today is after the starting date or before the ending date
+        const isAfterStartingDate =
+          !!formattedStartingDay &&
+          moment().isAfter(moment(formattedStartingDay).startOf('day'));
+        const isBeforeEndingDate =
+          !!formattedEndingDay &&
+          moment().isBefore(moment(formattedEndingDay).endOf('day'));
+        const isSelectable = isAfterStartingDate || isBeforeEndingDate;
+
+        if (isSelectable) {
+          toReturn[moment().format('YYYY-MM-DD')] = {
+            startingDay: true,
+            endingDay: true,
+            color: todayBackgroundColor,
+            textColor: todayTextColor,
+          };
+        }
+      } else {
+        toReturn[moment().format('YYYY-MM-DD')] = {
+          color: todayBackgroundColor,
+          textColor: todayTextColor,
+        };
+      }
+    }
+
+    return toReturn;
+  }, [
+    formattedStartingDay,
+    formattedEndingDay,
+    periodMarkingStyle,
+    selectedDate,
+    createDatePeriod,
+    isTodayInRange,
+    markingType,
+    todayBackgroundColor,
+    todayTextColor,
+  ]);
+
+  const onPreviousYearPress = () => {
+    setCurrentYear(currentYear - 1);
+  };
+
+  const onPreviousMonthPress = () => {
+    if (currentMonth === 1) {
+      setCurrentYear(currentYear - 1);
+      setCurrentMonth(12);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+
+  const onNextYearPress = () => {
+    setCurrentYear(currentYear + 1);
+  };
+
+  const onNextMonthPress = () => {
+    if (currentMonth === 12) {
+      setCurrentYear(currentYear + 1);
+      setCurrentMonth(1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+
+  const Arrows = ({ direction }: { direction: Direction }) => {
+    const createIconComponent = (
+      name: string,
+      calendarUnit: CalendarUnit
+    ): IconComponent => ({
+      component: (
+        <Icon
+          name={name}
+          size={DEFAULT_ICON_SIZE}
+          color={arrowColor || Colors.BLUE}
+          {...headerIconProps}
+        />
+      ),
+      calendarUnit,
+    });
+
+    const _monthIconName = monthIconNames
+      ? direction === 'left'
+        ? monthIconNames.left
+        : monthIconNames.right
+      : `chevron-${direction}`;
+    const _yearIconName = yearIconNames
+      ? direction === 'left'
+        ? yearIconNames.left
+        : yearIconNames.right
+      : `chevron-double-${direction}`;
+
+    const monthIconComponent = createIconComponent(_monthIconName, 'month');
+    const yearIconComponent = createIconComponent(_yearIconName, 'year');
+
+    return (
+      <HeaderArrows
+        withYearSelector={withYearSelector}
+        monthIconComponent={monthIconComponent}
+        yearIconComponent={yearIconComponent}
+        onPreviousMonthPress={onPreviousMonthPress}
+        onPreviousYearPress={onPreviousYearPress}
+        onNextMonthPress={onNextMonthPress}
+        onNextYearPress={onNextYearPress}
+        direction={direction}
+      />
+    );
+  };
+
+  // Memoized Header
+  const Header = useMemo(
+    () => (
+      <Body
+        color={monthTextColor || Colors.BLUE}
+        weight={FontWeight.SEMIBOLD}
+        style={{
+          fontWeight: textMonthFontWeight,
+        }}
+      >
+        {capitalize(
+          moment(`${currentMonth}-${currentYear}`, 'M-YYYY').format('MMMM YYYY')
+        )}
+      </Body>
+    ),
+    [currentMonth, currentYear]
+  );
+
+  return (
+    <Calendar
+      disableArrowLeft
+      disableArrowRight
+      key={`${currentYear}-${currentMonth}`}
+      renderArrow={(direction: Direction) => <Arrows direction={direction} />}
+      renderHeader={() => Header}
+      onDayPress={onDateSelected}
+      current={
+        currentDate ||
+        selectedDate ||
+        formattedStartingDay ||
+        formattedEndingDay ||
+        formattedMinDate ||
+        formattedMaxDate
+      }
+      hideExtraDays={hideExtraDays}
+      // @ts-ignore
+      showSixWeeks={showSixWeeks as any}
+      markingType={markingType as 'custom'}
+      markedDates={markedDates}
+      minDate={formattedMinDate || formattedStartingDay}
+      maxDate={formattedMaxDate || formattedEndingDay}
+      firstDay={firstDay}
+      theme={isTodayInRange ? restTheme : theme}
+    />
+  );
+};
+
+export default DatePicker;

package/src/components/base/DatePicker/index.ts

@@ -0,0 +1,4 @@
+import DatePicker, { IDatePickerProps } from './DatePicker';
+
+export { DatePicker };
+export type { IDatePickerProps };

package/src/components/base/HeaderArrows/HeaderArrows.tsx

@@ -0,0 +1,93 @@
+import React, { FunctionComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Direction } from 'react-native-calendars/src/types';
+import { Touchable } from '../../Touchable';
+import { CalendarUnit, IconComponent } from '../DatePicker/DatePicker';
+
+interface IHeaderArrowsProps {
+  withYearSelector: boolean;
+  direction: Direction;
+  monthIconComponent: IconComponent;
+  yearIconComponent: IconComponent;
+  onPreviousYearPress: () => void;
+  onPreviousMonthPress: () => void;
+  onNextYearPress: () => void;
+  onNextMonthPress: () => void;
+}
+
+const HeaderArrows: FunctionComponent<IHeaderArrowsProps> = ({
+  withYearSelector,
+  direction,
+  monthIconComponent,
+  yearIconComponent,
+  onPreviousMonthPress,
+  onPreviousYearPress,
+  onNextMonthPress,
+  onNextYearPress,
+}) => {
+  const iconSet: IconComponent[] = withYearSelector
+    ? [monthIconComponent, yearIconComponent]
+    : [monthIconComponent];
+
+  const iconsToBeRendered: IconComponent[] =
+    direction === 'left' ? iconSet.reverse() : iconSet;
+
+  const actions: { [key in Direction]: { [key in CalendarUnit]: () => void } } =
+    {
+      left: {
+        month: onPreviousMonthPress,
+        year: onPreviousYearPress,
+      },
+      right: {
+        month: onNextMonthPress,
+        year: onNextYearPress,
+      },
+    };
+
+  const handleAction = (calendarUnit: CalendarUnit): void =>
+    actions?.[direction]?.[calendarUnit]?.();
+
+  return (
+    <View style={styles.container}>
+      {iconsToBeRendered.map(({ calendarUnit, component }, idx) => (
+        <Touchable
+          key={idx}
+          style={[
+            styles.iconContainer,
+            direction === 'left' && styles.iconContainerLeft,
+            direction === 'right' && styles.iconContainerRight,
+          ]}
+          hitSlop={{ top: 8, right: 8, bottom: 8, left: 8 }}
+          onPress={() => handleAction(calendarUnit)}
+        >
+          {component}
+        </Touchable>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // For some reasons if we display custom arrows a horizontal padding of 10px is applied to the header container
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: -10,
+    marginRight: -10,
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 5,
+  },
+  iconContainerLeft: {
+    marginRight: 16,
+    marginLeft: 0,
+  },
+  iconContainerRight: {
+    marginRight: 0,
+    marginLeft: 16,
+  },
+});
+
+export default HeaderArrows;

package/src/components/base/HeaderArrows/index.ts

@@ -0,0 +1,3 @@
+import HeaderArrows from './HeaderArrows';
+
+export { HeaderArrows };

package/src/components/buttons/FicButton/FicButton.tsx

@@ -0,0 +1,41 @@
+// @ts-ignore TS6133
+import React from 'react';
+import { FicButtonProps } from './FicButton.types';
+import FicButtonIcon from './FicButtonIcon';
+import FicButtonPrimary from './FicButtonPrimary';
+import FicButtonSecondary from './FicButtonSecondary';
+import FicButtonTertiary from './FicButtonTertiary';
+
+const FicButton: React.FC<FicButtonProps> = ({
+  type = 'primary',
+  ...commonProps
+}) => {
+  const _iconPosition = commonProps.iconPosition
+    ? commonProps.iconPosition
+    : commonProps.iconName
+    ? 'left'
+    : undefined;
+
+  const FButton = () => {
+    switch (type) {
+      case 'icon':
+        return <FicButtonIcon isPressable {...commonProps} />;
+      case 'secondary':
+        return (
+          <FicButtonSecondary iconPosition={_iconPosition} {...commonProps} />
+        );
+      case 'tertiary':
+        return (
+          <FicButtonTertiary iconPosition={_iconPosition} {...commonProps} />
+        );
+      default:
+        return (
+          <FicButtonPrimary iconPosition={_iconPosition} {...commonProps} />
+        );
+    }
+  };
+
+  return <FButton />;
+};
+
+export default FicButton;

package/src/components/buttons/FicButton/FicButton.types.ts

@@ -0,0 +1,114 @@
+import { GestureResponderEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { Colors } from '../../../styles/colors';
+
+export type FicButtonType = 'primary' | 'secondary' | 'tertiary' | 'icon';
+
+export type FicButtonProps = {
+  /**
+   * Button error status
+   */
+  error?: boolean;
+
+  /**
+   * Button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Button Icon name
+   */
+  iconName?: string;
+
+  /**
+   * Button Icon position
+   */
+  iconPosition?: 'right' | 'left';
+
+  /**
+   * Button Icon position
+   */
+  iconSize?: number;
+
+  /**
+   * Button dimension -> small
+   */
+  small?: boolean;
+
+  /**
+   * Button is fullWidth
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Button action title
+   */
+  title?: string;
+
+  /**
+   * Button action type
+   */
+  type?: FicButtonType;
+
+  /**
+   * Button aptic feedback
+   */
+  hapticFeedback?: boolean;
+
+  onPress?: ((event: GestureResponderEvent | undefined) => void) | null | undefined;
+
+  onPressIn?: ((event: GestureResponderEvent | undefined) => void) | null | undefined;
+
+  onPressOut?: ((event: GestureResponderEvent | undefined) => void) | null | undefined;
+
+  containerStyle?: StyleProp<ViewStyle>;
+
+  customPressedIconAreaSize?: number;
+
+  colorContrastForLightTheme?: boolean;
+
+  solid?: boolean;
+
+  light?: boolean;
+
+  regular?: boolean;
+
+  duotone?: boolean;
+};
+
+export type FicButtonTextProps = Omit<FicButtonProps, 'type'>;
+
+export type FicIconProps = Omit<FicButtonProps, 'type' | 'iconPosition' | 'small' | 'title'> & {
+  isPressable?: boolean;
+};
+
+export type GenericViewStyle = Omit<ViewStyle, 'backgroundColor' | 'borderColor' | 'color' | 'iconSize'>;
+export type GenericTextStyle = Omit<TextStyle, 'textDecorationLine' | 'color' | 'fontSize'>;
+
+export type FicButtonStateProps = {
+  container: {
+    backgroundColor?: Colors;
+    borderColor?: Colors;
+  } & GenericViewStyle;
+  text: {
+    textDecorationLine?: any;
+    color?: Colors;
+    fontSize?: number;
+    colorContrastForLightTheme?: Colors;
+  } & GenericTextStyle;
+  icon: {
+    color?: Colors;
+    iconSize?: number;
+    colorContrastForLightTheme?: Colors;
+  } & GenericViewStyle;
+  pressedStyle?: Omit<FicButtonStateProps, 'pressedStyle'>;
+};
+
+export type FicButtonThemeProps = {
+  default: FicButtonStateProps;
+  disabled: FicButtonStateProps;
+  error: FicButtonStateProps;
+};
+
+export type FicButtonTheme = Record<FicButtonType, FicButtonThemeProps>;
+
+export type onPressType = ((e?: GestureResponderEvent) => void) | (() => void);