feat: add state and change function to OSCards story

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
 
 import OSCards from './OSCards'
 import { MAC } from '../../../../constants'
@@ -15,9 +16,16 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    selectedOs: MAC,
-    handleOsCardClick: () => {},
-  },
+export const Default: Story = (args: { selectedOS: string }) => {
+  const [selectedOS, setSelectedOS] = useState(args.selectedOS)
+
+  const handleOSCardClick = (os: string) => {
+    setSelectedOS(os)
+  }
+
+  return <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
+}
+
+Default.args = {
+  selectedOS: MAC,
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx

@@ -20,10 +20,10 @@ const cards = [
 
 type OSCardsProps = {
   selectedOS: string
-  handleOsCardClick: (os: string) => void
+  handleOSCardClick: (os: string) => void
 }
 
-const OSCards = ({ selectedOS, handleOsCardClick }: OSCardsProps) => {
+const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
     <XStack justifyContent={'space-between'} my={'15px'}>
       {cards.map(card => (
@@ -32,7 +32,7 @@ const OSCards = ({ selectedOS, handleOsCardClick }: OSCardsProps) => {
           icon={card.icon}
           name={card.name}
           isSelected={selectedOS === card.name}
-          onClick={() => handleOsCardClick(card.name)}
+          onClick={() => handleOSCardClick(card.name)}
         />
       ))}
     </XStack>

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx

@@ -13,7 +13,7 @@ const ValidatorSetupInstall = () => {
   const [selectedOS, setSelectedOS] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
 
-  const handleOsCardClick = (os: string) => {
+  const handleOSCardClick = (os: string) => {
     setSelectedOS(os)
   }
 
@@ -36,7 +36,7 @@ const ValidatorSetupInstall = () => {
         <Text size={15} color="#647084" weight={'regular'}>
           {DOCUMENTATIONS[selectedClient].general}
         </Text>
-        <OSCards selectedOS={selectedOS} handleOsCardClick={handleOsCardClick} />
+        <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
         <YStack space={'$2'}>
           <Text size={19}>Package Managers</Text>
           <Text size={15} weight={'semibold'}>