@revealui/core 0.0.1-pre.0

package/dist/ui/navigation/Route.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import { usePageContext } from "../hooks/usePageContext";
+import NotFound from "./NotFound";
+import pageRoutes, {type PageRoute} from "../../core/router/pageRoutes";
+
+const Route: React.FC = () => {
+  const { urlPathname } = usePageContext();
+  const [currentComponent, setCurrentComponent] = useState<React.ReactNode>(null);
+
+  useEffect(() => {
+    const loadRoute = async () => {
+      const route = await pageRoutes();
+      const matchedRoute: PageRoute | undefined = route.find(
+        (r) => r.path === urlPathname
+      );
+
+      if (matchedRoute) {
+        const Component = (await matchedRoute.component()).default; // Resolve the promise
+        setCurrentComponent(<Component />);
+      } else {
+        setCurrentComponent(<NotFound />);
+      }
+    };
+
+    loadRoute();
+  }, [urlPathname]);
+
+  return <>{currentComponent}</>;
+};
+
+export default Route;
+
+
+
+// import React, { useEffect, useState } from "react";
+// import pageRoutes from "../../core/router/pageRoutes";
+// import NotFound from "./NotFound";
+
+// const Route: React.FC = () => {
+//   const [currentComponent, setCurrentComponent] =
+//     useState<React.ReactNode>(undefined);
+
+//   // const { currentPath } = usePageContext()
+
+//   useEffect(() => {
+//     const loadComponent = async () => {
+//       const routeData = await pageRoutes();
+//       const currentPath = routeData;
+//       // const route = routeData.getPageRoutes(
+//       //   (route: { path: any }) => route.path === currentPath
+//       // );
+//       const route = currentPath;
+//       if (route) {
+//         setCurrentComponent(currentComponent); // Use the correct component
+//         console.log("route:", route)
+//       } else {
+//         setCurrentComponent(<NotFound />);
+//       }
+//     };
+//     loadComponent();
+//   }, [currentComponent]);
+
+//   return <>{currentComponent}</>;
+// };
+
+// export default Route;
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// "use client"
+// /* eslint-disable @next/next/no-async-client-component */
+// // eslint-disable-next-line prettier/prettier
+
+// import { useEffect, useMemo, useState } from "react"
+// import NotFound from "./NotFound.js"
+// import generateRoutes from "../generators/routes.js"
+// import usePageContext from "../hooks/usePageContext.js"
+// import React from "react"
+// import PageContext from "../contexts/PageContext.js"
+// import pageRoutes from "../generators/pageRoutes.js"
+
+// const Route = async () => {
+//   const { currentPath } = usePageContext()
+
+//   const generatedRoutes = useMemo(() => generateRoutes(), [])
+
+//   const [currentComponent, setCurrentComponent] = useState<React.ReactNode>(undefined);
+
+//   // const [currentComponent, setCurrentComponent] = useState()
+
+//   useEffect(() => {
+//     const loadComponent = async () => {
+//       const routeData = await pageRoutes(); // Assuming pageRoutes returns a promise
+//       const route = routeData.find((route: { path: any }) => route.path === currentPath);
+//       if (route) {
+//         setCurrentComponent(currentComponent);
+//       } else {
+//         setCurrentComponent(<NotFound />);
+//       }
+//     };
+//     loadComponent();
+//   }, [currentComponent, currentPath]);
+
+//   // useEffect(() => {
+//   //   const loadComponent = async () => {
+//   //     const route = pageRoutes.find(
+//   //       (route: { path: any }) => route.path === currentPath
+//   //     )
+//   //     if (route) {
+//   //       setCurrentComponent(currentComponent)
+//   //     } else {
+//   //       setCurrentComponent(<NotFound />)
+//   //     }
+//   //   }
+//   //   loadComponent()
+//   // }, [currentComponent, currentPath, pageRoutes])
+
+//   return <>{currentComponent}</>
+// }
+
+// export default Route

package/dist/ui/navigation/Transition.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+
+interface TransitionProps {
+  show: boolean;
+  duration?: number;
+  children: React.ReactNode;
+}
+
+const Transition: React.FC<TransitionProps> = ({
+  show,
+  children,
+  duration = 300,
+}) => {
+  const [isVisible, setIsVisible] = useState(show);
+
+  useEffect(() => {
+    if (show) {
+      setIsVisible(true);
+    } else {
+      const timeout = setTimeout(() => {
+        setIsVisible(false);
+      }, duration);
+      return () => clearTimeout(timeout);
+    }
+  }, [show, duration]);
+
+  return (
+    <div
+      className={`transition-opacity ${
+        isVisible
+          ? "pointer-events-auto opacity-100"
+          : "pointer-events-none opacity-0"
+      } duration-${duration}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Transition;

package/dist/ui/navigation/index.tsx

@@ -0,0 +1,8 @@
+export { default as DesktopMenu } from "./DesktopMenu.js";
+export { default as Footer } from "./Footer.js";
+export { default as MobileMenu } from "./MobileMenu.js";
+export { default as Transition } from "./Transition.js";
+export { default as Link } from "./Link.js";
+export { default as Route } from "./Route.js";
+export { default as NotFound } from "./NotFound.js";
+export { default as NavigationLinks } from "./NavigationLinks.js";

package/dist/ui/notifications/Banner.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Image from "../images/Image";
+import Field from "../shells/Field";
+import GridContainer from "../shells/Grid";
+import Paragraph from "../text/Paragraph";
+
+const Banner: React.FC<{
+  children?: React.ReactNode;
+  className?: string;
+  type?: "success" | "warning" | "error";
+  url: string;
+}> = ({ url }) => {
+  return (
+    <GridContainer className="relative isolate z-50" index={0}>
+      <Field className="border-scrapBlack w-full rounded-xl border-double shadow-2xl">
+        <BackgroundImage url={url} />
+      </Field>
+      <Field className="absolute inset-0">
+        <ImageOverlay />
+      </Field>
+      <Field className="absolute bottom-0 w-full">
+        <Content />
+      </Field>
+    </GridContainer>
+  );
+};
+
+const BackgroundImage: React.FC<{ url: string }> = ({ url }) => (
+  <Image
+    className="border-scrapBlack size-full rounded-lg border-double p-1 shadow-2xl lg:rounded-none lg:rounded-r-md lg:p-0 lg:pr-1 "
+    src={url}
+    alt="Scrapyard background"
+  />
+);
+
+const ImageOverlay: React.FC = () => (
+  <div className="bg-scrapBlack/40 absolute inset-0 rounded-lg lg:rounded-none lg:rounded-r-md " />
+);
+
+const Content: React.FC = () => (
+  <div className="p-4">
+    <LogoImage />
+    <QuoteBlock />
+    <Caption />
+  </div>
+);
+
+const LogoImage: React.FC = () => (
+  <Image
+    src="https://res.cloudinary.com/dpytkhyme/image/upload/v1691668054/STREETBEEFS%20SCRAPYARD/website%20new/Logos/1677282905794_wb40jd.png"
+    alt="Streetbeefs Scrapyard Logo"
+    className="size-20"
+  />
+);
+
+const QuoteBlock: React.FC = () => (
+  <blockquote className="text-scrapYellow text-xl font-semibold leading-6">
+    <Paragraph>“Glove Up or Shut Up!”</Paragraph>
+  </blockquote>
+);
+
+const Caption: React.FC = () => (
+  <figcaption className="text-scrapYellow mt-6 text-sm leading-6">
+    <strong className="text-scrapWhite font-semibold">Scarface,</strong> Founder
+    of Streetbeefs
+  </figcaption>
+);
+
+export default Banner;

package/dist/ui/notifications/Error.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Error: React.FC = () => {
+  return (
+    <>
+      <h1>Error</h1>
+      <p>Page not found</p>
+    </>
+  );
+};
+
+export default Error;

package/dist/ui/notifications/Loader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Image from "../images/Image";
+
+const loaderUrl = "";
+const Loader: React.FC<{
+  title?: string;
+}> = ({ title }) => (
+  <div className="flex w-full flex-col items-center justify-center">
+    <Image src={loaderUrl} alt="loader" className="size-32 object-contain" />
+    <h1 className="mt-2 text-2xl font-bold text-white">{title || "Loading"}</h1>
+  </div>
+);
+
+export default Loader;

package/dist/ui/notifications/NoResults.tsx

@@ -0,0 +1,11 @@
+import React, { type FC } from "react";
+
+const NoResults: FC = () => {
+  return (
+    <div className="flex size-full items-center justify-center text-neutral-500">
+      No results found.
+    </div>
+  );
+};
+
+export default NoResults;

package/dist/ui/notifications/index.tsx

@@ -0,0 +1,4 @@
+export { default as Banner } from "./Banner.js";
+export { default as Error } from "./Error.js";
+export { default as Loader } from "./Loader.js";
+export { default as NoResults } from "./NoResults.js";

package/dist/ui/providers/AppProvider.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { Suspense } from "react"
+import updateDocumentHead from "../../core/dom/updateDocumentHead"
+import { ExtendedPageContextClient } from "../../types/interfaces/context"
+import { ErrorBoundary } from "../error"
+import { App, Skeleton } from "../shells"
+import DisclosureProvider from "./DisclosureProvider"
+import MenuProvider from "./MenuProvider"
+import { PageContextProvider } from "./PageContextProvider"
+import ThemeProvider from "./ThemeProvider"
+
+export interface PageShellProps {
+  children?: React.ReactNode
+  pageContext: ExtendedPageContextClient
+}
+
+const AppProvider: React.FC<PageShellProps> = ({ children, pageContext }) => {
+  const updateDocumentHeadAndPath = () => {
+    if (pageContext) {
+      updateDocumentHead()
+    }
+  }
+
+  updateDocumentHeadAndPath()
+
+  return (
+    <React.StrictMode>
+      <Suspense fallback={<Skeleton width={500} height={500} />}>
+        <ErrorBoundary>
+          <ThemeProvider>
+            <PageContextProvider pageContext={pageContext}>
+              <MenuProvider>
+                <DisclosureProvider>
+                  <App>{children}</App>
+                </DisclosureProvider>
+              </MenuProvider>
+            </PageContextProvider>
+          </ThemeProvider>
+        </ErrorBoundary>
+      </Suspense>
+    </React.StrictMode>
+  )
+}
+
+export default AppProvider
+
+// import React, { Suspense, useEffect } from "react";
+// import type { PageContext } from "reveal/types";
+// import { ErrorBoundary, Skeleton } from "reveal";
+// import {
+//   DisclosureProvider,
+//   MenuProvider,
+//   PageContextProvider,
+//   ThemeProvider,
+//   updateCurrentPath,
+//   updateDocumentHead,
+//   usePageContext,
+// } from "reveal";
+// import AppShell from "./AppShell";
+
+// interface PageShellProps {
+//   children?: React.ReactNode;
+//   pageContext?: PageContext;
+// }
+// const App: React.FC<PageShellProps> = ({ children }) => {
+//   const pageContext = usePageContext();
+
+//   useEffect(() => {
+//     const handleLocationChange = () => {
+//       updateCurrentPath(window.location.pathname);
+//     };
+
+//     window.addEventListener("popstate", handleLocationChange);
+
+//     return () => {
+//       window.removeEventListener("popstate", handleLocationChange);
+//     };
+//   }, []);
+
+//   useEffect(() => {
+//     if (pageContext) {
+//       try {
+//         updateDocumentHead();
+//         window.scrollTo(window.scrollX, window.scrollY);
+//         updateCurrentPath(window.location.pathname);
+//       } catch (error) {
+//         console.error("Error updating document head:", error);
+//       }
+
+//       return () => {
+//         updateCurrentPath("");
+//       };
+//     }
+//   }, [pageContext]);
+//   console.log("Rendering AppShell with children:", children);
+//   return (
+//     <React.StrictMode>
+//       <Suspense fallback={<Skeleton width={500} height={500} />}>
+//         <ErrorBoundary>
+//           <ThemeProvider>
+//             <PageContextProvider>
+//               <MenuProvider>
+//                 <DisclosureProvider>
+//                   <AppShell>{children}</AppShell>
+//                 </DisclosureProvider>
+//               </MenuProvider>
+//             </PageContextProvider>
+//           </ThemeProvider>
+//         </ErrorBoundary>
+//       </Suspense>
+//     </React.StrictMode>
+//   );
+// };
+
+// export default App;

package/dist/ui/providers/DisclosureProvider.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line prettier/prettier
+
+import { useState } from "react";
+import DisclosureContext from "../contexts/DisclosureContext";
+
+const DisclosureProvider = ({ children }: { children: any }) => {
+  const [open, setOpen] = useState(false);
+
+  const toggle = () => {
+    setOpen((prevOpen: any) => !prevOpen);
+  };
+
+  return (
+    <DisclosureContext.Provider value={{ open, toggle }}>
+      {children}
+    </DisclosureContext.Provider>
+  );
+};
+
+export default DisclosureProvider;

package/dist/ui/providers/MenuProvider.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line prettier/prettier
+
+import { useState } from "react";
+import MenuContext from "../contexts/MenuContext";
+
+// Menu Manager component
+const MenuProvider = ({ children }: { children: any }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // Function to open the menu
+  const openMenu = () => {
+    setIsMenuOpen(true);
+  };
+
+  // Function to close the menu
+  const closeMenu = () => {
+    setIsMenuOpen(false);
+  };
+
+  // Toggle function to open/close the menu
+  const toggleMenu = () => {
+    setIsMenuOpen((prev: any) => !prev);
+  };
+
+  return (
+    <MenuContext.Provider
+      value={{
+        isMenuOpen,
+        openMenu,
+        closeMenu,
+        toggleMenu,
+      }}
+    >
+      {children}
+    </MenuContext.Provider>
+  );
+};
+
+export default MenuProvider;

package/dist/ui/providers/PageContextProvider.tsx

@@ -0,0 +1,176 @@
+// PageContextProvider.tsx
+import React from "react"
+import {
+  ExtendedPageContextClient,
+  ExtendedPageContextServer,
+  PageContextClient,
+  PageContextServer,
+} from "../../types/interfaces/context"
+import GlobalContext from "../contexts/GlobalContext"
+
+type PageContextProviderProps = {
+  pageContext:
+    | ExtendedPageContextServer
+    | ExtendedPageContextClient
+    | PageContextServer
+    | PageContextClient
+  children?: React.ReactNode
+}
+
+export const PageContextProvider: React.FC<PageContextProviderProps> = ({
+  children,
+  pageContext,
+}) => {
+  return (
+    <GlobalContext.Provider value={pageContext}>
+      {children}
+    </GlobalContext.Provider>
+  )
+}
+
+// // PageContextProvider.tsx
+// import React, { ReactNode } from "react";
+// import GlobalContext, { ExtendedPageContext } from "../contexts/GlobalContext";
+
+// // PageContextProvider component
+// export default function PageContextProvider({
+//   pageContext,
+//   children,
+// }: {
+//   pageContext: ExtendedPageContext; // This should match the structure of your pageContext
+//   children: ReactNode;
+// }) {
+//   return (
+//     <GlobalContext.Provider value={pageContext}>
+//       {children}
+//     </GlobalContext.Provider>
+//   );
+// }
+
+// // Hook to access PageContext within components
+// // export function usePageContext(): PageContextProps {
+// //   const pageContext = useContext(PageContext);
+// //   if (!pageContext) {
+// //     throw new Error("usePageContext must be used within a PageContextProvider");
+// //   }
+// //   return pageContext;
+// // }
+
+// // import React, { useContext, createContext, ReactNode } from "react";
+// // import updateCurrentPath from "../core/updateCurrentPath";
+// // import {PageContextClient, PageContextServer} from "reveal/types";
+// // import GlobalContext from "../contexts/GlobalContext";
+
+// // // Define a type that unifies PageContextClient and PageContextServer
+// // type PageContextrevealUnified = PageContextClient | PageContextServer;
+
+// // type ExtendedPageContext<Data = unknown> = PageContextrevealUnified & {
+// //   data:{
+// //     pageContext: {
+// //   current: boolean;
+// //   updateCurrentPath: (path: string | URL) => string | undefined;
+// //   title: string;
+// //   description: string;
+// //     }
+// //   }
+// // };
+// // export interface PageContextProps {
+// //   data?: any;
+// //   pageContext?: any;
+// //   title: string;
+// //   description: string;
+
+// //   updateCurrentPath: (path: string | URL) => string | undefined;
+// //   current: boolean;
+// // }
+
+// // const PageContext = createContext<PageContextProps>({
+// //   data: {
+// //     pageContext: {
+// //       title: "",
+// //       description: "",
+// //       updateCurrentPath,
+// //       current: false,
+// //     },
+// //   },
+
+// // });
+
+// // // PageContextProvider component
+// // export function PageContextProvider({
+// //   pageContext,
+// //   children,
+// // }: {
+// //   pageContext: ExtendedPageContext;
+// //   children: ReactNode;
+// // }) {
+// //   const { reactContext } = GlobalContext;
+
+// //   return (
+// //     <reactContext.Provider value={pageContext}>
+// //       {children}
+// //     </reactContext.Provider>
+// //   );
+// // }
+
+// // export const PageContextProvider = ({
+// //   children,
+// // }: {
+// //   children: React.ReactNode;
+// // }) => {
+// //   const { current, currentPath, updateCurrentPath } = usePageContextHook();
+
+// //   const title = "Streetbeefs Scrapyard";
+// //   const description =
+// //     "Streetbeefs Scrapyard is a place where you can find all the latest Streetbeefs videos and news.";
+
+// //   // Providing the correct value object with all necessary fields
+// //   return (
+// //     <PageContext.Provider
+// //       value={{
+// //         data: {}, // assuming this will come from some logic
+// //         pageContext: {}, // assuming this will come from some logic
+// //         currentPath,
+// //         updateCurrentPath,
+// //         title,
+// //         description,
+// //         current: current || false, // ensure it's a boolean
+// //       }}
+// //     >
+// //       {children}
+// //     </PageContext.Provider>
+// //   );
+// // };
+
+// // Export the context and hook to use in components
+// // export const usePageContext = (): PageContextProps => useContext(PageContext);
+// // export default PageContext;
+
+// // /* eslint-disable @typescript-eslint/no-explicit-any */
+// // import React from "react";
+// // import PageContext from "../contexts/PageContext";
+// // // import { updateDocumentHead } from "../functions";
+// // import { usePageContext } from "../hooks/usePageContext";
+
+// // const PageContextProvider = ({ children }: { children: any; value?: any }) => {
+// //   const { current, currentPath, updateCurrentPath } = usePageContext();
+
+// //   const title = "Streetbeefs Scrapyard";
+// //   const description =
+// //     "Streetbeefs Scrapyard is a place where you can find all the latest Streetbeefs videos and news.";
+// //   return (
+// //     <PageContext.Provider
+// //       value={{
+// //         current,
+// //         currentPath,
+// //         updateCurrentPath,
+// //         title,
+// //         description,
+// //       }}
+// //     >
+// //       {children}
+// //     </PageContext.Provider>
+// //   );
+// // };
+
+// // export default PageContextProvider;