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

package/platforms/react-native/generators/demo/files/entity/product/product.service.ts

@@ -0,0 +1,139 @@
+import { Entity, Pagination } from '@effijs/common';
+
+import { ProductApi } from './product.api';
+import { ProductCreatePayload, ProductData, ProductListQuery, ProductUpdatePayload } from './product.dto';
+import { ProductIdsIndex, ProductStore } from './product.store';
+
+export type { ProductIdsIndex } from './product.store';
+
+@Entity.Decorators.Service()
+export class ProductService {
+  pagination: Record<ProductIdsIndex, Pagination.OffsetPagination>;
+
+  constructor(
+    private api: ProductApi,
+    readonly store: ProductStore,
+  ) {
+    this.pagination = {
+      list: new Pagination.OffsetPagination(this.store, 'list', { limit: 20, offset: 0 }),
+      search: new Pagination.OffsetPagination(this.store, 'search', { limit: 20, offset: 0 }),
+    };
+  }
+
+  getById = (id: string) => this.store.getByPath(`product.${String(id)}`) as ProductData | undefined;
+
+  getListIds = (index: ProductIdsIndex = 'list') =>
+    (this.store.getByPath(`ids.${index}`) as string[] | undefined) ?? [];
+
+  getQuery = (index: ProductIdsIndex): ProductListQuery =>
+    (this.store.getByPath(`query.${index}`) as ProductListQuery | undefined) ?? {};
+
+  hasQuery = (index: ProductIdsIndex) => {
+    const query = this.getQuery(index);
+    return Boolean(
+      query.title ||
+      query.price != null ||
+      query.price_min != null ||
+      query.price_max != null ||
+      query.categoryId != null,
+    );
+  };
+
+  setQuery = (index: ProductIdsIndex, params?: Record<string, unknown>) => {
+    this.store.set(`query.${index}`, ProductListQuery.transform(params));
+  };
+
+  clearQuery = (index: ProductIdsIndex) => {
+    this.store.set(`query.${index}`, {});
+  };
+
+  upsertToStore = (data: ProductData) => {
+    this.store.set(`product.${String(data.id)}`, data);
+    return data;
+  };
+
+  private upsertEntities(items: ProductData[]) {
+    return items.map(item => {
+      this.upsertToStore(item);
+      return String(item.id);
+    });
+  }
+
+  private writeIds(index: ProductIdsIndex, incoming: string[], mode: Pagination.ListMergeMode) {
+    this.store.set(`ids.${index}`, Pagination.mergeIds(this.getListIds(index), incoming, mode));
+  }
+
+  private appendToList = (id: string) => {
+    const list = this.getListIds('list');
+    if (!list.includes(id)) {
+      this.store.set('ids.list', [id, ...list]);
+    }
+  };
+
+  private removeFromIndexes = (id: string) => {
+    (['list', 'search'] as ProductIdsIndex[]).forEach(index => {
+      this.store.set(
+        `ids.${index}`,
+        this.getListIds(index).filter(itemId => itemId !== id),
+      );
+    });
+  };
+
+  async fetchList(
+    index: ProductIdsIndex = 'list',
+    options?: { signal?: AbortSignal; mode?: Pagination.ListMergeMode },
+  ) {
+    const mode = options?.mode ?? 'replace';
+    const slot = this.pagination[index];
+
+    if (mode === 'replace') {
+      slot.reset();
+    } else if (!slot.hasMore) {
+      return [];
+    }
+
+    const query = this.getQuery(index);
+    const pagination = slot.params();
+    const { data } = await this.api.list(
+      { ...query, ...pagination },
+      {
+        signal: options?.signal,
+      },
+    );
+    slot.apply({ items: data });
+    slot.next();
+    this.writeIds(index, this.upsertEntities(data), mode);
+    return data;
+  }
+
+  async fetchById(id: string, options?: { force?: boolean; signal?: AbortSignal }) {
+    if (!options?.force) {
+      const cached = this.getById(id);
+      if (cached) return cached;
+    }
+
+    const { data } = await this.api.getById(id, { signal: options?.signal });
+    this.upsertToStore(data);
+    return data;
+  }
+
+  async create(payload: ProductCreatePayload) {
+    const { data } = await this.api.create(payload);
+    this.upsertToStore(data);
+    this.appendToList(String(data.id));
+    return data;
+  }
+
+  async update(payload: ProductUpdatePayload) {
+    const { data } = await this.api.update(payload);
+    this.upsertToStore(data);
+    return data;
+  }
+
+  async remove(id: string | number) {
+    await this.api.delete(id);
+    const key = String(id);
+    this.store.delete(`product.${key}`);
+    this.removeFromIndexes(key);
+  }
+}

package/platforms/react-native/generators/demo/files/entity/product/product.store.ts

@@ -0,0 +1,37 @@
+import { Entity, Pagination, Store } from '@effijs/common';
+
+import { StoreRegistry } from '@utils';
+
+import { ProductData, ProductListQuery } from './product.dto';
+
+export type ProductIdsIndex = 'list' | 'search';
+
+export type ProductStoreState = {
+  product: Record<string, ProductData>;
+  ids: Record<ProductIdsIndex, string[]>;
+  pagination: Record<ProductIdsIndex, Pagination.OffsetState | undefined>;
+  query: Record<ProductIdsIndex, ProductListQuery>;
+};
+
+@Entity.Decorators.Store()
+export class ProductStore extends Store.Common<ProductStoreState> {
+  constructor(private registry: StoreRegistry) {
+    super({
+      product: {},
+      ids: {
+        list: [],
+        search: [],
+      },
+      pagination: {
+        list: undefined,
+        search: undefined,
+      },
+      query: {
+        list: {},
+        search: {},
+      },
+    });
+
+    registry.register(this);
+  }
+}

package/platforms/react-native/generators/demo/files/feature/product/components/Product.CategorySelect.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Button, Grid, useStore } from '@components';
+import { useProductFeature } from '@feature/product/product.hooks';
+
+export default function ProductCategorySelect({
+  value,
+  onChange,
+}: {
+  value?: number;
+  onChange?: (value?: number) => void;
+}) {
+  const feature = useProductFeature();
+  const ids = useStore(feature.categoryService.store, 'ids.list') ?? [];
+
+  return (
+    <Grid row style={{ flexWrap: 'wrap' }}>
+      {ids.map(id => (
+        <CategoryOption key={id} id={id} selected={String(value) === id} onPress={() => onChange?.(Number(id))} />
+      ))}
+    </Grid>
+  );
+}
+
+function CategoryOption({ id, selected, onPress }: { id: string; selected: boolean; onPress: () => void }) {
+  const feature = useProductFeature();
+  const category = useStore(feature.categoryService.store, `category.${id}`);
+
+  if (!category) return null;
+
+  return (
+    <Button type={selected ? 'filled' : 'text'} color="primary" onPress={onPress}>
+      {category.name}
+    </Button>
+  );
+}

package/platforms/react-native/generators/demo/files/feature/product/detail/Product.Detail.Screen.tsx

@@ -0,0 +1,100 @@
+import { ProcessBuilder } from '@effijs/common';
+import { useNavigation } from '@effijs/navigation-react-native';
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Button, Grid, Image, Screen, Text, useStore } from '@components';
+import { useProcess } from '@feature/feature.hooks';
+import { useProductFeature } from '@feature/product/product.hooks';
+import type { ProductDetailScreenProps } from '@navigation/navigation.product';
+
+export default function ProductDetailScreen({ id }: ProductDetailScreenProps) {
+  const { close } = useNavigation();
+  const feature = useProductFeature();
+  const item = useStore(feature.store, `product.${id}`);
+  const process = useProcess(`product-${id}`);
+
+  useEffect(() => {
+    feature.detail.load(id).id(`product-${id}`).run();
+    return () => {
+      ProcessBuilder.getProcess(`product-${id}`).abort();
+    };
+  }, [id, feature.detail]);
+
+  if (process?.loading && !item) {
+    return (
+      <Screen>
+        <Screen.Header title="Product" />
+        <Screen.Content sa-b>
+          <Grid mh-s mt-l>
+            <Text body-m color="onSurfaceVariant">
+              Loading...
+            </Text>
+          </Grid>
+        </Screen.Content>
+      </Screen>
+    );
+  }
+
+  if (!item) {
+    return (
+      <Screen>
+        <Screen.Header title="Product" />
+        <Screen.Content sa-b>
+          <Grid mh-s mt-l>
+            <Text body-m color="onSurfaceVariant">
+              Not found
+            </Text>
+          </Grid>
+        </Screen.Content>
+      </Screen>
+    );
+  }
+
+  const image = item.images?.[0];
+
+  return (
+    <Screen>
+      <Screen.Header title="Product" />
+      <Screen.Content sa-b>
+        <Grid mh-s gap-m>
+          {image ? <Image.Native source={{ uri: image }} style={styles.cover} /> : null}
+          <Text display-s color="outline">
+            {item.title}
+          </Text>
+          <Text body-m color="onSurfaceVariant">
+            ${item.price}
+          </Text>
+          {item.category?.name ? (
+            <Text body-s color="onSurfaceVariant">
+              {item.category.name}
+            </Text>
+          ) : null}
+          <Text body-m color="outline">
+            {item.description}
+          </Text>
+          <Button type="filled" color="primary" mt-l onPress={() => feature.detail.openEdit(item)}>
+            Edit
+          </Button>
+          <Button
+            type="outlined"
+            color="error"
+            mt-s
+            onPress={() =>
+              feature.detail
+                .remove(id)
+                .id(`product-remove`)
+                .onDone(() => close?.())
+                .run()
+            }>
+            Delete
+          </Button>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  cover: { width: '100%', height: 220, borderRadius: 12 },
+});

package/platforms/react-native/generators/demo/files/feature/product/detail/product.detail.service.ts

@@ -0,0 +1,33 @@
+import { Entity, ProcessBuilder as PB } from '@effijs/common';
+
+import { ProductData } from '@entity/product/product.dto';
+import { ProductService } from '@entity/product/product.service';
+import { Navigation } from '@navigation';
+
+@Entity.Decorators.Service()
+export class ProductDetailService {
+  constructor(
+    private navigation: Navigation,
+    private productService: ProductService,
+  ) {}
+
+  openEdit(product: ProductData) {
+    return this.navigation.features.product.form({ mode: 'edit', data: product });
+  }
+
+  load = (id: string) =>
+    PB.process
+      .flow(
+        PB.step(async (_, { signal }) => {
+          await this.productService.fetchById(id, { force: true, signal });
+        }),
+      )
+      .concurrent('abort');
+
+  remove = (id: string) =>
+    PB.process.flow(
+      PB.step(async () => {
+        await this.productService.remove(id);
+      }),
+    );
+}

package/platforms/react-native/generators/demo/files/feature/product/filter/Product.Filter.Screen.tsx

@@ -0,0 +1,59 @@
+import { useNavigation } from '@effijs/navigation-react-native';
+import React, { useEffect } from 'react';
+
+import { BottomSheet, Button, Form, Grid } from '@components';
+import ProductCategorySelect from '@feature/product/components/Product.CategorySelect';
+import { useProductFeature } from '@feature/product/product.hooks';
+import type { ProductFilterScreenProps } from '@navigation/navigation.product';
+
+import { ProductFilterService } from './product.filter.service';
+
+export default function ProductFilterScreen(_props: ProductFilterScreenProps) {
+  const { close } = useNavigation();
+  const feature = useProductFeature();
+  const service = Form.useFormService(ProductFilterService, () =>
+    ProductFilterService.prepare(feature.service.getQuery('list')),
+  );
+
+  useEffect(() => {
+    service.loadCategories().id('category-list').run();
+  }, []);
+
+  return (
+    <BottomSheet onClose={close} maxHeight="90%">
+      <BottomSheet.Header title="Filter" trailingActions={['close']} />
+      <BottomSheet.Content>
+        <Form service={service}>
+          <Form.Item name="price_min">
+            <Form.Element.Input label="Min price" keyboardType="numeric" />
+          </Form.Item>
+          <Form.Item name="price_max">
+            <Form.Element.Input label="Max price" keyboardType="numeric" />
+          </Form.Item>
+          <Grid mt-s mb-s>
+            <Form.Element.Label>Category</Form.Element.Label>
+            <Form.Item name="categoryId">
+              <ProductCategorySelect />
+            </Form.Item>
+          </Grid>
+          <Button
+            type="filled"
+            color="primary"
+            mt-l
+            mb-l
+            onPress={() =>
+              service
+                .apply()
+                .onDone(() => {
+                  feature.list.load().id('product-list').run();
+                  close?.();
+                })
+                .run()
+            }>
+            Apply
+          </Button>
+        </Form>
+      </BottomSheet.Content>
+    </BottomSheet>
+  );
+}

package/platforms/react-native/generators/demo/files/feature/product/filter/product.filter.service.ts

@@ -0,0 +1,78 @@
+import { Entity, FormStore, ProcessBuilder as PB, Validator } from '@effijs/common';
+
+import { FormError } from '@components/Form/form.error';
+import { CategoryService } from '@entity/category/category.service';
+import { ProductListQuery } from '@entity/product/product.dto';
+import { ProductService } from '@entity/product/product.service';
+import { Navigation } from '@navigation';
+
+@Validator.Decorators.Options({ skipMissingProperties: true })
+class ProductFilterData extends Validator.WithValidator {
+  @Validator.Decorators.Property()
+  price_min?: string;
+
+  @Validator.Decorators.Property()
+  price_max?: string;
+
+  @Validator.Decorators.Property()
+  categoryId?: number;
+}
+
+@Entity.Decorators.Service()
+export class ProductFilterService extends FormStore.FormStoreService<ProductFilterData> {
+  constructor(
+    private productService: ProductService,
+    private categoryService: CategoryService,
+    private navigation: Navigation,
+  ) {
+    super();
+  }
+
+  static prepare(query: ProductListQuery = {}): Partial<ProductFilterData> {
+    return {
+      price_min: query.price_min != null ? String(query.price_min) : '',
+      price_max: query.price_max != null ? String(query.price_max) : '',
+      categoryId: query.categoryId,
+    };
+  }
+
+  init(initial?: Partial<ProductFilterData>) {
+    super.init({
+      price_min: '',
+      price_max: '',
+      ...(initial || {}),
+    });
+    return this;
+  }
+
+  loadCategories = () =>
+    PB.process
+      .flow(
+        PB.step(async (_, { signal }) => {
+          await this.categoryService.fetchList({ signal });
+        }),
+      )
+      .concurrent('join')
+      .onError(({ error }) => {
+        if (error?.message) {
+          this.navigation.widgets.showToast({ type: 'message', title: error.message });
+        }
+      });
+
+  apply = () =>
+    PB.process
+      .flow(
+        PB.step(() => {
+          const { error, data } = this.validate((raw, options) => ProductFilterData.validate(raw, options));
+          if (error) {
+            throw new FormError('Please fill required fields', error);
+          }
+          this.productService.setQuery('list', data);
+        }),
+      )
+      .onError(({ error }) => {
+        if (error?.message) {
+          this.navigation.widgets.showToast({ type: 'message', title: error.message });
+        }
+      });
+}

package/platforms/react-native/generators/demo/files/feature/product/form/Product.Form.Screen.tsx

@@ -0,0 +1,71 @@
+import { ProcessBuilder as PB } from '@effijs/common';
+import { useNavigation } from '@effijs/navigation-react-native';
+import React, { useEffect } from 'react';
+
+import { Button, Form, Grid, Screen, Text } from '@components';
+import ProductCategorySelect from '@feature/product/components/Product.CategorySelect';
+import type { ProductFormScreenProps } from '@navigation/navigation.product';
+
+import { ProductFormService } from './product.form.service';
+
+export default function ProductFormScreen({ mode, data }: ProductFormScreenProps) {
+  const { close } = useNavigation();
+  const service = Form.useFormService(ProductFormService, () => {
+    if (mode === 'create') {
+      return ProductFormService.prepareCreate();
+    }
+    return ProductFormService.prepareFromEntity(data);
+  });
+
+  useEffect(() => {
+    service.loadCategories().id('category-list').run();
+    return () => {
+      PB.getProcess('product-form').abort();
+    };
+  }, []);
+
+  return (
+    <Screen>
+      <Screen.Header title={service.mode === 'edit' ? 'Edit product' : 'New product'} />
+      <Screen.Content sa-b>
+        <Grid mh-s>
+          <Form service={service}>
+            <Form.Item name="title">
+              <Form.Element.Input label="Title" autoCapitalize="sentences" />
+            </Form.Item>
+            <Form.Item name="price">
+              <Form.Element.Input label="Price" keyboardType="numeric" />
+            </Form.Item>
+            <Form.Item name="description">
+              <Form.Element.InputArea label="Description" />
+            </Form.Item>
+            <Grid mt-s mb-s>
+              <Text body-s color="onSurfaceVariant" mb-s>
+                Category
+              </Text>
+              <Form.Item name="categoryId">
+                <ProductCategorySelect />
+              </Form.Item>
+            </Grid>
+            <Form.Item name="images">
+              <Form.Element.Input label="Image URL" autoCapitalize="none" />
+            </Form.Item>
+            <Button
+              type="filled"
+              color="primary"
+              mt-l
+              onPress={() =>
+                service
+                  .submit()
+                  .id('product-form')
+                  .onDone(() => close?.())
+                  .run()
+              }>
+              Save
+            </Button>
+          </Form>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

package/platforms/react-native/generators/demo/files/feature/product/form/product.form.service.ts

@@ -0,0 +1,142 @@
+import { Entity, FormStore, ProcessBuilder as PB, Validator } from '@effijs/common';
+
+import { FormError } from '@components/Form/form.error';
+import { CategoryService } from '@entity/category/category.service';
+import { ProductCreatePayload, ProductData, ProductUpdatePayload } from '@entity/product/product.dto';
+import { ProductService } from '@entity/product/product.service';
+import { Navigation } from '@navigation';
+import { HttpError } from '@services/http/http.error';
+
+const PLACEHOLDER_IMAGE = 'https://placehold.co/600x400';
+
+@Validator.Decorators.Options({ skipMissingProperties: true })
+class ProductFormData extends Validator.WithValidator {
+  @Validator.Decorators.IsDefined('Title is required')
+  title!: string;
+
+  @Validator.Decorators.IsDefined('Price is required')
+  price!: string;
+
+  @Validator.Decorators.IsDefined('Description is required')
+  description!: string;
+
+  @Validator.Decorators.IsDefined('Category is required')
+  categoryId!: number;
+
+  images!: string;
+  id?: number;
+}
+
+@Entity.Decorators.Service()
+export class ProductFormService extends FormStore.FormStoreService<ProductFormData> {
+  mode: 'create' | 'edit' = 'create';
+
+  constructor(
+    private productService: ProductService,
+    private categoryService: CategoryService,
+    private navigation: Navigation,
+  ) {
+    super();
+  }
+
+  static prepareCreate(): Partial<ProductFormData> & { mode: 'create' } {
+    return {
+      mode: 'create',
+      title: '',
+      price: '',
+      description: '',
+      images: PLACEHOLDER_IMAGE,
+    };
+  }
+
+  static prepareFromEntity(entity: ProductData): Partial<ProductFormData> & { mode: 'edit' } {
+    return {
+      mode: 'edit',
+      id: entity.id,
+      title: entity.title,
+      price: String(entity.price ?? ''),
+      description: entity.description,
+      categoryId: entity.category?.id,
+      images: entity.images?.[0] || PLACEHOLDER_IMAGE,
+    };
+  }
+
+  init(initial?: Partial<ProductFormData> & { mode?: 'create' | 'edit' }) {
+    this.mode = initial?.mode ?? (initial?.id ? 'edit' : 'create');
+
+    super.init({
+      title: '',
+      price: '',
+      description: '',
+      images: PLACEHOLDER_IMAGE,
+      ...(initial || {}),
+    });
+
+    return this;
+  }
+
+  private toCreatePayload(formData: ProductFormData) {
+    return ProductCreatePayload.transform({
+      title: formData.title,
+      price: formData.price,
+      description: formData.description,
+      categoryId: formData.categoryId,
+      images: formData.images?.trim() ? [formData.images.trim()] : [],
+    });
+  }
+
+  private toUpdatePayload(formData: ProductFormData) {
+    return ProductUpdatePayload.transform({
+      id: formData.id,
+      title: formData.title,
+      price: formData.price,
+      description: formData.description,
+      categoryId: formData.categoryId,
+      images: formData.images?.trim() ? [formData.images.trim()] : [],
+    });
+  }
+
+  loadCategories = () =>
+    PB.process
+      .flow(
+        PB.step(async (_, { signal }) => {
+          await this.categoryService.fetchList({ signal });
+        }),
+      )
+      .concurrent('join')
+      .onError(({ error }) => {
+        if (error?.message) {
+          this.navigation.widgets.showToast({ type: 'message', title: error.message });
+        }
+      });
+
+  submit = () =>
+    PB.process
+      .flow(
+        PB.step(() => {
+          const { error, data } = this.validate((raw, options) => ProductFormData.validate(raw, options));
+          if (error) {
+            throw new FormError('Please fill required fields', error);
+          }
+          return { formData: data };
+        }),
+        PB.step(async ({ formData }) => {
+          if (this.mode === 'create') {
+            await this.productService.create(this.toCreatePayload(formData));
+            return;
+          }
+          await this.productService.update(this.toUpdatePayload(formData));
+        }),
+      )
+      .onError(({ error }) => {
+        if (error instanceof HttpError) {
+          Object.entries(error.data || {}).forEach(([path, e]) => {
+            this.store.error.set(path, e);
+          });
+        }
+
+        if (error?.message) {
+          this.navigation.widgets.showToast({ type: 'message', title: error.message });
+        }
+      });
+}