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

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

@@ -0,0 +1,224 @@
+import { writeSummary } from '../../../../lib/journal.js';
+import { projectRoot } from '../../../../lib/project.js';
+import { ALL_SCREENS, featurePrompts, prepareFeature } from './render.js';
+
+function screenPascal(screen) {
+  return screen.charAt(0).toUpperCase() + screen.slice(1);
+}
+
+function skipScreen(screen, existsKey) {
+  return (data) => !data.screens.includes(screen) || (Boolean(data.dryRun) && existsKey && !data[existsKey]);
+}
+
+function screenActions(screen) {
+  const pascal = screenPascal(screen);
+  const props = screen === 'detail'
+    ? '{{feature.pascal}}DetailScreenProps'
+    : screen === 'form'
+      ? '{{feature.pascal}}FormScreenProps'
+      : 'Record<string, never>';
+  const style = screen === 'filter' ? 'overlay' : 'modal';
+  return [
+    {
+      type: 'add',
+      path: `feature/{{feature.kebab}}/${screen}/{{feature.kebab}}.${screen}.service.ts`,
+      templateFile: `feature/templates/${screen}.service.ts.hbs`,
+      skip: skipScreen(screen),
+    },
+    {
+      type: 'add',
+      path: `feature/{{feature.kebab}}/${screen}/{{feature.pascal}}.${pascal}.Screen.tsx`,
+      templateFile: `feature/templates/${screen}.screen.tsx.hbs`,
+      skip: skipScreen(screen),
+    },
+    {
+      type: 'append',
+      path: 'feature/{{feature.kebab}}/{{feature.kebab}}.feature.ts',
+      pattern: /\/\/ forge:feature-services-import$/m,
+      before: true,
+      unique: true,
+      template: `import { {{feature.pascal}}${pascal}Service } from './${screen}/{{feature.kebab}}.${screen}.service';\n`,
+      skip: skipScreen(screen, 'featureExists'),
+    },
+    {
+      type: 'append',
+      path: 'feature/{{feature.kebab}}/{{feature.kebab}}.feature.ts',
+      pattern: /    \/\/ forge:feature-ctor$/m,
+      before: true,
+      unique: true,
+      template: `    readonly ${screen}: {{feature.pascal}}${pascal}Service,\n`,
+      skip: skipScreen(screen, 'featureExists'),
+    },
+    {
+      type: 'append',
+      path: 'feature/{{feature.kebab}}/index.ts',
+      pattern: /\/\/ forge:feature-screens$/m,
+      before: true,
+      unique: true,
+      template: `import './${screen}/{{feature.kebab}}.${screen}.service';\n`,
+      skip: skipScreen(screen, 'featureIndexExists'),
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.{{feature.kebab}}.ts',
+      pattern: /\/\/ forge:navigation-screen-import$/m,
+      before: true,
+      unique: true,
+      template: `import {{feature.pascal}}${pascal}Screen from '@feature/{{feature.kebab}}/${screen}/{{feature.pascal}}.${pascal}.Screen';\n`,
+      skip: skipScreen(screen, 'navExists'),
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.{{feature.kebab}}.ts',
+      pattern: /  \/\/ forge:navigation-methods$/m,
+      before: true,
+      unique: true,
+      template: `  @Decorators.Register('${pascal}', {{feature.pascal}}${pascal}Screen)
+  ${screen}(props: ${props} = {} as ${props}, componentId?: string) {
+    return super.navigate('${pascal}', componentId).${style}(props);
+  }
+
+`,
+      skip: skipScreen(screen, 'navExists'),
+    },
+  ];
+}
+
+export default {
+  description: 'Add a feature slice and the screens you select',
+  prompts: featurePrompts,
+  actions: [
+    {
+      type: 'custom',
+      action: (data, forge) => prepareFeature(data, forge),
+    },
+    {
+      type: 'add',
+      path: 'feature/{{feature.kebab}}/{{feature.kebab}}.feature.ts',
+      templateFile: 'feature/templates/feature.ts.hbs',
+    },
+    {
+      type: 'add',
+      path: 'feature/{{feature.kebab}}/{{feature.kebab}}.hooks.ts',
+      templateFile: 'feature/templates/hooks.ts.hbs',
+    },
+    {
+      type: 'add',
+      path: 'feature/{{feature.kebab}}/index.ts',
+      templateFile: 'feature/templates/index.ts.hbs',
+    },
+    {
+      type: 'add',
+      path: 'navigation/navigation.{{feature.kebab}}.ts',
+      templateFile: 'feature/templates/navigation.ts.hbs',
+    },
+    ...ALL_SCREENS.flatMap((screen) => screenActions(screen)),
+    {
+      type: 'add',
+      path: 'feature/{{feature.kebab}}/list/{{feature.pascal}}.List.Item.tsx',
+      templateFile: 'feature/templates/list.item.tsx.hbs',
+      skip: (data) => !data.screens.includes('list') && !data.screens.includes('search'),
+    },
+    {
+      type: 'add',
+      path: 'app/tabs/{{feature.kebab}}/{{feature.pascal}}.tab.tsx',
+      templateFile: 'feature/templates/tab.tsx.hbs',
+      skip: (data) => !data.tab,
+    },
+    {
+      type: 'append',
+      path: 'feature/index.ts',
+      pattern: /\/\/ forge:feature$/m,
+      before: true,
+      unique: true,
+      template: "import './{{feature.kebab}}';\n",
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.features.ts',
+      pattern: /\/\/ forge:navigation-features-import$/m,
+      before: true,
+      unique: true,
+      template: "import { Navigation{{feature.pascal}} } from './navigation.{{feature.kebab}}';\n",
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.features.ts',
+      pattern: /    \/\/ forge:navigation-features$/m,
+      before: true,
+      unique: true,
+      template: '    public {{feature.camel}}: Navigation{{feature.pascal}},\n',
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.tabs.ts',
+      pattern: /            \/\/ forge:navigation-tabs$/m,
+      before: true,
+      unique: true,
+      template: `            {
+              stack: {
+                children: [{ component: { name: 'Tabs.{{feature.pascal}}', id: 'Tabs.{{feature.pascal}}' } }],
+                options: { bottomTab: { text: '{{feature.pascal}}' } },
+              },
+            },
+`,
+      skip: (data) => !data.tab || !data.wixTabs,
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.tabs.ts',
+      pattern: /  \/\/ forge:navigation-tabs-register$/m,
+      before: true,
+      unique: true,
+      template: "  @Decorators.Register('{{feature.pascal}}', require('@app/tabs/{{feature.kebab}}/{{feature.pascal}}.tab').default)\n  {{feature.camel}}Tab() {}\n",
+      skip: (data) => !data.tab || !data.wixTabs,
+    },
+    {
+      type: 'append',
+      path: 'navigation/navigation.tabs.ts',
+      pattern: /  \/\/ forge:navigation-tabs-register$/m,
+      before: true,
+      unique: true,
+      template: '  // TODO: show the {{feature.pascal}} tab in {{tabNavigatorLabel}}\n  open{{feature.pascal}}() {}\n',
+      skip: (data) => !data.tab || data.wixTabs,
+    },
+    {
+      type: 'custom',
+      action: async (data, forge) => {
+        const feature = data.feature;
+        const lines = [...(data.screenNotes ?? [])];
+        lines.push(`Registered navigation.features.${feature.camel}`);
+        if (data.tab && !data.wixTabs) lines.push(`${data.navigatorName} tab is a TODO in navigation.tabs.ts`);
+        if (data.tab) lines.push(`Tab: ${feature.pascal}`);
+        lines.push(
+          `Screens: ${data.screens.join(', ') || 'none'}`,
+          `Hook: use${feature.pascal}Feature()`,
+          `Navigation: navigation.features.${feature.camel}`,
+        );
+        const files = [
+          `feature/${feature.kebab}/${feature.kebab}.feature.ts`,
+          `feature/${feature.kebab}/${feature.kebab}.hooks.ts`,
+          `feature/${feature.kebab}/index.ts`,
+        ];
+        for (const screen of data.screens) {
+          const pascal = screenPascal(screen);
+          files.push(`feature/${feature.kebab}/${screen}/${feature.kebab}.${screen}.service.ts`);
+          files.push(`feature/${feature.kebab}/${screen}/${feature.pascal}.${pascal}.Screen.tsx`);
+        }
+        if (data.screens.includes('list') || data.screens.includes('search')) {
+          files.push(`feature/${feature.kebab}/list/${feature.pascal}.List.Item.tsx`);
+        }
+        files.push(`navigation/navigation.${feature.kebab}.ts`);
+        if (data.tab) files.push(`app/tabs/${feature.kebab}/${feature.pascal}.tab.tsx`);
+        lines.push(...files.map((file) => `File: ${file}`), 'Open the feature from a tab or from an existing screen.');
+        await writeSummary(projectRoot(forge), {
+          generator: 'feature',
+          name: feature.kebab,
+          lines,
+          dryRun: data.dryRun,
+        });
+        return { success: true };
+      },
+    },
+  ],
+};

package/platforms/react-native/generators/feature/render.js

@@ -0,0 +1,163 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { namesOf } from '../../../../lib/names.js';
+import { listDirs } from '../../../../lib/project.js';
+
+export const ALL_SCREENS = ['list', 'detail', 'form', 'filter', 'search'];
+
+export function parseScreens(value) {
+  if (!value || value === 'all') return [...ALL_SCREENS];
+  const list = Array.isArray(value) ? value : String(value).split(',');
+  return [...new Set(list.map((item) => String(item).trim()).filter(Boolean))];
+}
+
+export function normalizeScreens(screens) {
+  const next = [...screens];
+  const notes = [];
+  if (next.includes('filter') && !next.includes('list')) {
+    next.push('list');
+    notes.push('filter applies to a list, so list was added');
+  }
+  return { screens: ALL_SCREENS.filter((screen) => next.includes(screen)), notes };
+}
+
+export function featurePrompts(forge) {
+  const outputDir = forge.resolveOutputDir('rn-fsd:feature');
+  const entities = listDirs(path.join(outputDir, 'entity'));
+  return [
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Feature name:',
+      validate: (input) => (input?.trim() ? true : 'Feature name is required'),
+    },
+    {
+      type: 'list',
+      name: 'entity',
+      message: 'Entity:',
+      choices: [...entities.map((name) => ({ name, value: name })), { name: 'Create a new entity', value: '__new__' }],
+      default: entities[0] ?? '__new__',
+    },
+    {
+      type: 'list',
+      name: 'variant',
+      message: 'New entity variant:',
+      when: (answers) => answers.entity === '__new__',
+      choices: ['crud', 'simple'],
+      default: 'crud',
+    },
+    {
+      type: 'input',
+      name: 'apiUrl',
+      message: 'API resource path:',
+      when: (answers) => answers.entity === '__new__',
+      default: (answers) => namesOf(answers.name).plural,
+    },
+    {
+      type: 'input',
+      name: 'fields',
+      message: 'Entity fields:',
+      when: (answers) => answers.entity === '__new__',
+      default: '',
+    },
+    {
+      type: 'checkbox',
+      name: 'screens',
+      message: 'Screens:',
+      choices: ALL_SCREENS.map((screen) => ({ name: screen, value: screen, checked: ['list', 'detail', 'form'].includes(screen) })),
+      default: ['list', 'detail', 'form'],
+    },
+    {
+      type: 'confirm',
+      name: 'tab',
+      message: 'Add a bottom tab?',
+      default: false,
+    },
+  ];
+}
+
+function listCalls(data) {
+  const feature = data.feature.camel;
+  const calls = [];
+  if (data.screens.includes('detail')) calls.push(`  openDetail(id: string) { this.navigation.features.${feature}.detail({ id }); }`);
+  if (data.screens.includes('form')) calls.push(`  openCreate() { this.navigation.features.${feature}.form({ mode: 'create', data: {} }); }`);
+  if (data.screens.includes('search')) calls.push(`  openSearch() { this.navigation.features.${feature}.search({}); }`);
+  if (data.screens.includes('filter')) calls.push(`  openFilter() { this.navigation.features.${feature}.filter({}); }`);
+  return calls.join('\n\n');
+}
+
+function failure(result, fallback) {
+  if (result?.error) return result.error;
+  const failed = result?.results?.find((item) => item && item.success === false);
+  return failed?.error || fallback;
+}
+
+export async function prepareFeature(data, forge) {
+  if (data.tab === 'true') data.tab = true;
+  if (data.tab === 'false') data.tab = false;
+  if (!data.name || !String(data.name).trim()) {
+    return { success: false, error: 'Feature name is required. Pass --name.' };
+  }
+
+  const parsed = parseScreens(data.screens);
+  const unknown = parsed.filter((screen) => !ALL_SCREENS.includes(screen));
+  if (unknown.length) return { success: false, error: `Unknown screens: ${unknown.join(', ')}` };
+  const normalized = normalizeScreens(parsed);
+  data.screens = normalized.screens;
+  data.screenNotes = [...normalized.notes];
+
+  const feature = namesOf(data.name);
+  data.feature = feature;
+  data.dryRun = Boolean(data.dryRun || forge.runOptions?.dryRun);
+  data.force = Boolean(data.force || forge.runOptions?.force);
+
+  const outputDir = forge.resolveOutputDir('rn-fsd:feature');
+  const featureIndex = path.join(outputDir, 'feature/index.ts');
+  const featuresFile = path.join(outputDir, 'navigation/navigation.features.ts');
+  if (!fs.existsSync(featureIndex) || !fs.existsSync(featuresFile)) {
+    return { success: false, error: 'Run forge g init before forge g feature.' };
+  }
+  const tabsFile = path.join(outputDir, 'navigation/navigation.tabs.ts');
+  if (data.tab && !fs.existsSync(tabsFile)) {
+    return { success: false, error: 'navigation.tabs.ts is missing.' };
+  }
+
+  if (!data.entity || data.entity === '__new__') {
+    const created = await forge.run('rn-fsd:entity', {
+      yes: true,
+      name: feature.pascal,
+      apiUrl: data.apiUrl || feature.plural,
+      variant: data.variant || 'crud',
+      fields: data.fields ?? '',
+      dryRun: data.dryRun,
+      force: data.force,
+    });
+    if (!created.success) {
+      return { success: false, error: failure(created, 'Failed to create entity') };
+    }
+    data.entity = feature.kebab;
+    data.screenNotes.push(`Created entity ${feature.kebab}`);
+  }
+
+  data.entityNames = namesOf(data.entity);
+  data.listCalls = listCalls(data);
+  data.detailEdit = data.screens.includes('form')
+    ? `  openEdit(entity: ${data.entityNames.pascal}Data) { return this.navigation.features.${feature.camel}.form({ mode: 'edit', data: entity }); }`
+    : '';
+
+  const featureDir = path.join(outputDir, 'feature', feature.kebab);
+  data.featureExists = fs.existsSync(path.join(featureDir, `${feature.kebab}.feature.ts`));
+  data.featureIndexExists = fs.existsSync(path.join(featureDir, 'index.ts'));
+  data.navExists = fs.existsSync(path.join(outputDir, 'navigation', `navigation.${feature.kebab}.ts`));
+  if (data.featureExists) {
+    data.screenNotes.push(`Feature ${feature.kebab} already exists. Adding only the new screens.`);
+  }
+
+  const tabs = fs.existsSync(tabsFile) ? fs.readFileSync(tabsFile, 'utf8') : '';
+  const navigator = forge.config.navigator;
+  data.navigatorName = navigator;
+  data.tabNavigatorLabel = navigator ?? 'the stub navigator';
+  data.wixTabs = navigator === 'react-native-navigation' && /\/\/ forge:navigation-tabs$/m.test(tabs);
+  return null;
+}

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

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+import { Button, Grid, Screen, Text, useStore } from '@components';
+import { use{{feature.pascal}}Feature } from '@feature/{{feature.kebab}}/{{feature.kebab}}.hooks';
+
+export default function {{feature.pascal}}DetailScreen({ id }: { id: string }) {
+  const feature = use{{feature.pascal}}Feature();
+  const item = useStore(feature.store, `{{entityNames.kebab}}.${id}`);
+
+  useEffect(() => {
+    feature.detail.load(id).id('{{feature.kebab}}-detail').run();
+  }, [id]);
+
+  return (
+    <Screen>
+      <Screen.Header title="{{feature.pascal}}" />
+      <Screen.Content sa-b>
+        <Grid mh-s mt-l>
+          <Text display-s color="outline">{item?.title ?? item?.name ?? id}</Text>
+          {{#if (includes screens "form")}}<Button type="filled" mt-l onPress={() => item && feature.detail.openEdit(item)}>Edit</Button>{{/if}}
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Entity, ProcessBuilder as PB } from '@effijs/common';
+
+import { {{entityNames.pascal}}Data } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.dto';
+import { {{entityNames.pascal}}Service } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.service';
+import { Navigation } from '@navigation';
+
+@Entity.Decorators.Service()
+export class {{feature.pascal}}DetailService {
+  constructor(private navigation: Navigation, private {{entityNames.camel}}Service: {{entityNames.pascal}}Service) {}
+
+{{{detailEdit}}}
+
+  load = (id: string) => PB.process.flow(PB.step(async (_, { signal }) => { await this.{{entityNames.camel}}Service.fetchById(id, { force: true, signal }); })).concurrent('abort');
+}

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

@@ -0,0 +1,18 @@
+import { Entity, EffiJS } from '@effijs/common';
+
+import { {{entityNames.pascal}}Service } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.service';
+import { {{entityNames.pascal}}Store } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.store';
+import { Navigation } from '@navigation';
+// forge:feature-services-import
+
+@Entity.Decorators.Feature()
+export class {{feature.pascal}}Feature {
+  constructor(
+    private navigation: Navigation,
+    readonly store: {{entityNames.pascal}}Store,
+    readonly service: {{entityNames.pascal}}Service,
+    // forge:feature-ctor
+  ) {}
+}
+
+EffiJS.createFeature({{feature.pascal}}Feature, '{{feature.pascal}}Feature');

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Button, Form, Grid, Text } from '@components';
+import { use{{feature.pascal}}Feature } from '@feature/{{feature.kebab}}/{{feature.kebab}}.hooks';
+
+export default function {{feature.pascal}}FilterScreen() {
+  const feature = use{{feature.pascal}}Feature();
+  return (
+    <Grid mh-s mt-l>
+      <Text title-l color="outline">Filter</Text>
+      <Form service={feature.service}>
+        <Form.Item name="title"><Form.Element.Input label="Title" /></Form.Item>
+      </Form>
+      <Button type="filled" mt-l onPress={() => feature.filter.apply({})}>Apply</Button>
+    </Grid>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Entity } from '@effijs/common';
+
+import { {{entityNames.pascal}}Service } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.service';
+import { Navigation } from '@navigation';
+
+@Entity.Decorators.Service()
+export class {{feature.pascal}}FilterService {
+  constructor(private navigation: Navigation, private {{entityNames.camel}}Service: {{entityNames.pascal}}Service) {}
+
+  apply(query: Record<string, unknown>) {
+    this.{{entityNames.camel}}Service.setQuery('list', query);
+    this.navigation.features.{{feature.camel}}.list?.({} as never);
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Button, Form, Grid, Screen } from '@components';
+import { {{feature.pascal}}FormService } from './{{feature.kebab}}.form.service';
+
+export default function {{feature.pascal}}FormScreen({ mode, data }: { mode: 'create' | 'edit'; data?: Record<string, unknown> }) {
+  const service = Form.useFormService({{feature.pascal}}FormService, { mode, ...(data ?? {}) });
+  return (
+    <Screen>
+      <Screen.Header title={mode === 'edit' ? 'Edit' : 'Create'} />
+      <Screen.Content sa-b>
+        <Grid mh-s mt-l>
+          <Form service={service}>
+            <Form.Item name="title"><Form.Element.Input label="Title" /></Form.Item>
+            <Button type="filled" mt-l onPress={() => service.submit().id('{{feature.kebab}}-form').run()}>Save</Button>
+          </Form>
+        </Grid>
+      </Screen.Content>
+    </Screen>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { Entity, FormStore, ProcessBuilder as PB, Validator } from '@effijs/common';
+
+import { {{entityNames.pascal}}CreatePayload, {{entityNames.pascal}}UpdatePayload } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.dto';
+import { {{entityNames.pascal}}Service } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.service';
+import { Navigation } from '@navigation';
+
+class {{feature.pascal}}FormData extends Validator.WithValidator {
+  @Validator.Decorators.IsDefined('Title is required')
+  title!: string;
+  id?: number;
+}
+
+@Entity.Decorators.Service()
+export class {{feature.pascal}}FormService extends FormStore.FormStoreService<{{feature.pascal}}FormData> {
+  mode: 'create' | 'edit' = 'create';
+
+  constructor(private {{entityNames.camel}}Service: {{entityNames.pascal}}Service, private navigation: Navigation) { super(); }
+
+  init(initial?: Partial<{{feature.pascal}}FormData> & { mode?: 'create' | 'edit' }) {
+    this.mode = initial?.mode ?? 'create';
+    super.init({ title: '', ...(initial || {}) });
+    return this;
+  }
+
+  submit = () => PB.process.flow(
+    PB.step(() => {
+      const { error, data } = this.validate((raw, options) => {{feature.pascal}}FormData.validate(raw, options));
+      if (error) throw error;
+      return { formData: data };
+    }),
+    PB.step(async ({ formData }) => {
+      if (this.mode === 'create') await this.{{entityNames.camel}}Service.create({{entityNames.pascal}}CreatePayload.transform(formData));
+      else await this.{{entityNames.camel}}Service.update({{entityNames.pascal}}UpdatePayload.transform(formData));
+      this.navigation.widgets.showToast({ type: 'message', title: 'Saved' });
+    }),
+  );
+}

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

@@ -0,0 +1,7 @@
+import { useFeature } from '@feature/feature.hooks';
+
+import type { {{feature.pascal}}Feature } from './{{feature.kebab}}.feature';
+
+export function use{{feature.pascal}}Feature() {
+  return useFeature<{{feature.pascal}}Feature>('{{feature.pascal}}Feature');
+}

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

@@ -0,0 +1,2 @@
+// forge:feature-screens
+import './{{feature.kebab}}.feature';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { Text, useStore } from '@components';
+import { use{{feature.pascal}}Feature } from '@feature/{{feature.kebab}}/{{feature.kebab}}.hooks';
+
+export default function {{feature.pascal}}ListItem({ id, onPress }: { id: string; onPress?: () => void }) {
+  const feature = use{{feature.pascal}}Feature();
+  const item = useStore(feature.store, `{{entityNames.kebab}}.${id}`);
+  if (!item) return null;
+  return (
+    <Pressable onPress={onPress}>
+      <Text body-l color="outline">{item.title ?? item.name ?? id}</Text>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { FlatList } from 'react-native';
+
+import { Button, Grid, Screen, Text, useStore } from '@components';
+import { use{{feature.pascal}}Feature } from '@feature/{{feature.kebab}}/{{feature.kebab}}.hooks';
+
+import {{feature.pascal}}ListItem from './{{feature.pascal}}.List.Item';
+
+export default function {{feature.pascal}}ListScreen() {
+  const feature = use{{feature.pascal}}Feature();
+  const ids = useStore(feature.store, 'ids.list') ?? [];
+
+  useEffect(() => {
+    feature.list.load().id('{{feature.kebab}}-list').run();
+  }, []);
+
+  return (
+    <Screen>
+      <Screen.HeaderTab>
+        <Grid mh-s row align-center space-between>
+          <Text title-l color="outline" weight={600}>{{feature.pascal}}</Text>
+          <Grid row gap-s>
+            {{#if (includes screens "search")}}<Button type="text" leadingIcon="search" size={40} withoutLoadingIndicator onPress={() => feature.list.openSearch()} />{{/if}}
+            {{#if (includes screens "filter")}}<Button type="text" leadingIcon="settings" size={40} withoutLoadingIndicator onPress={() => feature.list.openFilter()} />{{/if}}
+            {{#if (includes screens "form")}}<Button type="filled" leadingIcon="plus" size={40} withoutLoadingIndicator onPress={() => feature.list.openCreate()} />{{/if}}
+          </Grid>
+        </Grid>
+      </Screen.HeaderTab>
+      <Screen.Content sa-b scrollable={false}>
+        <FlatList data={ids} keyExtractor={id => id} renderItem={({ item }) => <{{feature.pascal}}ListItem id={item} {{#if (includes screens "detail")}}onPress={() => feature.list.openDetail(item)}{{/if}} />} />
+      </Screen.Content>
+    </Screen>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Entity, ProcessBuilder as PB } from '@effijs/common';
+
+import { {{entityNames.pascal}}Service } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.service';
+import { Navigation } from '@navigation';
+
+@Entity.Decorators.Service()
+export class {{feature.pascal}}ListService {
+  constructor(private navigation: Navigation, private {{entityNames.camel}}Service: {{entityNames.pascal}}Service) {}
+
+  load = () => PB.process.flow(PB.step(async (_, { signal }) => { await this.{{entityNames.camel}}Service.fetchList('list', { signal, mode: 'replace' }); })).concurrent('abort');
+
+  loadMore = () => PB.process.flow(PB.step(async (_, { signal }) => { await this.{{entityNames.camel}}Service.fetchList('list', { signal, mode: 'append' }); })).concurrent('abort');
+
+{{{listCalls}}}
+}

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

@@ -0,0 +1,12 @@
+import { Decorators, Navigation } from '@effijs/navigation-react-native';
+
+import { {{entityNames.pascal}}Data } from '@entity/{{entityNames.kebab}}/{{entityNames.kebab}}.dto';
+// forge:navigation-screen-import
+
+export type {{feature.pascal}}DetailScreenProps = { id: string };
+export type {{feature.pascal}}FormScreenProps = { mode: 'create'; data?: Record<string, unknown> } | { mode: 'edit'; data: {{entityNames.pascal}}Data };
+
+@Decorators.Navigation('{{feature.pascal}}')
+export class Navigation{{feature.pascal}} extends Navigation {
+  // forge:navigation-methods
+}

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { FlatList } from 'react-native';
+
+import { Grid, Screen, TextInput, useStore } from '@components';
+import { use{{feature.pascal}}Feature } from '@feature/{{feature.kebab}}/{{feature.kebab}}.hooks';
+
+import {{feature.pascal}}ListItem from '../list/{{feature.pascal}}.List.Item';
+
+export default function {{feature.pascal}}SearchScreen() {
+  const feature = use{{feature.pascal}}Feature();
+  const ids = useStore(feature.store, 'ids.search') ?? [];
+  const [title, setTitle] = useState('');
+  return (
+    <Screen>
+      <Screen.Header title="Search" />
+      <Screen.Content sa-b scrollable={false}>
+        <Grid mh-s mt-s>
+          <TextInput value={title} onChangeText={value => { setTitle(value); feature.search.search(value).id('{{feature.kebab}}-search').run(); }} />
+        </Grid>
+        <FlatList data={ids} keyExtractor={id => id} renderItem={({ item }) => <{{feature.pascal}}ListItem id={item} />} />
+      </Screen.Content>
+    </Screen>
+  );
+}