Create Component

Crée un nouveau composant React Native suivant les conventions du projet.

Arguments

• name (requis) : Nom du composant en PascalCase

Instructions

1. Demander à l'utilisateur :
2. Le composant est-il shared (réutilisable par plusieurs screens) ou spécifique à une feature ?
3. Si spécifique : quelle feature/screen ?

4. Le composant nécessite-t-il de la logique (hooks API, navigation) ? → Smart + Dumb

5. Déterminer le chemin :

6. Shared : src/components/{ComponentName}/

7. Feature : src/screens/{feature}/components/{ComponentName}/

8. Créer la structure selon le pattern :

Structure Dumb (défaut)

{path}/{ComponentName}/
├── index.ts
├── {ComponentName}.tsx
└── {ComponentName}.stories.tsx

Structure Smart + Dumb (si logique nécessaire)

{path}/{ComponentName}/
├── index.ts
├── {ComponentName}.tsx           # Smart (logique)
├── {ComponentName}UI.tsx         # Dumb (UI pure)
└── {ComponentName}UI.stories.tsx

Templates

index.ts

export { {{ComponentName}} } from "./{{ComponentName}}";

{ComponentName}.tsx (Dumb)

import { Text } from "@bricks-common/uimmo/components/Text";
import { View } from "react-native";

type {{ComponentName}}Props = {
  // TODO: Define props
};

export const {{ComponentName}} = ({}: {{ComponentName}}Props) => {
  return (
    <View>
      <Text>{{ComponentName}}</Text>
    </View>
  );
};

{ComponentName}.tsx (Smart)

import { {{ComponentName}}UI } from "./{{ComponentName}}UI";

type {{ComponentName}}Props = {
  // TODO: Define props
};

export const {{ComponentName}} = ({}: {{ComponentName}}Props) => {
  // Hooks API, navigation, logique ici

  const handlePress = () => {
    // TODO: Implement
  };

  return <{{ComponentName}}UI onPress={handlePress} />;
};

{ComponentName}UI.tsx (Dumb pour Smart)

import { Text } from "@bricks-common/uimmo/components/Text";
import { View } from "react-native";

type {{ComponentName}}UIProps = {
  onPress: () => void;
  // TODO: Define props
};

export const {{ComponentName}}UI = ({
  onPress,
}: {{ComponentName}}UIProps) => {
  return (
    <View>
      <Text>{{ComponentName}}</Text>
    </View>
  );
};

{ComponentName}.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { {{ComponentName}} } from "./{{ComponentName}}";

const meta: Meta<typeof {{ComponentName}}> = {
  component: {{ComponentName}},
  title: "Components/{{ComponentName}}",
};

export default meta;

type Story = StoryObj<typeof {{ComponentName}}>;

export const Default: Story = {
  args: {},
};

Checklist finale

• [ ] Structure de dossier correcte
• [ ] Types explicites pour les props
• [ ] Storybook créé (obligatoire si shared)
• [ ] Imports depuis @bricks-common/uimmo pour Box, Text, etc.
• [ ] Export via index.ts
• [ ] Pas de memo/useMemo/useCallback manuels (React Compiler s'en charge)

Règles appliquées

• front-components.mdc
• front-theming-styling.mdc
• front-performance.mdc