chore(AR-19): restructure GitHub workflows for automated tests and manual release deployment

.github/workflows/main.yml

@@ -4,27 +4,79 @@ on:
   push:
     branches: ['development']
   pull_request:
-    branches: ['development', 'production']
+    branches: ['development']
 
 jobs:
-  build_test_lint:
+  install:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v3
+        with:
+          node-version: 22.x
+          cache: 'yarn'
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Install Dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: yarn install
-      - name: Build
-        run: yarn build --if-present
+
+  lint:
+    needs: install
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22.x
+      - name: Restore node_modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Linting
         run: yarn lint
+
+  test:
+    needs: lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22.x
+      - name: Restore node_modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Test
         run: yarn test:cov
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4.0.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+
+  build:
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22.x
+      - name: Restore node_modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Build
+        run: yarn build --if-present

.github/workflows/release.yaml

@@ -7,28 +7,57 @@ permissions:
   contents: write
 
 jobs:
-  release:
+  release_and_deploy:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
     steps:
       - name: checkout
         uses: actions/checkout@v4
         with:
           token: ${{ secrets.PA_TOKEN }}
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Build
+        run: yarn build --if-present
+
+      - name: Linting
+        run: yarn lint
+
+      - name: Test
+        run: yarn test:cov
+
+      - name: 📂 Sync files (Deploy)
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.AMITRAIKWAR_FTP_SERVER }}
+          username: ${{ secrets.AMITRAIKWAR_FTP_ACCOUNT }}
+          password: ${{ secrets.AMITRAIKWAR_FTP_PASSWORD }}
+          local-dir: ./build/
+          server-dir: ./
+
       - name: conventional changelog action
         id: changelog
         # https://github.com/TriPSs/conventional-changelog-action
         uses: TriPSs/conventional-changelog-action@latest
         with:
-          # you can also create separate token to trace action
           github-token: '${{ secrets.PA_TOKEN }}'
-          git-user-name: 'AR mac Bot'
+          git-user-name: 'AR portfolio bot'
           output-file: false
+
       - name: create release
         # https://github.com/actions/create-release
         uses: softprops/action-gh-release@v1
         if: ${{steps.changelog.outputs.skipped == 'false'}}
         env:
-          # This token is provided by Actions, you do not need to create your own token
           GITHUB_TOKEN: ${{ secrets.PA_TOKEN }}
         with:
           tag_name: ${{ steps.changelog.outputs.tag }}

src/components/CoverText/Cover.tsx

@@ -27,14 +27,16 @@ export const Cover = ({ children }: { children?: React.ReactNode }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref.current]);
 
+const SafeAnimatePresence = AnimatePresence as any;
+
   return (
     <div
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       ref={ref}
       className="relative hover:bg-neutral-900  group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-2 py-2  transition duration-200 rounded-sm"
     >
-      <AnimatePresence>
+      <SafeAnimatePresence>
         {hovered && (
           <motion.div
             initial={{ opacity: 0 }}
@@ -79,7 +81,7 @@ export const Cover = ({ children }: { children?: React.ReactNode }) => {
             </motion.div>
           </motion.div>
         )}
-      </AnimatePresence>
+      </SafeAnimatePresence>
       {beamPositions.map((position, index) => (
         <Beam
           key={index}

src/components/Orb/Orb.tsx

@@ -9,16 +9,7 @@ interface OrbProps {
   backgroundColor?: string;
 }
 
-export default function Orb({
-  hue = 0,
-  hoverIntensity = 0.2,
-  rotateOnHover = true,
-  forceHoverState = false,
-  backgroundColor = '#000000',
-}: OrbProps) {
-  const ctnDom = useRef<HTMLDivElement>(null);
-
-  const vert = /* glsl */ `
+const vert = /* glsl */ `
     precision highp float;
     attribute vec2 position;
     attribute vec2 uv;
@@ -29,7 +20,7 @@ export default function Orb({
     }
   `;
 
-  const frag = /* glsl */ `
+const frag = /* glsl */ `
     precision highp float;
 
     uniform float iTime;
@@ -191,6 +182,15 @@ export default function Orb({
     }
   `;
 
+export default function Orb({
+  hue = 0,
+  hoverIntensity = 0.2,
+  rotateOnHover = true,
+  forceHoverState = false,
+  backgroundColor = '#000000',
+}: OrbProps) {
+  const ctnDom = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const container = ctnDom.current;
     if (!container) return;

src/components/animateModal/AnimatedModal.tsx

@@ -79,8 +79,10 @@ export const ModalBody = ({
   const { setOpen } = useModal();
   useOutsideClick(modalRef, () => setOpen(false));
 
+const SafeAnimatePresence = AnimatePresence as any;
+
   return (
-    <AnimatePresence>
+    <SafeAnimatePresence>
       {open && (
         <motion.div
           initial={{
@@ -133,7 +135,7 @@ export const ModalBody = ({
           </motion.div>
         </motion.div>
       )}
-    </AnimatePresence>
+    </SafeAnimatePresence>
   );
 };
 

src/screens/common/SocialNavigation.tsx

@@ -80,6 +80,8 @@ const SocialNavigation = () => {
     setCursorInsets(undefined);
   };
 
+const SafeAnimatePresence = AnimatePresence as any;
+
   return (
     <>
       {/* Desktop Version */}
@@ -197,7 +199,7 @@ const SocialNavigation = () => {
           }}
           transition="all 0.2s"
         />
-        <AnimatePresence>
+        <SafeAnimatePresence>
           {isOpen && (
             <motion.div
               initial={{ opacity: 0, scale: 0.8, y: 20 }}
@@ -278,7 +280,7 @@ const SocialNavigation = () => {
               </VStack>
             </motion.div>
           )}
-        </AnimatePresence>
+        </SafeAnimatePresence>
       </Box>
     </>
   );

src/screens/mainFlow/contents/Contact.tsx

@@ -12,6 +12,8 @@ const Contact = () => {
   const ref = useRef<HTMLButtonElement>(null);
 
   const isContactContainerIntersecting = useIsIntersecting(ref);
+const SafeAnimatePresence = AnimatePresence as any;
+
   return (
     <Box minH={'100vh'} width={'100%'} id="contact">
       <Heading
@@ -64,7 +66,7 @@ const Contact = () => {
         >
           {CONTACT.email}
         </Button>
-        <AnimatePresence initial={false}>
+        <SafeAnimatePresence initial={false}>
           {isContactContainerIntersecting && (
             <Box
               display={{ base: 'none', lg: 'flex' }}
@@ -92,7 +94,7 @@ const Contact = () => {
               <Text>{t('contact.getInTouch')}</Text>
             </Box>
           )}
-        </AnimatePresence>
+        </SafeAnimatePresence>
       </VStack>
     </Box>
   );