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

package/dist/ui/contexts/ThemeContext.tsx

@@ -1,195 +0,0 @@
-"use client";
-// eslint-disable-next-line prettier/prettier
-
-import { createContext } from "react";
-
-const defaultThemeSettings = {
-  maxWidth: {
-    0: "max-w-3xl",
-    1: "max-w-5xl",
-    2: "max-w-7xl",
-    3: "max-w-8xl",
-    4: "max-w-9xl",
-    5: "max-w-10xl",
-    default: "max-w-full",
-  },
-  padding: {
-    0: "p-0",
-    1: "p-1",
-    2: "p-2",
-    default: "p-3",
-  },
-  breakpoints: {
-    sm: "640px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1280px",
-    "2xl": "1536px",
-  },
-  layoutType: {
-    container: "container",
-    flex: "flex",
-    grid: "grid",
-    stack: "stack",
-  },
-  customProps: {
-    flex: {
-      flexDirection: {
-        row: "flex-row",
-        col: "flex-col",
-      },
-      justifyContent: {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between",
-        around: "justify-around",
-        evenly: "justify-evenly",
-      },
-      alignItems: {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end",
-        stretch: "items-stretch",
-        baseline: "items-baseline",
-      },
-      alignContent: {
-        start: "content-start",
-        center: "content-center",
-        end: "content-end",
-        between: "content-between",
-        around: "content-around",
-        evenly: "content-evenly",
-      },
-      flexWrap: {
-        nowrap: "flex-nowrap",
-        wrap: "flex-wrap",
-        wrapReverse: "flex-wrap-reverse",
-      },
-      flexFlow: {
-        row: "flex-row",
-        col: "flex-col",
-        rowWrap: "flex-row flex-wrap",
-        colWrap: "flex-col flex-wrap",
-        rowWrapReverse: "flex-row flex-wrap-reverse",
-        colWrapReverse: "flex-col flex-wrap-reverse",
-      },
-      flexGrow: {
-        0: "flex-grow-0",
-        1: "flex-grow-1",
-      },
-      flexShrink: {
-        0: "flex-shrink-0",
-        1: "flex-shrink-1",
-      },
-      flexBasis: {
-        auto: "flex-basis-auto",
-        0: "flex-basis-0",
-        full: "flex-basis-full",
-      },
-      flexOrder: {
-        first: "order-first",
-        last: "order-last",
-        none: "order-none",
-        1: "order-1",
-        2: "order-2",
-        3: "order-3",
-        4: "order-4",
-        5: "order-5",
-        6: "order-6",
-        7: "order-7",
-        8: "order-8",
-        9: "order-9",
-        10: "order-10",
-        11: "order-11",
-        12: "order-12",
-      },
-      flexSelf: {
-        auto: "self-auto",
-        start: "self-start",
-        center: "self-center",
-        end: "self-end",
-        stretch: "self-stretch",
-      },
-    },
-    grid: {
-      gridTemplateColumns: {
-        1: "grid-cols-1",
-        2: "grid-cols-2",
-        3: "grid-cols-3",
-        4: "grid-cols-4",
-        5: "grid-cols-5",
-        6: "grid-cols-6",
-        7: "grid-cols-7",
-        8: "grid-cols-8",
-        9: "grid-cols-9",
-        10: "grid-cols-10",
-        11: "grid-cols-11",
-        12: "grid-cols-12",
-        none: "grid-cols-none",
-      },
-      gridTemplateRows: {
-        1: "grid-rows-1",
-        2: "grid-rows-2",
-        3: "grid-rows-3",
-        4: "grid-rows-4",
-        5: "grid-rows-5",
-        6: "grid-rows-6",
-        none: "grid-rows-none",
-      },
-      gridTemplateAreas: {
-        none: "grid-areas-none",
-      },
-      gridAutoColumns: {
-        auto: "auto-cols-auto",
-        min: "auto-cols-min",
-        max: "auto-cols-max",
-        fr: "auto-cols-fr",
-      },
-      gridAutoRows: {
-        auto: "auto-rows-auto",
-        min: "auto-rows-min",
-        max: "auto-rows-max",
-        fr: "auto-rows-fr",
-      },
-      gridAutoFlow: {
-        row: "grid-flow-row",
-        col: "grid-flow-col",
-        rowDense: "grid-flow-row-dense",
-        colDense: "grid-flow-col-dense",
-      },
-      grid: {
-        rows: "rows",
-        cols: "cols",
-        gap: "gap",
-        gapX: "gap-x",
-        gapY: "gap-y",
-        autoFlow: "auto-flow",
-        autoRows: "auto-rows",
-        autoCols: "auto-cols",
-        templateRows: "template-rows",
-        templateCols: "template-cols",
-        templateAreas: "template-areas",
-      },
-      gridRow: {
-        auto: "row-auto",
-        span: "row-span",
-        start: "row-start",
-        end: "row-end",
-      },
-      gridColumn: {
-        auto: "col-auto",
-        span: "col-span",
-        start: "col-start",
-        end: "col-end",
-      },
-      gridArea: {
-        auto: "area-auto",
-      },
-    },
-  },
-};
-// Create the theme context with default theme settings.
-const ThemeContext = createContext(defaultThemeSettings);
-
-export default ThemeContext;

package/dist/ui/controls/MusicHeader.tsx

@@ -1,484 +0,0 @@
-// import React, { cache } from "react";
-import React from "react";
-import Button from "../buttons/Button";
-
-const RxCaretRight = ({ className }: { className: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    className={`size-[20px] ${className}`}
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fillRule="evenodd"
-      // eslint-disable-next-line max-len
-      d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-const RxCaretLeft = ({ className }: { className: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    className={`size-[20px] ${className}`}
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fillRule="evenodd"
-      // eslint-disable-next-line max-len
-      d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-const FaUserAlt = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    className="size-[20px]"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fillRule="evenodd"
-      // eslint-disable-next-line max-len
-      d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-const BiSearch = ({ className }: { className: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    className={`size-[20px] ${className}`}
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fillRule="evenodd"
-      // eslint-disable-next-line max-len
-      d="M8 15a7 7 0 100-14 7 7 0 000 14zM7 7a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9H6a1 1 0 110-2h1V7z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-const HiHome = ({ className }: { className: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    className={`size-[20px] ${className}`}
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
-    <path
-      fillRule="evenodd"
-      // eslint-disable-next-line max-len
-      d="M10 11.414l4.95 4.95a1 1 0 101.414-1.414L11.414 10l4.95-4.95a1 1 0 10-1.414-1.414L10 8.586 5.05 3.636a1 1 0 00-1.414 1.414L8.586 10l-4.95 4.95a1 1 0 001.414 1.414L10 11.414z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-// const cachedLogout = cache(async () => {
-const cachedLogout = async () => {
-  const response = await fetch("/api/auth/logout", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
-
-  if (!response.ok) {
-    throw new Error(`HTTP error: ${response.status}`);
-  }
-
-  return response.json(); // Assuming the response needs to be processed
-};
-
-const MusicHeader = ({
-  children,
-  className,
-  session,
-}: {
-  children: React.ReactNode;
-  className: string;
-  session: {
-    user: {
-      name: string;
-      email: string;
-      image: string;
-    };
-    back: () => void;
-    forward: () => void;
-    push: (url: string) => void;
-  };
-}) => {
-  const user = session.user;
-
-  const handleLogout = async () => {
-    try {
-      await cachedLogout();
-      console.log("Successfully logged out");
-      // Redirect or update state here as necessary
-    } catch (error) {
-      console.error("Error during fetch:", error);
-    }
-  };
-
-  return (
-    <div
-      className={
-        className
-          ? `${className} flex h-full flex-col justify-between`
-          : "flex h-full flex-col justify-between"
-      }
-    >
-      <div className="mb-4 flex w-full items-center justify-between">
-        <div className="hidden items-center gap-x-2 md:flex">
-          <Button
-            onClick={() => session.back()}
-            className="
-              flex
-              cursor-pointer
-              items-center
-              justify-center
-              rounded-full
-              bg-black
-              transition
-              hover:opacity-75
-            "
-          >
-            <RxCaretLeft className="w-30 text-white" />
-          </Button>
-          <Button
-            onClick={() => session.forward()}
-            className="
-              flex
-              cursor-pointer
-              items-center
-              justify-center
-              rounded-full
-              bg-black
-              transition
-              hover:opacity-75
-            "
-          >
-            <RxCaretRight className="w-30 text-white" />
-          </Button>
-        </div>
-        <div className="flex items-center gap-x-2 md:hidden">
-          <Button
-            onClick={() => session.push("/")}
-            className="
-              flex
-              cursor-pointer
-              items-center
-              justify-center
-              rounded-full
-              bg-white
-              p-2
-              transition
-              hover:opacity-75
-            "
-          >
-            <HiHome className="w-20 text-black" />
-          </Button>
-          <Button
-            onClick={() => session.push("/search")}
-            className="
-              flex
-              cursor-pointer
-              items-center
-              justify-center
-              rounded-full
-              bg-white
-              p-2
-              transition
-              hover:opacity-75
-            "
-          >
-            <BiSearch className="text-black" />
-          </Button>
-        </div>
-        <div className="flex items-center justify-between gap-x-4">
-          {user ? (
-            <div className="flex items-center gap-x-4">
-              <Button onClick={handleLogout} className="bg-white px-6 py-2">
-                Logout
-              </Button>
-              <Button
-                onClick={() => session.push("/account")}
-                className="bg-white"
-              >
-                <FaUserAlt />
-              </Button>
-            </div>
-          ) : (
-            <>
-              <Button
-                // onClick={authModal.openAuthModal}
-                className="
-                    bg-transparent
-                    font-medium
-                    text-neutral-300
-                  "
-              >
-                Sign up
-              </Button>
-
-              <Button
-                // onClick={authModal.openAuthModal}
-
-                className="bg-white px-6 py-2"
-              >
-                Log in
-              </Button>
-            </>
-          )}
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export default MusicHeader;
-
-// const RxCaretRight = ({ className }: { className: string }) => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     className={`size-[20px] ${className}`}
-//     viewBox="0 0 20 20"
-//     fill="currentColor"
-//   >
-//     <path
-//       fillRule="evenodd"
-//       // eslint-disable-next-line max-len
-//       d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
-//       clipRule="evenodd"
-//     />
-//   </svg>
-// );
-
-// const RxCaretLeft = ({ className }: { className: string }) => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     className={`size-[20px] ${className}`}
-//     viewBox="0 0 20 20"
-//     fill="currentColor"
-//   >
-//     <path
-//       fillRule="evenodd"
-//       // eslint-disable-next-line max-len
-//       d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
-//       clipRule="evenodd"
-//     />
-//   </svg>
-// );
-
-// const FaUserAlt = () => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     className="size-[20px]"
-//     viewBox="0 0 20 20"
-//     fill="currentColor"
-//   >
-//     <path
-//       fillRule="evenodd"
-//       // eslint-disable-next-line max-len
-//       d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
-//       clipRule="evenodd"
-//     />
-//   </svg>
-// );
-
-// const BiSearch = ({ className }: { className: string }) => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     className={`size-[20px] ${className}`}
-//     viewBox="0 0 20 20"
-//     fill="currentColor"
-//   >
-//     <path
-//       fillRule="evenodd"
-//       // eslint-disable-next-line max-len
-//       d="M8 15a7 7 0 100-14 7 7 0 000 14zM7 7a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9H6a1 1 0 110-2h1V7z"
-//       clipRule="evenodd"
-//     />
-//   </svg>
-// );
-
-// const HiHome = ({ className }: { className: string }) => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     className={`size-[20px] ${className}`}
-//     viewBox="0 0 20 20"
-//     fill="currentColor"
-//   >
-//     <path
-//       fillRule="evenodd"
-//       // eslint-disable-next-line max-len
-//       d="M10 11.414l4.95 4.95a1 1 0 101.414-1.414L11.414 10l4.95-4.95a1 1 0 10-1.414-1.414L10 8.586 5.05 3.636a1 1 0 00-1.414 1.414L8.586 10l-4.95 4.95a1 1 0 001.414 1.414L10 11.414z"
-//       clipRule="evenodd"
-//     />
-//   </svg>
-// );
-
-// const MusicHeader = ({
-//   children,
-//   className,
-//   session,
-// }: {
-//   children: React.ReactNode;
-//   className: string;
-//   session: {
-//     user: {
-//       name: string;
-//       email: string;
-//       image: string;
-//     };
-//     back: () => void;
-//     forward: () => void;
-//     push: (url: string) => void;
-//   };
-// }) => {
-//   const user = session.user;
-//   // const authModal = useAuthModal();
-//   const handleLogout = async () => {
-//     try {
-//       const response = await fetch("/api/auth/logout", {
-//         method: "POST",
-//         headers: {
-//           "Content-Type": "application/json",
-//         },
-//       });
-//       if (response.ok) {
-//         // Handle the response or navigation on success
-//         console.log("Success:", response);
-//       } else {
-//         throw new Error(`HTTP error: ${response.status}`);
-//       }
-//     } catch (error) {
-//       console.error("Error during fetch:", error);
-//     }
-//   };
-//   return (
-//     <div
-//       className={
-//         className
-//           ? `${className} flex h-full flex-col justify-between`
-//           : "flex h-full flex-col justify-between"
-//       }
-//     >
-// <div className="mb-4 flex w-full items-center justify-between">
-//   <div className="hidden items-center gap-x-2 md:flex">
-//     <Button
-//       onClick={() => session.back()}
-//       className="
-//         flex
-//         cursor-pointer
-//         items-center
-//         justify-center
-//         rounded-full
-//         bg-black
-//         transition
-//         hover:opacity-75
-//       "
-//     >
-//       <RxCaretLeft className="w-30 text-white" />
-//     </Button>
-//     <Button
-//       onClick={() => session.forward()}
-//       className="
-//         flex
-//         cursor-pointer
-//         items-center
-//         justify-center
-//         rounded-full
-//         bg-black
-//         transition
-//         hover:opacity-75
-//       "
-//     >
-//       <RxCaretRight className="w-30 text-white" />
-//     </Button>
-//   </div>
-//   <div className="flex items-center gap-x-2 md:hidden">
-//     <Button
-//       onClick={() => session.push("/")}
-//       className="
-//         flex
-//         cursor-pointer
-//         items-center
-//         justify-center
-//         rounded-full
-//         bg-white
-//         p-2
-//         transition
-//         hover:opacity-75
-//       "
-//     >
-//       <HiHome className="w-20 text-black" />
-//     </Button>
-//     <Button
-//       onClick={() => session.push("/search")}
-//       className="
-//         flex
-//         cursor-pointer
-//         items-center
-//         justify-center
-//         rounded-full
-//         bg-white
-//         p-2
-//         transition
-//         hover:opacity-75
-//       "
-//     >
-//       <BiSearch className="text-black" />
-//     </Button>
-//   </div>
-//   <div className="flex items-center justify-between gap-x-4">
-//     {user ? (
-//       <div className="flex items-center gap-x-4">
-//         <Button onClick={handleLogout} className="bg-white px-6 py-2">
-//           Logout
-//         </Button>
-//         <Button
-//           onClick={() => session.push("/account")}
-//           className="bg-white"
-//         >
-//           <FaUserAlt />
-//         </Button>
-//       </div>
-//     ) : (
-//       <>
-//         <Button
-//           // onClick={authModal.openAuthModal}
-//           className="
-//               bg-transparent
-//               font-medium
-//               text-neutral-300
-//             "
-//         >
-//           Sign up
-//         </Button>
-
-//         <Button
-//           // onClick={authModal.openAuthModal}
-
-//           className="bg-white px-6 py-2"
-//         >
-//           Log in
-//         </Button>
-//       </>
-//     )}
-//   </div>
-// </div>
-// {children}
-//     </div>
-//   );
-// };
-
-// export default MusicHeader;