diff --git a/README.md b/README.md
index 47bf2a7..1d14bf8 100644
--- a/README.md
+++ b/README.md
@@ -91,3 +91,4 @@ To analyze the code and find problems according to the given rules, described in
├── package.json
└── tsconfig.json
```
+
diff --git a/package-lock.json b/package-lock.json
index e0e4135..33d6a2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "1.0.0",
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
+ "@types/js-cookie": "^3.0.6",
"axios": "^1.4.0",
"classnames": "^2.3.2",
"nanoid": "^4.0.2",
@@ -125,81 +126,17 @@
}
},
"node_modules/@babel/code-frame": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
- "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+ "version": "7.24.2",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+ "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
"dependencies": {
- "@babel/highlight": "^7.22.10",
- "chalk": "^2.4.2"
+ "@babel/highlight": "^7.24.2",
+ "picocolors": "^1.0.0"
},
"engines": {
"node": ">=6.9.0"
}
},
- "node_modules/@babel/code-frame/node_modules/ansi-styles": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
- "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
- "dependencies": {
- "color-convert": "^1.9.0"
- },
- "engines": {
- "node": ">=4"
- }
- },
- "node_modules/@babel/code-frame/node_modules/chalk": {
- "version": "2.4.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
- "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
- "dependencies": {
- "ansi-styles": "^3.2.1",
- "escape-string-regexp": "^1.0.5",
- "supports-color": "^5.3.0"
- },
- "engines": {
- "node": ">=4"
- }
- },
- "node_modules/@babel/code-frame/node_modules/color-convert": {
- "version": "1.9.3",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
- "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
- "dependencies": {
- "color-name": "1.1.3"
- }
- },
- "node_modules/@babel/code-frame/node_modules/color-name": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
- },
- "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
- "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
- "engines": {
- "node": ">=0.8.0"
- }
- },
- "node_modules/@babel/code-frame/node_modules/has-flag": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
- "engines": {
- "node": ">=4"
- }
- },
- "node_modules/@babel/code-frame/node_modules/supports-color": {
- "version": "5.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
- "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
- "dependencies": {
- "has-flag": "^3.0.0"
- },
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/@babel/compat-data": {
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
@@ -246,13 +183,13 @@
}
},
"node_modules/@babel/generator": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
- "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
+ "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
"dependencies": {
- "@babel/types": "^7.22.10",
- "@jridgewell/gen-mapping": "^0.3.2",
- "@jridgewell/trace-mapping": "^0.3.17",
+ "@babel/types": "^7.24.0",
+ "@jridgewell/gen-mapping": "^0.3.5",
+ "@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^2.5.1"
},
"engines": {
@@ -387,20 +324,20 @@
}
},
"node_modules/@babel/helper-environment-visitor": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
- "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-function-name": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
- "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
"dependencies": {
- "@babel/template": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
},
"engines": {
"node": ">=6.9.0"
@@ -542,17 +479,17 @@
}
},
"node_modules/@babel/helper-string-parser": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
- "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+ "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
- "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
"engines": {
"node": ">=6.9.0"
}
@@ -592,13 +529,14 @@
}
},
"node_modules/@babel/highlight": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
- "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+ "version": "7.24.2",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+ "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
"dependencies": {
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-validator-identifier": "^7.22.20",
"chalk": "^2.4.2",
- "js-tokens": "^4.0.0"
+ "js-tokens": "^4.0.0",
+ "picocolors": "^1.0.0"
},
"engines": {
"node": ">=6.9.0"
@@ -669,9 +607,9 @@
}
},
"node_modules/@babel/parser": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
- "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g==",
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+ "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
"bin": {
"parser": "bin/babel-parser.js"
},
@@ -2008,32 +1946,32 @@
}
},
"node_modules/@babel/template": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
- "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+ "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
"dependencies": {
- "@babel/code-frame": "^7.22.5",
- "@babel/parser": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/code-frame": "^7.23.5",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/traverse": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.11.tgz",
- "integrity": "sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==",
- "dependencies": {
- "@babel/code-frame": "^7.22.10",
- "@babel/generator": "^7.22.10",
- "@babel/helper-environment-visitor": "^7.22.5",
- "@babel/helper-function-name": "^7.22.5",
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+ "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
+ "dependencies": {
+ "@babel/code-frame": "^7.24.1",
+ "@babel/generator": "^7.24.1",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
"@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.6",
- "@babel/parser": "^7.22.11",
- "@babel/types": "^7.22.11",
- "debug": "^4.1.0",
+ "@babel/parser": "^7.24.1",
+ "@babel/types": "^7.24.0",
+ "debug": "^4.3.1",
"globals": "^11.1.0"
},
"engines": {
@@ -2049,12 +1987,12 @@
}
},
"node_modules/@babel/types": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
- "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+ "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
"dependencies": {
- "@babel/helper-string-parser": "^7.22.5",
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-string-parser": "^7.23.4",
+ "@babel/helper-validator-identifier": "^7.22.20",
"to-fast-properties": "^2.0.0"
},
"engines": {
@@ -2610,13 +2548,13 @@
}
},
"node_modules/@jridgewell/gen-mapping": {
- "version": "0.3.3",
- "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
- "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+ "version": "0.3.5",
+ "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+ "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"dependencies": {
- "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
- "@jridgewell/trace-mapping": "^0.3.9"
+ "@jridgewell/trace-mapping": "^0.3.24"
},
"engines": {
"node": ">=6.0.0"
@@ -2631,9 +2569,9 @@
}
},
"node_modules/@jridgewell/set-array": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
- "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+ "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"engines": {
"node": ">=6.0.0"
}
@@ -2654,9 +2592,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@jridgewell/trace-mapping": {
- "version": "0.3.19",
- "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
- "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+ "version": "0.3.25",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+ "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -3223,6 +3161,11 @@
"@types/istanbul-lib-report": "*"
}
},
+ "node_modules/@types/js-cookie": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+ "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ=="
+ },
"node_modules/@types/json-schema": {
"version": "7.0.12",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -4084,11 +4027,11 @@
}
},
"node_modules/axios": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
- "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+ "version": "1.6.8",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+ "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"dependencies": {
- "follow-redirects": "^1.15.0",
+ "follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
@@ -4176,13 +4119,13 @@
}
},
"node_modules/body-parser": {
- "version": "1.20.1",
- "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
- "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+ "version": "1.20.2",
+ "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+ "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
"dev": true,
"dependencies": {
"bytes": "3.1.2",
- "content-type": "~1.0.4",
+ "content-type": "~1.0.5",
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "1.2.0",
@@ -4190,7 +4133,7 @@
"iconv-lite": "0.4.24",
"on-finished": "2.4.1",
"qs": "6.11.0",
- "raw-body": "2.5.1",
+ "raw-body": "2.5.2",
"type-is": "~1.6.18",
"unpipe": "1.0.0"
},
@@ -4673,9 +4616,9 @@
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
},
"node_modules/cookie": {
- "version": "0.5.0",
- "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
- "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+ "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
"dev": true,
"engines": {
"node": ">= 0.6"
@@ -5898,17 +5841,17 @@
}
},
"node_modules/express": {
- "version": "4.18.2",
- "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
- "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+ "version": "4.19.2",
+ "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+ "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
"dev": true,
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
- "body-parser": "1.20.1",
+ "body-parser": "1.20.2",
"content-disposition": "0.5.4",
"content-type": "~1.0.4",
- "cookie": "0.5.0",
+ "cookie": "0.6.0",
"cookie-signature": "1.0.6",
"debug": "2.6.9",
"depd": "2.0.0",
@@ -6135,9 +6078,9 @@
"dev": true
},
"node_modules/follow-redirects": {
- "version": "1.15.2",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
- "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+ "version": "1.15.6",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+ "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
@@ -8272,9 +8215,9 @@
}
},
"node_modules/postcss": {
- "version": "8.4.28",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
- "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [
{
"type": "opencollective",
@@ -8290,9 +8233,9 @@
}
],
"dependencies": {
- "nanoid": "^3.3.6",
+ "nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -8376,9 +8319,9 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
"node_modules/postcss/node_modules/nanoid": {
- "version": "3.3.6",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
- "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"funding": [
{
"type": "github",
@@ -8539,9 +8482,9 @@
}
},
"node_modules/raw-body": {
- "version": "2.5.1",
- "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
- "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+ "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
"dev": true,
"dependencies": {
"bytes": "3.1.2",
@@ -9547,9 +9490,9 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
@@ -10576,9 +10519,9 @@
}
},
"node_modules/webpack-dev-middleware": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
- "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+ "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
"dev": true,
"dependencies": {
"colorette": "^2.0.10",
@@ -10973,63 +10916,12 @@
}
},
"@babel/code-frame": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
- "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+ "version": "7.24.2",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+ "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
"requires": {
- "@babel/highlight": "^7.22.10",
- "chalk": "^2.4.2"
- },
- "dependencies": {
- "ansi-styles": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
- "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
- "requires": {
- "color-convert": "^1.9.0"
- }
- },
- "chalk": {
- "version": "2.4.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
- "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
- "requires": {
- "ansi-styles": "^3.2.1",
- "escape-string-regexp": "^1.0.5",
- "supports-color": "^5.3.0"
- }
- },
- "color-convert": {
- "version": "1.9.3",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
- "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
- "requires": {
- "color-name": "1.1.3"
- }
- },
- "color-name": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
- },
- "escape-string-regexp": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
- "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
- },
- "has-flag": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
- },
- "supports-color": {
- "version": "5.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
- "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
- "requires": {
- "has-flag": "^3.0.0"
- }
- }
+ "@babel/highlight": "^7.24.2",
+ "picocolors": "^1.0.0"
}
},
"@babel/compat-data": {
@@ -11067,13 +10959,13 @@
}
},
"@babel/generator": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
- "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
+ "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
"requires": {
- "@babel/types": "^7.22.10",
- "@jridgewell/gen-mapping": "^0.3.2",
- "@jridgewell/trace-mapping": "^0.3.17",
+ "@babel/types": "^7.24.0",
+ "@jridgewell/gen-mapping": "^0.3.5",
+ "@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^2.5.1"
}
},
@@ -11178,17 +11070,17 @@
}
},
"@babel/helper-environment-visitor": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
- "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q=="
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA=="
},
"@babel/helper-function-name": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
- "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
"requires": {
- "@babel/template": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
}
},
"@babel/helper-hoist-variables": {
@@ -11285,14 +11177,14 @@
}
},
"@babel/helper-string-parser": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
- "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+ "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ=="
},
"@babel/helper-validator-identifier": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
- "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ=="
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
},
"@babel/helper-validator-option": {
"version": "7.22.5",
@@ -11320,13 +11212,14 @@
}
},
"@babel/highlight": {
- "version": "7.22.10",
- "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
- "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+ "version": "7.24.2",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+ "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
"requires": {
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-validator-identifier": "^7.22.20",
"chalk": "^2.4.2",
- "js-tokens": "^4.0.0"
+ "js-tokens": "^4.0.0",
+ "picocolors": "^1.0.0"
},
"dependencies": {
"ansi-styles": {
@@ -11381,9 +11274,9 @@
}
},
"@babel/parser": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.11.tgz",
- "integrity": "sha512-R5zb8eJIBPJriQtbH/htEQy4k7E2dHWlD2Y2VT07JCzwYZHBxV5ZYtM0UhXSNMT74LyxuM+b1jdL7pSesXbC/g=="
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+ "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg=="
},
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
"version": "7.22.5",
@@ -12245,29 +12138,29 @@
}
},
"@babel/template": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
- "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+ "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
"requires": {
- "@babel/code-frame": "^7.22.5",
- "@babel/parser": "^7.22.5",
- "@babel/types": "^7.22.5"
+ "@babel/code-frame": "^7.23.5",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0"
}
},
"@babel/traverse": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.11.tgz",
- "integrity": "sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==",
- "requires": {
- "@babel/code-frame": "^7.22.10",
- "@babel/generator": "^7.22.10",
- "@babel/helper-environment-visitor": "^7.22.5",
- "@babel/helper-function-name": "^7.22.5",
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+ "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
+ "requires": {
+ "@babel/code-frame": "^7.24.1",
+ "@babel/generator": "^7.24.1",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
"@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.6",
- "@babel/parser": "^7.22.11",
- "@babel/types": "^7.22.11",
- "debug": "^4.1.0",
+ "@babel/parser": "^7.24.1",
+ "@babel/types": "^7.24.0",
+ "debug": "^4.3.1",
"globals": "^11.1.0"
},
"dependencies": {
@@ -12279,12 +12172,12 @@
}
},
"@babel/types": {
- "version": "7.22.11",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
- "integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+ "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
"requires": {
- "@babel/helper-string-parser": "^7.22.5",
- "@babel/helper-validator-identifier": "^7.22.5",
+ "@babel/helper-string-parser": "^7.23.4",
+ "@babel/helper-validator-identifier": "^7.22.20",
"to-fast-properties": "^2.0.0"
}
},
@@ -12594,13 +12487,13 @@
}
},
"@jridgewell/gen-mapping": {
- "version": "0.3.3",
- "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
- "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+ "version": "0.3.5",
+ "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+ "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"requires": {
- "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
- "@jridgewell/trace-mapping": "^0.3.9"
+ "@jridgewell/trace-mapping": "^0.3.24"
}
},
"@jridgewell/resolve-uri": {
@@ -12609,9 +12502,9 @@
"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA=="
},
"@jridgewell/set-array": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
- "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+ "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="
},
"@jridgewell/source-map": {
"version": "0.3.5",
@@ -12629,9 +12522,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"@jridgewell/trace-mapping": {
- "version": "0.3.19",
- "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
- "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+ "version": "0.3.25",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+ "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"requires": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -13030,6 +12923,11 @@
"@types/istanbul-lib-report": "*"
}
},
+ "@types/js-cookie": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+ "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ=="
+ },
"@types/json-schema": {
"version": "7.0.12",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -13687,11 +13585,11 @@
"dev": true
},
"axios": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
- "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+ "version": "1.6.8",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+ "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"requires": {
- "follow-redirects": "^1.15.0",
+ "follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
@@ -13760,13 +13658,13 @@
"devOptional": true
},
"body-parser": {
- "version": "1.20.1",
- "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
- "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+ "version": "1.20.2",
+ "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+ "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
"dev": true,
"requires": {
"bytes": "3.1.2",
- "content-type": "~1.0.4",
+ "content-type": "~1.0.5",
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "1.2.0",
@@ -13774,7 +13672,7 @@
"iconv-lite": "0.4.24",
"on-finished": "2.4.1",
"qs": "6.11.0",
- "raw-body": "2.5.1",
+ "raw-body": "2.5.2",
"type-is": "~1.6.18",
"unpipe": "1.0.0"
},
@@ -14120,9 +14018,9 @@
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
},
"cookie": {
- "version": "0.5.0",
- "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
- "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+ "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
"dev": true
},
"cookie-signature": {
@@ -15014,17 +14912,17 @@
}
},
"express": {
- "version": "4.18.2",
- "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
- "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+ "version": "4.19.2",
+ "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+ "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
"dev": true,
"requires": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
- "body-parser": "1.20.1",
+ "body-parser": "1.20.2",
"content-disposition": "0.5.4",
"content-type": "~1.0.4",
- "cookie": "0.5.0",
+ "cookie": "0.6.0",
"cookie-signature": "1.0.6",
"debug": "2.6.9",
"depd": "2.0.0",
@@ -15224,9 +15122,9 @@
"dev": true
},
"follow-redirects": {
- "version": "1.15.2",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
- "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+ "version": "1.15.6",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+ "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
},
"for-each": {
"version": "0.3.3",
@@ -16750,19 +16648,19 @@
}
},
"postcss": {
- "version": "8.4.28",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
- "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"requires": {
- "nanoid": "^3.3.6",
+ "nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"dependencies": {
"nanoid": {
- "version": "3.3.6",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
- "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
}
}
},
@@ -16919,9 +16817,9 @@
"dev": true
},
"raw-body": {
- "version": "2.5.1",
- "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
- "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+ "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
"dev": true,
"requires": {
"bytes": "3.1.2",
@@ -17647,9 +17545,9 @@
"dev": true
},
"source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
},
"source-map-support": {
"version": "0.5.21",
@@ -18397,9 +18295,9 @@
}
},
"webpack-dev-middleware": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
- "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+ "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
"dev": true,
"requires": {
"colorette": "^2.0.10",
diff --git a/package.json b/package.json
index 940d82c..1265a7e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"flat": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
+ "@types/js-cookie": "^3.0.6",
"axios": "^1.4.0",
"classnames": "^2.3.2",
"nanoid": "^4.0.2",
diff --git a/src/@types/png.d.ts b/src/@types/png.d.ts
new file mode 100644
index 0000000..1c59232
--- /dev/null
+++ b/src/@types/png.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+ const value: string;
+ export default value;
+}
diff --git a/src/api/requests/authenticate.ts b/src/api/requests/authenticate.ts
new file mode 100644
index 0000000..4dee5e7
--- /dev/null
+++ b/src/api/requests/authenticate.ts
@@ -0,0 +1,26 @@
+import { type ScAddr } from 'ts-sc-client';
+
+import { scUtils } from '@api';
+import { Action } from '@api/sc/actions/Action';
+
+interface IRequest {
+ login: string;
+ password: string;
+}
+
+export const authenticateUser = async (req: IRequest): Promise<ScAddr> => {
+ const action = new Action('action_authorise_user');
+
+ const loginLink = await scUtils.createLink(req.login);
+ const passwordLink = await scUtils.createLink(req.password);
+
+ if (loginLink && passwordLink) {
+ action.addArgs(loginLink, passwordLink);
+ }
+
+ const resp = await action.initiate();
+
+ if (!resp) throw new Error('unauthenticated');
+
+ return resp;
+};
diff --git a/src/assets/images/DevModeOFF.svg b/src/assets/images/DevModeOFF.svg
new file mode 100644
index 0000000..de2af80
--- /dev/null
+++ b/src/assets/images/DevModeOFF.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="white"/>
+<mask id="path-2-outside-1_506_993" maskUnits="userSpaceOnUse" x="3.23999" y="6.24951" width="24" height="18" fill="black">
+<rect fill="white" x="3.23999" y="6.24951" width="24" height="18"/>
+<path d="M17.18 7.2762C17.3721 7.32754 17.536 7.4531 17.6356 7.62525C17.7352 7.7974 17.7623 8.00205 17.711 8.1942L13.738 23.0242C13.6864 23.2165 13.5605 23.3804 13.3881 23.4799C13.2157 23.5794 13.0108 23.6063 12.8185 23.5547C12.6262 23.5031 12.4623 23.3773 12.3628 23.2048C12.2633 23.0324 12.2364 22.8275 12.288 22.6352L16.262 7.8052C16.2875 7.71005 16.3315 7.62085 16.3915 7.54272C16.4515 7.46458 16.5264 7.39903 16.6117 7.34981C16.697 7.3006 16.7912 7.26867 16.8889 7.25587C16.9866 7.24307 17.0858 7.24964 17.181 7.2752M20.443 10.3282C20.576 10.1804 20.7623 10.0914 20.9609 10.0809C21.1595 10.0704 21.3541 10.1392 21.502 10.2722L23.239 11.8362C23.976 12.4982 24.586 13.0482 25.006 13.5462C25.446 14.0712 25.76 14.6342 25.76 15.3302C25.76 16.0252 25.447 16.5882 25.006 17.1122C24.586 17.6112 23.976 18.1612 23.239 18.8232L21.502 20.3872C21.3541 20.5203 21.1594 20.5893 20.9607 20.5789C20.7621 20.5685 20.5756 20.4796 20.4425 20.3317C20.3094 20.1838 20.2404 19.9892 20.2508 19.7905C20.2612 19.5918 20.3501 19.4053 20.498 19.2722L22.195 17.7452C22.983 17.0362 23.514 16.5552 23.858 16.1472C24.188 15.7542 24.26 15.5252 24.26 15.3292C24.26 15.1342 24.188 14.9052 23.858 14.5122C23.514 14.1032 22.983 13.6222 22.195 12.9142L20.498 11.3872C20.4246 11.3213 20.365 11.2416 20.3225 11.1527C20.28 11.0637 20.2554 10.9673 20.2502 10.8688C20.245 10.7704 20.2593 10.6718 20.2922 10.5789C20.3251 10.486 20.376 10.4004 20.442 10.3272M9.50199 11.3872C9.64985 11.2541 9.73876 11.0676 9.74917 10.8689C9.75958 10.6702 9.69063 10.4756 9.55749 10.3277C9.42435 10.1798 9.23793 10.0909 9.03924 10.0805C8.84054 10.0701 8.64585 10.1391 8.49799 10.2722L6.76099 11.8362C6.02399 12.4982 5.41399 13.0482 4.99399 13.5462C4.55399 14.0712 4.23999 14.6342 4.23999 15.3302C4.23999 16.0252 4.55299 16.5882 4.99399 17.1122C5.41399 17.6112 6.02399 18.1612 6.76099 18.8232L8.49799 20.3872C8.64585 20.5203 8.84054 20.5893 9.03924 20.5789C9.23793 20.5685 9.42435 20.4796 9.55749 20.3317C9.69063 20.1838 9.75958 19.9892 9.74917 19.7905C9.73876 19.5918 9.64985 19.4053 9.50199 19.2722L7.80499 17.7452C7.01699 17.0362 6.48599 16.5552 6.14199 16.1472C5.81199 15.7542 5.73999 15.5252 5.73999 15.3292C5.73999 15.1342 5.81199 14.9052 6.14199 14.5122C6.48599 14.1032 7.01699 13.6222 7.80499 12.9142L9.50199 11.3872Z"/>
+</mask>
+<path d="M17.18 7.2762C17.3721 7.32754 17.536 7.4531 17.6356 7.62525C17.7352 7.7974 17.7623 8.00205 17.711 8.1942L13.738 23.0242C13.6864 23.2165 13.5605 23.3804 13.3881 23.4799C13.2157 23.5794 13.0108 23.6063 12.8185 23.5547C12.6262 23.5031 12.4623 23.3773 12.3628 23.2048C12.2633 23.0324 12.2364 22.8275 12.288 22.6352L16.262 7.8052C16.2875 7.71005 16.3315 7.62085 16.3915 7.54272C16.4515 7.46458 16.5264 7.39903 16.6117 7.34981C16.697 7.3006 16.7912 7.26867 16.8889 7.25587C16.9866 7.24307 17.0858 7.24964 17.181 7.2752M20.443 10.3282C20.576 10.1804 20.7623 10.0914 20.9609 10.0809C21.1595 10.0704 21.3541 10.1392 21.502 10.2722L23.239 11.8362C23.976 12.4982 24.586 13.0482 25.006 13.5462C25.446 14.0712 25.76 14.6342 25.76 15.3302C25.76 16.0252 25.447 16.5882 25.006 17.1122C24.586 17.6112 23.976 18.1612 23.239 18.8232L21.502 20.3872C21.3541 20.5203 21.1594 20.5893 20.9607 20.5789C20.7621 20.5685 20.5756 20.4796 20.4425 20.3317C20.3094 20.1838 20.2404 19.9892 20.2508 19.7905C20.2612 19.5918 20.3501 19.4053 20.498 19.2722L22.195 17.7452C22.983 17.0362 23.514 16.5552 23.858 16.1472C24.188 15.7542 24.26 15.5252 24.26 15.3292C24.26 15.1342 24.188 14.9052 23.858 14.5122C23.514 14.1032 22.983 13.6222 22.195 12.9142L20.498 11.3872C20.4246 11.3213 20.365 11.2416 20.3225 11.1527C20.28 11.0637 20.2554 10.9673 20.2502 10.8688C20.245 10.7704 20.2593 10.6718 20.2922 10.5789C20.3251 10.486 20.376 10.4004 20.442 10.3272M9.50199 11.3872C9.64985 11.2541 9.73876 11.0676 9.74917 10.8689C9.75958 10.6702 9.69063 10.4756 9.55749 10.3277C9.42435 10.1798 9.23793 10.0909 9.03924 10.0805C8.84054 10.0701 8.64585 10.1391 8.49799 10.2722L6.76099 11.8362C6.02399 12.4982 5.41399 13.0482 4.99399 13.5462C4.55399 14.0712 4.23999 14.6342 4.23999 15.3302C4.23999 16.0252 4.55299 16.5882 4.99399 17.1122C5.41399 17.6112 6.02399 18.1612 6.76099 18.8232L8.49799 20.3872C8.64585 20.5203 8.84054 20.5893 9.03924 20.5789C9.23793 20.5685 9.42435 20.4796 9.55749 20.3317C9.69063 20.1838 9.75958 19.9892 9.74917 19.7905C9.73876 19.5918 9.64985 19.4053 9.50199 19.2722L7.80499 17.7452C7.01699 17.0362 6.48599 16.5552 6.14199 16.1472C5.81199 15.7542 5.73999 15.5252 5.73999 15.3292C5.73999 15.1342 5.81199 14.9052 6.14199 14.5122C6.48599 14.1032 7.01699 13.6222 7.80499 12.9142L9.50199 11.3872Z" fill="#949494"/>
+<path d="M17.711 8.1942L18.194 8.32359L18.1941 8.32315L17.711 8.1942ZM13.738 23.0242L14.2209 23.1538L14.221 23.1536L13.738 23.0242ZM12.288 22.6352L12.7709 22.7648L12.771 22.7646L12.288 22.6352ZM16.262 7.8052L15.7791 7.67566L15.779 7.67578L16.262 7.8052ZM21.502 10.2722L21.8366 9.90063L21.8363 9.90041L21.502 10.2722ZM23.239 11.8362L22.9044 12.2078L22.9049 12.2082L23.239 11.8362ZM25.006 13.5462L25.3892 13.225L25.3882 13.2238L25.006 13.5462ZM25.006 17.1122L25.3885 17.4342L25.3885 17.4342L25.006 17.1122ZM23.239 18.8232L22.9049 18.4512L22.9044 18.4516L23.239 18.8232ZM21.502 20.3872L21.1674 20.0156L21.1674 20.0156L21.502 20.3872ZM20.498 19.2722L20.1635 18.9005L20.1634 18.9006L20.498 19.2722ZM22.195 17.7452L21.8606 17.3735L21.8605 17.3735L22.195 17.7452ZM23.858 16.1472L24.2403 16.4695L24.2409 16.4687L23.858 16.1472ZM23.858 14.5122L24.2409 14.1907L24.2406 14.1904L23.858 14.5122ZM22.195 12.9142L21.8605 13.2859L21.8608 13.2861L22.195 12.9142ZM20.498 11.3872L20.8324 11.0155L20.8321 11.0152L20.498 11.3872ZM9.50199 11.3872L9.83644 11.7589L9.83656 11.7588L9.50199 11.3872ZM8.49799 10.2722L8.83256 10.6438L8.83256 10.6438L8.49799 10.2722ZM6.76099 11.8362L7.09511 12.2082L7.09556 12.2078L6.76099 11.8362ZM4.99399 13.5462L4.61177 13.2238L4.61078 13.225L4.99399 13.5462ZM4.99399 17.1122L4.61144 17.4342L4.61146 17.4342L4.99399 17.1122ZM6.76099 18.8232L7.09556 18.4516L7.09511 18.4512L6.76099 18.8232ZM8.49799 20.3872L8.83256 20.0156L8.83256 20.0156L8.49799 20.3872ZM9.50199 19.2722L9.83656 18.9006L9.83644 18.9005L9.50199 19.2722ZM7.80499 17.7452L8.13944 17.3735L8.13942 17.3735L7.80499 17.7452ZM6.14199 16.1472L5.75908 16.4687L5.75973 16.4695L6.14199 16.1472ZM6.14199 14.5122L5.75934 14.1904L5.75908 14.1907L6.14199 14.5122ZM7.80499 12.9142L8.13916 13.2861L8.13944 13.2859L7.80499 12.9142ZM17.0509 7.75925C17.1149 7.77636 17.1696 7.81822 17.2028 7.8756L18.0684 7.3749C17.9024 7.08798 17.6293 6.87872 17.3091 6.79315L17.0509 7.75925ZM17.2028 7.8756C17.236 7.93298 17.245 8.0012 17.2279 8.06525L18.1941 8.32315C18.2796 8.0029 18.2343 7.66182 18.0684 7.3749L17.2028 7.8756ZM17.228 8.06481L13.255 22.8948L14.221 23.1536L18.194 8.32359L17.228 8.06481ZM13.2551 22.8946C13.2378 22.9588 13.1958 23.0136 13.1382 23.0468L13.638 23.913C13.9253 23.7472 14.135 23.4741 14.2209 23.1538L13.2551 22.8946ZM13.1382 23.0468C13.0807 23.08 13.0122 23.089 12.948 23.0718L12.6889 24.0376C13.0093 24.1236 13.3507 24.0787 13.638 23.913L13.1382 23.0468ZM12.948 23.0718C12.8838 23.0546 12.8291 23.0125 12.7959 22.955L11.9297 23.4547C12.0955 23.742 12.3686 23.9517 12.6889 24.0376L12.948 23.0718ZM12.7959 22.955C12.7627 22.8974 12.7537 22.829 12.7709 22.7648L11.8051 22.5056C11.7191 22.826 11.764 23.1674 11.9297 23.4547L12.7959 22.955ZM12.771 22.7646L16.745 7.93462L15.779 7.67578L11.805 22.5058L12.771 22.7646ZM16.7449 7.93474C16.7534 7.90302 16.7681 7.87329 16.7881 7.84725L15.995 7.23819C15.895 7.36841 15.8216 7.51707 15.7791 7.67566L16.7449 7.93474ZM16.7881 7.84725C16.8081 7.8212 16.833 7.79935 16.8615 7.78295L16.3619 6.91668C16.2197 6.99871 16.095 7.10796 15.995 7.23819L16.7881 7.84725ZM16.8615 7.78295C16.8899 7.76654 16.9213 7.7559 16.9539 7.75163L16.8239 6.76011C16.6611 6.78145 16.5041 6.83465 16.3619 6.91668L16.8615 7.78295ZM16.9539 7.75163C16.9865 7.74736 17.0195 7.74955 17.0513 7.75807L17.3107 6.79233C17.1522 6.74972 16.9867 6.73877 16.8239 6.76011L16.9539 7.75163ZM20.8147 10.6627C20.859 10.6134 20.9211 10.5837 20.9873 10.5802L20.9345 9.58162C20.6035 9.59913 20.293 9.74737 20.0713 9.99375L20.8147 10.6627ZM20.9873 10.5802C21.0535 10.5767 21.1184 10.5997 21.1677 10.644L21.8363 9.90041C21.5899 9.67879 21.2655 9.56412 20.9345 9.58162L20.9873 10.5802ZM21.1674 10.6438L22.9044 12.2078L23.5736 11.4646L21.8366 9.90063L21.1674 10.6438ZM22.9049 12.2082C23.651 12.8784 24.231 13.4029 24.6238 13.8686L25.3882 13.2238C24.9409 12.6935 24.301 12.118 23.5731 11.4642L22.9049 12.2082ZM24.6228 13.8674C25.0268 14.3494 25.26 14.8011 25.26 15.3302H26.26C26.26 14.4673 25.8652 13.793 25.3892 13.225L24.6228 13.8674ZM25.26 15.3302C25.26 15.8585 25.0276 16.3101 24.6234 16.7902L25.3885 17.4342C25.8664 16.8663 26.26 16.1919 26.26 15.3302H25.26ZM24.6235 16.7902C24.2309 17.2566 23.651 17.781 22.9049 18.4512L23.5731 19.1952C24.3009 18.5414 24.9411 17.9658 25.3885 17.4342L24.6235 16.7902ZM22.9044 18.4516L21.1674 20.0156L21.8366 20.7588L23.5736 19.1948L22.9044 18.4516ZM21.1674 20.0156C21.1181 20.06 21.0532 20.083 20.9869 20.0796L20.9346 21.0782C21.2657 21.0955 21.5902 20.9806 21.8366 20.7588L21.1674 20.0156ZM20.9869 20.0796C20.9206 20.0761 20.8585 20.0464 20.8141 19.9971L20.0709 20.6663C20.2928 20.9127 20.6035 21.0609 20.9346 21.0782L20.9869 20.0796ZM20.8141 19.9971C20.7696 19.9478 20.7467 19.8829 20.7501 19.8166L19.7515 19.7643C19.7341 20.0954 19.8491 20.4199 20.0709 20.6663L20.8141 19.9971ZM20.7501 19.8166C20.7536 19.7503 20.7833 19.6882 20.8326 19.6438L20.1634 18.9006C19.917 19.1225 19.7688 19.4332 19.7515 19.7643L20.7501 19.8166ZM20.8324 19.6439L22.5294 18.1169L21.8605 17.3735L20.1635 18.9005L20.8324 19.6439ZM22.5294 18.1169C23.3065 17.4178 23.8687 16.9102 24.2403 16.4695L23.4757 15.8249C23.1593 16.2002 22.6595 16.6546 21.8606 17.3735L22.5294 18.1169ZM24.2409 16.4687C24.6083 16.0311 24.76 15.691 24.76 15.3292H23.76C23.76 15.3594 23.7676 15.4773 23.4751 15.8257L24.2409 16.4687ZM24.76 15.3292C24.76 14.9682 24.6081 14.628 24.2409 14.1907L23.4751 14.8337C23.7678 15.1824 23.76 15.3002 23.76 15.3292H24.76ZM24.2406 14.1904C23.8688 13.7483 23.3063 13.2405 22.5292 12.5423L21.8608 13.2861C22.6597 14.0039 23.1592 14.4581 23.4753 14.834L24.2406 14.1904ZM22.5294 12.5425L20.8324 11.0155L20.1635 11.7589L21.8605 13.2859L22.5294 12.5425ZM20.8321 11.0152C20.8077 10.9933 20.7878 10.9667 20.7736 10.9371L19.8714 11.3683C19.9422 11.5165 20.0416 11.6494 20.1639 11.7592L20.8321 11.0152ZM20.7736 10.9371C20.7594 10.9074 20.7513 10.8753 20.7495 10.8424L19.7509 10.8952C19.7596 11.0593 19.8005 11.22 19.8714 11.3683L20.7736 10.9371ZM20.7495 10.8424C20.7478 10.8096 20.7525 10.7768 20.7635 10.7458L19.8209 10.412C19.766 10.5669 19.7422 10.7311 19.7509 10.8952L20.7495 10.8424ZM20.7635 10.7458C20.7745 10.7148 20.7914 10.6863 20.8134 10.6619L20.0705 9.9925C19.9605 10.1146 19.8757 10.2571 19.8209 10.412L20.7635 10.7458ZM9.83656 11.7588C10.083 11.5369 10.2311 11.2262 10.2485 10.8951L9.24986 10.8428C9.24638 10.9091 9.21673 10.9712 9.16742 11.0156L9.83656 11.7588ZM10.2485 10.8951C10.2658 10.564 10.1509 10.2395 9.92905 9.99313L9.18593 10.6623C9.23033 10.7116 9.25333 10.7765 9.24986 10.8428L10.2485 10.8951ZM9.92905 9.99313C9.70718 9.74672 9.39651 9.59855 9.06539 9.5812L9.01308 10.5798C9.07935 10.5833 9.14152 10.613 9.18593 10.6623L9.92905 9.99313ZM9.06539 9.5812C8.73427 9.56386 8.40982 9.67876 8.16342 9.90064L8.83256 10.6438C8.88188 10.5994 8.94681 10.5764 9.01308 10.5798L9.06539 9.5812ZM8.16343 9.90063L6.42643 11.4646L7.09556 12.2078L8.83256 10.6438L8.16343 9.90063ZM6.42687 11.4642C5.69899 12.118 5.05904 12.6935 4.61177 13.2238L5.37621 13.8686C5.76894 13.4029 6.34899 12.8784 7.09511 12.2082L6.42687 11.4642ZM4.61078 13.225C4.1348 13.793 3.73999 14.4673 3.73999 15.3302H4.73999C4.73999 14.8011 4.97318 14.3494 5.3772 13.8674L4.61078 13.225ZM3.73999 15.3302C3.73999 16.1919 4.13356 16.8663 4.61144 17.4342L5.37654 16.7902C4.97242 16.3101 4.73999 15.8585 4.73999 15.3302H3.73999ZM4.61146 17.4342C5.05889 17.9658 5.69904 18.5414 6.42687 19.1952L7.09511 18.4512C6.34894 17.781 5.76909 17.2566 5.37653 16.7902L4.61146 17.4342ZM6.42643 19.1948L8.16343 20.7588L8.83256 20.0156L7.09556 18.4516L6.42643 19.1948ZM8.16342 20.7588C8.40982 20.9806 8.73427 21.0955 9.06539 21.0782L9.01308 20.0796C8.94681 20.083 8.88188 20.06 8.83256 20.0156L8.16342 20.7588ZM9.06539 21.0782C9.39651 21.0609 9.70718 20.9127 9.92905 20.6663L9.18593 19.9971C9.14152 20.0464 9.07935 20.0761 9.01308 20.0796L9.06539 21.0782ZM9.92905 20.6663C10.1509 20.4199 10.2658 20.0954 10.2485 19.7643L9.24986 19.8166C9.25333 19.8829 9.23033 19.9478 9.18593 19.9971L9.92905 20.6663ZM10.2485 19.7643C10.2311 19.4332 10.083 19.1225 9.83656 18.9006L9.16742 19.6438C9.21673 19.6882 9.24638 19.7503 9.24986 19.8166L10.2485 19.7643ZM9.83644 18.9005L8.13944 17.3735L7.47054 18.1169L9.16754 19.6439L9.83644 18.9005ZM8.13942 17.3735C7.34046 16.6546 6.84072 16.2002 6.52425 15.8249L5.75973 16.4695C6.13126 16.9102 6.69352 17.4178 7.47056 18.1169L8.13942 17.3735ZM6.5249 15.8257C6.23234 15.4773 6.23999 15.3594 6.23999 15.3292H5.23999C5.23999 15.691 5.39164 16.0311 5.75908 16.4687L6.5249 15.8257ZM6.23999 15.3292C6.23999 15.3002 6.23214 15.1824 6.5249 14.8337L5.75908 14.1907C5.39184 14.628 5.23999 14.9682 5.23999 15.3292H6.23999ZM6.52464 14.834C6.84082 14.4581 7.34032 14.0039 8.13916 13.2861L7.47082 12.5423C6.69366 13.2405 6.13116 13.7483 5.75934 14.1904L6.52464 14.834ZM8.13944 13.2859L9.83644 11.7589L9.16754 11.0155L7.47054 12.5425L8.13944 13.2859Z" fill="#949494" mask="url(#path-2-outside-1_506_993)"/>
+</svg>
diff --git a/src/assets/images/DevModeON.svg b/src/assets/images/DevModeON.svg
new file mode 100644
index 0000000..4f9141f
--- /dev/null
+++ b/src/assets/images/DevModeON.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="#5896C0"/>
+<mask id="path-2-outside-1_506_1005" maskUnits="userSpaceOnUse" x="3.23999" y="6.24951" width="24" height="18" fill="black">
+<rect fill="white" x="3.23999" y="6.24951" width="24" height="18"/>
+<path d="M17.18 7.2762C17.3721 7.32754 17.536 7.4531 17.6356 7.62525C17.7352 7.7974 17.7623 8.00205 17.711 8.1942L13.738 23.0242C13.6864 23.2165 13.5605 23.3804 13.3881 23.4799C13.2157 23.5794 13.0108 23.6063 12.8185 23.5547C12.6262 23.5031 12.4623 23.3773 12.3628 23.2048C12.2633 23.0324 12.2364 22.8275 12.288 22.6352L16.262 7.8052C16.2875 7.71005 16.3315 7.62085 16.3915 7.54272C16.4515 7.46458 16.5264 7.39903 16.6117 7.34981C16.697 7.3006 16.7912 7.26867 16.8889 7.25587C16.9866 7.24307 17.0858 7.24964 17.181 7.2752M20.443 10.3282C20.576 10.1804 20.7623 10.0914 20.9609 10.0809C21.1595 10.0704 21.3541 10.1392 21.502 10.2722L23.239 11.8362C23.976 12.4982 24.586 13.0482 25.006 13.5462C25.446 14.0712 25.76 14.6342 25.76 15.3302C25.76 16.0252 25.447 16.5882 25.006 17.1122C24.586 17.6112 23.976 18.1612 23.239 18.8232L21.502 20.3872C21.3541 20.5203 21.1594 20.5893 20.9607 20.5789C20.7621 20.5685 20.5756 20.4796 20.4425 20.3317C20.3094 20.1838 20.2404 19.9892 20.2508 19.7905C20.2612 19.5918 20.3501 19.4053 20.498 19.2722L22.195 17.7452C22.983 17.0362 23.514 16.5552 23.858 16.1472C24.188 15.7542 24.26 15.5252 24.26 15.3292C24.26 15.1342 24.188 14.9052 23.858 14.5122C23.514 14.1032 22.983 13.6222 22.195 12.9142L20.498 11.3872C20.4246 11.3213 20.365 11.2416 20.3225 11.1527C20.28 11.0637 20.2554 10.9673 20.2502 10.8688C20.245 10.7704 20.2593 10.6718 20.2922 10.5789C20.3251 10.486 20.376 10.4004 20.442 10.3272M9.50199 11.3872C9.64985 11.2541 9.73876 11.0676 9.74917 10.8689C9.75958 10.6702 9.69063 10.4756 9.55749 10.3277C9.42435 10.1798 9.23793 10.0909 9.03924 10.0805C8.84054 10.0701 8.64585 10.1391 8.49799 10.2722L6.76099 11.8362C6.02399 12.4982 5.41399 13.0482 4.99399 13.5462C4.55399 14.0712 4.23999 14.6342 4.23999 15.3302C4.23999 16.0252 4.55299 16.5882 4.99399 17.1122C5.41399 17.6112 6.02399 18.1612 6.76099 18.8232L8.49799 20.3872C8.64585 20.5203 8.84054 20.5893 9.03924 20.5789C9.23793 20.5685 9.42435 20.4796 9.55749 20.3317C9.69063 20.1838 9.75958 19.9892 9.74917 19.7905C9.73876 19.5918 9.64985 19.4053 9.50199 19.2722L7.80499 17.7452C7.01699 17.0362 6.48599 16.5552 6.14199 16.1472C5.81199 15.7542 5.73999 15.5252 5.73999 15.3292C5.73999 15.1342 5.81199 14.9052 6.14199 14.5122C6.48599 14.1032 7.01699 13.6222 7.80499 12.9142L9.50199 11.3872Z"/>
+</mask>
+<path d="M17.18 7.2762C17.3721 7.32754 17.536 7.4531 17.6356 7.62525C17.7352 7.7974 17.7623 8.00205 17.711 8.1942L13.738 23.0242C13.6864 23.2165 13.5605 23.3804 13.3881 23.4799C13.2157 23.5794 13.0108 23.6063 12.8185 23.5547C12.6262 23.5031 12.4623 23.3773 12.3628 23.2048C12.2633 23.0324 12.2364 22.8275 12.288 22.6352L16.262 7.8052C16.2875 7.71005 16.3315 7.62085 16.3915 7.54272C16.4515 7.46458 16.5264 7.39903 16.6117 7.34981C16.697 7.3006 16.7912 7.26867 16.8889 7.25587C16.9866 7.24307 17.0858 7.24964 17.181 7.2752M20.443 10.3282C20.576 10.1804 20.7623 10.0914 20.9609 10.0809C21.1595 10.0704 21.3541 10.1392 21.502 10.2722L23.239 11.8362C23.976 12.4982 24.586 13.0482 25.006 13.5462C25.446 14.0712 25.76 14.6342 25.76 15.3302C25.76 16.0252 25.447 16.5882 25.006 17.1122C24.586 17.6112 23.976 18.1612 23.239 18.8232L21.502 20.3872C21.3541 20.5203 21.1594 20.5893 20.9607 20.5789C20.7621 20.5685 20.5756 20.4796 20.4425 20.3317C20.3094 20.1838 20.2404 19.9892 20.2508 19.7905C20.2612 19.5918 20.3501 19.4053 20.498 19.2722L22.195 17.7452C22.983 17.0362 23.514 16.5552 23.858 16.1472C24.188 15.7542 24.26 15.5252 24.26 15.3292C24.26 15.1342 24.188 14.9052 23.858 14.5122C23.514 14.1032 22.983 13.6222 22.195 12.9142L20.498 11.3872C20.4246 11.3213 20.365 11.2416 20.3225 11.1527C20.28 11.0637 20.2554 10.9673 20.2502 10.8688C20.245 10.7704 20.2593 10.6718 20.2922 10.5789C20.3251 10.486 20.376 10.4004 20.442 10.3272M9.50199 11.3872C9.64985 11.2541 9.73876 11.0676 9.74917 10.8689C9.75958 10.6702 9.69063 10.4756 9.55749 10.3277C9.42435 10.1798 9.23793 10.0909 9.03924 10.0805C8.84054 10.0701 8.64585 10.1391 8.49799 10.2722L6.76099 11.8362C6.02399 12.4982 5.41399 13.0482 4.99399 13.5462C4.55399 14.0712 4.23999 14.6342 4.23999 15.3302C4.23999 16.0252 4.55299 16.5882 4.99399 17.1122C5.41399 17.6112 6.02399 18.1612 6.76099 18.8232L8.49799 20.3872C8.64585 20.5203 8.84054 20.5893 9.03924 20.5789C9.23793 20.5685 9.42435 20.4796 9.55749 20.3317C9.69063 20.1838 9.75958 19.9892 9.74917 19.7905C9.73876 19.5918 9.64985 19.4053 9.50199 19.2722L7.80499 17.7452C7.01699 17.0362 6.48599 16.5552 6.14199 16.1472C5.81199 15.7542 5.73999 15.5252 5.73999 15.3292C5.73999 15.1342 5.81199 14.9052 6.14199 14.5122C6.48599 14.1032 7.01699 13.6222 7.80499 12.9142L9.50199 11.3872Z" fill="white"/>
+<path d="M17.711 8.1942L18.194 8.32359L18.1941 8.32315L17.711 8.1942ZM13.738 23.0242L14.2209 23.1538L14.221 23.1536L13.738 23.0242ZM12.288 22.6352L12.7709 22.7648L12.771 22.7646L12.288 22.6352ZM16.262 7.8052L15.7791 7.67566L15.779 7.67578L16.262 7.8052ZM21.502 10.2722L21.8366 9.90063L21.8363 9.90041L21.502 10.2722ZM23.239 11.8362L22.9044 12.2078L22.9049 12.2082L23.239 11.8362ZM25.006 13.5462L25.3892 13.225L25.3882 13.2238L25.006 13.5462ZM25.006 17.1122L25.3885 17.4342L25.3885 17.4342L25.006 17.1122ZM23.239 18.8232L22.9049 18.4512L22.9044 18.4516L23.239 18.8232ZM21.502 20.3872L21.1674 20.0156L21.1674 20.0156L21.502 20.3872ZM20.498 19.2722L20.1635 18.9005L20.1634 18.9006L20.498 19.2722ZM22.195 17.7452L21.8606 17.3735L21.8605 17.3735L22.195 17.7452ZM23.858 16.1472L24.2403 16.4695L24.2409 16.4687L23.858 16.1472ZM23.858 14.5122L24.2409 14.1907L24.2406 14.1904L23.858 14.5122ZM22.195 12.9142L21.8605 13.2859L21.8608 13.2861L22.195 12.9142ZM20.498 11.3872L20.8324 11.0155L20.8321 11.0152L20.498 11.3872ZM9.50199 11.3872L9.83644 11.7589L9.83656 11.7588L9.50199 11.3872ZM8.49799 10.2722L8.83256 10.6438L8.83256 10.6438L8.49799 10.2722ZM6.76099 11.8362L7.09511 12.2082L7.09556 12.2078L6.76099 11.8362ZM4.99399 13.5462L4.61177 13.2238L4.61078 13.225L4.99399 13.5462ZM4.99399 17.1122L4.61144 17.4342L4.61146 17.4342L4.99399 17.1122ZM6.76099 18.8232L7.09556 18.4516L7.09511 18.4512L6.76099 18.8232ZM8.49799 20.3872L8.83256 20.0156L8.83256 20.0156L8.49799 20.3872ZM9.50199 19.2722L9.83656 18.9006L9.83644 18.9005L9.50199 19.2722ZM7.80499 17.7452L8.13944 17.3735L8.13942 17.3735L7.80499 17.7452ZM6.14199 16.1472L5.75908 16.4687L5.75973 16.4695L6.14199 16.1472ZM6.14199 14.5122L5.75934 14.1904L5.75908 14.1907L6.14199 14.5122ZM7.80499 12.9142L8.13916 13.2861L8.13944 13.2859L7.80499 12.9142ZM17.0509 7.75925C17.1149 7.77636 17.1696 7.81822 17.2028 7.8756L18.0684 7.3749C17.9024 7.08798 17.6293 6.87872 17.3091 6.79315L17.0509 7.75925ZM17.2028 7.8756C17.236 7.93298 17.245 8.0012 17.2279 8.06525L18.1941 8.32315C18.2796 8.0029 18.2343 7.66182 18.0684 7.3749L17.2028 7.8756ZM17.228 8.06481L13.255 22.8948L14.221 23.1536L18.194 8.32359L17.228 8.06481ZM13.2551 22.8946C13.2378 22.9588 13.1958 23.0136 13.1382 23.0468L13.638 23.913C13.9253 23.7472 14.135 23.4741 14.2209 23.1538L13.2551 22.8946ZM13.1382 23.0468C13.0807 23.08 13.0122 23.089 12.948 23.0718L12.6889 24.0376C13.0093 24.1236 13.3507 24.0787 13.638 23.913L13.1382 23.0468ZM12.948 23.0718C12.8838 23.0546 12.8291 23.0125 12.7959 22.955L11.9297 23.4547C12.0955 23.742 12.3686 23.9517 12.6889 24.0376L12.948 23.0718ZM12.7959 22.955C12.7627 22.8974 12.7537 22.829 12.7709 22.7648L11.8051 22.5056C11.7191 22.826 11.764 23.1674 11.9297 23.4547L12.7959 22.955ZM12.771 22.7646L16.745 7.93462L15.779 7.67578L11.805 22.5058L12.771 22.7646ZM16.7449 7.93474C16.7534 7.90302 16.7681 7.87329 16.7881 7.84725L15.995 7.23819C15.895 7.36841 15.8216 7.51707 15.7791 7.67566L16.7449 7.93474ZM16.7881 7.84725C16.8081 7.8212 16.833 7.79935 16.8615 7.78295L16.3619 6.91668C16.2197 6.99871 16.095 7.10796 15.995 7.23819L16.7881 7.84725ZM16.8615 7.78295C16.8899 7.76654 16.9213 7.7559 16.9539 7.75163L16.8239 6.76011C16.6611 6.78145 16.5041 6.83465 16.3619 6.91668L16.8615 7.78295ZM16.9539 7.75163C16.9865 7.74736 17.0195 7.74955 17.0513 7.75807L17.3107 6.79233C17.1522 6.74972 16.9867 6.73877 16.8239 6.76011L16.9539 7.75163ZM20.8147 10.6627C20.859 10.6134 20.9211 10.5837 20.9873 10.5802L20.9345 9.58162C20.6035 9.59913 20.293 9.74737 20.0713 9.99375L20.8147 10.6627ZM20.9873 10.5802C21.0535 10.5767 21.1184 10.5997 21.1677 10.644L21.8363 9.90041C21.5899 9.67879 21.2655 9.56412 20.9345 9.58162L20.9873 10.5802ZM21.1674 10.6438L22.9044 12.2078L23.5736 11.4646L21.8366 9.90063L21.1674 10.6438ZM22.9049 12.2082C23.651 12.8784 24.231 13.4029 24.6238 13.8686L25.3882 13.2238C24.9409 12.6935 24.301 12.118 23.5731 11.4642L22.9049 12.2082ZM24.6228 13.8674C25.0268 14.3494 25.26 14.8011 25.26 15.3302H26.26C26.26 14.4673 25.8652 13.793 25.3892 13.225L24.6228 13.8674ZM25.26 15.3302C25.26 15.8585 25.0276 16.3101 24.6234 16.7902L25.3885 17.4342C25.8664 16.8663 26.26 16.1919 26.26 15.3302H25.26ZM24.6235 16.7902C24.2309 17.2566 23.651 17.781 22.9049 18.4512L23.5731 19.1952C24.3009 18.5414 24.9411 17.9658 25.3885 17.4342L24.6235 16.7902ZM22.9044 18.4516L21.1674 20.0156L21.8366 20.7588L23.5736 19.1948L22.9044 18.4516ZM21.1674 20.0156C21.1181 20.06 21.0532 20.083 20.9869 20.0796L20.9346 21.0782C21.2657 21.0955 21.5902 20.9806 21.8366 20.7588L21.1674 20.0156ZM20.9869 20.0796C20.9206 20.0761 20.8585 20.0464 20.8141 19.9971L20.0709 20.6663C20.2928 20.9127 20.6035 21.0609 20.9346 21.0782L20.9869 20.0796ZM20.8141 19.9971C20.7696 19.9478 20.7467 19.8829 20.7501 19.8166L19.7515 19.7643C19.7341 20.0954 19.8491 20.4199 20.0709 20.6663L20.8141 19.9971ZM20.7501 19.8166C20.7536 19.7503 20.7833 19.6882 20.8326 19.6438L20.1634 18.9006C19.917 19.1225 19.7688 19.4332 19.7515 19.7643L20.7501 19.8166ZM20.8324 19.6439L22.5294 18.1169L21.8605 17.3735L20.1635 18.9005L20.8324 19.6439ZM22.5294 18.1169C23.3065 17.4178 23.8687 16.9102 24.2403 16.4695L23.4757 15.8249C23.1593 16.2002 22.6595 16.6546 21.8606 17.3735L22.5294 18.1169ZM24.2409 16.4687C24.6083 16.0311 24.76 15.691 24.76 15.3292H23.76C23.76 15.3594 23.7676 15.4773 23.4751 15.8257L24.2409 16.4687ZM24.76 15.3292C24.76 14.9682 24.6081 14.628 24.2409 14.1907L23.4751 14.8337C23.7678 15.1824 23.76 15.3002 23.76 15.3292H24.76ZM24.2406 14.1904C23.8688 13.7483 23.3063 13.2405 22.5292 12.5423L21.8608 13.2861C22.6597 14.0039 23.1592 14.4581 23.4753 14.834L24.2406 14.1904ZM22.5294 12.5425L20.8324 11.0155L20.1635 11.7589L21.8605 13.2859L22.5294 12.5425ZM20.8321 11.0152C20.8077 10.9933 20.7878 10.9667 20.7736 10.9371L19.8714 11.3683C19.9422 11.5165 20.0416 11.6494 20.1639 11.7592L20.8321 11.0152ZM20.7736 10.9371C20.7594 10.9074 20.7513 10.8753 20.7495 10.8424L19.7509 10.8952C19.7596 11.0593 19.8005 11.22 19.8714 11.3683L20.7736 10.9371ZM20.7495 10.8424C20.7478 10.8096 20.7525 10.7768 20.7635 10.7458L19.8209 10.412C19.766 10.5669 19.7422 10.7311 19.7509 10.8952L20.7495 10.8424ZM20.7635 10.7458C20.7745 10.7148 20.7914 10.6863 20.8134 10.6619L20.0705 9.9925C19.9605 10.1146 19.8757 10.2571 19.8209 10.412L20.7635 10.7458ZM9.83656 11.7588C10.083 11.5369 10.2311 11.2262 10.2485 10.8951L9.24986 10.8428C9.24638 10.9091 9.21673 10.9712 9.16742 11.0156L9.83656 11.7588ZM10.2485 10.8951C10.2658 10.564 10.1509 10.2395 9.92905 9.99313L9.18593 10.6623C9.23033 10.7116 9.25333 10.7765 9.24986 10.8428L10.2485 10.8951ZM9.92905 9.99313C9.70718 9.74672 9.39651 9.59855 9.06539 9.5812L9.01308 10.5798C9.07935 10.5833 9.14152 10.613 9.18593 10.6623L9.92905 9.99313ZM9.06539 9.5812C8.73427 9.56386 8.40982 9.67876 8.16342 9.90064L8.83256 10.6438C8.88188 10.5994 8.94681 10.5764 9.01308 10.5798L9.06539 9.5812ZM8.16343 9.90063L6.42643 11.4646L7.09556 12.2078L8.83256 10.6438L8.16343 9.90063ZM6.42687 11.4642C5.69899 12.118 5.05904 12.6935 4.61177 13.2238L5.37621 13.8686C5.76894 13.4029 6.34899 12.8784 7.09511 12.2082L6.42687 11.4642ZM4.61078 13.225C4.1348 13.793 3.73999 14.4673 3.73999 15.3302H4.73999C4.73999 14.8011 4.97318 14.3494 5.3772 13.8674L4.61078 13.225ZM3.73999 15.3302C3.73999 16.1919 4.13356 16.8663 4.61144 17.4342L5.37654 16.7902C4.97242 16.3101 4.73999 15.8585 4.73999 15.3302H3.73999ZM4.61146 17.4342C5.05889 17.9658 5.69904 18.5414 6.42687 19.1952L7.09511 18.4512C6.34894 17.781 5.76909 17.2566 5.37653 16.7902L4.61146 17.4342ZM6.42643 19.1948L8.16343 20.7588L8.83256 20.0156L7.09556 18.4516L6.42643 19.1948ZM8.16342 20.7588C8.40982 20.9806 8.73427 21.0955 9.06539 21.0782L9.01308 20.0796C8.94681 20.083 8.88188 20.06 8.83256 20.0156L8.16342 20.7588ZM9.06539 21.0782C9.39651 21.0609 9.70718 20.9127 9.92905 20.6663L9.18593 19.9971C9.14152 20.0464 9.07935 20.0761 9.01308 20.0796L9.06539 21.0782ZM9.92905 20.6663C10.1509 20.4199 10.2658 20.0954 10.2485 19.7643L9.24986 19.8166C9.25333 19.8829 9.23033 19.9478 9.18593 19.9971L9.92905 20.6663ZM10.2485 19.7643C10.2311 19.4332 10.083 19.1225 9.83656 18.9006L9.16742 19.6438C9.21673 19.6882 9.24638 19.7503 9.24986 19.8166L10.2485 19.7643ZM9.83644 18.9005L8.13944 17.3735L7.47054 18.1169L9.16754 19.6439L9.83644 18.9005ZM8.13942 17.3735C7.34046 16.6546 6.84072 16.2002 6.52425 15.8249L5.75973 16.4695C6.13126 16.9102 6.69352 17.4178 7.47056 18.1169L8.13942 17.3735ZM6.5249 15.8257C6.23234 15.4773 6.23999 15.3594 6.23999 15.3292H5.23999C5.23999 15.691 5.39164 16.0311 5.75908 16.4687L6.5249 15.8257ZM6.23999 15.3292C6.23999 15.3002 6.23214 15.1824 6.5249 14.8337L5.75908 14.1907C5.39184 14.628 5.23999 14.9682 5.23999 15.3292H6.23999ZM6.52464 14.834C6.84082 14.4581 7.34032 14.0039 8.13916 13.2861L7.47082 12.5423C6.69366 13.2405 6.13116 13.7483 5.75934 14.1904L6.52464 14.834ZM8.13944 13.2859L9.83644 11.7589L9.16754 11.0155L7.47054 12.5425L8.13944 13.2859Z" fill="white" mask="url(#path-2-outside-1_506_1005)"/>
+</svg>
diff --git a/src/assets/images/UserIcon.svg b/src/assets/images/UserIcon.svg
new file mode 100644
index 0000000..9c0829e
--- /dev/null
+++ b/src/assets/images/UserIcon.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="6" fill="#98C3B1"/>
+<path d="M21.1211 8.9375H24.3438V20.2695C24.3438 21.5742 24.0625 22.6719 23.5 23.5625C22.9375 24.4453 22.1719 25.1133 21.2031 25.5664C20.2344 26.0117 19.1328 26.2344 17.8984 26.2344C16.6484 26.2344 15.5352 26.0117 14.5586 25.5664C13.582 25.1133 12.8164 24.4453 12.2617 23.5625C11.707 22.6719 11.4297 21.5742 11.4297 20.2695V8.9375H14.6523V20.2695C14.6523 21.0664 14.7852 21.7188 15.0508 22.2266C15.3164 22.7266 15.6914 23.0977 16.1758 23.3398C16.6602 23.582 17.2344 23.7031 17.8984 23.7031C18.5703 23.7031 19.1445 23.582 19.6211 23.3398C20.1055 23.0977 20.4766 22.7266 20.7344 22.2266C20.9922 21.7188 21.1211 21.0664 21.1211 20.2695V8.9375Z" fill="white"/>
+</svg>
+
diff --git a/src/assets/images/authPage.png b/src/assets/images/authPage.png
new file mode 100644
index 0000000..5631e1e
Binary files /dev/null and b/src/assets/images/authPage.png differ
diff --git a/src/assets/images/goBackDark.svg b/src/assets/images/goBackDark.svg
new file mode 100644
index 0000000..445ad6b
--- /dev/null
+++ b/src/assets/images/goBackDark.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="19" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.302 11.15L9.3517 8.10173L9.35171 8.10171C9.5113 7.94213 9.60095 7.72568 9.60095 7.5C9.60095 7.27432 9.5113 7.05787 9.35171 6.89829C9.19213 6.73871 8.97569 6.64905 8.75 6.64905C8.52432 6.64905 8.30787 6.73871 8.14829 6.89829L3.64838 11.3982L6.302 11.15ZM6.302 11.15H14.75C14.9754 11.15 15.1916 11.2396 15.351 11.399C15.5104 11.5584 15.6 11.7746 15.6 12C15.6 12.2254 15.5104 12.4416 15.351 12.601C15.1916 12.7604 14.9754 12.85 14.75 12.85H6.302L9.3517 15.8983L9.35171 15.8983C9.5113 16.0579 9.60095 16.2743 9.60095 16.5C9.60095 16.7257 9.5113 16.9421 9.35171 17.1017C9.19213 17.2613 8.97569 17.3509 8.75 17.3509C8.52432 17.3509 8.30787 17.2613 8.14829 17.1017L3.64838 12.6018L6.302 11.15ZM3.46357 12.3258C3.5064 12.429 3.56918 12.5228 3.64829 12.6017L3.46357 12.3258ZM3.46357 12.3258C3.42072 12.2225 3.39866 12.1118 3.39866 12M3.46357 12.3258L3.39866 12M3.39866 12C3.39866 11.8882 3.42072 11.7775 3.46357 11.6742M3.39866 12L3.46357 11.6742M3.46357 11.6742C3.5064 11.571 3.56918 11.4772 3.64829 11.3983L3.46357 11.6742ZM19.851 22.351C19.6916 22.5104 19.4754 22.6 19.25 22.6C19.0246 22.6 18.8084 22.5104 18.649 22.351C18.4896 22.1916 18.4 21.9754 18.4 21.75V2.25C18.4 2.02457 18.4896 1.80837 18.649 1.64896C18.8084 1.48955 19.0246 1.4 19.25 1.4C19.4754 1.4 19.6916 1.48955 19.851 1.64896C20.0104 1.80837 20.1 2.02457 20.1 2.25V21.75C20.1 21.9754 20.0104 22.1916 19.851 22.351Z" fill="#737373" stroke="#737373" stroke-width="0.2"/>
+</svg>
+
diff --git a/src/assets/styles/core/base.scss b/src/assets/styles/core/base.scss
index f6f99f5..3004644 100644
--- a/src/assets/styles/core/base.scss
+++ b/src/assets/styles/core/base.scss
@@ -6,6 +6,11 @@ body,
height: 100%;
}
+#root {
+ width: 100%;
+ height: 100%;
+}
+
#content {
display: flex;
flex-direction: column;
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 7d1a576..9e82f56 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -2,6 +2,7 @@ import { Expandable, useBooleanState } from 'ostis-ui-lib';
import { FC, ReactNode } from 'react';
import ChevronDown from '@assets/images/chevronDown.svg';
import { IconButton } from '@components/IconButton';
+import { Tooltip } from '@components/ToolTip/ToolTip';
import { ChevronDownWrapper, ContentWrapper, HeaderWrapper, Icon, LeftContent } from './styled';
@@ -13,6 +14,7 @@ interface IProps {
className?: string;
expanded?: boolean;
isAutoControl?: boolean;
+ systemId: string;
onRightClick?: () => void;
onToggle?: (expanded: boolean) => void;
}
@@ -27,6 +29,7 @@ export const Accordion: FC<IProps> = ({
expanded: outerExpanded = true,
isAutoControl = true,
onRightClick,
+ systemId,
}) => {
const [expanded, , , onToggleExpanded] = useBooleanState(outerExpanded, {
updateable: true,
@@ -50,13 +53,15 @@ export const Accordion: FC<IProps> = ({
return (
<div className={className}>
<HeaderWrapper>
- <LeftContent onClick={onHeaderClick}>
- {leftIcon && <Icon>{leftIcon}</Icon>}
- {header}
- <ChevronDownWrapper expanded={expanded}>
- <ChevronDown width="24" height="24" />
- </ChevronDownWrapper>
- </LeftContent>
+ <Tooltip systemId={systemId}>
+ <LeftContent onClick={onHeaderClick}>
+ {leftIcon && <Icon>{leftIcon}</Icon>}
+ {header}
+ <ChevronDownWrapper expanded={expanded}>
+ <ChevronDown width="24" height="24" />
+ </ChevronDownWrapper>
+ </LeftContent>
+ </Tooltip>
{rightIcon && (
<IconButton squared={true} onClick={onIconBtnClick}>
{rightIcon}
diff --git a/src/components/ConfirmAction/ConfirmAction.tsx b/src/components/ConfirmAction/ConfirmAction.tsx
index bf5305c..9993bb8 100644
--- a/src/components/ConfirmAction/ConfirmAction.tsx
+++ b/src/components/ConfirmAction/ConfirmAction.tsx
@@ -11,7 +11,13 @@ interface IProps {
className?: string;
}
-export const ConfirmAction: FC<IProps> = ({ onComplete, onClose, title, content, completeBtnText = 'Подтвердить' }) => {
+export const ConfirmAction: FC<IProps> = ({
+ onComplete,
+ onClose,
+ title,
+ content,
+ completeBtnText = 'Подтвердить',
+}) => {
const onCompleteFunc = () => {
onComplete();
onClose();
diff --git a/src/components/DecompositionPanel/DecompositionPanel.tsx b/src/components/DecompositionPanel/DecompositionPanel.tsx
new file mode 100644
index 0000000..0ed5fb7
--- /dev/null
+++ b/src/components/DecompositionPanel/DecompositionPanel.tsx
@@ -0,0 +1,89 @@
+import { ChangeEvent, FC, KeyboardEvent, useRef } from 'react';
+import { useClickOutside } from 'ostis-ui-lib';
+
+import { NavigationList } from './components/NavigationList';
+import { Skeleton } from './components/Skeleton';
+import { TextAreaItem } from './components/TextAreaItem';
+import { Nav } from './styled';
+import { ITransformedDecomposition } from './types';
+import { useDecompositionContext } from 'ostis-ui-lib';
+
+const emptyArray: ITransformedDecomposition[] = [];
+
+interface IProps {
+ className?: string;
+ editable?: boolean;
+ deleteable?: boolean;
+}
+
+export const DecompositionPanel: FC<IProps> = ({
+ className,
+ editable = false,
+ deleteable = false,
+}) => {
+ const {
+ isMenuListLoading,
+ menuList,
+ isAddInputShow,
+ setIsAddInputShow,
+ addInputValue,
+ setAddInputValue,
+ onAdd,
+ onDelete,
+ } = useDecompositionContext();
+
+ const wrapperAddInputRef = useRef<HTMLDivElement>(null);
+
+ const onChangeAddInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+ setAddInputValue(e.target.value);
+ };
+
+ const onTextAreaAddKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+ if (e.key === 'Enter') {
+ saveAddItemValue();
+ }
+
+ if (e.key === 'Escape') {
+ setIsAddInputShow(false);
+ setAddInputValue('');
+ }
+ };
+
+ const saveAddItemValue = () => {
+ if (!menuList) return;
+
+ if (addInputValue.trim()) onAdd(menuList.id, addInputValue, Math.random());
+
+ setIsAddInputShow(false);
+ setAddInputValue('');
+ onDelete(1);
+ };
+
+ useClickOutside(wrapperAddInputRef, saveAddItemValue);
+
+ return (
+ <div className={className}>
+ <Nav>
+ {!isMenuListLoading && (
+ <NavigationList
+ data={menuList?.children || emptyArray}
+ editable={editable}
+ deleteable={deleteable}
+ >
+ <>
+ {isAddInputShow && (
+ <TextAreaItem
+ value={addInputValue}
+ onChange={onChangeAddInput}
+ onKeyDown={onTextAreaAddKeyDown}
+ wrapperTextareaRef={wrapperAddInputRef}
+ />
+ )}
+ </>
+ </NavigationList>
+ )}
+ {isMenuListLoading && <Skeleton />}
+ </Nav>
+ </div>
+ );
+};
diff --git a/src/components/DecompositionPanel/components/EditTextarea/EditTextarea.tsx b/src/components/DecompositionPanel/components/EditTextarea/EditTextarea.tsx
new file mode 100644
index 0000000..2b0c7d8
--- /dev/null
+++ b/src/components/DecompositionPanel/components/EditTextarea/EditTextarea.tsx
@@ -0,0 +1,52 @@
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { useClickOutside } from 'ostis-ui-lib';
+
+import { StyledTextarea } from './styled';
+
+interface IProps {
+ onClose: () => void;
+ onSave: (value: string) => void;
+ defaultValue: string;
+}
+
+export const EditTextarea = ({ defaultValue, onClose, onSave }: IProps) => {
+ const [editInputValue, setEditInputValue] = useState(defaultValue);
+
+ const wrapperEditInputRef = useRef<HTMLTextAreaElement>(null);
+
+ const saveEditItemValue = () => {
+ if (editInputValue.trim()) onSave(editInputValue);
+
+ onClose();
+ };
+
+ const onTextAreaEditKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+ if (e.key === 'Enter') {
+ saveEditItemValue();
+ }
+
+ if (e.key === 'Escape') onClose();
+ };
+
+ const onChangeEditInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+ setEditInputValue(e.target.value);
+ };
+
+ useEffect(() => {
+ if (wrapperEditInputRef.current) {
+ wrapperEditInputRef.current.selectionStart = wrapperEditInputRef.current.value.length;
+ }
+ }, []);
+
+ useClickOutside(wrapperEditInputRef, saveEditItemValue);
+
+ return (
+ <StyledTextarea
+ value={editInputValue}
+ onChange={onChangeEditInput}
+ onKeyDown={onTextAreaEditKeyDown}
+ ref={wrapperEditInputRef}
+ autoFocus
+ />
+ );
+};
diff --git a/src/components/DecompositionPanel/components/EditTextarea/index.tsx b/src/components/DecompositionPanel/components/EditTextarea/index.tsx
new file mode 100644
index 0000000..99bd6d4
--- /dev/null
+++ b/src/components/DecompositionPanel/components/EditTextarea/index.tsx
@@ -0,0 +1 @@
+export * from './EditTextarea';
diff --git a/src/components/DecompositionPanel/components/EditTextarea/styled.ts b/src/components/DecompositionPanel/components/EditTextarea/styled.ts
new file mode 100644
index 0000000..8883a31
--- /dev/null
+++ b/src/components/DecompositionPanel/components/EditTextarea/styled.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import { Textarea } from 'ostis-ui-lib';
+
+export const StyledTextarea = styled(Textarea)`
+ height: 28px;
+
+ overflow: hidden;
+`;
diff --git a/src/components/DecompositionPanel/components/NavigationList/NavigationList.tsx b/src/components/DecompositionPanel/components/NavigationList/NavigationList.tsx
new file mode 100644
index 0000000..0d31051
--- /dev/null
+++ b/src/components/DecompositionPanel/components/NavigationList/NavigationList.tsx
@@ -0,0 +1,215 @@
+import {
+ ChangeEvent,
+ KeyboardEvent,
+ memo,
+ PropsWithChildren,
+ ReactNode,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { useDecompositionContext } from 'ostis-ui-lib';
+import { ScLangText } from 'ostis-ui-lib';
+import { useClickOutside } from 'ostis-ui-lib';
+import { Tooltip } from '@components/ToolTip/ToolTip';
+
+import { ITransformedDecomposition } from '../../types';
+import { EditTextarea } from '../EditTextarea';
+import { Options } from '../Options';
+import { TextAreaItem } from '../TextAreaItem';
+
+import Point from './../../icons/point.svg';
+import Option from './options.svg';
+import {
+ ChildrenWrapper,
+ ItemContentWrapper,
+ OptionsBtnWrapper,
+ StyledArrowIcon,
+ StyledButtonWithIcon,
+ StyledScTagLink,
+} from './styled';
+
+interface INavigationListProps {
+ data: ITransformedDecomposition[];
+ children?: ReactNode;
+ deleteable: boolean;
+ editable: boolean;
+}
+
+export const NavigationListInner = ({
+ data,
+ children,
+ deleteable,
+ editable,
+}: PropsWithChildren<INavigationListProps>) => {
+ return (
+ <ul>
+ {data.map((item) => {
+ return (
+ <NavigationItem
+ key={item.id}
+ menuItem={item}
+ deleteable={deleteable}
+ editable={editable}
+ />
+ );
+ })}
+ {children}
+ </ul>
+ );
+};
+
+interface INavigationItemProps {
+ menuItem: ITransformedDecomposition;
+ editable: boolean;
+ deleteable: boolean;
+}
+
+const NavigationItem = ({ menuItem, editable, deleteable }: INavigationItemProps) => {
+ const [isOptionsOpen, setIsOptionsOpen] = useState(false);
+ const [isAddInputShow, setIsAddInputShow] = useState(false);
+ const [isEditInputShow, setIsEditInputShow] = useState(false);
+ const [addInputValue, setAddInputValue] = useState('');
+
+ const optionsWrapperRef = useRef<HTMLDivElement>(null);
+ const wrapperAddInputRef = useRef<HTMLDivElement>(null);
+
+ const { onToggle, onAdd, onEdit, onDelete } = useDecompositionContext();
+
+ useEffect(() => {
+ if (isAddInputShow) {
+ closeOptions();
+ }
+ }, [isAddInputShow]);
+
+ const onOptionsOpen = () => {
+ setIsOptionsOpen(!isOptionsOpen);
+ };
+
+ const onAddClick = () => {
+ onAdd(menuItem.id, '', 1);
+ setIsAddInputShow(true);
+ };
+
+ const onEditClick = () => {
+ setIsEditInputShow(true);
+ };
+
+ const closeOptions = () => {
+ setIsOptionsOpen(false);
+ };
+
+ const saveAddItemValue = () => {
+ if (addInputValue.trim()) onAdd(menuItem.id, addInputValue, Math.random());
+
+ setIsAddInputShow(false);
+ closeOptions();
+ setAddInputValue('');
+ onDelete(1);
+ };
+
+ const onChangeAddInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+ setAddInputValue(e.target.value);
+ };
+
+ const onTextAreaAddKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+ if (e.key === 'Enter') {
+ saveAddItemValue();
+ }
+
+ if (e.key === 'Escape') {
+ setIsAddInputShow(false);
+ closeOptions();
+ setAddInputValue('');
+ }
+ };
+
+ const onCloseEditTextarea = () => {
+ setIsEditInputShow(false);
+ closeOptions();
+ };
+
+ const onUpdateItemValue = (value: string) => {
+ onEdit(menuItem.id, value);
+ };
+
+ useClickOutside(optionsWrapperRef, closeOptions);
+ useClickOutside(wrapperAddInputRef, saveAddItemValue);
+
+ const renderItemText = (text: string) => (
+ <>
+ {!isEditInputShow && (
+ <StyledScTagLink addr={menuItem.id} appearance="transparent">
+ {text}
+ </StyledScTagLink>
+ )}
+ {isEditInputShow && (
+ <EditTextarea
+ defaultValue={text}
+ onClose={onCloseEditTextarea}
+ onSave={onUpdateItemValue}
+ />
+ )}
+ </>
+ );
+
+ return (
+ <>
+ {menuItem.title && (
+ <li>
+ <ItemContentWrapper isOptionsOpen={isOptionsOpen} isLoading={menuItem.isLoading}>
+ <StyledButtonWithIcon
+ marker={true}
+ onClick={() => onToggle(menuItem.id)}
+ disabled={!menuItem.children.length}
+ >
+ {menuItem.children.length ? (
+ <StyledArrowIcon expanded={menuItem.expanded} />
+ ) : (
+ <Point />
+ )}
+ </StyledButtonWithIcon>
+ <Tooltip commandAddr={menuItem.id}>
+ <ScLangText addrOrSystemId={menuItem.id} renderText={renderItemText} />
+ </Tooltip>
+
+ {editable && !isEditInputShow && (
+ <OptionsBtnWrapper ref={optionsWrapperRef}>
+ <StyledButtonWithIcon options className="optionsBtn" onClick={onOptionsOpen}>
+ <Option />
+ </StyledButtonWithIcon>
+ {isOptionsOpen && (
+ <Options
+ onAddClick={onAddClick}
+ onEditClick={onEditClick}
+ onDeleteClick={() => {
+ onDelete(menuItem.id);
+ closeOptions();
+ }}
+ deleteable={deleteable}
+ />
+ )}
+ </OptionsBtnWrapper>
+ )}
+ </ItemContentWrapper>
+ {menuItem.expanded && !!menuItem.children.length && (
+ <ChildrenWrapper>
+ <NavigationList data={menuItem.children} deleteable={deleteable} editable={editable}>
+ {isAddInputShow && (
+ <TextAreaItem
+ value={addInputValue}
+ onChange={onChangeAddInput}
+ onKeyDown={onTextAreaAddKeyDown}
+ wrapperTextareaRef={wrapperAddInputRef}
+ />
+ )}
+ </NavigationList>
+ </ChildrenWrapper>
+ )}
+ </li>
+ )}
+ </>
+ );
+};
+
+export const NavigationList = memo(NavigationListInner);
diff --git a/src/components/DecompositionPanel/components/NavigationList/index.tsx b/src/components/DecompositionPanel/components/NavigationList/index.tsx
new file mode 100644
index 0000000..ad0a38b
--- /dev/null
+++ b/src/components/DecompositionPanel/components/NavigationList/index.tsx
@@ -0,0 +1 @@
+export * from './NavigationList';
diff --git a/src/components/DecompositionPanel/components/NavigationList/options.svg b/src/components/DecompositionPanel/components/NavigationList/options.svg
new file mode 100644
index 0000000..60fb68a
--- /dev/null
+++ b/src/components/DecompositionPanel/components/NavigationList/options.svg
@@ -0,0 +1,5 @@
+<svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="2.00017" cy="2.29021" r="1.67742" fill="#BBBBBB"/>
+<circle cx="2.00017" cy="8.99993" r="1.67742" fill="#BBBBBB"/>
+<circle cx="2.00017" cy="15.7094" r="1.67742" fill="#BBBBBB"/>
+</svg>
diff --git a/src/components/DecompositionPanel/components/NavigationList/styled.ts b/src/components/DecompositionPanel/components/NavigationList/styled.ts
new file mode 100644
index 0000000..841d73a
--- /dev/null
+++ b/src/components/DecompositionPanel/components/NavigationList/styled.ts
@@ -0,0 +1,103 @@
+import { ButtonWithIcon } from 'ostis-ui-lib';
+import { ScTagLink } from 'ostis-ui-lib';
+import styled, { css, keyframes } from 'styled-components';
+
+import ArrowIcon from '../../icons/arrow.svg';
+
+export const rotate = keyframes`
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0.6;
+ }
+`;
+
+export const ItemContentWrapper = styled.div<{ isOptionsOpen: boolean; isLoading: boolean }>`
+ display: grid;
+ grid-template-columns: 26px 1fr 26px;
+ align-items: center;
+ grid-column-gap: 10px;
+
+ padding: 8px 3px 8px 0;
+
+ font-size: 20px;
+ line-height: 24px;
+ color: #323232;
+
+ word-break: break-word;
+
+ border-radius: 4px;
+
+ &:hover {
+ background: #f1f1f1;
+
+ .optionsBtn {
+ opacity: 1;
+ }
+ }
+
+ ${(props) =>
+ props.isOptionsOpen &&
+ css`
+ background: #f1f1f1;
+ opacity: 1;
+ `}
+
+ &isLoading {
+ animation-name: ${rotate};
+ }
+`;
+
+export const StyledButtonWithIcon = styled(ButtonWithIcon)<{ options?: boolean; marker?: boolean }>`
+ width: 24px;
+ height: 24px;
+
+ ${(props) =>
+ props.marker &&
+ css`
+ &:disabled {
+ cursor: unset;
+ }
+ `}
+
+ ${(props) =>
+ props.options &&
+ css`
+ border-radius: 41px;
+
+ opacity: 0;
+
+ &:hover {
+ background: #dedede;
+ }
+ `}
+`;
+
+export const StyledArrowIcon = styled(ArrowIcon)<{ expanded: boolean }>`
+ ${(props) =>
+ props.expanded &&
+ css`
+ transform: rotate(90deg);
+ `}
+`;
+
+export const OptionsBtnWrapper = styled.div`
+ position: relative;
+`;
+
+export const ChildrenWrapper = styled.div`
+ grid-column: 1/4;
+
+ padding: 12px 0 0 16px;
+ margin-bottom: 12px;
+`;
+
+export const StyledScTagLink = styled(ScTagLink)`
+ font-size: 20px;
+ line-height: 24px;
+
+ &::first-letter {
+ text-transform: uppercase;
+ }
+`;
diff --git a/src/components/DecompositionPanel/components/Options/Options.tsx b/src/components/DecompositionPanel/components/Options/Options.tsx
new file mode 100644
index 0000000..4406113
--- /dev/null
+++ b/src/components/DecompositionPanel/components/Options/Options.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { useTranslate } from 'ostis-ui-lib';
+
+import { StyledButtonWithIcon, Wrap } from './styled';
+
+interface IProps {
+ onAddClick: () => void;
+ onEditClick: () => void;
+ onDeleteClick: () => void;
+ deleteable: boolean;
+}
+
+export const Options: FC<IProps> = ({ onAddClick, onEditClick, onDeleteClick, deleteable }) => {
+ const translate = useTranslate();
+
+ return (
+ <Wrap>
+ <StyledButtonWithIcon onClick={onEditClick}>
+ {translate({ ru: 'Переименовать', en: 'Rename' })}
+ </StyledButtonWithIcon>
+ {deleteable && (
+ <StyledButtonWithIcon onClick={onDeleteClick}>
+ {translate({ ru: 'Удалить', en: 'Delete' })}
+ </StyledButtonWithIcon>
+ )}
+ <StyledButtonWithIcon onClick={onAddClick}>
+ {translate({ ru: 'Новый подраздел', en: 'New subsection' })}
+ </StyledButtonWithIcon>
+ </Wrap>
+ );
+};
diff --git a/src/components/DecompositionPanel/components/Options/index.tsx b/src/components/DecompositionPanel/components/Options/index.tsx
new file mode 100644
index 0000000..6e8a171
--- /dev/null
+++ b/src/components/DecompositionPanel/components/Options/index.tsx
@@ -0,0 +1 @@
+export * from './Options';
diff --git a/src/components/DecompositionPanel/components/Options/styled.ts b/src/components/DecompositionPanel/components/Options/styled.ts
new file mode 100644
index 0000000..a0fa88c
--- /dev/null
+++ b/src/components/DecompositionPanel/components/Options/styled.ts
@@ -0,0 +1,40 @@
+import { ButtonWithIcon } from 'ostis-ui-lib';
+import styled from 'styled-components';
+
+export const Wrap = styled.div`
+ position: absolute;
+ top: 100%;
+ right: 0;
+
+ min-width: 185px;
+
+ background: #ffffff;
+
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 10px;
+
+ z-index: 2;
+`;
+
+export const StyledButtonWithIcon = styled(ButtonWithIcon)`
+ width: 100%;
+
+ padding: 8px 16px;
+
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+ font-size: 18px;
+ line-height: 20px;
+
+ text-align: left;
+ white-space: nowrap;
+
+ &:hover {
+ background: #ececec;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+`;
diff --git a/src/components/DecompositionPanel/components/Skeleton/Skeleton.tsx b/src/components/DecompositionPanel/components/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000..8306fc1
--- /dev/null
+++ b/src/components/DecompositionPanel/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,28 @@
+import { PseudoText } from 'ostis-ui-lib';
+
+import { BallWrapper, Root, Wrap } from './styled';
+
+export const Skeleton = () => {
+ return (
+ <Root>
+ <Wrap>
+ <BallWrapper>
+ <PseudoText width={24} height={24} />
+ </BallWrapper>
+ <PseudoText width="100%" height={24} />
+ </Wrap>
+ <Wrap>
+ <BallWrapper>
+ <PseudoText width={24} height={24} />
+ </BallWrapper>
+ <PseudoText width="60%" height={24} />
+ </Wrap>
+ <Wrap>
+ <BallWrapper>
+ <PseudoText width={24} height={24} />
+ </BallWrapper>
+ <PseudoText width="80%" height={24} />
+ </Wrap>
+ </Root>
+ );
+};
diff --git a/src/components/DecompositionPanel/components/Skeleton/index.tsx b/src/components/DecompositionPanel/components/Skeleton/index.tsx
new file mode 100644
index 0000000..66bc08d
--- /dev/null
+++ b/src/components/DecompositionPanel/components/Skeleton/index.tsx
@@ -0,0 +1 @@
+export * from './Skeleton';
diff --git a/src/components/DecompositionPanel/components/Skeleton/styled.ts b/src/components/DecompositionPanel/components/Skeleton/styled.ts
new file mode 100644
index 0000000..f31d9b5
--- /dev/null
+++ b/src/components/DecompositionPanel/components/Skeleton/styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Root = styled.div`
+ display: flex;
+ flex-direction: column;
+ row-gap: 16px;
+
+ padding-top: 8px;
+`;
+
+export const Wrap = styled.div`
+ display: grid;
+ grid-template-columns: 40px 1fr;
+ align-items: center;
+ grid-column-gap: 10px;
+`;
+
+export const BallWrapper = styled.div`
+ display: flex;
+ justify-content: flex-end;
+`;
diff --git a/src/components/DecompositionPanel/components/TextAreaItem/TextAreaItem.tsx b/src/components/DecompositionPanel/components/TextAreaItem/TextAreaItem.tsx
new file mode 100644
index 0000000..ce12a4d
--- /dev/null
+++ b/src/components/DecompositionPanel/components/TextAreaItem/TextAreaItem.tsx
@@ -0,0 +1,20 @@
+import { ChangeEvent, FC, KeyboardEvent, RefObject } from 'react';
+
+import PointIcon from './../../icons/point.svg';
+import { StyledTextarea, Wrap } from './styled';
+
+interface IProps {
+ value: string;
+ wrapperTextareaRef: RefObject<HTMLDivElement>;
+ onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+ onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TextAreaItem: FC<IProps> = ({ value, wrapperTextareaRef, onChange, onKeyDown }) => {
+ return (
+ <Wrap ref={wrapperTextareaRef}>
+ <PointIcon />
+ <StyledTextarea value={value} onChange={onChange} onKeyDown={onKeyDown} autoFocus />
+ </Wrap>
+ );
+};
diff --git a/src/components/DecompositionPanel/components/TextAreaItem/index.tsx b/src/components/DecompositionPanel/components/TextAreaItem/index.tsx
new file mode 100644
index 0000000..4395f9f
--- /dev/null
+++ b/src/components/DecompositionPanel/components/TextAreaItem/index.tsx
@@ -0,0 +1 @@
+export * from './TextAreaItem';
diff --git a/src/components/DecompositionPanel/components/TextAreaItem/styled.ts b/src/components/DecompositionPanel/components/TextAreaItem/styled.ts
new file mode 100644
index 0000000..4f8445c
--- /dev/null
+++ b/src/components/DecompositionPanel/components/TextAreaItem/styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { Textarea } from 'ostis-ui-lib';
+
+export const Wrap = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ column-gap: 8px;
+
+ width: 100%;
+ min-height: 40px;
+
+ padding: 8px 0 8px 6px;
+`;
+
+export const StyledTextarea = styled(Textarea)`
+ height: 28px;
+
+ overflow: hidden;
+`;
diff --git a/src/components/DecompositionPanel/icons/arrow.svg b/src/components/DecompositionPanel/icons/arrow.svg
new file mode 100644
index 0000000..d4311a7
--- /dev/null
+++ b/src/components/DecompositionPanel/icons/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9166 6.49992L2.97913 11.1909V1.80895L11.9166 6.49992Z" fill="black"/>
+</svg>
diff --git a/src/components/DecompositionPanel/icons/point.svg b/src/components/DecompositionPanel/icons/point.svg
new file mode 100644
index 0000000..293811b
--- /dev/null
+++ b/src/components/DecompositionPanel/icons/point.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="4" fill="#272727"/>
+</svg>
diff --git a/src/components/DecompositionPanel/index.tsx b/src/components/DecompositionPanel/index.tsx
new file mode 100644
index 0000000..a84416d
--- /dev/null
+++ b/src/components/DecompositionPanel/index.tsx
@@ -0,0 +1 @@
+export * from './DecompositionPanel';
diff --git a/src/components/DecompositionPanel/styled.ts b/src/components/DecompositionPanel/styled.ts
new file mode 100644
index 0000000..6c5cf77
--- /dev/null
+++ b/src/components/DecompositionPanel/styled.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Nav = styled.nav`
+ margin-right: 0;
+`;
diff --git a/src/components/DecompositionPanel/types.ts b/src/components/DecompositionPanel/types.ts
new file mode 100644
index 0000000..848d752
--- /dev/null
+++ b/src/components/DecompositionPanel/types.ts
@@ -0,0 +1,51 @@
+export interface ITransformedDecomposition {
+ id: number;
+ title: string;
+ children: ITransformedDecomposition[];
+ expanded: boolean;
+ isLoading: boolean;
+}
+
+export type Decomposition = Record<
+ number,
+ {
+ idtf: string;
+ decomposition: Decomposition;
+ position: number;
+ }
+>;
+
+export interface IDecompositionItem {
+ sectionName: string;
+}
+
+export type TAddDecompositionItemCallBack = (
+ parentID: string,
+ data: IDecompositionItem,
+) => Promise<number | null>;
+
+export type TGetDecompositionCallback = () => Promise<Decomposition | null>;
+
+export type TEditDecompositionItemCallback = (id: number, value: string) => Promise<boolean | null>;
+
+export type TDeleteDecompositionItemCallback = (
+ parentID: string,
+ id: string,
+) => Promise<number | null>;
+
+export interface IDecompositionContext {
+ isMenuListLoading: boolean;
+ setIsMenuListLoading: React.Dispatch<React.SetStateAction<boolean>>;
+ menuList: ITransformedDecomposition | null;
+ setMenuList: React.Dispatch<React.SetStateAction<ITransformedDecomposition | null>>;
+ isAddInputShow: boolean;
+ setIsAddInputShow: React.Dispatch<React.SetStateAction<boolean>>;
+ addInputValue: string;
+ setAddInputValue: React.Dispatch<React.SetStateAction<string>>;
+ onToggle: (id: number) => void;
+ onToggleShowItem: (id: number) => void;
+ onAdd: (id: number, value: string, elemID: number) => Promise<void>;
+ onEdit: (id: number, value: string) => Promise<void>;
+ onDelete: (id: number) => Promise<void>;
+ onAddClick: () => void;
+}
diff --git a/src/components/DecompositionPanel/utils/dataTransform.ts b/src/components/DecompositionPanel/utils/dataTransform.ts
new file mode 100644
index 0000000..4fe9686
--- /dev/null
+++ b/src/components/DecompositionPanel/utils/dataTransform.ts
@@ -0,0 +1,15 @@
+import { Decomposition, ITransformedDecomposition } from '@model/model';
+
+export const dataTransform = (data: Decomposition): ITransformedDecomposition[] => {
+ return Object.entries(data)
+ .sort((left, right) => left[1].position - right[1].position)
+ .map(([key, value]) => {
+ return {
+ id: Number(key),
+ title: value.idtf,
+ children: value.decomposition ? dataTransform(value.decomposition) : [],
+ expanded: false,
+ isLoading: false,
+ };
+ });
+};
diff --git a/src/components/DecompositionPanel/utils/getElemPath.ts b/src/components/DecompositionPanel/utils/getElemPath.ts
new file mode 100644
index 0000000..7a84dd9
--- /dev/null
+++ b/src/components/DecompositionPanel/utils/getElemPath.ts
@@ -0,0 +1,54 @@
+import { ITransformedDecomposition } from '../types';
+
+const getElemPath = (tree: ITransformedDecomposition, id: number): number[] => {
+ if (tree.id === id) return [tree.id];
+
+ for (const elem of tree.children) {
+ const path = getElemPath(elem, id);
+ if (path.length) return [tree.id, ...path];
+ }
+ return [];
+};
+
+const updateByPath = (
+ tree: ITransformedDecomposition,
+ paths: number[],
+ id: number,
+ cb: (elem: ITransformedDecomposition) => ITransformedDecomposition,
+): ITransformedDecomposition => {
+ if (!paths.includes(tree.id)) return tree;
+
+ if (tree.id === id) return cb(tree);
+
+ const innerUpdated = tree.children.some((child) => paths.includes(child.id));
+ return {
+ ...tree,
+ children: innerUpdated
+ ? tree.children.map((child) => updateByPath(child, paths, id, cb))
+ : tree.children,
+ };
+};
+
+export const findParent = (
+ tree: ITransformedDecomposition,
+ id: number,
+): ITransformedDecomposition | null => {
+ if (tree.children.find((elem) => elem.id === id)) return tree;
+
+ for (const child of tree.children) {
+ const elem = findParent(child, id);
+
+ if (elem) return elem;
+ }
+
+ return null;
+};
+
+export const updateElem = (
+ tree: ITransformedDecomposition,
+ id: number,
+ cb: (elem: ITransformedDecomposition) => ITransformedDecomposition,
+) => {
+ const paths = getElemPath(tree, id);
+ return updateByPath(tree, paths, id, cb);
+};
diff --git a/src/components/DevModeSwitch/DevModeSwitch.module.scss b/src/components/DevModeSwitch/DevModeSwitch.module.scss
new file mode 100644
index 0000000..e251e80
--- /dev/null
+++ b/src/components/DevModeSwitch/DevModeSwitch.module.scss
@@ -0,0 +1,39 @@
+@import '~@assets/styles/variables/colors.scss';
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 69px;
+ height: 36px;
+}
+
+.switch input[type='checkbox'] {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.sliderRound {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: $popup-border;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ border-radius: 35px;
+}
+
+.switchIcon {
+ position: absolute;
+ left: 3px;
+ top: 3px;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+input:checked + .sliderRound .switchIcon {
+ left: 36px;
+}
diff --git a/src/components/DevModeSwitch/DevModeSwitch.tsx b/src/components/DevModeSwitch/DevModeSwitch.tsx
new file mode 100644
index 0000000..eff51c4
--- /dev/null
+++ b/src/components/DevModeSwitch/DevModeSwitch.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setDevMode } from '@store/devModeSlice';
+import styles from './DevModeSwitch.module.scss';
+import DevModeON from '@assets/images/DevModeON.svg';
+import DevModeOFF from '@assets/images/DevModeOFF.svg';
+
+export const DevModeSwitch = () => {
+ const dispatch = useDispatch();
+
+ const [checked, setChecked] = useState(() => {
+ const storedValue = localStorage.getItem('devMode');
+ return storedValue ? JSON.parse(storedValue) : false;
+ });
+
+ const handleChange = () => {
+ setChecked(!checked);
+ localStorage.setItem('devMode', JSON.stringify(!checked));
+ dispatch(setDevMode(!checked));
+ };
+
+ return (
+ <div className={styles.switch}>
+ <label className={styles.switchLabel}>
+ <input type="checkbox" checked={checked} onChange={handleChange} />
+ <span className={styles.sliderRound}>
+ {checked ? (
+ <DevModeON className={styles.switchIcon} />
+ ) : (
+ <DevModeOFF className={styles.switchIcon} />
+ )}
+ </span>
+ </label>
+ </div>
+ );
+};
diff --git a/src/components/DevModeSwitch/index.tsx b/src/components/DevModeSwitch/index.tsx
new file mode 100644
index 0000000..64e35ff
--- /dev/null
+++ b/src/components/DevModeSwitch/index.tsx
@@ -0,0 +1 @@
+export * from './DevModeSwitch';
diff --git a/src/components/HistoryPanel/HistoryPanel.tsx b/src/components/HistoryPanel/HistoryPanel.tsx
index 4229b80..bddacad 100644
--- a/src/components/HistoryPanel/HistoryPanel.tsx
+++ b/src/components/HistoryPanel/HistoryPanel.tsx
@@ -9,6 +9,8 @@ import styles from './HistoryPanel.module.scss';
import { Skeleton } from './Skeleton';
+import { Tooltip } from '@components/ToolTip/ToolTip';
+
interface IProps {
isLoading: boolean;
requests: IRequest[];
@@ -37,7 +39,9 @@ export const HistoryPanel = (props: IProps) => {
addr={question}
onClick={onBtnClick(String(question))}
>
- <ScLangText addrOrSystemId={question} defaultText={String(question)} />
+ <Tooltip commandAddr={question}>
+ <ScLangText addrOrSystemId={question} defaultText={String(question)} />
+ </Tooltip>
</ScTag>
))}
</div>
diff --git a/src/components/Language/Language.tsx b/src/components/Language/Language.tsx
index 8ecad36..1fd7f1c 100644
--- a/src/components/Language/Language.tsx
+++ b/src/components/Language/Language.tsx
@@ -1,9 +1,18 @@
import classNames from 'classnames';
import { TLanguage, useLanguageContext } from 'ostis-ui-lib';
+import { Tooltip } from '@components/ToolTip/ToolTip';
import styles from './language.module.scss';
+import { FC } from 'react';
-export const Language = () => {
+type HEXColor = `#${string}`;
+
+interface ILanguageProps {
+ primaryLanguageColor?: HEXColor;
+ secondaryLanguageColor?: HEXColor;
+}
+
+export const Language: FC<ILanguageProps> = ({ primaryLanguageColor, secondaryLanguageColor }) => {
const { lang, setLang } = useLanguageContext();
const setLanguage = (lang: TLanguage) => () => {
@@ -11,26 +20,35 @@ export const Language = () => {
setLang(lang);
};
+ const primaryLanguageStyle = primaryLanguageColor ? { color: primaryLanguageColor } : {};
+ const secondaryLanguageStyle = secondaryLanguageColor ? { color: secondaryLanguageColor } : {};
+
return (
<div className={styles.languageWrap}>
<div className={styles.languages}>
- <span
- className={classNames(styles.language, styles.engLanguage, {
- [styles.activeLanguage]: lang === 'en',
- })}
- onClick={setLanguage('en')}
- >
- En
- </span>
- <span className={styles.divider} />
- <span
- className={classNames(styles.language, styles.rusLanguage, {
- [styles.activeLanguage]: lang === 'ru',
- })}
- onClick={setLanguage('ru')}
- >
- Ru
- </span>
+ <Tooltip systemId="ui_english_language">
+ <span
+ className={classNames(styles.language, styles.engLanguage, {
+ [styles.activeLanguage]: lang === 'en',
+ })}
+ style={lang == 'en' ? primaryLanguageStyle : secondaryLanguageStyle}
+ onClick={setLanguage('en')}
+ >
+ En
+ </span>
+ </Tooltip>
+ <Tooltip systemId="ui_russian_language">
+ <span className={styles.divider} />
+ <span
+ className={classNames(styles.language, styles.rusLanguage, {
+ [styles.activeLanguage]: lang === 'ru',
+ })}
+ style={lang == 'ru' ? primaryLanguageStyle : secondaryLanguageStyle}
+ onClick={setLanguage('ru')}
+ >
+ Ru
+ </span>
+ </Tooltip>
</div>
</div>
);
diff --git a/src/components/Layout/AuthLayout/AuthLayout.module.scss b/src/components/Layout/AuthLayout/AuthLayout.module.scss
new file mode 100644
index 0000000..1cf925b
--- /dev/null
+++ b/src/components/Layout/AuthLayout/AuthLayout.module.scss
@@ -0,0 +1,84 @@
+@import '~@assets/styles/variables/colors.scss';
+
+.root {
+ background: $beige;
+ display: grid;
+ grid-template-columns: minmax(0, 463px) 1fr;
+ grid-template-rows: 80px 1fr;
+ grid-template-areas:
+ 'logo language'
+ 'main main';
+ min-height: 100vh;
+ min-width: 100vw;
+
+ .header {
+ display: flex;
+ z-index: 99;
+ align-items: center;
+ justify-content: flex-end;
+ grid-area: language;
+ width: 100%;
+ padding-right: 24px;
+ }
+
+ .logoWrapper {
+ height: 100px;
+ width: 100%;
+ grid-area: logo;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ background: $beige;
+ padding-left: 24px;
+ }
+
+ .main {
+ display: flex;
+ justify-content: start;
+ height: 100%;
+ width: 35%;
+ padding-top: 36px;
+ padding-left: 24px;
+ grid-area: main;
+ }
+
+ .authPageImage {
+ height: 100vh;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ z-index: 1;
+
+ @media (max-width: 1200px) {
+ display: none;
+ padding: 0;
+ }
+ }
+
+ .innerAuthPageImage {
+ height: 100%;
+ }
+
+ @media (max-width: 1200px) {
+ display: flex;
+ flex-direction: column;
+
+ .header {
+ position: absolute;
+ top: 20px;
+ right: 0px;
+ z-index: 1;
+ }
+
+ .main {
+ padding: 0;
+ width: 100%;
+ }
+ }
+}
+
+.languageWrapper {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+}
diff --git a/src/components/Layout/AuthLayout/AuthLayout.tsx b/src/components/Layout/AuthLayout/AuthLayout.tsx
new file mode 100644
index 0000000..40e6ac0
--- /dev/null
+++ b/src/components/Layout/AuthLayout/AuthLayout.tsx
@@ -0,0 +1,44 @@
+import { FC, ReactNode } from 'react';
+
+import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import Logo from '@assets/images/Logo.svg';
+
+import { Language } from '@components/Language';
+import { routes } from '@constants';
+import { setActiveLink } from '@store/activeLinkSlice';
+
+import AuthPageImage from '@assets/images/authPage.png';
+
+import styles from './AuthLayout.module.scss';
+
+export interface IProps {
+ children?: ReactNode;
+}
+export const AuthLayout: FC<IProps> = ({ children }) => {
+ const dispatch = useDispatch();
+
+ const handleLogoOnClick = () => {
+ dispatch(setActiveLink({ newActiveLink: routes.MAIN }));
+ };
+
+ return (
+ <div className={styles.root}>
+ <div className={styles.logoWrapper}>
+ <Link to={routes.MAIN} onClick={handleLogoOnClick}>
+ <Logo />
+ </Link>
+ </div>
+ <div className={styles.header}>
+ <div className={styles.languageWrapper}>
+ <Language primaryLanguageColor={'#F2F2F2'} secondaryLanguageColor={'#A5AEC4'} />
+ </div>
+ </div>
+ <main className={styles.main}>{children}</main>
+ <div className={styles.authPageImage}>
+ <img src={AuthPageImage} className={styles.innerAuthPageImage} />
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/Layout/AuthLayout/index.tsx b/src/components/Layout/AuthLayout/index.tsx
new file mode 100644
index 0000000..654e0e0
--- /dev/null
+++ b/src/components/Layout/AuthLayout/index.tsx
@@ -0,0 +1 @@
+export * from './AuthLayout';
diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
index 08d6904..3adda80 100644
--- a/src/components/Layout/Layout.module.scss
+++ b/src/components/Layout/Layout.module.scss
@@ -8,7 +8,7 @@
grid-template-rows: 80px 1fr;
grid-template-areas:
'logo header'
- 'sidebar scn';
+ 'sidebar scn';
min-height: 100%;
@@ -21,7 +21,7 @@
justify-content: end;
grid-area: header;
width: 100%;
- padding: 0px 24px 0 0;
+ padding: 0px 24px 0 0;
}
.sideBar {
@@ -50,8 +50,7 @@
.languageWrapper {
width: 100%;
- display: flex;
- justify-content: flex-end;
+ display: inline-block;
}
.sideBarContent {
@@ -70,3 +69,98 @@
grid-template-columns: minmax(0px, 25%) 1fr;
}
}
+
+.authHeaderButtonWrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 180px;
+ height: 42px;
+ gap: 32px;
+ margin-right: 50px;
+}
+
+.unauthHeaderButtonWrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 380px;
+ height: 42px;
+ gap: 32px;
+}
+
+.authWrapper {
+ padding: 10px;
+}
+
+.profileWrapper {
+ width: 108px;
+ height: 42px;
+ display: flex;
+ gap: 8px;
+}
+
+.profileWrapperWithLogout {
+ background: #f7f7f7;
+}
+
+.profileUsername {
+ text-align: center;
+ line-height: 36px;
+ padding-left: 5px;
+ font-family: Roboto;
+ font-size: 20px;
+ font-weight: 400;
+ text-align: left;
+}
+
+.logInButton {
+ width: 108px;
+ height: 42px;
+ color: $navy-blue;
+ cursor: pointer;
+ background: none;
+ border: none;
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 22px;
+ line-height: 26px;
+}
+
+.logInButton:hover {
+ background: $white;
+ border: 2px solid #dbdbdb;
+ border-radius: 10px;
+}
+
+.logoutWrapper {
+ display: flex;
+ position: absolute;
+ width: 128px;
+ top: 60px;
+ right: 25px;
+ z-index: 9999;
+ flex-direction: column;
+}
+
+.logoutButton {
+ display: block;
+ margin-top: 20px;
+ text-align: center;
+ background: #f7f7f7;
+ cursor: pointer;
+ border: none;
+ width: 127px;
+ height: 54px;
+ font-family: Roboto;
+ font-size: 22px;
+ font-weight: 400;
+ color: #737373;
+ line-height: 25.78px;
+ text-align: center;
+
+ &:hover {
+ background: #dbdbdb;
+ }
+}
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index a38b529..ce6db8c 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,15 +1,24 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useState } from 'react';
import { ScgPage } from '@components/ScgPage';
import { SidePanel } from '@components/SidePanel';
import { SidePanelWrapper } from '@components/SidePanelWrapper';
+import cn from 'classnames';
+
import styles from './Layout.module.scss';
import { Language } from '@components/Language';
-import { Link } from 'react-router-dom';
+import { DevModeSwitch } from '@components/DevModeSwitch';
+import { Link, useNavigate } from 'react-router-dom';
import Logo from '@assets/images/Logo.svg';
import { routes } from '@constants';
import { setActiveLink } from '@store/activeLinkSlice';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslate } from 'ostis-ui-lib';
+import { Tooltip } from '@components/ToolTip/ToolTip';
+import { selectAuth, setUsername } from '@store/authSlice';
+
+import UserIcon from '@assets/images/UserIcon.svg';
+import GoBackIcon from '@assets/images/goBackDark.svg';
export interface IProps {
children?: ReactNode;
@@ -17,21 +26,86 @@ export interface IProps {
export const Layout: FC<IProps> = ({ children }) => {
const dispatch = useDispatch();
+ const translate = useTranslate();
+ const navigate = useNavigate();
+
+ const [logout, setLogout] = useState<boolean>();
+
+ const username = useSelector(selectAuth);
const handleLogoOnClick = () => {
dispatch(setActiveLink({ newActiveLink: routes.MAIN }));
};
+ const handleLogInButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
+ evt.preventDefault();
+ return navigate(routes.AUTH);
+ };
+
+ const handleLogOutButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
+ evt.preventDefault();
+ dispatch(setUsername({ username: '' }));
+ };
+
return (
<div className={styles.root}>
<div className={styles.logoWrapper}>
<Link to={routes.MAIN} onClick={handleLogoOnClick}>
- <Logo />
+ <Tooltip systemId="ui_logo">
+ <Logo />
+ </Tooltip>
</Link>
</div>
<header className={styles.header}>
- <div className={styles.languageWrapper}>
- <Language />
+ <div
+ className={cn({
+ [styles.authHeaderButtonWrapper]: username != '',
+ [styles.unauthHeaderButtonWrapper]: username == '',
+ })}
+ >
+ <div>
+ <Tooltip systemId="ui_dev_mode">
+ <DevModeSwitch />
+ </Tooltip>
+ </div>
+ {username == '' ? (
+ <div className={styles.languageWrapper}>
+ <Language />
+ </div>
+ ) : (
+ <></>
+ )}
+ <div className={cn(styles.authWrapper, { [styles.profileWrapperWithLogout]: logout })}>
+ {username != '' ? (
+ <div className={styles.profileWrapper} onClick={() => setLogout(!logout)}>
+ <UserIcon />
+ <div className={styles.profileUsername}>{username}</div>
+ {logout ? (
+ <div
+ className={cn(styles.logoutWrapper, {
+ [styles.profileWrapperWithLogout]: logout,
+ })}
+ >
+ <div className={styles.languageWrapper}>
+ <Language />
+ <button className={styles.logoutButton} onClick={handleLogOutButtonClick}>
+ <GoBackIcon />
+ {translate({ ru: 'Выйти', en: 'Logout' })}
+ </button>
+ </div>
+ </div>
+ ) : (
+ <></>
+ )}
+ </div>
+ ) : (
+ <Tooltip systemId="ui_login">
+ <button className={styles.logInButton} onClick={handleLogInButtonClick}>
+ {translate({ ru: 'Войти', en: 'Login' })}
+ </button>
+ </Tooltip>
+ )}
+ </div>
</div>
</header>
<SidePanelWrapper>
diff --git a/src/components/Router/Router.tsx b/src/components/Router/Router.tsx
index 2545aa8..09e9466 100644
--- a/src/components/Router/Router.tsx
+++ b/src/components/Router/Router.tsx
@@ -5,6 +5,8 @@ import { routes, DEFAULT_COMMAND_PATH } from '@constants';
import { Command } from '@pages/Command';
import { Main } from '@pages/Main';
import { Question } from '@pages/Question';
+import { Auth } from '@pages/Auth';
+import { AuthLayout } from '@components/Layout/AuthLayout';
import { Library } from '@pages/Library'
export const Router = () => {
@@ -24,6 +26,14 @@ export const Router = () => {
<Route path={routes.QUESTION} element={<Question />} />
<Route path={routes.LIBRARY} element={<Library />} />
</Route>
+ <Route
+ path={routes.AUTH}
+ element={
+ <AuthLayout>
+ <Auth />
+ </AuthLayout>
+ }
+ />
</Routes>
</Suspense>
);
diff --git a/src/components/Scg/styled.ts b/src/components/Scg/styled.ts
index a07ee5b..93152d3 100644
--- a/src/components/Scg/styled.ts
+++ b/src/components/Scg/styled.ts
@@ -1,5 +1,5 @@
import { Spinner } from 'ostis-ui-lib';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
export const Wrap = styled.div<{ show?: boolean }>`
position: absolute;
@@ -29,15 +29,15 @@ export const Frame = styled.iframe`
border: 0;
`;
-export const Popup = styled.div<{ isClear?: boolean }>`
- width: ${(props) => (props.isClear ? '383px' : '344px')};
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- font-size: 18px;
- line-height: 21px;
- color: #323232;
- b {
- font-weight: 500;
- }
+export const Popup = styled.div<{ isClear?: boolean }>`
+ width: ${(props) => (props.isClear ? '383px' : '344px')};
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+ color: #323232;
+ b {
+ font-weight: 500;
+ }
`;
diff --git a/src/components/Scn/Scn.module.scss b/src/components/Scn/Scn.module.scss
index 0ad0909..535c99e 100644
--- a/src/components/Scn/Scn.module.scss
+++ b/src/components/Scn/Scn.module.scss
@@ -5,4 +5,4 @@
.container {
padding-right: 120px;
-}
\ No newline at end of file
+}
diff --git a/src/components/Scn/Scn.tsx b/src/components/Scn/Scn.tsx
index ecc3ea4..bab71e2 100644
--- a/src/components/Scn/Scn.tsx
+++ b/src/components/Scn/Scn.tsx
@@ -1,4 +1,5 @@
-import { IScnNode, Scn as ScnBase, useToast, useTranslate } from 'ostis-ui-lib';
+import { IScnNode, useToast, useTranslate } from 'ostis-ui-lib';
+import { Scn as ScnBase } from '@components/ScnBase';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router';
import { doCommand } from '@api/requests/command';
diff --git a/src/components/ScnBase/Scn.tsx b/src/components/ScnBase/Scn.tsx
new file mode 100644
index 0000000..d2cc6fb
--- /dev/null
+++ b/src/components/ScnBase/Scn.tsx
@@ -0,0 +1,57 @@
+import { ReactNode, useEffect, useMemo } from 'react';
+import { useInfiniteScroll } from 'ostis-ui-lib';
+
+import { ScnElement } from './components/ScnElement';
+import { ScnSkeleton } from './components/ScnSkeleton';
+import { IScnNode } from './model';
+import { ScnProvider, TOnAskQuestion } from './ScnContext';
+import { Inner, StyledScTag, Target } from './styled';
+
+const PAGE_SIZE = 25;
+
+interface IProps {
+ tree: IScnNode | null;
+ scgUrl: string;
+ isLoading?: boolean;
+ question: number;
+ renderRequestPanel?: (addr: number) => ReactNode;
+ onAskQuestion: TOnAskQuestion;
+ className?: string;
+}
+
+export const Scn = ({
+ isLoading,
+ tree,
+ scgUrl,
+ renderRequestPanel,
+ onAskQuestion,
+ question,
+ className,
+}: IProps) => {
+ const { page, scrollRef, targetRef } = useInfiniteScroll({
+ total: tree?.children?.length || 1,
+ pageSize: PAGE_SIZE,
+ });
+
+ useEffect(() => {
+ scrollRef.current?.scroll(0, 0);
+ }, []);
+
+ const partialTree = useMemo(() => {
+ if (!tree) return null;
+ return { ...tree, children: tree.children?.slice(0, page * PAGE_SIZE) };
+ }, [tree, page]);
+
+ return (
+ <ScnProvider onAskQuestion={onAskQuestion} scgUrl={scgUrl}>
+ <StyledScTag ref={scrollRef} addr={question} className={className}>
+ <Inner>
+ {isLoading && <ScnSkeleton />}
+ {partialTree && !isLoading && <ScnElement tree={partialTree} isRoot />}
+ {partialTree && renderRequestPanel && renderRequestPanel(partialTree.addr)}
+ <Target ref={targetRef} />
+ </Inner>
+ </StyledScTag>
+ </ScnProvider>
+ );
+};
diff --git a/src/components/ScnBase/ScnContext.tsx b/src/components/ScnBase/ScnContext.tsx
new file mode 100644
index 0000000..fd65074
--- /dev/null
+++ b/src/components/ScnBase/ScnContext.tsx
@@ -0,0 +1,16 @@
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+export type TOnAskQuestion = (addr: number) => number | null | Promise<number | null>;
+
+export interface IScnContext {
+ scgUrl: string;
+ onAskQuestion: TOnAskQuestion;
+}
+
+const SCnContext = createContext<IScnContext>({} as IScnContext);
+
+export const useScnContext = () => useContext(SCnContext);
+
+export const ScnProvider = ({ children, ...rest }: PropsWithChildren<IScnContext>) => {
+ return <SCnContext.Provider value={rest}>{children}</SCnContext.Provider>;
+};
diff --git a/src/components/ScnBase/ScnStory.tsx b/src/components/ScnBase/ScnStory.tsx
new file mode 100644
index 0000000..c361325
--- /dev/null
+++ b/src/components/ScnBase/ScnStory.tsx
@@ -0,0 +1,10 @@
+import { tree1 } from './mock';
+import { Scn } from './Scn';
+
+export const ScnStory = () => {
+ const onAskQuestion = () => {
+ return null;
+ };
+
+ return <Scn tree={tree1} question={11} scgUrl="" onAskQuestion={onAskQuestion} />;
+};
diff --git a/src/components/ScnBase/components/Nodes/Nodes.tsx b/src/components/ScnBase/components/Nodes/Nodes.tsx
new file mode 100644
index 0000000..ee986bd
--- /dev/null
+++ b/src/components/ScnBase/components/Nodes/Nodes.tsx
@@ -0,0 +1,80 @@
+import { FC, PropsWithChildren } from 'react';
+import { IScnNode } from '@components/ScnBase/model';
+import { ScType } from 'ts-sc-client';
+
+import { ScLink } from '../ScLink';
+import { ScnEdge } from '../ScnEdge';
+import { ScnLink } from '../ScnLink';
+
+import { KeywordLinkWrapper, LeftSide, StyledScnLink } from './styled';
+
+interface INodeProps {
+ tree: IScnNode;
+}
+
+const KeywordLinkNode: FC<INodeProps> = ({ tree }) => {
+ const { addr } = tree;
+ return (
+ <>
+ <StyledScnLink addr={addr} />
+ <KeywordLinkWrapper>
+ <LeftSide>=</LeftSide>
+ <LinkNode tree={tree} />
+ </KeywordLinkWrapper>
+ </>
+ );
+};
+
+// export const KeywordNode: FC<INodeProps> = ({ children, tree }) => {
+export const KeywordNode = ({ children, tree }: PropsWithChildren<INodeProps>) => {
+ const { addr, type } = tree;
+ const scType = new ScType(type);
+
+ const getComp = () => {
+ if (scType.isEdge()) return <ScnEdge node={tree} />;
+ if (scType.isLink()) return <KeywordLinkNode tree={tree} />;
+ return <StyledScnLink addr={addr} />;
+ };
+
+ return (
+ <>
+ {getComp()}
+ {children}
+ </>
+ );
+};
+
+export const LinkNode = ({
+ children,
+ tree: { addr, content, contentType },
+}: PropsWithChildren<INodeProps>) => (
+ <>
+ <ScLink addr={addr} content={content} contentType={contentType} />
+ {children}
+ </>
+);
+
+export const EdgeNode = ({ children, tree }: PropsWithChildren<INodeProps>) => (
+ <>
+ <ScnEdge node={tree} />
+ {children}
+ </>
+);
+
+export const TupleNode = ({ children, tree }: PropsWithChildren<INodeProps>) => {
+ if (!tree.children) return <ScnLink addr={tree.addr} />;
+ return (
+ <>
+ {
+ {children}
+ }
+ </>
+ );
+};
+
+export const SimpleNode = ({ tree: { addr }, children }: PropsWithChildren<INodeProps>) => (
+ <>
+ <ScnLink addr={addr} />
+ {children}
+ </>
+);
diff --git a/src/components/ScnBase/components/Nodes/index.tsx b/src/components/ScnBase/components/Nodes/index.tsx
new file mode 100644
index 0000000..c315d19
--- /dev/null
+++ b/src/components/ScnBase/components/Nodes/index.tsx
@@ -0,0 +1 @@
+export * from './Nodes';
diff --git a/src/components/ScnBase/components/Nodes/styled.ts b/src/components/ScnBase/components/Nodes/styled.ts
new file mode 100644
index 0000000..93c3cd6
--- /dev/null
+++ b/src/components/ScnBase/components/Nodes/styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { ScnLink } from '../ScnLink';
+
+export const StyledScnLink = styled(ScnLink)`
+ font-weight: 500;
+ line-height: 26px;
+ font-size: 22px;
+`;
+
+export const KeywordLinkWrapper = styled.div`
+ display: flex;
+`;
+
+export const LeftSide = styled.span`
+ width: 20px;
+
+ color: #2a6496;
+
+ flex-shrink: 0;
+`;
diff --git a/src/components/ScnBase/components/ScLink/ScLink.tsx b/src/components/ScnBase/components/ScLink/ScLink.tsx
new file mode 100644
index 0000000..cc9a287
--- /dev/null
+++ b/src/components/ScnBase/components/ScLink/ScLink.tsx
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useClient } from 'ostis-ui-lib';
+import { TLinkFormat } from '@components/ScnBase/model';
+import { useInView } from 'ostis-ui-lib';
+import { ScAddr } from 'ts-sc-client';
+
+import { voidElements } from './constants';
+import { StyledScnLink, StyledScTag, StyledScTagLink } from './styled';
+import { useDifferedLinkContent } from './useDifferedLinkContent';
+import { Tooltip } from 'ostis-ui-lib';
+
+interface IProps {
+ addr: number;
+ contentType?: TLinkFormat | null;
+ content?: string | null;
+}
+
+interface IHtmlNodeToReactProps {
+ node: ChildNode;
+}
+
+// const nodeAttributesToObject = (node: HTMLElement) => {
+// if (!node.hasAttributes()) return {};
+// return Array.from(node.attributes).reduce((acc, curr) => {
+// if(curr.name === "style") {
+// console.log(node)
+// return acc;
+// }
+// return {
+// ...acc,
+// [curr.name]: curr.value,
+// };
+// }, {});
+// };
+
+const HtmlNodeToReact = ({ node }: IHtmlNodeToReactProps) => {
+ if (node instanceof Text) return <>{node.textContent}</>;
+ if (node.nodeName === 'SC_ELEMENT') {
+ const systemId =
+ (node as HTMLElement).attributes.getNamedItem('sys_idtf')?.nodeValue || undefined;
+ return <StyledScnLink systemId={systemId} />;
+ }
+ if (!(node instanceof HTMLElement)) return null;
+
+ const isVoidElem = voidElements.includes(node.nodeName.toLowerCase());
+ const Tag = node.nodeName.toLowerCase() as keyof JSX.IntrinsicElements;
+
+ if (isVoidElem) return <Tag />;
+
+ return (
+ <Tag>
+ {Array.from(node.childNodes).map((childNode, ind) => (
+ <HtmlNodeToReact key={ind} node={childNode} />
+ ))}
+ </Tag>
+ );
+};
+
+const ScLinkHtml = ({ addr }: IProps) => {
+ const [contentHtml, setContentHtml] = useState<ChildNode | null>(null);
+ const [targetRef, isInView] = useInView();
+ const client = useClient();
+
+ const parseHtml = useCallback(async () => {
+ const [{ data }] = await client.getLinkContents([new ScAddr(addr)]);
+
+ if (!data) return;
+ const parser = new DOMParser();
+ const dom = parser.parseFromString(String(data).trim(), 'text/html');
+ const contentHtmlObject = dom.querySelector('body') as HTMLElement;
+ setContentHtml(contentHtmlObject || null);
+ }, [addr, client]);
+
+ useEffect(() => {
+ if (isInView) {
+ parseHtml();
+ }
+ }, [parseHtml, isInView]);
+
+ return (
+ <StyledScTag isHTML addr={addr}>
+ {contentHtml &&
+ Array.from(contentHtml.childNodes).map((childNode, ind) => (
+ <HtmlNodeToReact key={ind} node={childNode} />
+ ))}
+ {!contentHtml && <span ref={targetRef} />}
+ </StyledScTag>
+ );
+};
+
+const ScLinkContent = ({ addr, contentType }: IProps) => {
+ const { content, targetRef } = useDifferedLinkContent(addr);
+
+ if (contentType === 'format_html') {
+ return <ScLinkHtml addr={addr} />;
+ }
+
+ return (
+ <Tooltip title={content}>
+ <StyledScTag forwardedAs="span" addr={addr}>
+ {content && contentType === 'format_png' && (
+ <img src={`data:image/png;base64,${content}`} />
+ )}
+ {contentType !== 'format_png' && <>{content}</>}
+ {!content && <span ref={targetRef} />}
+ </StyledScTag>
+ </Tooltip>
+ );
+};
+
+export const ScLink = ({ addr, contentType }: IProps) => {
+ return (
+ <StyledScTagLink appearance="transparent" addr={addr}>
+ <ScLinkContent addr={addr} contentType={contentType} />
+ </StyledScTagLink>
+ );
+};
diff --git a/src/components/ScnBase/components/ScLink/constants.ts b/src/components/ScnBase/components/ScLink/constants.ts
new file mode 100644
index 0000000..59b2c6e
--- /dev/null
+++ b/src/components/ScnBase/components/ScLink/constants.ts
@@ -0,0 +1,25 @@
+export const voidElements = [
+ 'area',
+ 'base',
+ 'basefont',
+ 'bgsound',
+ 'br',
+ 'col',
+ 'command',
+ 'embed',
+ 'frame',
+ 'hr',
+ 'image',
+ 'img',
+ 'input',
+ 'isindex',
+ 'keygen',
+ 'link',
+ 'menuitem',
+ 'meta',
+ 'nextid',
+ 'param',
+ 'source',
+ 'track',
+ 'wbr',
+];
diff --git a/src/components/ScnBase/components/ScLink/index.tsx b/src/components/ScnBase/components/ScLink/index.tsx
new file mode 100644
index 0000000..43cc3ad
--- /dev/null
+++ b/src/components/ScnBase/components/ScLink/index.tsx
@@ -0,0 +1 @@
+export * from './ScLink';
diff --git a/src/components/ScnBase/components/ScLink/styled.ts b/src/components/ScnBase/components/ScLink/styled.ts
new file mode 100644
index 0000000..61474dd
--- /dev/null
+++ b/src/components/ScnBase/components/ScLink/styled.ts
@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+
+import { ScTag, ScTagLink } from 'ostis-ui-lib';
+import { ScnLink } from '../ScnLink';
+
+export const StyledScTag = styled(ScTag)<{ isHTML?: boolean }>`
+ display: flex;
+ gap: 2px;
+
+ padding: 8px;
+
+ font-size: 18px;
+ line-height: 21px;
+ color: #000000;
+
+ ${(props) =>
+ props.isHTML &&
+ css`
+ display: block;
+
+ p:first-of-type {
+ margin-top: 0;
+ }
+ `}
+`;
+
+export const StyledScTagLink = styled(ScTagLink)`
+ display: block;
+
+ text-decoration: none;
+
+ box-shadow: inset 0 0 0 1px #d8d8d8;
+
+ background: linear-gradient(135deg, #d9d9d9 12px, transparent 12px);
+
+ transition: all ease 0.15s;
+
+ width: fit-content;
+
+ word-break: break-word;
+
+ &:hover {
+ background-color: #ededed;
+
+ opacity: 1;
+ }
+
+ &:active {
+ box-shadow: inset 0 0 0 3px #d8d8d8;
+ }
+`;
+
+export const StyledScnLink = styled(ScnLink)`
+ display: inline;
+`;
diff --git a/src/components/ScnBase/components/ScLink/useDifferedLinkContent.ts b/src/components/ScnBase/components/ScLink/useDifferedLinkContent.ts
new file mode 100644
index 0000000..154c70e
--- /dev/null
+++ b/src/components/ScnBase/components/ScLink/useDifferedLinkContent.ts
@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useClient } from 'ostis-ui-lib';
+import { useInView } from 'ostis-ui-lib';
+import { ScAddr } from 'ts-sc-client';
+
+export const useDifferedLinkContent = (addr: number) => {
+ const [content, setContent] = useState<string | null>(null);
+ const [targetRef, isInView] = useInView();
+ const client = useClient();
+
+ const getBase64 = useCallback(async () => {
+ const [{ data }] = await client.getLinkContents([new ScAddr(addr)]);
+ if (!data) return;
+ setContent(String(data).trim());
+ }, [addr, client]);
+
+ useEffect(() => {
+ if (isInView) {
+ getBase64();
+ }
+ }, [getBase64, isInView]);
+
+ return { content, targetRef };
+};
diff --git a/src/components/ScnBase/components/ScStruct/styled.ts b/src/components/ScnBase/components/ScStruct/styled.ts
new file mode 100644
index 0000000..cdab53a
--- /dev/null
+++ b/src/components/ScnBase/components/ScStruct/styled.ts
@@ -0,0 +1,47 @@
+import { Scg } from 'ostis-ui-lib';
+import { Spinner } from 'ostis-ui-lib';
+import { SwitchScgScn } from '@components/SwitchScgScn';
+import styled, { css } from 'styled-components';
+
+export const Struct = styled.div<{ isScg?: boolean }>`
+ border: solid 1px #96a399;
+
+ background-color: #fdfdfd;
+
+ padding: 8px;
+
+ border-radius: 8px;
+
+ width: 100%;
+
+ position: relative;
+
+ overflow: hidden;
+
+ ${({ isScg }) =>
+ isScg &&
+ css`
+ padding: 0;
+ `}
+`;
+
+export const StyledSwitchScgScn = styled(SwitchScgScn)`
+ top: 8px !important;
+`;
+
+export const StyledScg = styled(Scg)`
+ position: relative;
+
+ min-height: 1024px;
+
+ iframe {
+ margin: 0 !important;
+ }
+`;
+
+export const StyledSpinner = styled(Spinner)`
+ position: absolute;
+ left: 50%;
+ top: 20px;
+ transform: translateX(-50%);
+`;
diff --git a/src/components/ScnBase/components/ScnEdge/ScnEdge.tsx b/src/components/ScnBase/components/ScnEdge/ScnEdge.tsx
new file mode 100644
index 0000000..1ddb232
--- /dev/null
+++ b/src/components/ScnBase/components/ScnEdge/ScnEdge.tsx
@@ -0,0 +1,30 @@
+import { IScnNode } from 'ostis-ui-lib';
+import { getRandomInt } from 'ostis-ui-lib';
+
+import { arcMap } from '../../constants';
+import { ScnLink } from '../ScnLink';
+
+import { EdgeInner, EdgeWrapper, StyledScTagLink } from './styled';
+
+interface IProps {
+ className?: string;
+ node: IScnNode;
+}
+
+export const ScnEdge = ({ node: { addr, type, sourceNode, targetNode } }: IProps) => {
+ if (!sourceNode || !targetNode) return null;
+
+ return (
+ <EdgeWrapper>
+ (
+ <EdgeInner>
+ <ScnLink addr={sourceNode.addr} loaderWidth={getRandomInt(40, 80)} />
+ <StyledScTagLink addr={addr} forwardedAs="span">
+ {arcMap[type].right}
+ </StyledScTagLink>
+ <ScnLink addr={targetNode.addr} loaderWidth={getRandomInt(40, 80)} />
+ </EdgeInner>
+ )
+ </EdgeWrapper>
+ );
+};
diff --git a/src/components/ScnBase/components/ScnEdge/index.tsx b/src/components/ScnBase/components/ScnEdge/index.tsx
new file mode 100644
index 0000000..21656f1
--- /dev/null
+++ b/src/components/ScnBase/components/ScnEdge/index.tsx
@@ -0,0 +1 @@
+export * from './ScnEdge';
diff --git a/src/components/ScnBase/components/ScnEdge/styled.ts b/src/components/ScnBase/components/ScnEdge/styled.ts
new file mode 100644
index 0000000..d189d40
--- /dev/null
+++ b/src/components/ScnBase/components/ScnEdge/styled.ts
@@ -0,0 +1,16 @@
+import { ScTagLink } from 'ostis-ui-lib';
+import styled from 'styled-components';
+
+export const EdgeWrapper = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+export const EdgeInner = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+export const StyledScTagLink = styled(ScTagLink)`
+ margin: 0 4px;
+`;
diff --git a/src/components/ScnBase/components/ScnElement/ScnElement.tsx b/src/components/ScnBase/components/ScnElement/ScnElement.tsx
new file mode 100644
index 0000000..e7434c6
--- /dev/null
+++ b/src/components/ScnBase/components/ScnElement/ScnElement.tsx
@@ -0,0 +1,186 @@
+import { Fragment, memo, PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { useClient } from 'ostis-ui-lib';
+import { useLanguage } from 'ostis-ui-lib';
+import { IScnNode } from '@components/ScnBase/model';
+import { useScnContext } from '@components/ScnBase/ScnContext';
+import { useScUtils } from 'ostis-ui-lib';
+import { TScLanguageTab } from 'ostis-ui-lib';
+import { langToKeynode } from 'ostis-ui-lib';
+import { snakeToCamelCase } from 'ostis-ui-lib';
+import { ScAddr, ScTemplate, ScType } from 'ts-sc-client';
+
+import { arcMap } from '../../constants';
+import { EdgeNode, KeywordNode, LinkNode, SimpleNode, TupleNode } from '../Nodes';
+import { ScnLink } from '../ScnLink';
+import { Struct, StyledScg, StyledSpinner, StyledSwitchScgScn } from '../ScStruct/styled';
+
+import {
+ Arc,
+ Child,
+ LinkedNodes,
+ Marker,
+ Modifier,
+ RightSide,
+ StyledLinkedNode,
+ Wrapper,
+} from './styled';
+import { getRandomInt } from 'ostis-ui-lib';
+
+const SPINER_COLOR = '#5896C0';
+
+interface IProps {
+ tree: IScnNode;
+ isLoading?: boolean;
+ isRoot?: boolean;
+}
+
+interface IModifierArcProps {
+ type: number;
+}
+
+const ModifierArc = ({ type }: IModifierArcProps) => {
+ const scType = new ScType(type);
+ if (scType.isConst()) return <>:</>;
+ return <>::</>;
+};
+
+const ScStruct = ({ tree }: IProps) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [question, setQuestion] = useState<number | null>(null);
+ const [tab, setTab] = useState<TScLanguageTab>('scn');
+
+ const { onAskQuestion, scgUrl } = useScnContext();
+
+ const getQuestion = useCallback(async () => {
+ setIsLoading(true);
+ const question = await onAskQuestion(tree.addr);
+ setIsLoading(false);
+ setQuestion(question);
+ }, [onAskQuestion, tree.addr]);
+
+ useEffect(() => {
+ getQuestion();
+ }, [getQuestion]);
+
+ const showScg = tab === 'scg';
+ const renderScg = showScg && !!question && !isLoading;
+ return (
+ <Struct isScg={showScg}>
+ <StyledSwitchScgScn tab={tab} onTabClick={setTab} />
+ {!showScg && <ScnElement tree={tree} isRoot />}
+ <StyledScg url={scgUrl} question={question || undefined} show={renderScg} readonly />
+ {showScg && isLoading && <StyledSpinner appearance={SPINER_COLOR} />}
+ </Struct>
+ );
+};
+
+interface ILinkedNodeProps {
+ node: IScnNode;
+ showMarker?: boolean;
+}
+
+const LinkedNode = ({ node, showMarker }: PropsWithChildren<ILinkedNodeProps>) => {
+ const [show, setShow] = useState(true);
+
+ const lang = useLanguage();
+ const client = useClient();
+ const { findKeynodes } = useScUtils();
+
+ const scType = new ScType(node.type);
+
+ const isLink = scType.isLink();
+
+ useEffect(() => {
+ if (!isLink) return setShow(true);
+
+ (async () => {
+ const { languages, ...rest } = await findKeynodes('languages', langToKeynode[lang]);
+
+ const activeLangKeynode = rest[snakeToCamelCase(langToKeynode[lang])];
+
+ const template = new ScTemplate();
+
+ const langAlias = '_lang';
+
+ template.triple(languages, ScType.EdgeAccessVarPosPerm, [ScType.NodeVarClass, langAlias]);
+ template.triple(langAlias, ScType.EdgeAccessVarPosPerm, new ScAddr(node.addr));
+ const result = await client.templateSearch(template);
+ if (!result.length) return setShow(true);
+ const foundLang = result[0].get(langAlias);
+ setShow(foundLang.value === activeLangKeynode.value);
+ })();
+ }, [client, findKeynodes, isLink, lang, node.addr]);
+
+ if (!show) return null;
+
+ return (
+ <StyledLinkedNode>
+ {showMarker && <Marker />}
+ <ScnElement tree={node} />
+ </StyledLinkedNode>
+ );
+};
+
+const ScnElementWrapper = ({ tree, isRoot = false }: IProps) => {
+ const { children, type, struct } = tree;
+ const scType = new ScType(type);
+
+ const getNode = () => {
+ if (isRoot) return KeywordNode;
+ if (scType.isLink()) return LinkNode;
+ if (scType.isEdge()) return EdgeNode;
+ if (scType.isTuple()) return TupleNode;
+ return SimpleNode;
+ };
+ const Node = getNode();
+
+ const isTuple = scType.isTuple();
+
+ return (
+ <Wrapper>
+ <Node tree={tree}>
+ {children?.map(({ arcs: [arc], modifiers, linkedNodes }) => (
+ <Child key={arc.addr}>
+ {!isTuple && <Arc>{arcMap[arc.type]?.[arc.direction]}</Arc>}
+ {isTuple && <Marker />}
+ <RightSide>
+ {modifiers && (
+ <Modifier>
+ {modifiers.map((modifier) => (
+ <Fragment key={`${arc.addr}${modifier.addr}`}>
+ <ScnLink
+ addr={modifier.addr}
+ loaderHeight={18}
+ loaderWidth={`${getRandomInt(20, 60)}%`}
+ />
+ <ModifierArc type={modifier.modifierArcs[0].type} />
+ </Fragment>
+ ))}
+ </Modifier>
+ )}
+ <LinkedNodes>
+ {linkedNodes.map((linkedNode, linkedNodeInd) => (
+ <LinkedNode
+ key={`${linkedNode.addr}.${linkedNodeInd}`}
+ showMarker={linkedNodes.length > 1}
+ node={linkedNode}
+ />
+ ))}
+ </LinkedNodes>
+ </RightSide>
+ </Child>
+ ))}
+ {struct && (
+ <Child>
+ <Arc>=</Arc>
+ <RightSide>
+ <ScStruct tree={struct} />
+ </RightSide>
+ </Child>
+ )}
+ </Node>
+ </Wrapper>
+ );
+};
+
+export const ScnElement = memo(ScnElementWrapper);
diff --git a/src/components/ScnBase/components/ScnElement/index.tsx b/src/components/ScnBase/components/ScnElement/index.tsx
new file mode 100644
index 0000000..f5cc2c3
--- /dev/null
+++ b/src/components/ScnBase/components/ScnElement/index.tsx
@@ -0,0 +1 @@
+export * from './ScnElement';
diff --git a/src/components/ScnBase/components/ScnElement/styled.ts b/src/components/ScnBase/components/ScnElement/styled.ts
new file mode 100644
index 0000000..93a6d50
--- /dev/null
+++ b/src/components/ScnBase/components/ScnElement/styled.ts
@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+export const StyledLinkedNode = styled.div`
+ display: flex;
+`;
+
+export const Marker = styled.div`
+ flex-shrink: 0;
+
+ width: 8px;
+ height: 8px;
+
+ border-radius: 50%;
+
+ background-color: #2a6496;
+
+ margin-right: 15px;
+ margin-top: 6px;
+`;
+
+export const Wrapper = styled.div`
+ font-family: 'Roboto';
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+ flex-grow: 1;
+`;
+
+export const Child = styled.div`
+ display: flex;
+
+ width: 100%;
+`;
+
+export const Arc = styled.div`
+ width: 20px;
+
+ color: #2a6496;
+
+ flex-shrink: 0;
+ align-self: flex-start;
+
+ font-family: 'Unicode Symbols', 'Times New Roman', 'Apple Symbols', 'Arial Unicode MS';
+`;
+
+export const RightSide = styled.div`
+ flex-grow: 1;
+`;
+
+export const Modifier = styled.div`
+ display: flex;
+ align-items: center;
+
+ margin-bottom: 6px;
+`;
+
+export const LinkedNodes = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
diff --git a/src/components/ScnBase/components/ScnLink/ScnLink.tsx b/src/components/ScnBase/components/ScnLink/ScnLink.tsx
new file mode 100644
index 0000000..0e255e0
--- /dev/null
+++ b/src/components/ScnBase/components/ScnLink/ScnLink.tsx
@@ -0,0 +1,39 @@
+import { ScLangText } from 'ostis-ui-lib';
+import { ScTagLink } from 'ostis-ui-lib';
+import { PseudoText } from 'ostis-ui-lib';
+import { useState } from 'react';
+import { Tooltip } from '@components/ToolTip/ToolTip';
+
+export interface IScTagLinkProps {
+ className?: string;
+ addr?: number;
+ systemId?: string;
+ loaderHeight?: number | string;
+ loaderWidth?: number | string;
+}
+
+export const ScnLink = ({
+ addr,
+ systemId,
+ loaderHeight,
+ loaderWidth,
+ className,
+}: IScTagLinkProps) => {
+ const [isLoad, setIsLoad] = useState(true);
+
+ return (
+ <>
+ {isLoad && <PseudoText height={loaderHeight} width={loaderWidth} />}
+ <ScTagLink className={className} addr={addr} systemId={systemId} as="span">
+ <Tooltip commandAddr={addr}>
+ <ScLangText
+ addrOrSystemId={addr || (systemId as string)}
+ loaderHeight={loaderHeight}
+ loaderWidth={loaderWidth}
+ setIsLoad={setIsLoad}
+ />
+ </Tooltip>
+ </ScTagLink>
+ </>
+ );
+};
diff --git a/src/components/ScnBase/components/ScnLink/index.tsx b/src/components/ScnBase/components/ScnLink/index.tsx
new file mode 100644
index 0000000..8dc9c75
--- /dev/null
+++ b/src/components/ScnBase/components/ScnLink/index.tsx
@@ -0,0 +1 @@
+export * from './ScnLink';
diff --git a/src/components/ScnBase/components/ScnSkeleton/ScnSkeleton.tsx b/src/components/ScnBase/components/ScnSkeleton/ScnSkeleton.tsx
new file mode 100644
index 0000000..00f1bc1
--- /dev/null
+++ b/src/components/ScnBase/components/ScnSkeleton/ScnSkeleton.tsx
@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { getRandomInt } from 'ostis-ui-lib';
+import { nanoid } from 'nanoid';
+
+import { Child, Item, RightSide, StyledSkeleton, Wrapper } from './styled';
+
+interface ITree {
+ id: string;
+ isLink?: boolean;
+ modifier?: string;
+ children?: ITree[];
+}
+
+const initialTree: ITree = {
+ id: nanoid(5),
+ children: [
+ {
+ id: nanoid(5),
+ modifier: nanoid(5),
+ children: [{ id: nanoid(5) }],
+ },
+ {
+ id: nanoid(5),
+ modifier: nanoid(5),
+ children: [{ id: nanoid(5) }, { id: nanoid(5), isLink: true }],
+ },
+ {
+ id: nanoid(5),
+ children: [{ id: nanoid(5) }],
+ },
+ {
+ id: nanoid(5),
+ children: [{ id: nanoid(5) }],
+ },
+ {
+ id: nanoid(5),
+ modifier: nanoid(5),
+ children: [{ id: nanoid(5), isLink: true }, { id: nanoid(5) }, { id: nanoid(5) }],
+ },
+ ],
+};
+
+interface ISkeletonItemProps {
+ tree: ITree;
+}
+
+const SkeletonItem = ({ tree }: ISkeletonItemProps) => (
+ <Item>
+ <StyledSkeleton isArc width={16} height={16} />
+ <RightSide>
+ {tree.modifier && <StyledSkeleton isMdifier width={getRandomInt(200, 400)} height={22} />}
+ <Wrapper>
+ {tree.children?.map((child) => (
+ <Child key={child.id}>
+ {(tree.children?.length || 0) > 1 && <StyledSkeleton isArc width={16} height={16} />}
+ <StyledSkeleton width={`${getRandomInt(30, 80)}%`} height={child.isLink ? 70 : 22} />
+ </Child>
+ ))}
+ </Wrapper>
+ </RightSide>
+ </Item>
+);
+
+const ScnSkeletonWrapper = () => (
+ <Wrapper>
+ <StyledSkeleton height={26} width={getRandomInt(250, 350)} />
+ {initialTree.children?.map((child) => <SkeletonItem key={child.id} tree={child} />)}
+ </Wrapper>
+);
+
+export const ScnSkeleton = memo(ScnSkeletonWrapper);
diff --git a/src/components/ScnBase/components/ScnSkeleton/index.tsx b/src/components/ScnBase/components/ScnSkeleton/index.tsx
new file mode 100644
index 0000000..8c95e38
--- /dev/null
+++ b/src/components/ScnBase/components/ScnSkeleton/index.tsx
@@ -0,0 +1 @@
+export * from './ScnSkeleton';
diff --git a/src/components/ScnBase/components/ScnSkeleton/styled.ts b/src/components/ScnBase/components/ScnSkeleton/styled.ts
new file mode 100644
index 0000000..471b6f4
--- /dev/null
+++ b/src/components/ScnBase/components/ScnSkeleton/styled.ts
@@ -0,0 +1,38 @@
+import { Skeleton } from 'ostis-ui-lib';
+import styled, { css } from 'styled-components';
+
+export const Item = styled.div`
+ display: flex;
+ gap: 4px;
+`;
+
+export const RightSide = styled.div`
+ width: 100%;
+`;
+
+export const StyledSkeleton = styled(Skeleton)<{ isArc?: boolean; isMdifier?: boolean }>`
+ ${({ isArc }) =>
+ isArc &&
+ css`
+ flex-shrink: 0;
+
+ margin-top: 4px;
+ `}
+
+ ${({ isMdifier }) =>
+ isMdifier &&
+ css`
+ margin-bottom: 6px;
+ `}
+`;
+
+export const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+export const Child = styled.div`
+ display: flex;
+ gap: 4px;
+`;
diff --git a/src/components/ScnBase/constants.ts b/src/components/ScnBase/constants.ts
new file mode 100644
index 0000000..f8333cd
--- /dev/null
+++ b/src/components/ScnBase/constants.ts
@@ -0,0 +1,23 @@
+import { ScType } from 'ts-sc-client';
+
+export const arcMap = {
+ [ScType.EdgeUCommon.value]: { right: '↔', left: '↔' },
+ [ScType.EdgeDCommon.value]: { right: '→', left: '←' },
+ [ScType.EdgeAccess.value]: { right: '..∍', left: '∊..' },
+ [ScType.EdgeUCommonConst.value]: { right: '⇔', left: '⇔' },
+ [ScType.EdgeUCommonVar.value]: { right: '⇐⇒', left: '⇐⇒' },
+ [ScType.EdgeDCommonConst.value]: { right: '⇒', left: '⇐' },
+ [ScType.EdgeDCommonVar.value]: { right: '_⇒', left: '_⇐' },
+ [ScType.EdgeAccessConstPosPerm.value]: { right: '∍', left: '∊' },
+ [ScType.EdgeAccessConstNegPerm.value]: { right: '∌', left: '∉' },
+ [ScType.EdgeAccessConstFuzPerm.value]: { right: '/∍', left: '∊/' },
+ [ScType.EdgeAccessConstPosTemp.value]: { right: '~∍', left: '∊~' },
+ [ScType.EdgeAccessConstNegTemp.value]: { right: '~∌', left: '∉~' },
+ [ScType.EdgeAccessConstFuzTemp.value]: { right: '~/∍', left: '∊/~' },
+ [ScType.EdgeAccessVarPosPerm.value]: { right: '_∍', left: '_∊' },
+ [ScType.EdgeAccessVarNegPerm.value]: { right: '_∌', left: '_∉' },
+ [ScType.EdgeAccessVarFuzPerm.value]: { right: '_/∍', left: '_∊/' },
+ [ScType.EdgeAccessVarPosTemp.value]: { right: '_~∍', left: '_∊~' },
+ [ScType.EdgeAccessVarNegTemp.value]: { right: '_~∌', left: '_∉~' },
+ [ScType.EdgeAccessVarFuzTemp.value]: { right: '_~/∍', left: '_∊/~' },
+};
diff --git a/src/components/ScnBase/index.tsx b/src/components/ScnBase/index.tsx
new file mode 100644
index 0000000..46f6bc7
--- /dev/null
+++ b/src/components/ScnBase/index.tsx
@@ -0,0 +1,2 @@
+export * from './Scn';
+export * from './constants';
diff --git a/src/components/ScnBase/mock/constants.ts b/src/components/ScnBase/mock/constants.ts
new file mode 100644
index 0000000..add7142
--- /dev/null
+++ b/src/components/ScnBase/mock/constants.ts
@@ -0,0 +1,3 @@
+export const html = `<p><b><sc_element sys_idtf = "rrel_maximum_studied_object_class">максимальный класс объектов исследования’</sc_element></b> – это <sc_element sys_idtf = "role_relation">ролевое отношение</sc_element>, указывающее в рамках <sc_element sys_idtf = "subject_domain">предметной области</sc_element> на множество, являющееся максимальным классом объектов исследования данной предметной области, то есть на такое <sc_element sys_idtf = "rrel_explored_concept">исследуемое понятие’</sc_element>, для которого в рамках данной предметной области не существует другого <sc_element sys_idtf = "rrel_explored_concept">исследуемого понятия'</sc_element>, которое бы являлось надмножеством для данного.</p>`;
+export const image1 =
+ 'iVBORw0KGgoAAAANSUhEUgAAAPkAAAB9CAYAAABgbsVeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAECNJREFUeJzt3HtQVPX/BvDnLJflIrI6A3mJXW1Qx9+AqKmNrBBi6ag4fa0ZzAuJFpdxnNQam2issbLInBo1rYkc88Zo9YeVIUqTCrjkdMELoCaYul5CXXAXE1yEff/+gNDj7sIuwh72w/s1szOds/s5+8x2nnNHiYgIjDFhqZQOwBjrXlxyxgTHJWdMcFxyxgTHJX/AxYsXsWrVKowfPx59+vSBSqXCgAEDMGvWLOzYsQNWq1XpiA6dOnUKy5YtQ1RUFAICAuDj44OIiAgkJydj7969aG5uVjqiQ0SEI0eOIDU1FUOHDoVKpYJKpYJOp8OCBQtQUFAAvi7cBYhRfX09rVixgnx9fQmA05dOp6P9+/crHbeNyWSiuXPntpsZAEVHR9OxY8eUjitz/vx5SkxM7DC7Xq+nM2fOKB3Xq/X6kl+/fp3Gjh3b4cr24GvNmjVks9kUzX3mzBnSarUuZ/b19aWvv/5a0cz/KSoqIo1G43L2Pn360MGDB5WO7bV6dclv375No0aNcrpySZLk9L1169YplttoNNLAgQM7lfubb75RLDcRUWlpKQUHB7u1UQVAarWajh49qmh2b9WrS7548WK7lWnhwoVkMBiovr6ebDYbVVdX044dO2jkyJGyz6lUKiopKfF45ubmZoqLi5Nl8fPzo+XLl1NpaSlZrVZqbm4mo9FImzdvpsGDB8s+GxwcTOfPn/d4bqKW06LIyEi7vfTq1avpzJkzdO/ePWpqaqJz587Rhx9+aLe3Hzx4MJnNZkWye7NeW/I///zTrrTffvut0883NDRQUlKSbMyECRM8fti+Z88eWYagoCAqLi52+vmamhoaN26cbExycrIHE9+XnZ0tyzFgwAA6e/as08///fffdqckWVlZHkwshl5b8pdeekm28rz++usdjjGbzRQeHi4b9+uvv3og7X0TJ06Uff+mTZs6HHPhwgVSq9WyDdqVK1c8kPa+pqYmu6OK/Pz8DscVFxfLxvTr14/u3r3rgcTi6JUlt9ls1L9/f9nKYzQaXRr75ptvysa99dZb3Zz2vps3b9od6tbX17s09sUXX5SNzcnJ6ea0cn/88Yfs+0eMGOHyUdDDRyKHDh3q5rRi6ZX3ya9du4ba2tq26YiICERERLg0Vq/Xy6ZPnTrVpdnaU1ZWJpseM2YMAgMDXRqrZG5H3xcbGwtJklwaq3R2b9crS15XVyeb1mg0Lo/t16+fbNpisXRJJld4a27Au7N7u15Z8odXsJqaGpfHmkwm2fTDK2B3evi7Hjwa6YiSuR19n7f85iLolSUfMGAAwsPD26avXbuG8+fPuzS2sLBQNj169Oguzdae6Oho2SFuaWkp/v33X5fGKpkbAGJiYmTTxcXFLj2ySkSKZ/d6Sl8UUEpaWprsYk5GRkaHY27cuGF377a0tNQDae9LSEiQff9HH33U4ZjTp0+Tj49P2xhfX1+qrq72QNr7bDYbDR06VJb9u+++63Bcfn6+bEx4eDg1NjZ6ILE4em3Jy8vL7Z4M++KLL5x+/tatWxQfHy/7fEJCggcTt/jxxx/tHoTZt2+f089fvnzZ7kGe1NRUDya+b+PGjbIcGo2GfvvtN6efP3XqlN0tyzVr1ngwsRh6bcmJiF599VW7J95mzJhBP/zwA125coVu3bpFFRUV9Omnn9rd4/Xz86MTJ054PLPNZqPp06fb5V6wYAH9/PPP9M8//1BtbS2VlpbSu+++a3fkodFo6OrVqx7PTURktVrtHiP28/OjpUuXUnFxMd24cYNMJhOVlJTQa6+9Jru3D4AiIyPpzp07imT3Zr265A0NDRQbG2tXGFdenr7P/KAbN27QE0884XZmHx8fxf+K7q+//rJ7RsGVV0hIiCIbVRH06pITtRyGP3ye21FRNm/erHRsunTpkt1heHuvwMBA2rt3r9KxiYjoxIkTNGjQIJezh4WFefzJQpH0+pITETU2NtL7779PQUFB7a5s0dHRZDAYnCzFTOvTdhHSyqjSQ7lv375NS5culV1Uc/SKi4ujiooKxwu5VEaxk3cREnYRJheTp/bz169ft3sKz9Fr9uzZ7TyC2/qbJ3j2d/c2EhH/0xv/uXnzJnbu3IkDBw7g7NmzuHPnDsLDwzF+/HgkJydjxowZUKkc3HU0HIW06lLLf0+NA2VpPZr74sWL2L59O3755RdUVlbi3r17GDRoECZOnIh58+YhPj7eydNlRmSk12FlThQijeXQp55EybOezV9RUYHt27ejsLAQFy5cABFBp9MhPj4eKSkpGDNmjNOx+dl5ODd/JpahJTvSkmCYG+qx7N6CS95VjN6+olmwIf0nLB/q+Y3UozMiI7EY5V7723evXvkwzKOo2p0H/W5Ly947MQ8bjK1vXDajhIAobc9cyZzmbmPB6SogPb7nFbyj7FW7y5ADHVZxwR3ikrvDcBTDcsyI0lqQ8fYlAKEY3tqJKqMFkDT4P9f+zsWz2sn9n/zsYuRExmCl3uESlOMsu7Ec+sRcSJNzsRCTQIcmYbrSWXsoX6UDeBW9FumSBSiqw/8OzceXD7xVedEMRMZgZs/bEbabGwBgOIoZiAPl9MDwzrJro2A4FIWq3XkYlvMTpIveeJrhGbwnd8JiscBkMqGxsfH+TIMROWRG+ZCIh/YaFpy7AGBoX0R6NqadW7duwWQyoamp6f5Mp7mB/OxcSEVaUJYW+bvLUeXRtHImkwkmk0n+THs72QEgcu4krB/msYheiUvuxPz58xEWFoaCgoK2eS2H5A7O/YyX8W0VEDtE+XPCuLg4hIWF4ezZs23zHOe2YEN6LmYUACgohjQ5F2sQoehG6vHHH0dYWJjs37e3z96SW0pv3SC1/vY98VpCT8GH6y6zIO+wGXg2+oE9SusV6crWyZyfoEdPu8LrQm4AkDRI1vek3IDj7KEYPhRAwUkMm3wSkHTYf2g+n4+3g2+hOZGUlIS8vDzs27cPSUlJSsdxWVRUFCoqKlBWVoaoqCil47glICAAVqsVDQ0NCAgIUDqOMPhwnTHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZExyXnDHBcckZE5xERKR0iJ5i165dOHDgAADg+vXrqK+vx2OPPYagoCAAwLp16zBw4EAlIzq0d+9eXL16FQBw8OBB1NXVYerUqQgNDQUAvPLKKwgICFAyolMnTpxAU1MTAGDx4sVoamrCli1b4O/vD0mSMHbsWEiSpHBKL0esTXFxMQFw+IqKiiKbzaZ0RIfWrl3rNPeECROUjteu559/3mn2KVOmKB1PCHy4/gC9Xo+RI0c6fC89Pb3H7lFSU1Ph5+fn8L309HQPp3FPRkZGp95jruOSP0CSJIcrVkBAAFJSUhRI5Jrw8HDMnj3bbn5ISAjmzJmjQCLXPfPMMxgyZIjd/LCwMDz33HOeDyQgLvlDUlJSoFarZfPmzJkDjUajUCLXONo4LViwAH369FEgjetUKhXS0tLs5i9atAj+/v4KJBIPX3hzICUlBbt27WqbNhgMiI2NVTBRx4gIw4cPR1VVVdu848ePY/To0Qqmck11dTUiIiLaLsABQGVlJSIjIxVMJQ5fT3+hxWLBk08+CUmS2l4qlUo2/SjzumJZNTU1bXlDQ0Px2WefYdOmTR7P4e68ESNGtJVcq9XiyJEjKCoq8niOzvweer0ehYWFAIBx48ahpqYGtbW1PWL9UKvVdkd33sTtPbnJZMLbb7+N33//HfHx8Vi9ejX69u3r8vja2lq88MILIKK2l81mk00/yryuWlZdXR1sNhvUajV8fX07HPvfi4lnypQp0Gq1yMzMxPjx43vsBVhn3Cp5Y2MjoqOjUV1dDR8fHzQ3N2PEiBE4duwYVCrXTu9ra2vRv3//Tgf2lPXr1yMrKwvXrl1Dv379XB7XHRsud+atWLEChYWFOHLkCAIDAxXL4e7G12azYeXKlbBarVi3bh18fHx6zE7AbDZj69atAIAxY8YgMzMT8+bNe+TrHUSELVu2YNu2bdBoNHjnnXfw1FNPPdIynX2Ry/bt20eBgYGk0+lIp9ORVqslX19fMhgMLi+jpqbGna9UTE1NDWVkZCgdw22HDx+mzMxMpWN0ygcffEBvvPGG0jHsbNiwwe4efkhICC1ZsoROnjzZ6eVmZ2dTUFAQaTQaCg0NJbVaTcePH+/C5C3curre2Nhod6giSRIaGxvd2ai485WK6d+/Pz755BOlY7jt6aefRlZWltIxOmXRokUOr7QrzWaz2c27ffs2Pv/8c8TExECv12Pnzp1oaGhwa7lr165FcHAwQkNDodFooFarsXHjxq6K3catC2/Tpk1DSEgIzGYz/P39YbVaodPpoNfrXV6Gt5QcAIKDg5WO4DZJkqDVapWO0Sk98ZFhoON11t/fHz4+Pm6fq9+7d8/uNqHVanU7X0fcKnlwcDBKSkqwZMkSlJaWIjExEZs3b3b6tJUjNpsNH3/8cY+6mt6bc7COOSp5eHg4Fi1ahJdffhnDhg3r1HLT09Px1VdfwWazobm5GXfv3kVmZuajxrXj8fvk1dXVPXaL3Vv1hI1NT9noOZu3Z88eSJKEadOmIS0tDbNmzXJr5+ZIU1MT3nvvPWzduhUajQbZ2dmYNWtWF/1fvc/jJW9ubobRaFT0aml3zOMc4uZISEjAqFGjsHjxYuh0Ok/WpUvwE2+MCY6fXWdMcFxyxgTXpSXPz86FNLn1lZiHDcaH5j8wjzHmGV1/Tm44CmnVJWBqHCir9X6tsRz63L4wZHnn/VvGlFC1Ow/DcswtE5IO+w9p8X1iMXKgwfptM7HMxTp1/eG6Xot0CcDPZS17bcNRSGuA7VxwxtwSOXcm9k8FIGmwftskTIcWX74f41bBgW45J9diZZoGIDOWL8yFVKQF5USB/zKYMfdNj9cBZMbpy2g5Ii7q61bBgW668Bap1yFWQsshBu/BGeu8CA1iJaDcaEG+oXNHxN1S8vzckyghAHQJ3xu64xsY611KDh/FOW3njoi7vOT52bn4Pn4+aHsMYiUgZ3s5qjoexhhrlw4zXf87MJkuLLkFG9JbCv6lHoA2CqueBVB5Eut4b85Y51w2o4SA2MkRnb6u1SUlb7kP/hOWV7acOwAtl/9nFLS8n7MqFxlcdMbcll90CZA0SNaHdnoZ/Ow6Yz2SBRvSW3acAFrvk0/C9E4siUvOmOD42XXGBMclZ0xwXHLGBMclZ0xwXHLGBMclZ0xwXHLGBMclZ0xwXHLGBMclZ0xwXHLGBMclZ0xw/w9OhToCNsVAogAAAABJRU5ErkJggg==';
diff --git a/src/components/ScnBase/mock/index.ts b/src/components/ScnBase/mock/index.ts
new file mode 100644
index 0000000..cea950a
--- /dev/null
+++ b/src/components/ScnBase/mock/index.ts
@@ -0,0 +1 @@
+export * from './scn';
diff --git a/src/components/ScnBase/mock/scn.ts b/src/components/ScnBase/mock/scn.ts
new file mode 100644
index 0000000..9de74c5
--- /dev/null
+++ b/src/components/ScnBase/mock/scn.ts
@@ -0,0 +1,586 @@
+import { ScType } from 'ts-sc-client';
+
+import { IScnChild, IScnNode } from '../model';
+
+import { html, image1 } from './constants';
+
+let ind = 0;
+const getId = () => ind++;
+
+const getLinks = (): IScnChild => ({
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeDCommonConst.value,
+ direction: 'right',
+ },
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeDCommonConst.value,
+ direction: 'right',
+ },
+ ],
+ modifiers: [
+ {
+ addr: getId(),
+ idtf: 'основной идентификатор*',
+ type: 3,
+ modifierArcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ },
+ {
+ addr: getId(),
+ idtf: 'еще один идентификатор*',
+ type: 3,
+ modifierArcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessVarPosPerm.value,
+ },
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessVarPosPerm.value,
+ },
+ ],
+ },
+ {
+ addr: getId(),
+ idtf: "больше - не меньше'",
+ type: 3,
+ modifierArcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ },
+ ],
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: 'База знаний Financial DK',
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ {
+ addr: getId(),
+ content: 'Financial DK knowledge base',
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ ],
+});
+
+const decompositionChild: IScnChild = {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: [
+ {
+ addr: getId(),
+ idtf: 'декомпозиция раздела*',
+ type: 3,
+ modifierArcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ },
+ ],
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ idtf: null,
+ type: ScType.NodeConstTuple.value,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ children: [
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'right',
+ },
+ ],
+ modifiers: [
+ {
+ addr: getId(),
+ idtf: "1'",
+ type: 3,
+ modifierArcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ },
+ ],
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ idtf: 'Раздел. Предметная область бизнес процессов',
+ type: ScType.NodeConst.value,
+ children: [
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: 'Ссылка без модификатора',
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ ],
+ },
+ ],
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'right',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ idtf: 'Раздел. Предметная область экономических субъектов',
+ type: ScType.NodeConst.value,
+ children: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'right',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ idtf: 'Раздел. Предметная область персон',
+ type: ScType.NodeConst.value,
+ children: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+};
+
+export const tree1: IScnNode = {
+ addr: getId(),
+ idtf: 'База знаний Financial DK',
+ type: ScType.NodeConst.value,
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ children: [
+ getLinks(),
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeDCommonConst.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: [
+ {
+ addr: getId(),
+ idtf: 'идентификатор*',
+ type: 3,
+ modifierArcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ content: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ },
+ ],
+ linkedNodes: [
+ {
+ addr: 10000,
+ content: 'Ссылка',
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeUCommonVar.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: 'Ссылка без модификатора',
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessVarFuzTemp.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: 'Длинная дуга',
+ type: ScType.NodeConst.value,
+ children: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: 'стартовый sc-элемент',
+ type: ScType.NodeConst.value,
+ children: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: 10001,
+ content: null,
+ contentType: null,
+ sourceNode: {
+ addr: getId(),
+ idtf: 'Авторизованный пользователь*',
+ type: ScType.NodeConst.value,
+ content: null,
+ },
+ targetNode: {
+ addr: getId(),
+ idtf: 'sc-модель базы знаний',
+ type: ScType.NodeConst.value,
+ content: null,
+ },
+ idtf: null,
+ type: ScType.EdgeDCommonConst.value,
+ children: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.NodeConst.value,
+ children: null,
+ },
+ ],
+ },
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ type: ScType.EdgeAccessConstPosPerm.value,
+ direction: 'left',
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: 10001,
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.NodeStruct.value,
+ children: null,
+ },
+ ],
+ },
+ decompositionChild,
+ ],
+};
+
+export const tree2: IScnNode = {
+ addr: getId(),
+ idtf: 'База знаний Financial DK',
+ type: ScType.LinkConst.value,
+ content: 'Контент ссылки',
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ children: [
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ direction: 'right',
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: 'стартовый sc-элемент',
+ type: ScType.NodeConst.value,
+ children: null,
+ },
+ ],
+ },
+ ],
+};
+
+export const tree3: IScnNode = {
+ addr: getId(),
+ idtf: 'База знаний Financial DK',
+ content: null,
+ sourceNode: {
+ addr: getId(),
+ idtf: 'Авторизованный пользователь*',
+ type: ScType.NodeConst.value,
+ content: null,
+ },
+ targetNode: {
+ addr: getId(),
+ idtf: 'sc-модель базы знаний',
+ type: ScType.NodeConst.value,
+ content: null,
+ },
+ type: ScType.EdgeDCommonConst.value,
+ contentType: null,
+ children: [
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ direction: 'right',
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: null,
+ contentType: null,
+ sourceNode: null,
+ targetNode: null,
+ idtf: 'стартовый sc-элемент',
+ type: ScType.NodeConst.value,
+ children: null,
+ },
+ ],
+ },
+ ],
+};
+
+export const tree4: IScnNode = {
+ addr: getId(),
+ idtf: 'База знаний Financial DK',
+ content: null,
+ sourceNode: {
+ addr: getId(),
+ idtf: 'Авторизованный пользователь*',
+ type: ScType.NodeConst.value,
+ content: null,
+ },
+ targetNode: {
+ addr: getId(),
+ idtf: 'sc-модель базы знаний',
+ type: ScType.NodeConst.value,
+ content: null,
+ },
+ type: ScType.EdgeDCommonConst.value,
+ contentType: null,
+ children: [
+ {
+ arcs: [
+ {
+ addr: getId(),
+ idtf: null,
+ direction: 'right',
+ type: ScType.EdgeAccessConstPosPerm.value,
+ },
+ ],
+ modifiers: null,
+ linkedNodes: [
+ {
+ addr: getId(),
+ content: image1,
+ contentType: 'format_png',
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ {
+ addr: getId(),
+ content: html,
+ contentType: 'format_html',
+ sourceNode: null,
+ targetNode: null,
+ idtf: null,
+ type: ScType.LinkConst.value,
+ children: null,
+ },
+ ],
+ },
+ ],
+};
diff --git a/src/components/ScnBase/model.ts b/src/components/ScnBase/model.ts
new file mode 100644
index 0000000..b03e9bd
--- /dev/null
+++ b/src/components/ScnBase/model.ts
@@ -0,0 +1,47 @@
+export type TLinkFormat =
+ | 'format_txt'
+ | 'format_large_txt'
+ | 'format_html'
+ | 'format_github_source_link'
+ | 'format_pdf'
+ | 'format_png'
+ | null;
+
+export interface IScnNode {
+ addr: number;
+ idtf: string | null;
+ type: number;
+ content?: string | null;
+ contentType?: TLinkFormat;
+ sourceNode?: INodeShort | null;
+ targetNode?: INodeShort | null;
+ children?: IScnChild[] | null;
+ struct?: IScnNode;
+}
+
+export interface IScnChild {
+ arcs: IArc[];
+ modifiers: IModifier[] | null;
+ linkedNodes: IScnNode[];
+}
+
+interface IArc {
+ addr: number;
+ idtf: string | null;
+ type: number;
+ direction: 'left' | 'right';
+}
+
+interface IModifier {
+ addr: number;
+ idtf: string | null;
+ type: number;
+ modifierArcs: INodeShort[];
+}
+
+interface INodeShort {
+ addr: number;
+ idtf: string | null;
+ type: number;
+ content?: string | null;
+}
diff --git a/src/components/ScnBase/styled.ts b/src/components/ScnBase/styled.ts
new file mode 100644
index 0000000..83bc742
--- /dev/null
+++ b/src/components/ScnBase/styled.ts
@@ -0,0 +1,49 @@
+import { ScTag } from 'ostis-ui-lib';
+import styled from 'styled-components';
+
+export const StyledScTag = styled(ScTag)`
+ margin-bottom: 16px;
+
+ flex-grow: 1;
+
+ padding-right: 6px;
+
+ margin-right: 6px;
+
+ cursor: auto;
+
+ overflow: auto;
+
+ &::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+
+ margin: 8px;
+ }
+ &::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+
+ background-color: #c0c0c0;
+
+ margin: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ border-radius: 10px;
+
+ background-color: transparent;
+ }
+`;
+
+export const Inner = styled.div`
+ position: relative;
+`;
+
+export const Target = styled.div`
+ position: absolute;
+
+ left: 0;
+ bottom: 200px;
+ height: 1px;
+ width: 100%;
+`;
diff --git a/src/components/SearchField/SearchField.tsx b/src/components/SearchField/SearchField.tsx
index c2c1f0b..697ac60 100644
--- a/src/components/SearchField/SearchField.tsx
+++ b/src/components/SearchField/SearchField.tsx
@@ -75,7 +75,6 @@ export const SearchField: FC<IProps> = ({ className }) => {
onChange={onChange}
emptyMessage={emptyMessage}
iconsLeft={<SearchIcon />}
- autoFocus
>
{(options || []).map((option) => (
<Option key={option} value={option} className={styles.option}>
diff --git a/src/components/SidePanel/SidePanel.tsx b/src/components/SidePanel/SidePanel.tsx
index 4f5189d..a9172d0 100644
--- a/src/components/SidePanel/SidePanel.tsx
+++ b/src/components/SidePanel/SidePanel.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
import { DecompositionPanel, Scn, useDecompositionContext, useTranslate } from 'ostis-ui-lib';
import { FC, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
import { getHistory } from '@api/requests/userHistory';
import Clock from '@assets/images/Clock.svg';
import Plus from '@assets/images/plus.svg';
@@ -12,9 +11,11 @@ import ErrorBoundary from '@components/ErrorBoundary/ErrorBoundary';
import { HistoryPanel } from '@components/HistoryPanel';
import { SearchField } from '@components/SearchField';
import { useSelector } from '@hooks';
-import { selectUser, setFormat } from '@store/commonSlice';
+import { selectUser } from '@store/commonSlice';
import { selectRequests, setRequests } from '@store/requestHistorySlice';
import styles from './SidePanel.module.scss';
+import { selectAuth } from '@store/authSlice';
+import { Tooltip } from '@components/ToolTip/ToolTip';
import { SwitchMode } from './SwitchMode';
interface IProps {
@@ -22,11 +23,13 @@ interface IProps {
}
export const SidePanel: FC<IProps> = ({ className }) => {
- const navigate = useNavigate();
const dispatch = useDispatch();
const user = useSelector(selectUser);
+ const username = useSelector(selectAuth);
+ const isAuthorised = username != '';
+
const { onAddClick } = useDecompositionContext();
const translate = useTranslate();
@@ -51,12 +54,14 @@ export const SidePanel: FC<IProps> = ({ className }) => {
<div className={className}>
<div className={styles.sideBarContent}>
<div className={styles.searchFieldWrap}>
- <SearchField className={styles.searchField} />
+ <Tooltip systemId="ui_search">
+ <SearchField className={styles.searchField} />
+ </Tooltip>
</div>
<div
className={classNames(styles.accordionContent, {
- [styles.accordionContent_userCanEdit]: !!user?.can_edit,
- [styles.accordionContent_admin]: !!user?.is_admin,
+ [styles.accordionContent_userCanEdit]: isAuthorised,
+ [styles.accordionContent_admin]: isAuthorised,
})}
>
<SwitchMode />
@@ -65,9 +70,10 @@ export const SidePanel: FC<IProps> = ({ className }) => {
<Accordion
header={translate({ ru: 'Разделы', en: 'Sections' })}
leftIcon={<Sections />}
- rightIcon={!!user?.is_admin || !!user?.can_edit ? <Plus /> : null}
+ rightIcon={isAuthorised ? <Plus /> : null}
onRightClick={onAddClick}
expanded
+ systemId="ui_section"
>
<ErrorBoundary
title={translate({
@@ -77,12 +83,16 @@ export const SidePanel: FC<IProps> = ({ className }) => {
paragraph={translate({ ru: 'Ошибка', en: 'Error' })}
className={styles.errorBoundary}
>
- {<DecompositionPanel />}
+ {<DecompositionPanel editable={isAuthorised} deleteable={isAuthorised} />}
</ErrorBoundary>
</Accordion>
</div>
<div className={styles.decompositionAndHistoryPanels}>
- <Accordion header={translate({ ru: 'История', en: 'History' })} leftIcon={<Clock />}>
+ <Accordion
+ header={translate({ ru: 'История', en: 'History' })}
+ leftIcon={<Clock />}
+ systemId="ui_history"
+ >
<ErrorBoundary
title={translate({
ru: 'Ошибка получения истории',
diff --git a/src/components/SwitchScgScn/SwitchScgScn.tsx b/src/components/SwitchScgScn/SwitchScgScn.tsx
new file mode 100644
index 0000000..68ef83b
--- /dev/null
+++ b/src/components/SwitchScgScn/SwitchScgScn.tsx
@@ -0,0 +1,36 @@
+import { Tooltip } from '@components/ToolTip/ToolTip';
+import ScgSwitch from './icons/scg.svg';
+import ScnSwitch from './icons/scn.svg';
+import { Divider, SwitchWrap, Tab, Tabs } from './styled';
+
+export type TScLanguageTab = 'scn' | 'scg';
+
+export interface ISwitchScgScnProps {
+ className?: string;
+ tab: TScLanguageTab;
+ onTabClick: (tab: TScLanguageTab) => void;
+}
+
+export const SwitchScgScn = ({ tab, className, onTabClick }: ISwitchScgScnProps) => {
+ const onClick = (newTab: TScLanguageTab) => () => {
+ onTabClick(newTab);
+ };
+
+ return (
+ <SwitchWrap className={className}>
+ <Tabs>
+ <Tooltip systemId="ui_scn_page">
+ <Tab isActive={tab === 'scn'} onClick={onClick('scn')}>
+ <ScnSwitch />
+ </Tab>
+ </Tooltip>
+ <Divider />
+ <Tooltip systemId="ui_scg_page">
+ <Tab isActive={tab === 'scg'} onClick={onClick('scg')}>
+ <ScgSwitch />
+ </Tab>
+ </Tooltip>
+ </Tabs>
+ </SwitchWrap>
+ );
+};
diff --git a/src/components/SwitchScgScn/SwitchScgScnStory.tsx b/src/components/SwitchScgScn/SwitchScgScnStory.tsx
new file mode 100644
index 0000000..877dbcb
--- /dev/null
+++ b/src/components/SwitchScgScn/SwitchScgScnStory.tsx
@@ -0,0 +1,9 @@
+import { useState } from 'react';
+
+import { SwitchScgScn, TScLanguageTab } from './SwitchScgScn';
+
+export const SwitchScgScnStory = () => {
+ const [tab, setTab] = useState<TScLanguageTab>('scn');
+
+ return <SwitchScgScn tab={tab} onTabClick={setTab} />;
+};
diff --git a/src/components/SwitchScgScn/icons/scg.svg b/src/components/SwitchScgScn/icons/scg.svg
new file mode 100644
index 0000000..61fd4f9
--- /dev/null
+++ b/src/components/SwitchScgScn/icons/scg.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.2798 15.6667C19.4483 15.6675 18.6492 15.9876 18.0486 16.5604L14.7938 14.0396C15.0761 13.5604 15.2232 13.014 15.2194 12.4583C15.2179 12.266 15.1987 12.0742 15.1619 11.8854L17.4045 11.1521C17.7599 11.8541 18.3616 12.4016 19.0955 12.6907C19.8293 12.9799 20.6441 12.9905 21.3853 12.7206C22.1265 12.4507 22.7424 11.919 23.1161 11.2265C23.4897 10.534 23.5952 9.72896 23.4124 8.96413C23.2296 8.19929 22.7713 7.52795 22.1245 7.07755C21.4777 6.62715 20.6874 6.42905 19.9037 6.52086C19.12 6.61267 18.3974 6.988 17.873 7.57559C17.3487 8.16318 17.0592 8.92212 17.0595 9.70833C17.061 9.90066 17.0802 10.0924 17.117 10.2812L14.8743 11.0146C14.605 10.4849 14.1939 10.0398 13.6865 9.72837C13.179 9.41696 12.5951 9.2514 11.9991 9.25C11.7033 9.25093 11.409 9.29336 11.125 9.37604L10.0325 6.92396C10.6893 6.51224 11.1749 5.87804 11.3998 5.13803C11.6246 4.39803 11.5737 3.60201 11.2564 2.89643C10.9391 2.19084 10.3767 1.62317 9.67265 1.29784C8.96865 0.972509 8.1704 0.911416 7.42478 1.1258C6.67916 1.34018 6.03633 1.81562 5.61455 2.46463C5.19278 3.11365 5.02043 3.89259 5.12923 4.65813C5.23803 5.42367 5.62065 6.12431 6.20669 6.63116C6.79274 7.138 7.54278 7.41695 8.31883 7.41667C8.61468 7.41574 8.90893 7.37331 9.1929 7.29063L10.2855 9.74271C9.92253 9.96982 9.60873 10.2668 9.36248 10.6163C9.11624 10.9658 8.9425 11.3608 8.85145 11.7781C8.7604 12.1954 8.75388 12.6265 8.83226 13.0464C8.91064 13.4662 9.07235 13.8662 9.30791 14.2229L5.78864 17.3396C5.21146 16.8491 4.47706 16.5809 3.71848 16.5833C3.00157 16.5837 2.30528 16.8224 1.73995 17.2617C1.17462 17.7009 0.772567 18.3155 0.597496 19.0082C0.422425 19.7008 0.484347 20.4319 0.773451 21.0855C1.06256 21.7391 1.56231 22.2779 2.19353 22.6165C2.82475 22.9551 3.55134 23.0742 4.25818 22.9549C4.96502 22.8356 5.61169 22.4847 6.09572 21.9578C6.57976 21.4309 6.87348 20.7582 6.93035 20.0462C6.98722 19.3342 6.80399 18.6236 6.40969 18.0271L9.92896 14.9104C10.5061 15.4009 11.2405 15.6691 11.9991 15.6667C12.8305 15.6658 13.6296 15.3457 14.2303 14.7729L17.485 17.2937C17.2027 17.773 17.0557 18.3193 17.0595 18.875C17.0595 19.5095 17.2484 20.1298 17.6022 20.6575C17.9561 21.1851 18.459 21.5963 19.0474 21.8391C19.6358 22.0819 20.2833 22.1455 20.908 22.0217C21.5327 21.8979 22.1064 21.5923 22.5568 21.1436C23.0072 20.6949 23.3139 20.1233 23.4381 19.5009C23.5624 18.8786 23.4986 18.2335 23.2549 17.6472C23.0111 17.061 22.5984 16.5599 22.0688 16.2074C21.5393 15.8548 20.9167 15.6667 20.2798 15.6667ZM20.2798 7.41667C20.7347 7.41667 21.1794 7.55107 21.5577 7.80288C21.9359 8.05469 22.2307 8.4126 22.4048 8.83135C22.5789 9.2501 22.6245 9.71088 22.5357 10.1554C22.447 10.6 22.2279 11.0083 21.9062 11.3288C21.5845 11.6493 21.1747 11.8675 20.7285 11.956C20.2823 12.0444 19.8198 11.999 19.3995 11.8256C18.9792 11.6521 18.62 11.3584 18.3672 10.9815C18.1145 10.6047 17.9796 10.1616 17.9796 9.70833C17.9826 9.10147 18.2259 8.52033 18.6566 8.09121C19.0873 7.66209 19.6706 7.41968 20.2798 7.41667ZM6.01866 4.20833C6.01866 3.75509 6.15356 3.31202 6.4063 2.93515C6.65905 2.55829 7.01829 2.26456 7.43859 2.09111C7.8589 1.91766 8.32138 1.87228 8.76758 1.9607C9.21377 2.04913 9.62362 2.26739 9.9453 2.58788C10.267 2.90838 10.4861 3.31671 10.5748 3.76125C10.6636 4.20579 10.618 4.66657 10.4439 5.08532C10.2698 5.50407 9.975 5.86197 9.59674 6.11379C9.21848 6.3656 8.77376 6.5 8.31883 6.5C7.70972 6.49699 7.12642 6.25458 6.6957 5.82546C6.26499 5.39634 6.02168 4.81519 6.01866 4.20833ZM3.71848 22.0833C3.26355 22.0833 2.81883 21.9489 2.44057 21.6971C2.06231 21.4453 1.76749 21.0874 1.59339 20.6686C1.4193 20.2499 1.37375 19.7891 1.4625 19.3446C1.55125 18.9 1.77032 18.4917 2.09201 18.1712C2.41369 17.8507 2.82355 17.6325 3.26974 17.544C3.71593 17.4556 4.17842 17.501 4.59872 17.6744C5.01902 17.8479 5.37826 18.1416 5.63101 18.5185C5.88375 18.8953 6.01866 19.3384 6.01866 19.7917C6.01563 20.3985 5.77232 20.9797 5.34161 21.4088C4.91089 21.8379 4.32759 22.0803 3.71848 22.0833ZM11.9991 14.75C11.5442 14.75 11.0995 14.6156 10.7212 14.3638C10.3429 14.112 10.0481 13.7541 9.87403 13.3353C9.69993 12.9166 9.65438 12.4558 9.74313 12.0113C9.83189 11.5667 10.051 11.1584 10.3726 10.8379C10.6943 10.5174 11.1042 10.2991 11.5504 10.2107C11.9966 10.1223 12.4591 10.1677 12.8794 10.3411C13.2997 10.5146 13.6589 10.8083 13.9116 11.1852C14.1644 11.562 14.2993 12.0051 14.2993 12.4583C14.2963 13.0652 14.053 13.6463 13.6222 14.0755C13.1915 14.5046 12.6082 14.747 11.9991 14.75ZM20.2798 21.1667C19.8248 21.1667 19.3801 21.0323 19.0018 20.7804C18.6236 20.5286 18.3288 20.1707 18.1547 19.752C17.9806 19.3332 17.935 18.8725 18.0238 18.4279C18.1125 17.9834 18.3316 17.575 18.6533 17.2545C18.975 16.934 19.3848 16.7158 19.831 16.6274C20.2772 16.5389 20.7397 16.5843 21.16 16.7578C21.5803 16.9312 21.9395 17.225 22.1923 17.6018C22.445 17.9787 22.5799 18.4217 22.5799 18.875C22.5769 19.4819 22.3336 20.063 21.9029 20.4921C21.4722 20.9212 20.8889 21.1637 20.2798 21.1667Z" fill="#C0C0C0"/>
+<path d="M20.2798 7.41667C20.7347 7.41667 21.1794 7.55107 21.5577 7.80288C21.9359 8.05469 22.2307 8.4126 22.4048 8.83135C22.5789 9.2501 22.6245 9.71088 22.5357 10.1554C22.447 10.6 22.2279 11.0083 21.9062 11.3288C21.5845 11.6493 21.1747 11.8675 20.7285 11.956C20.2823 12.0444 19.8198 11.999 19.3995 11.8256C18.9792 11.6521 18.62 11.3584 18.3672 10.9815C18.1145 10.6047 17.9796 10.1616 17.9796 9.70833C17.9826 9.10147 18.2259 8.52033 18.6566 8.09121C19.0873 7.66209 19.6706 7.41968 20.2798 7.41667Z" fill="#C0C0C0"/>
+<path d="M3.71848 22.0833C3.26355 22.0833 2.81883 21.9489 2.44057 21.6971C2.06231 21.4453 1.76749 21.0874 1.59339 20.6686C1.4193 20.2499 1.37375 19.7891 1.4625 19.3446C1.55125 18.9 1.77032 18.4917 2.09201 18.1712C2.41369 17.8507 2.82355 17.6325 3.26974 17.544C3.71593 17.4556 4.17842 17.501 4.59872 17.6744C5.01902 17.8479 5.37826 18.1416 5.63101 18.5185C5.88375 18.8953 6.01866 19.3384 6.01866 19.7917C6.01563 20.3985 5.77232 20.9797 5.34161 21.4088C4.91089 21.8379 4.32759 22.0803 3.71848 22.0833Z" fill="#C0C0C0"/>
+</svg>
diff --git a/src/components/SwitchScgScn/icons/scn.svg b/src/components/SwitchScgScn/icons/scn.svg
new file mode 100644
index 0000000..381ce58
--- /dev/null
+++ b/src/components/SwitchScgScn/icons/scn.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 3H18C18.55 3 19 3.45 19 4C19 4.55 18.55 5 18 5H4C3.45 5 3 4.55 3 4C3 3.45 3.45 3 4 3ZM4 7H12C12.55 7 13 7.45 13 8C13 8.55 12.55 9 12 9H4C3.45 9 3 8.55 3 8C3 7.45 3.45 7 4 7Z" fill="#5896C0"/>
+<path d="M4.125 11H19.875C20.4937 11 21 11.45 21 12C21 12.55 20.4937 13 19.875 13H4.125C3.50625 13 3 12.55 3 12C3 11.45 3.50625 11 4.125 11ZM4.125 15H13.125C13.7437 15 14.25 15.45 14.25 16C14.25 16.55 13.7437 17 13.125 17H4.125C3.50625 17 3 16.55 3 16C3 15.45 3.50625 15 4.125 15Z" fill="#5896C0"/>
+<path d="M19.875 19H4.125C3.50625 19 3 19.45 3 20C3 20.55 3.50625 21 4.125 21H19.875C20.4937 21 21 20.55 21 20C21 19.45 20.4937 19 19.875 19Z" fill="#5896C0"/>
+</svg>
diff --git a/src/components/SwitchScgScn/index.tsx b/src/components/SwitchScgScn/index.tsx
new file mode 100644
index 0000000..434e587
--- /dev/null
+++ b/src/components/SwitchScgScn/index.tsx
@@ -0,0 +1 @@
+export * from './SwitchScgScn';
diff --git a/src/components/SwitchScgScn/styled.ts b/src/components/SwitchScgScn/styled.ts
new file mode 100644
index 0000000..1dec9c3
--- /dev/null
+++ b/src/components/SwitchScgScn/styled.ts
@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+
+export const SwitchWrap = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const Tabs = styled.div`
+ display: flex;
+ justify-content: end;
+
+ width: 100%;
+`;
+
+export const Tab = styled.div<{ isActive: boolean }>`
+ font-size: 26px;
+ font-weight: 400;
+ color: #c0c0c0;
+
+ cursor: pointer;
+
+ &:hover {
+ background: #e9f3f6;
+ path {
+ fill: #5896c0;
+ }
+ }
+
+ padding: 4px 8px;
+
+ border-radius: 4px;
+
+ path {
+ fill: #c0c0c0;
+ }
+
+ ${(props) =>
+ props.isActive &&
+ css`
+ background: #f8f8f8;
+
+ path {
+ fill: #5896c0;
+ }
+ `}
+`;
+
+export const Divider = styled.span`
+ margin: 0 4px;
+
+ border-left: 1px solid #c0c0c0;
+`;
diff --git a/src/components/TabBar/TabBar.module.scss b/src/components/TabBar/TabBar.module.scss
index 73e107e..bc06655 100644
--- a/src/components/TabBar/TabBar.module.scss
+++ b/src/components/TabBar/TabBar.module.scss
@@ -26,7 +26,7 @@
&_selected::after {
content: '';
display: block;
-
+
width: auto;
border-bottom: 3px solid $navy-blue;
}
diff --git a/src/components/ToolTip/ToolTip.tsx b/src/components/ToolTip/ToolTip.tsx
new file mode 100644
index 0000000..d0edfac
--- /dev/null
+++ b/src/components/ToolTip/ToolTip.tsx
@@ -0,0 +1,73 @@
+import { Tooltip as BaseTooltip } from 'ostis-ui-lib';
+import { ReactNode, useEffect, useState, useRef } from 'react';
+import { ScLangText } from 'ostis-ui-lib';
+import { useSelector } from 'react-redux';
+import { selectDevMode } from '@store/devModeSlice';
+import styles from './Tooltip.module.scss';
+import { ScTag } from 'ostis-ui-lib';
+import { searchAddrById } from '@api/sc/search/search';
+import { ScAddr, ScTemplate, ScType } from 'ts-sc-client';
+import { client, scUtils } from '@api/sc';
+
+interface IProps {
+ children: ReactNode;
+ commandAddr?: number;
+ systemId?: string;
+}
+
+export const Tooltip = ({ commandAddr, systemId, children }: IProps) => {
+ const devMode = useSelector(selectDevMode);
+ const [scAddr, setScAddr] = useState<undefined | number>(undefined);
+
+ useEffect(() => {
+ const fetchAddr = async () => {
+ if (systemId !== undefined) {
+ const addr = await searchAddrById(systemId);
+ if (devMode && addr) {
+ const description = await findComponentDescription(addr);
+ setScAddr(description?.value || undefined);
+ } else {
+ setScAddr(addr?.value || undefined);
+ }
+ }
+ };
+
+ fetchAddr();
+ }, [systemId, devMode]);
+
+ const findComponentDescription = async (componentAddr: ScAddr): Promise<ScAddr | undefined> => {
+ const template = new ScTemplate();
+ const { nrelDescriptionForDeveloperMode } = await scUtils.findKeynodes(
+ 'nrel_description_for_developer_mode',
+ );
+ const descriptionAlias = '_description';
+ template.tripleWithRelation(
+ componentAddr,
+ ScType.EdgeDCommonVar,
+ [ScType.NodeVar, descriptionAlias],
+ ScType.EdgeAccessVarPosPerm,
+ nrelDescriptionForDeveloperMode,
+ );
+ const result = await client.templateSearch(template);
+ const descriptionScAddr = result.length ? result[0].get(descriptionAlias) : undefined;
+
+ if (!descriptionScAddr) return undefined;
+ return descriptionScAddr;
+ };
+
+ if (systemId !== undefined) {
+ const title = <ScLangText addrOrSystemId={Number(scAddr)} />;
+ return (
+ <BaseTooltip title={title} className={styles.tooltip}>
+ <ScTag addr={scAddr}>{children}</ScTag>
+ </BaseTooltip>
+ );
+ } else if (commandAddr !== undefined) {
+ const title = <ScLangText addrOrSystemId={Number(commandAddr)} />;
+ return (
+ <BaseTooltip title={title} className={styles.tooltip}>
+ {children}
+ </BaseTooltip>
+ );
+ }
+};
diff --git a/src/components/ToolTip/Tooltip.module.scss b/src/components/ToolTip/Tooltip.module.scss
new file mode 100644
index 0000000..538d663
--- /dev/null
+++ b/src/components/ToolTip/Tooltip.module.scss
@@ -0,0 +1,3 @@
+.tooltip {
+ z-index: 1;
+ }
diff --git a/src/components/input/Input/Input.module.scss b/src/components/input/Input/Input.module.scss
index f752dd8..625f65f 100644
--- a/src/components/input/Input/Input.module.scss
+++ b/src/components/input/Input/Input.module.scss
@@ -8,7 +8,7 @@
width: 100%;
height: 40px;
-
+
padding: 8px 16px;
border: 2px solid $border-white;
@@ -16,7 +16,7 @@
outline: none;
cursor: text;
-
+
background-color: $white;
&:hover {
@@ -62,7 +62,8 @@
line-height: 23px;
color: $dark-grey;
- &:hover, &_focused {
+ &:hover,
+ &_focused {
border: 1px solid $grey-blue;
}
diff --git a/src/components/input/Select/Select.module.scss b/src/components/input/Select/Select.module.scss
index aa2fe3c..55aa2d8 100644
--- a/src/components/input/Select/Select.module.scss
+++ b/src/components/input/Select/Select.module.scss
@@ -62,7 +62,8 @@
color: $dull-grey;
}
- &:hover, &_focused {
+ &:hover,
+ &_focused {
border-color: $dark-blue;
}
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 39b84a8..c949b55 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -1,5 +1,6 @@
export const MAIN = '/' as const;
export const COMMAND = '/c/:commandAddr/a/:addr/:format' as const;
export const QUESTION = '/q/:question/:format' as const;
+export const AUTH = '/auth' as const;
export const LIBRARY = '/l/' as const;
export const ASK_AI = '/c/' as const;
diff --git a/src/pages/Auth/Auth.module.scss b/src/pages/Auth/Auth.module.scss
new file mode 100644
index 0000000..7b5d3eb
--- /dev/null
+++ b/src/pages/Auth/Auth.module.scss
@@ -0,0 +1,97 @@
+@import '~@assets/styles/variables/colors.scss';
+@import '~@assets/styles/services.scss';
+
+.authPageWrapper {
+ width: 100%;
+ height: $mainContentHeight;
+ display: flex;
+ box-sizing: border-box;
+}
+
+.left {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding-bottom: 10em;
+
+ border-radius: 10px;
+}
+
+.loginTitle {
+ font-size: 28px;
+ font-weight: 500;
+ line-height: 33px;
+ color: #414141;
+ letter-spacing: 0em;
+ text-align: left;
+}
+
+.loginForm {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0;
+}
+
+.loginFormInput,
+.loginFormSubmit {
+ width: 100%;
+ padding: 16px 16px;
+ border-radius: 10px;
+ margin: 0.5em 0;
+}
+
+.loginFormSubmit {
+ background-color: #4795d3;
+ color: white;
+ border: none;
+
+ &:active {
+ background-color: #2074b5;
+ }
+}
+
+.loginFormInput {
+ background: #ffffff;
+ border: 1px solid transparent;
+}
+
+.forgetPassword {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5em 0.5em;
+
+ width: 520px;
+ height: 21px;
+
+ a {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 21px;
+
+ text-decoration: none;
+
+ color: #2692ce;
+ }
+}
+
+@media (max-width: 600px) {
+ .loginForm,
+ .forgetPassword {
+ width: 90%;
+ }
+
+ .authPageWrapper {
+ flex-direction: column;
+ padding: 0;
+ }
+
+ .right {
+ display: none;
+ }
+}
diff --git a/src/pages/Auth/Auth.tsx b/src/pages/Auth/Auth.tsx
new file mode 100644
index 0000000..17a5764
--- /dev/null
+++ b/src/pages/Auth/Auth.tsx
@@ -0,0 +1,81 @@
+import { FormEvent, useRef } from 'react';
+
+import { useTranslate } from 'ostis-ui-lib';
+import { authenticateUser } from '@api/requests/authenticate';
+
+import styles from './Auth.module.scss';
+
+import { useDispatch } from '@hooks/redux';
+import { setUsername } from '@store/authSlice';
+import { useNavigate } from 'react-router-dom';
+import { routes } from '@constants';
+import { useErrorToast } from '@hooks/useErrorToast';
+import { Input } from '@components/input/Input';
+import { Button } from '@components/Button';
+
+const Auth = () => {
+ const translate = useTranslate();
+ const addError = useErrorToast();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const loginRef = useRef<HTMLInputElement>(null);
+ const passwordRef = useRef<HTMLInputElement>(null);
+
+ const onLoginSubmit = (e: FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+
+ const login = loginRef.current?.value;
+ const password = passwordRef.current?.value;
+
+ if (login && password) {
+ authenticateUser({ login, password })
+ .then((_resp) => {
+ dispatch(setUsername({ username: login }));
+ navigate(routes.MAIN);
+ })
+ .catch((error) => {
+ console.error(error);
+ addError(
+ translate({
+ ru: `Не удалось войти в метасистему`,
+ en: `It's failed to login in metasystem`,
+ }),
+ );
+ });
+ }
+ };
+
+ return (
+ <div className={styles.authPageWrapper}>
+ <div className={styles.left}>
+ <h5 className={styles.loginTitle}>
+ {translate({ ru: 'Авторизация', en: 'Authorization' })}
+ </h5>
+ <form className={styles.loginForm} onSubmit={onLoginSubmit}>
+ <Input
+ className={styles.loginFormInput}
+ ref={loginRef}
+ type="text"
+ placeholder={translate({ ru: 'Логин', en: 'Login' })}
+ />
+ <Input
+ className={styles.loginFormInput}
+ ref={passwordRef}
+ type="password"
+ placeholder={translate({ ru: 'Пароль', en: 'Password' })}
+ />
+ <div className={styles.forgetPassword}>
+ <div></div>
+ <a href="#forget">{translate({ ru: 'Забыли пароль?', en: 'Forgot your password?' })}</a>
+ </div>
+ <Button className={styles.loginFormSubmit}>
+ {translate({ ru: 'Подтвердить', en: 'Submit' })}
+ </Button>
+ </form>
+ </div>
+ </div>
+ );
+};
+
+export default Auth;
diff --git a/src/pages/Auth/index.ts b/src/pages/Auth/index.ts
new file mode 100644
index 0000000..56e205f
--- /dev/null
+++ b/src/pages/Auth/index.ts
@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const Auth = lazy(() => import(/* webpackChunkName: "auth" */ './Auth'));
diff --git a/src/pages/Command/Command.tsx b/src/pages/Command/Command.tsx
index 7c81eb9..72a6469 100644
--- a/src/pages/Command/Command.tsx
+++ b/src/pages/Command/Command.tsx
@@ -54,7 +54,9 @@ const Command = () => {
if (isAxiosError(cmdRes)) {
setIsLoading(false);
- return addError(translate({ ru: 'Не удалось выполнить запрос', en: `It's failed to get request` }));
+ return addError(
+ translate({ ru: 'Не удалось выполнить запрос', en: `It's failed to get request` }),
+ );
}
const question = cmdRes.data.question;
@@ -66,7 +68,9 @@ const Command = () => {
if (!isLast) return;
setIsLoading(false);
- navigate(generatePath(routes.QUESTION, { format, question: String(question) }), { replace: true });
+ navigate(generatePath(routes.QUESTION, { format, question: String(question) }), {
+ replace: true,
+ });
}, [addError, appendToHistory, args, dispatch, match, navigate, translate]);
useEffect(() => {
diff --git a/src/pages/Command/utils.ts b/src/pages/Command/utils.ts
index 42346a1..c2253a5 100644
--- a/src/pages/Command/utils.ts
+++ b/src/pages/Command/utils.ts
@@ -14,4 +14,7 @@ const executeCommandInner = async ({ commandAddr, addr, args }: IArgs) => {
return await doCommand(targetCommandAddr, targetAddr, ...args);
};
-export const debouncedExecuteCommand = debounceWithReturn(lastInstancePromice(executeCommandInner), 500);
+export const debouncedExecuteCommand = debounceWithReturn(
+ lastInstancePromice(executeCommandInner),
+ 500,
+);
diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
index a4412ac..8c2fed7 100644
--- a/src/pages/Main/Main.tsx
+++ b/src/pages/Main/Main.tsx
@@ -1,4 +1,5 @@
-import { SwitchScgScn, TScLanguageTab } from 'ostis-ui-lib';
+import { TScLanguageTab } from 'ostis-ui-lib';
+import { SwitchScgScn } from '@components/SwitchScgScn';
import { generatePath, Outlet, useLocation, useMatch, useNavigate } from 'react-router';
import { styled } from 'styled-components';
import { routes } from '@constants';
diff --git a/src/pages/Question/Question.tsx b/src/pages/Question/Question.tsx
index 1680551..8072f9c 100644
--- a/src/pages/Question/Question.tsx
+++ b/src/pages/Question/Question.tsx
@@ -10,4 +10,4 @@ const Question = () => {
return <ScnPage />;
};
-export default Question;
\ No newline at end of file
+export default Question;
diff --git a/src/store/authSlice.ts b/src/store/authSlice.ts
new file mode 100644
index 0000000..3f0a893
--- /dev/null
+++ b/src/store/authSlice.ts
@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { IRootState } from '@store/model';
+
+export interface IRequest {
+ username: string;
+}
+
+interface IInitialState {
+ username: string;
+}
+
+const initialState: IInitialState = {
+ username: '',
+};
+
+export const authSlice = createSlice({
+ name: 'authSlice',
+ initialState,
+ reducers: {
+ setUsername(state, action: PayloadAction<IRequest>) {
+ state.username = action.payload.username;
+ },
+ },
+});
+
+export const selectAuth = (state: IRootState) => state.authSlice.username;
+
+export const { setUsername } = authSlice.actions;
diff --git a/src/store/commonSlice.ts b/src/store/commonSlice.ts
index b0095e5..391d455 100644
--- a/src/store/commonSlice.ts
+++ b/src/store/commonSlice.ts
@@ -28,9 +28,7 @@ interface IInitialState {
const initialState: IInitialState = {
format: 'scn',
user: {
- data: localStorage.getItem('user')
- ? JSON.parse(localStorage.getItem('user') as string)
- : null,
+ data: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') as string) : null,
status: {
isLoading: false,
isError: false,
diff --git a/src/store/devModeSlice.ts b/src/store/devModeSlice.ts
new file mode 100644
index 0000000..67f5ea1
--- /dev/null
+++ b/src/store/devModeSlice.ts
@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { IRootState } from '@store/model';
+
+export interface IRequest {
+ enabled: boolean;
+}
+
+interface IInitialState {
+ enabled: boolean;
+}
+
+const initialState: IInitialState = {
+ enabled: localStorage.getItem('devMode') === 'true',
+};
+
+export const requestDevMode = createSlice({
+ name: 'devMode',
+ initialState,
+ reducers: {
+ setDevMode(state, action: PayloadAction<boolean>) {
+ state.enabled = action.payload;
+ },
+ },
+});
+
+export const selectDevMode = (state: IRootState) => state.devMode.enabled;
+
+export const { setDevMode } = requestDevMode.actions;
diff --git a/src/store/store.ts b/src/store/store.ts
index 187057b..cabc4cb 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -4,6 +4,8 @@ import { argsFixingSlice } from './argsFixingSlice';
import { commonSlice } from './commonSlice';
import { requestHistorySlice } from './requestHistorySlice';
import { requestActiveLink } from './activeLinkSlice';
+import { authSlice } from './authSlice';
+import { requestDevMode } from './devModeSlice';
export const store = configureStore({
reducer: {
@@ -11,5 +13,7 @@ export const store = configureStore({
[requestHistorySlice.name]: requestHistorySlice.reducer,
[argsFixingSlice.name]: argsFixingSlice.reducer,
[requestActiveLink.name]: requestActiveLink.reducer,
+ [authSlice.name]: authSlice.reducer,
+ [requestDevMode.name]: requestDevMode.reducer,
},
});
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 71d54ae..14ca743 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,7 +1,7 @@
export type SnakeToCamelCase<T extends string> = string extends T
? string
: T extends `${infer Start}_${infer Letter}${infer Rest}`
- ? `${Start}${Uppercase<Letter>}${SnakeToCamelCase<Rest>}`
- : T extends `${infer Str}`
- ? `${Str}`
- : '';
+ ? `${Start}${Uppercase<Letter>}${SnakeToCamelCase<Rest>}`
+ : T extends `${infer Str}`
+ ? `${Str}`
+ : '';
diff --git a/webpack/webpack.dev.js b/webpack/webpack.dev.js
index 7a482a5..eec5453 100644
--- a/webpack/webpack.dev.js
+++ b/webpack/webpack.dev.js
@@ -1,5 +1,5 @@
-const { merge } = require('webpack-merge')
-const config = require('./webpack.config')
+const { merge } = require('webpack-merge');
+const config = require('./webpack.config');
module.exports = merge(config, {
mode: 'development',
@@ -23,4 +23,4 @@ module.exports = merge(config, {
output: {
publicPath: '/',
},
-})
+});
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js
index abef20f..9ea78ff 100644
--- a/webpack/webpack.prod.js
+++ b/webpack/webpack.prod.js
@@ -1,8 +1,8 @@
-const { resolve } = require('path')
-const { merge } = require('webpack-merge')
-const CompressionPlugin = require('compression-webpack-plugin')
-const { EsbuildPlugin } = require('esbuild-loader')
-const config = require('./webpack.config')
+const { resolve } = require('path');
+const { merge } = require('webpack-merge');
+const CompressionPlugin = require('compression-webpack-plugin');
+const { EsbuildPlugin } = require('esbuild-loader');
+const config = require('./webpack.config');
module.exports = merge(config, {
mode: 'production',
@@ -28,4 +28,4 @@ module.exports = merge(config, {
publicPath: '/',
clean: true,
},
-})
+});