@thanhphi/create-360-miniapp 0.0.0-stage → 0.2.1

package/template/src/App.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { ApplicationProvider } from './common/mini-app/provider';
+import type { MiniAppProps } from './common/mini-app/types';
+import { MainStack } from './navigation/MainStack';
+import {
+  createApplicationServices,
+  type ApplicationServices,
+} from './services/application';
+
+export type { MiniAppProps } from './common/mini-app/types';
+
+/** Federation entry. Host authentication never falls back to standalone OIDC. */
+export function MyApp(props: MiniAppProps) {
+  const { hostCapabilities } = props;
+  const generation = React.useRef(0);
+  const [instance, setInstance] = React.useState<{
+    services: ApplicationServices;
+    key: number;
+  } | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (!hostCapabilities) return;
+    const services = createApplicationServices(hostCapabilities);
+    setInstance({ services, key: ++generation.current });
+    return () => {
+      services.dispose();
+    };
+  }, [hostCapabilities]);
+
+  // Fail at the integration boundary rather than treating an old host as standalone.
+  if (!hostCapabilities) {
+    throw new Error(
+      'Mini app chưa được truyền hostCapabilities. Vui lòng kiểm tra cấu hình tích hợp.',
+    );
+  }
+
+  if (!instance)
+    return (
+      <View style={{ flex: 1, justifyContent: 'center' }}>
+        <ActivityIndicator />
+      </View>
+    );
+  return (
+    <ApplicationProvider key={instance.key} services={instance.services}>
+      <MainStack />
+    </ApplicationProvider>
+  );
+}
+export default MyApp;

package/template/src/StandaloneApp.tsx

@@ -0,0 +1,43 @@
+import './themes/standalone';
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { ApplicationProvider } from './common/mini-app/provider';
+import { createStandaloneSession } from './modules/auth/services/standalone-session';
+import { oidcOperations } from './modules/auth/services/oidc';
+import { MainStack } from './navigation/MainStack';
+import {
+  createApplicationServices,
+  type ApplicationServices,
+} from './services/application';
+
+export default function StandaloneApp() {
+  const [services, setServices] = React.useState<ApplicationServices | null>(
+    null,
+  );
+  const generation = React.useRef(0);
+  // Allocate in the effect so StrictMode's setup/cleanup/setup gets fresh resources.
+  React.useLayoutEffect(() => {
+    const session = createStandaloneSession(oidcOperations);
+    const instance = createApplicationServices(
+      session.capabilities,
+      session.actions,
+    );
+    generation.current += 1;
+    setServices(instance);
+    return () => {
+      instance.dispose();
+      session.dispose();
+    };
+  }, []);
+  if (!services)
+    return (
+      <View style={{ flex: 1, justifyContent: 'center' }}>
+        <ActivityIndicator />
+      </View>
+    );
+  return (
+    <ApplicationProvider key={generation.current} services={services}>
+      <MainStack />
+    </ApplicationProvider>
+  );
+}

package/template/src/assets/icons/.gitkeep

@@ -0,0 +1 @@
+

package/template/src/assets/images/.gitkeep

@@ -0,0 +1 @@
+

package/template/src/assets/svg/.gitkeep

@@ -0,0 +1 @@
+

package/template/src/bootstrap.tsx

@@ -0,0 +1,7 @@
+import './themes/standalone';
+import 'react-native-gesture-handler';
+import { registerRootComponent } from 'expo';
+import StandaloneApp from './StandaloneApp';
+
+// Expo prebuild uses "main"; federation exposes src/App.tsx independently.
+registerRootComponent(StandaloneApp);

package/template/src/common/mini-app/provider.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { createUITheme, UIThemeProvider } from '@thanhphi/ui360';
+import { useUnistyles } from 'react-native-unistyles';
+import { uiGeometry } from '../../themes/ui-geometry';
+import type {} from '../../themes';
+import type { ApplicationServices } from '../../services/application';
+
+const RuntimeContext = React.createContext<ApplicationServices | null>(null);
+
+export function useApplicationServices() {
+  const value = React.use(RuntimeContext);
+  if (!value) throw new Error('ApplicationProvider is required.');
+  return value;
+}
+
+export function ApplicationProvider({
+  services,
+  children,
+}: React.PropsWithChildren<{ services: ApplicationServices }>) {
+  const {
+    theme: { type, color },
+  } = useUnistyles();
+  // Host supplies colors/mode; local UI360 supplies geometry without global setup.
+  const uiTheme = React.useMemo(
+    () => createUITheme({ mode: type, colors: color, ...uiGeometry }),
+    [type, color],
+  );
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <RuntimeContext value={services}>
+          <Provider store={services.store}>
+            <QueryClientProvider client={services.queryClient}>
+              <UIThemeProvider theme={uiTheme}>{children}</UIThemeProvider>
+            </QueryClientProvider>
+          </Provider>
+        </RuntimeContext>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}

package/template/src/common/mini-app/types.ts

@@ -0,0 +1,13 @@
+import type { HostCapabilities } from '@thanhphi/miniapp-sdk';
+
+export interface MiniAppProps {
+  /** Required hosted contract. Identity/tokens/refresh come from auth capabilities. */
+  hostCapabilities: HostCapabilities;
+  param_supper_app?: { notifications?: Record<string, unknown> };
+}
+
+export interface AuthActions {
+  isConfigured: boolean;
+  signIn(): Promise<void>;
+  signOut(): void;
+}

package/template/src/library/networking/client.ts

@@ -0,0 +1,53 @@
+import {
+  AuthError,
+  createHttpClient,
+  type AuthCapabilities,
+  type HttpRequestOptions,
+} from '@thanhphi/miniapp-sdk';
+import config from '@env-config';
+
+export function createApiClient(
+  auth: AuthCapabilities,
+  reportAuthError: (error: AuthError, sessionId: string | null) => void,
+) {
+  // Empty configuration must remain reviewable; no request is made until configured.
+  const http = config.BASE_URL.trim()
+    ? createHttpClient({
+        baseURL: config.BASE_URL,
+        timeoutMs: config.API_TIMEOUT_MS,
+        auth,
+      })
+    : null;
+  async function request<T>(
+    path: string,
+    options: HttpRequestOptions = {},
+  ): Promise<T> {
+    const before = auth.getSnapshot();
+    if (!before.sessionId || !before.accessToken)
+      throw new AuthError('expired');
+    if (!http)
+      throw new Error('Hãy cấu hình BASE_URL trong env trước khi gọi API.');
+    try {
+      const response = await http.request<T>(path, { ...options, auth: true });
+      return response.data;
+    } catch (error) {
+      if (error instanceof AuthError) reportAuthError(error, before.sessionId);
+      throw error;
+    }
+  }
+  return {
+    request,
+    get: <T>(path: string, options?: HttpRequestOptions) =>
+      request<T>(path, { ...options, method: 'GET' }),
+    post: <T>(path: string, options?: HttpRequestOptions) =>
+      request<T>(path, { ...options, method: 'POST' }),
+    put: <T>(path: string, options?: HttpRequestOptions) =>
+      request<T>(path, { ...options, method: 'PUT' }),
+    patch: <T>(path: string, options?: HttpRequestOptions) =>
+      request<T>(path, { ...options, method: 'PATCH' }),
+    delete: <T>(path: string, options?: HttpRequestOptions) =>
+      request<T>(path, { ...options, method: 'DELETE' }),
+    dispose: () => http?.dispose(),
+  };
+}
+export type ApiClient = ReturnType<typeof createApiClient>;

package/template/src/library/networking/errors.ts

@@ -0,0 +1,25 @@
+import { AuthError, HttpError } from '@thanhphi/miniapp-sdk';
+
+export function errorMessage(error: unknown): string {
+  if (error instanceof AuthError) {
+    if (error.kind === 'session-changed')
+      return 'Tài khoản đã thay đổi. Hãy tải lại dữ liệu.';
+    if (error.kind === 'expired')
+      return 'Phiên đăng nhập đã hết hạn. Hãy đăng nhập lại.';
+    return 'Không thể làm mới phiên. Hãy thử lại hoặc mở lại mini app.';
+  }
+  if (error instanceof HttpError) {
+    if (error.kind === 'timeout')
+      return 'Yêu cầu quá thời gian chờ. Hãy thử lại.';
+    if (error.kind === 'cancelled' || error.kind === 'disposed')
+      return 'Yêu cầu đã được huỷ.';
+    if (error.kind === 'http')
+      return `Máy chủ trả về lỗi ${error.status ?? ''}. Hãy thử lại.`;
+    if (error.kind === 'invalid-response')
+      return 'Dữ liệu trả về không đúng định dạng JSON.';
+    return 'Không thể kết nối máy chủ. Kiểm tra kết nối mạng rồi thử lại.';
+  }
+  return error instanceof Error
+    ? error.message
+    : 'Không thể hoàn tất yêu cầu. Hãy thử lại.';
+}

package/template/src/library/utils/responsive.ts

@@ -0,0 +1,7 @@
+import { Dimensions } from 'react-native';
+
+const DESIGN_WIDTH = 375;
+export const DEVICE_WIDTH = Dimensions.get('window').width;
+
+/** Use for exceptional app geometry only; theme tokens are already scaled. */
+export const ratioW = (value: number) => (value * DEVICE_WIDTH) / DESIGN_WIDTH;

package/template/src/modules/__MODULE__/components/ProfileCard.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { UIText } from '@thanhphi/ui360';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import type {} from '../../../themes';
+import { uiGeometry } from '../../../themes/ui-geometry';
+import type { Profile } from '../services/profile.service';
+
+export function ProfileCard({ profile }: { profile: Profile }) {
+  return (
+    <View style={styles.card}>
+      <UIText selectable variant="title" weight="600">
+        {profile.name || 'Tài khoản'}
+      </UIText>
+      {profile.email && (
+        <UIText selectable color="content2">
+          {profile.email}
+        </UIText>
+      )}
+      {profile.id && (
+        <UIText selectable color="content2">
+          Mã: {profile.id}
+        </UIText>
+      )}
+    </View>
+  );
+}
+
+const { spacing, radius } = uiGeometry;
+const styles = StyleSheet.create(({ color }) => ({
+  card: {
+    padding: spacing.xxl,
+    gap: spacing.sm,
+    borderRadius: radius.lg,
+    borderCurve: 'continuous',
+    backgroundColor: color.background,
+  },
+}));

package/template/src/modules/__MODULE__/navigation/ModuleNavigator.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from '../screens/home';
+
+export type ModuleStackParams = { Home: undefined };
+const Stack = createNativeStackNavigator<ModuleStackParams>();
+
+export default function ModuleNavigator() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ title: '__DISPLAY_NAME__' }}
+      />
+    </Stack.Navigator>
+  );
+}

package/template/src/modules/__MODULE__/redux/home-slice.ts

@@ -0,0 +1,13 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const homeSlice = createSlice({
+  name: '__MODULE__',
+  initialState: { profileRequested: false },
+  reducers: {
+    profileRequested(state) {
+      state.profileRequested = true;
+    },
+  },
+});
+export const { profileRequested } = homeSlice.actions;
+export default homeSlice.reducer;

package/template/src/modules/__MODULE__/screens/home/hooks/use-home.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { useApplicationServices } from '../../../../../common/mini-app/provider';
+import { useAppDispatch, useAppSelector } from '../../../../../redux/hooks';
+import {
+  selectIsAuthenticated,
+  selectSessionId,
+} from '../../../../auth/redux/selectors';
+import { profileRequested } from '../../../redux/home-slice';
+import { getProfile } from '../../../services/profile.service';
+
+export function useHome() {
+  const { api } = useApplicationServices();
+  const dispatch = useAppDispatch();
+  const sessionId = useAppSelector(selectSessionId);
+  const authenticated = useAppSelector(selectIsAuthenticated);
+  const requested = useAppSelector(state => state.home.profileRequested);
+  const query = useQuery({
+    queryKey: ['__MODULE__', 'profile', sessionId],
+    queryFn: ({ signal }) => getProfile(api, signal),
+    enabled: authenticated && requested,
+  });
+  return {
+    ...query,
+    requested,
+    loadProfile() {
+      if (requested) void query.refetch();
+      else dispatch(profileRequested());
+    },
+  };
+}

package/template/src/modules/__MODULE__/screens/home/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Button, UIText } from '@thanhphi/ui360';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { errorMessage } from '../../../../library/networking/errors';
+import type {} from '../../../../themes';
+import { uiGeometry } from '../../../../themes/ui-geometry';
+import { useAuth } from '../../../auth/hooks/use-auth';
+import { ProfileCard } from '../../components/ProfileCard';
+import { useHome } from './hooks/use-home';
+
+export default function HomeScreen() {
+  const {
+    theme: { color },
+  } = useUnistyles();
+  const { spacing } = uiGeometry;
+  const query = useHome();
+  const auth = useAuth();
+  const insets = useSafeAreaInsets();
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={[
+        styles.content,
+        { paddingBottom: insets.bottom + spacing.xxl },
+      ]}
+    >
+      {!query.requested && (
+        <View style={styles.intro}>
+          <UIText variant="title" weight="600" accessibilityRole="header">
+            Phiên đăng nhập đã sẵn sàng
+          </UIText>
+          <UIText color="content2">
+            Tải thông tin tài khoản khi bạn muốn kiểm tra kết nối.
+          </UIText>
+        </View>
+      )}
+      {query.isLoading && (
+        <ActivityIndicator
+          size="large"
+          color={color.primary500}
+          accessibilityLabel="Đang tải hồ sơ"
+        />
+      )}
+      {query.fetchStatus === 'paused' && (
+        <UIText selectable color="content2">
+          Kết nối đang tạm dừng. Thử lại khi có mạng.
+        </UIText>
+      )}
+      {query.error && (
+        <UIText selectable accessibilityRole="alert" color="danger">
+          {errorMessage(query.error)}
+        </UIText>
+      )}
+      {auth.message && (
+        <UIText selectable accessibilityRole="alert" color="danger">
+          {auth.message}
+        </UIText>
+      )}
+      {query.data === null && (
+        <UIText color="content2">
+          Chưa có thông tin tài khoản. Bạn có thể thử tải lại.
+        </UIText>
+      )}
+      {query.data && <ProfileCard profile={query.data} />}
+      <Button
+        label={
+          query.isFetching
+            ? 'Đang tải…'
+            : query.error
+            ? 'Thử lại'
+            : query.requested
+            ? 'Tải lại hồ sơ'
+            : 'Tải hồ sơ'
+        }
+        loading={query.isFetching}
+        onPress={query.loadProfile}
+      />
+      <Button
+        label={auth.isStandalone ? 'Đăng xuất khỏi ứng dụng' : 'Quay lại MySGR'}
+        onPress={() => {
+          if (auth.isStandalone) auth.signOut();
+          else void auth.closeMiniApp();
+        }}
+      />
+    </ScrollView>
+  );
+}
+
+const { spacing } = uiGeometry;
+const styles = StyleSheet.create(({ color }) => ({
+  content: {
+    padding: spacing.xxl,
+    gap: spacing.xxl,
+    flexGrow: 1,
+    backgroundColor: color.base3,
+  },
+  intro: { gap: spacing.lg },
+}));

package/template/src/modules/__MODULE__/services/profile.service.ts

@@ -0,0 +1,32 @@
+import type { ApiClient } from '../../../library/networking/client';
+
+export interface Profile {
+  id?: string;
+  name?: string;
+  email?: string;
+}
+
+/** Adapt this relative path and response shape to your backend before using it. */
+export const PROFILE_PATH = '/me';
+
+export async function getProfile(
+  api: ApiClient,
+  signal: AbortSignal,
+): Promise<Profile | null> {
+  const data = await api.get<unknown>(PROFILE_PATH, { signal });
+  if (data === null) return null;
+  if (typeof data !== 'object' || Array.isArray(data)) {
+    throw new Error(
+      'API hồ sơ cần trả về object hoặc null. Hãy cập nhật profile.service.ts theo backend.',
+    );
+  }
+  const value = data as Record<string, unknown>;
+  const stringValue = (key: string) =>
+    typeof value[key] === 'string' ? (value[key] as string) : undefined;
+  const profile = {
+    id: stringValue('id'),
+    name: stringValue('name'),
+    email: stringValue('email'),
+  };
+  return profile.id || profile.name || profile.email ? profile : null;
+}

package/template/src/modules/auth/hooks/use-auth.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useApplicationServices } from '../../../common/mini-app/provider';
+import { useAppSelector } from '../../../redux/hooks';
+import {
+  selectAuthMessage,
+  selectIsAuthenticated,
+  selectSessionId,
+} from '../redux/selectors';
+import { errorMessage } from '../../../library/networking/errors';
+
+export function useAuth() {
+  const { authActions, runtime } = useApplicationServices();
+  const authenticated = useAppSelector(selectIsAuthenticated);
+  const sessionId = useAppSelector(selectSessionId);
+  const sessionMessage = useAppSelector(selectAuthMessage);
+  const [pending, setPending] = React.useState(false);
+  const [message, setMessage] = React.useState<string | null>(null);
+  const mounted = React.useRef(true);
+  React.useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const signIn = async () => {
+    if (!authActions || pending) return;
+    setPending(true);
+    setMessage(null);
+    try {
+      await authActions.signIn();
+    } catch (error) {
+      if (mounted.current) setMessage(errorMessage(error));
+    } finally {
+      if (mounted.current) setPending(false);
+    }
+  };
+  return {
+    authenticated,
+    sessionId,
+    message: message ?? sessionMessage,
+    pending,
+    isStandalone: Boolean(authActions),
+    canSignIn: Boolean(authActions?.isConfigured),
+    signIn,
+    signOut: () => authActions?.signOut(),
+    async closeMiniApp() {
+      try {
+        await runtime.capabilities.closeMiniApp();
+      } catch (error) {
+        if (mounted.current) setMessage(errorMessage(error));
+      }
+    },
+  };
+}

package/template/src/modules/auth/navigation/AuthenticationNavigator.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import LoginScreen from '../screens/LoginScreen';
+
+const Stack = createNativeStackNavigator<{ Login: undefined }>();
+export default function AuthenticationNavigator() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Login"
+        component={LoginScreen}
+        options={{ title: '__DISPLAY_NAME__' }}
+      />
+    </Stack.Navigator>
+  );
+}

package/template/src/modules/auth/redux/auth-slice.ts

@@ -0,0 +1,36 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export interface AuthState {
+  sessionId: string | null;
+  authenticated: boolean;
+  message: string | null;
+}
+const initialState: AuthState = {
+  sessionId: null,
+  authenticated: false,
+  message: null,
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    sessionReceived(
+      state,
+      {
+        payload,
+      }: PayloadAction<Pick<AuthState, 'sessionId' | 'authenticated'>>,
+    ) {
+      state.sessionId = payload.sessionId;
+      state.authenticated = payload.authenticated;
+      state.message = null;
+    },
+    authenticationFailed(state, { payload }: PayloadAction<string>) {
+      state.authenticated = false;
+      state.message = payload;
+    },
+  },
+});
+
+export const { sessionReceived, authenticationFailed } = authSlice.actions;
+export default authSlice.reducer;

package/template/src/modules/auth/redux/selectors.ts

@@ -0,0 +1,6 @@
+import type { RootState } from '../../../redux/store';
+
+export const selectIsAuthenticated = (state: RootState) =>
+  state.auth.authenticated;
+export const selectSessionId = (state: RootState) => state.auth.sessionId;
+export const selectAuthMessage = (state: RootState) => state.auth.message;