@revealui/core 0.0.1-pre.0

package/dist/ui/images/Rect.tsx

@@ -0,0 +1,10 @@
+import React, { SVGProps } from "react";
+
+// Extending SVGProps for type safety and IntelliSense in VSCode or other IDEs
+interface RectProps extends SVGProps<SVGRectElement> {}
+
+const Rect: React.FC<RectProps> = (props) => {
+  return <rect {...props} />;
+};
+
+export default Rect;

package/dist/ui/images/SVG.tsx

@@ -0,0 +1,58 @@
+import React, { SVGProps } from "react";
+import Defs from "./Defs.js";
+import Path from "./Path.js";
+import Pattern from "./Pattern.js";
+
+const SVG: React.FC<SVGProps<SVGSVGElement>> = ({
+  viewBox,
+  className = "",
+  children,
+  ...rest
+}) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      aria-hidden="true"
+      className={`absolute ${className}`}
+      {...rest}
+    >
+      <Defs>
+        <Pattern
+          id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
+          width={200}
+          height={200}
+          x="50%"
+          y={-1}
+          patternUnits="userSpaceOnUse"
+        >
+          <Path d="M.5 200V.5H200" fill="none" strokeWidth={1} />
+        </Pattern>
+      </Defs>
+      {children}
+    </svg>
+  );
+};
+
+export default SVG;
+
+// import React, { SVGProps } from "react";
+
+// const SVG: React.FC<SVGProps<SVGSVGElement>> = ({
+//   viewBox,
+//   className = "",
+//   children,
+//   ...rest
+// }) => {
+//   return (
+//     <svg
+//       viewBox={viewBox}
+//       aria-hidden="true"
+//       className={`absolute ${className}`}
+//       {...rest}
+//     >
+//       {children}
+//     </svg>
+//   );
+// };
+// a
+// export default SVG;

package/dist/ui/images/Stop.tsx

@@ -0,0 +1,15 @@
+import React, { SVGProps } from "react";
+
+// Assuming this is your custom Path component
+interface StopProps extends SVGProps<SVGStopElement> {
+  offSet?: string;
+  stopColor?: string;
+  strokeWidth?: number;
+  fill?: string;
+}
+
+const Stop: React.FC<StopProps> = (props) => {
+  return <stop stopColor={props.stopColor} offset={props.offSet} {...props} />;
+};
+
+export default Stop;

package/dist/ui/images/index.tsx

@@ -0,0 +1,12 @@
+export { default as Carousel } from "./Carousel.js";
+export { default as Circle } from "./Circle.js";
+export { default as Defs } from "./Defs.js";
+export { default as Image } from "./Image.js";
+export { default as ImageGrid } from "./ImageGrid.js";
+export { default as Logo } from "./Logo.js";
+export { default as Path } from "./Path.js";
+export { default as Pattern } from "./Pattern.js";
+export { default as PromoBanner } from "./PromoBanner.js";
+export { default as Rect } from "./Rect.js";
+export { default as Stop } from "./Stop.js";
+export { default as SVG } from "./SVG.js";

package/dist/ui/layouts/classNames.ts

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { type ClassValue } from "clsx";
+
+// Utility to merge class names using clsx and tailwind-merge
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(...inputs));
+}

package/dist/ui/layouts/container.ts

@@ -0,0 +1,20 @@
+export function getContainerColClasses(index: number): string {
+  return `flex flex-col justify-center items-center lg:flex-row ${
+    index % 2 === 0 ? "order-1" : "order-2"
+  }`;
+}
+
+export function getContainerRowClasses(index: number): string {
+  return `lg:col-span-6 ${
+    index % 2 === 0 ? "lg:col-start-7" : "lg:col-start-1"
+  }`;
+}
+
+export function getContainerClasses(
+  index: number,
+  isSmallScreen: boolean,
+): string {
+  return isSmallScreen
+    ? "flex flex-col items-center justify-center"
+    : "flex flex-row items-center justify-center";
+}

package/dist/ui/layouts/flex.ts

@@ -0,0 +1,13 @@
+export function getFlexColClasses(index: number): string {
+  return index % 2 === 0 ? "order-1" : "order-2";
+}
+
+export function getFlexRowClasses(index: number): string {
+  return index % 2 === 0 ? "lg:col-span-5" : "lg:col-span-7";
+}
+
+export function getFlexClasses(index: number, isSmallScreen: boolean): string {
+  return isSmallScreen
+    ? "flex flex-col items-center justify-center"
+    : "flex flex-row items-center justify-center";
+}

package/dist/ui/layouts/grid.ts

@@ -0,0 +1,11 @@
+export function getGridColClasses(index: number): string {
+  return index % 2 === 0 ? "lg:col-span-5" : "lg:col-span-7";
+}
+
+export function getGridRowClasses(index: number): string {
+  return index % 2 === 0 ? "lg:col-span-7" : "lg:col-span-5";
+}
+
+export function getGridClasses(index: number, isSmallScreen: boolean): string {
+  return isSmallScreen ? "grid grid-cols-1 gap-4" : "grid grid-cols-2 gap-4";
+}

package/dist/ui/layouts/main.ts

@@ -0,0 +1,31 @@
+// utils/getLayoutClasses.ts
+
+interface LayoutOptions {
+  items?: string; // alignment options for items
+  justify?: string; // alignment options for justify-content
+}
+
+const getLayoutClasses = (
+  index: number,
+  defaultLayout: string = "flex",
+  isMobileOrTablet: boolean,
+  options?: LayoutOptions,
+): string => {
+  // You can define your logic to determine the layout type here.
+  // This is an example logic that changes the layout based on index and screen size.
+
+  // For mobile or tablet, we might always want to use "stack" layout
+  if (isMobileOrTablet) {
+    return "stack";
+  }
+
+  // For large screen sizes or desktop, we can return based on the index
+  // Example: Use "grid" layout for even indexes, and "flex" for odd ones
+  if (index % 2 === 0) {
+    return "grid";
+  } else {
+    return defaultLayout;
+  }
+};
+
+export default getLayoutClasses;

package/dist/ui/layouts/responsive.ts

@@ -0,0 +1,28 @@
+export function mapBreakpointsToClasses(
+  bp: string,
+  settings: Record<string, string | number | boolean | undefined>,
+): string {
+  const propMappings: { [key: string]: string } = {
+    columns: `grid-cols-${settings}`,
+    rows: `grid-rows-${settings}`,
+    gap: `gap-${settings}`,
+    gapX: `gap-x-${settings}`,
+    gapY: `gap-y-${settings}`,
+    // Add more mappings as needed
+  };
+
+  return Object.entries(settings)
+    .map(([prop, value]) =>
+      value && propMappings[prop] ? `${bp}:${propMappings[prop]}` : "",
+    )
+    .filter(Boolean)
+    .join(" ");
+}
+
+export function generateResponsiveClasses(
+  breakpoints: Record<string, Record<string, string | number | boolean>>,
+): string {
+  return Object.entries(breakpoints)
+    .map(([bp, settings]) => mapBreakpointsToClasses(bp, settings))
+    .join(" ");
+}

package/dist/ui/layouts/stack.ts

@@ -0,0 +1,24 @@
+// layouts/stack.ts
+
+// This function returns the container classes for the stack layout
+export const getStackClasses = (index: number, isMobileOrTablet: boolean) => {
+  const baseClass = "flex flex-col";
+  // Add any custom classes based on the index or screen size
+  const mobileClass = isMobileOrTablet ? "space-y-4" : "space-y-6";
+
+  return `${baseClass} ${mobileClass}`;
+};
+
+// This function returns the row classes for the stack layout
+export const getStackRowClasses = (index: number) => {
+  // Stack rows typically take full width for each item
+  const baseClass = "w-full";
+  return baseClass;
+};
+
+// This function returns the column classes for the stack layout
+export const getStackColClasses = (index: number) => {
+  // Stack columns are block-level elements in a vertical layout
+  const baseClass = "w-full block";
+  return baseClass;
+};

package/dist/ui/lists/DescriptionList.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Field, GridContainer } from "../shells";
+import List from "./List.js";
+import { Dd, Dt } from "./ListElements.js";
+
+interface DescriptionItem {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface DescriptionListProps {
+  id: string;
+  name?: string;
+  description?: string;
+  className?: string;
+  items?: DescriptionItem[];
+  children?: React.ReactNode;
+}
+
+const DescriptionList: React.FC<DescriptionListProps> = ({
+  items,
+  className,
+}) => (
+  <List type="dl" className={`size-full ${className}`}>
+    <GridContainer className="size-full grid-cols-1 grid-rows-2 place-content-center items-center justify-center gap-10 lg:grid-cols-2 lg:justify-center ">
+      {items?.map((item) => (
+        <Field key={item.id}>
+          <Dt className="text-scrapYellow dark:text-scrapOrange font-playregular mx-auto my-5 text-center text-3xl font-semibold leading-6 lg:text-4xl ">
+            {item.name}
+          </Dt>
+          <Dd className=" text-scrapWhite dark:text-scrapGreen mx-auto text-center text-xl font-medium lg:text-xl">
+            {item.description}
+          </Dd>
+        </Field>
+      ))}
+    </GridContainer>
+  </List>
+);
+
+export default DescriptionList;

package/dist/ui/lists/DisclosurePanel.tsx

@@ -0,0 +1,20 @@
+import React, { type ElementType, type FC } from "react";
+
+const DisclosurePanel: FC<{
+  as?: ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement, HTMLAnchorElement>,
+  ) => void;
+}> = ({ as: Component = "div", children, className, onClick }) => {
+  const open = true;
+
+  return open ? (
+    <Component onClick={onClick} className={className}>
+      {children}
+    </Component>
+  ) : null;
+};
+
+export default DisclosurePanel;

package/dist/ui/lists/JobOpeningsList.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Image } from "../images";
+import { Field, FlexContainer, GridContainer } from "../shells";
+import Heading from "../text/Heading";
+import Paragraph from "../text/Paragraph";
+import UList from "./UList.js";
+
+const JobOpeningsList: React.FC<{
+  jobOpenings: {
+    id: string;
+    role: string;
+    description: string;
+    salary: string;
+    location: string;
+  }[];
+}> = ({ jobOpenings }) => {
+  const jobOpeningElements = jobOpenings.map((opening) => (
+    <GridContainer
+      key={opening.id}
+      className="mx-auto max-w-screen-md grid-cols-1 gap-x-8 gap-y-3 p-3 lg:max-w-screen-lg lg:grid-cols-2"
+    >
+      <FlexContainer className="flex flex-col">
+        <Field className="relative">
+          <Heading
+            id="job-opening-heading"
+            as="h3"
+            className="text-scrapOrange mt-5 p-1 text-2xl font-bold leading-7 tracking-widest lg:text-4xl"
+          >
+            {opening.role}
+          </Heading>
+          <Paragraph className="text-scrapWhite dark:text-scrapGreen p-1 text-base font-normal leading-7">
+            {opening.description}
+          </Paragraph>
+          <Paragraph className="text-scrapRed leading-7 tracking-widest">
+            {opening.salary}
+          </Paragraph>
+          <Paragraph className="text-scrapYellow p-1 leading-7 tracking-widest">
+            {opening.location}
+          </Paragraph>
+        </Field>
+      </FlexContainer>
+      <Field className="relative">
+        <Image
+          src="https://res.cloudinary.com/dpytkhyme/image/upload/v1691668055/STREETBEEFS%20SCRAPYARD/website%20new/Logos/1681755019191_dze5sa.png"
+          alt=""
+        />
+      </Field>
+    </GridContainer>
+  ));
+
+  return <UList items={jobOpeningElements} type={"ul"} />;
+};
+
+export default JobOpeningsList;

package/dist/ui/lists/List.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Ol, Ul } from "./index.js";
+
+interface ListProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+interface GenericListProps extends ListProps {
+  type: "ul" | "ol" | "dl";
+}
+
+const List: React.FC<GenericListProps> = ({ type, children, className }) => {
+  const Component = type === "ul" ? Ul : Ol;
+  return <Component className={className}>{children}</Component>;
+};
+
+export default List;

package/dist/ui/lists/ListElements.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+export const Ul: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = "" }) => (
+  <ul className={className}>{children}</ul>
+);
+
+export const Li: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = "" }) => (
+  <li className={className}>{children}</li>
+);
+
+export const Ol: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = "" }) => (
+  <ol className={className}>{children}</ol>
+);
+
+export const Dl: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = "" }) => (
+  <dl className={className}>{children}</dl>
+);
+
+export const Dt: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = "" }) => (
+  <dt className={className}>{children}</dt>
+);
+
+export const Dd: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = "" }) => (
+  <dd className={className}>{children}</dd>
+);

package/dist/ui/lists/ListItem.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Button from "../buttons/Button";
+import Image from "../images/Image";
+import { Field } from "../shells";
+import { Paragraph } from "../text";
+import { Path, SVG } from "../images";
+
+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 ListItem: React.FC<{
+  image: string;
+  name: string;
+  href: string;
+  user: string;
+}> = ({ image, name, href, user }) => {
+  const openAuthModal = () => {
+    const modal = document.getElementById("auth-modal");
+    modal?.classList.add("visible");
+    modal?.classList.remove("invisible");
+  };
+
+  const onClick = async () => {
+    if (!user) {
+      openAuthModal();
+    } else {
+      // Navigate or perform the desired action for authenticated users.
+      window.location.href = href; // Or use routing method for SPAs
+    }
+  };
+
+  return (
+    <Button
+      onClick={onClick}
+      className="bg-scrapWhite/10 hover:bg-scrapWhite/20 group relative flex cursor-pointer items-center gap-x-4 rounded-md transition"
+    >
+      <Field className="relative">
+        <Image className="object-cover" src={image} alt={name} />
+      </Field>
+      <Paragraph className="truncate py-5 font-medium">{name}</Paragraph>
+      <Field className="bg-scrapRed absolute right-5 flex items-center justify-center rounded-full opacity-0 drop-shadow-md transition hover:scale-110 group-hover:opacity-100">
+        <FaPlay className="size-20" />
+      </Field>
+    </Button>
+  );
+};
+
+export default ListItem;

package/dist/ui/lists/ProductList.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import ProductCard from "../cards/ProductCard";
+import NoResults from "../notifications/NoResults";
+
+const ProductList: React.FC<{ title: string; items: string[] }> = ({
+  title,
+  items,
+}) => {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-3xl font-bold">{title}</h2>
+      {items.length === 0 && <NoResults />}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <ProductCard
+            key={item}
+            data={{
+              id: item,
+              name: item,
+              price: 0,
+              category: {
+                name: "category",
+              },
+              images: [
+                {
+                  url: "https://res.cloudinary.com/dpytkhyme/image/upload/v1683938638/STREETBEEFS%20SCRAPYARD/315324319_501232111949412_1610211327794455698_n_lg8xqk.png",
+                },
+              ],
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProductList;

package/dist/ui/lists/StatsList.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import DescriptionList from "./DescriptionList.js";
+
+interface Stat {
+  id: number;
+  label: string;
+  value: string;
+}
+
+interface DescriptionItem {
+  id: number;
+  name: string;
+  description: string;
+}
+
+interface StatsListProps {
+  stats?: Stat[];
+  items?: DescriptionItem[];
+  className?: string;
+}
+
+const StatsList: React.FC<StatsListProps> = ({ stats, className }) => {
+  const items = stats?.map((stat) => ({
+    id: `stat-${stat.label}`,
+    name: stat.label,
+    description: stat.value,
+  }));
+
+  return (
+    <DescriptionList items={items} className={className} id={"stats-list"} />
+  );
+};
+
+export default StatsList;
+// import React from "react";
+// import Field from "../shells/Field";
+// import GridContainer from "../shells/Grid";
+
+// const StatsList: React.FC<{
+//   stats: {
+//     label: string;
+//     value: string;
+//   }[];
+// }> = ({ stats }) => {
+//   return (
+//     <GridContainer
+//       className="grid-cols-2 grid-rows-2 items-center justify-start gap-5 p-5"
+//       index={0}
+//     >
+//       {stats.map((stat, idx) => (
+//         <Field key={idx}>
+//           <dt className="font-playregular text-scrapWhite dark:text-scrapBlack mx-auto text-center text-sm font-semibold leading-6 lg:text-lg">
+//             {stat.label}
+//           </dt>
+//           <dd className="font-playregular text-scrapWhite dark:text-scrapBlack mx-auto text-center text-3xl font-bold leading-10 tracking-tight lg:text-5xl">
+//             {stat.value}
+//           </dd>
+//         </Field>
+//       ))}
+//     </GridContainer>
+//   );
+// };
+
+// export default StatsList;

package/dist/ui/lists/UList.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Image from "../images/Image";
+import { Container } from "../shells";
+import Paragraph from "../text/Paragraph";
+import List from "./List.js";
+import { Li } from "./ListElements.js";
+
+type ItemWithIcon = { name: string; icon: string };
+type UListItem = string | React.ReactNode | ItemWithIcon;
+
+interface UListProps {
+  items?: UListItem[];
+  className?: string;
+  type: "ul" | "ol";
+  children?: React.ReactNode;
+}
+
+function isItemWithIcon(item: UListItem): item is ItemWithIcon {
+  return (
+    typeof item === "object" &&
+    item !== null &&
+    "name" in item &&
+    "icon" in item
+  );
+}
+
+const UList: React.FC<UListProps> = ({ items = [], className, type }) => (
+  <List
+    type={type}
+    className={`text-lg font-medium leading-6 tracking-normal ${className}`}
+  >
+    {items.map((item, index) => (
+      <Li
+        key={
+          typeof item === "object" && item !== null && "name" in item
+            ? item.name
+            : index
+        }
+        className={className}
+      >
+        {isItemWithIcon(item) ? (
+          <Container>
+            <Image width={24} height={24} alt={item.name} src={item.icon} />
+            <Paragraph>{item.name}</Paragraph>
+          </Container>
+        ) : (
+          item
+        )}
+      </Li>
+    ))}
+  </List>
+);
+
+export default UList;

package/dist/ui/lists/index.ts

@@ -0,0 +1,9 @@
+export { default as DescriptionList } from "./DescriptionList.js";
+export { default as DisclosurePanel } from "./DisclosurePanel.js";
+export { default as JobOpeningsList } from "./JobOpeningsList.js";
+export { default as List } from "./List.js";
+export { Dd, Dl, Dt, Li, Ol, Ul } from "./ListElements.js";
+export { default as ListItem } from "./ListItem.js";
+export { default as ProductList } from "./ProductList.js";
+export { default as StatsList } from "./StatsList.js";
+export { default as UList } from "./UList.js";

package/dist/ui/navigation/DesktopMenu.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { Container } from "../shells";
+
+const DesktopMenu = ({ children }: { children: ReactNode }) => {
+  return (
+    <Container className="hidden lg:block ">
+      <Container className="flex items-center justify-center space-x-3 p-1">
+        {children}
+      </Container>
+    </Container>
+  );
+};
+
+export default DesktopMenu;