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

package/template/src/modules/auth/services/standalone-session.ts

@@ -0,0 +1,121 @@
+import {
+  AuthError,
+  createSessionCoordinator,
+  type HostCapabilities,
+  type SessionSnapshot,
+} from '@thanhphi/miniapp-sdk';
+import type { AuthActions } from '../../../common/mini-app/types';
+
+export interface OidcTokens {
+  accessToken: string;
+  refreshToken?: string;
+}
+
+export interface OidcOperations {
+  isConfigured: boolean;
+  authorize(): Promise<OidcTokens>;
+  refresh(refreshToken: string): Promise<OidcTokens>;
+}
+
+/** Standalone owns its session. No credential is written to Redux or disk. */
+export function createStandaloneSession(operations: OidcOperations) {
+  let snapshot: SessionSnapshot = { sessionId: null, accessToken: null };
+  let refreshToken: string | undefined;
+  let generation = 0;
+  let disposed = false;
+  let loginPending: Promise<void> | undefined;
+  const listeners = new Set<(value: SessionSnapshot) => void>();
+  const publish = (next: SessionSnapshot) => {
+    snapshot = next;
+    for (const listener of listeners) listener({ ...snapshot });
+  };
+  const signOut = () => {
+    generation += 1;
+    refreshToken = undefined;
+    loginPending = undefined;
+    publish({ sessionId: null, accessToken: null });
+  };
+  const coordinator = createSessionCoordinator({
+    getSnapshot: () => ({ ...snapshot }),
+    async refresh(before) {
+      const credential = refreshToken;
+      if (!credential) throw new AuthError('expired');
+      const currentGeneration = generation;
+      const result = await operations.refresh(credential);
+      if (
+        disposed ||
+        currentGeneration !== generation ||
+        before.sessionId !== snapshot.sessionId
+      ) {
+        throw new AuthError('session-changed');
+      }
+      if (!result.accessToken) throw new AuthError('expired');
+      refreshToken = result.refreshToken || credential;
+      publish({ ...snapshot, accessToken: result.accessToken });
+      return result.accessToken;
+    },
+  });
+  const actions: AuthActions = {
+    isConfigured: operations.isConfigured,
+    signIn() {
+      if (disposed) return Promise.reject(new AuthError('unavailable'));
+      if (!operations.isConfigured) {
+        return Promise.reject(
+          new AuthError(
+            'unavailable',
+            'Hãy cấu hình OIDC trong env trước khi đăng nhập.',
+          ),
+        );
+      }
+      if (loginPending) return loginPending;
+      const attempt = ++generation;
+      const request = Promise.resolve().then(async () => {
+        if (disposed || attempt !== generation)
+          throw new AuthError('session-changed');
+        const result = await operations.authorize();
+        if (disposed || attempt !== generation)
+          throw new AuthError('session-changed');
+        if (!result.accessToken) throw new AuthError('unavailable');
+        refreshToken = result.refreshToken;
+        publish({
+          sessionId: `standalone-${attempt}`,
+          accessToken: result.accessToken,
+        });
+      });
+      loginPending = request;
+      const release = () => {
+        if (loginPending === request) loginPending = undefined;
+      };
+      request.then(release, release);
+      return request;
+    },
+    // Clears the local app session; provider-wide logout is a separate host policy.
+    signOut,
+  };
+  const capabilities: HostCapabilities = {
+    auth: {
+      getSnapshot: () => ({ ...snapshot }),
+      refreshIfNeeded: coordinator.refreshIfNeeded,
+      subscribe(listener) {
+        if (disposed) return () => {};
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+    },
+    closeMiniApp: signOut,
+  };
+  return {
+    capabilities,
+    actions,
+    dispose() {
+      disposed = true;
+      generation += 1;
+      refreshToken = undefined;
+      snapshot = { sessionId: null, accessToken: null };
+      listeners.clear();
+      coordinator.dispose();
+    },
+  };
+}

package/template/src/navigation/MainStack.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  DefaultTheme,
+  DarkTheme,
+  NavigationContainer,
+  NavigationIndependentTree,
+} from '@react-navigation/native';
+import { useAppSelector } from '../redux/hooks';
+import {
+  selectIsAuthenticated,
+  selectSessionId,
+} from '../modules/auth/redux/selectors';
+import AuthenticationNavigator from '../modules/auth/navigation/AuthenticationNavigator';
+import ModuleNavigator from '../modules/__MODULE__/navigation/ModuleNavigator';
+import { useUnistyles } from 'react-native-unistyles';
+
+export function MainStack() {
+  const {
+    theme: { type, color },
+  } = useUnistyles();
+  const base = type === 'dark' ? DarkTheme : DefaultTheme;
+  const navigationTheme = {
+    ...base,
+    colors: {
+      ...base.colors,
+      background: color.base3,
+      card: color.background,
+      primary: color.primary500,
+      text: color.content1,
+      border: color.divider,
+      notification: color.danger,
+    },
+  };
+  const authenticated = useAppSelector(selectIsAuthenticated);
+  const sessionId = useAppSelector(selectSessionId);
+  return (
+    <NavigationIndependentTree>
+      <NavigationContainer
+        key={sessionId ?? 'signed-out'}
+        theme={navigationTheme}
+      >
+        {authenticated ? <ModuleNavigator /> : <AuthenticationNavigator />}
+      </NavigationContainer>
+    </NavigationIndependentTree>
+  );
+}

package/template/src/redux/RootReducers.ts

@@ -0,0 +1,8 @@
+import { combineReducers, createAction } from '@reduxjs/toolkit';
+import auth from '../modules/auth/redux/auth-slice';
+import home from '../modules/__MODULE__/redux/home-slice';
+
+export const resetApp = createAction('app/reset');
+const combined = combineReducers({ auth, home });
+export const rootReducer: typeof combined = (state, action) =>
+  combined(resetApp.match(action) ? undefined : state, action);

package/template/src/redux/hooks.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

package/template/src/redux/store.ts

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { rootReducer } from './RootReducers';
+
+/** Factory: each mounted mini app has its own state. Tokens are never persisted. */
+export function createAppStore() {
+  return configureStore({ reducer: rootReducer });
+}
+export type AppStore = ReturnType<typeof createAppStore>;
+export type RootState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];

package/template/src/services/application.ts

@@ -0,0 +1,87 @@
+import { QueryClient } from '@tanstack/react-query';
+import {
+  AuthError,
+  HttpError,
+  createMiniAppRuntime,
+  type HostCapabilities,
+  type SessionSnapshot,
+} from '@thanhphi/miniapp-sdk';
+import type { AuthActions } from '../common/mini-app/types';
+import { createApiClient } from '../library/networking/client';
+import { createAppStore } from '../redux/store';
+import { resetApp } from '../redux/RootReducers';
+import {
+  authenticationFailed,
+  sessionReceived,
+} from '../modules/auth/redux/auth-slice';
+
+export function createApplicationServices(
+  capabilities: HostCapabilities,
+  authActions?: AuthActions,
+) {
+  const runtime = createMiniAppRuntime(capabilities);
+  const store = createAppStore();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60_000,
+        retry: (count, error) =>
+          !(error instanceof AuthError) &&
+          !(
+            error instanceof HttpError &&
+            ['cancelled', 'disposed'].includes(error.kind)
+          ) &&
+          count < 1,
+      },
+    },
+  });
+  let session: SessionSnapshot | undefined;
+  const receiveSession = (next: SessionSnapshot) => {
+    if (
+      session?.sessionId !== next.sessionId ||
+      (session?.accessToken && !next.accessToken)
+    ) {
+      // Cancellation reaches SDK fetch through React Query's AbortSignal.
+      void queryClient.cancelQueries();
+      queryClient.clear();
+      store.dispatch(resetApp());
+    }
+    session = { ...next };
+    store.dispatch(
+      sessionReceived({
+        sessionId: next.sessionId,
+        authenticated: Boolean(next.sessionId && next.accessToken),
+      }),
+    );
+  };
+  const unsubscribe = runtime.auth.subscribe(receiveSession);
+  receiveSession(runtime.auth.getSnapshot());
+  const api = createApiClient(runtime.auth, (error, failedSessionId) => {
+    if (runtime.auth.getSnapshot().sessionId !== failedSessionId) return;
+    if (error.kind === 'expired') {
+      void queryClient.cancelQueries();
+      queryClient.clear();
+      authActions?.signOut();
+      store.dispatch(resetApp());
+      store.dispatch(
+        authenticationFailed('Phiên đăng nhập đã hết hạn. Hãy đăng nhập lại.'),
+      );
+    }
+  });
+  runtime.onDispose(() => {
+    unsubscribe();
+    api.dispose();
+    void queryClient.cancelQueries();
+    queryClient.clear();
+    store.dispatch(resetApp());
+  });
+  return {
+    runtime,
+    store,
+    queryClient,
+    api,
+    authActions,
+    dispose: runtime.dispose,
+  };
+}
+export type ApplicationServices = ReturnType<typeof createApplicationServices>;

package/template/src/themes/colors/dark.ts

@@ -0,0 +1,90 @@
+import type { UIColors } from '@thanhphi/ui360';
+
+export const darkColors = {
+  backdrop: 'rgba(0,0,0,0.5)',
+  background: '#18181B',
+  base2: '#27272A',
+  base3: '#27272A',
+  divider: '#3F3F46',
+  focus: '#006FEE',
+
+  content1: '#FAFAFA',
+  content2: '#ADAEB5',
+  content3: '#797A85',
+  content4: '#636470',
+
+  textPrimary: '#FFFFFF',
+
+  default: '#3F3F46',
+  primary: '#B50101',
+  secondary: '#F5A524',
+  success: '#17C964',
+  warning: '#F5A524',
+  danger: '#F5222D',
+
+  gray50: '#18181B',
+  gray100: '#27272A',
+  gray200: '#3F3F46',
+  gray300: '#52525B',
+  gray400: '#71717A',
+  gray500: '#A1A1AA',
+  gray600: '#D4D4D8',
+  gray700: '#E4E4E7',
+  gray800: '#F4F4F5',
+  gray900: '#FAFAFA',
+
+  primary50: '#240000',
+  primary100: '#480000',
+  primary200: '#5B0101',
+  primary300: '#6D0101',
+  primary400: '#910101',
+  primary500: '#B50101',
+  primary600: '#C43434',
+  primary700: '#D36767',
+  primary800: '#E19999',
+  primary900: '#F0CCCC',
+
+  secondary50: '#312107',
+  secondary100: '#62420E',
+  secondary200: '#7B5312',
+  secondary300: '#936316',
+  secondary400: '#C4841D',
+  secondary500: '#F5A524',
+  secondary600: '#F7B750',
+  secondary700: '#F9C97C',
+  secondary800: '#FBDBA7',
+  secondary900: '#FDEDD3',
+
+  success50: '#052814',
+  success100: '#095028',
+  success200: '#0E793C',
+  success300: '#12A150',
+  success400: '#17C964',
+  success500: '#45D483',
+  success600: '#74DFA2',
+  success700: '#A2E9C1',
+  success800: '#D1F4E0',
+  success900: '#E8FAF0',
+
+  warning50: '#312107',
+  warning100: '#62420E',
+  warning200: '#936316',
+  warning300: '#C4841D',
+  warning400: '#F5A524',
+  warning500: '#F7B750',
+  warning600: '#F9C97C',
+  warning700: '#FBDBA7',
+  warning800: '#FDEDD3',
+  warning900: '#FEFCE8',
+
+  danger50: '#310709',
+  danger100: '#620E12',
+  danger200: '#7B1117',
+  danger300: '#93141B',
+  danger400: '#C41B24',
+  danger500: '#F5222D',
+  danger600: '#F74E57',
+  danger700: '#F97A81',
+  danger800: '#FBA7AB',
+  danger900: '#FDD3D5',
+} as const satisfies UIColors;

package/template/src/themes/colors/light.ts

@@ -0,0 +1,90 @@
+import type { UIColors } from '@thanhphi/ui360';
+
+export const lightColors = {
+  backdrop: 'rgba(0,0,0,0.5)',
+  background: '#FFFFFF',
+  base2: '#FFF7F7',
+  base3: '#F7F7F7',
+  divider: '#F4F4F4',
+  focus: '#006FEE',
+
+  content1: '#232323',
+  content2: '#666666',
+  content3: '#AFB4B8',
+  content4: '#DBDFE2',
+
+  textPrimary: '#FFFFFF',
+
+  default: '#D4D4D8',
+  primary: '#B50101',
+  secondary: '#F5A524',
+  success: '#17C964',
+  warning: '#F5A524',
+  danger: '#F5222D',
+
+  gray50: '#FAFAFA',
+  gray100: '#F4F4F5',
+  gray200: '#E4E4E7',
+  gray300: '#D4D4D8',
+  gray400: '#A1A1AA',
+  gray500: '#71717A',
+  gray600: '#52525B',
+  gray700: '#3F3F46',
+  gray800: '#27272A',
+  gray900: '#18181B',
+
+  primary50: '#F8E6E6',
+  primary100: '#F0CCCC',
+  primary200: '#E19999',
+  primary300: '#D36767',
+  primary400: '#C43434',
+  primary500: '#B50101',
+  primary600: '#910101',
+  primary700: '#6D0101',
+  primary800: '#480000',
+  primary900: '#240000',
+
+  secondary50: '#FEF6E9',
+  secondary100: '#FDEDD3',
+  secondary200: '#FBDBA7',
+  secondary300: '#F9C97C',
+  secondary400: '#F7B750',
+  secondary500: '#F5A524',
+  secondary600: '#C4841D',
+  secondary700: '#936316',
+  secondary800: '#7B5312',
+  secondary900: '#62420E',
+
+  success50: '#E8FAF0',
+  success100: '#D1F4E0',
+  success200: '#A2E9C1',
+  success300: '#74DFA2',
+  success400: '#45D483',
+  success500: '#17C964',
+  success600: '#12A150',
+  success700: '#0E793C',
+  success800: '#095028',
+  success900: '#095028',
+
+  warning50: '#FEFCE8',
+  warning100: '#FDEDD3',
+  warning200: '#FBDBA7',
+  warning300: '#F9C97C',
+  warning400: '#F7B750',
+  warning500: '#F5A524',
+  warning600: '#C4841D',
+  warning700: '#936316',
+  warning800: '#62420E',
+  warning900: '#312107',
+
+  danger50: '#FEE9EA',
+  danger100: '#FDD3D5',
+  danger200: '#FBA7AB',
+  danger300: '#F97A81',
+  danger400: '#F74E57',
+  danger500: '#F5222D',
+  danger600: '#C41B24',
+  danger700: '#93141B',
+  danger800: '#620E12',
+  danger900: '#310709',
+} as const satisfies UIColors;

package/template/src/themes/index.ts

@@ -0,0 +1,38 @@
+import { lightColors } from './colors/light';
+import { darkColors } from './colors/dark';
+import { create360Theme, type UIThemeOptions } from '@thanhphi/ui360';
+import { StyleSheet } from 'react-native-unistyles';
+import { ratioW } from '../library/utils/responsive';
+
+function createAppTheme(mode: 'light' | 'dark', options: UIThemeOptions = {}) {
+  const colors = mode === 'dark' ? darkColors : lightColors;
+  return create360Theme({
+    // Match the 360 host; default tokens are scaled exactly once during creation.
+    scale: ratioW(1),
+    ...options,
+    mode,
+    colors: { ...colors, ...options.colors },
+  });
+}
+
+// Pure theme values: importing a screen must never reconfigure the host runtime.
+export const appThemes = {
+  light: createAppTheme('light'),
+  dark: createAppTheme('dark'),
+};
+
+/** Only standalone entries configure native themes; hosted App never calls this. */
+export function configureStandaloneTheme(options: UIThemeOptions = {}) {
+  StyleSheet.configure({
+    themes: {
+      light: createAppTheme('light', options),
+      dark: createAppTheme('dark', options),
+    },
+    settings: { initialTheme: options.mode ?? 'light' },
+  });
+}
+
+type AppThemes = typeof appThemes;
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes extends AppThemes {}
+}

package/template/src/themes/standalone.ts

@@ -0,0 +1,6 @@
+import type { UIThemeOptions } from '@thanhphi/ui360';
+import { configureStandaloneTheme } from './index';
+
+// Change dev-only palette/mode overrides here. Hosted App never imports this file.
+export const standaloneThemeOptions: UIThemeOptions = { mode: 'light' };
+configureStandaloneTheme(standaloneThemeOptions);

package/template/tsconfig.json

@@ -0,0 +1,65 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@auth/*": [
+        "./src/modules/auth/*"
+      ],
+      "@feature/*": [
+        "./src/modules/__MODULE__/*"
+      ],
+      "@assets/*": [
+        "./src/assets/*"
+      ],
+      "@common/*": [
+        "./src/common/*"
+      ],
+      "@components/*": [
+        "./src/library/components/*"
+      ],
+      "@env-config": [
+        "./env/env-config"
+      ],
+      "@modules/*": [
+        "./src/modules/*"
+      ],
+      "@navigation/*": [
+        "./src/navigation/*"
+      ],
+      "@networking/*": [
+        "./src/library/networking/*"
+      ],
+      "@redux/*": [
+        "./src/redux/*"
+      ],
+      "@storage/*": [
+        "./src/library/utils/storage/*"
+      ],
+      "@theme/*": [
+        "./src/themes/*"
+      ],
+      "@utils/*": [
+        "./src/library/utils/*"
+      ]
+    }
+  },
+  "include": [
+    "App.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "env/env-config.ts",
+    "declare/**/*.d.ts",
+    "__tests__/**/*.ts",
+    "__tests__/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "ios",
+    "android",
+    "build"
+  ]
+}