From f9bdac97e867f026e1387f9b52cf52204341881d Mon Sep 17 00:00:00 2001
From: Louis Rouffineau <dev@louis.io>
Date: Fri, 17 Jan 2025 00:15:14 +0100
Subject: [PATCH] Rename component `Table` to `settings-list`

---
 design-system/Table/Table.tsx                 | 34 -------------------
 .../settings-list-row.tsx}                    | 10 +++---
 design-system/settings-list/settings-list.tsx | 33 ++++++++++++++++++
 .../settings-list.types.ts}                   |  8 ++---
 screens/Profile.tsx                           |  4 +--
 5 files changed, 44 insertions(+), 45 deletions(-)
 delete mode 100644 design-system/Table/Table.tsx
 rename design-system/{Table/TableRow.tsx => settings-list/settings-list-row.tsx} (90%)
 create mode 100644 design-system/settings-list/settings-list.tsx
 rename design-system/{Table/Table.types.ts => settings-list/settings-list.types.ts} (71%)

diff --git a/design-system/Table/Table.tsx b/design-system/Table/Table.tsx
deleted file mode 100644
index 87de2b08b..000000000
--- a/design-system/Table/Table.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { memo } from "react";
-import { View, ViewStyle } from "react-native";
-import { useAppTheme, ThemedStyle } from "@/theme/useAppTheme";
-import { VStack } from "@/design-system/VStack";
-import { TableRow } from "./TableRow";
-import { ITableRow } from "./Table.types";
-
-type ITableProps = {
-  rows: ITableRow[];
-  editMode?: boolean;
-};
-
-export const Table = memo(function Table({ rows, editMode }: ITableProps) {
-  const { themed } = useAppTheme();
-
-  return (
-    <VStack style={themed($container)}>
-      {rows.map((row) => (
-        <View key={row.label} style={themed($sectionContainer)}>
-          <TableRow row={row} editMode={editMode} />
-        </View>
-      ))}
-    </VStack>
-  );
-});
-
-const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
-  backgroundColor: colors.background.surface,
-  overflow: "hidden",
-});
-
-const $sectionContainer: ThemedStyle<ViewStyle> = () => ({
-  width: "100%",
-});
diff --git a/design-system/Table/TableRow.tsx b/design-system/settings-list/settings-list-row.tsx
similarity index 90%
rename from design-system/Table/TableRow.tsx
rename to design-system/settings-list/settings-list-row.tsx
index be38c7717..35ecb8e86 100644
--- a/design-system/Table/TableRow.tsx
+++ b/design-system/settings-list/settings-list-row.tsx
@@ -5,17 +5,17 @@ import { useAppTheme, ThemedStyle } from "@/theme/useAppTheme";
 import { HStack } from "@/design-system/HStack";
 import { VStack } from "@/design-system/VStack";
 import { Icon } from "@/design-system/Icon/Icon";
-import { ITableRow } from "./Table.types";
+import { ISettingsListRow } from "./settings-list.types";
 
-type ITableRowProps = {
-  row: ITableRow;
+type ISettingsListRowProps = {
+  row: ISettingsListRow;
   editMode?: boolean;
 };
 
-export const TableRow = memo(function TableRow({
+export const SettingsListRow = memo(function SettingsListRow({
   row,
   editMode,
-}: ITableRowProps) {
+}: ISettingsListRowProps) {
   const { theme, themed } = useAppTheme();
 
   const content = (
diff --git a/design-system/settings-list/settings-list.tsx b/design-system/settings-list/settings-list.tsx
new file mode 100644
index 000000000..d61e51d4b
--- /dev/null
+++ b/design-system/settings-list/settings-list.tsx
@@ -0,0 +1,33 @@
+import React, { memo } from "react";
+import { View, ViewStyle } from "react-native";
+import { useAppTheme, ThemedStyle } from "@/theme/useAppTheme";
+import { SettingsListRow } from "./settings-list-row";
+import { ISettingsListRow } from "./settings-list.types";
+
+type ISettingsListProps = {
+  rows: ISettingsListRow[];
+  editMode?: boolean;
+};
+
+export const SettingsList = memo(function SettingsList({
+  rows,
+  editMode,
+}: ISettingsListProps) {
+  const { themed } = useAppTheme();
+
+  return (
+    <View style={themed($container)}>
+      {rows.map((row, index) => (
+        <SettingsListRow
+          key={row.label + index}
+          row={row}
+          editMode={editMode}
+        />
+      ))}
+    </View>
+  );
+});
+
+const $container: ThemedStyle<ViewStyle> = () => ({
+  width: "100%",
+});
diff --git a/design-system/Table/Table.types.ts b/design-system/settings-list/settings-list.types.ts
similarity index 71%
rename from design-system/Table/Table.types.ts
rename to design-system/settings-list/settings-list.types.ts
index 836876a5b..5f7ba18d6 100644
--- a/design-system/Table/Table.types.ts
+++ b/design-system/settings-list/settings-list.types.ts
@@ -1,9 +1,9 @@
-export type ITableRow = {
+export type ISettingsListRow = {
   label: string;
-  value?: string | number;
+  value?: string | boolean;
+  onPress?: () => void;
   onValueChange?: (value: boolean) => void;
-  isSwitch?: boolean;
   isWarning?: boolean;
+  isSwitch?: boolean;
   disabled?: boolean;
-  onPress?: () => void;
 };
diff --git a/screens/Profile.tsx b/screens/Profile.tsx
index afb5bcfb8..52fc7eda1 100644
--- a/screens/Profile.tsx
+++ b/screens/Profile.tsx
@@ -10,7 +10,7 @@ import {
 } from "react-native";
 import { Screen } from "@/components/Screen/ScreenComp/Screen";
 import { ContactCard } from "@/features/profiles/components/contact-card";
-import { Table } from "@/design-system/Table/Table";
+import { SettingsList } from "@/design-system/settings-list/settings-list";
 import { VStack } from "@/design-system/VStack";
 import { Text } from "@/design-system/Text";
 import { useRoute, useRouter } from "@navigation/useNavigation";
@@ -274,7 +274,7 @@ export default function ProfileScreen() {
             <VStack
               style={[themed($section), { paddingVertical: theme.spacing.lg }]}
             >
-              <Table
+              <SettingsList
                 editMode={editMode}
                 rows={[
                   ...(notificationsPermissionStatus !== "granted"