feat: add pages for articles

config/build/buildWebpackConfig.ts

@@ -17,6 +17,8 @@ export function buildWebpackConfig(options: BuildOptions): webpack.Configuration
       filename: '[name].[contenthash].js',
       path: build,
       clean: true,
+      // чтобы запрашивал чанки из корня
+      publicPath: '/',
     },
     plugins: buildPlugins(options),
     module: {

extractedTranslations/en/translation.json

@@ -36,6 +36,8 @@
   "Профиль": "Профиль",
   "Редактировать": "Редактировать",
   "Сохранить": "Сохранить",
+  "Список статей": "Список статей",
+  "Статья": "Статья",
   "Страна": "Страна",
   "Страница не найдена": "Страница не найдена",
   "Форма авторизации": "Форма авторизации",

extractedTranslations/ru/translation.json

@@ -36,6 +36,8 @@
   "Профиль": "Профиль",
   "Редактировать": "Редактировать",
   "Сохранить": "Сохранить",
+  "Список статей": "Список статей",
+  "Статья": "Статья",
   "Страна": "Страна",
   "Страница не найдена": "Страница не найдена",
   "Форма авторизации": "Форма авторизации",

public/locales/en/article.json

@@ -0,0 +1,4 @@
+{
+  "Статья": "Article",
+  "Список статей": "List of articles"
+}

public/locales/ru/article.json

@@ -0,0 +1,4 @@
+{
+  "Статья": "Статья",
+  "Список статей": "Список статей"
+}

src/pages/ArticleDetailsPage/index.ts

@@ -0,0 +1 @@
+export { ArticleDetailsPageAsync as ArticleDetailsPage } from './ui/ArticleDetailsPage/ArticleDetailsPage.async';

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.async.tsx

@@ -0,0 +1,6 @@
+import { lazy } from 'react';
+
+export const ArticleDetailsPageAsync = lazy(
+  () => import('./ArticleDetailsPage')
+    .then((module) => ({ default: module.ArticleDetailsPage })),
+);

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.module.scss

@@ -0,0 +1,3 @@
+/* stylelint-disable-next-line */
+.articleDetailsPage {
+}

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticleDetailsPage } from './ArticleDetailsPage';
+
+export default {
+  title: 'shared/ArticleDetailsPage',
+  component: ArticleDetailsPage,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticleDetailsPage>;
+
+const Template: ComponentStory<typeof ArticleDetailsPage> = (args) => <ArticleDetailsPage {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { classNames } from 'shared/lib/classNames';
+
+import cls from './ArticleDetailsPage.module.scss';
+
+interface ArticleDetailsPageProps {
+  className?: string;
+}
+
+export const ArticleDetailsPage = memo((props: ArticleDetailsPageProps) => {
+  const { className } = props;
+
+  const { t } = useTranslation('article');
+
+  return (
+    <div className={classNames(cls.articleDetailsPage, {}, [className])}>
+      {t('Статья')}
+    </div>
+  );
+});
+
+ArticleDetailsPage.displayName = 'ArticleDetailsPage';

src/pages/ArticlesPage/index.ts

@@ -0,0 +1 @@
+export { ArticlesPageAsync as ArticlesPage } from './ui/ArticlesPage/ArticlesPage.async';

src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.async.tsx

@@ -0,0 +1,6 @@
+import { lazy } from 'react';
+
+export const ArticlesPageAsync = lazy(
+  () => import('./ArticlesPage')
+    .then((module) => ({ default: module.ArticlesPage })),
+);

src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.module.scss

@@ -0,0 +1,3 @@
+/* stylelint-disable-next-line */
+.articlesPage {
+}

src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticlesPage } from './ArticlesPage';
+
+export default {
+  title: 'shared/ArticlesPage',
+  component: ArticlesPage,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticlesPage>;
+
+const Template: ComponentStory<typeof ArticlesPage> = (args) => <ArticlesPage {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { classNames } from 'shared/lib/classNames';
+
+import cls from './ArticlesPage.module.scss';
+
+interface ArticlesPageProps {
+  className?: string;
+}
+
+export const ArticlesPage = memo((props: ArticlesPageProps) => {
+  const { className } = props;
+
+  const { t } = useTranslation('article');
+
+  return (
+    <div className={classNames(cls.articlesPage, {}, [className])}>
+      {t('Список статей')}
+    </div>
+  );
+});
+
+ArticlesPage.displayName = 'ArticlesPage';

src/shared/config/routerConfig/routerConfig.tsx

@@ -4,6 +4,8 @@ import { MainPage } from 'pages/MainPage';
 import { AboutPage } from 'pages/AboutPage';
 import { NotFoundPage } from 'pages/NotFoundPage';
 import { ProfilePage } from 'pages/ProfilePage';
+import { ArticlesPage } from 'pages/ArticlesPage';
+import { ArticleDetailsPage } from 'pages/ArticleDetailsPage';
 
 export type AppRoutesProps = RouteProps & {
   authOnly?: boolean;
@@ -13,6 +15,8 @@ export enum AppRoutes {
     MAIN = 'main',
     ABOUT = 'about',
     PROFILE = 'profile',
+    ARTICLES = 'articles',
+    ARTICLE_DETAILS = 'article_details',
 
     // last
     NOT_FOUND = 'not_found',
@@ -22,6 +26,10 @@ export const RoutePath: Record<AppRoutes, string> = {
   [AppRoutes.MAIN]: '/',
   [AppRoutes.ABOUT]: '/about',
   [AppRoutes.PROFILE]: '/profile',
+  [AppRoutes.ARTICLES]: '/articles',
+  [AppRoutes.ARTICLE_DETAILS]: '/articles/', // + :id
+
+  // last
   [AppRoutes.NOT_FOUND]: '*',
 };
 
@@ -39,6 +47,16 @@ export const routerConfig: Record<AppRoutes, AppRoutesProps> = {
     element: <ProfilePage />,
     authOnly: true,
   },
+  [AppRoutes.ARTICLES]: {
+    path: RoutePath[AppRoutes.ARTICLES],
+    element: <ArticlesPage />,
+    authOnly: true,
+  },
+  [AppRoutes.ARTICLE_DETAILS]: {
+    path: `${RoutePath[AppRoutes.ARTICLE_DETAILS]}:id`,
+    element: <ArticleDetailsPage />,
+    authOnly: true,
+  },
 
   // last
   [AppRoutes.NOT_FOUND]: {

src/widgets/Sidebar/model/items.ts

@@ -4,6 +4,7 @@ import { AppRoutes, RoutePath } from 'shared/config/routerConfig/routerConfig';
 import MainIcon from 'shared/assets/icons/main-20-20.svg';
 import AboutIcon from 'shared/assets/icons/about-20-20.svg';
 import ProfileIcon from 'shared/assets/icons/profile-20-20.svg';
+import ArticlesIcon from 'shared/assets/icons/article-20-20.svg';
 
 export interface SidebarItemType {
   path: string;
@@ -33,4 +34,11 @@ export const sidebarItemsList: SidebarItemType[] = [
     tFileName: AppRoutes.PROFILE,
     authOnly: true,
   },
+  {
+    path: RoutePath.articles,
+    text: 'Articles page',
+    Icon: ArticlesIcon,
+    tFileName: AppRoutes.ARTICLES,
+    authOnly: true,
+  },
 ];