improvement: change over fully to use StrapiV4 design system

removed requirement for @buffetJS. Refactored.

admin/src/components/Wysiwyg/index.js

@@ -2,146 +2,83 @@ import React from "react";
 import PropTypes from "prop-types";
 import { isEmpty } from 'lodash';
 import Editor from "../editorjs";
-
 import cn from 'classnames';
-import { Error } from "@buffetjs/core";
 import Wrapper from './wrapper';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 
+const Wysiwyg = ({
+  name,
+  className,
+  error,
+  description,
+  intlLabel,
+  required,
+  onChange,
+  style,
+  value,
+  disabled,
+}) => {
+  const { formatMessage } = useIntl();
 
-// eslint-disable-next-line react/prefer-stateless-function
-class WysiwygWithErrors extends React.Component {
-  render() {
-    const {
-      autoFocus,
-      className,
-      deactivateErrorHighlight,
-      disabled,
-      error: inputError,
-      inputClassName,
-      inputDescription,
-      inputStyle,
-      label,
-      description,
-      intlLabel,
-      labelIcon,
-      required,
-      name,
-      onBlur: handleBlur,
-      onChange,
-      placeholder,
-      resetProps,
-      style,
-      tabIndex,
-      validations,
-      value,
-      ...rest
-    } = this.props;
-
-    return (
-      <Error
-        inputError={inputError}
-        name={name}
-        type="text"
-        validations={validations}
-      >
-        {({ canCheck, onBlur, error, dispatch }) => {
-          const hasError = Boolean(error);
-          const { formatMessage } = useIntl();
-
-          return (
-
-              <Wrapper size={1} className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`} style={style}>
-
-                <Box>
-                  <Typography variant="pi" fontWeight="bold">
-                    {formatMessage(intlLabel)}
-                  </Typography>
-                  {required && (
-                    <Typography variant="pi" fontWeight="bold" textColor="danger600">
-                      *
-                    </Typography>
-                  )}
-                </Box>
-                <Editor name={name} onChange={onChange} value={value} />
-                {error && (
-                  <Typography variant="pi" textColor="danger600">
-                    {formatMessage({ id: error, defaultMessage: error })}
-                  </Typography>
-                )}
-                {description && (
-                  <Typography variant="pi">{formatMessage(description)}</Typography>
-                )}
-
-              </Wrapper>
-          );
-        }}
-      </Error>
-    );
-  }
-}
+  return (
+    <Wrapper size={1} className={`${cn(!isEmpty(className) && className)}`} style={style}>            
+      <Box>
+        <Typography variant="pi" fontWeight="bold">
+          {formatMessage(intlLabel)}
+        </Typography>
+        {required && (
+          <Typography variant="pi" fontWeight="bold" textColor="danger600">
+            *
+          </Typography>
+        )}
+      </Box>
+      <Editor onChange={onChange} value={value} name={name} disabled={disabled} />
+      {error && (
+        <Typography variant="pi" textColor="danger600">
+          {formatMessage({ id: error, defaultMessage: error })}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="pi">{formatMessage(description)}</Typography>
+      )}
+
+    </Wrapper>
+  )
+};
 
-WysiwygWithErrors.defaultProps = {
-  autoFocus: false,
+Wysiwyg.defaultProps = {
   className: "",
-  deactivateErrorHighlight: false,
-  didCheckErrors: false,
-  disabled: false,
-  error: null,
-  inputClassName: "",
-  inputDescription: "",
-  inputStyle: {},
-  label: "",
-  labelIcon: null,
-  onBlur: false,
-  placeholder: "",
-  resetProps: false,
   style: {},
   tabIndex: "0",
-  validations: {},
   value: null,
+  description: '',
+  disabled: false,
+  error: undefined,
+  intlLabel: '',
+  required: false,
+  value: '',
 };
 
-WysiwygWithErrors.propTypes = {
-  autoFocus: PropTypes.bool,
+Wysiwyg.propTypes = {
   className: PropTypes.string,
-  deactivateErrorHighlight: PropTypes.bool,
-  didCheckErrors: PropTypes.bool,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  description: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  inputClassName: PropTypes.string,
-  inputDescription: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-    PropTypes.shape({
-      id: PropTypes.string,
-      params: PropTypes.object,
-    }),
-  ]),
-  inputStyle: PropTypes.object,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-    PropTypes.shape({
-      id: PropTypes.string,
-      params: PropTypes.object,
-    }),
-  ]),
-  labelIcon: PropTypes.shape({
-    icon: PropTypes.node.isRequired,
-    title: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
   }),
+  required: PropTypes.bool,
+  value: PropTypes.string,
   name: PropTypes.string.isRequired,
-  onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  resetProps: PropTypes.bool,
-  style: PropTypes.object,
-  tabIndex: PropTypes.string,
-  validations: PropTypes.object,
-  value: PropTypes.string,
 };
 
-export default WysiwygWithErrors;
+export default Wysiwyg;

package.json

@@ -12,7 +12,6 @@
     "kind": "plugin"
   },
   "dependencies": {
-    "@buffetjs/core": "^3.3.8",
     "@editorjs/checklist": "1.3.0",
     "@editorjs/code": "2.7.0",
     "@editorjs/delimiter": "1.2.0",
@@ -29,6 +28,7 @@
     "@editorjs/raw": "2.3.0",
     "@editorjs/table": "2.0.1",
     "@editorjs/warning": "1.2.0",
+    "classnames": "^2.3.1",
     "get-file-object-from-local-path": "1.0.2",
     "open-graph-scraper": "4.9.2",
     "react-editor-js": "1.10.0"