implements: storie with mock data

.gitignore

@@ -6,6 +6,10 @@ node_modules
 /.pnp
 .pnp.js
 /report
+.yarn
+/.yarn
+.yarn/
+/.yarn/
 
 # testing
 /coverage

config/storybook/main.ts

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
     '@storybook/addon-viewport',
     'storybook-react-context',
     'storybook-react-i18next',
+    'storybook-addon-mock',
   ],
   framework: {
     name: '@storybook/react-webpack5',

config/storybook/webpack.config.ts

@@ -33,10 +33,17 @@ export default ({ config }: { config: webpack.Configuration }) => {
 
   rules?.push(svgLoader)
 
-  config.plugins?.push(
+  // config.plugins?.push(
+  //   new DefinePlugin({
+  //     __IS_DEV__: true,
+  //     __API_URL__: 'http://test.ua',
+  //   })
+  // )
+  config!.plugins!.push(
     new DefinePlugin({
-      __IS_DEV__: true,
-      __API_URL__: '',
+      __IS_DEV__: JSON.stringify(true),
+      __API_URL__: JSON.stringify('https://testapi.ua'),
+      __PROJECT__: JSON.stringify('storybook'),
     })
   )
 

extractedTranslations/en/menu_main.json

@@ -1,10 +1,12 @@
 {
+  "Best-site": "",
   "Login": "",
   "menu-main-link-login": "",
   "menu-main-link-logout": "",
   "menu-main-link-reg": "",
   "menu-navigation-link-about": "",
   "menu-navigation-link-main": "",
   "menu-top-link-login": "",
-  "menu-top-link-reg": ""
+  "menu-top-link-reg": "",
+  "to-create": ""
 }

extractedTranslations/en/page_about.json

@@ -1,3 +1,4 @@
 {
-  "page-about-title": ""
+  "page-about-title": "",
+  "page-admin-title": ""
 }

package.json

@@ -36,8 +36,8 @@
     "i18next": "^23.2.11",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-http-backend": "^2.2.1",
-    "react": "latest",
-    "react-dom": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-i18next": "^13.0.2",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
@@ -50,23 +50,23 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-essentials": "^7.6.0-alpha.2",
+    "@storybook/addon-interactions": "^7.6.0-alpha.2",
+    "@storybook/addon-links": "^7.6.0-alpha.2",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-viewport": "^7.2.1",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-viewport": "^7.6.0-alpha.2",
+    "@storybook/blocks": "^7.6.0-alpha.2",
+    "@storybook/react": "^7.6.0-alpha.2",
+    "@storybook/react-webpack5": "^7.6.0-alpha.2",
+    "@storybook/testing-library": "^0.2.2-next.0",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/jest": "^29.5.3",
     "@types/node": "^20.4.4",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@types/webpack": "^5.28.1",
@@ -104,7 +104,8 @@
     "sass": "^1.64.1",
     "sass-loader": "^13.3.2",
     "static-server": "^2.2.1",
-    "storybook": "^7.2.1",
+    "storybook": "^7.6.0-alpha.2",
+    "storybook-addon-mock": "^4.3.0",
     "storybook-react-context": "^0.6.0",
     "storybook-react-i18next": "^2.0.8",
     "storybook-theme-css-vars": "^0.0.9",

src/app/provider/router/ui/UserRoute.tsx

@@ -1,5 +1,4 @@
-import { getUserAuthData, getUserRole } from 'entity/User'
-import { useMemo } from 'react'
+import { getUserAuthData } from 'entity/User'
 import { useSelector } from 'react-redux'
 import { Navigate, useLocation, useParams } from 'react-router-dom'
 import { RoutePath } from 'shared/config/configRouter/configRouter'

src/entity/ArticleRecomended/ui/ArticleRecomendation.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { StateSchema } from 'app/provider/StoreProvider'
+import { IArticle } from 'entity/Article/type'
+import {
+  RouterDecorator,
+  StoreDecorator,
+} from 'shared/config/storybook/decorator'
+import { RoleEnum } from 'shared/type/role/role.enum'
+
+// import withMock from 'storybook-addon-mock'
+import { ArticleRecomended } from './ArticleRecomended'
+
+const article: IArticle = {
+  id: '1',
+  img: '',
+  createdAt: '',
+  views: 123,
+  blocks: [],
+  tagsId: ['1'],
+  title: '123',
+  subtitle: 'asfsa',
+  user: {
+    id: '1',
+    username: 'Manager',
+    role: [RoleEnum.ADMIN],
+    avatar:
+      'https://media.istockphoto.com/id/1152537185/photo/hacker-working-on-laptop-in-the-dark.jpg?s=612x612&w=0&k=20&c=S9odRE1_R0xaSQyjwY13tr410NKiJhJFiLRBX-X8c44=',
+  },
+}
+
+const meta = {
+  title: 'entity/ArticleRecomended',
+  component: ArticleRecomended,
+  decorators: [RouterDecorator, StoreDecorator({} as StateSchema)],
+  parameters: {
+    layout: 'centered',
+    mockData: [
+      {
+        url: `${__API_URL__}/articles?_limit=3`,
+        method: 'GET',
+        status: 200,
+        response: [
+          {
+            ...article,
+            id: '1',
+            img: 'https://teknotower.com/wp-content/uploads/2020/11/js.png',
+          },
+          {
+            ...article,
+            id: '2',
+            img: 'https://miro.medium.com/max/1200/1*FNakkrty3kjOvNU8m5iQfw.png',
+          },
+          {
+            ...article,
+            id: '3',
+            img: 'https://res.cloudinary.com/practicaldev/image/fetch/s--oqV3akcU--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/pgnw91fs7tpxn0wyeqh2.jpg',
+          },
+        ],
+      },
+    ],
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ArticleRecomended>
+
+export default meta
+type Story = StoryObj<typeof meta>
+export const Base: Story = {
+  args: {},
+}

src/entity/ArticleRecomended/ui/ArticleRecomended.tsx

@@ -4,25 +4,13 @@ import {
   ArticleFeedViewEnum,
   IArticle,
 } from 'entity/Article'
-import { memo, useCallback, useEffect } from 'react'
-// import { useSelector } from 'react-redux'
+import { memo, useCallback } from 'react'
 import { classNames } from 'shared/lib/classNames'
 
-// import { DynamicModuleLoader } from 'shared/lib/component/DynamicModuleLoader/DynamicModuleLoader'
-// import { ReducerList } from 'shared/lib/component/DynamicModuleLoader/type/props.type'
-// import { useAppDispatch } from 'shared/lib/component/useAppDispatch'
 import { useArticleRecomended } from '../api/articleRecomended.api'
-// import { getArticleRecomendedData } from '../model/selector/getArticleRecomendedData'
-// import { getArticleRecomendedIsLoading } from '../model/selector/getArticleRecomendedIsLoading'
-// import { fetchArticleRecomended } from '../model/service/fetchArticleRecomended'
-// import { articleRecomendedReducer } from '../model/slice/articleRecomended.slice'
 import { ArticleRecomendedProps } from '../type/props.type'
 import cls from './ArticleRecomended.module.scss'
 
-// const reducersList: ReducerList = {
-//   articleRecomended: articleRecomendedReducer,
-// }
-
 export const ArticleRecomended = memo((props: ArticleRecomendedProps) => {
   const { className } = props
 
@@ -33,14 +21,6 @@ export const ArticleRecomended = memo((props: ArticleRecomendedProps) => {
   )
   const clsItem = classNames(cls.item, [cls.item_view], {})
 
-  // const dispatch = useAppDispatch()
-  // const articleList = useSelector(getArticleRecomendedData.selectAll)
-  // const isLoading = useSelector(getArticleRecomendedIsLoading)
-  //
-  // useEffect(() => {
-  //   dispatch(fetchArticleRecomended())
-  // }, [dispatch])
-
   const { data, isLoading, error } = useArticleRecomended(3)
   const renderFeed = useCallback(
     (item: IArticle) => (
@@ -62,7 +42,5 @@ export const ArticleRecomended = memo((props: ArticleRecomendedProps) => {
       isLoading={isLoading}
       renderFeed={renderFeed}
     />
-    // <DynamicModuleLoader><DynamicModuleLoader reducerList={reducersList} removeAfterUnmount> */}
-    // </DynamicModuleLoader>
   )
 })

src/page/README.md

@@ -0,0 +1 @@
+# page

src/page/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "page",
+  "packageManager": "[email protected]"
+}

src/shared/config/storybook/decorator/router.decorator.tsx

@@ -1,7 +1,7 @@
-import { Decorator } from '@storybook/react'
+import { Decorator, Story } from '@storybook/react'
 import { BrowserRouter } from 'react-router-dom'
 
-export const RouterDecorator: Decorator = (StoryComponent) => (
+export const RouterDecorator: Decorator = (StoryComponent: Story) => (
   <BrowserRouter>
     <StoryComponent />
   </BrowserRouter>