@revealui/core 0.0.1-pre.1 → 0.0.1-pre.3

package/dist/ui/error/ErrorBoundary.tsx

@@ -1,150 +0,0 @@
-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

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

package/dist/ui/forms/Input.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

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

package/dist/ui/game/Enemy.tsx

@@ -1,52 +0,0 @@
-/* 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

@@ -1,38 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-/* 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

@@ -1,18 +0,0 @@
-/* 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

@@ -1,70 +0,0 @@
-/* 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

@@ -1,5 +0,0 @@
-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

@@ -1,57 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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;