refactor: move sgid and email login components to their own dirs

src/features/sign-in/components/Email/EmailSignInButton.tsx → src/features/sign-in/components/EmailLogin/EmailLoginButton.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@opengovsg/design-system-react'
 import { useSignInContext } from '../SignInContext'
 
-export const EmailSignInButton = (): JSX.Element | null => {
+export const EmailLoginButton = (): JSX.Element | null => {
   const { proceedToEmail } = useSignInContext()
 
   return (

src/features/sign-in/components/SignInForm.tsx → src/features/sign-in/components/EmailLogin/EmailLoginForm.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react'
-import { type VfnStepData, useSignInContext } from './SignInContext'
+import { type VfnStepData, useSignInContext } from '../SignInContext'
 import { EmailInput } from './Emailnput'
 import { VerificationInput } from './VerificationInput'
 
-export const SignInForm = () => {
+export const EmailLoginForm = () => {
   const { setVfnStepData, vfnStepData } = useSignInContext()
 
   const handleOnSuccessEmail = useCallback(

src/features/sign-in/components/Emailnput.tsx → src/features/sign-in/components/EmailLogin/Emailnput.tsx

@@ -10,7 +10,7 @@ import { useEffect } from 'react'
 import { useZodForm } from '~/lib/form'
 import { trpc } from '~/utils/trpc'
 import { emailSignInSchema } from '~/schemas/auth/email/sign-in'
-import { type VfnStepData } from './SignInContext'
+import { type VfnStepData } from '../SignInContext'
 
 interface EmailInputProps {
   onSuccess: (props: VfnStepData) => void

src/features/sign-in/components/VerificationInput.tsx → src/features/sign-in/components/EmailLogin/VerificationInput.tsx

@@ -16,7 +16,7 @@ import { CALLBACK_URL_KEY } from '~/constants/params'
 import { useZodForm } from '~/lib/form'
 import { HOME } from '~/lib/routes'
 import { trpc } from '~/utils/trpc'
-import { useSignInContext } from './SignInContext'
+import { useSignInContext } from '../SignInContext'
 import { ResendOtpButton } from './ResendOtpButton'
 import { useLoginState } from '~/features/auth'
 import { emailVerifyOtpSchema } from '~/schemas/auth/email/sign-in'

src/features/sign-in/components/EmailLogin/index.ts

@@ -0,0 +1,2 @@
+export * from './EmailLoginButton'
+export * from './EmailLoginForm'

src/features/sign-in/components/SignInState/CurrentSignInState.tsx → src/features/sign-in/components/LoginStep/CurrentLoginStep.tsx

@@ -1,25 +1,25 @@
 import { useMemo } from 'react'
 import { useSignInContext } from '../SignInContext'
-import { EmailSignInState } from './EmailSignInState'
-import { InitialSignInState } from './InitialSignInState'
+import { InitialLoginStep } from './InitialLoginStep'
 import { Flex } from '@chakra-ui/react'
+import { EmailLoginStep } from './EmailLoginStep'
 
-export const CurrentSignInState = (): JSX.Element => {
+export const CurrentLoginStep = (): JSX.Element => {
   const { state } = useSignInContext()
 
-  const stateToRender = useMemo(() => {
+  const stepToRender = useMemo(() => {
     switch (state) {
       case 'initial':
-        return <InitialSignInState />
+        return <InitialLoginStep />
       case 'email':
-        return <EmailSignInState />
+        return <EmailLoginStep />
     }
   }, [state])
 
   return (
     // Fixed height so the page can be (relatively) centered without any layout shift.
     <Flex w="100%" h={{ lg: '16rem' }}>
-      {stateToRender}
+      {stepToRender}
     </Flex>
   )
 }

src/features/sign-in/components/SignInState/EmailSignInState.tsx → src/features/sign-in/components/LoginStep/EmailLoginStep.tsx

@@ -1,10 +1,10 @@
 import { Icon, Stack } from '@chakra-ui/react'
 import { Button } from '@opengovsg/design-system-react'
 import { BiLeftArrowAlt } from 'react-icons/bi'
-import { SignInForm } from '../SignInForm'
+import { EmailLoginForm } from '../EmailLogin'
 import { useSignInContext } from '../SignInContext'
 
-export const EmailSignInState = (): JSX.Element => {
+export const EmailLoginStep = (): JSX.Element => {
   const { backToInitial } = useSignInContext()
 
   return (
@@ -17,7 +17,7 @@ export const EmailSignInState = (): JSX.Element => {
       >
         Back
       </Button>
-      <SignInForm />
+      <EmailLoginForm />
     </Stack>
   )
 }

src/features/sign-in/components/SignInState/InitialSignInState.tsx → src/features/sign-in/components/LoginStep/InitialLoginStep.tsx

@@ -1,12 +1,11 @@
 import { Stack, Text } from '@chakra-ui/react'
 
-import { EmailSignInButton } from '../Email'
-import { SgidLoginButton } from '../SgidLoginButton'
+import { SgidLoginButton } from '../SgidLogin'
+import { EmailLoginButton, EmailLoginForm } from '../EmailLogin'
 import { useEnv } from '~/hooks/useEnv'
 import { useFeatures } from '~/components/AppProviders'
-import { SignInForm } from '../SignInForm'
 
-export const InitialSignInState = (): JSX.Element => {
+export const InitialLoginStep = (): JSX.Element => {
   const {
     env: { NEXT_PUBLIC_APP_NAME: title },
   } = useEnv()
@@ -18,10 +17,10 @@ export const InitialSignInState = (): JSX.Element => {
         {title}
       </Text>
       {!sgid ? (
-        <SignInForm />
+        <EmailLoginForm />
       ) : (
         <Stack gap="1.5rem">
-          <EmailSignInButton />
+          <EmailLoginButton />
           <SgidLoginButton />
         </Stack>
       )}

src/features/sign-in/components/LoginStep/index.ts

@@ -0,0 +1 @@
+export * from './CurrentLoginStep'

src/features/sign-in/components/SgidLogin/index.ts

@@ -0,0 +1 @@
+export * from './SgidLoginButton'

src/features/sign-in/components/index.ts

@@ -1,11 +1,10 @@
 export * from './GridLayout'
 export * from './LoginImageSvgr'
+export * from './LoginStep'
 
-export * from './Emailnput'
-export * from './VerificationInput'
-export * from './SignInForm'
+export * from './EmailLogin'
 
-export * from './SgidLoginButton'
+export * from './SgidLogin'
 export * from './SgidCallback'
 
 export * from './SignInContext'

src/pages/sign-in/index.tsx

@@ -12,7 +12,7 @@ import {
   NonMobileSidebarGridArea,
   SignInContextProvider,
 } from '~/features/sign-in/components'
-import { CurrentSignInState } from '~/features/sign-in/components/SignInState'
+import { CurrentLoginStep } from '~/features/sign-in/components'
 import { type NextPageWithLayout } from '~/lib/types'
 
 const SignIn: NextPageWithLayout = () => {
@@ -26,7 +26,7 @@ const SignIn: NextPageWithLayout = () => {
           </NonMobileSidebarGridArea>
           <LoginGridArea>
             <SignInContextProvider>
-              <CurrentSignInState />
+              <CurrentLoginStep />
             </SignInContextProvider>
           </LoginGridArea>
           <NonMobileFooterLeftGridArea />