chore: Merge changes from 'with/green-stack'

Author: codinsonn

README.md

@@ -49,7 +49,7 @@ See [How to choose cross-platform tech](https://dev.to/codinsonn/why-use-react-n
 > "The best way to learn is through the Pull Requests"  
 > -- Theo / @t3dotgg
 
-[![Screenshot of list of Plugin Branches](https://github.com/user-attachments/assets/f2d4d836-c2ad-4249-bc53-de2ab7d5aac1)](https://github.com/Aetherspace/universal-app-router/pulls)
+[![Screenshot of list of Plugin Branches](https://github.com/user-attachments/assets/f2d4d836-c2ad-4249-bc53-de2ab7d5aac1)](https://github.com/FullProduct-dev/universal-app-router/pulls)
 
 **PR & branch based plugins will provide you with the ability to:**  
 

apps/next/app/(generated)/demos/forms/page.tsx

@@ -1,2 +1,2 @@
-'use client'
+"use client"
 export { default, dynamic } from '@app/core/routes/demos/forms/index'

apps/next/app/(generated)/demos/images/page.tsx

@@ -1,2 +1,2 @@
-'use client'
+"use client"
 export { default } from '@app/core/routes/demos/images/index'

apps/next/app/(generated)/demos/markdown/page.tsx

@@ -1,2 +1,2 @@
-'use client'
+"use client"
 export { default } from '@app/core/routes/demos/markdown/index'

apps/next/app/(generated)/page.tsx

@@ -1,2 +1,2 @@
-'use client'
+"use client"
 export { default } from '@app/core/routes/index'

apps/next/app/(generated)/subpages/[slug]/page.tsx

@@ -1,2 +1,2 @@
-'use client'
+"use client"
 export { default } from '@app/core/routes/subpages/[slug]/index'

apps/next/app/layout.tsx

@@ -1,5 +1,23 @@
 /* @jsxImportSource react */
 import NextServerRootLayout from './NextServerRootLayout'
+import { createMetadata } from '@app/utils/server/metadata'
+import { appConfig } from '@app/config'
+
+/* --- Web Default Metadata -------------------------------------------------------------------- */
+
+export const metadata = createMetadata({
+    ...(appConfig.baseURL ? { metadataBase: new URL(appConfig.baseURL) } : {}),
+    title: appConfig.title || appConfig.appName,
+    description: appConfig.description || appConfig.appDescription,
+    openGraph: {
+        title: appConfig.openGraph.title || appConfig.title || appConfig.appName,
+        description: appConfig.openGraph.description || appConfig.description || appConfig.appDescription,
+        url: appConfig.openGraph.url || appConfig.baseURL,
+        siteName: appConfig.openGraph.siteName || appConfig.title || appConfig.appName,
+    }
+})
+
+/* --- Web Root Layout ------------------------------------------------------------------------- */
 
 // -i- We render the server layout as a react server component first
 // -i- This includes the document / html skeleton & styles for SSR

apps/next/middleware.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { createMiddlewareHeaderContext } from '@green-stack/utils/apiUtils'
+import { createMiddlewareContext } from '@green-stack/utils/apiUtils'
 import type { RequestContext } from '@app/core/middleware/createRequestContext'
 
 /* --- Middleware ------------------------------------------------------------------------------ */
@@ -30,7 +30,7 @@ export const middleware = async (req: NextRequest) => {
     // Execute the request handler (and pass the request context header)
     const res = NextResponse.next({
         request: {
-            headers: await createMiddlewareHeaderContext(req, headerContext, extraHeaders),
+            headers: await createMiddlewareContext(req, headerContext, extraHeaders),
         },
     })
 

features/@app-core/appConfig.ts

@@ -23,8 +23,9 @@ export const isServer = isWeb && typeof window === 'undefined'
 
 export const isExpoGo = Constants?.appOwnership === 'expo' || !!Constants?.expoVersion
 
+export const isDocs = process.env.NEXT_PUBLIC_APP_ENV === 'docs'
 export const isExpo = isExpoGo || process.env.EXPO_PUBLIC_APP_ENV === 'expo'
-export const isNext = (!isExpo && isWeb) || process.env.NEXT_PUBLIC_APP_ENV === 'next'
+export const isNext = (!isExpo && isWeb) || process.env.NEXT_PUBLIC_APP_ENV === 'next' || isDocs
 
 export const isWebLocalServer = isWeb && isServer && process.env.PORT === '3000'
 export const isWebLocalhost = isWeb && (globalThis?.location?.hostname === 'localhost' || isWebLocalServer)
@@ -61,7 +62,9 @@ export const isMobileSize = isServer ? undefined : Dimensions.get('window').widt
 /** --- appConfig ------------------------------------------------------------------------------ */
 /** -i- App config variables powered by env vars universally, and including some expo contants config on mobile */
 export const appConfig = {
-    // - Flags -
+
+    // --- Flags ---
+
     isProd,
     isDev,
     isWeb,
@@ -71,34 +74,61 @@ export const appConfig = {
     isServer,
     isExpo,
     isNext,
+    isDocs,
     isLocal,
     isWebLocalhost,
     isNextLocal,
     isExpoGo,
     isExpoWebLocal,
     isExpoMobileLocal,
     isMobileSize,
-    // - Server URLs -
+
+    // --- Server URLs ---
+
     baseURL,
     backendURL,
     apiURL,
     graphURL,
-    // - Secrets -
-    // Don't use NEXT_PUBLIC_ / EXPO_PUBLIC_ prefixes here to make sure these are undefined client-side
+
+    // --- Secrets ---
+
+    // -!- Don't use NEXT_PUBLIC_ / EXPO_PUBLIC_ prefixes here to make sure these are undefined client-side
     appSecret: process.env.APP_SECRET,
-    // - Drivers -
+
+    // --- Drivers ---
+
     drivers: createDriverConfig({
         db: DRIVER_OPTIONS.db.mockDB,
     }),
-    // - Constants -
+
+    // --- Web Default Metadata ---
+
+    // -i- Can be overwritten on each route using Next.js metadata exports (RSC only, so no "use client" routes)
+    // -i- https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+
+    title: 'My Universal App',
+    description: 'TODO: Add description',
+    openGraph: {
+        title: 'My Universal App',
+        description: 'TODO: Add description',
+        url: baseURL,
+        siteName: 'TODO: Set your site name',
+    },
+
+    // --- Mobile Metadata ---
+
     appName: Constants?.manifest2?.name || Constants?.manifest?.name,
     appVersion: Constants?.manifest2?.version || Constants?.manifest?.version,
     appDescription: Constants?.manifest2?.description || Constants?.manifest?.description,
     appIcon: Constants?.manifest2?.icon || Constants?.manifest?.icon,
     appSlug: Constants?.manifest2?.slug || Constants?.manifest?.slug,
     appScheme: Constants?.manifest2?.scheme || Constants?.manifest?.scheme,
     appHostUri: Constants?.expoConfig?.hostUri,
+
+    // --- Constants ---
+
     debugMode: Constants?.debugMode,
+    
 } as const
 
 /* --- Debug ----------------------------------------------------------------------------------- */

features/@app-core/components/Button.docs.mdx

@@ -0,0 +1,28 @@
+### `children` vs `text` prop
+
+You can pass either `props.children` or `props.text` to the Button component. If you pass `props.children`, it will render the children as the button content. This supports JSX and other React Components. Whereas `props.text` only supports actual text strings.
+
+If you pass both, `props.children` will be used instead `props.text`.
+
+### `style` prop
+
+Instead of using just `className`, you can also pass a `style` prop. We will combine the styles from `className` and `style` props. This allows you to use inline styles for dynamic styling while still applying CSS classes.
+
+If both classNames and `style` prop influence the same style, the `style` prop will take precedence.
+
+### `onPress` event handlers
+
+Just like react-native's Pressable, our `Button` component supports the `onPress` prop, alongside other event handlers:
+
+- [`onPress()`](https://reactnative.dev/docs/pressable#onpress) - Called when a touch is released.
+- [`onPressIn()`](https://reactnative.dev/docs/pressable#onpressin) - Called when a touch is initiated.
+- [`onPressOut()`](https://reactnative.dev/docs/pressable#onpressout) - Called when a touch is released, after `onPressIn`.
+- [`onHoverIn()`](https://reactnative.dev/docs/pressable#onhoverin) - Called when the pointer enters the button area.
+- [`onHoverOut()`](https://reactnative.dev/docs/pressable#onhoverout) - Called when the pointer leaves the button area.
+- [`onLongPress()`](https://reactnative.dev/docs/pressable#onlongpress) - Called when a long press gesture is detected.
+- [`onBlur()`](https://reactnative.dev/docs/pressable#onblur) - Called when the button loses focus.
+- [`onFocus()`](https://reactnative.dev/docs/pressable#onfocus) - Called when the button gains focus.
+
+Naturally, when `props.disabled` is `true`, all event handlers will be ignored.
+
+If you pass both `href` and `onPress` props, we will try to execute both. Giving preference to the `onPress` handler first.