docs(components): update documentation on components

docs/components/CONTAINER_PRESENTER.md

@@ -19,8 +19,6 @@ It should have a global _index.ts_ module file.
 
 The container is located in the _container_ folder of the component.
 
-It must implement the template outlet pattern in order to get the ability to customise the presentation layer.
-
 It must have a dedicated presenter component which will orchestrate the presentation.
 
 It should follow the following naming convention:
@@ -30,23 +28,9 @@ It should follow the following naming convention:
 | **Component file name**      | *-cont.component.ts |
 | **Selector name**      | *-cont |
 | **Component name**      | *ContComponent |
-| **Configuration file name**      | *-cont.config.ts |
-| **Configuration name**      | *ContConfig |
-| **Context file name**      | *-cont.context.ts |
-| **Context interface names**      | *ContContextInput / *ContContextOutput / *ContContext |
-| **Fixture file name**      | *-cont.fixture.ts |
-| **Fixture name**      | 	*ContFixture |
-| **Module file name**      | *-cont.module.ts |
-| **Module name**      | *ContModule |
 | **Template file name**      | *-cont.template.html |
 | **Unit test file name**      | *-cont.spec.ts |
 
-It has its own _index.ts_ file exporting:
-
-* Module file
-* Context file
-* Configuration file
-
 ### Presenter
 
 The presenter is located in the _presenter_ folder of the component.
@@ -58,24 +42,10 @@ It should follow the following naming convention:
 | **Component file name**      | *-pres.component.ts |
 | **Selector name**      | *-pres |
 | **Component name**      | *PresComponent |
-| **Configuration file name**      | *-pres.config.ts |
-| **Configuration name**      | *PresConfig |
-| **Context file name**      | *-pres.context.ts |
-| **Context interface names**      | *PresContextInput / *PresContextOutput / *PresContext |
-| **Fixture file name**      | *-pres.fixture.ts |
-| **Fixture name**      | 	*PresFixture |
-| **Module file name**      | *-pres.module.ts |
-| **Module name**      | *PresModule |
 | **Template file name**      | *-pres.template.html |
 | **Style file name**      | *-pres.style.scss |
 | **Unit test file name**      | *-pres.spec.ts |
 
-It has its own _index.ts_ file exporting:
-
-* Module file
-* Context file
-* Configuration file
-
 ### Example
 
 Example of a component implementing the container/presenter pattern:
@@ -84,25 +54,15 @@ Example of a component implementing the container/presenter pattern:
 passengers/
     container/
         passengers-cont.component.ts
-        passengers-cont.module.ts
         passengers-cont.template.html
-        passengers-cont.config.ts
-        passengers-cont.context.ts
         passengers-cont.spec.ts
         index.ts
     contracts/
         passenger.model.ts
-    directives/
-        my-directive.directive.ts
     presenter/
         passengers-pres.component.ts
-        passengers-pres.module.ts
         passengers-pres.template.html
         passengers-pres.style.scss
-        passengers-pres.style.theme.scss
-        passengers-pres.config.ts
-        passengers-pres.context.ts
-        passengers-pres.fixture.ts
         passengers-pres.spec.ts
         index.ts
     sub-components/
@@ -112,9 +72,7 @@ passengers/
 
 ## Guidelines summary
 
-* A component interacting with external entities (store, services, etc.) should be split into a container and a presenter
-* A component with no interactions with external entities should only be a presenter
-* By definition, a block is always split into container/presenter
+* A component interacting with external entities (store, services, etc.) may be split into a container and a presenter
 * Subcomponents are located in the related block subcomponents folder. If the subcomponent is a block, it will then be set either in the components root folder (if it has a functional meaning), or at the root of the functional folder in a dedicated sub folder.
 * A component shared among different blocks and hosted in the same functional folder, should be placed in a shared folder under the functional one.
 * Avoid creating useless intermediate folder:
@@ -125,29 +83,26 @@ passengers/
 
 ```
 app/src/
-    components/
-        my-complex-area/
-            my-complex-component/              
-                container/
-                contracts/
-                directives/
-                presenter/
-                sub-components/
-                    my-sub-component/
-                        container/
-                        presenter/
-            my-simple-component/
-            shared/
-                my-shared-component-in-area/
-                    container/
-                    presenter/
-        my-simple-area/
-            container/
-            presenter/
-        shared/
-            my-shared-component-in-lib/
-                container/
-                presenter/
-    elements/
-        my-element/
+  components/
+    my-complex-area/
+      my-complex-component/
+        container/
+        contracts/
+        presenter/
+        sub-components/
+          my-sub-component/
+      my-simple-component/
+      shared/
+        my-shared-component-in-my-complex-area/
+          container/
+          presenter/
+    my-simple-area/
+      container/
+      presenter/
+    shared/
+      my-shared-component-in-app/
+        container/
+        presenter/
+  elements/
+    my-element/
 ```

docs/components/INTRODUCTION.md

@@ -0,0 +1,57 @@
+# Component introduction
+
+A component refers to a modular, reusable piece of code that encapsulates specific functionality, styling, and behavior within a user interface (UI). Components are commonly used to build dynamic and interactive web applications, allowing developers to break down complex user interfaces into smaller, manageable parts.
+
+## How to generate a component
+
+```shell
+ng g component ComponentName
+```
+
+## Structure
+Below you can see the basic files generated for a component (more files can be generated depending on the activated options):
+- `component-name.component.ts` will contain component logic
+- `component-name.spec.ts` will contain component unit tests
+- `component-name.style.scss` will contain component styling
+- `component-name.template.html` will contain component structure
+
+> [!NOTE]
+> By convention, file names must be written in kebab-case
+
+
+## Component class
+Otter component are Angular component with Otter specific information provided through the `@O3rComponent` decorator.
+```typescript
+@O3rComponent({
+  componentType: 'Component'
+})
+@Component({
+  selector: 'o3r-component-name',
+  standalone: true,
+  templateUrl: './component-name.template.html',
+  styleUrls: [./component-name.style.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ComponentNameComponent {}
+```
+The object passed to the `@O3rComponent` decorator includes the component type, it can be:
+- a `Block`, a component that handle functional area.
+- a `Page`, a component that display an application route.
+- an `ExposedComponent`, a component that needs to be exposed in your CMS.
+- a `Component`, a component that does not need to be exposed in your CMS.
+
+> [!NOTE]
+> By convention, class names mu be written in PascalCase and variable names in camelCase.
+
+> [!TIP]
+> The Otter framework provides an [Otter Chrome Extension](https://chrome.google.com/webstore/detail/otter-devtools/aejabgendbpckkdnjaphhlifbhepmbne) to help debug the application.
+> To enable the communication between your application and the Chrome Extension you can follow this [documentation](../dev-tools/chrome-devtools.md).
+
+## Next steps
+
+To test your component, you can look to the [fixtures documentation](./FIXTURES.md).
+
+In case you need to handle different UI flavors or to share a flavor with different logics, we recommend to use the [container / presenter](./CONTAINER_PRESENTER.md) patterns.
+
+In case you need to replace component at runtime, you can have a look to the [component replacement](./COMPONENT_REPLACEMENT.md) mechanism.

packages/@o3r/core/schematics/page/schema.json

@@ -24,7 +24,6 @@
     "scope": {
       "type": "string",
       "description": "Page scope (e.g. booking, servicing, ssci, etc.)",
-      "x-prompt": "Page scope (e.g. booking, servicing, ssci, etc.)?",
       "default": ""
     },
     "appRoutingModulePath": {