added react fast reload

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: "<rootDir>/src/setupTests.js",
+    setupTestFrameworkScriptFile: '<rootDir>/src/setupTests.js',
     configure: {
       moduleNameMapper: {
-        "^~/(.*)$": "<rootDir>/src/$1",
-        "^.+\\.scss$": "identity-obj-proxy"
+        '^~/(.*)$': '<rootDir>/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: ["<rootDir>/src"],
+      roots: ['<rootDir>/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: {

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"
   }
 }

src/components/input/InputText/index.tsx

@@ -1,4 +1,4 @@
-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';

src/containers/dialogs/EditorDialog/index.tsx

@@ -78,7 +78,13 @@ const EditorDialogUnconnected: FC<IProps> = ({
       <EditorPanel data={data} setData={setData} temp={temp} setTemp={setTemp} />
 
       <Group horizontal>
-        <InputText title="Название" value={data.title} handler={setTitle} autoFocus />
+        <InputText
+          title="Название"
+          value={data.title}
+          handler={setTitle}
+          autoFocus
+          maxLength={256}
+        />
 
         <Button title="Сохранить" iconRight="check" />
       </Group>