diff --git a/craco.config.js b/craco.config.js index 06864f66..a7ca11e9 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,4 +1,5 @@ const CracoAlias = require('craco-alias'); +const fastRefreshCracoPlugin = require('craco-fast-refresh'); module.exports = { webpack: { @@ -14,27 +15,28 @@ module.exports = { mode: 'file', }, jest: { - setupTestFrameworkScriptFile: "/src/setupTests.js", + setupTestFrameworkScriptFile: '/src/setupTests.js', configure: { moduleNameMapper: { - "^~/(.*)$": "/src/$1", - "^.+\\.scss$": "identity-obj-proxy" + '^~/(.*)$': '/src/$1', + '^.+\\.scss$': 'identity-obj-proxy', }, - snapshotSerializers: ["enzyme-to-json/serializer"], - moduleFileExtensions: ["js", "json", "ts", "tsx", "jsx", "node"], + snapshotSerializers: ['enzyme-to-json/serializer'], + moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'jsx', 'node'], verbose: true, - roots: ["/src"], + roots: ['/src'], transform: { - "^.+\\.tsx?$": "ts-jest", - "^.+\\.ts?$": "babel-jest", - "^.+\\.js?$": "ts-jest", - "^.+\\.jsx?$": "babel-jest" + '^.+\\.tsx?$': 'ts-jest', + '^.+\\.ts?$': 'babel-jest', + '^.+\\.js?$': 'ts-jest', + '^.+\\.jsx?$': 'babel-jest', }, - preset: "ts-jest/presets/js-with-ts", - testEnvironment: "node" - } + preset: 'ts-jest/presets/js-with-ts', + testEnvironment: 'node', + }, }, plugins: [ + { plugin: fastRefreshCracoPlugin }, { plugin: CracoAlias, options: { diff --git a/package.json b/package.json index ed843287..579992cc 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,7 @@ }, "eslintConfig": { "extends": [ - "react-app", - "react-app/jest" + "react-app" ] }, "browserslist": { @@ -61,12 +60,13 @@ ] }, "devDependencies": { + "@craco/craco": "5.8.0", "@types/classnames": "^2.2.7", "@types/node": "^11.13.22", "@types/ramda": "^0.26.33", "@types/react-redux": "^7.1.11", - "@craco/craco": "5.8.0", "craco-alias": "^2.1.1", + "craco-fast-refresh": "^1.0.2", "prettier": "^1.18.2" } } diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx index 4c57faaa..f8d457b8 100644 --- a/src/components/input/InputText/index.tsx +++ b/src/components/input/InputText/index.tsx @@ -1,9 +1,9 @@ -import React, { FC, ChangeEvent, useCallback, useState, useEffect, LegacyRef } from 'react'; +import React, {ChangeEvent, FC, useCallback, useEffect, useState} from 'react'; import classNames from 'classnames'; import styles from '~/styles/common/inputs.module.scss'; -import { Icon } from '~/components/input/Icon'; -import { IInputTextProps } from '~/redux/types'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import {Icon} from '~/components/input/Icon'; +import {IInputTextProps} from '~/redux/types'; +import {LoaderCircle} from '~/components/input/LoaderCircle'; const InputText: FC = ({ wrapperClassName, diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 02e7933d..e2468f28 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -1,21 +1,21 @@ -import React, { createElement, FC, FormEvent, useCallback, useEffect, useState } from 'react'; -import { connect } from 'react-redux'; -import { IDialogProps } from '~/redux/modal/constants'; -import { useCloseOnEscape } from '~/utils/hooks'; -import { Group } from '~/components/containers/Group'; -import { InputText } from '~/components/input/InputText'; -import { Button } from '~/components/input/Button'; -import { Padder } from '~/components/containers/Padder'; +import React, {createElement, FC, FormEvent, useCallback, useEffect, useState} from 'react'; +import {connect} from 'react-redux'; +import {IDialogProps} from '~/redux/modal/constants'; +import {useCloseOnEscape} from '~/utils/hooks'; +import {Group} from '~/components/containers/Group'; +import {InputText} from '~/components/input/InputText'; +import {Button} from '~/components/input/Button'; +import {Padder} from '~/components/containers/Padder'; import styles from './styles.module.scss'; -import { selectNode } from '~/redux/node/selectors'; -import { EditorPanel } from '~/components/editors/EditorPanel'; +import {selectNode} from '~/redux/node/selectors'; +import {EditorPanel} from '~/components/editors/EditorPanel'; import * as NODE_ACTIONS from '~/redux/node/actions'; -import { selectUploads } from '~/redux/uploads/selectors'; -import { ERROR_LITERAL } from '~/constants/errors'; -import { EMPTY_NODE, NODE_EDITORS } from '~/redux/node/constants'; -import { BetterScrollDialog } from '../BetterScrollDialog'; -import { CoverBackdrop } from '~/components/containers/CoverBackdrop'; -import { IEditorComponentProps } from '~/redux/node/types'; +import {selectUploads} from '~/redux/uploads/selectors'; +import {ERROR_LITERAL} from '~/constants/errors'; +import {EMPTY_NODE, NODE_EDITORS} from '~/redux/node/constants'; +import {BetterScrollDialog} from '../BetterScrollDialog'; +import {CoverBackdrop} from '~/components/containers/CoverBackdrop'; +import {IEditorComponentProps} from '~/redux/node/types'; const mapStateToProps = state => { const { editor, errors } = selectNode(state); @@ -78,7 +78,13 @@ const EditorDialogUnconnected: FC = ({ - +