fix: storybook alias, add storybook cases

config/storybook/webpack.config.ts

@@ -14,6 +14,10 @@ export default ({ config }: { config: webpack.Configuration }) => {
     };
   config!.resolve!.modules!.push(paths.src);
   config!.resolve!.extensions!.push('.ts', '.tsx');
+  config!.resolve!.alias = {
+      ...config!.resolve!.alias,
+      '@': paths.src,
+  };
 
   // @ts-ignore
   config!.module!.rules = config!.module!.rules!.map((rule: RuleSetRule) => {

extractedTranslations/en/translation.json

@@ -25,9 +25,11 @@
   "Incorrect age": "",
   "Incorrect country": "",
   "Incorrect user data": "",
+  "Leave your feedback on the article, it will help improve the quality": "",
   "No data": "",
   "PROFILE PAGE": "",
   "Profile": "",
+  "Rate the article": "",
   "Read more": {
     "": {
       "": {
@@ -43,6 +45,7 @@
   "Server error": "",
   "Sort by": "",
   "Sorting by": "",
+  "Thanks for review!": "",
   "Try to reload page": "",
   "You don`t have access to this page!": "",
   "Your name": "",

src/entities/Notification/ui/NotificationItem/NotificationItem.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { NotificationItem } from './NotificationItem';
 
 export default {
-    title: 'shared/NotificationItem',
+    title: 'entities/Notification/NotificationItem',
     component: NotificationItem,
     argTypes: {
         backgroundColor: { control: 'color' },

src/entities/Notification/ui/NotificationList/NotificationList.stories.tsx

@@ -1,17 +1,76 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
+import withMock from 'storybook-addon-mock';
 import { NotificationList } from './NotificationList';
+import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator';
 
 export default {
-    title: 'shared/NotificationList',
+    title: 'entities/Notification/NotificationList',
     component: NotificationList,
     argTypes: {
         backgroundColor: { control: 'color' },
     },
+    decorators: [withMock],
 } as ComponentMeta<typeof NotificationList>;
 
 const Template: ComponentStory<typeof NotificationList> = (args) => <NotificationList {...args} />;
 
 export const Normal = Template.bind({});
 Normal.args = {};
+
+Normal.decorators = [
+    StoreDecorator({ }),
+];
+
+Normal.parameters = {
+    mockData: [
+        {
+            url: `${__API__}/notifications`,
+            method: 'GET',
+            status: 200,
+            response: [
+                {
+                    id: '1',
+                    title: 'title',
+                    description: 'description',
+                },
+                {
+                    id: '2',
+                    title: 'title',
+                    description: 'description',
+                },
+                {
+                    id: '3',
+                    title: 'title',
+                    description: 'description',
+                },
+            ],
+        },
+    ],
+};
+
+export const WithLink = Template.bind({});
+WithLink.args = {};
+
+WithLink.decorators = [
+    StoreDecorator({ }),
+];
+
+WithLink.parameters = {
+    mockData: [
+        {
+            url: `${__API__}/notifications`,
+            method: 'GET',
+            status: 200,
+            response: [
+                {
+                    id: '1',
+                    title: 'title',
+                    description: 'description',
+                    href: 'link',
+                },
+            ],
+        },
+    ],
+};

src/entities/Rating/ui/RatingCard.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RatingCard } from './RatingCard';
 
 export default {
-    title: 'shared/RatingCard',
+    title: 'entities/Rating/RatingCard',
     component: RatingCard,
     argTypes: {
         backgroundColor: { control: 'color' },

src/features/articleRating/ui/ArticleRating/ArticleRating.stories.tsx

@@ -1,17 +1,65 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
+import withMock from 'storybook-addon-mock';
 import ArticleRating from './ArticleRating';
+import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator';
 
 export default {
-    title: 'shared/ArticleRating',
+    title: 'features/ArticleRating',
     component: ArticleRating,
     argTypes: {
         backgroundColor: { control: 'color' },
     },
+    decorators: [withMock],
 } as ComponentMeta<typeof ArticleRating>;
 
 const Template: ComponentStory<typeof ArticleRating> = (args) => <ArticleRating {...args} />;
 
 export const Normal = Template.bind({});
-Normal.args = {};
+Normal.args = {
+    articleId: '1',
+};
+
+Normal.decorators = [
+    StoreDecorator({
+        user: {
+            authData: { id: '1' },
+        },
+    }),
+];
+Normal.parameters = {
+    mockData: [
+        {
+            url: `${__API__}/article-ratings?userId=1&articleId=1`,
+            method: 'GET',
+            status: 200,
+            response: [
+                { rate: '4', id: '1' },
+            ],
+        },
+    ],
+};
+
+export const WithoutRating = Template.bind({});
+WithoutRating.args = {
+    articleId: '1',
+};
+
+WithoutRating.decorators = [
+    StoreDecorator({
+        user: {
+            authData: { id: '1' },
+        },
+    }),
+];
+WithoutRating.parameters = {
+    mockData: [
+        {
+            url: `${__API__}/article-ratings?userId=1&articleId=1`,
+            method: 'GET',
+            status: 200,
+            response: [],
+        },
+    ],
+};

src/features/notificationButton/ui/NotificationButton/NotificationButton.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator';
-import { Article } from '@/entities/Article';
 import { Notification } from '@/entities/Notification/model/types/notification';
 import { NotificationButton } from './NotificationButton';
 

src/shared/ui/ThemeSwitcher/ui/ThemeSwitcher.stories.tsx

@@ -5,7 +5,7 @@ import { Theme } from '@/app/providers/ThemeProvider';
 import { ThemeSwitcher } from './ThemeSwitcher';
 
 export default {
-    title: 'shared/ThemeSwitcher',
+    title: 'widgets/ThemeSwitcher',
     component: ThemeSwitcher,
     argTypes: {
         backgroundColor: { control: 'color' },

src/widgets/ErrorPage/ui/ErrorPage.stories.tsx

@@ -6,7 +6,7 @@ import { Theme } from '@/app/providers/ThemeProvider';
 import { ErrorPage } from './ErrorPage';
 
 export default {
-    title: 'widget/ErrorPage',
+    title: 'widgets/ErrorPage',
     component: ErrorPage,
     argTypes: {
         backgroundColor: { control: 'color' },

src/widgets/Navbar/ui/Navbar.stories.tsx

@@ -7,7 +7,7 @@ import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDe
 import { Navbar } from './Navbar';
 
 export default {
-    title: 'widget/Navbar',
+    title: 'widgets/Navbar',
     component: Navbar,
     argTypes: {
         backgroundColor: { control: 'color' },

src/widgets/Page/Page.stories.tsx

@@ -5,7 +5,7 @@ import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDe
 import { Page } from './Page';
 
 export default {
-    title: 'shared/Page',
+    title: 'widgets/Page',
     component: Page,
     argTypes: {
         backgroundColor: { control: 'color' },

src/widgets/Sidebar/ui/Sidebar/Sidebar.stories.tsx

@@ -7,7 +7,7 @@ import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDe
 import { Sidebar } from './Sidebar';
 
 export default {
-    title: 'widget/Sidebar',
+    title: 'widgets/Sidebar',
     component: Sidebar,
     argTypes: {
         backgroundColor: { control: 'color' },