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

package/src/styles/theme.ts

@@ -0,0 +1,609 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+// this is the right import but the package does not like it
+// we can use it to extends our CalendarThemeProps
+// import { Theme } from 'react-native-calendars/src/types';
+
+import { FicButtonTheme } from '../components/buttons/FicButton/FicButton.types';
+import { ficButtonLightTheme } from '../components/buttons/FicButton/themes';
+import ficButtonDarkTheme from '../components/buttons/FicButton/themes/dark';
+import { BannerThemeProp } from '../components/notifications/Banner/Banner.types';
+import {
+  bannerDarkTheme,
+  bannerLightTheme,
+} from '../components/notifications/Banner/themes';
+import { CalendarTheme } from './calendarTheme';
+import { Colors } from './colors';
+
+interface FlatButtonThemeProps {
+  color?: string;
+  disabledColor?: string;
+  backgroundColor?: string;
+  hasShadow?: boolean;
+  shadowColor?: string;
+  borderRadius?: number;
+  disabledStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+interface GradientButtonThemeProps {
+  isHorizontalGradient?: boolean;
+  color?: string;
+  disabledColor?: string;
+  backgroundColors?: string[];
+  disabledBackgroundColors?: string[];
+  hasShadow?: boolean;
+  shadowColor?: string;
+  borderRadius?: number;
+  disabledStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+interface OutlineButtonThemeProps {
+  color?: string;
+  disabledColor?: string;
+  backgroundColor?: string;
+  disabledBackgroundColor?: string;
+  borderColor?: string;
+  disabledBorderColor?: string;
+  hasShadow?: boolean;
+  shadowColor?: string;
+  borderRadius?: number;
+  disabledStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface TextInputThemeProps {
+  color?: string;
+  labelColor?: string;
+  mandatoryIndicatorColor?: string;
+  placeholderColor?: string;
+  inlineLeadingColor?: string;
+  fieldIconColor?: string;
+  borderColor?: string;
+  focusedBorderColor?: string;
+  disabledBorderColor?: string;
+  erroredBorderColor?: string;
+  warningBorderColor?: string;
+  backgroundColor?: string;
+  disabledBackgroundColor?: string;
+}
+
+interface TypographiesThemeProps {
+  bodyColor?: string;
+  buttonTitleColor?: string;
+  calloutColor?: string;
+  captionOneColor?: string;
+  captionTwoColor?: string;
+  footnoteColor?: string;
+  headlineColor?: string;
+  largeTitleColor?: string;
+  subheadColor?: string;
+  titleOneColor?: string;
+  titleTwoColor?: string;
+  titleThreeColor?: string;
+}
+
+export interface TouchablesThemeProps {
+  rippleColors?: string;
+  highlightColor?: string;
+}
+
+export interface SearchBarThemeProps {
+  color?: string;
+  backgroundColor?: string;
+  iconColor?: string;
+  selectionColor?: string;
+  useTextColor?: string;
+  errorColor?: string;
+}
+
+export interface DurationPickerThemeProps {
+  activeColor?: string;
+  inactiveColor?: string;
+  labelColor?: string;
+  guidesColor?: string;
+}
+
+export interface BottomSheetHeaderThemeProps {
+  backgroundColor?: string;
+  emptyHeaderBackgroundColor?: string;
+  handleColor?: string;
+  darkHandleColor?: string;
+  titleColor?: string;
+  captionColor?: string;
+  descriptionColor?: string;
+  buttonsColor?: string;
+  loaderColor?: string;
+}
+
+export interface BottomSheetThemeProps {
+  backgroundColor?: string;
+  backdropColor?: string;
+  cancelButtonBackgroundColor?: string;
+  header?: BottomSheetHeaderThemeProps;
+  handleIndicator: ViewStyle;
+}
+
+export interface YearMonthPickerThemeProps {
+  backgroundColor?: string;
+  yearColor?: string;
+  arrowsColor?: string;
+  monthsTextColor?: string;
+  monthsBackgroundColor?: string;
+  currentMonthTextColor?: string;
+  currentMonthBackgroundColor?: string;
+  selectedMonthTextColor?: string;
+  selectedMonthBackgroundColor?: string;
+}
+
+export interface ThemeProps {
+  flatButton?: FlatButtonThemeProps;
+  gradientButton?: GradientButtonThemeProps;
+  outlineButton?: OutlineButtonThemeProps;
+  textInput?: TextInputThemeProps;
+  typographies?: TypographiesThemeProps;
+  searchBar?: SearchBarThemeProps;
+  datePickers?: CalendarTheme;
+  pickers?: DurationPickerThemeProps;
+  bottomSheetHeader?: BottomSheetHeaderThemeProps;
+  yearMonthPickers?: YearMonthPickerThemeProps;
+}
+
+export interface GenericThemeProps {
+  backgroundLevel0?: string;
+  backgroundLevel1?: string;
+  backgroundLevel2?: string;
+  backgroundLevel3?: string;
+  backgroundLevel4?: string;
+  title?: string;
+  description?: string;
+  disabledTitle?: string;
+  disabledDescription?: string;
+  divider?: string;
+  cardBackground?: string;
+}
+
+interface Primaries {
+  azure: Colors;
+  red: Colors;
+  green: Colors;
+  yellow: Colors;
+  purple: Colors;
+  blue: Colors;
+}
+
+export interface Theme {
+  banner?: BannerThemeProp;
+  ficButton?: FicButtonTheme;
+  flatButton: Omit<
+    Required<FlatButtonThemeProps>,
+    'disabledStyle' | 'containerStyle'
+  > & {
+    disabledStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+  };
+  gradientButton: Omit<
+    Required<GradientButtonThemeProps>,
+    'disabledStyle' | 'containerStyle'
+  > & {
+    disabledStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+  };
+  outlineButton: Omit<
+    Required<OutlineButtonThemeProps>,
+    'disabledStyle' | 'containerStyle'
+  > & {
+    disabledStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+  };
+  textInput: Required<TextInputThemeProps>;
+  typographies: Required<TypographiesThemeProps>;
+  touchables: Required<TouchablesThemeProps>;
+  searchBar: Required<SearchBarThemeProps>;
+  datePickers: CalendarTheme;
+  pickers: DurationPickerThemeProps;
+  bottomSheet: Required<BottomSheetThemeProps>;
+  yearMonthPickers: YearMonthPickerThemeProps;
+  generic?: GenericThemeProps;
+  primaries?: Primaries;
+  primariesContrast?: Primaries;
+  primariesLight?: Primaries;
+  primariesDark?: Primaries;
+}
+
+export const ficTheme: Theme = {
+  banner: bannerLightTheme,
+
+  generic: {
+    backgroundLevel0: Colors.WHITE,
+    backgroundLevel1: Colors.GREY_1,
+    backgroundLevel2: Colors.GREY_2,
+    backgroundLevel3: Colors.GREY_3,
+    backgroundLevel4: Colors.GREY_4,
+    title: Colors.BLACK_80,
+    description: Colors.BLACK_64,
+    disabledTitle: Colors.BLACK_40,
+    disabledDescription: Colors.BLACK_24,
+    divider: Colors.GREY_2,
+    cardBackground: Colors.WHITE,
+  },
+  primaries: {
+    azure: Colors.AZURE,
+    red: Colors.RED,
+    green: Colors.GREEN,
+    yellow: Colors.YELLOW,
+    purple: Colors.PURPLE,
+    blue: Colors.BLUE,
+  },
+  primariesContrast: {
+    azure: Colors.WHITE,
+    red: Colors.WHITE,
+    green: Colors.WHITE,
+    yellow: Colors.BLACK_80,
+    purple: Colors.WHITE,
+    blue: Colors.WHITE,
+  },
+  primariesLight: {
+    azure: Colors.AZURE_L1,
+    red: Colors.RED_L1,
+    green: Colors.GREEN_L1,
+    yellow: Colors.YELLOW_L1,
+    purple: Colors.PURPLE_L1,
+    blue: Colors.BLUE_L1,
+  },
+  primariesDark: {
+    azure: Colors.AZURE_D1,
+    red: Colors.RED_D2,
+    green: Colors.GREEN_D2,
+    yellow: Colors.YELLOW_D2,
+    purple: Colors.PURPLE_D1,
+    blue: Colors.BLUE_D1,
+  },
+  ficButton: ficButtonLightTheme,
+  flatButton: {
+    color: Colors.BLACK_80,
+    disabledColor: Colors.GREY_2,
+    backgroundColor: Colors.WHITE,
+    hasShadow: true,
+    shadowColor: Colors.BLACK,
+    borderRadius: 4,
+    disabledStyle: {
+      backgroundColor: Colors.GREY_2,
+      elevation: 0,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+    },
+    containerStyle: undefined,
+  },
+  gradientButton: {
+    isHorizontalGradient: false,
+    color: Colors.WHITE,
+    disabledColor: Colors.GREY_2,
+    backgroundColors: [Colors.AZURE_L2, Colors.AZURE],
+    disabledBackgroundColors: [Colors.WHITE, Colors.WHITE],
+    hasShadow: true,
+    shadowColor: Colors.BLACK,
+    borderRadius: 4,
+    disabledStyle: undefined,
+    containerStyle: undefined,
+  },
+  outlineButton: {
+    color: Colors.AZURE,
+    disabledColor: Colors.GREY_2,
+    backgroundColor: Colors.WHITE,
+    disabledBackgroundColor: Colors.WHITE,
+    borderColor: Colors.AZURE_L2,
+    disabledBorderColor: Colors.WHITE,
+    hasShadow: true,
+    shadowColor: Colors.BLACK,
+    borderRadius: 4,
+    disabledStyle: {
+      backgroundColor: Colors.GREY_2,
+      elevation: 0,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+    },
+    containerStyle: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignSelf: 'center',
+      height: 40,
+      backgroundColor: Colors.WHITE,
+      borderRadius: 4,
+    },
+  },
+  textInput: {
+    color: Colors.BLACK_64,
+    labelColor: Colors.BLACK_40,
+    mandatoryIndicatorColor: Colors.RED,
+    placeholderColor: Colors.BLACK_40,
+    inlineLeadingColor: Colors.BLACK_40,
+    fieldIconColor: Colors.BLACK_40,
+    borderColor: Colors.GREY_3,
+    focusedBorderColor: Colors.AZURE,
+    erroredBorderColor: Colors.RED,
+    warningBorderColor: Colors.YELLOW_D1,
+    disabledBorderColor: 'transparent',
+    backgroundColor: Colors.WHITE,
+    disabledBackgroundColor: Colors.GREY_1,
+  },
+  typographies: {
+    bodyColor: Colors.BLACK_80,
+    buttonTitleColor: Colors.BLACK_80,
+    calloutColor: Colors.BLACK_64,
+    captionOneColor: Colors.BLACK_64,
+    captionTwoColor: Colors.BLACK_64,
+    footnoteColor: Colors.BLACK_64,
+    headlineColor: Colors.BLACK,
+    largeTitleColor: Colors.BLACK,
+    subheadColor: Colors.BLACK_64,
+    titleOneColor: Colors.BLACK,
+    titleTwoColor: Colors.BLACK,
+    titleThreeColor: Colors.BLACK,
+  },
+  touchables: {
+    rippleColors: Colors.GREY_2,
+    highlightColor: Colors.GREY_3,
+  },
+  searchBar: {
+    color: Colors.BLACK,
+    backgroundColor: Colors.GREY_1,
+    iconColor: Colors.GREY_4,
+    selectionColor: Colors.AZURE,
+    useTextColor: Colors.GREY_4,
+    errorColor: Colors.RED,
+  },
+  datePickers: {
+    calendarBackground: Colors.WHITE,
+    backgroundColor: Colors.WHITE,
+    arrowColor: Colors.AZURE,
+    selectedDayBackgroundColor: Colors.AZURE,
+    selectedDayTextColor: Colors.WHITE,
+    selectedDotColor: Colors.WHITE,
+    dayTextColor: Colors.BLACK,
+    monthTextColor: Colors.AZURE,
+    todayTextColor: Colors.AZURE,
+    todayBackgroundColor: Colors.AZURE_L1,
+    textMonthFontWeight: '500',
+    textMonthFontSize: 17,
+    textDayFontSize: 17,
+    textSectionTitleColor: Colors.GREY_3,
+    textDisabledColor: Colors.GREY_2,
+    indicatorColor: Colors.AZURE,
+    dotColor: Colors.AZURE,
+  },
+  pickers: {
+    activeColor: Colors.BLACK,
+    inactiveColor: Colors.BLACK_40,
+    labelColor: Colors.BLACK_64,
+    guidesColor: Colors.GREY_2,
+  },
+  bottomSheet: {
+    backgroundColor: Colors.WHITE,
+    backdropColor: Colors.BLACK,
+    cancelButtonBackgroundColor: Colors.WHITE,
+    handleIndicator: { backgroundColor: Colors.GREY_3 },
+
+    header: {
+      backgroundColor: Colors.AZURE,
+      emptyHeaderBackgroundColor: Colors.WHITE,
+      buttonsColor: Colors.WHITE,
+      titleColor: Colors.WHITE,
+      captionColor: Colors.WHITE_80,
+      descriptionColor: Colors.WHITE_80,
+      handleColor: Colors.AZURE_L3,
+      darkHandleColor: Colors.GREY_3,
+      loaderColor: Colors.AZURE,
+    },
+  },
+  yearMonthPickers: {
+    backgroundColor: Colors.WHITE,
+    arrowsColor: Colors.AZURE,
+    yearColor: Colors.AZURE,
+    monthsTextColor: Colors.GREY_4,
+    selectedMonthTextColor: Colors.WHITE,
+    selectedMonthBackgroundColor: Colors.AZURE,
+    currentMonthTextColor: Colors.AZURE,
+    currentMonthBackgroundColor: Colors.AZURE_L1,
+  },
+};
+
+export const ficDarkTheme: Theme = {
+  banner: bannerDarkTheme,
+
+  generic: {
+    backgroundLevel0: Colors.ELEVATION_1,
+    backgroundLevel1: Colors.ELEVATION_2,
+    backgroundLevel2: Colors.ELEVATION_3,
+    backgroundLevel3: Colors.ELEVATION_4,
+    backgroundLevel4: Colors.ELEVATION_5,
+    title: Colors.WHITE,
+    description: Colors.WHITE_80,
+    disabledTitle: Colors.WHITE_64,
+    disabledDescription: Colors.WHITE_40,
+    divider: Colors.WHITE_8,
+    cardBackground: Colors.ELEVATION_3,
+  },
+  primaries: {
+    azure: Colors.AZURE_K,
+    red: Colors.RED_K_D1,
+    green: Colors.GREEN_K,
+    yellow: Colors.YELLOW,
+    purple: Colors.PURPLE_K,
+    blue: Colors.BLUE_K,
+  },
+  primariesContrast: {
+    azure: Colors.WHITE,
+    red: Colors.WHITE,
+    green: Colors.BLACK_80,
+    yellow: Colors.BLACK_80,
+    purple: Colors.WHITE,
+    blue: Colors.WHITE,
+  },
+  primariesLight: {
+    azure: Colors.AZURE_K_L1,
+    red: Colors.RED_K_L1,
+    green: Colors.GREEN_K_L1,
+    yellow: Colors.YELLOW_L1,
+    purple: Colors.PURPLE_L1,
+    blue: Colors.BLUE_K_L1,
+  },
+  primariesDark: {
+    azure: Colors.AZURE_K_D1,
+    red: Colors.RED_K_D2,
+    green: Colors.GREEN_K_D2,
+    yellow: Colors.YELLOW_D2,
+    purple: Colors.PURPLE_D1,
+    blue: Colors.BLUE_K_D1,
+  },
+  ficButton: ficButtonDarkTheme,
+  flatButton: {
+    color: Colors.WHITE,
+    disabledColor: Colors.WHITE_40,
+    backgroundColor: Colors.ELEVATION_1,
+    hasShadow: true,
+    shadowColor: Colors.BLACK,
+    borderRadius: 4,
+    disabledStyle: {
+      backgroundColor: Colors.ELEVATION_2,
+      elevation: 0,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+    },
+    containerStyle: undefined,
+  },
+  gradientButton: {
+    isHorizontalGradient: false,
+    color: Colors.WHITE,
+    disabledColor: Colors.WHITE_40,
+    backgroundColors: [Colors.AZURE_K_L2, Colors.AZURE_K],
+    disabledBackgroundColors: [Colors.ELEVATION_2, Colors.ELEVATION_2],
+    hasShadow: true,
+    shadowColor: Colors.BLACK,
+    borderRadius: 4,
+    disabledStyle: undefined,
+    containerStyle: undefined,
+  },
+  outlineButton: {
+    color: Colors.AZURE_K,
+    disabledColor: Colors.WHITE_40,
+    backgroundColor: Colors.ELEVATION_1,
+    disabledBackgroundColor: Colors.WHITE_24,
+    borderColor: Colors.AZURE_K,
+    disabledBorderColor: Colors.WHITE_24,
+    hasShadow: true,
+    shadowColor: Colors.BLACK,
+    borderRadius: 4,
+    disabledStyle: {
+      backgroundColor: Colors.ELEVATION_2,
+      elevation: 0,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+    },
+    containerStyle: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignSelf: 'center',
+      height: 40,
+      backgroundColor: Colors.ELEVATION_1,
+      borderRadius: 4,
+    },
+  },
+  textInput: {
+    color: Colors.WHITE,
+    labelColor: Colors.WHITE_64,
+    mandatoryIndicatorColor: Colors.RED_K,
+    placeholderColor: Colors.WHITE_64,
+    inlineLeadingColor: Colors.WHITE_80,
+    fieldIconColor: Colors.WHITE_64,
+    borderColor: Colors.ELEVATION_5,
+    focusedBorderColor: Colors.AZURE_K_L3,
+    erroredBorderColor: Colors.RED_K,
+    warningBorderColor: Colors.YELLOW,
+    disabledBorderColor: 'transparent',
+    backgroundColor: Colors.ELEVATION_2,
+    disabledBackgroundColor: Colors.WHITE_8,
+  },
+  typographies: {
+    bodyColor: Colors.WHITE_80,
+    buttonTitleColor: Colors.WHITE,
+    calloutColor: Colors.WHITE_64,
+    captionOneColor: Colors.WHITE_64,
+    captionTwoColor: Colors.WHITE_64,
+    footnoteColor: Colors.WHITE_64,
+    headlineColor: Colors.WHITE,
+    largeTitleColor: Colors.WHITE,
+    subheadColor: Colors.WHITE_64,
+    titleOneColor: Colors.WHITE,
+    titleTwoColor: Colors.WHITE,
+    titleThreeColor: Colors.WHITE,
+  },
+  touchables: {
+    rippleColors: Colors.ELEVATION_3,
+    highlightColor: Colors.ELEVATION_4,
+  },
+  searchBar: {
+    color: Colors.WHITE_64,
+    backgroundColor: Colors.ELEVATION_4,
+    iconColor: Colors.WHITE_80,
+    selectionColor: Colors.AZURE_K,
+    useTextColor: Colors.WHITE_40,
+    errorColor: Colors.RED_K,
+  },
+  datePickers: {
+    calendarBackground: Colors.ELEVATION_1,
+    backgroundColor: Colors.ELEVATION_1,
+    arrowColor: Colors.AZURE_K,
+    selectedDayBackgroundColor: Colors.AZURE_K,
+    selectedDayTextColor: Colors.WHITE,
+    selectedDotColor: Colors.WHITE,
+    dayTextColor: Colors.WHITE,
+    monthTextColor: Colors.AZURE_K,
+    todayTextColor: Colors.AZURE_K,
+    todayBackgroundColor: Colors.AZURE_K_L1,
+    textMonthFontWeight: '500',
+    textMonthFontSize: 17,
+    textDayFontSize: 17,
+    textSectionTitleColor: Colors.ELEVATION_3,
+    textDisabledColor: Colors.ELEVATION_2,
+    indicatorColor: Colors.AZURE_K,
+    dotColor: Colors.AZURE_K,
+  },
+  pickers: {
+    activeColor: Colors.WHITE,
+    inactiveColor: Colors.WHITE_64,
+    labelColor: Colors.WHITE_80,
+    guidesColor: Colors.WHITE_8,
+  },
+  bottomSheet: {
+    backgroundColor: Colors.ELEVATION_1,
+    backdropColor: Colors.BACKDROP,
+    cancelButtonBackgroundColor: Colors.ELEVATION_1,
+    handleIndicator: { backgroundColor: Colors.ELEVATION_5 },
+
+    header: {
+      backgroundColor: Colors.AZURE_K,
+      emptyHeaderBackgroundColor: Colors.ELEVATION_1,
+      buttonsColor: Colors.WHITE,
+      titleColor: Colors.WHITE,
+      captionColor: Colors.WHITE_80,
+      descriptionColor: Colors.WHITE_80,
+      handleColor: Colors.AZURE_K,
+      darkHandleColor: Colors.ELEVATION_4,
+      loaderColor: Colors.AZURE_K,
+    },
+  },
+  yearMonthPickers: {
+    backgroundColor: Colors.ELEVATION_1,
+    arrowsColor: Colors.AZURE_K,
+    yearColor: Colors.AZURE_K,
+    monthsTextColor: Colors.ELEVATION_2,
+    selectedMonthTextColor: Colors.WHITE,
+    selectedMonthBackgroundColor: Colors.AZURE_K,
+    currentMonthTextColor: Colors.AZURE_K,
+    currentMonthBackgroundColor: Colors.AZURE_K_L1,
+  },
+};
+
+export const defaultTheme: Theme = ficTheme;

package/src/utils/locale.ts

@@ -0,0 +1,50 @@
+import { capitalize, map } from 'lodash';
+import moment from 'moment';
+import 'moment/min/locales';
+import { NativeModules, Platform } from 'react-native';
+import { LocaleConfig } from 'react-native-calendars';
+
+const calendarLocaleConfig = (localeCode: string) => {
+  const momentLocale = moment.localeData(localeCode);
+
+  return {
+    monthNames: capitalizeStringArray(momentLocale.months()),
+    monthNamesShort: capitalizeStringArray(momentLocale.monthsShort()),
+    dayNames: capitalizeStringArray(momentLocale.weekdays()),
+    dayNamesShort: capitalizeStringArray(momentLocale.weekdaysShort()),
+    today: 'Today'
+  };
+};
+
+const capitalizeStringArray = (arr: string[]) => {
+  return map(arr, element => capitalize(element));
+};
+
+/**
+ * Retrieves the language and optionally the region settings of the device.
+ *
+ * @param {boolean} [withNoRegion] - If `true`, only the language is returned without the region.
+ * @returns {string} The language and region settings of the device.
+ * @example
+ * // Returns "it_IT" or "it" if `withNoRegion` is `true`
+ * const languageRegion = getDeviceLanguageAndRegion(true);
+ */
+export const getDeviceLanguageAndRegion = (withNoRegion?: boolean): string => {
+  const language_region =
+    Platform.OS === 'ios'
+      ? NativeModules.SettingsManager.settings.AppleLocale || NativeModules.SettingsManager.settings.AppleLanguages[0]
+      : NativeModules.I18nManager.localeIdentifier;
+  const language = language_region.split('_')[0];
+  return withNoRegion ? language : language_region;
+};
+
+export let desiredLocale: string | undefined = undefined;
+
+const setLocale = (localeCode: string) => {
+  moment.locale(localeCode);
+  LocaleConfig.locales[localeCode] = calendarLocaleConfig(localeCode);
+  LocaleConfig.defaultLocale = localeCode;
+  desiredLocale = localeCode;
+};
+
+export default setLocale;