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

package/platforms/react-native/generators/feature/templates/search.service.ts.hbs

@@ -0,0 +1,13 @@
+import { Entity, ProcessBuilder as PB } from '@effijs/common';
+
+import { {{entityNames.pascal}}Service } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.service';
+
+@Entity.Decorators.Service()
+export class {{feature.pascal}}SearchService {
+  constructor(private {{entityNames.camel}}Service: {{entityNames.pascal}}Service) {}
+
+  search = (title: string) => PB.process.flow(PB.step(async (_, { signal }) => {
+    this.{{entityNames.camel}}Service.setQuery('search', { title });
+    await this.{{entityNames.camel}}Service.fetchList('search', { signal, mode: 'replace' });
+  })).concurrent('abort');
+}

package/platforms/react-native/generators/feature/templates/tab.tsx.hbs

@@ -0,0 +1,8 @@
+{{#if (includes screens "list")}}export { default } from '@feature/{{feature.kebab}}/list/{{feature.pascal}}.List.Screen';
+{{else}}import React from 'react';
+import { Grid, Screen, Text } from '@components';
+
+export default function {{feature.pascal}}Tab() {
+  return <Screen><Screen.Content><Grid mh-s mt-l><Text body-m>{{feature.pascal}}</Text></Grid></Screen.Content></Screen>;
+}
+{{/if}}

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

@@ -0,0 +1,41 @@
+import { Entity } from '@effijs/common';
+
+import { AuthService } from '@entity/auth/auth.service';
+import { AuthSessionStore } from '@entity/auth/auth.session.store';
+import { Navigation } from '@navigation';
+import utils from '@utils';
+
+@Entity.Decorators.Controller()
+export class AppController {
+  constructor(
+    private navigation: Navigation,
+    private authService: AuthService,
+    private authSessionStore: AuthSessionStore,
+  ) {}
+
+  async startApp() {
+    this.navigation.app.goToSplash();
+
+    await utils.sleep(500);
+
+    const session = await this.authService.restoreSession();
+
+    if (session === 'restored') {
+      this.navigation.tabs.goToTabs();
+    } else if (session === 'expired') {
+      this.navigation.app.goToSignIn();
+    } else {
+      this.navigation.app.goToOnboarding();
+    }
+
+    this.authSessionStore.subscribe(
+      'sessionId',
+      ({ sessionId }) => {
+        if (!sessionId) {
+          this.navigation.app.goToOnboarding();
+        }
+      },
+      { omitInitialCall: true },
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export class AppError extends Error {}

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

@@ -0,0 +1,12 @@
+import { Entity } from '@effijs/common';
+
+import { StorePersistent } from '@utils';
+
+export type AppStorePersistentState = Record<string, never>;
+
+@Entity.Decorators.Store()
+export class AppStorePersistent extends StorePersistent<AppStorePersistentState> {
+  constructor() {
+    super({});
+  }
+}

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

@@ -0,0 +1,19 @@
+import { EffiJS, Entity } from '@effijs/common';
+
+import { AppController } from '@app/app.controller';
+import { AppStorePersistent } from '@app/app.store';
+import { ThemeService } from '@theme/theme.service';
+
+@Entity.Decorators.Module()
+export class App {
+  constructor(
+    private storePersistent: AppStorePersistent,
+    private themeService: ThemeService,
+    private controller: AppController,
+  ) {
+    themeService.init();
+    controller.startApp();
+  }
+}
+
+EffiJS.create(App, 'App');

package/platforms/react-native/generators/init/files/app/splash/Onboarding.Screen.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Button, Grid, Screen, Text } from '@components';
+import { useNavigation } from '@navigation/navigation.hooks';
+
+export default function OnboardingScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <Screen>
+      <Screen.Content sa-t sa-b>
+        <Grid flex={1} center mh-s>
+          <Text title-m color="primary" weight={600} center mb-l>
+            Welcome
+          </Text>
+          <Text body-m color="primary" center mb-xl>
+            Create an account or sign in to continue.
+          </Text>
+        </Grid>
+        <Grid gap-xs mt-l mh-s>
+          <Button type="filled" onPress={navigation.app.goToSignUp}>
+            Create Account
+          </Button>
+          <Button type="text" color="secondary" mt-xs onPress={navigation.app.goToSignIn}>
+            Already have an account? Sign In
+          </Button>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

package/platforms/react-native/generators/init/files/app/splash/Splash.Screen.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import { Grid, Screen } from '@components';
+
+export default function SplashScreen() {
+  return (
+    <Screen>
+      <Grid flex={1} center>
+        <Image source={require('@icons/logo.png')} style={{ width: 160, height: 160 }} />
+      </Grid>
+    </Screen>
+  );
+}

package/platforms/react-native/generators/init/files/app/tabs/home/Home.tab.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Grid, Screen, Text } from '@components';
+
+export default function HomeTab() {
+  return (
+    <Screen>
+      <Screen.HeaderTab>
+        <Grid mh-s row align-center>
+          <Text title-l color="outline" weight={600}>
+            Home
+          </Text>
+        </Grid>
+      </Screen.HeaderTab>
+      <Screen.Content sa-b>
+        <Grid mh-s mt-l>
+          <Text body-m color="onSurfaceVariant">
+            Home
+          </Text>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

package/platforms/react-native/generators/init/files/app/tabs/profile/Profile.tab.tsx

@@ -0,0 +1 @@
+export { default } from '@feature/profile/Profile.Screen';

package/platforms/react-native/generators/init/files/configs/dev.ts.hbs

@@ -0,0 +1,5 @@
+export default {
+  PRIVACY_URL: 'https://example.com/privacy',
+  TERMS_URL: 'https://example.com/terms',
+  API_URL: '{{{apiUrl}}}',
+};

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

@@ -0,0 +1,4 @@
+import dev from './dev';
+import prod from './prod';
+
+export default __DEV__ ? dev : prod;

package/platforms/react-native/generators/init/files/configs/prod.ts.hbs

@@ -0,0 +1,5 @@
+export default {
+  PRIVACY_URL: 'https://example.com/privacy',
+  TERMS_URL: 'https://example.com/terms',
+  API_URL: '{{{apiUrl}}}',
+};

package/platforms/react-native/generators/init/files/entity/auth/auth.api.ts

@@ -0,0 +1,36 @@
+import { Entity } from '@effijs/common';
+
+import { HttpBase } from '@services/http/http.base';
+
+import { AuthProfile, AuthTokens } from './auth.dto';
+
+export interface RegisterPayload {
+  name: string;
+  email: string;
+  password: string;
+  avatar: string;
+}
+
+@Entity.Decorators.ApiService()
+export class AuthApi extends HttpBase {
+  protected url = 'auth';
+
+  async login(data: { email: string; password: string }) {
+    return this.request({ url: 'login', method: 'post', data }, { response: raw => AuthTokens.transform(raw) });
+  }
+
+  async profile() {
+    return this.request({ url: 'profile', method: 'get' }, { response: raw => AuthProfile.transform(raw) });
+  }
+
+  async refreshToken(data: { refreshToken: string }) {
+    return this.request(
+      { url: 'refresh-token', method: 'post', data, withoutMiddlewares: true },
+      { response: raw => AuthTokens.transform(raw) },
+    );
+  }
+
+  register(data: RegisterPayload) {
+    return this.request({ url: '', method: 'post', data, resource: 'users' });
+  }
+}

package/platforms/react-native/generators/init/files/entity/auth/auth.dto.ts

@@ -0,0 +1,26 @@
+import { Transform } from '@effijs/common';
+
+export class AuthTokens extends Transform.WithTransform {
+  @Transform.Decorators.Property()
+  access_token!: string;
+
+  @Transform.Decorators.Property()
+  refresh_token!: string;
+}
+
+export class AuthProfile extends Transform.WithTransform {
+  @Transform.Decorators.Property()
+  id!: number;
+
+  @Transform.Decorators.Property()
+  email!: string;
+
+  @Transform.Decorators.Property()
+  name!: string;
+
+  @Transform.Decorators.Property()
+  role!: string;
+
+  @Transform.Decorators.Property()
+  avatar!: string;
+}

package/platforms/react-native/generators/init/files/entity/auth/auth.service.ts

@@ -0,0 +1,94 @@
+import { Entity } from '@effijs/common';
+
+import { StorePersistentSessionBased, StoreRegistry } from '@utils';
+
+import { AuthApi, RegisterPayload } from './auth.api';
+import { AuthSessionStore } from './auth.session.store';
+import { AuthStore } from './auth.store';
+
+export type AuthSessionStatus = 'restored' | 'anonymous' | 'expired';
+
+@Entity.Decorators.Service()
+export class AuthService {
+  constructor(
+    private store: AuthStore,
+    private sessionStore: AuthSessionStore,
+    private api: AuthApi,
+    private registry: StoreRegistry,
+  ) {}
+
+  get accessToken() {
+    return this.store.getByPath('accessToken');
+  }
+
+  async restoreSession(): Promise<AuthSessionStatus> {
+    const sessionId = this.sessionStore.getByPath('sessionId');
+    if (!sessionId) {
+      return 'anonymous';
+    }
+
+    StorePersistentSessionBased.loadFor(sessionId);
+
+    try {
+      await this.fetchProfile();
+      return 'restored';
+    } catch {
+      // 401: TokenMiddleware already called logout, so sessionId is gone.
+      // Any other error leaves sessionId and tokens in place.
+      return 'expired';
+    }
+  }
+
+  async signIn(credentials: { email: string; password: string }) {
+    const { data: tokens } = await this.api.login(credentials);
+    this.store.set('accessToken', tokens.access_token);
+    this.store.set('refreshToken', tokens.refresh_token);
+
+    const profile = await this.fetchProfile();
+    const sessionId = String(profile.id);
+
+    this.sessionStore.set('sessionId', sessionId);
+    StorePersistentSessionBased.loadFor(sessionId);
+    this.store.set('profile', profile);
+    this.store.set('accessToken', tokens.access_token);
+    this.store.set('refreshToken', tokens.refresh_token);
+  }
+
+  signUp(data: RegisterPayload) {
+    return this.api.register(data);
+  }
+
+  async fetchProfile() {
+    const { data } = await this.api.profile();
+    this.store.set('profile', data);
+    return data;
+  }
+
+  async refresh() {
+    const refreshToken = this.store.getByPath('refreshToken');
+    if (!refreshToken) {
+      throw new Error('Missing refresh token');
+    }
+
+    const response = await this.api.refreshToken({ refreshToken });
+    const accessToken = response.data?.access_token;
+    const nextRefreshToken = response.data?.refresh_token;
+
+    if (response.status >= 200 && response.status < 300 && accessToken) {
+      this.store.set('accessToken', accessToken);
+      if (nextRefreshToken) {
+        this.store.set('refreshToken', nextRefreshToken);
+      }
+    }
+
+    return response;
+  }
+
+  logout() {
+    this.store.delete('accessToken');
+    this.store.delete('refreshToken');
+    this.sessionStore.delete('sessionId');
+    StorePersistentSessionBased.destroy();
+    this.registry.clear();
+  }
+}

package/platforms/react-native/generators/init/files/entity/auth/auth.session.store.ts

@@ -0,0 +1,14 @@
+import { Entity } from '@effijs/common';
+
+import { StorePersistent } from '@utils';
+
+export type AuthSessionStoreState = {
+  sessionId?: string;
+};
+
+@Entity.Decorators.Store()
+export class AuthSessionStore extends StorePersistent<AuthSessionStoreState> {
+  constructor() {
+    super({});
+  }
+}

package/platforms/react-native/generators/init/files/entity/auth/auth.store.ts

@@ -0,0 +1,20 @@
+import { Entity } from '@effijs/common';
+
+import { SchemaName } from '@theme/theme';
+import { StorePersistentSessionBased } from '@utils';
+
+export type AuthStoreState = {
+  accessToken?: string;
+  refreshToken?: string;
+  profile?: {
+    id: number;
+    email: string;
+    name: string;
+    role: string;
+    avatar: string;
+  };
+  theme?: SchemaName;
+};
+
+@Entity.Decorators.Store()
+export class AuthStore extends StorePersistentSessionBased<AuthStoreState> {}

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

@@ -0,0 +1,2 @@
+import './auth.api';
+import './auth.service';

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

@@ -0,0 +1,2 @@
+import './auth';
+// forge:entity

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

@@ -0,0 +1,10 @@
+import { Entity, EffiJS } from '@effijs/common';
+
+import { AuthService } from '@entity/auth/auth.service';
+
+@Entity.Decorators.Feature()
+export class AuthFeature {
+  constructor(readonly service: AuthService) {}
+}
+
+EffiJS.createFeature(AuthFeature, 'AuthFeature');

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

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

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

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

package/platforms/react-native/generators/init/files/feature/auth/sign-in/SignIn.Screen.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+import { Screen, Form, Button, Grid, Text } from '@components';
+
+import { SignInService } from './signIn.service';
+
+export default function SignInScreen() {
+  const service = Form.useFormService(SignInService, {
+    email: 'john@mail.com',
+    password: 'changeme',
+  });
+
+  return (
+    <Screen>
+      <Screen.Content sa-t sa-b pt-m={Platform.OS === 'android'}>
+        <Text display-s color="primary" center mb-l>
+          Sign In
+        </Text>
+        <Grid mh-s mt-l>
+          <Form service={service}>
+            <Form.Item name="email">
+              <Form.Element.Input autoComplete="email" label="Email Address" autoCapitalize="none" />
+            </Form.Item>
+            <Form.Item name="password">
+              <Form.Element.Input autoComplete="password" label="Password" autoCapitalize="none" secure />
+            </Form.Item>
+            <Button type="filled" color="primary" mt-l onPress={() => service.onSignIn().id('auth.signIn').run()}>
+              Sign In
+            </Button>
+            <Button type="text" color="secondary" mt-s onPress={service.handleSignUp}>
+              Don't have an account? Sign Up
+            </Button>
+          </Form>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

package/platforms/react-native/generators/init/files/feature/auth/sign-in/signIn.service.ts

@@ -0,0 +1,54 @@
+import { FormStore, Validator, ProcessBuilder as PB, Entity } from '@effijs/common';
+
+import { FormError } from '@components/Form/form.error';
+import { AuthService } from '@entity/auth/auth.service';
+import { Navigation } from '@navigation';
+import { HttpError } from '@services/http/http.error';
+
+@Validator.Decorators.Options({ skipMissingProperties: true })
+class SignInData extends Validator.WithValidator {
+  @Validator.Decorators.IsDefined('Enter email')
+  email!: string;
+
+  @Validator.Decorators.IsDefined('Enter password')
+  password!: string;
+}
+
+@Entity.Decorators.Service()
+export class SignInService extends FormStore.FormStoreService<SignInData> {
+  constructor(
+    private readonly navigation: Navigation,
+    private readonly authService: AuthService,
+  ) {
+    super();
+  }
+
+  handleSignUp = () => this.navigation.app.goToSignUp();
+
+  onSignIn = () =>
+    PB.process
+      .flow(
+        PB.step(() => {
+          const { error, data } = this.validate((raw, options) => SignInData.validate(raw, options));
+          if (error) {
+            throw new FormError('Please fill required fields', error);
+          }
+          return { formData: data };
+        }),
+        PB.step(async ({ formData }) => {
+          await this.authService.signIn(formData);
+          this.navigation.tabs.goToTabs();
+        }),
+      )
+      .onError(({ error }) => {
+        if (error instanceof HttpError) {
+          this.catchFormError(error);
+        }
+        if (error?.message) {
+          this.navigation.widgets.showToast({
+            type: 'message',
+            title: error?.message,
+          });
+        }
+      });
+}

package/platforms/react-native/generators/init/files/feature/auth/sign-up/SignUp.Screen.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Linking, Platform } from 'react-native';
+
+import { Screen, Form, Button, Grid, Text } from '@components';
+import configs from '@configs';
+import { useNavigation } from '@navigation/navigation.hooks';
+
+import { SignUpService } from './signUp.service';
+
+export default function SignUpScreen() {
+  const navigation = useNavigation();
+  const service = Form.useFormService(SignUpService, {
+    privacy_policy: false,
+  });
+
+  return (
+    <Screen>
+      <Screen.Content sa-t sa-b pt-m={Platform.OS === 'android'}>
+        <Text display-s color="primary" center mb-l>
+          Sign Up
+        </Text>
+        <Grid mh-s mb-m>
+          <Form service={service}>
+            <Form.Item name="name">
+              <Form.Element.Input label="Your Name" />
+            </Form.Item>
+            <Form.Item name="email">
+              <Form.Element.Input label="Email" autoCapitalize="none" />
+            </Form.Item>
+            <Form.Item name="password">
+              <Form.Element.Input label="Password" autoCapitalize="none" secure />
+            </Form.Item>
+            <Form.Item name="confirm_password">
+              <Form.Element.Input label="Confirm Password" autoCapitalize="none" secure />
+            </Form.Item>
+            <Form.Item name="privacy_policy">
+              <Form.Element.Checkbox
+                type="text"
+                label={
+                  <Text>
+                    I agree to the{' '}
+                    <Text underline color="outline" onPress={() => Linking.openURL(configs.PRIVACY_URL)}>
+                      Privacy Policy
+                    </Text>{' '}
+                    and{' '}
+                    <Text underline color="outline" onPress={() => Linking.openURL(configs.TERMS_URL)}>
+                      Terms of Use
+                    </Text>
+                  </Text>
+                }
+              />
+            </Form.Item>
+            <Button type="filled" color="primary" onPress={() => service.signUp().id('auth.signUp').run()}>
+              Create Account
+            </Button>
+            <Button type="text" color="secondary" mt-xs onPress={navigation.app.goToSignIn}>
+              Already have an account? Sign In
+            </Button>
+          </Form>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

package/platforms/react-native/generators/init/files/feature/auth/sign-up/signUp.service.ts

@@ -0,0 +1,73 @@
+import { FormStore, Validator, ProcessBuilder as PB, Entity } from '@effijs/common';
+
+import { FormError } from '@components/Form/form.error';
+import { AuthService } from '@entity/auth/auth.service';
+import { Navigation } from '@navigation';
+import { HttpError } from '@services/http/http.error';
+
+@Validator.Decorators.Options({ skipMissingProperties: true })
+class SignUpData extends Validator.WithValidator {
+  @Validator.Decorators.IsDefined('Enter name')
+  name!: string;
+
+  @Validator.Decorators.IsDefined('Enter email')
+  email!: string;
+
+  @Validator.Decorators.IsDefined('Enter password')
+  password!: string;
+
+  @Validator.Decorators.IsDefined('Enter confirm password')
+  @Validator.Decorators.Validator((value, data) => value === data.password, 'Passwords do not match')
+  confirm_password!: string;
+
+  @Validator.Decorators.Validator(value => value === true, 'Accept privacy policy')
+  privacy_policy!: boolean;
+}
+
+@Entity.Decorators.Service()
+export class SignUpService extends FormStore.FormStoreService<SignUpData> {
+  constructor(
+    private readonly navigation: Navigation,
+    private readonly authService: AuthService,
+  ) {
+    super();
+  }
+
+  signUp = () =>
+    PB.process
+      .flow(
+        PB.step(() => {
+          const { error, data } = this.validate((raw, options) => SignUpData.validate(raw, options));
+          if (error) {
+            throw new FormError('Please fill required fields', error);
+          }
+          return { formData: data };
+        }),
+        PB.step(async ({ formData }) => {
+          await this.authService.signUp({
+            name: formData.name,
+            email: formData.email,
+            password: formData.password,
+            avatar: 'https://picsum.photos/800',
+          });
+
+          await this.authService.signIn({
+            email: formData.email,
+            password: formData.password,
+          });
+
+          this.navigation.tabs.goToTabs();
+        }),
+      )
+      .onError(({ error }) => {
+        if (error instanceof HttpError) {
+          this.catchFormError(error);
+        }
+        if (error?.message) {
+          this.navigation.widgets.showToast({
+            type: 'message',
+            title: error?.message,
+          });
+        }
+      });
+}