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

package/dist/ui/images/Rect.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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