@revealui/core 0.0.1-pre.0

package/dist/types/modules/assets.d.ts

@@ -0,0 +1,57 @@
+declare module "vite:*" {
+  const value: Record<string, string>;
+  export default value;
+}
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
+declare module "*.gif" {
+  const value: string;
+  export default value;
+}
+declare module "*.ico" {
+  const value: string;
+  export default value;
+}
+declare module "*.webp" {
+  const value: string;
+  export default value;
+}
+declare module "*.mp4" {
+  const value: string;
+  export default value;
+}
+declare module "*.webm" {
+  const value: string;
+  export default value;
+}
+declare module "*.ogg" {
+  const value: string;
+  export default value;
+}
+declare module "*.mp3" {
+  const value: string;
+  export default value;
+}
+declare module "*.wav" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.ttf" {
+  const value: string;
+  export default value;
+}
+declare module "assets" {
+  const value: string;
+  export default value;
+}

package/dist/types/modules/env.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties } from "react";
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DATABASE_URL: string;
+  readonly VITE_API_URL: string;
+  readonly VITE_SUPABASE_URL: string;
+  readonly VITE_SUPABASE_ANON_KEY: string;
+  readonly VITE_SUPABASE_SERVICE_ROLE_KEY: string;
+  readonly VITE_PUBLIC_URL: string;
+  readonly VITE_PUBLIC_VERCEL_URL: string;
+  readonly VITE_STRIPE_PUBLISHABLE_KEY: string;
+  readonly VITE_STRIPE_SECRET_KEY: string;
+  readonly VITE_STRIPE_WEBHOOK_SECRET: string;
+  readonly YOUTUBE_API_KEY: string;
+  readonly PAYLOAD_PUBLIC_SERVER_URL: string;
+  readonly SUPABASE_ANON_KEY: string;
+  readonly API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare module "process" {
+  interface Env extends ImportMetaEnv {}
+}
+
+declare module "react" {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    // extends React's HTMLAttributes
+    css?: CSSProperties;
+  }
+}

package/dist/types/modules/global.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="stripe.d.ts" />
+/// <reference path="supabase.d.ts" />
+/// <reference path="env.d.ts" />
+/// <reference path="tailwindcss.d.ts" />
+/// <reference path="node.d.ts" />
+/// <reference path="vite.d.ts" />
+/// <reference path="reveal-vercel.d.ts" />
+/// <reference path="payload.d.ts" />
+/// <reference path="assets.d.ts" />
+/// <reference path="reveal.d.ts" />

package/dist/types/modules/index.d.ts

@@ -0,0 +1 @@
+export * from "./global";

package/dist/types/modules/node.d.ts

@@ -0,0 +1,2 @@
+declare module "fs";
+declare module "path";

package/dist/types/modules/payload.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="payload" />
+declare module "@payload-config";

package/dist/types/modules/reveal-vercel.d.ts

@@ -0,0 +1,19 @@
+declare module "reveal/vercel" {
+  export interface UserConfig {
+    vercel?: Record<string, unknown>;
+  }
+
+  export default function vercel({
+    source,
+    destination,
+    config,
+    isr,
+    edge,
+    headers,
+    rewrites,
+    cleanUrls,
+    trailingSlash,
+    additionalEndpoints,
+    cache,
+  }): Plugin;
+}

package/dist/types/modules/reveal.d.ts

@@ -0,0 +1 @@
+declare module "reveal" {}

package/dist/types/modules/stripe.d.ts

@@ -0,0 +1,41 @@
+declare module "stripe" {
+  type Stripe = {
+    products: {
+      list: () => Promise<{ data: Product[] }>;
+    };
+    prices: {
+      list: () => Promise<{ data: Price[] }>;
+    };
+  };
+
+  type Product = {
+    id: string;
+    active: boolean;
+    name: string;
+    description?: string;
+    image?: string | null;
+    metadata: Record<string, string>;
+  };
+
+  type Price = {
+    id: string;
+    product: string | Product;
+    active: boolean;
+    currency: string;
+    nickname?: string;
+    type: string;
+    unit_amount?: number;
+    recurring?: {
+      interval: string;
+      interval_count?: number;
+      trial_period_days?: number;
+    };
+    metadata: Record<string, string>;
+  };
+}
+
+declare module "stripe/webhooks" {
+  type StripeWebhook = {
+    constructEvent: (payload: string, sig: string, secret: string) => void;
+  };
+}

package/dist/types/modules/supabase.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module "supabase" {
+  type Supabase = {
+    auth: {
+      api: {
+        signIn: (params: {
+          email: string;
+          password: string;
+        }) => Promise<{ error: Error } | { data: { access_token: string } }>;
+      };
+    };
+    from: (table: string) => {
+      insert: (data: Record<string, any>) => Promise<any>;
+      select: (columns: string) => {
+        eq: (value: string) => Promise<any>;
+      };
+    };
+  };
+}

package/dist/types/modules/tailwindcss.d.ts

@@ -0,0 +1,49 @@
+import "tailwindcss/defaultTheme";
+
+declare module "tailwindcss";
+declare module "tailwindcss/plugin";
+declare module "tailwindcss/resolveConfig";
+declare module "tailwindcss/colors";
+declare module "tailwindcss/defaultTheme";
+declare module "dev/tailwind" {
+  import { TailwindConfig } from "tailwindcss/tailwind-config-custom";
+
+  const config: TailwindConfig;
+
+  export default config;
+}
+
+declare module "autoprefixer";
+declare module "tailwindcss";
+declare module "tailwindcss/nesting";
+declare module "@tailwindcss/aspect-ratio";
+declare module "@tailwindcss/forms";
+declare module "@tailwindcss/typography";
+declare module "@tailwindcss/line-clamp";
+
+declare module "tailwindcss/defaultTheme" {
+  // Extend the existing Tailwind Theme
+  interface TailwindThemeExtensions {
+    colors: Record<string, string | Record<string, string>>;
+    fontFamily: Record<string, string[]>;
+    fontSize: Record<string, string>;
+    fontWeight: Record<string, number>;
+    lineHeight: Record<string, number>;
+    letterSpacing: Record<string, string>;
+    boxShadow: Record<string, string>;
+    extend: {
+      screens: Record<string, string>;
+      spacing: Record<string, string>;
+      animation: Record<string, string>;
+      backgroundImage: Record<string, string>;
+      backgroundOpacity: Record<string, string>;
+      backgroundPosition: Record<string, string>;
+      backgroundSize: Record<string, string>;
+      blur: Record<string, string>;
+      brightness: Record<string, string>;
+      // Add more customizations as needed
+    };
+  }
+
+  export interface Theme extends TailwindThemeExtensions {}
+}

package/dist/types/modules/vite.d.ts

@@ -0,0 +1,7 @@
+import { VercelConfig, ViteVercelConfig } from "../types/vercel";
+
+declare module "vite" {
+  interface UserConfig {
+    vercel?: VercelConfig | ViteVercelConfig;
+  }
+}

package/dist/types/namespaces/Config.ts

@@ -0,0 +1,291 @@
+import React, { JSX } from "react"
+import type { ConfigsCumulative } from "../../core/hooks/useConfig/configsCumulative.js"
+import type { TagAttributes } from "../../core/processing/getters/getTagAttributesString.js"
+
+import type { ImportString } from "../index.js"
+import { Viewport } from "../interfaces/config.js"
+import {
+  PageContext,
+  PageContextClient,
+  PageContextServer,
+} from "../interfaces/context.js"
+
+declare global {
+  namespace Reveal {
+    interface Config {
+      /**
+       * The page's root React component.
+       *
+       * https://reveal.dev/Page
+       */
+      Page?: () => React.ReactNode
+
+      /**
+       * Add arbitrary `<head>` tags.
+       *
+       * https://reveal.dev/Head
+       */
+      Head?: Head
+
+      /**
+       * A component that defines the visual layout common to several pages.
+       *
+       * Technically: the `<Layout>` component wraps the root component `<Page>`.
+       *
+       * https://reveal.dev/Layout
+       */
+      Layout?: Layout
+
+      /**
+       * A component wrapping the the root component `<Page>`.
+       *
+       * https://reveal.dev/Wrapper
+       */
+      Wrapper?: Wrapper | ImportString
+
+      /**
+       * Set the page's tilte.
+       *
+       * Generates:
+       * ```jsx
+       * <head>
+       *   <title>{title}</title>
+       *   <meta property="og:title" content={title} />
+       * </head>
+       * ```
+       *
+       * https://reveal.dev/title
+       */
+      title?:
+        | string
+        | null
+        | ((pageContext: PageContext_) => string | null | undefined)
+
+      /**
+       * Set the page's description.
+       *
+       * Generates:
+       * ```jsx
+       * <head>
+       *   <meta name="description" content={description}>
+       *   <meta property="og:description" content={description}>
+       * </head>
+       * ```
+       *
+       * https://reveal.dev/description
+       */
+      description?:
+        | string
+        | null
+        | ((pageContext: PageContextServer) => string | null | undefined)
+
+      /**
+       * Set the page's preview image upon URL sharing.
+       *
+       * Generates:
+       * ```jsx
+       * <head>
+       *   <meta property="og:image" content={image}>
+       *   <meta name="twitter:card" content="summary_large_image">
+       * </head>
+       * ```
+       *
+       * https://reveal.dev/image
+       */
+      image?:
+        | string
+        | null
+        | ((pageContext: PageContextServer) => string | null | undefined)
+
+      /**
+       * Set the page's width shown to the user on mobile/tablet devices.
+       *
+       * @default "responsive"
+       *
+       * https://reveal.dev/viewport
+       */
+      viewport?:
+        | Viewport
+        | ((pageContext: PageContextServer) => Viewport | undefined)
+
+      /**
+       * Set the page's favicon.
+       *
+       * Generates:
+       * ```jsx
+       * <head>
+       *   <link rel="icon" href={favicon} />
+       * </head>
+       * ```
+       *
+       * https://reveal.dev/favicon
+       */
+      favicon?:
+        | string
+        | null
+        | ((pageContext: PageContextServer) => string | null | undefined)
+
+      /**
+       * Set the page's language (`<html lang>`).
+       *
+       * @default 'en'
+       *
+       * https://reveal.dev/lang
+       */
+      lang?:
+        | string
+        | null
+        | ((pageContext: PageContext_) => string | null | undefined)
+
+      /**
+       * Raw HTML injected at the start of `<body>`.
+       *
+       * https://reveal.dev/bodyHtmlBegin
+       */
+      bodyHtmlBegin?: BodyHtmlBoundary
+
+      /**
+       * Raw HTML injected at the end of `<body>`.
+       *
+       * https://reveal.dev/bodyHtmlEnd
+       */
+      bodyHtmlEnd?: BodyHtmlBoundary
+
+      /**
+       * Add tag attributes such as `<html class="dark">`.
+       *
+       * https://reveal.dev/htmlAttributes
+       */
+      htmlAttributes?:
+        | TagAttributes
+        | ((pageContext: PageContextServer) => TagAttributes | undefined)
+
+      /**
+       * Add tag attributes such as `<body class="dark">`.
+       *
+       * https://reveal.dev/bodyAttributes
+       */
+      bodyAttributes?:
+        | TagAttributes
+        | ((pageContext: PageContextServer) => TagAttributes | undefined)
+
+      /**
+       * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
+       *
+       * If `false`, the page is rendered only once in the browser.
+       *
+       * @default true
+       *
+       * https://reveal.dev/ssr
+       */
+      ssr?: boolean
+
+      /**
+       * Whether to stream the page's HTML.
+       *
+       * Requires Server-Side Rendering (`ssr: true`).
+       *
+       * A Node.js Stream is used whenever possible, falling back to a Web Stream otherwise.
+       *
+       * By setting the value to `web` or `node`, you force the usage of a Web Stream or Node.js Stream.
+       *
+       * @default false
+       *
+       * https://reveal.dev/stream
+       */
+      stream?: boolean | "node" | "web"
+
+      /**
+       * Whether the existence of the React SSR stream is required (some integrations require it).
+       *
+       * HTML Streaming can still be disabled: the SSR stream is awaited and converted to a string.
+       */
+      streamIsRequired?: boolean
+
+      /**
+       * Whether to use `<StrictMode>`.
+       *
+       * @default true
+       *
+       * https://reveal.dev/reactStrictMode
+       */
+      reactStrictMode?: boolean
+
+      /**
+       * Server-side hook called right after rendering the page's root React component to HTML.
+       *
+       * https://reveal.dev/onAfterRenderHtml
+       */
+      onAfterRenderHtml?: (pageContext: PageContextServer) => void
+
+      /**
+       * Client-side hook called before the page is rendered.
+       *
+       * https://reveal.dev/onBeforeRenderClient
+       */
+      onBeforeRenderClient?: (pageContext: PageContextClient) => void
+
+      /**
+       * Client-side hook called after the page is rendered.
+       *
+       * https://reveal.dev/onAfterRenderClient
+       */
+      onAfterRenderClient?: (pageContext: PageContextClient) => void
+
+      /**
+       * Define loading animations.
+       *
+       * https://reveal.dev/Loading
+       */
+      Loading?: Loading | ImportString
+    }
+    interface ConfigResolved {
+      Wrapper?: Wrapper[]
+      Layout?: Layout[]
+      Head?: Head[]
+      bodyHtmlBegin?: BodyHtmlBoundary[]
+      bodyHtmlEnd?: BodyHtmlBoundary[]
+      bodyAttributes?: TagAttributes[]
+      htmlAttributes?: TagAttributes[]
+      onAfterRenderHtml?: Function[]
+      onBeforeRenderClient?: Function[]
+      onAfterRenderClient?: Function[]
+    }
+  }
+}
+
+// Be able to reference it from within `namespace reveal`
+// - https://stackoverflow.com/questions/46559021/typescript-use-of-global-type-inside-namespace-with-same-type
+// - https://github.com/Microsoft/TypeScript/issues/983
+type PageContext_ = PageContext
+
+type BodyHtmlBoundary = string | ((pageContext: PageContext) => string)
+type ReactElement = JSX.Element
+type ReactComponent = () => ReactElement
+export type Head = ReactComponent | React.ReactNode
+
+type Wrapper = (props: { children: React.ReactNode }) => React.ReactNode
+type Layout = Wrapper
+type Loading = {
+  component?: () => React.ReactNode
+  layout?: () => React.ReactNode
+}
+
+// JSDocs are preserved
+type PickWithoutGetter<T, K extends keyof T> = {
+  [P in K]: Exclude<T[P], Function>
+}
+export type ConfigFromHook = PickWithoutGetter<
+  Reveal.Config,
+  | "Head"
+  | "title"
+  | "description"
+  | "image"
+  | "favicon"
+  | "lang"
+  | "viewport"
+  | "bodyAttributes"
+  | "htmlAttributes"
+>
+export type ConfigFromHookResolved = Omit<ConfigFromHook, ConfigsCumulative> &
+  Pick<Reveal.ConfigResolved, ConfigsCumulative>

package/dist/types/namespaces/PageContext.ts

@@ -0,0 +1,23 @@
+import { JSX } from "react"
+import { PageHtmlStream } from "../../integration/onRenderHtml"
+
+// https://reveal.dev/pageContext#typescript
+declare global {
+  namespace Reveal {
+    interface PageContext {
+      /** The root React component of the page */
+      Page?: () => React.ReactNode
+      /** The root React element of the page */
+      page?: JSX.Element
+      /** The React root DOM container */
+      root?: Element
+
+      /** The +Page.jsx component rendered to the HTML string. */
+      pageHtmlString?: string
+      /** The +Pagejsx component rendered to an HTML stream. */
+      pageHtmlStream?: PageHtmlStream
+
+      abortReason?: string | { notAdmin: true }
+    }
+  }
+}

package/dist/types/namespaces/RevealNamespace.ts

@@ -0,0 +1,51 @@
+export type { Reveal, RevealPackages }
+
+// Enable users and reveal/* packages to define types, e.g.:
+//  - User can set Config['Page'] over Reveal.Config['Page']
+//  - reveal/vercel can add Config['isr'] over Reveal.Config['isr']
+
+declare global {
+  namespace Reveal {
+    /** Extend and/or refine the `Config` type (`import type { Config } from 'reveal/types'`).
+     *
+     *  For example:
+     *  - You can refine the type of `Config['Page']`.
+     *  - You can define the type of custom configurations created with `config.meta` (https://reveal.dev/meta)
+     *
+     *  https://reveal.dev/meta#typescript
+     */
+    interface Config {}
+
+    /** Extend and/or refine the `PageContext` type (`import type { PageContext } from 'reveal/types'`).
+     *
+     *  For example:
+     *  - You can refine the type of `PageContext['Page']`.
+     *  - You can define the type of custom `pageContext` values such as `pageContext.user`, see https://reveal.dev/pageContext#custom
+     *
+     *  https://reveal.dev/pageContext#typescript
+     */
+    interface PageContext {}
+
+    /** Refine the `pageContext.config` type.
+     *
+     *  It's used for cumulative configs: the `pageContext.config[configName]` type is an `array` whereas `Config[configName]` isn't.
+     *
+     *  https://reveal.dev/meta#typescript
+     */
+    interface ConfigResolved {}
+  }
+
+  /** This namespace is only used by:
+   *
+   *  - `reveal`
+   *
+   *  As a Reveal user, you can ignore this.
+   */
+  namespace RevealPackages {
+    // Enable reveal to extend the type `Config`.
+    //  - We need a different interface for each reveal package because of conflicts.
+    //    - E.g. Config['Page'] is a React component, but reveal/vercel is using a string.
+    //      - The user can be using more than one reveal package.
+    interface ConfigRevealReact {} // For reveal
+  }
+}

package/dist/types/namespaces/index.ts

@@ -0,0 +1,3 @@
+export * from "./Config";
+export * from "./PageContext";
+export * from "./RevealNamespace";

package/dist/ui/accents/DiagonalGrid.tsx

@@ -0,0 +1,36 @@
+import React, { JSX } from "react";
+import { Image } from "../images";
+
+const DiagonalGrid = ({
+  gridProps,
+}: {
+  gridProps: {
+    src: string;
+    alt: string;
+  }[];
+}): JSX.Element => {
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      {gridProps.map((info: { src: string; alt: string }, index: number) => {
+        // Calculate the offset (you can adjust the '10px' to your preference)
+        const { src, alt } = info;
+
+        const offsetStyle =
+          index % 2 === 0 ? { marginTop: "100px" } : { marginBottom: "70px" };
+
+        return (
+          <div key={index} className="relative">
+            <Image
+              src={src}
+              alt={`${alt} ${index}`}
+              className="w-full"
+              style={offsetStyle}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DiagonalGrid;