diff --git a/package-lock.json b/package-lock.json index 3bb1324..b29f893 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "axios": "^0.25.0", + "draft-js": "^0.11.7", "jalaali-js": "^1.2.3", "jalali-moment": "^3.3.10", "lord-icon-element": "^3.3.3", @@ -19,6 +20,7 @@ "mapir-react-component": "^2.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.4.2", "react-icons": "^4.3.1", "react-indiana-drag-scroll": "^2.1.0", @@ -5585,6 +5587,14 @@ "node": ">=10" } }, + "node_modules/cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "dependencies": { + "node-fetch": "2.6.7" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6410,6 +6420,37 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "node_modules/draft-js": { + "version": "0.11.7", + "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz", + "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==", + "dependencies": { + "fbjs": "^2.0.0", + "immutable": "~3.7.4", + "object-assign": "^4.1.1" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, + "node_modules/draft-js/node_modules/immutable": { + "version": "3.7.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz", + "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/draftjs-utils": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz", + "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==", + "peerDependencies": { + "draft-js": "^0.11.x", + "immutable": "3.x.x || 4.x.x" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -7569,6 +7610,34 @@ "bser": "2.1.1" } }, + "node_modules/fbjs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz", + "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==", + "dependencies": { + "core-js": "^3.6.4", + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "node_modules/fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, + "node_modules/fbjs/node_modules/promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dependencies": { + "asap": "~2.0.3" + } + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -8458,6 +8527,15 @@ "node": ">=12" } }, + "node_modules/html-to-draftjs": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz", + "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==", + "peerDependencies": { + "draft-js": "^0.10.x || ^0.11.x", + "immutable": "3.x.x || 4.x.x" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -11335,6 +11413,14 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "dependencies": { + "uc.micro": "^1.0.1" + } + }, "node_modules/loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -11931,6 +12017,44 @@ "tslib": "^2.0.3" } }, + "node_modules/node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/node-fetch/node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "node_modules/node-fetch/node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "node_modules/node-fetch/node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -14152,6 +14276,24 @@ "react": "17.0.2" } }, + "node_modules/react-draft-wysiwyg": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz", + "integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==", + "dependencies": { + "classnames": "^2.2.6", + "draftjs-utils": "^0.10.2", + "html-to-draftjs": "^1.5.0", + "linkify-it": "^2.2.0", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "draft-js": "^0.10.x || ^0.11.x", + "immutable": "3.x.x || 4.x.x", + "react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", + "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x" + } + }, "node_modules/react-dropzone": { "version": "11.5.3", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz", @@ -15117,6 +15259,11 @@ "node": ">= 0.8.0" } }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -16171,6 +16318,29 @@ "node": ">=4.2.0" } }, + "node_modules/ua-parser-js": { + "version": "0.7.31", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", + "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + } + ], + "engines": { + "node": "*" + } + }, + "node_modules/uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -21334,6 +21504,14 @@ "yaml": "^1.10.0" } }, + "cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "requires": { + "node-fetch": "2.6.7" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -21937,6 +22115,29 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "draft-js": { + "version": "0.11.7", + "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz", + "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==", + "requires": { + "fbjs": "^2.0.0", + "immutable": "~3.7.4", + "object-assign": "^4.1.1" + }, + "dependencies": { + "immutable": { + "version": "3.7.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz", + "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks=" + } + } + }, + "draftjs-utils": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz", + "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==", + "requires": {} + }, "duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -22796,6 +22997,36 @@ "bser": "2.1.1" } }, + "fbjs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz", + "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==", + "requires": { + "core-js": "^3.6.4", + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + }, + "dependencies": { + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, + "fbjs-css-vars": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", + "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + }, "figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -23435,6 +23666,12 @@ "terser": "^5.10.0" } }, + "html-to-draftjs": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz", + "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==", + "requires": {} + }, "html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -25493,6 +25730,14 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "requires": { + "uc.micro": "^1.0.1" + } + }, "loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -25951,6 +26196,35 @@ "tslib": "^2.0.3" } }, + "node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "requires": { + "whatwg-url": "^5.0.0" + }, + "dependencies": { + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } + }, "node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -27401,6 +27675,18 @@ "scheduler": "^0.20.2" } }, + "react-draft-wysiwyg": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz", + "integrity": "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==", + "requires": { + "classnames": "^2.2.6", + "draftjs-utils": "^0.10.2", + "html-to-draftjs": "^1.5.0", + "linkify-it": "^2.2.0", + "prop-types": "^15.7.2" + } + }, "react-dropzone": { "version": "11.5.3", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz", @@ -28112,6 +28398,11 @@ "send": "0.17.2" } }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, "setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -28902,6 +29193,16 @@ "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", "peer": true }, + "ua-parser-js": { + "version": "0.7.31", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", + "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==" + }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", diff --git a/package.json b/package.json index c18a747..42cb5fd 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "axios": "^0.25.0", + "draft-js": "^0.11.7", "jalaali-js": "^1.2.3", "jalali-moment": "^3.3.10", "lord-icon-element": "^3.3.3", @@ -14,6 +15,7 @@ "mapir-react-component": "^2.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.4.2", "react-icons": "^4.3.1", "react-indiana-drag-scroll": "^2.1.0", diff --git a/src/view/addProduct/Main/editor.css b/src/view/addProduct/Main/editor.css new file mode 100644 index 0000000..1b9f7d7 --- /dev/null +++ b/src/view/addProduct/Main/editor.css @@ -0,0 +1,890 @@ +.rdw-option-wrapper { + border: 1px solid #F1F1F1; + padding: 5px; + min-width: 25px; + height: 20px; + border-radius: 2px; + margin: 0 4px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-option-wrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-option-wrapper:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-option-active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-option-disabled { + opacity: 0.3; + cursor: default; +} + +.rdw-dropdown-wrapper { + height: 30px; + background: white; + cursor: pointer; + border: 1px solid #F1F1F1; + border-radius: 2px; + margin: 0 3px; + text-transform: capitalize; + background: white; +} +.rdw-dropdown-wrapper:focus { + outline: none; +} +.rdw-dropdown-wrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; + background-color: #FFFFFF; +} +.rdw-dropdown-wrapper:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-dropdown-carettoopen { + height: 0px; + width: 0px; + position: absolute; + top: 35%; + right: 10%; + border-top: 6px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} +.rdw-dropdown-carettoclose { + height: 0px; + width: 0px; + position: absolute; + top: 35%; + right: 10%; + border-bottom: 6px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} +.rdw-dropdown-selectedtext { + display: flex; + position: relative; + height: 100%; + align-items: center; + padding: 0 5px; +} +.rdw-dropdown-optionwrapper { + z-index: 100; + position: relative; + border: 1px solid #F1F1F1; + width: 98%; + background: white; + border-radius: 2px; + margin: 0; + padding: 0; + max-height: 250px; + overflow-y: scroll; +} +.rdw-dropdown-optionwrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; + background-color: #FFFFFF; +} + +.rdw-dropdownoption-default { + min-height: 25px; + display: flex; + align-items: center; + padding: 0 5px; +} +.rdw-dropdownoption-highlighted { + background: #F1F1F1; +} +.rdw-dropdownoption-active { + background: #f5f5f5; +} +.rdw-dropdownoption-disabled { + opacity: 0.3; + cursor: default; +} + +.rdw-inline-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-inline-dropdown { + width: 50px; +} +.rdw-inline-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} + +.rdw-block-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-block-dropdown { + width: 110px; +} + +.rdw-fontsize-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-fontsize-dropdown { + min-width: 40px; +} +.rdw-fontsize-option { + display: flex; + justify-content: center; +} + +.rdw-fontfamily-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-fontfamily-dropdown { + width: 115px; +} +.rdw-fontfamily-placeholder { + white-space: nowrap; + max-width: 90px; + overflow: hidden; + text-overflow: ellipsis; +} +.rdw-fontfamily-optionwrapper { + width: 140px; +} + +.rdw-list-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-list-dropdown { + width: 50px; + z-index: 90; +} +.rdw-list-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} + +.rdw-text-align-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-text-align-dropdown { + width: 50px; + z-index: 90; +} +.rdw-text-align-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-right-aligned-block { + text-align: right; +} +.rdw-left-aligned-block { + text-align: left !important; +} +.rdw-center-aligned-block { + text-align: center !important; +} +.rdw-justify-aligned-block { + text-align: justify !important; +} +.rdw-right-aligned-block > div { + display: inline-block; +} +.rdw-left-aligned-block > div { + display: inline-block; +} +.rdw-center-aligned-block > div { + display: inline-block; +} +.rdw-justify-aligned-block > div { + display: inline-block; +} + +.rdw-colorpicker-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-colorpicker-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 175px; + height: 175px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-colorpicker-modal-header { + display: flex; + padding-bottom: 5px; +} +.rdw-colorpicker-modal-style-label { + font-size: 15px; + width: 50%; + text-align: center; + cursor: pointer; + padding: 0 10px 5px; +} +.rdw-colorpicker-modal-style-label-active { + border-bottom: 2px solid #0a66b7; +} +.rdw-colorpicker-modal-options { + margin: 5px auto; + display: flex; + width: 100%; + height: 100%; + flex-wrap: wrap; + overflow: scroll; +} +.rdw-colorpicker-cube { + width: 22px; + height: 22px; + border: 1px solid #F1F1F1; +} +.rdw-colorpicker-option { + margin: 3px; + padding: 0; + min-height: 20px; + border: none; + width: 22px; + height: 22px; + min-width: 22px; + box-shadow: 1px 2px 1px #BFBDBD inset; +} +.rdw-colorpicker-option:hover { + box-shadow: 1px 2px 1px #BFBDBD; +} +.rdw-colorpicker-option:active { + box-shadow: -1px -2px 1px #BFBDBD; +} +.rdw-colorpicker-option-active { + box-shadow: 0px 0px 2px 2px #BFBDBD; +} + +.rdw-link-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-link-dropdown { + width: 50px; +} +.rdw-link-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-link-dropdownPlaceholder { + margin-left: 8px; +} +.rdw-link-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + height: 205px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-link-modal-label { + font-size: 15px; +} +.rdw-link-modal-input { + margin-top: 5px; + border-radius: 2px; + border: 1px solid #F1F1F1; + height: 25px; + margin-bottom: 15px; + padding: 0 5px; +} +.rdw-link-modal-input:focus { + outline: none; +} +.rdw-link-modal-buttonsection { + margin: 0 auto; +} +.rdw-link-modal-target-option { + margin-bottom: 20px; +} +.rdw-link-modal-target-option > span { + margin-left: 5px; +} +.rdw-link-modal-btn { + margin-left: 10px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-link-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-link-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-link-modal-btn:focus { + outline: none !important; +} +.rdw-link-modal-btn:disabled { + background: #ece9e9; +} +.rdw-link-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-history-dropdown { + width: 50px; +} + +.rdw-embedded-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-embedded-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + height: 180px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + justify-content: space-between; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-embedded-modal-header { + font-size: 15px; + display: flex; +} +.rdw-embedded-modal-header-option { + width: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.rdw-embedded-modal-header-label { + width: 95px; + border: 1px solid #f1f1f1; + margin-top: 5px; + background: #6EB8D4; + border-bottom: 2px solid #0a66b7; +} +.rdw-embedded-modal-link-section { + display: flex; + flex-direction: column; +} +.rdw-embedded-modal-link-input { + width: 88%; + height: 35px; + margin: 10px 0; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 15px; + padding: 0 5px; +} +.rdw-embedded-modal-link-input-wrapper { + display: flex; + align-items: center; +} +.rdw-embedded-modal-link-input:focus { + outline: none; +} +.rdw-embedded-modal-btn-section { + display: flex; + justify-content: center; +} +.rdw-embedded-modal-btn { + margin: 0 3px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-embedded-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-embedded-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-embedded-modal-btn:focus { + outline: none !important; +} +.rdw-embedded-modal-btn:disabled { + background: #ece9e9; +} +.rdw-embedded-modal-size { + align-items: center; + display: flex; + margin: 8px 0; + justify-content: space-between; +} +.rdw-embedded-modal-size-input { + width: 80%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; +} +.rdw-embedded-modal-size-input:focus { + outline: none; +} + +.rdw-emoji-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-emoji-modal { + overflow: auto; + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-wrap: wrap; + width: 235px; + height: 180px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-emoji-icon { + margin: 2.5px; + height: 24px; + width: 24px; + cursor: pointer; + font-size: 22px; + display: flex; + justify-content: center; + align-items: center; +} + +.rdw-spinner { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +} +.rdw-spinner > div { + width: 12px; + height: 12px; + background-color: #333; + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} +.rdw-spinner .rdw-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} +.rdw-spinner .rdw-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} + +.rdw-image-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} +.rdw-image-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-image-modal-header { + font-size: 15px; + margin: 10px 0; + display: flex; +} +.rdw-image-modal-header-option { + width: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.rdw-image-modal-header-label { + width: 80px; + background: #f1f1f1; + border: 1px solid #f1f1f1; + margin-top: 5px; +} +.rdw-image-modal-header-label-highlighted { + background: #6EB8D4; + border-bottom: 2px solid #0a66b7; +} +.rdw-image-modal-upload-option { + width: 100%; + color: gray; + cursor: pointer; + display: flex; + border: none; + font-size: 15px; + align-items: center; + justify-content: center; + background-color: #f1f1f1; + outline: 2px dashed gray; + outline-offset: -10px; + margin: 10px 0; + padding: 9px 0; +} +.rdw-image-modal-upload-option-highlighted { + outline: 2px dashed #0a66b7; +} +.rdw-image-modal-upload-option-label { + cursor: pointer; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 15px; +} +.rdw-image-modal-upload-option-label span{ + padding: 0 20px; +} +.rdw-image-modal-upload-option-image-preview { + max-width: 100%; + max-height: 200px; +} +.rdw-image-modal-upload-option-input { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} +.rdw-image-modal-url-section { + display: flex; + align-items: center; +} +.rdw-image-modal-url-input { + width: 90%; + height: 35px; + margin: 15px 0 12px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 15px; + padding: 0 5px; +} +.rdw-image-modal-btn-section { + margin: 10px auto 0; +} +.rdw-image-modal-url-input:focus { + outline: none; +} +.rdw-image-modal-btn { + margin: 0 5px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-image-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-image-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-image-modal-btn:focus { + outline: none !important; +} +.rdw-image-modal-btn:disabled { + background: #ece9e9; +} +.rdw-image-modal-spinner { + position: absolute; + top: -3px; + left: 0; + width: 100%; + height: 100%; + opacity: 0.5; +} +.rdw-image-modal-alt-input { + width: 70%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; + margin-left: 5px; +} +.rdw-image-modal-alt-input:focus { + outline: none; +} +.rdw-image-modal-alt-lbl { + font-size: 12px; +} +.rdw-image-modal-size { + align-items: center; + display: flex; + margin: 8px 0; + justify-content: space-between; +} +.rdw-image-modal-size-input { + width: 40%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; +} +.rdw-image-modal-size-input:focus { + outline: none; +} +.rdw-image-mandatory-sign { + color: red; + margin-left: 3px; + margin-right: 3px; +} + +.rdw-remove-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; + flex-wrap: wrap +} + +.rdw-history-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + flex-wrap: wrap +} +.rdw-history-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-history-dropdown { + width: 50px; +} + +.rdw-link-decorator-wrapper { + position: relative; +} +.rdw-link-decorator-icon { + position: absolute; + left: 40%; + top: 0; + cursor: pointer; + background-color: white; +} + +.rdw-mention-link { + text-decoration: none; + color: #1236ff; + background-color: #f0fbff; + padding: 1px 2px; + border-radius: 2px; +} + +.rdw-suggestion-wrapper { + position: relative; +} +.rdw-suggestion-dropdown { + position: absolute; + display: flex; + flex-direction: column; + border: 1px solid #F1F1F1; + min-width: 100px; + max-height: 150px; + overflow: auto; + background: white; + z-index: 100; +} +.rdw-suggestion-option { + padding: 7px 5px; + border-bottom: 1px solid #f1f1f1; +} +.rdw-suggestion-option-active { + background-color: #F1F1F1; +} + +.rdw-hashtag-link { + text-decoration: none; + color: #1236ff; + background-color: #f0fbff; + padding: 1px 2px; + border-radius: 2px; +} + +.rdw-image-alignment-options-popup { + position: absolute; + background: white; + display: flex; + padding: 5px 2px; + border-radius: 2px; + border: 1px solid #F1F1F1; + width: 105px; + cursor: pointer; + z-index: 100; +} +.rdw-alignment-option-left { + justify-content: flex-start; +} +.rdw-image-alignment-option { + height: 15px; + width: 15px; + min-width: 15px; +} +.rdw-image-alignment { + position: relative; +} +.rdw-image-imagewrapper { + position: relative; +} +.rdw-image-center { + display: flex; + justify-content: center; +} +.rdw-image-left { + display: flex; +} +.rdw-image-right { + display: flex; + justify-content: flex-end; +} +.rdw-image-alignment-options-popup-right { + right: 0; +} + +.rdw-editor-main { + height: 100%; + overflow: auto; + box-sizing: border-box; +} +.rdw-editor-toolbar { + padding: 6px 5px 0; + border-radius: 2px; + border: 1px solid #F1F1F1; + display: flex; + justify-content: flex-start; + background: white; + flex-wrap: wrap; + font-size: 15px; + margin-bottom: 5px; + user-select: none; +} +.public-DraftStyleDefault-block { + margin: 1em 0; +} +.rdw-editor-wrapper:focus { + outline: none; +} +.rdw-editor-wrapper { + box-sizing: content-box; +} +.rdw-editor-main blockquote { + border-left: 5px solid #f1f1f1; + padding-left: 5px; + background-color: red; +} +.rdw-editor-main pre { + background: red; + border-radius: 30px; + padding: 1px 10px; +} +/** + * Draft v0.9.1 + * + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:300px;text-align:right;background-color: white ;padding: 0px 5px;}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:right}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:right}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin: 0px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4} + + +/*# sourceMappingURL=react-draft-wysiwyg.css.map*/ \ No newline at end of file diff --git a/src/view/addProduct/Main/index.js b/src/view/addProduct/Main/index.js new file mode 100644 index 0000000..59317de --- /dev/null +++ b/src/view/addProduct/Main/index.js @@ -0,0 +1,29 @@ +import React from "react"; +import { Editor } from "react-draft-wysiwyg"; +import AddPic from "../components/addPic"; +import './editor.css'; + +const MainAP = () => { + return ( +
+

+ اضافه کردن محصول جدید +

+ +
+ +
+
+ +
+
+ ) +} + +export default MainAP; \ No newline at end of file diff --git a/src/view/addProduct/Sidebar/index.js b/src/view/addProduct/Sidebar/index.js new file mode 100644 index 0000000..533a32d --- /dev/null +++ b/src/view/addProduct/Sidebar/index.js @@ -0,0 +1,12 @@ +import React from "react"; + + +const SideAP = () => { + return( +
+ +
+ ) +} + +export default SideAP; \ No newline at end of file diff --git a/src/view/addProduct/components/addPic.js b/src/view/addProduct/components/addPic.js new file mode 100644 index 0000000..7ae4a02 --- /dev/null +++ b/src/view/addProduct/components/addPic.js @@ -0,0 +1,47 @@ +import React, {useState, useEffect} from "react"; + +const AddPic = () => { + const [imageUrl, setImageUrl] = useState([]); + const [selectedImage, setSelectedImage] = useState(null); + + useEffect(() => { + if (selectedImage) { + imageUrl.push(URL.createObjectURL(selectedImage)); + + console.log(imageUrl) + } + + }, [selectedImage]); + return( +
+

+ تصویر شاخص / گالری +

+
+
+ { + imageUrl.length > 0 &&
+ + {/*

تصویر شاخص

*/} +
+ } +
+
+ { + imageUrl.slice(1,imageUrl.length).map((item, index) => ( + + )) + } + + {setSelectedImage(e.target.files[0]);}}/> + +
+
+
+ ) +} + +export default AddPic; \ No newline at end of file diff --git a/src/view/addProduct/index.js b/src/view/addProduct/index.js index ffc8fb7..bca9f26 100644 --- a/src/view/addProduct/index.js +++ b/src/view/addProduct/index.js @@ -1,9 +1,17 @@ import React from "react"; +import MainAP from "./Main"; +import SideAP from "./Sidebar"; const AddProduct = () => { return( -
- skdjfksajflkjasdfasdf +
+
+ +
+
+ +
+
) } diff --git a/tailwind.config.js b/tailwind.config.js index 9aaa4d1..464beec 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,9 @@ module.exports = { red5B : '#c82b5b', red46OP: 'rgba(255, 246, 246, 0.8)', grayEC: '#ececec', + grayFD : '#fdfdfd', + grayE0 : '#e0e0e0', + gray81 : '#818181', red82OP: 'rgba(223, 20, 82, 0.08)', pinkF5: '#fff1f5', pinkD6 : '#ffd6d6', @@ -39,9 +42,13 @@ module.exports = { blue5F : '#05335f', blue7E : '#15517e', blueFF : '#f2f9ff', + blue65 : '#65a9ff', blueE3 : '#4c7fe3', blueDF : '#14b5df', - blue52 : '#132c52' + blue52 : '#132c52', + blue3A : '#00253a', + blueCD : '#1064cd', + }, }, screens: { diff --git a/yarn.lock b/yarn.lock index 596da92..ede4c9e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2475,7 +2475,7 @@ "define-properties" "^1.1.3" "es-abstract" "^1.19.0" -"asap@~2.0.6": +"asap@~2.0.3", "asap@~2.0.6": "integrity" "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" "resolved" "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz" "version" "2.0.6" @@ -3222,7 +3222,7 @@ "resolved" "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.1.tgz" "version" "3.20.1" -"core-js@^3.19.2": +"core-js@^3.19.2", "core-js@^3.6.4": "integrity" "sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg==" "resolved" "https://registry.npmjs.org/core-js/-/core-js-3.20.1.tgz" "version" "3.20.1" @@ -3254,6 +3254,13 @@ "path-type" "^4.0.0" "yaml" "^1.10.0" +"cross-fetch@^3.0.4": + "integrity" "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==" + "resolved" "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz" + "version" "3.1.5" + dependencies: + "node-fetch" "2.6.7" + "cross-spawn@^7.0.2", "cross-spawn@^7.0.3": "integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==" "resolved" "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz" @@ -3821,6 +3828,20 @@ "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz" "version" "10.0.0" +"draft-js@^0.10.x || ^0.11.x", "draft-js@^0.11.7", "draft-js@^0.11.x": + "integrity" "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==" + "resolved" "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz" + "version" "0.11.7" + dependencies: + "fbjs" "^2.0.0" + "immutable" "~3.7.4" + "object-assign" "^4.1.1" + +"draftjs-utils@^0.10.2": + "integrity" "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==" + "resolved" "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz" + "version" "0.10.2" + "duplexer@^0.1.2": "integrity" "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" "resolved" "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz" @@ -4398,6 +4419,25 @@ dependencies: "bser" "2.1.1" +"fbjs-css-vars@^1.0.0": + "integrity" "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" + "resolved" "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz" + "version" "1.0.2" + +"fbjs@^2.0.0": + "integrity" "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==" + "resolved" "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz" + "version" "2.0.0" + dependencies: + "core-js" "^3.6.4" + "cross-fetch" "^3.0.4" + "fbjs-css-vars" "^1.0.0" + "loose-envify" "^1.0.0" + "object-assign" "^4.1.0" + "promise" "^7.1.1" + "setimmediate" "^1.0.5" + "ua-parser-js" "^0.7.18" + "figures@^3.0.0": "integrity" "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==" "resolved" "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz" @@ -4896,6 +4936,11 @@ "relateurl" "^0.2.7" "terser" "^5.10.0" +"html-to-draftjs@^1.5.0": + "integrity" "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==" + "resolved" "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz" + "version" "1.5.0" + "html-webpack-plugin@^5.5.0": "integrity" "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==" "resolved" "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz" @@ -5053,11 +5098,16 @@ "resolved" "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz" "version" "9.0.7" -"immutable@^4.0.0": +"immutable@^4.0.0", "immutable@3.x.x || 4.x.x": "integrity" "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==" "resolved" "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz" "version" "4.0.0" +"immutable@~3.7.4": + "integrity" "sha1-E7TTyxK++hVIKib+Gy665kAHHks=" + "resolved" "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz" + "version" "3.7.6" + "import-cwd@^3.0.0": "integrity" "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==" "resolved" "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz" @@ -6075,6 +6125,13 @@ "resolved" "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz" "version" "1.2.4" +"linkify-it@^2.2.0": + "integrity" "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==" + "resolved" "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz" + "version" "2.2.0" + dependencies: + "uc.micro" "^1.0.1" + "loader-runner@^4.2.0": "integrity" "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==" "resolved" "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz" @@ -6176,7 +6233,7 @@ "chalk" "^4.1.0" "is-unicode-supported" "^0.1.0" -"loose-envify@^1.1.0", "loose-envify@^1.4.0": +"loose-envify@^1.0.0", "loose-envify@^1.1.0", "loose-envify@^1.4.0": "integrity" "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==" "resolved" "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" "version" "1.4.0" @@ -6451,6 +6508,13 @@ "lower-case" "^2.0.2" "tslib" "^2.0.3" +"node-fetch@2.6.7": + "integrity" "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==" + "resolved" "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz" + "version" "2.6.7" + dependencies: + "whatwg-url" "^5.0.0" + "node-forge@^0.10.0": "integrity" "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==" "resolved" "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz" @@ -6507,7 +6571,7 @@ "resolved" "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz" "version" "2.2.0" -"object-assign@^4.1.1": +"object-assign@^4.1.0", "object-assign@^4.1.1": "integrity" "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" "resolved" "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz" "version" "4.1.1" @@ -7466,6 +7530,13 @@ "resolved" "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz" "version" "2.0.3" +"promise@^7.1.1": + "integrity" "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==" + "resolved" "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz" + "version" "7.3.1" + dependencies: + "asap" "~2.0.3" + "promise@^8.1.0": "integrity" "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==" "resolved" "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz" @@ -7609,7 +7680,7 @@ "strip-ansi" "^6.0.1" "text-table" "^0.2.0" -"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=16", "react-dom@>=16.8": +"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x": "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" "version" "17.0.2" @@ -7618,6 +7689,17 @@ "object-assign" "^4.1.1" "scheduler" "^0.20.2" +"react-draft-wysiwyg@^1.14.7": + "integrity" "sha512-D4X8F/ourvQZuqHzCQ6Vs6Tnt6TbGH58kvHQxC+aZGq+45ko2EyatL6G5C/paMaNKDZq2JRe7yAzykneMLpNOg==" + "resolved" "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.14.7.tgz" + "version" "1.14.7" + dependencies: + "classnames" "^2.2.6" + "draftjs-utils" "^0.10.2" + "html-to-draftjs" "^1.5.0" + "linkify-it" "^2.2.0" + "prop-types" "^15.7.2" + "react-dropzone@^11.4.2": "integrity" "sha512-68+T6sWW5L89qJnn3SD1aRazhuRBhTT9JOI1W8vI5YWsfegM4C7tlGbPH1AgEbmZY5s8E8L0QhX0e3VdAa0KWA==" "resolved" "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.5.3.tgz" @@ -7790,7 +7872,7 @@ dependencies: "clsx" "^1.1.1" -"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=16", "react@>=16.8", "react@17.0.2": +"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2" @@ -8287,6 +8369,11 @@ "parseurl" "~1.3.3" "send" "0.17.2" +"setimmediate@^1.0.5": + "integrity" "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + "resolved" "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz" + "version" "1.0.5" + "setprototypeof@1.1.0": "integrity" "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" "resolved" "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz" @@ -8906,6 +8993,11 @@ dependencies: "punycode" "^2.1.1" +"tr46@~0.0.3": + "integrity" "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + "resolved" "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz" + "version" "0.0.3" + "traverse@~0.6.6": "integrity" "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" "resolved" "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz" @@ -8997,6 +9089,16 @@ "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz" "version" "4.5.4" +"ua-parser-js@^0.7.18": + "integrity" "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==" + "resolved" "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz" + "version" "0.7.31" + +"uc.micro@^1.0.1": + "integrity" "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + "resolved" "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz" + "version" "1.0.6" + "unbox-primitive@^1.0.1": "integrity" "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==" "resolved" "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz" @@ -9175,6 +9277,11 @@ "resolved" "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz" "version" "2.1.2" +"webidl-conversions@^3.0.0": + "integrity" "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + "resolved" "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz" + "version" "3.0.1" + "webidl-conversions@^4.0.2": "integrity" "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==" "resolved" "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz" @@ -9331,6 +9438,14 @@ "resolved" "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz" "version" "2.3.0" +"whatwg-url@^5.0.0": + "integrity" "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=" + "resolved" "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz" + "version" "5.0.0" + dependencies: + "tr46" "~0.0.3" + "webidl-conversions" "^3.0.0" + "whatwg-url@^7.0.0": "integrity" "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==" "resolved" "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"