@revealui/core 0.0.1-pre.0

package/dist/ui/error/ErrorBoundary.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error, errorInfo: null };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    this.setState({ errorInfo });
+    console.error("ErrorBoundary caught an error", error, errorInfo);
+    if (typeof window !== "undefined") {
+      // Optional: External error reporting service
+      if (this.props.onError) {
+        this.props.onError(error, errorInfo);
+      } else if (typeof window.reportError === "function") {
+        window.reportError(error);
+      }
+    }
+  }
+  renderFallbackUI(): React.ReactNode {
+    const { error, errorInfo } = this.state;
+    return (
+      <div className="prose-xl relative size-full max-w-screen-sm overflow-hidden bg-gray-200 lg:max-w-screen-lg">
+        <h1 className="prose-h1 text-xl">Something went wrong.</h1>
+        {error && errorInfo && (
+          <details style={{ whiteSpace: "pre-wrap" }}>
+            {error.toString()}
+            <br />
+            {errorInfo.componentStack}
+          </details>
+        )}
+      </div>
+    );
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return this.renderFallbackUI();
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
+
+//class ErrorBoundary extends React.Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = { hasError: false };
+//   }
+
+//   static getDerivedStateFromError(error) {
+//     // Update state so the next render will show the fallback UI.
+//     return { hasError: true };
+//   }
+
+//   componentDidCatch(error, errorInfo) {
+//     // You can log the error to an error reporting service
+//     console.error("Uncaught error:", error, errorInfo);
+//   }
+
+//   render() {
+//     if (this.state.hasError) {
+//       // You can render any custom fallback UI
+//       return <h1>Something went wrong.</h1>;
+//     }
+
+//     return this.props.children;
+//   }
+// }
+// import React from "react";
+
+// class ErrorBoundary extends React.Component<
+//   {
+//     onError: (error: Error, errorInfo: React.ErrorInfo) => void;
+//     children?: React.ReactNode; // Make children optional
+//   },
+//   { hasError: boolean; error: Error | null; errorInfo: React.ErrorInfo | null }
+// > {
+//   constructor(props: {
+//     onError: (error: Error, errorInfo: React.ErrorInfo) => void;
+//   }) {
+//     super(props);
+//     this.state = { hasError: false, error: null, errorInfo: null };
+//   }
+
+//   static getDerivedStateFromError(error: Error) {
+//     return { hasError: true, error, errorInfo: null };
+//   }
+
+//   componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+//     this.setState({ errorInfo });
+//     console.error("ErrorBoundary caught an error", error, errorInfo);
+//     if (typeof window !== "undefined") {
+//       // Optional: External error reporting service
+//       if (this.props.onError) {
+//         this.props.onError(error, errorInfo);
+//       } else if (typeof window.reportError === "function") {
+//         window.reportError(error);
+//       }
+//     }
+//   }
+
+//   renderFallbackUI(): React.ReactNode {
+//     const { error, errorInfo } = this.state;
+//     return (
+//       <div className="error-boundary">
+//         <h1>Something went wrong.</h1>
+//         {error && errorInfo && (
+//           <details style={{ whiteSpace: "pre-wrap" }}>
+//             {error.toString()}
+//             <br />
+//             {errorInfo.componentStack}
+//           </details>
+//         )}
+//       </div>
+//     );
+//   }
+
+//   render(): React.ReactNode {
+//     if (this.state.hasError) {
+//       return this.renderFallbackUI();
+//     }
+
+//     // Render children if there are no errors
+//     return this.props.children || null;
+//   }
+// }
+
+// export default ErrorBoundary;

package/dist/ui/error/index.tsx

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from "./ErrorBoundary.js";

package/dist/ui/forms/Input.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from "react";
+
+const Input = forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, disabled, ...props }, ref) => {
+  return (
+    <input
+      className={`
+        flex
+        w-full
+        rounded-md
+        border
+        border-transparent
+        bg-neutral-700
+        p-3
+        text-sm
+        file:border-0
+        file:bg-transparent
+        file:text-sm
+        file:font-medium
+        placeholder:text-neutral-400
+        focus:outline-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+        ${disabled ? "opacity-75" : ""}
+        ${className}
+      `}
+      disabled={disabled}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = "Input";
+
+export default Input;

package/dist/ui/forms/MediaItem.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import Button from "../buttons/Button";
+
+interface MediaItemProps {
+  data: {
+    id: string;
+    name: string;
+    artist: {
+      name: string;
+    };
+  };
+  onPlay: (id: string) => void;
+}
+
+const FaPlay = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+      />
+    </svg>
+  );
+};
+
+const MediaItem: React.FC<MediaItemProps> = ({ data, onPlay }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="bottom-0 right-0 w-full">
+        <Button
+          onClick={() => onPlay(data.id)}
+          className="bg-scrapWhite size-10 cursor-pointer rounded-full p-1"
+        >
+          <FaPlay className="text-scrapBlack" />
+        </Button>
+      </div>
+      <div className="flex flex-col">
+        <p className="font-medium">{data.name}</p>
+        <p className="text-neutral-400">{data.artist.name}</p>
+      </div>
+    </div>
+  );
+};
+
+export default MediaItem;
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import React from "react";
+// import Button from "../buttons/Button";
+
+// const FaPlay = ({ className }: { className: string }) => {
+//   return (
+//     <svg
+//       xmlns="http://www.w3.org/2000/svg"
+//       fill="none"
+//       viewBox="0 0 24 24"
+//       strokeWidth={1.5}
+//       stroke="currentColor"
+//       className={className}
+//     >
+//       <path
+//         strokeLinecap="round"
+//         strokeLinejoin="round"
+//         d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+//       />
+//     </svg>
+//   );
+// };
+// const MediaItem: React.FC<{
+//   data: {
+//     id: string;
+//     name: string;
+//     artist: {
+//       name: string;
+//     };
+//   };
+//   onPlay: (id: string) => any;
+// }> = ({ data, onPlay }) => {
+//   return (
+//     <div className="flex items-center gap-2">
+//       <div className="bottom-0 right-0 w-full">
+//         <Button
+//           onClick={() => onPlay(data.id)}
+//           className="bg-scrapWhite size-10 cursor-pointer rounded-full p-1"
+//         >
+//           <FaPlay className="text-scrapBlack" />
+//         </Button>
+//       </div>
+//       <div className="flex flex-col">
+//         <p className="font-medium">{data.name}</p>
+//         <p className="text-neutral-400">{data.artist.name}</p>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default MediaItem;

package/dist/ui/forms/index.tsx

@@ -0,0 +1,2 @@
+export { default as Input } from "./Input.js";
+export { default as MediaItem } from "./MediaItem.js";

package/dist/ui/game/Enemy.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line prettier/prettier
+
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+
+const Enemy = ({ onAttack }: { onAttack: any }) => {
+  const enemyRef = useRef(null);
+  const [position, setPosition] = useState({ x: 300, y: 0 }); // Initial position on the opposite side
+
+  useEffect(() => {
+    // Example of simple automated movement or action
+    const interval = setInterval(() => {
+      // Move enemy or perform an action
+      // This is a simple example where the enemy moves back and forth
+      setPosition((prev) => ({
+        ...prev,
+        x: prev.x + (Math.random() > 0.5 ? -10 : 10),
+      }));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Example of an automated attack
+  useEffect(() => {
+    const attackInterval = setInterval(() => {
+      onAttack(); // Trigger attack at intervals
+    }, 3000); // Attack every 3 seconds, for example
+
+    return () => clearInterval(attackInterval);
+  }, [onAttack]);
+
+  return (
+    <div
+      ref={enemyRef}
+      className="enemy-character"
+      style={{
+        left: `${position.x}px`,
+        bottom: `${position.y}px`,
+        position: "absolute",
+        width: "50px",
+        height: "50px",
+        backgroundColor: "red",
+      }}
+    >
+      {/* Enemy character representation */}
+    </div>
+  );
+};
+
+export default Enemy;

package/dist/ui/game/Fighters.tsx

@@ -0,0 +1,38 @@
+// eslint-disable-next-line prettier/prettier
+
+import { useState } from "react";
+import Enemy from "./Enemy.js";
+import HealthBar from "./HealthBar.js";
+import Player from "./Player.js";
+import React from "react";
+
+const Fighters = () => {
+  const [playerHealth, setPlayerHealth] = useState(100);
+  const [enemyHealth, setEnemyHealth] = useState(100);
+
+  // Method to handle player's attack
+  const handlePlayerAttack = () => {
+    setEnemyHealth((prevHealth) => Math.max(prevHealth - 10, 0));
+  };
+
+  // Method to handle enemy's attack
+  const handleEnemyAttack = () => {
+    setPlayerHealth((prevHealth) => Math.max(prevHealth - 10, 0));
+  };
+
+  return (
+    <div className="game-container bg-gray-800 p-4">
+      <div className="health-bars mb-4 flex justify-between">
+        <HealthBar health={playerHealth} label="Player" />
+        <HealthBar health={enemyHealth} label="Enemy" />
+      </div>
+      <div className="arena relative">
+        <Player onAttack={handlePlayerAttack} />
+        <Enemy onAttack={handleEnemyAttack} />
+        {/* Additional game elements like background, obstacles, etc. */}
+      </div>
+    </div>
+  );
+};
+
+export default Fighters;

package/dist/ui/game/GameControls.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+const GameControls = ({
+  onStart,
+  onPause,
+  onReset,
+}: {
+  onStart: any;
+  onPause: any;
+  onReset: any;
+}) => {
+  return (
+    <div className="game-controls space-x-2">
+      <button
+        onClick={onStart}
+        className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+      >
+        Start Game
+      </button>
+      <button
+        onClick={onPause}
+        className="rounded bg-yellow-500 px-4 py-2 text-white hover:bg-yellow-600"
+      >
+        Pause Game
+      </button>
+      <button
+        onClick={onReset}
+        className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
+      >
+        Reset Game
+      </button>
+    </div>
+  );
+};
+
+export default GameControls;

package/dist/ui/game/HealthBar.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+const HealthBar = ({ health, label }: { health: any; label: any }) => {
+  return (
+    <div className="w-full">
+      <div className="text-sm font-semibold">{label}</div>
+      <div className="h-6 w-full rounded bg-gray-300">
+        <div
+          className="h-6 rounded bg-green-500"
+          style={{ width: `${health}%` }}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default HealthBar;

package/dist/ui/game/Player.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line prettier/prettier
+
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+
+const Player = ({ onAttack }: { onAttack: any }) => {
+  const playerRef = useRef(null);
+  const [position, setPosition] = useState({ x: 50, y: 0 }); // Initial position
+
+  useEffect(() => {
+    const handleKeyDown = (event: any) => {
+      switch (event.key) {
+        case "ArrowLeft":
+          // Walk backward
+          setPosition((prevPosition) => ({
+            ...prevPosition,
+            x: Math.max(prevPosition.x - 5, 0),
+          }));
+          break;
+        case "ArrowRight":
+          // Walk forward
+          setPosition((prevPosition) => ({
+            ...prevPosition,
+            x: Math.min(prevPosition.x + 5, 100),
+          })); // Assuming 100 is the boundary
+          break;
+        case "ArrowUp":
+          // Jump (simplified version)
+          setPosition((prevPosition) => ({ ...prevPosition, y: 20 }));
+          setTimeout(
+            () => setPosition((prevPosition) => ({ ...prevPosition, y: 0 })),
+            500,
+          ); // Return to ground after 500ms
+          break;
+        case " ":
+          // Attack
+          onAttack();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onAttack]);
+
+  return (
+    <div
+      ref={playerRef}
+      className="player-character"
+      style={{
+        left: `${position.x}%`,
+        bottom: `${position.y}px`,
+        position: "absolute",
+        width: "50px",
+        height: "50px",
+        backgroundColor: "blue",
+      }}
+    >
+      {/* Player character representation */}
+    </div>
+  );
+};
+
+export default Player;

package/dist/ui/game/index.tsx

@@ -0,0 +1,5 @@
+export { default as Enemy } from "./Enemy.js";
+export { default as Fighters } from "./Fighters.js";
+export { default as GameControls } from "./GameControls.js";
+export { default as HealthBar } from "./HealthBar.js";
+export { default as Player } from "./Player.js";

package/dist/ui/hooks/useApiData.ts

@@ -0,0 +1,57 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { useEffect, useState } from "react";
+import getEnv from "../../core/processing/getters/getEnv";
+
+interface UseApiDataReturn<T> {
+  data: T | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+function useApiData<T>(endpoint: string): UseApiDataReturn<T> {
+  const [data, setData] = useState(null);
+  const [isLoading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const API_URL = getEnv("API_URL");
+        const REVALIDATION_KEY = getEnv("REVALIDATION_KEY");
+
+        if (!API_URL || !REVALIDATION_KEY) {
+          throw new Error("API URL or Revalidation Key is undefined");
+        }
+
+        const response = await fetch(`${API_URL}/api/${endpoint}`, {
+          method: "GET",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${REVALIDATION_KEY}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const json = await response.json();
+        setData(json);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [endpoint]);
+
+  return { data, isLoading, error };
+}
+
+export default useApiData;

package/dist/ui/hooks/useAuthModal.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useState } from "react";
+
+const useAuthModal = () => {
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
+
+  const openAuthModal = () => setIsAuthModalOpen(true);
+  const closeAuthModal = () => setIsAuthModalOpen(false);
+
+  return {
+    isAuthModalOpen,
+    openAuthModal,
+    closeAuthModal,
+  };
+};
+
+export default useAuthModal;

package/dist/ui/hooks/useCart.ts

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+const useCart = () => {
+  const addItem = useCallback(
+    (item: { id: string; name: string; price: number }) => {
+      const cart = localStorage.getItem("cart");
+      if (cart) {
+        const cartObject = JSON.parse(cart);
+        const newCart = [...cartObject, item];
+        localStorage.setItem("cart", JSON.stringify(newCart));
+      } else {
+        localStorage.setItem("cart", JSON.stringify([item]));
+      }
+    },
+    [],
+  );
+
+  return { addItem };
+};
+
+export default useCart;