# Frontend architecture

## 1. Component

In our projects we follow this architecture: 

![Architecture](/files/-LrKsNTcwW4-ubCe_ZeQ)

### 1.1. Component Logic layer

Logic and data processing. Usually supported by developers.

#### 1.1.1. Provider

Main question: *\*\**

1. What business data does component operate with?
2. What business logic does component implement?

Responsible for:

1. Getting and preparing data from store
2. Preparing actions
3. Implementation of business logic

Filename: `<component>.provider.tsx`

Exports `mapStateToProps` and / or `mapDispatchToProps` functions.

Example:

```
export const mapStateToProps = (state: StoreState): MappingStateProps => ({
    ownCards: getOwnCards(state),
    cardsForList: getCardsForList(state)
});
```

#### 1.1.2. Presenter

Stateful component.

Main question: What does component do?

Responsible for: 1. Storing and controlling UI state 2. Implementation of all methods like handlers and component logic

Filename: `<component>.presenter.tsx`

Exports class name: `<Component>Presenter`

Example:

```
export class DomainListPresenter extends React.PureComponent<Props> {

    ...

    render(): React.ReactNode {
        const { ownCards, cardsForList } = this.props;

        return (
            <DomainListView
                items={ownCards}
                cardsForList={cardsForList}
                onCardUpdate={this.onCardUpdated}
                onCardAction={this.onCardAction}
            />
        );
    }

    private onDomainCreated(id: Guid): void {
        this.props.history.push(`${RouteType.DOMAINS}/${id}`);
    }

    private onCardUpdated(entity: CardEntity): void {
        const domainArgs = this.cardAppService.convertCardToDomainArgs(entity);
        this.domainActions.update(domainArgs);
    }

    ...
}
```

### 1.2. Presentation Layer

Only UI view layers. Can be supported by designers.

#### 1.2.1. Styles

Main question: How does component look?

Filename: `<component>.styles.tsx`

Example:

```
...

export const DomainListRoot = styled.div`
    position: relative;
    background: ${colors.background};
    height: 100%;
`;

export const CardListWrapper = styled(ContainerRoot)`
    height: ${styles.searchSectionPadding}%;
    overflow-y: auto;
`;

...
```

#### 1.2.2. View

Main question: What does component show?

Responsible for: 1. Stateless component 2. Only makeup with handler interfaces and data interpolation

Filename: `<component>.view.tsx`

Exports class name / functional component name: `<Component>View`

Example:

```
interface Props {
    items: CardEntity[];
    cardsForList: CardEntity[];
    onCardUpdate: (entity: CardEntity) => void;
    onCardAction: (action: CardContextMenuAction, entity: CardEntity) => void;
}

function View({ items, cardsForList, onCardUpdate, onCardAction }: Props): React.ReactElement {
    return (
        <DomainListRoot>
            <CardListWrapper>
                <CardList
                    items={items}
                    onCardEdit={onCardUpdate}
                    onAction={onCardAction}
                />
            </CardListWrapper>
        </DomainListRoot>
    );
}

export const DomainListView = React.memo(View);
```

#### 1.2.3. Animation

Main question: How does component change UI states?

Responsible for: 1. Includes animation states for some components. 2. As Framer Motion, as CSS

Filename: `<component>.animation.ts`

Example:

```
import { SwitchState } from '../switch.enum.ts';

const transition = { type: 'tween', duration: 1 };

export const animationStates = {
    container: {
        [SwitchState.OFF]: {
            background: '#bbbbbb',
            transition
        },
        [SwitchState.ON]: {
            background: '#0070df',
            transition
        }
    },
};
```

## 1.3. Index

Each component folder should contain `index` file with exported `<Component>`. If component contains `Provider` layer this file should connect `mapStateToProps` and / or `mapDispatchToProps` with component. In another case, just export `<Component>`.

Example with existing provider layer:

```
import { connect } from 'react-redux';
import { DomainListPresenter } from './domain-list.presenter';
import { mapStateToProps } from './domain-list.provider';

export const DomainList = connect(mapStateToProps)(DomainListPresenter);
```

Example with not existing provider layer:

```
import { DomainListPresenter } from './domain-list.presenter';

export const DomainList = DomainListPresenter;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eigenspace.gitbook.io/dev-standards/architecture/frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.