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

package/dist/ui/shells/Grid.tsx

@@ -1,118 +0,0 @@
-import React, { ForwardedRef, forwardRef, useMemo } from "react";
-
-const GridContainer = forwardRef<
-  HTMLDivElement,
-  {
-    children: React.ReactNode;
-    className?: string;
-    index?: number;
-    layoutType?: string;
-    breakpoints?: Record<string, string>;
-    [key: string]: any;
-  }
->(
-  (
-    {
-      children,
-      className = "",
-      index = 0,
-      layoutType = "grid",
-      breakpoints = {},
-      ...rest
-    },
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const layoutClasses = [`${layoutType}`].filter(Boolean).join(" ").trim();
-
-    const combinedClasses = useMemo(() => {
-      const responsiveClasses = breakpoints && typeof breakpoints === 'object' ? Object.keys(breakpoints).length !== 0 : false;
-
-      return `${layoutClasses} ${responsiveClasses}`.trim();
-    }, [layoutClasses, breakpoints]);
-
-    return (
-      <div
-        ref={ref}
-        tabIndex={typeof index === 'number' ? index : undefined}
-        className={`${combinedClasses} ${className}`}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-GridContainer.displayName = "GridContainer";
-
-export default GridContainer;
-
-// import React, { useMemo, type FC } from "react";
-
-// const GridContainer: FC<{
-//   children: React.ReactNode;
-//   className?: string;
-//   index?: number;
-//   width?: string;
-//   height?: string;
-//   padding?: string;
-//   columns?: string;
-//   rows?: string;
-//   gap?: string;
-//   align?: string;
-//   justify?: string;
-//   layoutType?: string;
-//   customStyles?: string;
-//   breakpoints?: Record<string, string>;
-//   [key: string]: string | number | Record<string, string> | React.ReactNode;
-// }> = ({
-//   children,
-//   className = "",
-//   index = 0,
-//   width = "full",
-//   height = "full",
-//   padding = "0",
-//   columns = "1",
-//   rows = "1",
-//   gap = "0",
-//   align = "center",
-//   justify = "center",
-//   layoutType = "grid",
-//   customStyles = "",
-//   breakpoints = {},
-//   ...rest
-// }) => {
-//   const layoutClasses = [
-//     `w-${width}`,
-//     `h-${height}`,
-//     `p-${padding}`,
-//     `${layoutType}`,
-//     `grid-cols-${columns}`,
-//     `grid-rows-${rows}`,
-//     `gap-${gap}`,
-//     `justify-${justify}`,
-//     `items-${align}`,
-//     customStyles,
-//   ]
-//     .filter(Boolean)
-//     .join(" ")
-//     .trim();
-
-//   const combinedClasses = useMemo(() => {
-//     const responsiveClasses = Object.keys(breakpoints).length !== 0;
-
-//     return `${layoutClasses} ${responsiveClasses}`.trim();
-//   }, [layoutClasses, breakpoints]);
-
-//   return (
-//     <div
-//       tabIndex={index}
-//       className={`${combinedClasses} ${className}`}
-//       {...rest}
-//     >
-//       {children}
-//     </div>
-//   );
-// };
-
-// export default GridContainer;

package/dist/ui/shells/Header.tsx

@@ -1,123 +0,0 @@
-import React, { useMemo } from "react";
-
-type HeaderProps = {
-  children: React.ReactNode;
-  index?: number;
-  className?: string;
-  style?: React.CSSProperties;
-  customStyles?: Record<string, string | number>;
-  color?: string;
-  size?: string;
-  weight?: string;
-  align?: string;
-  margin?: string;
-  as?: React.ElementType;
-  aria?: Record<string, string>;
-  // Adding custom props
-  crosses?: boolean;
-  crossesOffset?: string;
-  customPaddings?: string;
-};
-
-const Header: React.FC<HeaderProps> = ({
-  children,
-  index = 0,
-  className = "",
-  style = {},
-  customStyles = {},
-  color,
-  size,
-  weight,
-  align,
-  margin,
-  as: Component = "header", // Defaulting to 'header' if no 'as' prop is provided
-  aria,
-  crosses,
-  crossesOffset,
-  customPaddings,
-  ...rest
-}) => {
-  // Combine class names from props and custom logic
-  const combinedClasses = useMemo(
-    () => [className].join(" ").trim(),
-    [className],
-  );
-
-  // Extend the style object with custom and inline styles
-  const extendedStyle = useMemo(
-    () => ({
-      ...style,
-      color,
-      fontSize: size,
-      fontWeight: weight,
-      textAlign: align,
-      margin,
-      ...customStyles,
-    }),
-    [style, color, size, weight, align, margin, customStyles],
-  );
-
-  // Prepare custom data attributes and aria attributes
-  const customAttributes = {
-    ...(crosses !== undefined ? { "data-crosses": crosses.toString() } : {}), // Convert boolean to string for DOM
-    ...(crossesOffset ? { "data-crosses-offset": crossesOffset } : {}),
-    ...(customPaddings ? { "data-custom-paddings": customPaddings } : {}),
-    ...Object.entries(aria || {}).reduce(
-      (acc, [key, value]) => ({ ...acc, [`aria-${key}`]: value }),
-      {},
-    ),
-    ...rest,
-  };
-
-  return (
-    <Component
-      tabIndex={index}
-      className={combinedClasses}
-      style={extendedStyle}
-      {...customAttributes}
-    >
-      {children}
-    </Component>
-  );
-};
-
-export default Header;
-
-// /* eslint-disable prefer-const */
-// import React, { useMemo } from "react";
-
-// const Header = ({
-//   children,
-//   index = 0,
-//   className = "",
-//   style = {},
-//   ...rest
-// }: {
-//   children: React.ReactNode;
-//   index?: number;
-//   className?: string;
-//   style?: React.CSSProperties;
-// }) => {
-//   let rowClasses = "";
-//   let colClasses = "";
-//   let containerClasses = "";
-
-//   const combinedClasses = useMemo(() => {
-//     return [rowClasses, colClasses, containerClasses, className]
-//       .join(" ")
-//       .trim();
-//   }, [rowClasses, colClasses, containerClasses, className]);
-
-//   return (
-//     <header
-//       tabIndex={index}
-//       className={combinedClasses}
-//       style={style}
-//       {...rest}
-//     >
-//       {children}
-//     </header>
-//   );
-// };
-
-// export default Header;

package/dist/ui/shells/Main.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-
-type MainProps = {
-  children: React.ReactNode;
-  index?: number;
-  className?: string;
-  style?: React.CSSProperties;
-  customStyles?: Record<string, string | number>;
-  color?: string;
-  size?: string;
-  weight?: string;
-  align?: string;
-  margin?: string;
-  as?: React.ElementType;
-  aria?: Record<string, string>;
-  crosses?: boolean;
-  crossesOffset?: string;
-  customPaddings?: string;
-};
-
-const Main: React.FC<MainProps> = ({
-  children,
-  index = 0,
-  className = "",
-  style = {},
-  customStyles = {},
-  color,
-  size,
-  weight,
-  align,
-  margin,
-  as: Component = "main", // Default to 'main' element
-  aria,
-  crosses,
-  crossesOffset,
-  customPaddings,
-  ...rest
-}) => {
-  // Extend the style object with custom properties
-  const extendedStyle = {
-    ...style,
-    color,
-    fontSize: size,
-    fontWeight: weight,
-    textAlign: align,
-    margin,
-    ...customStyles,
-  };
-
-  // Handle custom props and aria attributes
-  const customProps: Record<string, string> = {
-    ...(crosses !== undefined ? { "data-crosses": crosses.toString() } : {}), // Convert boolean to string
-    ...(crossesOffset ? { "data-crosses-offset": crossesOffset } : {}),
-    ...(customPaddings ? { "data-custom-paddings": customPaddings } : {}),
-    ...Object.entries(aria || {}).reduce(
-      (acc: Record<string, string>, [key, value]) => {
-        acc[`aria-${key}`] = value;
-        return acc;
-      },
-      {},
-    ),
-  };
-
-  return (
-    <Component
-      tabIndex={index}
-      className={className}
-      style={extendedStyle}
-      {...customProps} // Only pass custom props and ARIA attributes that are valid for DOM
-      {...rest} // Pass other props like 'id', etc.
-    >
-      {children}
-    </Component>
-  );
-};
-
-export default Main;
-
-// import React from "react";
-
-// const Main = ({
-//   children,
-//   className = "",
-//   ...props
-// }: {
-//   children: React.ReactNode;
-//   className?: string;
-// }) => {
-//   return (
-//     <main className={className} {...props}>
-//       {children}
-//     </main>
-//   );
-// };
-
-// export default Main;

package/dist/ui/shells/Nav.tsx

@@ -1,138 +0,0 @@
-import type { FC } from "react";
-
-import openFacebook from "../../core/handlers/openFacebook";
-import { MobileMenuButton, SignUpButton } from "../buttons";
-import useDisclosure from "../hooks/useDisclosure";
-import { usePageContext } from "../hooks/usePageContext";
-import { Logo } from "../images";
-import { DesktopMenu, MobileMenu } from "../navigation";
-import NavigationLinks from "../navigation/NavigationLinks";
-import Container from "./Container";
-import Disclosure from "./Disclosure";
-
-const NavShell: FC = () => {
-  const { urlPathname } = usePageContext(); // Access the current path
-  const { open, toggle } = useDisclosure();
-
-  // Debug: urlPathname
-
-  return (
-    <Disclosure as="nav" className="max-w-9xl bg-scrapBlack min-w-max p-3">
-      {() => (
-        <>
-          <Container className="relative flex items-center justify-between">
-            <Logo
-              className="bg-scrapBlack rounded-full bg-blend-color"
-              width="40"
-            />
-            <DesktopMenu>
-              <NavigationLinks current={urlPathname || "/"} /> {/* Pass current prop */}
-            </DesktopMenu>
-            <MobileMenuButton open={open} toggle={toggle} />
-            <Container className="hidden lg:block">
-              <SignUpButton onClick={openFacebook} />
-            </Container>
-          </Container>
-          <MobileMenu open={open}>
-            <NavigationLinks current={urlPathname || "/"} toggle={toggle} /> {/* Pass current prop */}
-            <SignUpButton onClick={openFacebook} />
-          </MobileMenu>
-        </>
-      )}
-    </Disclosure>
-  );
-};
-
-export default NavShell;
-
-// import type { FC } from "react";
-
-// import { MobileMenuButton, SignUpButton } from "../buttons";
-// import useDisclosure from "../hooks/useDisclosure";
-// import {usePageContext} from "../hooks/usePageContext";
-// import { Logo } from "../images";
-// import { DesktopMenu, MobileMenu } from "../navigation";
-// import NavigationLinks from "../navigation/NavigationLinks";
-// import Container from "./Container";
-// import Disclosure from "./Disclosure";
-// import openFacebook from "../../core/handlers/openFacebook";
-
-// const NavShell: FC = () => {
-//   const { urlPathname } = usePageContext(); // Access the current path
-//   const { open, toggle } = useDisclosure();
-// Debug: urlPathname
-//   return (
-//     <Disclosure as="nav" className="max-w-9xl bg-scrapBlack min-w-max p-3">
-//       {({ open, toggle }) => (
-//         <>
-//           <Container className="relative flex items-center justify-between">
-//             <Logo
-//               className="bg-scrapBlack rounded-full bg-blend-color"
-//               width="40"
-//             />
-//             <DesktopMenu>
-//               <NavigationLinks current={urlPathname} />
-//             </DesktopMenu>
-//             <MobileMenuButton open={open} toggle={toggle} />
-//             <Container className="hidden lg:block">
-//               <SignUpButton onClick={openFacebook} />
-//             </Container>
-//           </Container>
-//           <MobileMenu open={open}>
-//             <NavigationLinks current={urlPathname} toggle={toggle} />
-//             <SignUpButton onClick={openFacebook} />
-//           </MobileMenu>
-//         </>
-//       )}
-//     </Disclosure>
-//   );
-// };
-
-// export default NavShell;
-
-// import type { FC } from "react"
-// import { Container, Disclosure } from "reveal/ui/shells"
-// import usePageContext from "reveal/hooks/usePageContext"
-// import useDisclosure from "reveal/hooks/useDisclosure"
-// import Logo from "reveal/ui/images/Logo"
-// import MobileMenuButton from "reveal/ui/buttons/MobileMenuButton"
-// import SignUpButton from "reveal/ui/buttons/SignUpButton"
-// import DesktopMenu from "reveal/ui/navigation/DesktopMenu"
-// import NavigationLinks from "reveal/router/NavigationLinks"
-// import MobileMenu from "reveal/ui/navigation/MobileMenu"
-// import openFacebook from "reveal/handlers/openFacebook"
-// import React from "react"
-
-// const NavShell: FC = () => {
-//   const pageContext = usePageContext()
-//   const { open, toggle } = useDisclosure()
-
-//   return (
-//     <Disclosure as="nav" className="max-w-9xl bg-scrapBlack min-w-max p-3">
-//       {({current}) => (
-//         <>
-//           <Container className="relative flex items-center justify-between">
-
-//             <Logo
-//               className="bg-scrapBlack rounded-full bg-blend-color"
-//               width="40"
-//             />
-//             <DesktopMenu>
-//               <NavigationLinks current={current} />
-//             </DesktopMenu>
-//             <MobileMenuButton open={open} toggle={toggle} />
-//             <Container className="hidden lg:block">
-//               <SignUpButton onClick={openFacebook} />
-//             </Container>
-//           </Container>
-//           <MobileMenu open={open}>
-//             <NavigationLinks current={current} toggle={toggle} />
-//             <SignUpButton onClick={openFacebook} />
-//           </MobileMenu>
-//         </>
-//       )}
-//     </Disclosure>
-//   )
-// }
-
-// export default NavShell

package/dist/ui/shells/Section.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-
-type SectionProps = {
-  id: string;
-  crosses?: boolean;
-  crossesOffset?: string;
-  customPaddings?: string;
-  children: React.ReactNode;
-  className?: string;
-  customStyles?: Record<string, string>;
-  color?: string;
-  size?: string;
-  weight?: string;
-  align?: string;
-  margin?: string;
-  as?: React.ElementType;
-  aria?: Record<string, string>;
-};
-
-const Section: React.FC<SectionProps> = ({
-  children,
-  className = "",
-  crosses,
-  crossesOffset,
-  customPaddings,
-  customStyles = {},
-  color,
-  size,
-  weight,
-  align,
-  margin,
-  as: Component = "section", // Default to 'section' element
-  aria,
-  ...rest
-}) => {
-  // Prepare style object for inline styles
-  const style = {
-    color,
-    fontSize: size,
-    fontWeight: weight,
-    textAlign: align,
-    margin,
-    ...customStyles,
-  };
-
-  // Handle custom props and aria attributes
-  const customProps = {
-    ...(crosses ? { "data-crosses": crosses.toString() } : {}), // Convert boolean to string
-    "data-crosses-offset": crossesOffset,
-    "data-custom-paddings": customPaddings,
-    ...aria,
-  };
-
-  return (
-    <Component
-      className={className}
-      style={style}
-      {...customProps} // Only pass custom props and ARIA attributes that are valid for DOM
-      {...rest} // Pass other props like 'id', 'tabIndex', etc.
-    >
-      {children}
-    </Component>
-  );
-};
-
-export default Section;
-
-// import React from "react";
-// // import type { SectionProps } from "reveal";
-
-// const Section: React.FC<{
-//   id: string;
-//   crosses: boolean;
-//   crossesOffset: string;
-//   customPaddings: string;
-//   children: React.ReactNode;
-//   className?: string;
-//   customStyles?: Record<string, string>;
-//   color?: string;
-//   size?: string;
-//   weight?: string;
-//   align?: string;
-//   margin?: string;
-//   as?: React.ElementType;
-//   aria?: Record<string, string>;
-// }> = ({ children, className = "", ...props }) => {
-//   return (
-//     <section className={className} {...props}>
-//       {children}
-//     </section>
-//   );
-// };
-
-// export default Section;

package/dist/ui/shells/Skeleton.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-// import type { SkeletonProps } from "reveal";
-
-const Skeleton: React.FC<{
-  width?: number;
-  height?: number;
-  children?: React.ReactNode;
-  className?: string;
-}> = ({ width, height, className }) => {
-  // Convert numeric values to pixel strings
-  const widthStyle = typeof width === "number" ? `${width}rem` : width;
-  const heightStyle = typeof height === "number" ? `${height}rem` : height;
-
-  return (
-    <div
-      className={`relative size-full max-w-screen-sm overflow-hidden bg-gray-200 lg:max-w-screen-lg ${className}`}
-      style={{ width: widthStyle, height: heightStyle }}
-    >
-      <div className="shimmer size-full overflow-hidden" />
-    </div>
-  );
-};
-
-export default Skeleton;

package/dist/ui/shells/index.ts

@@ -1,11 +0,0 @@
-export { default as Container } from "./Container.js";
-export { default as Disclosure } from "./Disclosure.js";
-export { default as Field } from "./Field.js";
-export { default as FlexContainer } from "./Flex.js";
-export { default as GridContainer } from "./Grid.js";
-export { default as Header } from "./Header.js";
-export { default as Main } from "./Main.js";
-export { default as Section } from "./Section.js";
-export { default as Skeleton } from "./Skeleton.js";
-export { default as App } from "./App.js";
-export { default as NavShell } from "./Nav.js";