diff --git a/.eslintrc.js b/.eslintrc.js index 6ce5c83..0cd4764 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,6 +7,8 @@ module.exports = { extends: [ 'plugin:react/recommended', 'airbnb', + 'plugin:storybook/recommended', + 'prettier', ], parser: '@typescript-eslint/parser', parserOptions: { @@ -25,10 +27,7 @@ module.exports = { 'unused-imports', ], rules: { - 'react/jsx-indent': [2, 4], - 'react/jsx-indent-props': [2, 4], 'unused-imports/no-unused-imports': 'error', - indent: [2, 4], 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.tsx'] }, @@ -66,9 +65,14 @@ module.exports = { 'error', { alias: '@', - testFilesPatterns: ['**/*.test.*', '**/*.story.*', '**/StoreDecorator.tsx'], + testFilesPatterns: [ + '**/*.test.*', + '**/*.story.*', + '**/StoreDecorator.tsx', + ], }, ], + 'react/jsx-max-props-per-line': ['error', { maximum: 3 }], }, globals: { __IS_DEV__: true, @@ -84,5 +88,4 @@ module.exports = { }, }, ], - }; diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..30a1f85 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,9 @@ +{ + "tabWidth": 4, + "semi": true, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": true, + "bracketSameLine": false, + "arrowParens": "always" +} diff --git a/.stylelintrc.json b/.stylelintrc.json index f16352f..4111401 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,7 +1,7 @@ { - "extends": "stylelint-config-standard-scss", - "rules": { - "indentation": [4], - "selector-class-pattern": null - } + "extends": "stylelint-config-standard-scss", + "rules": { + "indentation": [4], + "selector-class-pattern": null + } } diff --git a/babel.config.json b/babel.config.json index c5a7223..9ae3e8f 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,15 +1,13 @@ { - "presets": [ - "@babel/preset-env", - "@babel/preset-typescript", - [ - "@babel/preset-react", - { - "runtime": "automatic" - } - ] - ], - "plugins": [ - "i18next-extract" - ] + "presets": [ + "@babel/preset-env", + "@babel/preset-typescript", + [ + "@babel/preset-react", + { + "runtime": "automatic" + } + ] + ], + "plugins": ["i18next-extract"] } diff --git a/config/jest/jest.config.ts b/config/jest/jest.config.ts index db8b0fd..c56d405 100644 --- a/config/jest/jest.config.ts +++ b/config/jest/jest.config.ts @@ -13,23 +13,10 @@ export default { }, clearMocks: true, testEnvironment: 'jsdom', - coveragePathIgnorePatterns: [ - '\\\\node_modules\\\\', - ], - moduleFileExtensions: [ - 'js', - 'jsx', - 'ts', - 'tsx', - 'json', - 'node', - ], - moduleDirectories: [ - 'node_modules', - ], - modulePaths: [ - 'src', - ], + coveragePathIgnorePatterns: ['\\\\node_modules\\\\'], + moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'], + moduleDirectories: ['node_modules'], + modulePaths: ['src'], testMatch: [ // Обнаружил разницу между МАК ОС и ВИНДОУС!!! 'src/**/*(*.)@(spec|test).[tj]s?(x)', @@ -40,16 +27,18 @@ export default { '\\.s?css$': 'identity-obj-proxy', '\\.svg': path.resolve(__dirname, 'jestEmptyComponent.tsx'), '^@/(.*)$': '/src/$1', - }, reporters: [ 'default', - ['jest-html-reporters', { - publicPath: '/reports/unit', - filename: 'report.html', - // openReport: true, - inlineSource: true, - }], + [ + 'jest-html-reporters', + { + publicPath: '/reports/unit', + filename: 'report.html', + // openReport: true, + inlineSource: true, + }, + ], ], // Indicates whether the coverage information should be collected while executing the test diff --git a/config/storybook/main.ts b/config/storybook/main.ts index 988e4dc..12c56be 100644 --- a/config/storybook/main.ts +++ b/config/storybook/main.ts @@ -4,9 +4,7 @@ import { buildCssLoader } from '../build/loaders/buildCssLoader'; /* eslint-disable no-mixed-spaces-and-tabs */ export default { - stories: [ - '../../src/**/*.stories.@(js|jsx|ts|tsx)', - ], + stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', { @@ -32,36 +30,38 @@ export default { locales: '', buildLocales: '', }; - config!.resolve!.modules!.push(paths.src); - config!.resolve!.extensions!.push('.ts', '.tsx'); - config!.resolve!.alias = { - ...config!.resolve!.alias, - '@': paths.src, - }; + 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) => { - if (/svg/.test(rule.test as string)) { - return { ...rule, exclude: /\.svg$/i }; - } + // @ts-ignore + config!.module!.rules = config!.module!.rules!.map( + (rule: RuleSetRule) => { + if (/svg/.test(rule.test as string)) { + return { ...rule, exclude: /\.svg$/i }; + } - return rule; - }); + return rule; + }, + ); - config!.module!.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }); - config!.module!.rules.push(buildCssLoader(true)); + config!.module!.rules.push({ + test: /\.svg$/, + use: ['@svgr/webpack'], + }); + config!.module!.rules.push(buildCssLoader(true)); - config!.plugins!.push( - new DefinePlugin({ - __IS_DEV__: JSON.stringify(true), - __API__: JSON.stringify('https://testapi.ru'), - __PROJECT__: JSON.stringify('storybook'), - }), - ); - // Return the altered config - return config; + config!.plugins!.push( + new DefinePlugin({ + __IS_DEV__: JSON.stringify(true), + __API__: JSON.stringify('https://testapi.ru'), + __PROJECT__: JSON.stringify('storybook'), + }), + ); + // Return the altered config + return config; }, }; diff --git a/cypress/e2e/articles/article-details.cy.ts b/cypress/e2e/articles/article-details.cy.ts index da78112..a8ea889 100644 --- a/cypress/e2e/articles/article-details.cy.ts +++ b/cypress/e2e/articles/article-details.cy.ts @@ -24,7 +24,9 @@ describe('to article details page', () => { cy.getByTestId('CommentCard.Content').should('have.length', 1); }); it('article details rating (fixtures)', () => { - cy.intercept('GET', '**/articles/*', { fixture: 'article-details.json' }); + cy.intercept('GET', '**/articles/*', { + fixture: 'article-details.json', + }); cy.getByTestId('ArticlesDetails.Info'); cy.getByTestId('RatingCard').scrollIntoView(); cy.setRate(3, 'feedback test'); diff --git a/cypress/e2e/profile/profile-edit.cy.ts b/cypress/e2e/profile/profile-edit.cy.ts index 316f736..56f1119 100644 --- a/cypress/e2e/profile/profile-edit.cy.ts +++ b/cypress/e2e/profile/profile-edit.cy.ts @@ -19,6 +19,9 @@ describe('to profile page', () => { const newLastname = 'newLastname'; cy.updateProfile(newName, newLastname); cy.getByTestId('ProfileCard.firstname').should('have.value', newName); - cy.getByTestId('ProfileCard.lastname').should('have.value', newLastname); + cy.getByTestId('ProfileCard.lastname').should( + 'have.value', + newLastname, + ); }); }); diff --git a/cypress/fixtures/article-details.json b/cypress/fixtures/article-details.json index ad6be03..7dc10f9 100644 --- a/cypress/fixtures/article-details.json +++ b/cypress/fixtures/article-details.json @@ -1,33 +1,29 @@ { - "id": "7", - "title": "Ruby news", - "subtitle": "Что нового в JS за 2022 год?", - "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", - "views": 100, - "createdAt": "21.02.2022", - "userId": "1", - "type": [ - "IT" - ], - "blocks": [ - { - "id": "1", - "type": "TEXT", - "title": "Заголовок этого блока", - "paragraphs": [ - "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.", - "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.", - "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега \n \n;" - }, - { - "id": "5", - "type": "TEXT", - "title": "Заголовок этого блока", - "paragraphs": [ - "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.", - "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега \n \n;" + }, + { + "id": "5", + "type": "TEXT", + "title": "Заголовок этого блока", + "paragraphs": [ + "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.", + "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега