chore: Move core files to '@green-stack/core' package workspace

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/ExpoRootLayout.tsx

@@ -1,10 +1,10 @@
 import { Stack } from 'expo-router'
 import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
 import UniversalRootLayout from '@app/core/screens/UniversalRootLayout'
-import { Image as ExpoContextImage } from '@app/core/components/Image.expo'
-import { Link as ExpoContextLink } from '@app/core/navigation/Link.expo'
-import { useRouter as useExpoContextRouter } from '@app/core/navigation/useRouter.expo'
-import { useRouteParams as useExpoRouteParams } from '@app/core/navigation/useRouteParams.expo'
+import { Image as ExpoContextImage } from '@green-stack/core/components/Image.expo'
+import { Link as ExpoContextLink } from '@green-stack/core/navigation/Link.expo'
+import { useRouter as useExpoContextRouter } from '@green-stack/core/navigation/useRouter.expo'
+import { useRouteParams as useExpoRouteParams } from '@green-stack/core/navigation/useRouteParams.expo'
 import { NativeWindStyleSheet } from 'nativewind'
 
 // -i- Expo Router's layout setup is much simpler than Next.js's layout setup

apps/expo/tailwind.config.js

@@ -1,4 +1,4 @@
-const { universalTheme } = require('@app/core/tailwind.theme.cjs')
+const { universalTheme } = require('@app/core/tailwind.theme.js')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {

apps/expo/tsconfig.json

@@ -3,7 +3,11 @@
     "include": [
         "**/*.ts",
         "**/*.tsx",
-        "../../features/app-core/graphql-env.d.ts"
+        "../../features/app-core/graphql-env.d.ts",
+        "../../features/**/*.tsx",
+        "../../features/**/*.ts",
+        "../../packages/**/*.tsx",
+        "../../packages/**/*.ts"
     ],
     "exclude": ["node_modules"]
 }

apps/next/.env.example

@@ -1,4 +1,47 @@
+## --- 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
+## --------------------------------------------------------------------------------------------- */
+
 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/NextClientRootLayout.tsx

@@ -1,10 +1,10 @@
 'use client'
 import React from 'react'
 import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
-import { Image as NextContextImage } from '@app/core/components/Image.next'
-import { Link as NextContextLink } from '@app/core/navigation/Link.next'
-import { useRouter as useNextContextRouter } from '@app/core/navigation/useRouter.next'
-import { useRouteParams as useNextRouteParams } from '@app/core/navigation/useRouteParams.next'
+import { Image as NextContextImage } from '@green-stack/core/components/Image.next'
+import { Link as NextContextLink } from '@green-stack/core/navigation/Link.next'
+import { useRouter as useNextContextRouter } from '@green-stack/core/navigation/useRouter.next'
+import { useRouteParams as useNextRouteParams } from '@green-stack/core/navigation/useRouteParams.next'
 
 // -i- This is a regular react client component
 // -i- It's still rendered on the server during SSR, but it also hydrates on the client

apps/next/tailwind.config.js

@@ -1,4 +1,4 @@
-const { universalTheme } = require('@app/core/tailwind.theme.cjs')
+const { universalTheme } = require('@app/core/tailwind.theme.js')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {

apps/next/tsconfig.json

@@ -4,7 +4,11 @@
         "**/*.ts",
         "**/*.tsx",
         ".next/types/**/*.ts",
-        "../../features/app-core/graphql-env.d.ts"
+        "../../features/app-core/graphql-env.d.ts",
+        "../../features/**/*.tsx",
+        "../../features/**/*.ts",
+        "../../packages/**/*.tsx",
+        "../../packages/**/*.ts"
     ],
     "exclude": [
         "node_modules"

features/app-core/appConfig.ts → features/@app-core/appConfig.ts

@@ -1,19 +1,32 @@
 import Constants from 'expo-constants'
 import { Platform } from 'react-native'
 
-export const isLocalhost = Platform.OS === 'web' && globalThis?.location?.hostname === 'localhost'
-export const isExpoWebLocal = isLocalhost && globalThis?.location?.port === '8081'
-export const fallbackExpoWebHost = isExpoWebLocal ? "localhost" : ''
+/* --- Notes ----------------------------------------------------------------------------------- */
+
+// -i- Workpacke package '@green-stack/core' expects this file to be at '/features/app-core/appConfig.ts'
+// -i- Please keep it here to avoid issues
+
+/* --- Computed Fallbacks ---------------------------------------------------------------------- */
+
+export const isWebLocalhost = Platform.OS === 'web' && globalThis?.location?.hostname === 'localhost'
+export const isExpoWebLocal = isWebLocalhost && globalThis?.location?.port === '8081'
+export const fallbackExpoWebHost = isExpoWebLocal ? 'localhost' : ''
 
 export const expoDebuggerHost = Constants?.expoGoConfig?.debuggerHost || Constants.manifest2?.extra?.expoGo?.debuggerHost // prettier-ignore
 export const localURL = expoDebuggerHost?.split?.(':').shift() || fallbackExpoWebHost
+export const isExpoMobileLocal = !!expoDebuggerHost
 
 export const fallbackBaseURL = localURL ? `http://${localURL}:3000` : ''
 
 /** --- appConfig ------------------------------------------------------------------------------ */
 /** -i- App config variables powered by env vars universally, and including some expo contants config on mobile */
 export const appConfig = {
-    isExpoWebLocal: isExpoWebLocal,
+    // -i- Flags -i-
+    isLocal: isWebLocalhost || isExpoMobileLocal,
+    isWebLocalhost,
+    isExpoWebLocal,
+    isExpoMobileLocal,
+    // -i- Server URLs -i-
     baseURL: process.env.NEXT_PUBLIC_BASE_URL || process.env.EXPO_PUBLIC_BASE_URL || `${fallbackBaseURL}`, // prettier-ignore
     backendURL: process.env.NEXT_PUBLIC_BACKEND_URL || process.env.EXPO_PUBLIC_BACKEND_URL || `${fallbackBaseURL}`, // prettier-ignore
     apiURL: process.env.NEXT_PUBLIC_API_URL || process.env.EXPO_PUBLIC_API_URL || `${fallbackBaseURL}/api`, // prettier-ignore
@@ -23,5 +36,5 @@ export const appConfig = {
 /* --- Debug ----------------------------------------------------------------------------------- */
 
 if (Platform.OS !== 'web') {
-    if (appConfig.baseURL === '') console.warn('appConfig.baseURL is empty, check your environment variables')
+    if (appConfig.baseURL === '') console.warn('appConfig.baseURL is empty, you may be missing some environment variables')
 }

features/app-core/components/styled.tsx → features/@app-core/components/styled.tsx

@@ -1,7 +1,7 @@
 import { styled } from 'nativewind'
 import { Text as RNText, View as RNView } from 'react-native'
-import { Link as UniversalLink } from '../navigation/Link'
-import { Image as UniversalImage } from './Image'
+import { Link as UniversalLink } from '@green-stack/core/navigation/Link'
+import { Image as UniversalImage } from '@green-stack/core/components/Image'
 
 /* --- Primitives ------------------------------------------------------------------------------ */
 

features/app-core/graphql/graphqlQuery.web.ts → features/@app-core/graphql/graphqlQuery.web.ts

@@ -19,18 +19,23 @@ export const graphqlQuery = async <T extends TadaDocumentNode, R = ResultOf<T>>(
 
     if (isServer) {
         try {
+            // Lazy imports to avoid build issues
             const [
                 { graphql },
                 { executableSchema },
             ]  = await Promise.all([
                 import('graphql'),
                 import('./schema'),
             ])
+            // 💡 You might want to build the server-only request context here
+            console.log('-i- graphqlQuery() called serverside without request context set up.')
+            // Execute query with the executable schema
             const { data } = await graphql({
                 schema: executableSchema,
                 source: queryString,
                 variableValues: variables,
             }) as { data: R }
+            // Return resolver response
             return data
         } catch (error) {
             throw new Error(error)

features/app-core/graphql/schema.graphql → features/@app-core/graphql/schema.graphql

@@ -1,3 +1,5 @@
+## -i- This file was generated by the 'build-graphql-schema' script. Don't modify it manually.
+
 type Query {
   healthCheck(args: HealthCheckArgs): HealthCheckData!
 }
@@ -36,4 +38,4 @@ type HealthCheckData {
 
 schema {
   query: Query
-}
+}

features/app-core/graphql/schema.ts → features/@app-core/graphql/schema.ts

@@ -5,6 +5,11 @@ import type { RequestContext } from '../middleware/createRequestContext'
 import { typeDefs } from './typeDefs'
 import { healthCheck } from '../resolvers/healthCheck'
 
+/* --- Notes ----------------------------------------------------------------------------------- */
+
+// -i- Workspace package '@green-stack/core' expects this file to be at '/features/app-core/graphql/schema.ts'
+// -i- Please keep it here to avoid issues
+
 /** --- createResolver() ----------------------------------------------------------------------- */
 /** -i- Helper to wrap a resolver function and map context and args to it */
 export const createResolver = <T>(resolver: (input: { args: T, context: RequestContext }) => Promise<unknown>) => {

features/app-core/graphql/typeDefs.ts → features/@app-core/graphql/typeDefs.ts

@@ -1,3 +1,5 @@
+// -i- This file was generated by the 'build-graphql-schema' script. Don't modify it manually.
+
 export const typeDefs = `type Query {
   healthCheck(args: HealthCheckArgs): HealthCheckData!
 }
@@ -36,4 +38,4 @@ type HealthCheckData {
 
 schema {
   query: Query
-}`
+}`

features/app-core/package.json → features/@app-core/package.json

@@ -2,12 +2,10 @@
   "name": "@app/core",
   "version": "1.0.0",
   "private": true,
-  "type": "module",
   "dependencies": {
     "@apollo/server": "^4.10.2",
     "@as-integrations/next": "^3.0.0",
     "@tanstack/react-query": "^5.29.2",
-    "@graphql-tools/load-files": "^7.0.0",
     "gql.tada": "^1.4.3",
     "graphql-tag": "^2.12.6",
     "nativewind": "^2.0.11"
@@ -18,7 +16,5 @@
     "ts-node": "^10.9.2",
     "typescript": "5.3.3"
   },
-  "scripts": {
-    "build:schema": "node -r ts-node/register --loader ts-node/esm --experimental-specifier-resolution=node ./graphql/buildSchema.ts"
-  }
+  "scripts": {}
 }

features/app-core/routes/index.tsx → features/@app-core/routes/index.tsx

@@ -1,4 +1,4 @@
-import { UniversalRouteScreen } from '../navigation/UniversalRouteScreen'
+import { UniversalRouteScreen } from '../../../packages/@green-stack-core/navigation/UniversalRouteScreen'
 import HomeScreen, { queryBridge } from '../screens/HomeScreen'
 
 /* --- / --------------------------------------------------------------------------------------- */

features/app-core/screens/HomeScreen.tsx → features/@app-core/screens/HomeScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Link, Image, P, H3 } from '../components/styled'
 import { healthCheckFetcher } from '../resolvers/healthCheck.query'
-import { HydratedRouteProps, createQueryBridge } from '../navigation/UniversalRouteScreen.helpers'
+import { HydratedRouteProps, createQueryBridge } from '@green-stack/core/navigation/UniversalRouteScreen.helpers'
 
 /* --- Data Fetching --------------------------------------------------------------------------- */
 
@@ -23,10 +23,10 @@ const HomeScreen = (props: HydratedRouteProps<typeof queryBridge>) => {
   // -- Render --
 
   return (
-    <View className="flex flex-1 justify-center items-center">
-      <Image src={require('../assets/aetherspaceLogo.png')} width={60} height={60} className="mb-3" />
+    <View className="flex flex-1 justify-center items-center px-2">
+      <Image src={require('../assets/green-stack-logo.png')} width={60} height={60} className="mb-3" />
       <H3 className="text-center">Expo + Next.js app routing 🚀</H3>
-      <P className="mt-2 text-center text-sm">Open HomeScreen.tsx in features/app-core/screens to start working on your app</P>
+      <P className="mt-2 text-center text-sm">Open HomeScreen.tsx in features/@app-core/screens to start working on your app</P>
       <Link href="/subpages/aetherspace" className="mt-4 text-center text-base">
         Test navigation
       </Link>

features/app-core/screens/ImagesScreen.tsx → features/@app-core/screens/ImagesScreen.tsx

@@ -13,19 +13,19 @@ const ImagesScreen = () => {
         {`< Back`}
       </Link>
       {/* - 1 - */}
-      <Image src={require('../assets/aetherspaceLogo.png')} width={60} height={60} />
+      <Image src={require('../assets/green-stack-logo.png')} width={60} height={60} />
       <Text className="mt-2 mb-4 text-center text-base">src=static-require | width: 60 | height: 60</Text>
       {/* - 2 - */}
       <Image src="https://codinsonn.dev/_next/image?url=%2Fimg%2FCodelyFansLogoPic160x160.jpeg&w=256&q=75" width={60} height={60} />
       <Text className="mt-2 mb-4 text-center text-base">src=external-url | width: 60 | height: 60</Text>
       {/* - 3 - */}
       <View className="w-[60px] h-[80px] relative border-[1px] border-dashed border-black">
-        <Image src={require('../assets/aetherspaceLogo.png')} fill />
+        <Image src={require('../assets/green-stack-logo.png')} fill />
       </View>
       <Text className="mt-2 mb-4 text-center text-base">wrapper=50x80, relative | fill=true</Text>
       {/* - 4 - */}
       <View className="w-[80px] h-[60px] relative border-[1px] border-dashed border-black">
-        <Image src={require('../assets/aetherspaceLogo.png')} fill contentFit="contain" />
+        <Image src={require('../assets/green-stack-logo.png')} fill contentFit="contain" />
       </View>
       <Text className="mt-2 mb-4 text-center text-base">wrapper=80x60, relative | fill | contentFit=contain</Text>
     </View>

features/app-core/screens/SlugScreen.tsx → features/@app-core/screens/SlugScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { useRouteParams } from '@app/core/navigation/useRouteParams'
+import { useRouteParams } from '@green-stack/core/navigation/useRouteParams'
 import { View, Text, H3, P, Link } from '../components/styled'
-import { useRouter } from '../navigation/useRouter'
+import { useRouter } from '@green-stack/core/navigation/useRouter'
 
 /* --- <SlugScreen/> --------------------------------------------------------------------------- */
 

features/app-core/screens/UniversalAppProviders.tsx → features/@app-core/screens/UniversalAppProviders.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
-import { CoreContext, CoreContextType } from '../context/CoreContext'
-import { UniversalQueryClientProvider } from '../context/UniversalQueryClientProvider'
+import { CoreContext, CoreContextType } from '@green-stack/core/context/CoreContext'
+import { UniversalQueryClientProvider } from '@green-stack/core/context/UniversalQueryClientProvider'
 
 // -i- This is a regular react client component
 // -i- Use this file for adding universal app providers that work in both Expo and Next.js

features/app-core/tsconfig.json → features/@app-core/tsconfig.json

@@ -29,9 +29,6 @@
     "appConfig.ts",
     "**/*.ts",
     "**/*.tsx",
-    "../../apps/expo/app/ExpoRootLayout.tsx",
-    "../../apps/next/app/NextRootLayout.tsx",
-    "../../apps/next/app/ServerStylesProvider.tsx.tsx",
   ],
   "exclude": [
     "node_modules"