From 99d065e8348292eecc932852eb0c21b354dff659 Mon Sep 17 00:00:00 2001
From: Federico Mastrini <federicomastrini93@gmail.com>
Date: Tue, 30 Apr 2024 11:06:18 +0200
Subject: [PATCH] feat: add `ModuleNavigation` component

---
 example/src/pages/Modules.tsx               |  44 ++++++++
 src/components/modules/ModuleNavigation.tsx | 116 ++++++++++++++++++++
 src/components/modules/index.tsx            |   1 +
 3 files changed, 161 insertions(+)
 create mode 100644 src/components/modules/ModuleNavigation.tsx

diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
index 550a515b..7b6314ba 100644
--- a/example/src/pages/Modules.tsx
+++ b/example/src/pages/Modules.tsx
@@ -5,6 +5,7 @@ import {
   ModuleCheckout,
   ModuleCredential,
   ModuleIDP,
+  ModuleNavigation,
   ModulePaymentNotice,
   useIOExperimentalDesign,
   useIOTheme
@@ -256,6 +257,41 @@ const renderModuleCredential = () => (
   </>
 );
 
+const renderModuleNavigation = () => (
+  <>
+    <ComponentViewerBox name="ModuleNavigation">
+      <View>
+        <ModuleNavigation
+          icon="spid"
+          title="SPID"
+          subtitle="Usa credenziali e app (o SMS)"
+          onPress={mockFn}
+        />
+      </View>
+    </ComponentViewerBox>
+    <ComponentViewerBox name="ModuleNavigation, with Badge">
+      <View>
+        <ModuleNavigation
+          icon="spid"
+          title="SPID"
+          subtitle="Usa credenziali e app (o SMS)"
+          onPress={mockFn}
+          badge={{
+            text: "IN arrivo",
+            variant: "blue",
+            outline: true
+          }}
+        />
+      </View>
+    </ComponentViewerBox>
+    <ComponentViewerBox name="ModuleNavigation, loading">
+      <View>
+        <ModuleNavigation isLoading={true} />
+      </View>
+    </ComponentViewerBox>
+  </>
+);
+
 const Modules = () => {
   const { isExperimental, setExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
@@ -306,6 +342,14 @@ const Modules = () => {
         ModuleCredential
       </H2>
       {renderModuleCredential()}
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ModuleNavigation
+      </H2>
+      {renderModuleNavigation()}
     </Screen>
   );
 };
diff --git a/src/components/modules/ModuleNavigation.tsx b/src/components/modules/ModuleNavigation.tsx
new file mode 100644
index 00000000..f0fb2cf2
--- /dev/null
+++ b/src/components/modules/ModuleNavigation.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageURISource,
+  StyleSheet,
+  View
+} from "react-native";
+import Placeholder from "rn-placeholder";
+import {
+  IOListItemVisualParams,
+  IOModuleStyles,
+  IOSelectionListItemVisualParams,
+  IOStyles,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
+import { IOIcons, Icon } from "../icons";
+import { VSpacer } from "../spacer";
+import { Chip, LabelSmallAlt } from "../typography";
+import {
+  PressableModuleBase,
+  PressableModuleBaseProps
+} from "./PressableModuleBase";
+
+type LoadingProps = {
+  isLoading: true;
+};
+
+type ImageProps =
+  | { icon: IOIcons; image?: never }
+  | { icon?: never; image: ImageURISource | ImageSourcePropType };
+
+type BaseProps = {
+  isLoading?: false;
+  title: string;
+  subtitle?: string;
+  badge?: Badge;
+} & ImageProps &
+  PressableModuleBaseProps;
+
+type ModuleNavigationProps = LoadingProps | BaseProps;
+
+export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
+  const theme = useIOTheme();
+
+  if (props.isLoading) {
+    return <ModuleNavigationSkeleton />;
+  }
+
+  const { icon, image, title, subtitle, onPress, badge, ...pressableProps } =
+    props;
+
+  const iconComponent = (
+    <>
+      {icon && <Icon name={icon} size={24} color="grey-300" />}
+      {image && (
+        <Image
+          source={image}
+          style={styles.image}
+          accessibilityIgnoresInvertColors={true}
+        />
+      )}
+    </>
+  );
+
+  return (
+    <PressableModuleBase {...pressableProps} onPress={onPress}>
+      <View>{iconComponent}</View>
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingHorizontal: 8 }}>
+        <LabelSmallAlt
+          color="blueIO-500"
+          numberOfLines={2}
+          lineBreakMode="middle"
+        >
+          {title}
+        </LabelSmallAlt>
+        {subtitle && <Chip color="grey-700">{subtitle}</Chip>}
+      </View>
+      <View>
+        {badge ? (
+          <Badge {...badge} />
+        ) : onPress ? (
+          <Icon
+            name="chevronRightListItem"
+            color={theme["interactiveElem-default"]}
+            size={IOListItemVisualParams.chevronSize}
+          />
+        ) : null}
+      </View>
+    </PressableModuleBase>
+  );
+};
+
+const ModuleNavigationSkeleton = () => (
+  <View style={IOModuleStyles.button}>
+    <View style={[IOStyles.row, IOStyles.alignCenter]}>
+      <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+      <View style={{ paddingHorizontal: 8 }}>
+        <Placeholder.Box animate="fade" width={96} height={19} radius={8} />
+        <VSpacer size={4} />
+        <Placeholder.Box animate="fade" width={180} height={16} radius={8} />
+      </View>
+    </View>
+    <Placeholder.Box animate="fade" width={64} height={22} radius={8} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  image: {
+    width: IOSelectionListItemVisualParams.iconSize,
+    height: IOSelectionListItemVisualParams.iconSize,
+    resizeMode: "contain"
+  }
+});
diff --git a/src/components/modules/index.tsx b/src/components/modules/index.tsx
index c55410c9..f3957d35 100644
--- a/src/components/modules/index.tsx
+++ b/src/components/modules/index.tsx
@@ -2,5 +2,6 @@ export * from "./ModuleAttachment";
 export * from "./ModuleCheckout";
 export * from "./ModuleCredential";
 export * from "./ModuleIDP";
+export * from "./ModuleNavigation";
 export * from "./ModulePaymentNotice";
 export * from "./PressableModuleBase";