tests: Convert fixtures to TSX instead of JSX

mohebifar · Mar 2, 2024 · ae70e8e · ae70e8e
1 parent 49b41be
commit ae70e8e
Show file tree

Hide file tree

Showing 38 changed files with 225 additions and 160 deletions.
diff --git a/apps/docs/components/BeforeAfterCodeLayout.tsx b/apps/docs/components/BeforeAfterCodeLayout.tsx
@@ -0,0 +1,51 @@
+import { GoArrowRight } from "react-icons/go";
+import { PiNumberCircleOneFill, PiNumberCircleTwoFill } from "react-icons/pi";
+
+export interface BeforeAfterCodeLayoutProps {
+  before: React.ReactNode;
+  after: React.ReactNode;
+}
+
+export function BeforeAfterCodeLayout({
+  before,
+  after,
+}: BeforeAfterCodeLayoutProps) {
+  return (
+    <div className="grid xl:grid-rows-1 xl:grid-cols-beforeAfterCodingBlocks grid-cols-1 grid-row-2 gap-4 w-full mt-6">
+      <div>
+        <div className="mockup-browser bg-gray-200 border dark:bg-gray-800 dark:border-gray-700">
+          <div className="mockup-browser-toolbar">
+            <div className="text-center font-bold flex-1 pr-20">
+              <div className="flex items-center justify-center gap-2">
+                <PiNumberCircleOneFill size={18} /> Input Code
+              </div>
+            </div>
+          </div>
+          {before}
+        </div>
+      </div>
+
+      <div className="items-center hidden xl:flex">
+        <div className="relative">
+          <GoArrowRight
+            className="dark:text-gray-100 text-gray-500 absolute left-1/2 -translate-x-1/3"
+            size={34}
+          />
+        </div>
+      </div>
+
+      <div>
+        <div className="mockup-browser bg-gray-200 border dark:bg-gray-800 dark:border-gray-700">
+          <div className="mockup-browser-toolbar">
+            <div className="text-center font-bold flex-1 pr-20">
+              <div className="flex items-center justify-center gap-2">
+                <PiNumberCircleTwoFill size={18} /> React Unforget Result
+              </div>
+            </div>
+          </div>
+          {after}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/components/CodeEditorAndPreview.tsx b/apps/docs/components/CodeEditorAndPreview.tsx
@@ -5,7 +5,7 @@ import {
   useSandpack,
 } from "@codesandbox/sandpack-react";
 import { memo, useCallback, useEffect, useRef } from "react";
-import cn from "classnames";
+import { twMerge } from "tailwind-merge";
 
 type CodeEditorAndPreviewProps = {
   readOnly?: boolean;
@@ -87,21 +87,19 @@ export const CodeEditorAndPreview = memo(
     }, [code, updateCurrentFileRef]);
 
     return (
-      <div className="mockup-window bg-gray-200 border dark:bg-gray-800 dark:border-gray-700">
-        <div className="w-full">
-          <SandpackCodeEditor
-            showTabs={false}
-            readOnly={readOnly}
-            className="h-96"
-            wrapContent
-            showLineNumbers
-          />
-          <div className="h-3 bg-gray-100" />
-          <SandpackPreview
-            ref={sandboxPreview}
-            className={cn(["bg-base-200 h-96", previewClassName])}
-          />
-        </div>
+      <div className="w-full">
+        <SandpackCodeEditor
+          showTabs={false}
+          readOnly={readOnly}
+          className="h-96"
+          wrapContent
+          showLineNumbers
+        />
+        <div className="h-3 bg-gray-100" />
+        <SandpackPreview
+          ref={sandboxPreview}
+          className={twMerge(["bg-base-200 h-46", previewClassName])}
+        />
       </div>
     );
   }

diff --git a/apps/docs/components/DynamicLiveCodeSandpack.tsx b/apps/docs/components/DynamicLiveCodeSandpack.tsx
@@ -1,32 +1,21 @@
 import dynamic from "next/dynamic";
-import { MoveRight } from "lucide-react";
+import { BeforeAfterCodeLayout } from "./BeforeAfterCodeLayout";
 
 const DynamicLiveCodeSandpack = dynamic(() => import("./LiveCodeSandpack"), {
   loading: () => {
-    const loadingWindow = (
-      <div className="mockup-window bg-gray-200 border dark:bg-gray-800 dark:border-gray-700">
-        <div className="w-full bg-gray-100 border dark:bg-gray-900">
+    return (
+      <BeforeAfterCodeLayout
+        before={
           <div className="h-96 flex items-center justify-center">
             <span className="loading loading-spinner loading-md"></span>{" "}
           </div>
-          <div className="h-3 bg-gray-100" />
+        }
+        after={
           <div className="h-96 flex items-center justify-center">
             <span className="loading loading-spinner loading-md"></span>{" "}
           </div>
-        </div>
-      </div>
-    );
-
-    return (
-      <div className="grid xl:grid-rows-1 xl:grid-cols-beforeAfterCodingBlocks grid-cols-1 grid-row-2 gap-4 w-full mt-6">
-        {loadingWindow}
-
-        <div className="items-center hidden xl:flex">
-          <MoveRight className="dark:text-gray-100 text-gray-500" size={30} />
-        </div>
-
-        {loadingWindow}
-      </div>
+        }
+      />
     );
   },
 });

diff --git a/apps/docs/components/LiveCodeSandpack.tsx b/apps/docs/components/LiveCodeSandpack.tsx
@@ -1,12 +1,12 @@
 import { transform } from "@babel/standalone";
 import { SandpackProvider } from "@codesandbox/sandpack-react";
-// @ts-ignore
 import reactUnforgetBabelPlugin from "@react-unforget/babel-plugin";
-import { MoveRight } from "lucide-react";
+
 // @ts-ignore
 import jsxBabelPlugin from "@babel/plugin-syntax-jsx";
 import { useTheme } from "nextra-theme-docs";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { BeforeAfterCodeLayout } from "./BeforeAfterCodeLayout";
 import { CodeEditorAndPreview } from "./CodeEditorAndPreview";
 
 const indexFileContent = `
@@ -83,48 +83,39 @@ function LiveCodeSandpack({ children, previewClassName }: LiveCodeProps) {
   );
 
   return (
-    <div className="grid xl:grid-rows-1 xl:grid-cols-beforeAfterCodingBlocks grid-cols-1 grid-row-2 gap-4 w-full mt-6">
-      <div>
-        <div className="w-full">
-          <SandpackProvider
-            template="react"
-            files={beforeFiles}
-            theme={theme === "system" || !theme ? "auto" : (theme as any)}
-          >
-            <CodeEditorAndPreview
-              onChange={handleCodeChange}
-              previewClassName={previewClassName}
-            />
-          </SandpackProvider>
-        </div>
-      </div>
-
-      <div className="items-center hidden xl:flex">
-        <MoveRight className="dark:text-gray-100 text-gray-500" size={30} />
-      </div>
-
-      <div>
-        <div className="w-full">
-          <SandpackProvider
-            customSetup={{
-              dependencies: {
-                "@react-unforget/runtime": "latest",
-              },
-            }}
-            files={afterFiles}
-            template="react"
-            content={children}
-            theme={theme === "system" || !theme ? "auto" : (theme as any)}
-          >
-            <CodeEditorAndPreview
-              readOnly
-              code={afterCode}
-              previewClassName={previewClassName}
-            />
-          </SandpackProvider>
-        </div>
-      </div>
-    </div>
+    <BeforeAfterCodeLayout
+      before={
+        <SandpackProvider
+          template="react"
+          files={beforeFiles}
+          theme={theme === "system" || !theme ? "auto" : (theme as any)}
+        >
+          <CodeEditorAndPreview
+            onChange={handleCodeChange}
+            previewClassName={previewClassName}
+          />
+        </SandpackProvider>
+      }
+      after={
+        <SandpackProvider
+          customSetup={{
+            dependencies: {
+              "@react-unforget/runtime": "latest",
+            },
+          }}
+          files={afterFiles}
+          template="react"
+          content={children}
+          theme={theme === "system" || !theme ? "auto" : (theme as any)}
+        >
+          <CodeEditorAndPreview
+            readOnly
+            code={afterCode}
+            previewClassName={previewClassName}
+          />
+        </SandpackProvider>
+      }
+    />
   );
 }
 

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -16,13 +16,13 @@
     "@react-unforget/compiler": "0.1.0-dev.8",
     "@react-unforget/runtime": "0.1.0-dev.4",
     "@vercel/analytics": "^1.2.2",
-    "classnames": "^2.5.1",
-    "lucide-react": "^0.343.0",
     "next": "^14.0.4",
     "nextra": "^2.13.3",
     "nextra-theme-docs": "^2.13.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.4",

diff --git a/apps/docs/pages/examples/with-data-fetching.mdx b/apps/docs/pages/examples/with-data-fetching.mdx
@@ -4,7 +4,7 @@ import { DynamicLiveCodeSandpack } from "@components/DynamicLiveCodeSandpack";
 
 This is just a complex example to show how React Unforget can handle complex logic and data fetching.
 
-<DynamicLiveCodeSandpack>
+<DynamicLiveCodeSandpack previewClassName="h-[700px]">
 {`import React, { useState, useEffect, useMemo, useCallback } from "react";
 
 const fetchUser = () => {
@@ -28,7 +28,7 @@ const fetchUserFollowers = () => {
 };
 
 function UserList() {
-  const [user, setUser] = useState([]);
+  const [user, setUser] = useState(null);
   const [followers, setFollowers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -86,12 +86,11 @@ function UserList() {
 
   return (
     <div>
-      <h1>Follwers of {user.name}</h1>
-      <h1>User List</h1>
+      <h4>Follwers of {user.name}</h4>
       <button onClick={toggleEvenOnes}>
         {shouldFilterUsers ? "Show all" : "Filter users"}
       </button>
-      <ul onClick={() => handleUserClick(user.id)}>{userListElement}</ul>
+      <ul style={{ padding: 0 }} onClick={() => handleUserClick(user.id)}>{userListElement}</ul>
     </div>
   );
 }
@@ -122,7 +121,6 @@ function UserListItem({ user: { login, avatar_url, html_url } }) {
 }
 
 export default UserList;
-
 `}
 
 </DynamicLiveCodeSandpack>
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
@@ -8,13 +8,15 @@ module.exports = {
   theme: {
     extend: {
       gridTemplateColumns: {
-        beforeAfterCodingBlocks: "minmax(0, 1fr) minmax(0, 1rem) minmax(0, 1fr);",
+        beforeAfterCodingBlocks:
+          "minmax(0, 1fr) minmax(0, 1rem) minmax(0, 1fr);",
       },
     },
   },
-  // plugins: [require("daisyui")],
+  plugins: [require("daisyui")],
   daisyui: {
-    themes: ["sunset"],
+    base: false,
+    themes: ["synthwave"],
   },
   darkMode: "class",
 };
diff --git a/packages/compiler/.eslintrc.cjs b/packages/compiler/.eslintrc.cjs
@@ -6,5 +6,5 @@ module.exports = {
     project: true,
     tsConfigRootDir: __dirname,
   },
-  ignorePatterns: ["src/tests/fixtures/**/*.js"],
+  ignorePatterns: ["src/tests/fixtures/**/*.tsx"],
 };
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@babel/standalone": "^7.24.0",

diff --git a/...compiler/src/tests/fixtures/fixture_1.jsx → ...compiler/src/tests/fixtures/fixture_1.tsx b/...compiler/src/tests/fixtures/fixture_1.jsx → ...compiler/src/tests/fixtures/fixture_1.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function SimpleJSX() {
   return <p>Hello world!</p>;
 }
diff --git a/...ompiler/src/tests/fixtures/fixture_10.jsx → ...ompiler/src/tests/fixtures/fixture_10.tsx b/...ompiler/src/tests/fixtures/fixture_10.jsx → ...ompiler/src/tests/fixtures/fixture_10.tsx
@@ -1,27 +1,25 @@
-import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 
-const fetchUser = () => {
-  return fetch("https://api.github.com/users/mohebifar").then((response) => {
-    if (!response.ok) {
-      throw new Error("Network response was not ok");
-    }
-    return response.json();
-  });
+const fetchUser = async () => {
+  const response = await fetch("https://api.github.com/users/mohebifar");
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return await response.json();
 };
 
-const fetchUserFollowers = () => {
-  return fetch("https://api.github.com/users/mohebifar/followers").then(
-    (response) => {
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      return response.json();
-    }
+const fetchUserFollowers = async () => {
+  const response = await fetch(
+    "https://api.github.com/users/mohebifar/followers"
   );
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return await response.json();
 };
 
 function UserList() {
-  const [user, setUser] = useState([]);
+  const [user, setUser] = useState<any>({});
   const [followers, setFollowers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -45,7 +43,7 @@ function UserList() {
   }, []);
 
   // useCallback to memoize a hypothetical handler function
-  const handleUserClick = useCallback((userId) => {
+  const handleUserClick = useCallback((userId: string) => {
     console.log("User clicked:", userId);
     // Handler logic here...
   }, []);
@@ -57,7 +55,7 @@ function UserList() {
 
   const memoizedFollowers = useMemo(() => followers, [followers]);
 
-  const filteredUsers = [];
+  const filteredUsers: any[] = [];
   for (let i = 0; i < memoizedFollowers.length; i++) {
     const user = memoizedFollowers[i];
     if (i % 2 === 0) {

diff --git a/...ompiler/src/tests/fixtures/fixture_11.jsx → ...ompiler/src/tests/fixtures/fixture_11.tsx b/...ompiler/src/tests/fixtures/fixture_11.jsx → ...ompiler/src/tests/fixtures/fixture_11.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function App() {
   const a = [];
   a.push(1);