@multiplatform.one/core 6.0.0

package/src/layouts/CreateDefaultLayout.tsx

@@ -0,0 +1,127 @@
+import type { ComponentType, ReactNode } from "react";
+import { YStack } from "tamagui";
+import { config } from "@multiplatform.one/platform";
+import { createWithLayout, type WithLayout } from "@multiplatform.one/platform";
+
+export type SafeAreaEdge = "top" | "bottom" | "left" | "right";
+
+export interface CreateDefaultLayoutOptions {
+  /**
+   * SafeArea wrapper component.
+   * Pass SafeAreaWrapper from @multiplatform.one/components.
+   */
+  SafeAreaWrapper?: ComponentType<any>;
+
+  /**
+   * Edges to apply safe area insets to.
+   * @default ["top", "left", "right"]
+   */
+  safeAreaEdges?: SafeAreaEdge[];
+
+  /**
+   * Background color token for the safe area wrapper.
+   * @default "$background"
+   */
+  safeAreaBackground?: string;
+
+  /**
+   * KeyboardAvoiding wrapper component.
+   * Pass KeyboardAvoidingWrapper from @multiplatform.one/components.
+   */
+  KeyboardAvoidingWrapper?: ComponentType<any>;
+
+  /**
+   * Background color token for the content area.
+   * @default "$background"
+   */
+  background?: string;
+
+  /**
+   * Toast component to render inside the layout.
+   */
+  Toast?: ComponentType;
+
+  /**
+   * Debug overlay configuration.
+   * - `true`: enable a minimal debug overlay (visible when DEBUG=1)
+   * - `ComponentType`: render this component as the debug view when DEBUG=1
+   */
+  debug?: boolean | ComponentType;
+
+  /**
+   * Additional layout HOCs to compose with the default layout.
+   */
+  extraLayouts?: WithLayout[];
+}
+
+export interface DefaultLayoutProps {
+  children: ReactNode;
+}
+
+/**
+ * Factory that creates a DefaultLayout component and withDefaultLayout HOC
+ * from configuration. Handles SafeArea, KeyboardAvoiding, fullscreen YStack,
+ * Toast, and optional debug overlay composition.
+ */
+export function createDefaultLayout(options: CreateDefaultLayoutOptions = {}) {
+  const {
+    SafeAreaWrapper,
+    safeAreaEdges = ["top", "left", "right"],
+    safeAreaBackground = "$background",
+    KeyboardAvoidingWrapper,
+    background = "$background",
+    Toast,
+    debug = false,
+    extraLayouts = [],
+  } = options;
+
+  function DefaultLayout({ children }: DefaultLayoutProps) {
+    let content = (
+      <YStack
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        backgroundColor={background}
+      >
+        {children}
+        {Toast && <Toast />}
+      </YStack>
+    );
+    if (KeyboardAvoidingWrapper) {
+      content = <KeyboardAvoidingWrapper flex={1}>{content}</KeyboardAvoidingWrapper>;
+    }
+    if (SafeAreaWrapper) {
+      content = (
+        <SafeAreaWrapper edges={safeAreaEdges} bg={safeAreaBackground}>
+          {content}
+        </SafeAreaWrapper>
+      );
+    }
+    return content;
+  }
+
+  const allExtraLayouts = [...extraLayouts];
+  if (debug) {
+    const DebugView = typeof debug === "function" ? debug : undefined;
+    const withDebug = createWithLayout(({ children }: { children: ReactNode }) => {
+      if (config.get("DEBUG") !== "1") return <>{children}</>;
+      return (
+        <YStack position="absolute" top={0} right={0} bottom={0} left={0}>
+          {children}
+          {DebugView && (
+            <YStack position="absolute" pointerEvents="box-none">
+              <DebugView />
+            </YStack>
+          )}
+        </YStack>
+      );
+    });
+    allExtraLayouts.push(withDebug);
+  }
+
+  const withDefaultLayout = createWithLayout(DefaultLayout, allExtraLayouts);
+
+  return { DefaultLayout, withDefaultLayout };
+}

package/src/layouts/index.ts

@@ -0,0 +1,6 @@
+export { createDefaultLayout } from "./CreateDefaultLayout";
+export type {
+  CreateDefaultLayoutOptions,
+  DefaultLayoutProps,
+  SafeAreaEdge,
+} from "./CreateDefaultLayout";

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"],
+  "references": []
+}