✨ app: create shared switch component

Author: dieguezguille

.changeset/spotty-rules-camp.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+✨ create shared switch component

src/components/card/Card.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "expo-router";
 
 import { ChevronRight, CircleHelp, CreditCard, DollarSign, Eye, EyeOff, Hash, Snowflake } from "@tamagui/lucide-icons";
 import { useToastController } from "@tamagui/toast";
-import { ScrollView, Separator, Spinner, Square, Switch, XStack, YStack } from "tamagui";
+import { ScrollView, Separator, Spinner, Square, XStack, YStack } from "tamagui";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
 
@@ -44,6 +44,7 @@ import LatestActivity from "../shared/LatestActivity";
 import PluginUpgrade from "../shared/PluginUpgrade";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
+import Switch from "../shared/Switch";
 import Text from "../shared/Text";
 import View from "../shared/View";
 
@@ -347,6 +348,10 @@ export default function Card() {
                   {cardDetails && (
                     <>
                       <XStack
+                        role="switch"
+                        aria-checked={displayStatus === "FROZEN"}
+                        aria-label={t("Freeze card")}
+                        aria-disabled={isFetchingCard || isSettingCardStatus}
                         justifyContent="space-between"
                         paddingVertical="$s4"
                         alignItems="center"
@@ -372,27 +377,9 @@ export default function Card() {
                             {t("Freeze card")}
                           </Text>
                         </XStack>
-                        <XStack alignItems="center" justifyContent="center" height={24}>
-                          <Switch
-                            scale={0.9}
-                            margin={0}
-                            padding="$s1"
-                            pointerEvents="none"
-                            checked={displayStatus === "FROZEN"}
-                            backgroundColor={
-                              displayStatus === "FROZEN" ? "$backgroundBrandMild" : "$backgroundStrong"
-                            }
-                            borderWidth={0}
-                            height={24}
-                            width={60}
-                          >
-                            <Switch.Thumb
-                              checked={displayStatus === "FROZEN"}
-                              animation="default"
-                              backgroundColor={displayStatus === "FROZEN" ? "$backgroundBrand" : "$backgroundSoft"}
-                            />
-                          </Switch>
-                        </XStack>
+                        <Switch checked={displayStatus === "FROZEN"}>
+                          <Switch.Thumb />
+                        </Switch>
                       </XStack>
                       <Separator borderColor="$borderNeutralSoft" />
                     </>

src/components/home/CardStatus.tsx

@@ -16,7 +16,7 @@ import { selectionAsync } from "expo-haptics";
 
 import { CalendarDays, ChevronRight, CreditCard, Info, Snowflake, Wallet, Zap } from "@tamagui/lucide-icons";
 import { useToastController } from "@tamagui/toast";
-import { AnimatePresence, Spinner, Square, Switch, useTheme, View, XStack, YStack } from "tamagui";
+import { AnimatePresence, Spinner, Square, useTheme, View, XStack, YStack } from "tamagui";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
 
@@ -25,6 +25,7 @@ import Exa from "../../assets/images/exa.svg";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import { setCardStatus, type CardDetails } from "../../utils/server";
+import Switch from "../shared/Switch";
 import Text from "../shared/Text";
 
 export default function CardStatus({
@@ -210,6 +211,10 @@ export default function CardStatus({
               exitStyle={{ opacity: 0, transform: [{ translateY: -8 }] }}
             >
               <XStack
+                role="switch"
+                aria-checked={frozen}
+                aria-label={t("Freeze card")}
+                aria-disabled={isSettingCardStatus}
                 justifyContent="space-between"
                 paddingVertical="$s4"
                 alignItems="center"
@@ -232,21 +237,9 @@ export default function CardStatus({
                     {t("Freeze card")}
                   </Text>
                 </XStack>
-                <XStack alignItems="center" justifyContent="center" height={24}>
-                  <Switch
-                    scale={0.9}
-                    margin={0}
-                    padding="$s1"
-                    pointerEvents="none"
-                    checked={frozen}
-                    backgroundColor="$backgroundBrandMild"
-                    borderWidth={0}
-                    height={24}
-                    width={60}
-                  >
-                    <Switch.Thumb checked={frozen} animation="default" backgroundColor="$backgroundBrand" />
-                  </Switch>
-                </XStack>
+                <Switch checked={frozen}>
+                  <Switch.Thumb />
+                </Switch>
               </XStack>
             </YStack>
           )}

src/components/shared/Switch.tsx

@@ -0,0 +1,39 @@
+import { createStyledContext, styled, View, withStaticProperties } from "tamagui";
+
+const SwitchContext = createStyledContext<{ checked: boolean }>({ checked: false });
+
+const SwitchFrame = styled(View, {
+  name: "Switch",
+  context: SwitchContext,
+  "aria-hidden": true,
+  width: "$s8",
+  height: "$s5",
+  borderRadius: "$r_0",
+  padding: "$s1",
+  animation: "default",
+  animateOnly: ["backgroundColor"],
+  variants: {
+    checked: {
+      true: { backgroundColor: "$backgroundBrandMild" },
+      false: { backgroundColor: "$backgroundStrong" },
+    },
+  } as const,
+});
+
+const SwitchThumb = styled(View, {
+  name: "SwitchThumb",
+  context: SwitchContext,
+  width: "$s4_5",
+  height: "$s4_5",
+  borderRadius: "$r_0",
+  animation: "default",
+  animateOnly: ["transform", "backgroundColor"],
+  variants: {
+    checked: {
+      true: { backgroundColor: "$backgroundBrand", x: "$s5" },
+      false: { backgroundColor: "$backgroundSoft", x: 0 },
+    },
+  } as const,
+});
+
+export default withStaticProperties(SwitchFrame, { Thumb: SwitchThumb });