+
+
+
+ + Title 1 +
+
+
+
+ Actions
+
+
+
+ + Description 1 +
+
+
+
+
+
+
+`;
+
+exports[`entities/activities/ui/activity-action-icon/activity-action-icon > should render icon for \`remove\` action > remove 1`] = `
+
+
+
+`;
+
+exports[`entities/activities/ui/activity-action-icon/activity-action-icon > should render icon for \`update\` action > update 1`] = `
+
+
+
+`;
diff --git a/src/entities/activities/ui/activity-action-icon/activity-action-icon.spec.tsx b/src/entities/activities/ui/activity-action-icon/activity-action-icon.spec.tsx
new file mode 100644
index 00000000..cd78dd1e
--- /dev/null
+++ b/src/entities/activities/ui/activity-action-icon/activity-action-icon.spec.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'vitest';
+
+import { RenderResult, render } from '~/test-utils';
+
+import { ActivityActionIcon } from './activity-action-icon';
+
+
+describe('entities/activities/ui/activity-action-icon/activity-action-icon', () => {
+ let wrapper: RenderResult;
+
+ const createComponent = (action: string) => {
+ wrapper = render(
+
+
+
+
+
+
+
+
+
+
+
+
++ +
+
+
+
+
+
+
+
+ card.text
+
+
++ +
+
+
+`;
diff --git a/src/entities/invitations/ui/invitation-card-skeleton/index.ts b/src/entities/invitations/ui/invitation-card-skeleton/index.ts
new file mode 100644
index 00000000..25a3264a
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-card-skeleton/index.ts
@@ -0,0 +1 @@
+export * from './invitation-card-skeleton';
diff --git a/src/entities/invitations/ui/invitation-card-skeleton/invitation-card-skeleton.spec.tsx b/src/entities/invitations/ui/invitation-card-skeleton/invitation-card-skeleton.spec.tsx
new file mode 100644
index 00000000..0ace4b9e
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-card-skeleton/invitation-card-skeleton.spec.tsx
@@ -0,0 +1,21 @@
+import { describe, test, expect } from 'vitest';
+
+import { RenderResult, render } from '~/test-utils';
+
+import { InvitationCardSkeleton } from './invitation-card-skeleton';
+
+describe('entities/invitations/ui/invitation-card-skeleton/invitation-card-skeleton.tsx', () => {
+ let wrapper: RenderResult;
+
+ const createComponent = () => {
+ wrapper = render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`entities/invitations/ui/invitation-card-template/invitation-card-template.tsx > should render correctly > default 1`] = `
+
+
+
+
+
+ Inviter avatar
+
+
+
+ card.title
+
+
+
+
+
+
+
+ Inviter avatar
+
+ + c + + a + + r + + d + + . + + t + +
+
+ User avatar
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/entities/invitations/ui/invitation-card-template/index.ts b/src/entities/invitations/ui/invitation-card-template/index.ts
new file mode 100644
index 00000000..74311742
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-card-template/index.ts
@@ -0,0 +1 @@
+export * from './invitation-card-template';
diff --git a/src/entities/invitations/ui/invitation-card-template/invitation-card-template.spec.tsx b/src/entities/invitations/ui/invitation-card-template/invitation-card-template.spec.tsx
new file mode 100644
index 00000000..3d5ceea6
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-card-template/invitation-card-template.spec.tsx
@@ -0,0 +1,60 @@
+import { describe, test, expect } from 'vitest';
+
+import { RenderResult, defaultInvitation, render } from '~/test-utils';
+
+import { DeepPartial } from '@/shared/types';
+
+import {
+ InvitationCardTemplate,
+ InvitationCardTemplateProps
+} from './invitation-card-template';
+
+
+describe('entities/invitations/ui/invitation-card-template/invitation-card-template.tsx', () => {
+ let wrapper: RenderResult;
+
+ const defaultProps: InvitationCardTemplateProps = {
+ inviterName: defaultInvitation.inviter.username,
+ roomName: defaultInvitation.room.description,
+ username: defaultInvitation.user!.username,
+ slots: {
+ inviterAvatar:
+
+
+
+
+ Inviter avatar
+
+
+
+ card.title
+
+
+
+
+
+
+
+ Inviter avatar
+
+ + c + + a + + r + + d + + . + + t + +
+
+ User avatar
+
+ Inviter avatar
,
+ userAvatar: User avatar
,
+ },
+ };
+
+ const createComponent = (
+ props: DeepPartial
+
+
+
+ ),
+ },
+ });
+
+ expect(findCard()).toMatchSnapshot('with actions');
+ });
+});
diff --git a/src/entities/invitations/ui/template-invitation-card/ui.tsx b/src/entities/invitations/ui/invitation-card-template/invitation-card-template.tsx
similarity index 72%
rename from src/entities/invitations/ui/template-invitation-card/ui.tsx
rename to src/entities/invitations/ui/invitation-card-template/invitation-card-template.tsx
index f1a7985f..d366d800 100644
--- a/src/entities/invitations/ui/template-invitation-card/ui.tsx
+++ b/src/entities/invitations/ui/invitation-card-template/invitation-card-template.tsx
@@ -3,26 +3,28 @@ import {
CardActions,
CardContent,
CardHeader,
+ CardProps,
Typography
} from '@mui/material';
import cn from 'classnames';
-import * as React from 'react';
+import type { FC } from 'react';
import { useTranslation } from 'react-i18next';
-import { CommonProps, Slots } from '@/shared/types';
+import type { CommonProps, Slots } from '@/shared/types';
-import styles from './ui.module.css';
+import styles from './styles.module.css';
+type CardSlots = 'userAvatar' | 'inviterAvatar' | 'actions';
+type RequiredCardSlots = Extract
+
+
+`;
diff --git a/src/entities/invitations/ui/invitation-list-item-skeleton/index.ts b/src/entities/invitations/ui/invitation-list-item-skeleton/index.ts
new file mode 100644
index 00000000..14b83882
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-list-item-skeleton/index.ts
@@ -0,0 +1 @@
+export * from './invitation-list-item-skeleton';
diff --git a/src/entities/invitations/ui/invitation-list-item-skeleton/invitation-list-item-skeleton.spec.tsx b/src/entities/invitations/ui/invitation-list-item-skeleton/invitation-list-item-skeleton.spec.tsx
new file mode 100644
index 00000000..38c6aa21
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-list-item-skeleton/invitation-list-item-skeleton.spec.tsx
@@ -0,0 +1,21 @@
+import { describe, test, expect } from 'vitest';
+
+import { RenderResult, render } from '~/test-utils';
+
+import { InvitationListItemSkeleton } from './invitation-list-item-skeleton';
+
+describe('entities/invitations/ui/invitation-list-item-skeleton/invitation-list-item-skeleton.tsx', () => {
+ let wrapper: RenderResult;
+
+ const createComponent = () => {
+ wrapper = render(
+
+
+
+
+
+`;
+
+exports[`entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.tsx > should render correctly > default 1`] = `
+
+
+
+ User avatar
+
+
+
+ Cool-user
+
+
++ list.item.inviter +
+
+
+`;
diff --git a/src/entities/invitations/ui/invitation-list-item-template/index.ts b/src/entities/invitations/ui/invitation-list-item-template/index.ts
new file mode 100644
index 00000000..80a748a7
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-list-item-template/index.ts
@@ -0,0 +1 @@
+export * from './invitation-list-item-template';
diff --git a/src/entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.spec.tsx b/src/entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.spec.tsx
new file mode 100644
index 00000000..fe76b96f
--- /dev/null
+++ b/src/entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.spec.tsx
@@ -0,0 +1,58 @@
+import { describe, test, expect } from 'vitest';
+
+import { RenderResult, defaultInvitation, render } from '~/test-utils';
+
+import { DeepPartial } from '@/shared/types';
+
+import {
+ InvitationListItemTemplate,
+ InvitationListItemTemplateProps
+} from './invitation-list-item-template';
+
+
+describe('entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.tsx', () => {
+ let wrapper: RenderResult;
+
+ const defaultProps: InvitationListItemTemplateProps = {
+ inviterName: defaultInvitation.inviter.username,
+ username: defaultInvitation.user!.username,
+ slots: {
+ userAvatar:
+ User avatar
+
+User avatar
,
+ },
+ };
+
+ const createComponent = (
+ props: DeepPartial
+
+
+
+ ),
+ },
+ });
+
+ expect(findCard()).toMatchSnapshot('with actions');
+ });
+});
diff --git a/src/entities/invitations/ui/template-invitation-list-item/template-invitation-list-item.tsx b/src/entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.tsx
similarity index 64%
rename from src/entities/invitations/ui/template-invitation-list-item/template-invitation-list-item.tsx
rename to src/entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.tsx
index 6e90a69c..60d4090a 100644
--- a/src/entities/invitations/ui/template-invitation-list-item/template-invitation-list-item.tsx
+++ b/src/entities/invitations/ui/invitation-list-item-template/invitation-list-item-template.tsx
@@ -1,25 +1,27 @@
import {
ListItem,
ListItemAvatar,
- ListItemProps,
ListItemSecondaryAction,
- ListItemText
+ ListItemText,
+ type ListItemProps
} from '@mui/material';
-import { FC } from 'react';
+import type { FC } from 'react';
import { useTranslation } from 'react-i18next';
-import { CommonProps, Slots } from '@/shared/types';
+import type { CommonProps, Slots } from '@/shared/types';
-export interface TemplateInvitationListItemProps
+type InvitationSlots = 'actions' | 'userAvatar';
+type RequiredInvitationSlots = Extract
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ name
+
+
+
+
+
++ card.description + : + description +
+
+
+
+
+ name
+
+
+
+
+
+
+
+ + card.description + : + description +
+
+
+
+
+
+
+ n
+
+
+
+ name
+
+
++ description +
+- {children}
+
+
+
+
+ A tag
+
+
+
+
+
+
+
+
+
+ A tag
+
+
+
+- {children}
+
+`;
+
+exports[`TaskCardSkeleton > should render passed number of lines > custom number of lines 1`] = `
+
+
+
+
+
+
+
+
+
++ +
++ +
+
+
+`;
diff --git a/src/entities/tasks/ui/task-card-skeleton/index.ts b/src/entities/tasks/ui/task-card-skeleton/index.ts
new file mode 100644
index 00000000..158aca19
--- /dev/null
+++ b/src/entities/tasks/ui/task-card-skeleton/index.ts
@@ -0,0 +1 @@
+export * from './task-card-skeleton';
diff --git a/src/entities/tasks/ui/task-card-skeleton/task-card-skeleton.spec.tsx b/src/entities/tasks/ui/task-card-skeleton/task-card-skeleton.spec.tsx
new file mode 100644
index 00000000..ae12ab89
--- /dev/null
+++ b/src/entities/tasks/ui/task-card-skeleton/task-card-skeleton.spec.tsx
@@ -0,0 +1,29 @@
+import { describe, test, expect } from 'vitest';
+
+import { render, type RenderResult } from '~/test-utils';
+
+import { TaskCardSkeleton } from './task-card-skeleton';
+
+describe('TaskCardSkeleton', () => {
+ let wrapper: RenderResult;
+
+ const createComponent = (contentLinesCount?: number) => {
+ wrapper = render(
+
+
+
+
+
+
+
+
+
++ +
++ +
++ +
+
+
+
+
+ + Title 1 +
+
+ Tags
+
+
+
+ + Description 1 +
+
+
+
+ User Avatar
+
+
+ Tags
,
+ userAvatar: User Avatar
,
+ },
+ };
+
+ const createComponent = (props: PartialActions
,
+ },
+ });
+
+ expect(findCard()).toMatchSnapshot('with actions');
+ });
+});
diff --git a/src/entities/tasks/ui/task-card-template/task-card-template.tsx b/src/entities/tasks/ui/task-card-template/task-card-template.tsx
new file mode 100644
index 00000000..9e2857e7
--- /dev/null
+++ b/src/entities/tasks/ui/task-card-template/task-card-template.tsx
@@ -0,0 +1,63 @@
+import {
+ Card,
+ CardActions,
+ CardContent,
+ CardHeader,
+ CardProps,
+ Typography
+} from '@mui/material';
+import cn from 'classnames';
+import { type FC, memo, useId } from 'react';
+
+import type { CommonProps, Slots } from '@/shared/types';
+import { DateTime } from '@/shared/ui';
+
+import type { Task } from '../../models';
+
+import styles from './styles.module.css';
+
+type TaskCardSlots = 'actions' | 'tags' | 'userAvatar';
+type RequiredTaskCardSlots = Exclude+ statuses.done +
++ statuses.done +
+
+ Actions
+
+Actions
,
+ },
+ });
+
+ expect(findHeader()).toMatchSnapshot('with actions');
+ });
+});
diff --git a/src/entities/tasks/ui/task-column-header/task-column-header.tsx b/src/entities/tasks/ui/task-column-header/task-column-header.tsx
index e7043743..dacad316 100644
--- a/src/entities/tasks/ui/task-column-header/task-column-header.tsx
+++ b/src/entities/tasks/ui/task-column-header/task-column-header.tsx
@@ -1,25 +1,37 @@
import { Typography } from '@mui/material';
import cn from 'classnames';
-import * as React from 'react';
+import { memo, type FC, type ComponentProps, useId } from 'react';
+import { useTranslation } from 'react-i18next';
-import { CommonProps, Slots } from '@/shared/types';
+import type { CommonProps, Slots } from '@/shared/types';
-import styles from './task-column-header.module.css';
+import type { TaskStatus } from '../../models';
-export interface TaskColumnHeaderComponent extends CommonProps {
- readonly id?: string;
- readonly slots?: Slots<'actions'>;
+import styles from './styles.module.css';
+
+type TaskColumnSlots = 'actions';
+
+export interface TaskColumnHeaderProps
+ extends CommonProps,
+ ComponentProps<'header'> {
+ readonly status: TaskStatus;
+ readonly slots?: Slots
+
+`;
diff --git a/src/entities/tasks/ui/task-status-select/index.ts b/src/entities/tasks/ui/task-status-select/index.ts
new file mode 100644
index 00000000..76c17cfb
--- /dev/null
+++ b/src/entities/tasks/ui/task-status-select/index.ts
@@ -0,0 +1 @@
+export * from './task-status-select';
diff --git a/src/entities/tasks/ui/task-status-select/task-status-select.spec.tsx b/src/entities/tasks/ui/task-status-select/task-status-select.spec.tsx
new file mode 100644
index 00000000..9804089c
--- /dev/null
+++ b/src/entities/tasks/ui/task-status-select/task-status-select.spec.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest';
+
+import { RenderResult, render } from '~/test-utils';
+
+import { TaskStatusSelect, TaskStatusSelectProps } from './task-status-select';
+
+describe('TaskStatusSelect', () => {
+ let wrapper: RenderResult;
+
+ const createComponent = (props: TaskStatusSelectProps = {}) => {
+ wrapper = render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++ +
++ +
+
+
+
+
+
+
+
+ + username +
++ email@example.org +
+
+
+
+ actions
+
+
+
+
+
+
+
+
+ + username +
++ email@example.org +
+
+ extra
+
+
+
+
+
+
+
+
++ username +
++ email@example.org +
+actions
, });
+
+ expect(findListItem()).toMatchSnapshot('with actions slot');
+ });
+
+ test('should render extra into right slot', () => {
+ createComponent({ extra: extra
, });
+
+ expect(findListItem()).toMatchSnapshot('with extra slot');
+ });
+});
diff --git a/src/entities/users/ui/template-user-list-item/template-user-list-item.tsx b/src/entities/users/ui/template-user-list-item/ui.tsx
similarity index 66%
rename from src/entities/users/ui/template-user-list-item/template-user-list-item.tsx
rename to src/entities/users/ui/template-user-list-item/ui.tsx
index 297d9d13..7d2ea9a0 100644
--- a/src/entities/users/ui/template-user-list-item/template-user-list-item.tsx
+++ b/src/entities/users/ui/template-user-list-item/ui.tsx
@@ -6,34 +6,24 @@ import {
ListItemText
} from '@mui/material';
import cn from 'classnames';
-import * as React from 'react';
+import { FC } from 'react';
-import { User } from '@/shared/api';
import { CommonProps, Slots } from '@/shared/types';
+import { User } from '../../models';
import { UserAvatar } from '../user-avatar';
-import styles from './template-user-list-item.module.css';
+import styles from './styles.module.css';
export interface TemplateUserListItemProps
extends CommonProps,
- User,
- Omit
+ 
+
+`;
diff --git a/src/entities/users/ui/user-avatar/index.ts b/src/entities/users/ui/user-avatar/index.ts
index 82716fa6..0b55e245 100644
--- a/src/entities/users/ui/user-avatar/index.ts
+++ b/src/entities/users/ui/user-avatar/index.ts
@@ -1 +1 @@
-export { UserAvatar, type UserAvatarProps } from './user-avatar';
+export * from './user-avatar';
diff --git a/src/entities/users/ui/user-avatar/user-avatar.spec.tsx b/src/entities/users/ui/user-avatar/user-avatar.spec.tsx
new file mode 100644
index 00000000..3de72448
--- /dev/null
+++ b/src/entities/users/ui/user-avatar/user-avatar.spec.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'vitest';
+
+import { UserAvatar } from './user-avatar';
+
+import { RenderResult, render, users } from '~/test-utils';
+
+describe('src/entities/users/ui/user-avatar/user-avatar', () => {
+ let wrapper: RenderResult;
+
+ const createComponent = () => {
+ wrapper = render(
+