20% done with create product page

kidtango · Jun 30, 2020 · a8cf87a · a8cf87a
1 parent 76277be
commit a8cf87a
Show file tree

Hide file tree

Showing 5 changed files with 302 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,8 +21,10 @@
     "@types/react-query": "^1.1.2",
     "@types/react-router-dom": "^5.1.3",
     "@types/uuid": "^8.0.0",
+    "@types/yup": "^0.29.3",
     "change-case": "^4.1.1",
     "clsx": "^1.1.0",
+    "formik": "^2.1.4",
     "graphql-request": "^2.0.0",
     "history": "^4.10.1",
     "immer": "^6.0.9",
@@ -43,7 +45,8 @@
     "react-scripts": "3.4.1",
     "typescript": "^3.7.5",
     "uuid": "^7.0.2",
-    "validate.js": "^0.13.1"
+    "validate.js": "^0.13.1",
+    "yup": "^0.29.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/components/QuillEditor.tsx b/src/components/QuillEditor.tsx
@@ -0,0 +1,86 @@
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+import ReactQuill from 'react-quill';
+import { makeStyles } from '@material-ui/core';
+
+interface QuillEditorProps {
+  className: any;
+  [x: string]: ReactNode;
+}
+
+const QuillEditor: React.FC<QuillEditorProps> = ({ className, ...rest }) => {
+  const classes = useStyles();
+
+  return <ReactQuill className={clsx(classes.root, className)} />;
+};
+
+export default QuillEditor;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& .ql-toolbar': {
+      borderLeft: 'none',
+      borderTop: 'none',
+      borderRight: 'none',
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      '& .ql-picker-label:hover': {
+        color: theme.palette.secondary.main
+      },
+      '& .ql-picker-label.ql-active': {
+        color: theme.palette.secondary.main
+      },
+      '& .ql-picker-item:hover': {
+        color: theme.palette.secondary.main
+      },
+      '& .ql-picker-item.ql-selected': {
+        color: theme.palette.secondary.main
+      },
+      '& button:hover': {
+        color: theme.palette.secondary.main,
+        '& .ql-stroke': {
+          stroke: theme.palette.secondary.main
+        }
+      },
+      '& button:focus': {
+        color: theme.palette.secondary.main,
+        '& .ql-stroke': {
+          stroke: theme.palette.secondary.main
+        }
+      },
+      '& button.ql-active': {
+        '& .ql-stroke': {
+          stroke: theme.palette.secondary.main
+        }
+      },
+      '& .ql-stroke': {
+        stroke: theme.palette.text.primary
+      },
+      '& .ql-picker': {
+        color: theme.palette.text.primary
+      },
+      '& .ql-picker-options': {
+        padding: theme.spacing(2),
+        backgroundColor: theme.palette.background.default,
+        border: 'none',
+        boxShadow: theme.shadows[10],
+        borderRadius: theme.shape.borderRadius
+      }
+    },
+    '& .ql-container': {
+      border: 'none',
+      '& .ql-editor': {
+        fontFamily: theme.typography.fontFamily,
+        fontSize: 16,
+        color: theme.palette.text.primary,
+        '&.ql-blank::before': {
+          color: theme.palette.text.secondary
+        }
+      }
+    }
+  },
+  stepButton: {
+    '& + &': {
+      marginLeft: theme.spacing(2)
+    }
+  }
+}));
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import 'react-quill/dist/quill.snow.css';
 import SettingsContextProvider from 'context/SettingsContext';
 import { restoreSettings } from 'utils/settings';