refactor (Switch): Migrate Switch to v1 in SDK

sdks/js/packages/core/react/components/onboarding/updates.tsx

@@ -1,16 +1,16 @@
 'use client';
 
+import Skeleton from 'react-loading-skeleton';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { ReactNode } from '@tanstack/react-router';
 import { Button, Flex, Text, Switch } from '@raystack/apsara/v1';
 import { Controller, useForm } from 'react-hook-form';
 import * as yup from 'yup';
-import { Container } from '../Container';
-import styles from './onboarding.module.css';
 import { PREFERENCE_OPTIONS } from '~/react/utils/constants';
 import { usePreferences } from '~/react/hooks/usePreferences';
-import { ReactNode } from '@tanstack/react-router';
+import { Container } from '../Container';
 import { Header } from '../Header';
-import Skeleton from 'react-loading-skeleton';
+import styles from './onboarding.module.css';
 
 const schema = yup.object({
   [PREFERENCE_OPTIONS.NEWSLETTER]: yup.boolean().optional()
@@ -23,7 +23,7 @@
   title?: string;
   preferenceTitle?: string;
   preferenceDescription?: string;
   onSubmit?: (data: FormData) => void;
 };
 
 export const Updates = ({

sdks/js/packages/core/react/components/organization/security/index.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { Box, Flex, Separator, Switch, Text } from '@raystack/apsara';
+import { Box, Flex, Separator, Text } from '@raystack/apsara';
+import { Switch } from '@raystack/apsara/v1';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { usePermissions } from '~/react/hooks/usePermissions';
 import { V1Beta1Preference } from '~/src';
 import { PERMISSIONS, shouldShowComponent } from '~/utils';
-import { styles } from '../styles';
 import type { SecurityCheckboxTypes } from './security.types';
+import { styles } from '../styles';
 
 export default function WorkspaceSecurity() {
   const [socialLogin, setSocialLogin] = useState<boolean>(false);
@@ -85,7 +86,7 @@ export default function WorkspaceSecurity() {
     !!organization?.id
   );
 
-  const canUpdatePrefrence = shouldShowComponent(
+  const canUpdatePreference = shouldShowComponent(
     permissions,
     `${PERMISSIONS.UpdatePermission}::app/organization:${organization?.id}`
   );
@@ -101,7 +102,7 @@ export default function WorkspaceSecurity() {
           text="Allow logins through Google&#39;s single sign-on functionality"
           name="social_login"
           value={socialLogin}
-          canUpdatePrefrence={canUpdatePrefrence}
+          canUpdatePreference={canUpdatePreference}
           onValueChange={onValueChange}
         />
         <Separator></Separator>
@@ -111,7 +112,7 @@ export default function WorkspaceSecurity() {
       over email."
           name="mail_link"
           value={mailLink}
-          canUpdatePrefrence={canUpdatePrefrence}
+          canUpdatePreference={canUpdatePreference}
           onValueChange={onValueChange}
         />
         <Separator></Separator>
@@ -137,7 +138,7 @@ export const SecurityCheckbox = ({
   name,
   value,
   onValueChange,
-  canUpdatePrefrence
+  canUpdatePreference
 }: SecurityCheckboxTypes) => {
   return (
     <Flex direction="row" justify="between" align="center">
@@ -148,9 +149,8 @@ export const SecurityCheckbox = ({
         </Text>
       </Flex>
 
-      {canUpdatePrefrence ? (
+      {canUpdatePreference ? (
         <Switch
-          // @ts-ignore
           name={name}
           checked={value}
           onCheckedChange={(checked: boolean) => onValueChange(name, checked)}

sdks/js/packages/core/react/components/organization/security/security.types.tsx

@@ -3,6 +3,6 @@ export type SecurityCheckboxTypes = {
   name: string;
   text: string;
   value: boolean;
-  canUpdatePrefrence?: boolean;
+  canUpdatePreference?: boolean;
   onValueChange: (key: string, checked: boolean) => void;
 };