@revealui/core 0.0.1-pre.0

package/dist/ui/text/Article.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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