feat: Add useFormState() hook to @green-stack/core

Author: codinsonn

apps/next/next.config.js

@@ -1,7 +1,7 @@
 const { withExpo } = require("@expo/next-adapter");
 
 /** @type {import('next').NextConfig} */
-const nextConfig = withExpo({
+const mainNextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   transpilePackages: [
@@ -25,6 +25,11 @@ const nextConfig = withExpo({
       }
     ]
   }
-});
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = withExpo(mainNextConfig);
 
 module.exports = nextConfig;
+
+module.exports.mainNextConfig = mainNextConfig;

features/@app-core/components/BackButton.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import { View, Text, Link } from '../components/styled'
+import { View, Text, Link, Pressable } from '../components/styled'
 import { useRouter } from '@green-stack/navigation/useRouter'
 import { ArrowLeftFilled } from '../icons/ArrowLeftFilled'
 import { schema, z } from '@green-stack/schemas'
 
 /* --- Props ----------------------------------------------------------------------------------- */
 
 const BackButtonProps = schema('BackButtonProps', {
+  color: z.string().default('#FFFFFF'),
   backLink: z.string().default('/'),
 })
 
@@ -16,36 +17,48 @@ type BackButtonProps = z.input<typeof BackButtonProps>
 
 const BackButton = (props: BackButtonProps) => {
   // Props
-  const { backLink } = BackButtonProps.applyDefaults(props)
+  const { color, backLink } = BackButtonProps.applyDefaults(props)
 
   // Routing
   const { canGoBack, back } = useRouter()
 
   // Vars
   const showBackButton = canGoBack()
 
-  // -- Render --
+  // -- Prerender --
 
-  return (
-    <View className="flex flex-row absolute top-8 web:top-0 left-0 p-4 items-center">
-      <ArrowLeftFilled fill="#FFFFFF" size={18} />
+  const innerBackButton = (
+    <View className="flex flex-row p-4 items-center">
+      <ArrowLeftFilled fill={color} size={18} />
       <View className="w-[5px]" />
-      {showBackButton ? (
-        <Text
-          className="text-white text-lg"
-          onPress={back}
-        >
-          {`Back`}
-        </Text>
-      ) : (
-        <Link href={backLink} className="text-white text-lg no-underline">
-          {`Back`}
-        </Link>
-      )}
+      <Text
+        className={`text-lg text-[${color}]`}
+        style={{ color }}
+      >
+        {`Back`}
+      </Text>
     </View>
   )
+
+  // -- Render --
+
+  return showBackButton ? (
+    <Pressable
+        className={`absolute top-8 web:top-0 left-0`} // @ts-ignore
+        onPress={back}
+      >
+        {innerBackButton}
+      </Pressable>
+  ) : (
+    <Link
+      className={`absolute top-8 web:top-0 left-0 text-[${color}] no-underline`}
+      href={backLink}
+    >
+      {innerBackButton}
+    </Link>
+  )
 }
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
-export default BackButton
+export default BackButton

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

@@ -1,6 +1,10 @@
 import type { KnownRoutes } from '@app/registries/routeManifest.generated'
 import { styled } from 'nativewind'
-import { Text as RNText, View as RNView, ScrollView as RNScrollView } from 'react-native'
+import {
+    Text as RNText,
+    View as RNView,
+    Pressable as RNPressable,
+} from 'react-native'
 import { Link as UniversalLink } from '@green-stack/navigation/Link'
 import { UniversalLinkProps } from '@green-stack/navigation/Link.types'
 import { Image as UniversalImage } from '@green-stack/components/Image'
@@ -10,6 +14,7 @@ import { Image as UniversalImage } from '@green-stack/components/Image'
 export const View = styled(RNView, '')
 export const Text = styled(RNText, '')
 export const Image = styled(UniversalImage, '')
+export const Pressable = styled(RNPressable, '')
 
 /* --- Typography ------------------------------------------------------------------------------ */