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

package/dist/ui/text/Article.tsx

@@ -1,141 +0,0 @@
-import React from "react";
-import { Image } from "../images";
-import { Field } from "../shells";
-import Heading from "./Heading.js";
-import Time from "./Time.js";
-
-interface BlogPost {
-  id: number;
-  author: {
-    name: string;
-    image: string;
-  };
-  image: string;
-  date: string;
-  datetime: string;
-  title: string;
-  href: string;
-}
-
-interface ArticleProps {
-  children?: React.ReactNode;
-  className?: string;
-  title?: string;
-  content: BlogPost;
-}
-
-const Article: React.FC<ArticleProps> = ({ content }) => {
-  const Link = ({
-    children,
-    href = "/",
-  }: {
-    children: React.ReactNode;
-    href: string;
-  }) => (
-    <a href={href} className="text-scrapWhite dark:text-scrapYellow">
-      {children}
-    </a>
-  );
-  return (
-    <div className="bg-scrapWhite/20 dark:bg-scrapWhite/20 relative isolate flex flex-col justify-end overflow-hidden rounded-2xl px-8 pb-8 pt-48 lg:pt-80">
-      <Image
-        src={content.image}
-        alt=""
-        className="absolute inset-0 -z-10 size-full object-cover"
-      />
-      <Field className="from-scrapOrange/10 via-scrapWhite/40 absolute inset-0 -z-10 bg-gradient-to-t" />
-      <Field className="ring-scrapBlack/10 dark:ring-scrapWhite/40 absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset " />
-
-      <Time
-        item={{ dateTime: content.datetime, date: content.date }}
-        className="mr-8"
-      >
-        <Heading
-          id="article-title"
-          as="h3"
-          className="text-scrapWhite dark:text-scrapOrange mt-3 text-lg font-semibold leading-6"
-        >
-          <Link href={content.href}>{content.title}</Link>
-        </Heading>
-      </Time>
-    </div>
-  );
-};
-
-export default Article;
-
-// import React from "react";
-// import { Image } from "../images";
-// import Heading from "./Heading";
-// import Paragraph from "./Paragraph";
-// import { Field } from "../shells";
-
-// // Types for the content of the article
-// type ArticleSection = {
-//   type: "paragraph" | "heading" | "image";
-//   content: string; // For 'image', this would be the src URL
-//   className?: string;
-// };
-
-// interface ArticleProps {
-//   children?: React.ReactNode;
-//   title: string;
-//   content: ArticleSection[];
-//   className?: string;
-// }
-
-// const Article: React.FC<ArticleProps> = ({
-//   title,
-//   content,
-//   className = "",
-// }) => {
-//   // Function to render each section of the article based on its type
-//   const renderSection = (section: ArticleSection, index: number) => {
-//     switch (section.type) {
-//       case "paragraph":
-//         return (
-//           <Paragraph
-//             key={index}
-//             className={`prose-p font-normal ${section.className}`}
-//           >
-//             {section.content}
-//           </Paragraph>
-//         );
-//       case "heading":
-//         return (
-//           <Heading
-//             id=""
-//             as={"h2"}
-//             key={index}
-//             className={`prose-h2 font-bold ${section.className}`}
-//           >
-//             {section.content}
-//           </Heading>
-//         );
-//       case "image":
-//         return (
-//           <Image
-//             key={index}
-//             src={section.content}
-//             alt=""
-//             className={section.className}
-//           />
-//         );
-//       default:
-//         return null;
-//     }
-//   };
-
-//   return (
-//     <Field>
-//       <article className={`prose max-w-none ${className}`}>
-//         <Heading id="" as={"h1"} className="prose-h1 mb-4 font-bold">
-//           {title}
-//         </Heading>
-//         {content.map(renderSection)}
-//       </article>
-//     </Field>
-//   );
-// };
-
-// export default Article;

package/dist/ui/text/Currency.tsx

@@ -1,29 +0,0 @@
-// eslint-disable-next-line prettier/prettier
-
-import { useEffect, useState } from "react";
-import { Paragraph } from "./index.js";
-import React from "react";
-
-const Currency = ({ value = 0 }: { value: number }) => {
-  const [isMounted, setIsMounted] = useState(false);
-  const formatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-  });
-  const formatCurrency = formatter.format(Number(value));
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) {
-    return null;
-  }
-
-  return (
-    <Paragraph className="text-scrapBlack text-2xl font-semibold">
-      {formatCurrency}
-    </Paragraph>
-  );
-};
-
-export default Currency;

package/dist/ui/text/Heading.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-const Heading: React.FC<{
-  id: string;
-  children: React.ReactNode;
-  className?: string;
-  variant?: string;
-  as?: React.ElementType;
-  aria?: Record<string, string>;
-}> = ({ children, className = "", variant = "h1", as, ...rest }) => {
-  const HeadingTag = as || variant;
-
-  return (
-    <div className="relative mx-auto w-auto p-1">
-      <HeadingTag className={`prose-headings font-bold ${className}`} {...rest}>
-        {React.Children.toArray(children).map((letter, index) => (
-          <span
-            key={index}
-            className={`prose-span shadow-outline font-normal ${className}`}
-          >
-            {letter}
-          </span>
-        ))}
-      </HeadingTag>
-    </div>
-  );
-};
-
-export default Heading;

package/dist/ui/text/Label.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import Span from "./Span.js";
-
-const Label: React.FC<{
-  children: React.ReactNode;
-  className?: string;
-  as?: React.ElementType;
-  aria?: Record<string, string>;
-}> = ({ children, className = "", as: Component = "div", aria = {} }) => {
-  return (
-    <Component
-      className={`flex max-w-2xl flex-row p-3 text-center lg:max-w-7xl lg:p-1 `}
-      {...aria}
-    >
-      <Span
-        className={`bg-scrapBlack text-scrapWhite rounded-md pb-2 pl-4 pr-2 pt-0 text-2xl font-bold tracking-widest lg:text-3xl ${className}`}
-      >
-        {children}
-      </Span>
-    </Component>
-  );
-};
-
-export default Label;

package/dist/ui/text/Motto.tsx

@@ -1,40 +0,0 @@
-import React, { FC } from "react";
-import { GridContainer } from "../shells";
-import Heading from "./Heading.js";
-import Span from "./Span.js";
-
-const Motto: FC<{
-  children?: React.ReactNode;
-  index?: number;
-  className?: string;
-  ariaLabel?: string;
-}> = ({
-  index = 0,
-  className = "",
-  ariaLabel = "Motto",
-  children,
-  ...rest
-}) => {
-  return (
-    <GridContainer
-      index={index}
-      className={`${className}`}
-      aria-label={ariaLabel}
-      {...rest}
-    >
-      <Heading
-        as="h2"
-        className="prose-h2 from-scrapYellow to-scrapOrange mx-auto aspect-auto w-full bg-gradient-to-b bg-clip-text p-2 text-9xl font-semibold uppercase text-transparent brightness-125 lg:text-9xl lg:font-extrabold"
-        id={""}
-      >
-        Guns Down
-      </Heading>
-      <Span className="prose-h1 from-scrapOrange to-scrapYellow lg:text-10xl mx-auto aspect-auto w-full bg-gradient-to-t bg-clip-text p-3 text-9xl font-semibold uppercase text-transparent brightness-125 lg:font-extrabold">
-        Gloves Up!
-      </Span>
-      {children}
-    </GridContainer>
-  );
-};
-
-export default Motto;

package/dist/ui/text/Paragraph.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-const Paragraph: React.FC<{
-  children: React.ReactNode;
-  className?: string;
-}> = ({ children, className = "" }) => {
-  return (
-    <div className="relative">
-      <p className={`prose-p font-normal ${className}`}>
-        {React.Children.toArray(children).map((letter, index) => (
-          <span key={index} className="prose-base shadow-outline font-normal">
-            {letter}
-          </span>
-        ))}
-      </p>
-    </div>
-  );
-};
-
-export default Paragraph;

package/dist/ui/text/Span.tsx

@@ -1,20 +0,0 @@
-import React, { FC } from "react";
-
-const Span: FC<{
-  className?: string;
-  children?: React.ReactNode;
-}> = ({ children, className = "", ...rest }) => {
-  return (
-    <div className="relative">
-      <span className={`prose-black font-bold ${className}`} {...rest}>
-        {Array.from(String(children)).map((letter, index) => (
-          <span key={index} className="prose-black shadow-outline font-normal">
-            {letter}
-          </span>
-        ))}
-      </span>
-    </div>
-  );
-};
-
-export default Span;

package/dist/ui/text/TagLine.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Field, FlexContainer } from "../shells";
-
-const TagLine = ({
-  className,
-  children,
-}: {
-  className: string;
-  children: React.ReactNode;
-}) => {
-  return (
-    <FlexContainer className={` flex items-center ${className || ""}`}>
-      <Field className="text-scrapWhite dark:text-scrapOrange mx-3 ">
-        {children}
-      </Field>
-    </FlexContainer>
-  );
-};
-
-export default TagLine;

package/dist/ui/text/Time.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { Field } from "../shells";
-import { Circle, SVG } from "../images";
-
-const Time: React.FC<{
-  children?: React.ReactNode;
-  item: {
-    dateTime: string;
-    date: string;
-  };
-  className?: string;
-}> = ({ item, className }) => {
-  return (
-    <Field className="relative py-0 pl-3 pr-0">
-      <time
-        dateTime={item.dateTime}
-        className="prose-lg text-scrapOrange dark:text-scrapRed flex items-center text-lg font-semibold leading-7 tracking-widest lg:text-3xl"
-      >
-        <SVG
-          viewBox="0 0 4 4"
-          className="mr-5 size-1 flex-none"
-          aria-hidden="true"
-        >
-          <Circle cx={2} cy={2} r={2} fill="currentColor" />
-        </SVG>
-        {item.date}
-        <Field
-          className={`absolute -ml-10 h-px w-screen -translate-x-full bg-transparent sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0 ${className}`}
-          aria-hidden="true"
-        />
-      </time>
-    </Field>
-  );
-};
-
-export default Time;

package/dist/ui/text/WelcomeHeading.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { Field, GridContainer } from "../shells";
-import Heading from "./Heading.js";
-import Span from "./Span.js";
-const WelcomeHeading = () => {
-  return (
-    <GridContainer
-      className="relative z-50 mx-auto size-full grid-cols-1 grid-rows-2 place-content-center p-1 lg:p-20"
-      index={1}
-    >
-      <Field className="relative mx-auto place-content-center">
-        <Heading
-          id="welcome-heading-welcome"
-          as={"h1"}
-          className="prose-h1 z-50 text-center text-6xl font-medium tracking-widest lg:text-9xl"
-        >
-          <Span className="prose-h1 z-50">WELCOME</Span>
-        </Heading>
-        <Heading
-          id="welcome-heading-to-the"
-          as={"h1"}
-          className="prose-h1 z-50 text-center text-5xl font-medium lg:text-7xl"
-        >
-          <Span className="prose-h1 z-50 pt-0 text-center lg:pt-10">
-            TO THE
-          </Span>
-        </Heading>
-        <Heading
-          id="welcome-heading-scrapyard"
-          as={"h1"}
-          className="prose-h1 z-50 text-center text-6xl font-medium lg:text-9xl"
-        >
-          <Span className="prose-h1 z-50 pb-10">SCRAPYARD</Span>
-        </Heading>
-      </Field>
-    </GridContainer>
-  );
-};
-
-export default WelcomeHeading;

package/dist/ui/text/index.ts

@@ -1,10 +0,0 @@
-export { default as Article } from "./Article.js";
-export { default as Currency } from "./Currency.js";
-export { default as Heading } from "./Heading.js";
-export { default as Label } from "./Label.js";
-export { default as Motto } from "./Motto.js";
-export { default as Paragraph } from "./Paragraph.js";
-export { default as Span } from "./Span.js";
-export { default as TagLine } from "./TagLine.js";
-export { default as Time } from "./Time.js";
-export { default as WelcomeHeading } from "./WelcomeHeading.js";

package/dist/ui/video/VideoComponent.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-interface VideoComponentProps {
-  url: string;
-}
-
-const VideoComponent: React.FC<VideoComponentProps> = ({ url }) => {
-  return (
-    <video
-      autoPlay
-      muted
-      playsInline
-      loop
-      className="prose-video aspect-video size-full object-cover"
-      aria-label="Responsive video content"
-    >
-      <source src={url} type="video/mp4" />
-      <p>Your browser does not support the video tag.</p>
-    </video>
-  );
-};
-
-export default VideoComponent;

package/dist/ui/video/VideoDetail.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-const VideoDetail: React.FC<{
-  video: {
-    id: {
-      videoId: string;
-    };
-    snippet: {
-      title: string;
-      description: string;
-    };
-  };
-}> = ({ video }) => {
-  if (!video) {
-    return <div>Loading Videos...</div>;
-  }
-
-  const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;
-
-  return (
-    <div>
-      <div className="flex">
-        <iframe title="prose-video video player" src={videoSrc} />
-      </div>
-      <div className="flex">
-        <h2 className="prose-h2 text-xl">{video.snippet.title}</h2>
-        <p className="prose-p">{video.snippet.description}</p>
-      </div>
-    </div>
-  );
-};
-
-export default VideoDetail;

package/dist/ui/video/VideoItem.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import Image from "../images/Image";
-
-const VideoItem: React.FC<{
-  video: {
-    id: {
-      videoId: string;
-    };
-    snippet: {
-      title: string;
-      description: string;
-      thumbnails: {
-        medium: {
-          url: string;
-        };
-      };
-      channelTitle: string;
-    };
-  };
-  onVideoSelect: (video: {
-    id: {
-      videoId: string;
-    };
-    snippet: {
-      title: string;
-      description: string;
-    };
-  }) => void;
-}> = ({ video, onVideoSelect }) => {
-  const { snippet } = video;
-
-  return (
-    <button
-      onClick={() => onVideoSelect(video)}
-      className="flex w-full cursor-pointer items-start gap-2 p-2 transition hover:bg-gray-100"
-      aria-label={`Select video: ${snippet.title}`}
-    >
-      <Image
-        src={snippet.thumbnails.medium.url}
-        alt={snippet.title}
-        className="object-cover"
-      />
-      <div className="flex flex-col justify-center">
-        <h3 className="text-sm font-medium text-gray-700">{snippet.title}</h3>
-        <p className="text-xs text-gray-500">{snippet.channelTitle}</p>
-      </div>
-    </button>
-  );
-};
-
-export default VideoItem;

package/dist/ui/video/VideoList.tsx

@@ -1,155 +0,0 @@
-import React from "react";
-import VideoItem from "./VideoItem";
-
-type VideoListProps = {
-  videos: {
-    id: {
-      videoId: string;
-    };
-    snippet: {
-      title: string;
-      description: string;
-      thumbnails: {
-        medium: {
-          url: string;
-        };
-      };
-      channelTitle: string;
-    };
-  }[];
-  onVideoSelect: (video: {
-    id: {
-      videoId: string;
-    };
-    snippet: {
-      title: string;
-      description: string;
-      thumbnails: {
-        medium: {
-          url: string;
-        };
-      };
-      channelTitle: string;
-    };
-  }) => void;
-};
-
-const VideoList: React.FC<VideoListProps> = ({ videos, onVideoSelect }) => {
-  // Check if videos array is not null or undefined and has length
-  if (!videos || videos.length === 0) {
-    return <div className="mx-auto text-center">No videos available.</div>;
-  }
-
-  const renderedList = videos.map((video) => (
-    <VideoItem
-      key={video.id.videoId}
-      onVideoSelect={() => onVideoSelect(video)} // Ensure video is passed correctly
-      video={video}
-    />
-  ));
-
-  return <div className="mx-auto">{renderedList}</div>;
-};
-
-export default VideoList;
-
-// import React from "react"
-// import VideoItem from "./VideoItem.js"
-
-// type VideoListProps = {
-//   videos: {
-//     id: {
-//       videoId: string
-//     }
-//     snippet: {
-//       title: string
-//       description: string
-//       thumbnails: {
-//         medium: {
-//           url: string
-//         }
-//       }
-//       channelTitle: string
-//     }
-//   }[]
-//   onVideoSelect: (video: {
-//     id: {
-//       videoId: string
-//     }
-//     snippet: {
-//       title: string
-//       description: string
-//     }
-//   }) => void
-// }
-// const VideoList: React.FC<VideoListProps> = ({ videos, onVideoSelect }) => {
-//   // Check if videos array is not null or undefined and has length
-//   if (!videos || videos.length === 0) {
-//     return <div className="mx-auto text-center">No videos available.</div>
-//   }
-
-//   // const renderVideo = videos?.map((video, index) => (
-//   //   <Field key={index} className="inset-0 flex items-center justify-center">
-//   //     <VideoComponent url={video.url} />
-//   //   </Field>
-//   // ));
-//   const renderedList = videos?.map((video) => (
-//     <VideoItem
-//       key={video.id.videoId}
-//       onVideoSelect={() => onVideoSelect}
-//       video={video}
-//     />
-//   ))
-
-//   return <div className="mx-auto">{renderedList}</div>
-// }
-
-// export default VideoList
-
-// import React from "react";
-// import VideoItem from "../video/VideoItem";
-
-// /**
-//  * VideoList - Renders a list of video items.
-//  *
-//  * #param {Object[]} videos - Array of video objects to display.
-//  * #param {Function} onVideoSelect - Callback function when a video is selected.
-//  * #returns {React.ReactElement} The rendered list of videos.
-//  */
-// const VideoList = ({ videos, onVideoSelect }) => {
-//   // Check if videos array is not null or undefined and has length
-//   if (!videos || videos.length === 0) {
-//     return <div className="mx-auto text-center">No videos available.</div>;
-//   }
-
-//   const renderedList = videos.map((video) => (
-//     <VideoItem
-//       key={video.id.videoId}
-//       onVideoSelect={onVideoSelect}
-//       video={video}
-//     />
-//   ));
-
-//   return <div className="mx-auto">{renderedList}</div>;
-// };
-
-// export default VideoList;
-
-// import React from "react";
-// import VideoItem from "../video/VideoItem";
-
-// const VideoList = ({ videos, onVideoSelect }) => {
-//   const renderedList = videos.map((video) => {
-//     return (
-//       <VideoItem
-//         key={video.id.videoId}
-//         onVideoSelect={onVideoSelect}
-//         video={video}
-//       />
-//     );
-//   });
-
-//   return <div className="mx-auto ">{renderedList}</div>;
-// };
-
-// export default VideoList;

package/dist/ui/video/index.ts

@@ -1,4 +0,0 @@
-export { default as VideoComponent } from "./VideoComponent.js";
-export { default as VideoDetail } from "./VideoDetail.js";
-export { default as VideoItem } from "./VideoItem.js";
-export { default as VideoList } from "./VideoList.js";