plugin: GREEN stack

.gitignore

@@ -57,3 +57,5 @@ yarn-error.log*
 .pnp.js
 
 # -- @end @expo/next-adapter --
+
+.turbo

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/expo/.env.example

@@ -1,4 +1,46 @@
-EXPO_PUBLIC_BASE_URL=
-EXPO_PUBLIC_BACKEND_URL=
-EXPO_PUBLIC_API_URL=
-EXPO_PUBLIC_GRAPH_URL=
+## --- Notes ----------------------------------------------------------------------------------- */
+
+## -i- The `.env.example` file can be copied into `.env.local` using `npx turbo env:local`
+## -i- For more info, development, staging & production environments, check the expo docs:
+## -i- https://docs.expo.dev/guides/environment-variables/
+
+## -i- Note that Expo will inline environment variables in your bundle during builds & deployments
+## -i- This means dynamically retrieving environment variables from e.g. `process.env[someKey]` will not work
+## -i- It also means that you should never include sensitive / private keys 
+
+## -i- We suggest that for each environment variable you add here, you also add an entry in `appConfig.ts`
+## -i- There, you can add logic like ```envValue: process.env.EXPO_PUBLIC_ENV_KEY || process.env.NEXT_PUBLIC_ENV_KEY```
+## -i- Where you would only define the EXPO_PUBLIC_ prefixed versions here in `.env.local` locally and using Expo UI for deployed envs
+
+## --- General --------------------------------------------------------------------------------- */
+## -i- Env vars that should always be present & the same locally, independent of the simulated environment
+## --------------------------------------------------------------------------------------------- */
+
+EXPO_PUBLIC_BASE_URL= # Keep empty in `.env.local` for maximum local testability, `appConfig.ts` will figure out back-end URL from expo-config
+EXPO_PUBLIC_BACKEND_URL= # Keep empty in `.env.local` for maximum local testability, `appConfig.ts` will figure out back-end URL from expo-config
+EXPO_PUBLIC_API_URL= # Keep empty in `.env.local` for maximum local testability, `appConfig.ts` will figure out back-end URL from expo-config
+EXPO_PUBLIC_GRAPH_URL= # Keep empty in `.env.local` for maximum local testability, `appConfig.ts` will figure out back-end URL from expo-config
+
+## --- LOCAL ----------------------------------------------------------------------------------- */
+## -i- Defaults you might want to switch out for local development by commenting / uncommenting
+## --------------------------------------------------------------------------------------------- */
+
+# EXAMPLE= # ...
+
+## --- DEV ------------------------------------------------------------------------------------- */
+# -i- Uncomment while on development branch to simulate the dev environment
+## --------------------------------------------------------------------------------------------- */
+
+# EXAMPLE= # ...
+
+## --- STAGE ----------------------------------------------------------------------------------- */
+# -i- Uncomment while on staging branch to simulate the stage environment
+## --------------------------------------------------------------------------------------------- */
+
+# EXAMPLE= # ...
+
+## --- PROD ------------------------------------------------------------------------------------ */
+# -i- Uncomment while on main branch to simulate the production environment
+## --------------------------------------------------------------------------------------------- */
+
+# EXAMPLE= # ...

apps/expo/app.json

@@ -8,6 +8,7 @@
     ],
     "web": {
       "bundler": "metro"
-    }
+    },
+    "userInterfaceStyle": "light"
   }
 }

apps/expo/app/(generated)/demos/forms/index.tsx

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'npx turbo @green-stack/core#link:routes', do not modify manually, it will get overwritten
+export { default } from '@app/core/routes/demos/forms/index'

apps/expo/app/(generated)/demos/images/index.tsx

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'npx turbo @green-stack/core#link:routes', do not modify manually, it will get overwritten
+export { default } from '@app/core/routes/demos/images/index'

apps/expo/app/(generated)/index.tsx

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'npx turbo @green-stack/core#link:routes', do not modify manually, it will get overwritten
+export { default } from '@app/core/routes/index'

apps/expo/app/(generated)/subpages/[slug]/index.tsx

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'npx turbo @green-stack/core#link:routes', do not modify manually, it will get overwritten
+export { default } from '@app/core/routes/subpages/[slug]/index'

apps/expo/app/ExpoRootLayout.tsx

@@ -1,24 +1,58 @@
+import { useEffect } from 'react'
 import { Stack } from 'expo-router'
-import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
-import UniversalRootLayout from '@app/core/screens/UniversalRootLayout'
+import { isWeb } from '@app/config'
+import UniversalAppProviders from '@app/screens/UniversalAppProviders'
+import UniversalRootLayout from '@app/screens/UniversalRootLayout'
+import { useColorScheme } from 'nativewind'
+import { Image as ExpoContextImage } from '@green-stack/components/Image.expo'
+import { Link as ExpoContextLink } from '@green-stack/navigation/Link.expo'
+import { useRouter as useExpoContextRouter } from '@green-stack/navigation/useRouter.expo'
+import { useRouteParams as useExpoRouteParams } from '@green-stack/navigation/useRouteParams.expo'
 
 // -i- Expo Router's layout setup is much simpler than Next.js's layout setup
 // -i- Since Expo doesn't require a custom document setup or server component root layout
 // -i- Use this file to apply your Expo specific layout setup:
 // -i- like rendering our Universal Layout and App Providers
 
+/* --- <ExpoRootLayout> ------------------------------------------------------------------------ */
+
 export default function ExpoRootLayout() {
-  return (
-    <UniversalAppProviders>
-      <UniversalRootLayout>
-        <Stack
-          screenOptions={{
-            headerShown: false,
-            contentStyle: { backgroundColor: '#FFFFFF' },
-            animation: 'slide_from_right',
-          }}
-        />
-      </UniversalRootLayout>
-    </UniversalAppProviders>
-  )
+    // Navigation
+    const expoContextRouter = useExpoContextRouter()
+
+    // Theme
+    const scheme = useColorScheme()
+
+    // -- Effects --
+
+    useEffect(() => {
+        // -i- Make nativewind dark mode work with Expo for Web
+        if (isWeb && typeof window !== 'undefined') {
+            const $html = document.querySelector('html')
+            const isDarkMode = scheme.colorScheme === 'dark'
+            $html?.classList.toggle('dark', isDarkMode)
+        }
+    }, [scheme.colorScheme])
+
+    // -- Render --
+
+    return (
+        <UniversalAppProviders
+            contextImage={ExpoContextImage}
+            contextLink={ExpoContextLink}
+            contextRouter={expoContextRouter}
+            useContextRouteParams={useExpoRouteParams}
+            isExpo
+        >
+            <UniversalRootLayout>
+                <Stack
+                    screenOptions={{
+                        headerShown: false,
+                        contentStyle: { backgroundColor: '#FFFFFF' },
+                        animation: 'slide_from_right',
+                    }}
+                />
+            </UniversalRootLayout>
+        </UniversalAppProviders>
+    )
 }

apps/expo/app/_layout.tsx

@@ -1,4 +1,5 @@
 import ExpoRootLayout from './ExpoRootLayout'
+import '../../next/global.css'
 
 // -i- Expo Router's layout setup is much simpler than Next.js's layout setup.
 // -i- Since Expo doesn't require a custom document setup or server component root layout.

apps/expo/babel.config.js

@@ -1,7 +1,9 @@
-// babel.config.js
 module.exports = function (api) {
   api.cache(true)
   return {
-    presets: ["babel-preset-expo"],
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
   }
 }

apps/expo/metro.config.js

@@ -1,11 +1,12 @@
 // -i- Copied from https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
 const { getDefaultConfig } = require('expo/metro-config')
+const { withNativeWind } = require('nativewind/metro')
 const path = require('path')
 
 // Find the project and workspace directories
 const projectRoot = __dirname
 const workspaceRoot = path.resolve(projectRoot, '../..')
-const config = getDefaultConfig(projectRoot)
+const config = getDefaultConfig(projectRoot, { isCSSEnabled: true })
 
 // 1. Watch all files within the monorepo
 config.watchFolders = [workspaceRoot]
@@ -20,4 +21,4 @@ config.resolver.nodeModulesPaths = [
 // config.resolver.disableHierarchicalLookup = true
 
 // Export the modified config
-module.exports = config
+module.exports = withNativeWind(config, { input: '../next/global.css' })

apps/expo/package.json

@@ -4,24 +4,24 @@
   "private": true,
   "main": "index.js",
   "dependencies": {
-    "@expo/metro-runtime": "^3.2.1",
-    "expo": "^51.0.8",
+    "@expo/metro-runtime": "^3.2.3",
+    "expo": "^51.0.31",
     "expo-constants": "~16.0.1",
+    "expo-image": "~1.12.15",
     "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.14",
+    "expo-router": "~3.5.23",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.1",
-    "react-native-safe-area-context": "4.10.1",
+    "react-native": "0.74.5",
+    "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "~3.31.1",
-    "react-native-web": "~0.19.11",
-    "expo-image": "~1.12.9"
+    "react-native-web": "~0.19.11"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@expo/next-adapter": "^6.0.0",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.79",
     "typescript": "5.3.3"
   },
   "scripts": {

apps/expo/tailwind.config.js

@@ -0,0 +1,16 @@
+const { universalTheme } = require('@app/core/tailwind.theme.js')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    '../../apps/**/*.{js,jsx,ts,tsx,md,mdx}',
+    '../../features/**/*.{js,jsx,ts,tsx,md,mdx}',
+    '../../packages/**/*.{js,jsx,ts,tsx,md,mdx}',
+  ],
+  presets: [require('nativewind/preset')],
+  theme: {
+    ...universalTheme,
+  },
+  plugins: [require('tailwindcss-animate')],
+}

apps/expo/tsconfig.json

@@ -3,6 +3,10 @@
     "include": [
         "**/*.ts",
         "**/*.tsx",
+        "../../apps/next/next-env.d.ts",
+        "../../packages/@green-stack-core/global.d.ts",
+        "../../features/@app-core/nativewind-env.d.ts",
+        "../../features/@app-core/appConfig.ts",
         "../../features/**/*.tsx",
         "../../features/**/*.ts",
         "../../packages/**/*.tsx",

apps/next/.env.example

@@ -1,4 +1,49 @@
+## --- Notes ----------------------------------------------------------------------------------- */
+
+## -i- The `.env.example` file can be copied into `.env.local` using `npx turbo env:local`
+## -i- For development, staging & production environments, check the next.js docs:
+## -i- https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+
+## -i- Note that you should treat environment variables as if they could be inlined in your bundle during builds & deployments
+## -i- This means dynamically retrieving environment variables from e.g. `process.env[someKey]` might not work
+## -i- It also means that you should never prefix with `NEXT_PUBLIC_` for sensitive / private keys
+
+## -i- We suggest that for each environment variable you add here, you also add an entry in `appConfig.ts`
+## -i- There, you can add logic like ```envValue: process.env.NEXT_PUBLIC_ENV_KEY || process.env.EXPO_PUBLIC_ENV_KEY```
+## -i- Where you would only define the NEXT_PUBLIC_ prefixed versions here in `.env.local` locally and using Next.js UI for deployed envs
+## -i- For environment variables you only be available server-side, you can omit `NEXT_PUBLIC_`
+
+## --- General --------------------------------------------------------------------------------- */
+## -i- Env vars that should always be present & the same locally, independent of the simulated environment
+## --------------------------------------------------------------------------------------------- */
+
+APP_SECRET="your-secret-here" # used for signing header context, generate a random string
+
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
 NEXT_PUBLIC_BACKEND_URL=http://localhost:3000
 NEXT_PUBLIC_API_URL=http://localhost:3000/api
 NEXT_PUBLIC_GRAPH_URL=http://localhost:3000/api/graphql
+
+## --- LOCAL ----------------------------------------------------------------------------------- */
+## -i- Defaults you might want to switch out for local development by commenting / uncommenting
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for full local dev...
+
+## --- DEV ------------------------------------------------------------------------------------- */
+# -i- Uncomment while on development branch to simulate the dev environment
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for the dev environment...
+
+## --- STAGE ----------------------------------------------------------------------------------- */
+# -i- Uncomment while on staging branch to simulate the stage environment
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for the stage environment...
+
+## --- PROD ------------------------------------------------------------------------------------ */
+# -i- Uncomment while on main branch to simulate the production environment
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for the production environment...

apps/next/app/(generated)/api/graphql/route.ts

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'npx turbo @green-stack/core#link:routes', do not modify manually, it will get overwritten
+export { GET, POST } from '@app/core/routes/api/graphql/route'

apps/next/app/(generated)/api/health/route.ts

@@ -0,0 +1,2 @@
+// -i- Automatically generated by 'npx turbo @green-stack/core#link:routes', do not modify manually, it will get overwritten
+export { GET, POST } from '@app/core/routes/api/health/route'

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

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

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

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

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

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

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

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