feat: started initial work on onboarding step animation

ts/components/registration/RegistrationStages.tsx

@@ -1,4 +1,5 @@
 import { shell } from 'electron';
+import { AnimatePresence } from 'framer-motion';
 import { useDispatch } from 'react-redux';
 import { useMount } from 'react-use';
 import styled from 'styled-components';
@@ -78,46 +79,48 @@ export const RegistrationStages = () => {
   });
 
   return (
-    <StyledRegistrationContainer container={true} flexDirection="column">
-      <Flex container={true} alignItems="center">
-        <SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
-        <SpacerSM />
-        <div style={{ flexGrow: 1 }}>
-          <SessionIcon iconSize={'small'} iconType="session" />
-        </div>
+    <AnimatePresence>
+      <StyledRegistrationContainer container={true} flexDirection="column">
         <Flex container={true} alignItems="center">
-          <SessionIconButton
-            aria-label="external link to Session FAQ web page"
-            iconType="question"
-            iconSize={'medium'}
-            iconPadding="4px"
-            iconColor="var(--text-primary-color)"
-            style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
-            onClick={() => {
-              void shell.openExternal('https://getsession.org/faq');
-            }}
-          />
+          <SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
           <SpacerSM />
-          <SessionIconButton
-            aria-label="external link to Session FAQ web page"
-            iconType="link"
-            iconSize="medium"
-            iconColor="var(--text-primary-color)"
-            iconPadding="4px"
-            style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
-            onClick={() => {
-              void shell.openExternal('https://getsession.org');
-            }}
-          />
+          <div style={{ flexGrow: 1 }}>
+            <SessionIcon iconSize={'small'} iconType="session" />
+          </div>
+          <Flex container={true} alignItems="center">
+            <SessionIconButton
+              aria-label="external link to Session FAQ web page"
+              iconType="question"
+              iconSize={'medium'}
+              iconPadding="4px"
+              iconColor="var(--text-primary-color)"
+              style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
+              onClick={() => {
+                void shell.openExternal('https://getsession.org/faq');
+              }}
+            />
+            <SpacerSM />
+            <SessionIconButton
+              aria-label="external link to Session FAQ web page"
+              iconType="link"
+              iconSize="medium"
+              iconColor="var(--text-primary-color)"
+              iconPadding="4px"
+              style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
+              onClick={() => {
+                void shell.openExternal('https://getsession.org');
+              }}
+            />
+          </Flex>
         </Flex>
-      </Flex>
 
-      <Flex container={true} flexDirection="column" alignItems="center">
-        <SpacerLG />
-        {step === Onboarding.Start ? <Start /> : null}
-        {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
-        {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
-      </Flex>
-    </StyledRegistrationContainer>
+        <Flex container={true} flexDirection="column" alignItems="center">
+          <SpacerLG />
+          {step === Onboarding.Start ? <Start /> : null}
+          {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
+          {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
+        </Flex>
+      </StyledRegistrationContainer>
+    </AnimatePresence>
   );
 };

ts/components/registration/components/BackButton.tsx

@@ -14,21 +14,23 @@ import { SessionIconButton } from '../../icon';
 export const BackButtonWithininContainer = ({
   children,
   margin,
+  callback,
 }: {
   children: ReactNode;
   margin?: string;
+  callback?: () => void;
 }) => {
   return (
     <Flex container={true} width={'100%'} flexDirection="row" alignItems="flex-start">
       <div style={{ margin }}>
-        <BackButton />
+        <BackButton callback={callback} />
       </div>
       {children}
     </Flex>
   );
 };
 
-export const BackButton = () => {
+export const BackButton = ({ callback }: { callback?: () => void }) => {
   const dispatch = useDispatch();
 
   return (
@@ -41,6 +43,9 @@ export const BackButton = () => {
         dispatch(setOnboardingStep(Onboarding.Start));
         dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
         dispatch(setAccountCreationStep(AccountCreation.DisplayName));
+        if (callback) {
+          callback();
+        }
       }}
     />
   );

ts/components/registration/components/OnboardingContainer.tsx

@@ -0,0 +1,38 @@
+import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
+import styled from 'styled-components';
+
+type OnboardContainerProps = {
+  animate?: boolean;
+  children: ReactNode;
+  key: string;
+  direction: 'left' | 'right';
+};
+
+export const OnboardContainer = (props: OnboardContainerProps) => {
+  const { animate = false, children, key, direction: _direction } = props;
+  const OnboardContainerInner = styled(motion.div)`
+    width: 100%;
+  `;
+
+  const direction = _direction === 'left' ? -1 : 1;
+
+  const fadeSlideVariants = {
+    initial: { x: 50 * direction, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: -50 * direction, opacity: 0 },
+  };
+
+  return (
+    <OnboardContainerInner
+      key={key}
+      variants={animate ? fadeSlideVariants : undefined}
+      initial={'initial'}
+      animate={'animate'}
+      exit={'exit'}
+      transition={{ duration: 0.5 }}
+    >
+      {children}
+    </OnboardContainerInner>
+  );
+};

ts/components/registration/components/index.tsx

@@ -1,10 +1,7 @@
 import styled from 'styled-components';
 import { BackButton } from './BackButton';
 import { Hero } from './Hero';
-
-const OnboardContainer = styled.div`
-  width: 100%;
-`;
+import { OnboardContainer } from './OnboardingContainer';
 
 const OnboardHeading = styled.h3`
   padding: 0;

ts/components/registration/stages/CreateAccount.tsx

@@ -4,6 +4,7 @@ import { SettingsKey } from '../../../data/settings-key';
 import { trigger } from '../../../shims/events';
 import {
   AccountCreation,
+  Onboarding,
   setAccountCreationStep,
 } from '../../../state/onboarding/ducks/registration';
 import {
@@ -82,8 +83,17 @@ export const CreateAccount = () => {
   };
 
   return (
-    <OnboardContainer>
-      <BackButtonWithininContainer margin={'2px 0 0 -36px'}>
+    <OnboardContainer
+      key={`onboarding-${Onboarding.CreateAccount}`}
+      animate={true}
+      direction="right"
+    >
+      <BackButtonWithininContainer
+        margin={'2px 0 0 -36px'}
+        callback={() => {
+          setDisplayNameError('');
+        }}
+      >
         <Flex
           container={true}
           width="100%"

ts/components/registration/stages/RestoreAccount.tsx

@@ -7,6 +7,7 @@ import { PromiseUtils } from '../../../session/utils';
 import { NotFoundError } from '../../../session/utils/errors';
 import {
   AccountRestoration,
+  Onboarding,
   setAccountRestorationStep,
 } from '../../../state/onboarding/ducks/registration';
 import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration';
@@ -177,9 +178,20 @@ export const RestoreAccount = () => {
   };
 
   return (
-    <OnboardContainer>
+    <OnboardContainer
+      key={`onboarding-${Onboarding.RestoreAccount}`}
+      animate={true}
+      direction="right"
+    >
       {step === AccountRestoration.RecoveryPassword || step === AccountRestoration.DisplayName ? (
-        <BackButtonWithininContainer margin={'2px 0 0 -36px'}>
+        <BackButtonWithininContainer
+          margin={'2px 0 0 -36px'}
+          callback={() => {
+            setDisplayNameError('');
+            setRecoveryPasswordError('');
+            setProgress(0);
+          }}
+        >
           <Flex
             container={true}
             width="100%"

ts/components/registration/stages/Start.tsx

@@ -10,12 +10,13 @@ import {
 import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
 import { SpacerLG } from '../../basic/Text';
 import { TermsAndConditions } from '../TermsAndConditions';
+import { OnboardContainer } from '../components';
 
 export const Start = () => {
   const dispatch = useDispatch();
 
   return (
-    <>
+    <OnboardContainer key={`onboarding-${Onboarding.Start}`} animate={true} direction="left">
       <SessionButton
         buttonColor={SessionButtonColor.White}
         onClick={() => {
@@ -36,6 +37,6 @@ export const Start = () => {
       />
       <SpacerLG />
       <TermsAndConditions />
-    </>
+    </OnboardContainer>
   );
 };