@pagopa/io-app-design-system 1.0.0-0

package/src/core/IOStyles.ts

@@ -0,0 +1,325 @@
+import { Platform, StyleSheet } from "react-native";
+import { IOIconSizeScale } from "../components/icons";
+import { IOColors } from "./IOColors";
+import { IOAppMargin, IOSpacer, IOSpacingScale } from "./IOSpacing";
+
+/**
+ * A collection of default styles used within IO App.
+ */
+
+interface IOVisualCostants {
+  appMarginDefault: IOAppMargin;
+  // Dimensions
+  avatarSizeSmall: number;
+  avatarSizeMedium: number;
+}
+
+export const IOVisualCostants: IOVisualCostants = {
+  appMarginDefault: 24,
+  avatarSizeSmall: 44,
+  avatarSizeMedium: 66
+};
+
+export const IOStyles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  selfCenter: {
+    alignSelf: "center"
+  },
+  alignCenter: {
+    alignItems: "center"
+  },
+  horizontalContentPadding: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault
+  },
+  row: {
+    flexDirection: "row"
+  },
+  column: {
+    flexDirection: "column"
+  },
+  rowSpaceBetween: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  centerJustified: {
+    justifyContent: "center"
+  },
+  // The following styles come from the original
+  // NativeBase's `View`. They are moved here to
+  // prevent UI regressions.
+  footer: {
+    backgroundColor: IOColors.white,
+    paddingBottom: 16,
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    paddingTop: 16,
+    // iOS shadow
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: 50
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 37,
+    elevation: 20 // Prop supported on Android only
+  },
+  bgWhite: {
+    backgroundColor: IOColors.white
+    // https://github.com/pagopa/io-app/pull/4387
+  },
+  topListBorderBelowTabsStyle: {
+    borderTopWidth: Platform.OS === "android" ? 0.1 : undefined,
+    elevation: 0.1
+  }
+});
+
+/**
+ * BUTTON STYLES
+ */
+
+/* SIZE
+- Height for classic buttons
+- Width and height for icon buttons
+*/
+const btnLegacySizeDefault = 40;
+const btnLegacySizeSmall = 39;
+const btnSizeLarge = 56;
+// NEW Design System
+const btnBorderRadius = 8;
+const btnSizeDefault = 48;
+// TODO: Replace the number type with the new IOIconSizeScale
+const iconBtnSizeSmall: number = 24;
+
+export const IOButtonLegacyStyles = StyleSheet.create({
+  /* BaseButton, used in the:
+  ButtonSolid, ButtonOutline
+  */
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlignVertical: "center", // Prop supported on Android only
+    /* Legacy visual properties. They will be replaced with
+    dynamic ones once NativeBase is gone */
+    borderRadius: 4,
+    paddingHorizontal: 16,
+    // Reset default visual parameters
+    elevation: 0
+    // Visual parameters based on the FontScale
+    // paddingVertical: PixelRatio.getFontScale() * 10,
+    // paddingHorizontal: PixelRatio.getFontScale() * 16,
+    // borderRadius: PixelRatio.getFontScale() * 8
+  },
+  /* Labels */
+  label: {
+    alignSelf: "center"
+  },
+  labelSizeDefault: {
+    fontSize: 16
+  },
+  labelSizeSmall: {
+    fontSize: 14
+  },
+  /* Heights
+  Must be replaced with dynamic values, depending on the
+  fontScale parameter */
+  buttonSizeDefault: {
+    height: btnLegacySizeDefault
+  },
+  buttonSizeSmall: {
+    height: btnLegacySizeSmall
+  }
+});
+
+export const IOButtonStyles = StyleSheet.create({
+  /* BaseButton, used in the:
+  ButtonSolid, ButtonOutline
+  */
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlignVertical: "center", // Prop supported on Android only
+    /* Legacy visual properties. They will be replaced with
+    dynamic ones once NativeBase is gone */
+    borderRadius: btnBorderRadius,
+    paddingHorizontal: 24,
+    // Reset default visual parameters
+    elevation: 0
+    // Visual parameters based on the FontScale
+    // paddingVertical: PixelRatio.getFontScale() * 10,
+    // paddingHorizontal: PixelRatio.getFontScale() * 16,
+    // borderRadius: PixelRatio.getFontScale() * 8
+  },
+  buttonLink: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlignVertical: "center", // Prop supported on Android only
+    // Reset default visual parameters
+    elevation: 0
+  },
+  /* Labels */
+  label: {
+    alignSelf: "center"
+  },
+  labelSizeDefault: {
+    fontSize: 16
+  },
+  labelSizeSmall: {
+    fontSize: 16
+  },
+  /* Heights
+  Must be replaced with dynamic values, depending on the
+  fontScale parameter */
+  buttonSizeDefault: {
+    height: btnSizeDefault
+  },
+  buttonSizeSmall: {
+    height: btnSizeDefault
+  },
+  /* Widths */
+  dimensionsDefault: {
+    alignSelf: "flex-start"
+  }
+});
+
+export const IOIconButtonStyles = StyleSheet.create({
+  /* IconButton */
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    // Reset default visual parameters
+    elevation: 0
+  },
+  buttonSizeSmall: {
+    width: iconBtnSizeSmall,
+    height: iconBtnSizeSmall
+  },
+  buttonSizeDefault: {
+    width: btnSizeDefault,
+    height: btnSizeDefault,
+    borderRadius: btnSizeDefault
+  },
+  buttonSizeLarge: {
+    width: btnSizeLarge,
+    height: btnSizeLarge,
+    borderRadius: btnSizeLarge
+  }
+});
+
+/**
+ * LIST ITEM STYLES
+ */
+
+interface IOListItemVisualParams {
+  paddingVertical: IOSpacingScale;
+  paddingHorizontal: IOAppMargin;
+  iconMargin: IOSpacingScale;
+  iconSize: IOIconSizeScale;
+  chevronSize: IOIconSizeScale;
+}
+
+export const IOListItemVisualParams: IOListItemVisualParams = {
+  paddingVertical: 12,
+  paddingHorizontal: IOVisualCostants.appMarginDefault,
+  iconMargin: 16,
+  iconSize: 24,
+  chevronSize: 24
+};
+
+export const IOListItemStyles = StyleSheet.create({
+  listItem: {
+    paddingVertical: IOListItemVisualParams.paddingVertical,
+    paddingHorizontal: IOListItemVisualParams.paddingHorizontal,
+    marginHorizontal: -IOListItemVisualParams.paddingHorizontal
+  },
+  listItemInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }
+});
+
+/**
+ * SELECTION ITEM STYLES
+ */
+
+interface IOSelectionTickVisualParams {
+  size: IOIconSizeScale;
+  borderWidth: number;
+  borderColorOffState: IOColors;
+  bgColorOnState: IOColors;
+  tickColor: IOColors;
+}
+
+interface IOSwitchVisualParams {
+  width: number;
+  height: number;
+  bgColorOffState: IOColors;
+  bgColorOnState: IOColors;
+  tickColor: IOColors;
+  bgCircle: IOColors;
+  padding: number;
+}
+
+interface IOSelectionTickLegacyVisualParams {
+  borderColorOffState: IOColors;
+  bgColorOnState: IOColors;
+}
+
+export const IOSelectionTickVisualParams: IOSelectionTickVisualParams = {
+  size: 24,
+  borderWidth: 2,
+  borderColorOffState: "grey-650",
+  bgColorOnState: "blueIO-500",
+  tickColor: "white"
+};
+
+export const IOSwitchVisualParams: IOSwitchVisualParams = {
+  width: 40,
+  height: 28,
+  bgColorOffState: "grey-700",
+  bgColorOnState: "blueIO-500",
+  tickColor: "blueIO-500",
+  bgCircle: "white",
+  // Space between the circle and the main shape
+  padding: 2
+};
+
+export const IOSelectionTickLegacyVisualParams: IOSelectionTickLegacyVisualParams =
+  {
+    borderColorOffState: "bluegrey",
+    bgColorOnState: "blue"
+  };
+
+interface IOSelectionListItemVisualParams {
+  paddingVertical: IOSpacingScale;
+  paddingHorizontal: IOAppMargin;
+  iconMargin: IOSpacingScale;
+  iconSize: IOIconSizeScale;
+  descriptionMargin: IOSpacer;
+}
+
+export const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams =
+  {
+    paddingVertical: 16,
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    iconMargin: 8,
+    iconSize: 24,
+    descriptionMargin: 4
+  };
+
+export const IOSelectionListItemStyles = StyleSheet.create({
+  listItem: {
+    paddingVertical: IOListItemVisualParams.paddingVertical,
+    paddingHorizontal: IOListItemVisualParams.paddingHorizontal,
+    marginHorizontal: -IOListItemVisualParams.paddingHorizontal
+  },
+  listItemInner: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between"
+  }
+});

package/src/core/index.ts

@@ -0,0 +1,6 @@
+export * from "./IOColors";
+export * from "./IOAnimations";
+export * from "./IOStyles";
+export * from "./IOShapes";
+export * from "./IOSpacing";
+export * from "./IOStyleVariables";

package/src/functions/haptic-feedback/hapticFeedback.ts

@@ -0,0 +1,13 @@
+import {
+  trigger,
+  HapticFeedbackTypes,
+  HapticOptions
+} from "react-native-haptic-feedback";
+
+const triggerHaptic = (
+  type: string | HapticFeedbackTypes,
+  options?: HapticOptions
+) => trigger(type, options);
+
+export { triggerHaptic, HapticFeedbackTypes as HapticTypes };
+export type { HapticOptions };

package/src/functions/haptic-feedback/index.ts

@@ -0,0 +1 @@
+export * from "./hapticFeedback";

package/src/functions/index.ts

@@ -0,0 +1 @@
+export * from "./haptic-feedback";

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from "./core";
+export * from "./components";
+export * from "./functions";

package/src/utils/dates.ts

@@ -0,0 +1,18 @@
+import I18n from "i18n-js";
+
+export const localeDateFormat = (date: Date, format: string): string =>
+  isNaN(date.getTime())
+    ? I18n.t("global.date.invalid")
+    : I18n.strftime(date, format);
+
+/**
+ * Generates a locale formatted timestamp,
+ * used to force the refresh of the Image component cache for Android devices
+ * every 24 hours.
+ * @returns the actual locale date short format without slashes.
+ */
+export const toAndroidCacheTimestamp = () =>
+  localeDateFormat(
+    new Date(),
+    I18n.t("global.dateFormats.shortFormat").replace(/\//g, "")
+  );

package/src/utils/fonts.ts

@@ -0,0 +1,111 @@
+/**
+ * Utility functions to manage font properties to style mapping for both iOS and Android
+ * Fonts are managed differently on Android and iOS. Read the Font section of the
+ * README file included in this repository.
+ */
+
+import { Platform } from "react-native";
+
+export type IOFontFamily = keyof typeof fonts;
+
+const weights = ["Light", "Regular", "SemiBold", "Bold"] as const;
+export type IOFontWeight = (typeof weights)[number];
+
+const weightValues = ["300", "400", "600", "700"] as const;
+export type FontWeightValue = (typeof weightValues)[number];
+
+/**
+ * Choose the font name based on the platform
+ */
+const fonts = {
+  TitilliumWeb: Platform.select({
+    android: "TitilliumWeb",
+    ios: "Titillium Web"
+  }),
+  ReadexPro: Platform.select({
+    android: "ReadexPro",
+    ios: "Readex Pro"
+  }),
+  RobotoMono: Platform.select({
+    android: "RobotoMono",
+    ios: "Roboto Mono"
+  })
+};
+
+/**
+ * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
+ * used on iOS
+ */
+export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
+  Light: "300",
+  Regular: "400",
+  SemiBold: "600",
+  Bold: "700"
+};
+
+export type FontFamily = keyof typeof fonts;
+export type FontWeight = keyof typeof fontWeights;
+
+/**
+ * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
+ * used on iOS
+ */
+export const fontWeightsMap: Record<IOFontWeight, FontWeightValue> = {
+  Light: "300",
+  Regular: "400",
+  SemiBold: "600",
+  Bold: "700"
+};
+
+export enum FontStyle {
+  "normal" = "normal",
+  "italic" = "italic"
+}
+
+type FontStyleObject = {
+  fontFamily: string;
+  fontWeight?: FontWeightValue;
+  fontStyle?: FontStyle;
+};
+
+/**
+ * Get the correct `fontFamily` name on both Android and iOS.
+ * @param font
+ * @param weight
+ * @param isItalic
+ */
+export const makeFontFamilyName = (
+  font: FontFamily,
+  weight?: IOFontWeight,
+  isItalic: boolean = false
+): string =>
+  Platform.select({
+    default: "undefined",
+    android: `${fonts[font]}-${weight || "Regular"}${isItalic ? "Italic" : ""}`,
+    ios: fonts[font]
+  });
+
+/**
+ * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android).
+ * @param weight
+ * @param isItalic
+ * @param font
+ */
+export const makeFontStyleObject = (
+  weight: IOFontWeight | undefined = undefined,
+  isItalic: boolean | undefined = false,
+  font: FontFamily | undefined = "TitilliumWeb"
+): FontStyleObject =>
+  Platform.select({
+    default: {
+      fontFamily: "undefined"
+    },
+    android: {
+      fontFamily: makeFontFamilyName(font, weight, isItalic)
+    },
+    ios: {
+      fontFamily: makeFontFamilyName(font, weight, isItalic),
+      fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
+      fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
+    }
+  });

package/src/utils/image.ts

@@ -0,0 +1,38 @@
+import { pipe } from "fp-ts/lib/function";
+import { ImageURISource, Platform } from "react-native";
+import * as B from "fp-ts/boolean";
+import * as T from "io-ts";
+import * as E from "fp-ts/Either";
+import { toAndroidCacheTimestamp } from "./dates";
+
+/**
+ * Adds a locale timestamp to the image URI to invalidate cache on the following day if the current platform is Android.
+ * Useful to bypass React Native Image component aggressive cache on Android.
+ * @param source - the source of the image.
+ * @returns a new source with a modified URI which includes the actual timestamp in the locale format without slashes
+ * if the platform is Android and the source contains an URI. The same source otherwise.
+ */
+export const addCacheTimestampToUri = (source: ImageURISource) => {
+    const UriSource = T.type({
+      uri: T.string
+    });
+  
+    return pipe(
+      Platform.OS === "android",
+      B.fold(
+        () => source,
+        () =>
+          pipe(
+            source,
+            UriSource.decode,
+            E.fold(
+              () => source,
+              () => ({
+                ...source,
+                uri: `${source.uri}?ts=${toAndroidCacheTimestamp()}`
+              })
+            )
+          )
+      )
+    );
+  };

package/src/utils/types.ts

@@ -0,0 +1,30 @@
+export type ThemeSimpleValue = undefined | number | string;
+
+/**
+ * Enhance the type with the testID that should be used to locate a view in end-to-end tests.
+ */
+export type TestID = { testID?: string };
+
+export type WithTestID<T> = T & TestID;
+
+// A generic recursive type for the theme
+export type Theme = {
+  [key: string]: ThemeSimpleValue | Theme;
+};
+
+/**
+ * Ensure that all the keys of type T are required, transforming all optional field of kind T | undefined to T
+ */
+export type RequiredAll<T> = { [K in keyof T]-?: T[K] };
+
+/**
+ * Return a type that prohibits the use of keys that are present only in T but not in U
+ */
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+
+/**
+ * Ensure that the types T and U are mutually exclusive
+ */
+export type XOR<T, U> = T | U extends object
+  ? (Without<T, U> & U) | (Without<U, T> & T)
+  : T | U;