docs(innersource): add component model documentation (#1618)

packages/docs/pages/guides/engineering-contribution/component-model.mdx

@@ -1,3 +1,94 @@
+import { Steps } from 'nextra/components'
+
 # Component model
 
-{/* WIP */}
+In this section you can find detailed information about how to handle components specifities such as state, styling, composition and internationalization.
+
+## State
+
+All Shoreline components are [Controlled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). This means that they are responsible for managing their own state and exposing
+it to the parent component. This way, the parent component can control the state if necessary.
+
+You can check the [State Management section](/guides/state-management) to understand how it works and how to use it.
+
+## Styling
+
+The way we style component in Shoreline is equal the way we recommend our users to style their components. The only difference is that
+we use use [Sass](https://sass-lang.com/) to apply css. The theme and the styles are defined within the `shoreline` package, [you can check it here](https://github.com/vtex/shoreline/tree/main/packages/shoreline/src/themes/sunrise)
+
+Go for the [Styling section](/guides/styling/introduction) to get a detailed information and understand how styling works in Shoreline.
+
+## Composition
+
+Composition is often useful for easily extending behavior. Shoreline relies on the children's property for this task.
+Composable components accept the `asChild` boolean property. When true, the component will not render its default DOM element,
+cloning the props to the first child instead.
+
+You can check the [Composition section](/guides/composition/introduction) to understand how it works and how to use it.
+
+You must use the [Compose component](/components/compose) in order to implement composition within Shoreline. This component is responsible for render the
+children and pass the props to them.
+
+```tsx
+import { Compose } from '@vtex/shoreline';
+
+export function ComposableButton(props) {
+  const { asChild, ...restProps } = props;
+  const Composition = asChild ? Compose : 'button';
+
+  return (
+    <Composition {...restProps}>
+      {children}
+    </Composition>
+  );
+}
+```
+
+## Internationalization
+
+We have internal translations to help our users by previously defining common messages and letting them use the messages.
+This way, we can ensure that the messages are consistent across the apps.
+
+You must follow 3 steps in order to implement internationalization within Shoreline:
+
+<Steps>
+
+### Messages folder
+
+Create a new folder `messages` under the component folder. This is where you will store the messages for the component.
+
+```json
+// messages/en.json file
+{
+  "admin/search-label": "Search"
+}
+```
+
+### Use the translations
+
+Use the translations inside the component by importing the `createMessageHook` function.
+
+```tsx
+import { createMessageHook } from '@vtex/shoreline'
+
+const useMessage = createMessageHook(messages)
+
+function Search(props) {
+  const getMessage = useMessage()
+
+  return <input placeholder={getMessage('admin/search-label')} {...props}/>
+}
+```
+
+### Setup crowdin
+
+Add the messages folder path to the `crowndin.yml` configuration file located in the root of the project.
+
+```yml
+files:
+  - source: /packages/shoreline/src/components/YOUR_COMPONENT/messages/en.json
+    translation: /%original_path%/%two_letters_code%.%file_extension%
+```
+
+</Steps>
+