@revealui/core 0.0.1-pre.0

package/dist/ui/shells/Grid.tsx

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

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

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

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

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

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

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