create-m5kdev 0.33.0 → 0.34.0

package/templates/minimal-app/apps/expo/src/app/signup.tsx.tpl

@@ -1,193 +1,193 @@
-import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { USER_LOCALE_HEADER } from "@m5kdev/commons/modules/auth/auth.constants";
-import { resolveAppLocale } from "@m5kdev/commons/modules/auth/auth.locale";
-import { APP_LOCALE_CONFIG } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import { Link, useLocalSearchParams, useRouter } from "expo-router";
-import { Button } from "heroui-native";
-import { useEffect, useMemo, useState } from "react";
-import { Text, View } from "react-native";
-import { AuthScaffold } from "../components/AuthScaffold";
-import { FormTextField } from "../components/FormTextField";
-import { StatusText } from "../components/StatusText";
-import { isWaitlistProfile } from "../config";
-import { trpcClient } from "../lib/trpc";
-
-function singleParam(value: string | string[] | undefined) {
-  return Array.isArray(value) ? value[0] : value;
-}
-
-export default function SignupScreen() {
-  const authClient = useAuthClient();
-  const { registerSession } = useSession();
-  const router = useRouter();
-  const params = useLocalSearchParams<{
-    code?: string | string[];
-    email?: string | string[];
-    invitation?: string | string[];
-  }>();
-  const code = singleParam(params.code);
-  const invitation = singleParam(params.invitation);
-  const lockedEmail = singleParam(params.email);
-  const isPublicWaitlist = isWaitlistProfile && !code && !invitation;
-  const [email, setEmail] = useState(lockedEmail ?? "");
-  const [password, setPassword] = useState("");
-  const [status, setStatus] = useState<string | null>(null);
-  const [statusTone, setStatusTone] = useState<"error" | "success">("success");
-  const [isBusy, setIsBusy] = useState(false);
-  const [waitlistCodeStatus, setWaitlistCodeStatus] = useState<string | null>(null);
-  const [isValidatingWaitlistCode, setIsValidatingWaitlistCode] = useState(false);
-  const [waitlistCodeError, setWaitlistCodeError] = useState(false);
-
-  const waitlistStatusText = useMemo(() => {
-    if (!code) return null;
-    if (isValidatingWaitlistCode) return "Validating the invitation code...";
-    if (waitlistCodeError) return "An error occurred while validating the invitation code.";
-    if (waitlistCodeStatus === "VALID") return "Invitation code is valid. You can proceed.";
-    if (waitlistCodeStatus === "EXPIRED") return "Invitation code has expired.";
-    if (waitlistCodeStatus === "NOT_FOUND") return "Invitation code not found.";
-    if (waitlistCodeStatus) return "Invalid invitation code.";
-    return null;
-  }, [code, isValidatingWaitlistCode, waitlistCodeError, waitlistCodeStatus]);
-
-  useEffect(() => {
-    if (lockedEmail) setEmail(lockedEmail);
-  }, [lockedEmail]);
-
-  useEffect(() => {
-    let cancelled = false;
-    if (!code) {
-      setWaitlistCodeStatus(null);
-      setWaitlistCodeError(false);
-      return;
-    }
-
-    setIsValidatingWaitlistCode(true);
-    setWaitlistCodeError(false);
-    trpcClient.auth.validateWaitlistCode
-      .query({ code })
-      .then((result) => {
-        if (!cancelled) setWaitlistCodeStatus(result.status);
-      })
-      .catch(() => {
-        if (!cancelled) setWaitlistCodeError(true);
-      })
-      .finally(() => {
-        if (!cancelled) setIsValidatingWaitlistCode(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [code]);
-
-  const submitWaitlist = async () => {
-    setIsBusy(true);
-    setStatus(null);
-    try {
-      await trpcClient.auth.joinWaitlist.mutate({ email });
-      setStatusTone("success");
-      setStatus("Waitlist confirmation email sent");
-    } catch (error) {
-      setStatusTone("error");
-      setStatus(error instanceof Error ? error.message : "Failed to join waitlist");
-    } finally {
-      setIsBusy(false);
-    }
-  };
-
-  const submitSignup = async () => {
-    setIsBusy(true);
-    setStatus(null);
-    try {
-      const deviceLocale = Intl.DateTimeFormat().resolvedOptions().locale;
-      const userLocale = resolveAppLocale(deviceLocale, APP_LOCALE_CONFIG);
-      const result = await authClient.signUp.email(
-        {
-          name: email,
-          email,
-          password,
-        },
-        {
-          headers: {
-            "Waitlist-Invitation-Code": code ?? "",
-            "Organization-Invitation-Code": invitation ?? "",
-            [USER_LOCALE_HEADER]: userLocale,
-          },
-        }
-      );
-      if (result.error) {
-        setStatusTone("error");
-        setStatus(result.error.message ?? "Signup failed");
-        return;
-      }
-      if (isWaitlistProfile || invitation) {
-        const loginResult = await authClient.signIn.email({ email, password });
-        if (loginResult.error || !loginResult.data?.user) {
-          setStatusTone("error");
-          setStatus(loginResult.error?.message ?? "Authentication failed");
-          return;
-        }
-        registerSession(() => router.replace("/posts"));
-        return;
-      }
-      setStatusTone("success");
-      setStatus("Verification email sent");
-    } catch (error) {
-      setStatusTone("error");
-      setStatus(error instanceof Error ? error.message : "Signup failed");
-    } finally {
-      setIsBusy(false);
-    }
-  };
-
-  return (
-    <AuthScaffold
-      title={isPublicWaitlist ? "Join the waitlist" : "Sign up"}
-      description={
-        isPublicWaitlist
-          ? "Request access to the waitlist test profile."
-          : "Create a test account for the Expo app."
-      }
-    >
-      <View className="gap-4">
-        <FormTextField
-          label="Email"
-          testID={isPublicWaitlist ? "waitlist-email" : "signup-email"}
-          value={email}
-          onChangeText={setEmail}
-          keyboardType="email-address"
-          editable={!lockedEmail}
-        />
-        {isPublicWaitlist ? null : (
-          <FormTextField
-            label="Password"
-            testID="signup-password"
-            value={password}
-            onChangeText={setPassword}
-            secureTextEntry
-          />
-        )}
-        <StatusText
-          testID="waitlist-code-status"
-          tone={waitlistCodeStatus === "VALID" ? "success" : "error"}
-        >
-          {waitlistStatusText}
-        </StatusText>
-        <StatusText testID="auth-status" tone={statusTone}>
-          {status}
-        </StatusText>
-        <Button
-          testID={isPublicWaitlist ? "waitlist-submit" : "signup-submit"}
-          onPress={isPublicWaitlist ? submitWaitlist : submitSignup}
-          isDisabled={isBusy}
-        >
-          {isPublicWaitlist ? "Join the waitlist" : "Sign up"}
-        </Button>
-        <Link href="/login" asChild>
-          <Text className="text-center text-primary underline">Already have an account?</Text>
-        </Link>
-      </View>
-    </AuthScaffold>
-  );
-}
+import { USER_LOCALE_HEADER } from "@m5kdev/commons/modules/auth/auth.constants";
+import { resolveAppLocale } from "@m5kdev/commons/modules/auth/auth.locale";
+import { useAuthClient } from "@m5kdev/frontend/modules/auth/hooks/useAuthClient";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { APP_LOCALE_CONFIG } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
+import { Button } from "heroui-native";
+import { useEffect, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { AuthScaffold } from "../components/AuthScaffold";
+import { FormTextField } from "../components/FormTextField";
+import { StatusText } from "../components/StatusText";
+import { isWaitlistProfile } from "../config";
+import { trpcClient } from "../lib/trpc";
+
+function singleParam(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default function SignupScreen() {
+  const authClient = useAuthClient();
+  const { registerSession } = useSession();
+  const router = useRouter();
+  const params = useLocalSearchParams<{
+    code?: string | string[];
+    email?: string | string[];
+    invitation?: string | string[];
+  }>();
+  const code = singleParam(params.code);
+  const invitation = singleParam(params.invitation);
+  const lockedEmail = singleParam(params.email);
+  const isPublicWaitlist = isWaitlistProfile && !code && !invitation;
+  const [email, setEmail] = useState(lockedEmail ?? "");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [statusTone, setStatusTone] = useState<"error" | "success">("success");
+  const [isBusy, setIsBusy] = useState(false);
+  const [waitlistCodeStatus, setWaitlistCodeStatus] = useState<string | null>(null);
+  const [isValidatingWaitlistCode, setIsValidatingWaitlistCode] = useState(false);
+  const [waitlistCodeError, setWaitlistCodeError] = useState(false);
+
+  const waitlistStatusText = useMemo(() => {
+    if (!code) return null;
+    if (isValidatingWaitlistCode) return "Validating the invitation code...";
+    if (waitlistCodeError) return "An error occurred while validating the invitation code.";
+    if (waitlistCodeStatus === "VALID") return "Invitation code is valid. You can proceed.";
+    if (waitlistCodeStatus === "EXPIRED") return "Invitation code has expired.";
+    if (waitlistCodeStatus === "NOT_FOUND") return "Invitation code not found.";
+    if (waitlistCodeStatus) return "Invalid invitation code.";
+    return null;
+  }, [code, isValidatingWaitlistCode, waitlistCodeError, waitlistCodeStatus]);
+
+  useEffect(() => {
+    if (lockedEmail) setEmail(lockedEmail);
+  }, [lockedEmail]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!code) {
+      setWaitlistCodeStatus(null);
+      setWaitlistCodeError(false);
+      return;
+    }
+
+    setIsValidatingWaitlistCode(true);
+    setWaitlistCodeError(false);
+    trpcClient.auth.validateWaitlistCode
+      .query({ code })
+      .then((result) => {
+        if (!cancelled) setWaitlistCodeStatus(result.status);
+      })
+      .catch(() => {
+        if (!cancelled) setWaitlistCodeError(true);
+      })
+      .finally(() => {
+        if (!cancelled) setIsValidatingWaitlistCode(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  const submitWaitlist = async () => {
+    setIsBusy(true);
+    setStatus(null);
+    try {
+      await trpcClient.auth.joinWaitlist.mutate({ email });
+      setStatusTone("success");
+      setStatus("Waitlist confirmation email sent");
+    } catch (error) {
+      setStatusTone("error");
+      setStatus(error instanceof Error ? error.message : "Failed to join waitlist");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  const submitSignup = async () => {
+    setIsBusy(true);
+    setStatus(null);
+    try {
+      const deviceLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+      const userLocale = resolveAppLocale(deviceLocale, APP_LOCALE_CONFIG);
+      const result = await authClient.signUp.email(
+        {
+          name: email,
+          email,
+          password,
+        },
+        {
+          headers: {
+            "Waitlist-Invitation-Code": code ?? "",
+            "Organization-Invitation-Code": invitation ?? "",
+            [USER_LOCALE_HEADER]: userLocale,
+          },
+        }
+      );
+      if (result.error) {
+        setStatusTone("error");
+        setStatus(result.error.message ?? "Signup failed");
+        return;
+      }
+      if (isWaitlistProfile || invitation) {
+        const loginResult = await authClient.signIn.email({ email, password });
+        if (loginResult.error || !loginResult.data?.user) {
+          setStatusTone("error");
+          setStatus(loginResult.error?.message ?? "Authentication failed");
+          return;
+        }
+        registerSession(() => router.replace("/posts"));
+        return;
+      }
+      setStatusTone("success");
+      setStatus("Verification email sent");
+    } catch (error) {
+      setStatusTone("error");
+      setStatus(error instanceof Error ? error.message : "Signup failed");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <AuthScaffold
+      title={isPublicWaitlist ? "Join the waitlist" : "Sign up"}
+      description={
+        isPublicWaitlist
+          ? "Request access to the waitlist test profile."
+          : "Create a test account for the Expo app."
+      }
+    >
+      <View className="gap-4">
+        <FormTextField
+          label="Email"
+          testID={isPublicWaitlist ? "waitlist-email" : "signup-email"}
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          editable={!lockedEmail}
+        />
+        {isPublicWaitlist ? null : (
+          <FormTextField
+            label="Password"
+            testID="signup-password"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+          />
+        )}
+        <StatusText
+          testID="waitlist-code-status"
+          tone={waitlistCodeStatus === "VALID" ? "success" : "error"}
+        >
+          {waitlistStatusText}
+        </StatusText>
+        <StatusText testID="auth-status" tone={statusTone}>
+          {status}
+        </StatusText>
+        <Button
+          testID={isPublicWaitlist ? "waitlist-submit" : "signup-submit"}
+          onPress={isPublicWaitlist ? submitWaitlist : submitSignup}
+          isDisabled={isBusy}
+        >
+          {isPublicWaitlist ? "Join the waitlist" : "Sign up"}
+        </Button>
+        <Link href="/login" asChild>
+          <Text className="text-center text-primary underline">Already have an account?</Text>
+        </Link>
+      </View>
+    </AuthScaffold>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/AuthScaffold.tsx.tpl

@@ -1,34 +1,34 @@
-import { Card, Typography } from "heroui-native";
-import type { ReactNode } from "react";
-import { ScrollView, Text, View } from "react-native";
-import { appTitle } from "../config";
-
-export function AuthScaffold({
-  children,
-  description,
-  title,
-}: {
-  children: ReactNode;
-  description?: string;
-  title: string;
-}) {
-  return (
-    <ScrollView className="flex-1 bg-background" contentContainerClassName="flex-grow px-5 py-8">
-      <View className="flex-1 justify-center gap-5">
-        <View className="gap-2">
-          <Text className="text-center text-xs font-semibold uppercase tracking-widest text-default-500">
-            Expo auth fixture
-          </Text>
-          <Text className="text-center text-3xl font-semibold text-foreground">{appTitle}</Text>
-          <Typography.Paragraph className="text-center text-default-600">
-            {description ?? "Native auth screens backed by @m5kdev/frontend."}
-          </Typography.Paragraph>
-        </View>
-        <Card className="gap-5 p-5">
-          <Text className="text-xl font-semibold text-foreground">{title}</Text>
-          {children}
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}
+import { Card, Typography } from "heroui-native";
+import type { ReactNode } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { appTitle } from "../config";
+
+export function AuthScaffold({
+  children,
+  description,
+  title,
+}: {
+  children: ReactNode;
+  description?: string;
+  title: string;
+}) {
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerClassName="flex-grow px-5 py-8">
+      <View className="flex-1 justify-center gap-5">
+        <View className="gap-2">
+          <Text className="text-center text-xs font-semibold uppercase tracking-widest text-default-500">
+            Expo auth fixture
+          </Text>
+          <Text className="text-center text-3xl font-semibold text-foreground">{appTitle}</Text>
+          <Typography.Paragraph className="text-center text-default-600">
+            {description ?? "Native auth screens backed by @m5kdev/frontend."}
+          </Typography.Paragraph>
+        </View>
+        <Card className="gap-5 p-5">
+          <Text className="text-xl font-semibold text-foreground">{title}</Text>
+          {children}
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/FormTextField.tsx.tpl

@@ -1,37 +1,37 @@
-import { Input, Label, TextField } from "heroui-native";
-import type { TextInputProps } from "react-native";
-
-export function FormTextField({
-  label,
-  testID,
-  value,
-  onChangeText,
-  secureTextEntry,
-  keyboardType,
-  autoCapitalize = "none",
-  editable = true,
-}: {
-  label: string;
-  testID: string;
-  value: string;
-  onChangeText: (value: string) => void;
-  secureTextEntry?: boolean;
-  keyboardType?: TextInputProps["keyboardType"];
-  autoCapitalize?: TextInputProps["autoCapitalize"];
-  editable?: boolean;
-}) {
-  return (
-    <TextField isRequired isDisabled={!editable}>
-      <Label>{label}</Label>
-      <Input
-        testID={testID}
-        value={value}
-        onChangeText={onChangeText}
-        secureTextEntry={secureTextEntry}
-        keyboardType={keyboardType}
-        autoCapitalize={autoCapitalize}
-        editable={editable}
-      />
-    </TextField>
-  );
-}
+import { Input, Label, TextField } from "heroui-native";
+import type { TextInputProps } from "react-native";
+
+export function FormTextField({
+  label,
+  testID,
+  value,
+  onChangeText,
+  secureTextEntry,
+  keyboardType,
+  autoCapitalize = "none",
+  editable = true,
+}: {
+  label: string;
+  testID: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  secureTextEntry?: boolean;
+  keyboardType?: TextInputProps["keyboardType"];
+  autoCapitalize?: TextInputProps["autoCapitalize"];
+  editable?: boolean;
+}) {
+  return (
+    <TextField isRequired isDisabled={!editable}>
+      <Label>{label}</Label>
+      <Input
+        testID={testID}
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={secureTextEntry}
+        keyboardType={keyboardType}
+        autoCapitalize={autoCapitalize}
+        editable={editable}
+      />
+    </TextField>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/LoadingScreen.tsx.tpl

@@ -1,10 +1,10 @@
-import { Typography } from "heroui-native";
-import { View } from "react-native";
-
-export function LoadingScreen() {
-  return (
-    <View className="flex-1 items-center justify-center bg-background px-6">
-      <Typography.Paragraph testID="loading-state">Loading auth session...</Typography.Paragraph>
-    </View>
-  );
-}
+import { Typography } from "heroui-native";
+import { View } from "react-native";
+
+export function LoadingScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-background px-6">
+      <Typography.Paragraph testID="loading-state">Loading auth session...</Typography.Paragraph>
+    </View>
+  );
+}

package/templates/minimal-app/apps/expo/src/components/StatusText.tsx.tpl

@@ -1,22 +1,22 @@
-import { Text } from "react-native";
-
-export function StatusText({
-  children,
-  tone = "default",
-  testID,
-}: {
-  children: string | null;
-  tone?: "default" | "error" | "success";
-  testID?: string;
-}) {
-  if (!children) return null;
-
-  const toneClass =
-    tone === "error" ? "text-danger" : tone === "success" ? "text-success" : "text-default-600";
-
-  return (
-    <Text testID={testID} className={`text-sm ${toneClass}`}>
-      {children}
-    </Text>
-  );
-}
+import { Text } from "react-native";
+
+export function StatusText({
+  children,
+  tone = "default",
+  testID,
+}: {
+  children: string | null;
+  tone?: "default" | "error" | "success";
+  testID?: string;
+}) {
+  if (!children) return null;
+
+  const toneClass =
+    tone === "error" ? "text-danger" : tone === "success" ? "text-success" : "text-default-600";
+
+  return (
+    <Text testID={testID} className={`text-sm ${toneClass}`}>
+      {children}
+    </Text>
+  );
+}

package/templates/minimal-app/apps/expo/src/config.ts.tpl

@@ -1,9 +1,9 @@
-import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-
-export const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL ?? "http://127.0.0.1:8080";
-
-export const appUrl = process.env.EXPO_PUBLIC_APP_URL ?? "http://127.0.0.1:8081";
-
-export const isWaitlistProfile = process.env.EXPO_PUBLIC_ENABLE_WAITLIST === "true";
-
-export const appTitle = APP_NAME;
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+
+export const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL ?? "http://127.0.0.1:8080";
+
+export const appUrl = process.env.EXPO_PUBLIC_APP_URL ?? "http://127.0.0.1:8081";
+
+export const isWaitlistProfile = process.env.EXPO_PUBLIC_ENABLE_WAITLIST === "true";
+
+export const appTitle = APP_NAME;

package/templates/minimal-app/apps/expo/src/global.css.tpl

@@ -1,11 +1,11 @@
-@import "tailwindcss";
-@import "uniwind";
-
-@import "heroui-native/styles";
-
-/* End-user path: heroui-native lives in the project's node_modules, one
-   level up from this src/global.css file. */
-/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind v4 source directive. */
-@source '../node_modules/heroui-native/lib';
-/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind v4 source directive for workspace package classes. */
-@source '../../../../packages/frontend/dist/src/**/*.{js,ts,jsx,tsx}';
+@import "tailwindcss";
+@import "uniwind";
+
+@import "heroui-native/styles";
+
+/* End-user path: heroui-native lives in the project's node_modules, one
+   level up from this src/global.css file. */
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind v4 source directive. */
+@source "../node_modules/heroui-native/lib";
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind v4 source directive for workspace package classes. */
+@source "../../../../packages/frontend/dist/src/**/*.{js,ts,jsx,tsx}";