@revealui/core 0.0.1-pre.0

package/dist/ui/providers/ThemeProvider.tsx

@@ -0,0 +1,196 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ThemeContext from "../contexts/ThemeContext";
+
+const defaultThemeSettings = {
+  maxWidth: {
+    0: "max-w-3xl",
+    1: "max-w-5xl",
+    2: "max-w-7xl",
+    3: "max-w-8xl",
+    4: "max-w-9xl",
+    5: "max-w-10xl",
+    default: "max-w-full",
+  },
+  padding: {
+    0: "p-0",
+    1: "p-1",
+    2: "p-2",
+    default: "p-3",
+  },
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  },
+  layoutType: {
+    container: "container",
+    flex: "flex",
+    grid: "grid",
+    stack: "stack",
+  },
+  customProps: {
+    flex: {
+      flexDirection: {
+        row: "flex-row",
+        col: "flex-col",
+      },
+      justifyContent: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly",
+      },
+      alignItems: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
+      alignContent: {
+        start: "content-start",
+        center: "content-center",
+        end: "content-end",
+        between: "content-between",
+        around: "content-around",
+        evenly: "content-evenly",
+      },
+      flexWrap: {
+        nowrap: "flex-nowrap",
+        wrap: "flex-wrap",
+        wrapReverse: "flex-wrap-reverse",
+      },
+      flexFlow: {
+        row: "flex-row",
+        col: "flex-col",
+        rowWrap: "flex-row flex-wrap",
+        colWrap: "flex-col flex-wrap",
+        rowWrapReverse: "flex-row flex-wrap-reverse",
+        colWrapReverse: "flex-col flex-wrap-reverse",
+      },
+      flexGrow: {
+        0: "flex-grow-0",
+        1: "flex-grow-1",
+      },
+      flexShrink: {
+        0: "flex-shrink-0",
+        1: "flex-shrink-1",
+      },
+      flexBasis: {
+        auto: "flex-basis-auto",
+        0: "flex-basis-0",
+        full: "flex-basis-full",
+      },
+      flexOrder: {
+        first: "order-first",
+        last: "order-last",
+        none: "order-none",
+        1: "order-1",
+        2: "order-2",
+        3: "order-3",
+        4: "order-4",
+        5: "order-5",
+        6: "order-6",
+        7: "order-7",
+        8: "order-8",
+        9: "order-9",
+        10: "order-10",
+        11: "order-11",
+        12: "order-12",
+      },
+      flexSelf: {
+        auto: "self-auto",
+        start: "self-start",
+        center: "self-center",
+        end: "self-end",
+        stretch: "self-stretch",
+      },
+    },
+    grid: {
+      gridTemplateColumns: {
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+        5: "grid-cols-5",
+        6: "grid-cols-6",
+        7: "grid-cols-7",
+        8: "grid-cols-8",
+        9: "grid-cols-9",
+        10: "grid-cols-10",
+        11: "grid-cols-11",
+        12: "grid-cols-12",
+        none: "grid-cols-none",
+      },
+      gridTemplateRows: {
+        1: "grid-rows-1",
+        2: "grid-rows-2",
+        3: "grid-rows-3",
+        4: "grid-rows-4",
+        5: "grid-rows-5",
+        6: "grid-rows-6",
+        none: "grid-rows-none",
+      },
+      gridTemplateAreas: {
+        none: "grid-areas-none",
+      },
+      gridAutoColumns: {
+        auto: "auto-cols-auto",
+        min: "auto-cols-min",
+        max: "auto-cols-max",
+        fr: "auto-cols-fr",
+      },
+      gridAutoRows: {
+        auto: "auto-rows-auto",
+        min: "auto-rows-min",
+        max: "auto-rows-max",
+        fr: "auto-rows-fr",
+      },
+      gridAutoFlow: {
+        row: "grid-flow-row",
+        col: "grid-flow-col",
+        rowDense: "grid-flow-row-dense",
+        colDense: "grid-flow-col-dense",
+      },
+      grid: {
+        rows: "rows",
+        cols: "cols",
+        gap: "gap",
+        gapX: "gap-x",
+        gapY: "gap-y",
+        autoFlow: "auto-flow",
+        autoRows: "auto-rows",
+        autoCols: "auto-cols",
+        templateRows: "template-rows",
+        templateCols: "template-cols",
+        templateAreas: "template-areas",
+      },
+      gridRow: {
+        auto: "row-auto",
+        span: "row-span",
+        start: "row-start",
+        end: "row-end",
+      },
+      gridColumn: {
+        auto: "col-auto",
+        span: "col-span",
+        start: "col-start",
+        end: "col-end",
+      },
+      gridArea: {
+        auto: "area-auto",
+      },
+    },
+  },
+};
+const ThemeProvider = ({ children }: { children: any }) => (
+  <ThemeContext.Provider value={defaultThemeSettings}>
+    {children}
+  </ThemeContext.Provider>
+);
+
+export default ThemeProvider;

package/dist/ui/shells/App.tsx

@@ -0,0 +1,57 @@
+import React, { type FC } from "react";
+
+import NavShell from "./Nav";
+import Footer from "../navigation/Footer";
+import Container from "./Container";
+import { PageContextServer } from "../../types/interfaces/context";
+
+const App: FC<{
+  children?: React.ReactNode;
+  pageContext?: PageContextServer;
+}> = ({ children }) => {
+  return (
+    <Container>
+      <NavShell />
+      {children}
+      <Footer />
+    </Container>
+  );
+};
+
+export default App;
+
+// import { type FC } from "react";
+// import { Container, Footer, Header, Main, Section } from "reveal";
+// import NavShell from "./NavShell";
+// import "./styles.css";
+
+// const AppShell: FC<{
+//   children: React.ReactNode;
+// }> = ({ children }) => {
+//   return (
+//     <>
+//       <Container>
+//         <Header index={1} style={{ background: "transparent" }}>
+//           <NavShell />
+//         </Header>
+//         <Main
+//           crosses={false}
+//           crossesOffset={" -100px"}
+//           customPaddings={" 0 0 0 0"}
+//         >
+//           <Section
+//             id={"section"}
+//             crosses={false}
+//             crossesOffset={" -100px"}
+//             customPaddings={" 0 0 0 0"}
+//           >
+//             {children}
+//           </Section>
+//         </Main>
+//         <Footer />
+//       </Container>
+//     </>
+//   );
+// };
+
+// export default AppShell;

package/dist/ui/shells/Container.tsx

@@ -0,0 +1,74 @@
+import React, { ForwardedRef, forwardRef, useMemo } from "react";
+
+const Container = forwardRef<
+  HTMLElement,
+  {
+    id?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    index?: number;
+    maxWidth?: string;
+    padding?: string;
+    className?: string;
+    role?: string;
+    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchMove?: (e: React.TouchEvent<HTMLDivElement>) => void;
+    as?: React.ElementType;
+    breakpoints?: {
+      [key: string]: number;
+    };
+  }
+>(
+  (
+    {
+      id,
+      children,
+      index = 0,
+      maxWidth = "none",
+      padding = "0",
+      className = "",
+      onTouchMove,
+      onTouchStart,
+      as: Component = "div",
+      breakpoints = {},
+      ...props
+    },
+    ref: ForwardedRef<HTMLElement>,
+  ) => {
+    const combinedClasses = useMemo(() => {
+      // Generate responsive classes based on the breakpoints
+      const responsiveClasses =
+        Object.keys(breakpoints).length !== 0
+          ? Object.entries(breakpoints).map(([key, value]) => {
+              return `lg:${key}-${value}`;
+            })
+          : [index === 0 ? "lg:col-span-12" : "lg:col-span-6"];
+      return [
+        responsiveClasses,
+        maxWidth !== "none" ? `max-w-${maxWidth}` : "",
+        padding !== "0" ? `p-${padding}` : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+    }, [breakpoints, index, maxWidth, padding, className]);
+
+    return (
+      <Component
+        id={id}
+        ref={ref}
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        className={combinedClasses}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+
+Container.displayName = "Container";
+
+export default Container;

package/dist/ui/shells/Disclosure.tsx

@@ -0,0 +1,72 @@
+// eslint-disable-next-line prettier/prettier
+
+import React, { ElementType, FC, JSX, useState } from "react";
+import { DisclosureButton } from "../buttons";
+import { DisclosurePanel } from "../lists";
+
+interface DisclosureProps {
+  as?: keyof JSX.IntrinsicElements;
+  className?: string;
+  children: (props: {
+    open: boolean;
+    toggle: (
+      event: React.MouseEvent<HTMLElement>,
+    ) => void;
+  }) => JSX.Element;
+}
+
+const Disclosure: FC<DisclosureProps> & {
+  Button: FC<{
+    as?: ElementType;
+    children?: React.ReactNode;
+    className?: string;
+    onClick?: (
+      event: React.MouseEvent<HTMLElement>,
+    ) => void;
+  }>; // Add the missing Button property
+  Panel: FC<{
+    as?: ElementType;
+    children?: React.ReactNode;
+    className?: string;
+    onClick?: (
+      event: React.MouseEvent<HTMLElement>,
+    ) => void;
+  }>;
+} = ({ as: Component = "div", children, className }) => {
+  const [open, setOpen] = useState(false);
+
+  const toggle = (
+    event: React.MouseEvent<HTMLElement>,
+  ) => {
+    event.preventDefault();
+    setOpen((prevOpen) => !prevOpen);
+  };
+  return (
+    <Component className={className}>
+      {children({
+        open,
+        toggle,
+      })}
+    </Component>
+  );
+};
+
+Disclosure.Button = DisclosureButton as FC<{
+  as?: ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: (
+    event: React.MouseEvent<HTMLElement>,
+  ) => void;
+}>;
+
+Disclosure.Panel = DisclosurePanel as FC<{
+  as?: ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: (
+    event: React.MouseEvent<HTMLElement>,
+  ) => void;
+}>;
+
+export default Disclosure;

package/dist/ui/shells/Field.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Field = React.forwardRef<
+  HTMLDivElement,
+  {
+    className?: string;
+    children?: React.ReactNode;
+  }
+>(({ className, children, ...rest }, ref) => {
+  const combinedClasses = [className].filter(Boolean).join(" ").trim();
+
+  return (
+    <div className={combinedClasses} ref={ref} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Field.displayName = "Field";
+
+export default Field;

package/dist/ui/shells/Flex.tsx

@@ -0,0 +1,193 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+} from "react";
+
+interface FlexContainerProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode | ReactNode[];
+  className?: string;
+  index?: number;
+  width?: string;
+  layoutType?: string;
+  flexDirection?: string;
+  justifyContent?: string;
+  alignItems?: string;
+  layoutStyle?: number;
+  customStyles?: string;
+  breakpoints?: Record<string, string>;
+}
+
+const FlexContainer = forwardRef<HTMLDivElement, FlexContainerProps>(
+  (
+    {
+      children,
+      className = "",
+      index = 0,
+      width = "auto",
+      layoutType = "flex",
+      flexDirection = "row",
+      justifyContent = "center",
+      alignItems = "center",
+      layoutStyle = 0,
+      customStyles = "",
+      breakpoints = {},
+      ...props
+    },
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const layoutClasses = [
+      `w-${width}`,
+      `${layoutType}`,
+      `flex-${flexDirection}`,
+      `justify-${justifyContent}`,
+      `items-${alignItems}`,
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .trim();
+
+    const childrenWithFlex = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        const childClassMap: { [key: number]: string } = {
+          0: "flex-auto",
+          1: "flex-1",
+          2: "flex-1 min-w-[25ch]",
+          3: "flex-1 min-w-[10em]",
+          4: "flex-1 min-w-[15em]",
+          5: "flex-1 min-w-[20em]",
+        };
+
+        const childClass = childClassMap[layoutStyle] || "flex-1";
+        const additionalClass =
+          React.Children.count(children) === 1 && layoutStyle === 2
+            ? "min-w-[15ch]"
+            : "";
+
+        // Type assertion to ensure TypeScript knows that child.props has a className property
+        const childElement = child as ReactElement<{ className?: string }>;
+
+        return React.cloneElement(childElement, {
+          className: `${childClass} ${additionalClass} ${
+            childElement.props.className || ""
+          }`,
+        });
+      }
+
+      return child;
+    });
+
+    const responsiveClasses =
+      Object.keys(breakpoints).length !== 0 ? "responsive" : "";
+    const combinedClasses =
+      `${layoutClasses} ${responsiveClasses} ${className} ${customStyles}`.trim();
+
+    return (
+      <div tabIndex={index} className={combinedClasses} ref={ref} {...props}>
+        {childrenWithFlex}
+      </div>
+    );
+  },
+);
+
+FlexContainer.displayName = "FlexContainer";
+
+export default FlexContainer;
+
+// import React, {
+//   ForwardedRef,
+//   ReactElement,
+//   ReactNode,
+//   forwardRef,
+// } from "react";
+
+// const FlexContainer = forwardRef<
+//   HTMLDivElement,
+//   {
+//     children: ReactNode | ReactNode[];
+//     className?: string;
+//     index?: number;
+//     width?: string;
+//     layoutType?: string;
+//     flexDirection?: string;
+//     justifyContent?: string;
+//     alignItems?: string;
+//     layoutStyle?: number;
+//     customStyles?: string;
+//     breakpoints?: Record<string, string>;
+//   }
+// >(
+//   (
+//     {
+//       children,
+//       className = "",
+//       index = 0,
+//       width = "auto",
+//       layoutType = "flex",
+//       flexDirection = "row",
+//       justifyContent = "center",
+//       alignItems = "center",
+//       layoutStyle = 0,
+//       customStyles = "",
+//       breakpoints = {},
+//       ...props
+//     },
+//     ref: ForwardedRef<HTMLDivElement>,
+//   ) => {
+//     const layoutClasses = [
+//       `w-${width}`,
+//       `${layoutType}`,
+//       `flex-${flexDirection}`,
+//       `justify-${justifyContent}`,
+//       `items-${alignItems}`,
+//     ]
+//       .filter(Boolean)
+//       .join(" ")
+//       .trim();
+
+//     const childrenWithFlex = React.Children.map(children, (child) => {
+//       // Only import.meta.child if it's a valid React element
+//       if (React.isValidElement(child)) {
+//         const childClassMap: { [key: number]: string } = {
+//           0: "flex-auto",
+//           1: "flex-1",
+//           2: "flex-1 min-w-[25ch]",
+//           3: "flex-1 min-w-[10em]",
+//           4: "flex-1 min-w-[15em]",
+//           5: "flex-1 min-w-[20em]",
+//         };
+
+//         const childClass = childClassMap[layoutStyle] || "flex-1";
+//         const additionalClass =
+//           React.Children.count(children) === 1 && layoutStyle === 2
+//             ? "min-w-[15ch]"
+//             : "";
+
+//         // Clone the child element with additional className
+//         return React.cloneElement(child as ReactElement, {
+//           className: `${childClass} ${additionalClass} ${
+//             child.props.className || ""
+//           }`,
+//         });
+//       }
+
+//       // Return non-element child as is
+//       return child;
+//     });
+
+//     const responsiveClasses = Object.keys(breakpoints).length !== 0;
+//     const combinedClasses =
+//       `${layoutClasses} ${responsiveClasses} ${className} ${customStyles}`.trim();
+
+//     return (
+//       <div tabIndex={index} className={combinedClasses} ref={ref} {...props}>
+//         {childrenWithFlex}
+//       </div>
+//     );
+//   },
+// );
+// FlexContainer.displayName = "FlexContainer";
+
+// export default FlexContainer;