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

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

@@ -0,0 +1,7 @@
+import './form/product.form.service';
+import './detail/product.detail.service';
+import './list/product.list.service';
+import './search/product.search.service';
+import './filter/product.filter.service';
+import './product.feature';
+// forge:feature-screens

package/platforms/react-native/generators/demo/files/feature/product/list/Product.List.Item.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Button, Grid, Image, Text, useStore } from '@components';
+import { useProductFeature } from '@feature/product/product.hooks';
+
+export default function ProductListItem({ id, onPress }: { id: string; onPress: () => void }) {
+  const feature = useProductFeature();
+  const item = useStore(feature.store, `product.${id}`);
+
+  if (!item) return null;
+
+  const image = item.images?.[0];
+
+  return (
+    <Button.Touchable onPress={onPress} color="onBackgroundSecondVariant" round="m" p-s>
+      <Grid row gap-s align-center>
+        {image ? <Image.Native source={{ uri: image }} style={styles.thumb} /> : null}
+        <Grid flex={1} gap-xs>
+          <Text body-m color="outline" numberOfLines={1}>
+            {item.title}
+          </Text>
+          <Text body-s color="onSurfaceVariant">
+            ${item.price}
+          </Text>
+        </Grid>
+      </Grid>
+    </Button.Touchable>
+  );
+}
+
+const styles = StyleSheet.create({
+  thumb: { width: 64, height: 64, borderRadius: 8 },
+});

package/platforms/react-native/generators/demo/files/feature/product/list/Product.List.Screen.tsx

@@ -0,0 +1,106 @@
+import { ProcessBuilder } from '@effijs/common';
+import React, { useEffect } from 'react';
+import { FlatList, RefreshControl, StyleSheet } from 'react-native';
+
+import { Button, Grid, Screen, Text, useStore } from '@components';
+import { useProcess } from '@feature/feature.hooks';
+import { useProductFeature } from '@feature/product/product.hooks';
+
+import ProductListItem from './Product.List.Item';
+
+export default function ProductListScreen() {
+  const feature = useProductFeature();
+  const ids = useStore(feature.store, 'ids.list') ?? [];
+
+  const hasMore = useStore(feature.store, 'pagination.list.hasMore');
+  const loadProcess = useProcess('product-list');
+  const moreProcess = useProcess('product-list-more');
+
+  useEffect(() => {
+    feature.list.load().id('product-list').run();
+    return () => {
+      ProcessBuilder.getProcess('product-list').abort();
+      ProcessBuilder.getProcess('product-list-more').abort();
+    };
+  }, []);
+
+  return (
+    <Screen>
+      <Screen.HeaderTab>
+        <Grid mh-s row align-center space-between>
+          <Text title-l color="outline" weight={600}>
+            Products
+          </Text>
+          <Grid row gap-s>
+            <Button
+              type="text"
+              leadingIcon="search"
+              size={40}
+              withoutLoadingIndicator
+              onPress={() => feature.list.openSearch()}
+            />
+            <Button
+              type="text"
+              leadingIcon="settings"
+              size={40}
+              withoutLoadingIndicator
+              onPress={() => feature.list.openFilter()}
+            />
+            <Button
+              type="filled"
+              leadingIcon="plus"
+              size={40}
+              round="xxl"
+              withoutLoadingIndicator
+              onPress={() => feature.list.openCreate()}
+            />
+          </Grid>
+        </Grid>
+      </Screen.HeaderTab>
+      <Screen.Content sa-b scrollable={false}>
+        {loadProcess?.loading && !ids.length ? (
+          <Grid mh-s mt-l>
+            <Text body-m color="onSurfaceVariant">
+              Loading...
+            </Text>
+          </Grid>
+        ) : (
+          <FlatList
+            data={ids}
+            keyExtractor={id => id}
+            contentContainerStyle={styles.list}
+            refreshControl={
+              <RefreshControl
+                refreshing={Boolean(loadProcess?.loading && ids.length)}
+                onRefresh={() => feature.list.load().id('product-list').run()}
+              />
+            }
+            onEndReached={() => {
+              if (hasMore && !moreProcess?.loading && !loadProcess?.loading) {
+                feature.list.loadMore().id(`product-list-more`).run();
+              }
+            }}
+            onEndReachedThreshold={0.4}
+            ListEmptyComponent={
+              <Text body-m color="onSurfaceVariant">
+                No products yet
+              </Text>
+            }
+            ListFooterComponent={
+              moreProcess?.loading ? (
+                <Text body-s color="onSurfaceVariant" center>
+                  Loading more...
+                </Text>
+              ) : null
+            }
+            renderItem={({ item: id }) => <ProductListItem id={id} onPress={() => feature.list.openDetail(id)} />}
+          />
+        )}
+      </Screen.Content>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { paddingHorizontal: 16, paddingVertical: 16, gap: 12 },
+});

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

@@ -0,0 +1,47 @@
+import { Entity, ProcessBuilder as PB } from '@effijs/common';
+
+import { ProductService } from '@entity/product/product.service';
+import { Navigation } from '@navigation';
+
+@Entity.Decorators.Service()
+export class ProductListService {
+  constructor(
+    private navigation: Navigation,
+    private productService: ProductService,
+  ) {}
+
+  load = () =>
+    PB.process
+      .flow(
+        PB.step(async (_, { signal }) => {
+          await this.productService.fetchList('list', { signal, mode: 'replace' });
+        }),
+      )
+      .concurrent('abort');
+
+  loadMore = () => {
+    return PB.process
+      .flow(
+        PB.step(async (_, { signal }) => {
+          await this.productService.fetchList('list', { signal, mode: 'append' });
+        }),
+      )
+      .concurrent('abort');
+  };
+
+  openDetail(id: string) {
+    this.navigation.features.product.detail({ id });
+  }
+
+  openCreate() {
+    this.navigation.features.product.form({ mode: 'create', data: {} });
+  }
+
+  openSearch() {
+    this.navigation.features.product.search({});
+  }
+
+  openFilter() {
+    this.navigation.features.product.filter({});
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Entity, EffiJS } from '@effijs/common';
+
+import { CategoryService } from '@entity/category/category.service';
+import { ProductService } from '@entity/product/product.service';
+import { ProductStore } from '@entity/product/product.store';
+import { Navigation } from '@navigation';
+
+import { ProductDetailService } from './detail/product.detail.service';
+import { ProductListService } from './list/product.list.service';
+// forge:feature-services-import
+
+@Entity.Decorators.Feature()
+export class ProductFeature {
+  constructor(
+    private navigation: Navigation,
+    readonly store: ProductStore,
+    readonly service: ProductService,
+    readonly categoryService: CategoryService,
+    readonly list: ProductListService,
+    readonly detail: ProductDetailService,
+    // forge:feature-ctor
+  ) {}
+
+  openCreate() {
+    this.list.openCreate();
+  }
+}
+
+EffiJS.createFeature(ProductFeature, 'ProductFeature');

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

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

package/platforms/react-native/generators/demo/files/feature/product/search/Product.Search.Screen.tsx

@@ -0,0 +1,82 @@
+import { ProcessBuilder } from '@effijs/common';
+import React, { useEffect } from 'react';
+import { FlatList, RefreshControl, StyleSheet } from 'react-native';
+
+import { Button, Form, Grid, Screen, Text, useStore } from '@components';
+import { useProcess } from '@feature/feature.hooks';
+import { useProductFeature } from '@feature/product/product.hooks';
+import type { ProductSearchScreenProps } from '@navigation/navigation.product';
+
+import ProductListItem from '../list/Product.List.Item';
+
+import { ProductSearchService } from './product.search.service';
+
+export default function ProductSearchScreen({ query }: ProductSearchScreenProps) {
+  const feature = useProductFeature();
+  const ids = useStore(feature.store, 'ids.search') ?? [];
+  const hasMore = useStore(feature.store, 'pagination.search.hasMore');
+  const searchProcess = useProcess('product-search');
+  const refreshProcess = useProcess('product-search-refresh');
+  const moreProcess = useProcess('product-search-more');
+  const service = Form.useFormService(ProductSearchService, () => ProductSearchService.prepare(query));
+
+  useEffect(() => {
+    return () => {
+      ProcessBuilder.getProcess('product-search').abort();
+      ProcessBuilder.getProcess('product-search-more').abort();
+      ProcessBuilder.getProcess('product-search-refresh').abort();
+    };
+  }, []);
+
+  return (
+    <Screen>
+      <Screen.Header title="Search" />
+      <Screen.Content sa-b scrollable={false}>
+        <Grid mh-s mb-s>
+          <Form service={service}>
+            <Form.Field name="title">
+              <Form.Element.Input label="Title" autoCapitalize="none" />
+            </Form.Field>
+            {/*<Button type="filled" color="primary" mt-s onPress={() => service.search().id('product-search').run()}>
+              Search
+            </Button>*/}
+          </Form>
+        </Grid>
+        <FlatList
+          data={ids}
+          keyExtractor={id => id}
+          contentContainerStyle={styles.list}
+          onEndReached={() => {
+            if (hasMore && !moreProcess?.loading && !searchProcess?.loading) {
+              service.loadMore().id('product-search-more').run();
+            }
+          }}
+          refreshControl={
+            <RefreshControl
+              refreshing={Boolean(refreshProcess?.loading && ids.length)}
+              onRefresh={() => service.search().id('product-search-refresh').run()}
+            />
+          }
+          onEndReachedThreshold={0.4}
+          ListEmptyComponent={
+            <Text body-m color="onSurfaceVariant">
+              {searchProcess?.loading ? 'Loading...' : 'No results'}
+            </Text>
+          }
+          ListFooterComponent={
+            moreProcess?.loading ? (
+              <Text body-s color="onSurfaceVariant" center>
+                Loading more...
+              </Text>
+            ) : null
+          }
+          renderItem={({ item: id }) => <ProductListItem id={id} onPress={() => service.openDetail(id)} />}
+        />
+      </Screen.Content>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { paddingHorizontal: 16, paddingBottom: 16, gap: 12 },
+});

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

@@ -0,0 +1,97 @@
+import { Entity, FormStore, ProcessBuilder as PB, Validator } from '@effijs/common';
+
+import { FormError } from '@components/Form/form.error';
+import { ProductService } from '@entity/product/product.service';
+import { Navigation } from '@navigation';
+import { HttpError } from '@services/http/http.error';
+
+@Validator.Decorators.Options({ skipMissingProperties: true })
+class ProductSearchData extends Validator.WithValidator {
+  @Validator.Decorators.Property()
+  title!: string;
+}
+
+@Entity.Decorators.Service()
+export class ProductSearchService extends FormStore.FormStoreService<ProductSearchData> {
+  private Field = FormStore.createField<ProductSearchData>();
+
+  constructor(
+    private navigation: Navigation,
+    private productService: ProductService,
+  ) {
+    super();
+  }
+
+  private timeout?: number;
+
+  fields() {
+    let prev: string;
+    return [
+      this.Field('title').onChange(({ value }) => {
+        if (prev === value) return;
+        prev = value;
+
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          if (!this.timeout) return;
+          this.search().id('product-search').run();
+        }, 300);
+      }),
+    ];
+  }
+
+  static prepare(query?: string): Partial<ProductSearchData> {
+    if (!query) return {};
+    return { title: query ?? '' };
+  }
+
+  init(initial?: Partial<ProductSearchData>) {
+    const query = this.productService.getQuery('search');
+    super.init({ title: initial?.title || query.title || '', ...(initial || {}) });
+    return this;
+  }
+
+  destroy(): void {
+    super.destroy();
+    clearTimeout(this.timeout);
+    this.timeout = undefined;
+  }
+
+  openDetail(id: string) {
+    this.navigation.features.product.detail({ id });
+  }
+
+  search = () =>
+    PB.process
+      .flow(
+        PB.step(() => {
+          const { error, data } = this.validate((raw, options) => ProductSearchData.validate(raw, options));
+          if (error) {
+            throw new FormError('Please fill required fields', error);
+          }
+          return { formData: data };
+        }),
+        PB.step(async ({ formData }, { signal }) => {
+          this.productService.setQuery('search', formData);
+          await this.productService.fetchList('search', { signal, mode: 'replace' });
+        }),
+      )
+      .concurrent('abort')
+      .onError(({ error }) => {
+        if (error instanceof HttpError) {
+          this.catchFormError(error);
+        }
+        if (error?.message && error?.message !== 'Aborted') {
+          this.navigation.widgets.showToast({ type: 'message', title: error.message });
+        }
+      });
+
+  loadMore = () =>
+    PB.process
+      .flow(
+        PB.step(async (_, { signal }) => {
+          await this.productService.fetchList('search', { signal, mode: 'append' });
+        }),
+      )
+      .concurrent('abort');
+}

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

@@ -0,0 +1,46 @@
+import { Decorators, Navigation } from '@effijs/navigation-react-native';
+
+import { ProductData } from '@entity/product/product.dto';
+import ProductDetailScreen from '@feature/product/detail/Product.Detail.Screen';
+import ProductFilterScreen from '@feature/product/filter/Product.Filter.Screen';
+import ProductFormScreen from '@feature/product/form/Product.Form.Screen';
+import ProductSearchScreen from '@feature/product/search/Product.Search.Screen';
+// forge:navigation-screen-import
+
+export type ProductFormScreenProps =
+  { mode: 'create'; data?: Record<string, unknown> } | { mode: 'edit'; data: ProductData };
+
+export type ProductDetailScreenProps = {
+  id: string;
+};
+
+export type ProductSearchScreenProps = {
+  query?: string;
+};
+
+export type ProductFilterScreenProps = Record<string, never>;
+
+@Decorators.Navigation('Product')
+export class NavigationProduct extends Navigation {
+  @Decorators.Register('Form', ProductFormScreen)
+  form(props: ProductFormScreenProps, componentId?: string) {
+    return super.navigate('Form', componentId).modal(props);
+  }
+
+  @Decorators.Register('Detail', ProductDetailScreen)
+  detail(props: ProductDetailScreenProps, componentId?: string) {
+    return super.navigate('Detail', componentId).modal(props);
+  }
+
+  @Decorators.Register('Search', ProductSearchScreen)
+  search(props: ProductSearchScreenProps = {}, componentId?: string) {
+    return super.navigate('Search', componentId).modal(props);
+  }
+
+  @Decorators.Register('Filter', ProductFilterScreen)
+  filter(props: ProductFilterScreenProps = {}, componentId?: string) {
+    return super.navigate('Filter', componentId).overlay(props);
+  }
+
+  // forge:navigation-methods
+}

package/platforms/react-native/generators/demo/generator.js

@@ -0,0 +1,93 @@
+import { writeSummary } from '../../../../lib/journal.js';
+import { packageRoot } from '../../../../lib/paths.js';
+import { projectRoot } from '../../../../lib/project.js';
+import { expandRequires, filterByPlatform, loadSolutions } from '../../../../lib/registry.js';
+import { isDry, assertInit } from '../../runtime.js';
+import { runAdd } from '../add/run.js';
+
+const REQUIRES = ['component:BottomSheet', 'component:BottomSheetWidgets', 'component:Image'];
+
+const HOME_TAB = "export { default } from '@feature/product/list/Product.List.Screen';\n";
+
+export default {
+  description: 'Add the product and category demo on top of init',
+  prompts: [],
+  actions: [
+    {
+      type: 'custom',
+      action: async (data, forge) => {
+        const outputDir = forge.resolveOutputDir('rn-fsd:demo');
+        if (!assertInit(outputDir)) {
+          return { success: false, error: 'Init markers were not found. Run forge g init first.' };
+        }
+        return { success: true };
+      },
+    },
+    { type: 'addMany', templateFiles: 'demo/files/entity', destination: 'entity' },
+    { type: 'addMany', templateFiles: 'demo/files/feature', destination: 'feature' },
+    { type: 'addMany', templateFiles: 'demo/files/navigation', destination: 'navigation' },
+    { type: 'addMany', templateFiles: 'demo/files/api', destination: '../api' },
+    {
+      type: 'append',
+      path: 'entity/index.ts',
+      pattern: /\/\/ forge:entity/,
+      before: true,
+      unique: true,
+      template: "import './product';\nimport './category';\n",
+    },
+    {
+      type: 'append',
+      path: 'feature/index.ts',
+      pattern: /\/\/ forge:feature/,
+      before: true,
+      unique: true,
+      template: "import './product';\n",
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.features.ts',
+      pattern: /\/\/ forge:navigation-features-import/,
+      before: true,
+      unique: true,
+      template: "import { NavigationProduct } from './navigation.product';\n",
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.features.ts',
+      // import marker is `// forge:navigation-features-import`, so this must not match that prefix
+      pattern: /\/\/ forge:navigation-features(?!-)/,
+      before: true,
+      unique: true,
+      template: '    public product: NavigationProduct,\n',
+    },
+    {
+      type: 'modify',
+      path: 'app/tabs/home/Home.tab.tsx',
+      transform: () => HOME_TAB,
+    },
+    {
+      type: 'custom',
+      action: async (data, forge) => {
+        const dryRun = isDry(data, forge);
+        data.id = REQUIRES[0];
+        const solutions = filterByPlatform(await loadSolutions(packageRoot()), 'react-native');
+        const needed = expandRequires(REQUIRES, solutions).map((item) => item.id);
+        for (const id of needed) {
+          const result = await runAdd({ ...data, id, dryRun }, forge);
+          if (!result.success) return result;
+        }
+        await writeSummary(projectRoot(forge), {
+          generator: 'demo',
+          lines: [
+            'Added entity/product, entity/category, and feature/product',
+            'Home tab opens the product list',
+            `Required solutions: ${needed.join(', ')}`,
+            'HTTP samples are in api/',
+          ],
+          dryRun,
+        });
+        return { success: true };
+      },
+    },
+  ],
+};

package/platforms/react-native/generators/entity/generator.js

@@ -0,0 +1,68 @@
+import { writeSummary } from '../../../../lib/journal.js';
+import { projectRoot } from '../../../../lib/project.js';
+import { entityPrompts, entityTemplate, prepareEntity } from '../../../../shared/generators/entity/render.js';
+
+function variantFile(variant, templateName, filename) {
+  return {
+    type: 'add',
+    path: `entity/{{names.kebab}}/{{names.kebab}}.${filename}`,
+    templateFile: entityTemplate(`${variant}/${templateName}`),
+    skip: (data) => data.variant !== variant,
+  };
+}
+
+export default {
+  description: 'Add an entity (api, dto, store, service)',
+  prompts: entityPrompts(),
+  actions: [
+    {
+      type: 'custom',
+      action(data) {
+        const error = prepareEntity(data);
+        if (error) return { success: false, error };
+      },
+    },
+    variantFile('crud', 'dto.ts.hbs', 'dto.ts'),
+    variantFile('crud', 'api.ts.hbs', 'api.ts'),
+    variantFile('crud', 'store.ts.hbs', 'store.ts'),
+    variantFile('crud', 'service.ts.hbs', 'service.ts'),
+    variantFile('simple', 'dto.ts.hbs', 'dto.ts'),
+    variantFile('simple', 'api.ts.hbs', 'api.ts'),
+    variantFile('simple', 'store.ts.hbs', 'store.ts'),
+    variantFile('simple', 'service.ts.hbs', 'service.ts'),
+    {
+      type: 'add',
+      path: 'entity/{{names.kebab}}/index.ts',
+      templateFile: entityTemplate('index.ts.hbs'),
+    },
+    {
+      type: 'append',
+      path: 'entity/index.ts',
+      pattern: /\/\/ forge:entity$/m,
+      before: true,
+      unique: true,
+      template: "import './{{names.kebab}}';\n",
+    },
+    {
+      type: 'custom',
+      action: async (data, forge) => {
+        const kebab = data.names.kebab;
+        const files = [
+          `entity/${kebab}/${kebab}.dto.ts`,
+          `entity/${kebab}/${kebab}.api.ts`,
+          `entity/${kebab}/${kebab}.store.ts`,
+          `entity/${kebab}/${kebab}.service.ts`,
+          `entity/${kebab}/index.ts`,
+          'entity/index.ts',
+        ];
+        await writeSummary(projectRoot(forge), {
+          generator: 'entity',
+          name: kebab,
+          lines: [`Variant: ${data.variant}`, `API path: ${data.apiUrl}`, ...files.map((file) => `File: ${file}`)],
+          dryRun: Boolean(data.dryRun || forge.runOptions?.dryRun),
+        });
+        return { success: true };
+      },
+    },
+  ],
+};