fix(useAfterFirstRender): hook is currently behaving the opposite tha…

…n its purpose (#2168)

packages/core/.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import * as VibeComponents from "../src/components";
 import * as VibeComponentsNext from "../src/next";
+import * as VibeHooks from "../src/hooks";
 import * as VibeIcons from "../src/components/Icon/Icons";
 import { Preview } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
@@ -113,7 +114,7 @@ const preview: Preview = {
     },
     playground: {
       storyId: "playground",
-      components: { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext },
+      components: { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext, ...VibeHooks },
       introCode,
       autocompletions: generateAutocompletion(reactDocgenOutput)
     }

packages/core/plop/hooks/index.js

@@ -37,7 +37,7 @@ module.exports = plop => {
       },
       {
         type: "append",
-        path: "src/hooks/index.js",
+        path: "src/hooks/index.ts",
         pattern: /(\n$)/gm,
         separator: "",
         template: `export { default as {{camelCase hookName}} } from "./{{camelCase hookName}}";\n`

packages/core/src/components/Counter/Counter.tsx

@@ -97,7 +97,7 @@ const Counter: React.FC<CounterProps> & {
 
   // Effects
   useEffect(() => {
-    if (!isAfterFirstRender.current) {
+    if (isAfterFirstRender.current) {
       setCountChangedAnimationActive();
     }
   }, [count, isAfterFirstRender, setCountChangedAnimationActive]);

packages/core/src/hooks/useAfterFirstRender/__stories__/useAfterFirstRender.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { FunctionArgument, FunctionArguments, UsageGuidelines } from "vibe-storybook-components";
 import * as UseAfterFirstRenderStories from "./useAfterFirstRender.stories";
 

packages/core/src/hooks/useAfterFirstRender/__stories__/useAfterFirstRender.stories.tsx

@@ -1,15 +1,47 @@
-import React from "react";
+import React, { useState } from "react";
 import useAfterFirstRender from "..";
+import Button from "../../../components/Button/Button";
+import { Meta, StoryObj } from "@storybook/react";
+import Flex from "../../../components/Flex/Flex";
+import Heading from "../../../components/Heading/Heading";
+
+type Story = StoryObj<typeof useAfterFirstRender>;
 
 export default {
   title: "Hooks/useAfterFirstRender"
-};
+} satisfies Meta<typeof useAfterFirstRender>;
 
-export const Overview = {
+export const Overview: Story = {
   render: () => {
-    const isRendered = useAfterFirstRender();
-    return <div className="hooks-reference-element">{isRendered ? "Rendered!" : "Not yet!"}</div>;
-  },
+    const isAfterFirstRender = useAfterFirstRender();
+    const [renderCount, setRenderCount] = useState(0);
 
-  name: "Overview"
+    const handleRerender = () => {
+      setRenderCount(prevCount => prevCount + 1);
+    };
+
+    return (
+      <>
+        <Heading type={Heading.types.H3} weight={Heading.weights.NORMAL}>
+          {isAfterFirstRender.current ? "It is after the first render!" : "This is the first render!"}
+        </Heading>
+        <p>Rerender count: {renderCount}</p>
+        <Button onClick={handleRerender}>Rerender component</Button>
+      </>
+    );
+  },
+  decorators: [
+    Story => (
+      <Flex direction={Flex.directions.COLUMN} align={Flex.align.START}>
+        <Story />
+      </Flex>
+    )
+  ],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Heading }
+      }
+    }
+  }
 };

packages/core/src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx

@@ -0,0 +1,35 @@
+import { renderHook } from "@testing-library/react-hooks";
+import useAfterFirstRender from "../";
+
+describe("useAfterFirstRender", () => {
+  it("should initially set isAfterFirstRender to false", () => {
+    const { result } = renderHook(() => useAfterFirstRender());
+    expect(result.current.current).toBeFalsy();
+  });
+
+  describe("when re-renders", () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it("should set isAfterFirstRender to true after a delay", async () => {
+      const { result } = renderHook(() => useAfterFirstRender());
+      jest.advanceTimersByTime(1);
+      expect(result.current.current).toBeTruthy();
+    });
+
+    it("should maintain isAfterFirstRender as true on subsequent renders", () => {
+      const { result, rerender } = renderHook(() => useAfterFirstRender());
+
+      jest.advanceTimersByTime(1);
+      expect(result.current.current).toBeTruthy();
+
+      rerender();
+      expect(result.current.current).toBeTruthy();
+    });
+  });
+});

packages/core/src/hooks/useAfterFirstRender/index.ts

@@ -1,11 +1,14 @@
 import { RefObject, useEffect, useRef } from "react";
 
 export default function useAfterFirstRender(): RefObject<boolean> {
-  const isAfterFirstRender = useRef(true);
+  const isAfterFirstRender = useRef(false);
+
   useEffect(() => {
-    window.requestAnimationFrame(() => {
-      isAfterFirstRender.current = false;
-    });
+    const timer = setTimeout(() => {
+      isAfterFirstRender.current = true;
+    }, 0);
+    return () => clearTimeout(timer);
   }, []);
+
   return isAfterFirstRender;
 }

packages/core/src/storybook/decorators/withLiveEdit/components/LiveContent/LiveContent.tsx

@@ -5,10 +5,11 @@ import useApplyDecorators from "../../hooks/useApplyDecorators";
 import { LiveContentProps } from "./LiveContent.types";
 import styles from "./LiveContent.module.scss";
 import * as VibeComponents from "../../../../../components";
+import * as VibeHooks from "../../../../../hooks";
 import * as VibeIcons from "../../../../../components/Icon/Icons";
 import * as VibeComponentsNext from "../../../../../next";
 
-const vibeScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
+const vibeScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext, ...VibeHooks };
 const reactCommonHooksScope = {
   useState: React.useState,
   useEffect: React.useEffect,