@effijs/templates 0.0.0-stage → 1.0.0-alpha.0

package/platforms/react-native/generators/init/files/feature/feature.hooks.ts

@@ -0,0 +1,15 @@
+import { EffiJS, ProcessBuilder } from '@effijs/common';
+import { useEffect, useMemo } from 'react';
+
+import { useStore } from '@components';
+
+function useFeature<T>(name: string): T {
+  useEffect(() => () => EffiJS.unlink(name));
+  return useMemo(() => EffiJS.resolve<T>(name), [name]);
+}
+
+function useProcess(id: string) {
+  return useStore(ProcessBuilder.processRegistryStore, id as never) as ProcessBuilder.ProcessRecord | undefined;
+}
+
+export { useFeature, useProcess };

package/platforms/react-native/generators/init/files/feature/index.ts

@@ -0,0 +1,3 @@
+import './auth';
+import './profile';
+// forge:feature

package/platforms/react-native/generators/init/files/feature/profile/Profile.Screen.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+
+import { Button, Form, Grid, Screen, Text, ThemePicker, useStore } from '@components';
+import { useProfileFeature } from '@feature/profile/profile.hooks';
+
+export default function ProfileScreen() {
+  const feature = useProfileFeature();
+  const profile = useStore(feature.store, 'profile');
+  const theme = useStore(feature.store, 'theme');
+
+  return (
+    <Screen>
+      <Screen.HeaderTab>
+        <Grid mh-s row align-center>
+          <Text title-l color="outline" weight={600}>
+            Profile
+          </Text>
+        </Grid>
+      </Screen.HeaderTab>
+      <Screen.Content sa-b>
+        <Grid mh-s mt-l gap-m>
+          {profile?.avatar ? <Image source={{ uri: profile.avatar }} style={styles.avatar} /> : null}
+          {profile?.name ? (
+            <Text display-s color="outline">
+              {profile?.name}
+            </Text>
+          ) : null}
+          {profile?.email ? (
+            <Text body-m color="onSurfaceVariant">
+              {profile?.email}
+            </Text>
+          ) : null}
+          {profile?.role ? (
+            <Text body-s color="onSurfaceVariant">
+              {profile?.role}
+            </Text>
+          ) : null}
+          <Form.Element.Label>Theme</Form.Element.Label>
+          <ThemePicker value={theme} />
+          <Button type="filled" color="error" leadingIcon="log-out" mt-l onPress={() => feature.logout()}>
+            Logout
+          </Button>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  avatar: { width: 96, height: 96, borderRadius: 48 },
+});

package/platforms/react-native/generators/init/files/feature/profile/index.ts

@@ -0,0 +1 @@
+import './profile.feature';

package/platforms/react-native/generators/init/files/feature/profile/profile.feature.ts

@@ -0,0 +1,18 @@
+import { Entity, EffiJS } from '@effijs/common';
+
+import { AuthService } from '@entity/auth/auth.service';
+import { AuthStore } from '@entity/auth/auth.store';
+
+@Entity.Decorators.Feature()
+export class ProfileFeature {
+  constructor(
+    readonly store: AuthStore,
+    private authService: AuthService,
+  ) {}
+
+  logout() {
+    return this.authService.logout();
+  }
+}
+
+EffiJS.createFeature(ProfileFeature, 'ProfileFeature');

package/platforms/react-native/generators/init/files/feature/profile/profile.hooks.ts

@@ -0,0 +1,7 @@
+import { useFeature } from '@feature/feature.hooks';
+
+import type { ProfileFeature } from './profile.feature';
+
+export function useProfileFeature() {
+  return useFeature<ProfileFeature>('ProfileFeature');
+}

package/platforms/react-native/generators/init/files/index.ts

@@ -0,0 +1,16 @@
+import { PropertyManager } from '@effijs/props-manager';
+
+import { theme } from '@theme';
+
+import '@widgets';
+import '@navigation';
+import '@services';
+import '@entity';
+import '@feature';
+import '@app';
+
+PropertyManager.registerProvider(
+  'theme',
+  () => theme,
+  listener => theme.subscribe(listener),
+);

package/platforms/react-native/generators/init/files/navigation/index.ts

@@ -0,0 +1,18 @@
+import { EffiJS, Entity } from '@effijs/common';
+
+import { NavigationApp } from './navigation.app';
+import { NavigationFeatures } from './navigation.features';
+import { NavigationTabs } from './navigation.tabs';
+import { NavigationWidgets } from './navigation.widgets';
+
+@Entity.Decorators.Module()
+export class Navigation {
+  constructor(
+    public app: NavigationApp,
+    public features: NavigationFeatures,
+    public tabs: NavigationTabs,
+    public widgets: NavigationWidgets,
+  ) {}
+}
+
+EffiJS.create(Navigation, 'Navigation');

package/platforms/react-native/generators/init/files/navigation/navigation.app.ts

@@ -0,0 +1,58 @@
+import { Navigation, Decorators } from '@effijs/navigation-react-native';
+import { Options } from 'react-native-navigation';
+
+import OnboardingScreen from '@app/splash/Onboarding.Screen';
+import SplashScreen from '@app/splash/Splash.Screen';
+import SignInScreen from '@feature/auth/sign-in/SignIn.Screen';
+import SignUpScreen from '@feature/auth/sign-up/SignUp.Screen';
+import { theme } from '@theme';
+
+const navigationScreenOptions = {
+  modalPresentationStyle: 'overFullScreen',
+  modalTransitionStyle: 'crossDissolve',
+  blurOnUnmount: true,
+  topBar: { visible: false },
+  popGesture: true,
+  layout: {
+    orientation: ['portrait'],
+    componentBackgroundColor: theme.color.background,
+  },
+  bottomTabs: {
+    preferLargeIcons: true,
+    titleDisplayMode: 'alwaysShow',
+    backgroundColor: 'rgb(255,255,255)',
+  },
+  bottomTab: {
+    iconHeight: 32,
+    iconWidth: 32,
+    iconColor: theme.color.primary,
+    selectedIconColor: theme.color.outline,
+  },
+} as Options;
+
+@Decorators.Navigation('App')
+export class NavigationApp extends Navigation {
+  @Decorators.AppLaunch(navigationScreenOptions)
+  @Decorators.Register('Splash', SplashScreen)
+  goToSplash() {
+    return super.root('Splash', 'component');
+  }
+
+  @Decorators.Register('Onboarding', OnboardingScreen)
+  goToOnboarding() {
+    return super.root('Onboarding', 'component');
+  }
+
+  @Decorators.Register('SignIn', SignInScreen)
+  private handleSignIn() {
+    return super.root('SignIn', 'stack');
+  }
+
+  @Decorators.Register('SignUp', SignUpScreen)
+  private handleSignUp() {
+    return super.root('SignUp', 'stack');
+  }
+
+  goToSignIn = () => this.handleSignIn();
+  goToSignUp = () => this.handleSignUp();
+}

package/platforms/react-native/generators/init/files/navigation/navigation.features.ts

@@ -0,0 +1,9 @@
+import { Entity } from '@effijs/common';
+// forge:navigation-features-import
+
+@Entity.Decorators.Feature()
+export class NavigationFeatures {
+  constructor(
+    // forge:navigation-features
+  ) {}
+}

package/platforms/react-native/generators/init/files/navigation/navigation.hooks.ts

@@ -0,0 +1,5 @@
+import { EffiJS } from '@effijs/common';
+
+export function useNavigation() {
+  return EffiJS.resolve<import('./index').Navigation>('Navigation');
+}

package/platforms/react-native/generators/init/files/navigation/navigation.tabs.ts

@@ -0,0 +1,55 @@
+import { Navigation, Decorators } from '@effijs/navigation-react-native';
+import { Navigation as RNNavigation } from 'react-native-navigation';
+
+import HomeTab from '@app/tabs/home/Home.tab';
+import ProfileTab from '@app/tabs/profile/Profile.tab';
+import theme from '@theme/theme';
+
+@Decorators.Navigation('Tabs')
+export class NavigationTabs extends Navigation {
+  @Decorators.Register('Home', HomeTab)
+  homeTab() {}
+
+  @Decorators.Register('Profile', ProfileTab)
+  profileTab() {}
+
+  // forge:navigation-tabs-register
+
+  goToTabs = () => {
+    RNNavigation.setRoot({
+      root: {
+        bottomTabs: {
+          children: [
+            {
+              stack: {
+                children: [{ component: { name: 'Tabs.Home', id: 'Tabs.Home' } }],
+                options: {
+                  bottomTab: {
+                    text: 'Home',
+                    icon: require('@icons/tabs/icon-1.png'),
+                    iconColor: theme.color.outline,
+                    selectedIconColor: theme.color.primary,
+                  },
+                },
+              },
+            },
+            {
+              stack: {
+                children: [{ component: { name: 'Tabs.Profile', id: 'Tabs.Profile' } }],
+                options: {
+                  bottomTab: {
+                    text: 'Profile',
+                    icon: require('@icons/tabs/icon-2.png'),
+                    iconColor: theme.color.outline,
+                    selectedIconColor: theme.color.primary,
+                  },
+                },
+              },
+            },
+            // forge:navigation-tabs
+          ],
+        },
+      },
+    });
+  };
+}

package/platforms/react-native/generators/init/files/navigation/navigation.widgets.ts

@@ -0,0 +1,23 @@
+import { Navigation, Decorators } from '@effijs/navigation-react-native';
+
+import SafeAreaHOC from '@components/Screen/SafeAreaHOC';
+import { ToastOverlay, ToastService, type IToastShowOptions } from '@widgets/toast';
+
+@Decorators.Navigation('Widgets')
+export class NavigationWidgets extends Navigation {
+  constructor(private toastService: ToastService) {
+    super();
+  }
+
+  @Decorators.Register('Toast', SafeAreaHOC(ToastOverlay))
+  openToastOverlay() {
+    super.navigate('Toast').overlay({});
+  }
+
+  showToast(options: IToastShowOptions) {
+    const shouldOpenOverlay = this.toastService.show(options);
+    if (shouldOpenOverlay) {
+      this.openToastOverlay();
+    }
+  }
+}

package/platforms/react-native/generators/init/files/services/http/http.base.ts

@@ -0,0 +1,69 @@
+import { Http, Entity } from '@effijs/common';
+
+import { HttpService } from './http.service';
+
+export abstract class HttpBase {
+  protected abstract url: string;
+  protected version: string = 'v1';
+
+  constructor(@Entity.Decorators.Inject() protected httpService: HttpService) {}
+
+  protected async request<R extends (data: unknown) => unknown>(
+    options: Http.IOptions & { version?: string; resource?: string; withoutMiddlewares?: boolean },
+    dto: {
+      response: R;
+      params?: (data: unknown) => Record<string, any>;
+      data?: (data: unknown) => unknown;
+    },
+  ): Promise<Http.IResponse<ReturnType<R>>>;
+
+  // eslint-disable-next-line no-dupe-class-members
+  protected async request<T = any>(
+    options: Http.IOptions & { version?: string; resource?: string; withoutMiddlewares?: boolean },
+    dto?: {
+      response?: undefined;
+      params?: (data: unknown) => Record<string, any>;
+      data?: (data: unknown) => unknown;
+    },
+  ): Promise<Http.IResponse<T>>;
+
+  // eslint-disable-next-line no-dupe-class-members
+  protected async request<T = any, R extends (data: unknown) => unknown = (data: unknown) => unknown>(
+    {
+      url,
+      version,
+      resource,
+      withoutMiddlewares,
+      ...options
+    }: Http.IOptions & { version?: string; resource?: string; withoutMiddlewares?: boolean },
+    dto?: {
+      response?: R;
+      params?: (data: unknown) => Record<string, any>;
+      data?: (data: unknown) => unknown;
+    },
+  ): Promise<ReturnType<R> | Http.IResponse<T>> {
+    if (dto?.params && options.params) {
+      options.params = dto.params(options.params);
+    }
+    if (dto?.data && options.data) {
+      options.data = dto.data(options.data);
+    }
+
+    const request = withoutMiddlewares
+      ? this.httpService.fetch.bind(this.httpService)
+      : this.httpService.request.bind(this.httpService);
+
+    const response = await request({
+      url: [version || this.version, resource !== undefined ? resource : this.url, url].filter(u => u).join('/'),
+      ...options,
+    });
+
+    if (dto?.response) {
+      // console.log('response <<<', JSON.stringify(response.data, null, 2));
+      response.data = dto.response(response.data);
+      // console.log('response >>>', JSON.stringify(response.data, null, 2));
+    }
+
+    return response;
+  }
+}

package/platforms/react-native/generators/init/files/services/http/http.error.ts

@@ -0,0 +1,10 @@
+import { AppError } from '@app/app.error';
+
+export class HttpError extends AppError {
+  constructor(
+    message: string,
+    public readonly data?: Record<string, string[]>,
+  ) {
+    super(message);
+  }
+}

package/platforms/react-native/generators/init/files/services/http/http.service.ts

@@ -0,0 +1,24 @@
+import { Http, AbortService, Entity } from '@effijs/common';
+
+import configs from '@configs';
+import { MiddlewareRegistry } from '@services/http/middleware/middleware.registry';
+
+@Entity.Decorators.Service()
+export class HttpService<O extends Http.IOptions = any> extends Http.Common {
+  private readonly withMiddleware;
+
+  constructor(
+    @Entity.Decorators.Inject() protected abortService: AbortService,
+    @Entity.Decorators.Inject() private middlewareRegistry: MiddlewareRegistry<O, any>,
+  ) {
+    super(configs.API_URL);
+
+    middlewareRegistry.assertRegistered('error', 'token');
+
+    this.withMiddleware = this.middlewareRegistry.with('error', 'token')(options => super.request(options));
+  }
+
+  request<R = any>(options: O): Promise<Http.IResponse<R>> {
+    return this.withMiddleware(options);
+  }
+}

package/platforms/react-native/generators/init/files/services/http/middleware/index.ts

@@ -0,0 +1,12 @@
+import { Entity } from '@effijs/common';
+
+import { HttpErrorMiddleware } from './middleware.error';
+import { TokenMiddleware } from './middleware.token';
+
+@Entity.Decorators.Service()
+export class Middlewares {
+  constructor(
+    private readonly error: HttpErrorMiddleware,
+    private readonly token: TokenMiddleware,
+  ) {}
+}

package/platforms/react-native/generators/init/files/services/http/middleware/middleware.error.ts

@@ -0,0 +1,36 @@
+import { Middleware, Http, Entity } from '@effijs/common';
+
+import { HttpError } from '@services/http/http.error';
+
+import { MiddlewareRegistry } from './middleware.registry';
+
+function readMessage(payload: any): string | undefined {
+  const message = payload?.data?.message ?? payload?.message;
+  if (Array.isArray(message)) {
+    return message[0];
+  }
+  return message;
+}
+
+@Entity.Decorators.Service()
+export class HttpErrorMiddleware<
+  T extends Http.IOptions = Http.IOptions,
+  R extends Http.IResponse = Http.IResponse,
+> extends Middleware.AsMiddleware<T, R> {
+  constructor(@Entity.Decorators.Inject() registry: MiddlewareRegistry<T, R>) {
+    super('error', registry);
+  }
+
+  async middleware(data: T, next: Middleware.NextFn<T, R>) {
+    const res = await next(data);
+
+    if (res.status >= 300) {
+      throw new HttpError(
+        readMessage(res.data) || 'Something went wrong',
+        res?.data?.data?.errors || res?.data?.errors,
+      );
+    }
+
+    return res;
+  }
+}

package/platforms/react-native/generators/init/files/services/http/middleware/middleware.registry.ts

@@ -0,0 +1,3 @@
+import { Middleware } from '@effijs/common';
+
+export class MiddlewareRegistry<T, R> extends Middleware.MiddlewareRegistry<T, R> {}

package/platforms/react-native/generators/init/files/services/http/middleware/middleware.token.ts

@@ -0,0 +1,97 @@
+import { Middleware, Http, Entity } from '@effijs/common';
+
+import { AuthService } from '@entity/auth/auth.service';
+
+import { MiddlewareRegistry } from './middleware.registry';
+
+const RETRIED = Symbol('token-retried');
+
+type TokenRequest = Http.IOptions & { [RETRIED]?: boolean };
+
+@Entity.Decorators.Service()
+export class TokenMiddleware<
+  T extends Http.IOptions = Http.IOptions,
+  R extends Http.IResponse = Http.IResponse,
+> extends Middleware.AsMiddleware<T, R> {
+  private refreshPromise?: Promise<boolean>;
+
+  constructor(
+    @Entity.Decorators.Inject() private registry: MiddlewareRegistry<T, R>,
+    @Entity.Decorators.Inject(Entity.Decorators.forwardRef(() => AuthService)) private authService: AuthService,
+  ) {
+    super('token', registry);
+  }
+
+  async middleware(data: T, next: Middleware.NextFn<T, R>) {
+    const request = data as T & TokenRequest;
+    const isAuth = this.isLoginRequest(request.url) || this.isRefreshRequest(request.url);
+
+    if (!isAuth && this.token) {
+      request.headers = {
+        ...request.headers,
+        Authorization: `Bearer ${this.token}`,
+      };
+    }
+
+    const res = await next(request);
+
+    if (res.status === 401) {
+      if (!this.skipRefresh(request.url) && !request[RETRIED]) {
+        const refreshed = await this.refreshAccessToken();
+        if (refreshed && this.token) {
+          request[RETRIED] = true;
+          request.headers = {
+            ...request.headers,
+            Authorization: `Bearer ${this.token}`,
+          };
+          return next(request);
+        }
+      }
+
+      if (!isAuth) {
+        await this.logout();
+      }
+    }
+
+    return res;
+  }
+
+  private get token() {
+    return this.authService.accessToken;
+  }
+
+  private isLoginRequest = (url: string) => url.includes('login') && !url.includes('refresh-token');
+
+  private isRefreshRequest = (url: string) => url.includes('refresh-token');
+
+  private skipRefresh = (url: string) => this.isLoginRequest(url) || this.isRefreshRequest(url);
+
+  private logout = async () => {
+    this.authService.logout();
+  };
+
+  private refreshAccessToken = async () => {
+    if (this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    this.refreshPromise = (async () => {
+      try {
+        const response = await this.authService.refresh();
+        const accessToken = response.data?.access_token;
+
+        if (response.status < 200 || response.status >= 300 || !accessToken) {
+          return false;
+        }
+
+        return true;
+      } catch {
+        return false;
+      }
+    })().finally(() => {
+      this.refreshPromise = undefined;
+    });
+
+    return this.refreshPromise;
+  };
+}

package/platforms/react-native/generators/init/files/services/index.ts

@@ -0,0 +1,15 @@
+import { EffiJS, Entity } from '@effijs/common';
+
+import { HttpService } from '@services/http/http.service';
+import { Middlewares } from '@services/http/middleware';
+// forge:services
+
+@Entity.Decorators.Module()
+export class Services {
+  constructor(
+    private middlewares: Middlewares,
+    private http: HttpService,
+  ) {}
+}
+
+EffiJS.create(Services, 'Services');

package/platforms/react-native/generators/init/files/ui/components/Box/Common.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import { useTheme, TThemeColor } from '@theme';
+
+import { type TGridProps } from '../Grid/grid.types';
+
+import { BoxPM } from './box.pm';
+import { type TBoxProps } from './box.types';
+
+export default function BoxCommon<TSpacing>({
+  children,
+  ...commonProps
+}: TBoxProps<TThemeColor, TSpacing> & TGridProps & ViewProps) {
+  const theme = useTheme();
+  const { container } = BoxPM.get({ theme, ...commonProps } as Record<string, unknown>);
+
+  return <View {...container} children={children} />;
+}