From b6bfc8ba93b673427924b98fed45b578d57431cb Mon Sep 17 00:00:00 2001 From: "Leon.kov" Date: Wed, 22 Nov 2023 14:34:49 +0300 Subject: [PATCH] fix: storybook errors --- package-lock.json | 16 +++-- package.json | 8 +-- src/entities/Counter/index.ts | 12 +--- .../ui/LoginForm/LoginForm.stories.tsx | 64 ++++++++--------- .../AuthByUsername/ui/LoginForm/LoginForm.tsx | 11 +-- .../StoreDecorator/StoreDecorator.tsx | 3 +- src/widgets/Navbar/ui/Navbar.stories.tsx | 68 +++++++++---------- 7 files changed, 89 insertions(+), 93 deletions(-) diff --git a/package-lock.json b/package-lock.json index b8b977f..11c794c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,8 @@ }, "devDependencies": { "@babel/core": "^7.17.5", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-transform-modules-commonjs": "^7.23.3", "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", @@ -331,9 +333,9 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz", - "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz", + "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==", "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", @@ -1384,12 +1386,12 @@ } }, "node_modules/@babel/plugin-transform-modules-commonjs": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.0.tgz", - "integrity": "sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz", + "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==", "dev": true, "dependencies": { - "@babel/helper-module-transforms": "^7.23.0", + "@babel/helper-module-transforms": "^7.23.3", "@babel/helper-plugin-utils": "^7.22.5", "@babel/helper-simple-access": "^7.22.5" }, diff --git a/package.json b/package.json index a09e7de..cf88984 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "eslint-plugin-react-hooks": "^4.3.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", + "husky": "^8.0.0", "identity-obj-proxy": "^3.0.0", "jest": "^27.5.1", "json-server": "^0.17.0", @@ -82,11 +83,11 @@ "webpack": "^5.69.1", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.9.2", - "webpack-dev-server": "^4.7.4", - "husky": "^8.0.0" + "webpack-dev-server": "^4.7.4" }, "dependencies": { "@reduxjs/toolkit": "^1.8.0", + "axios": "^0.26.1", "i18next": "^21.6.11", "i18next-browser-languagedetector": "^6.1.3", "i18next-http-backend": "^1.3.2", @@ -94,8 +95,7 @@ "react-dom": "^17.0.2", "react-i18next": "^11.15.5", "react-redux": "^7.2.6", - "react-router-dom": "^6.2.1", - "axios": "^0.26.1" + "react-router-dom": "^6.2.1" }, "loki": { "configurations": { diff --git a/src/entities/Counter/index.ts b/src/entities/Counter/index.ts index d6d64ae..d8a92dc 100644 --- a/src/entities/Counter/index.ts +++ b/src/entities/Counter/index.ts @@ -1,9 +1,3 @@ -import { counterReducer } from 'entities/Counter/model/slice/counterSlice'; -import { CounterSchema } from 'entities/Counter/model/types/counterSchema'; -import { Counter } from './ui/Counter'; - -export { - counterReducer, - CounterSchema, - Counter, -}; +export { counterReducer } from 'entities/Counter/model/slice/counterSlice'; +export { CounterSchema } from 'entities/Counter/model/types/counterSchema'; +export { Counter } from './ui/Counter'; diff --git a/src/features/AuthByUsername/ui/LoginForm/LoginForm.stories.tsx b/src/features/AuthByUsername/ui/LoginForm/LoginForm.stories.tsx index 1da7149..fdb15bd 100644 --- a/src/features/AuthByUsername/ui/LoginForm/LoginForm.stories.tsx +++ b/src/features/AuthByUsername/ui/LoginForm/LoginForm.stories.tsx @@ -1,32 +1,32 @@ -import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { StoreDecorator } from 'shared/config/storybook/StoreDecorator/StoreDecorator'; -import LoginForm from 'features/AuthByUsername/ui/LoginForm/LoginForm'; - -export default { - title: 'features/LoginForm', - component: LoginForm, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -export const Primary = Template.bind({}); -Primary.args = {}; -Primary.decorators = [StoreDecorator({ - loginForm: { username: 'user', password: '12345' }, -})]; - -export const withError = Template.bind({}); -withError.args = {}; -withError.decorators = [StoreDecorator({ - loginForm: { username: 'user', password: '12345', error: 'error message' }, -})]; - -export const withLoading = Template.bind({}); -withError.args = {}; -withError.decorators = [StoreDecorator({ - loginForm: { isLoading: true }, -})]; +// import React from 'react'; +// import { ComponentMeta, ComponentStory } from '@storybook/react'; +// import { StoreDecorator } from 'shared/config/storybook/StoreDecorator/StoreDecorator'; +// import LoginForm from 'features/AuthByUsername/ui/LoginForm/LoginForm'; +// +// export default { +// title: 'features/LoginForm', +// component: LoginForm, +// argTypes: { +// backgroundColor: { control: 'color' }, +// }, +// } as ComponentMeta; +// +// const Template: ComponentStory = (args) => ; +// +// export const Primary = Template.bind({}); +// Primary.args = {}; +// Primary.decorators = [StoreDecorator({ +// loginForm: { username: 'user', password: '12345' }, +// })]; +// +// export const withError = Template.bind({}); +// withError.args = {}; +// withError.decorators = [StoreDecorator({ +// loginForm: { username: 'user', password: '12345', error: 'error message' }, +// })]; +// +// export const withLoading = Template.bind({}); +// withLoading.args = {}; +// withLoading.decorators = [StoreDecorator({ +// loginForm: { isLoading: true }, +// })]; diff --git a/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx b/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx index dba872f..fffa7e1 100644 --- a/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx +++ b/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx @@ -2,11 +2,13 @@ import { classNames } from 'shared/lib/classNames/classNames'; import { useTranslation } from 'react-i18next'; import { Button, ButtonTheme } from 'shared/ui/Button/Button'; import { Input } from 'shared/ui/Input/Input'; -import { useDispatch, useSelector, useStore } from 'react-redux'; -import { memo, useCallback, useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { memo, useCallback } from 'react'; import { Text, TextTheme } from 'shared/ui/Text/Text'; -import { ReduxStoreWithManager } from 'app/providers/StoreProvider/config/StateSchema'; -import { DynamicModuleLoader, ReducersList } from 'shared/lib/components/DynamicModuleLoared/DynamicModuleLoared'; +import { + DynamicModuleLoader, + ReducersList, +} from 'shared/lib/components/DynamicModuleLoared/DynamicModuleLoared'; import { getLoginUsername } from '../../model/selectors/getLoginUsername/getLoginUsername'; import { getLoginIsLoading } from '../../model/selectors/getLoginIsLoading/getLoginIsLoading'; import { getLoginPassword } from '../../model/selectors/getLoginPassword/getLoginPassword'; @@ -26,7 +28,6 @@ const initialReducers: ReducersList = { const LoginForm = memo(({ className }: LoginFormProps) => { const { t } = useTranslation(); const dispatch = useDispatch(); - const store = useStore() as ReduxStoreWithManager; const username = useSelector(getLoginUsername); const password = useSelector(getLoginPassword); const isLoading = useSelector(getLoginIsLoading); diff --git a/src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx b/src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx index 1a13668..a7a10db 100644 --- a/src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx +++ b/src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx @@ -1,10 +1,9 @@ import { Story } from '@storybook/react'; import { StateSchema, StoreProvider } from 'app/providers/StoreProvider'; import { DeepPartial, ReducersMapObject } from '@reduxjs/toolkit'; -import loginForm from 'features/AuthByUsername/ui/LoginForm/LoginForm'; import { loginReducer } from 'features/AuthByUsername/model/slice/loginSlice'; -const defaultAsyncReducers:DeepPartial> = { +const defaultAsyncReducers: DeepPartial> = { loginForm: loginReducer, }; diff --git a/src/widgets/Navbar/ui/Navbar.stories.tsx b/src/widgets/Navbar/ui/Navbar.stories.tsx index 96a037c..d3457b1 100644 --- a/src/widgets/Navbar/ui/Navbar.stories.tsx +++ b/src/widgets/Navbar/ui/Navbar.stories.tsx @@ -1,34 +1,34 @@ -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator'; -import { Theme } from 'app/providers/ThemeProvider'; -import { StoreDecorator } from 'shared/config/storybook/StoreDecorator/StoreDecorator'; -import { Navbar } from './Navbar'; - -export default { - title: 'widget/Navbar', - component: Navbar, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -export const Light = Template.bind({}); -Light.args = {}; - -Light.decorators = [StoreDecorator({})]; - -export const Dark = Template.bind({}); -Dark.args = {}; -Dark.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({})]; - -export const AuthNavbar = Template.bind({}); -AuthNavbar.args = {}; -AuthNavbar.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({ - user: { - authData: {}, - }, -})]; +// import React from 'react'; +// import { ComponentStory, ComponentMeta } from '@storybook/react'; +// +// import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator'; +// import { Theme } from 'app/providers/ThemeProvider'; +// import { StoreDecorator } from 'shared/config/storybook/StoreDecorator/StoreDecorator'; +// import { Navbar } from './Navbar'; +// +// export default { +// title: 'widget/Navbar', +// component: Navbar, +// argTypes: { +// backgroundColor: { control: 'color' }, +// }, +// } as ComponentMeta; +// +// const Template: ComponentStory = (args) => ; +// +// export const Light = Template.bind({}); +// Light.args = {}; +// +// Light.decorators = [StoreDecorator({})]; +// +// export const Dark = Template.bind({}); +// Dark.args = {}; +// Dark.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({})]; +// +// export const AuthNavbar = Template.bind({}); +// AuthNavbar.args = {}; +// AuthNavbar.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({ +// user: { +// authData: {}, +// }, +// })];