@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.5

package/src/components/JsonInput/JsonInput.tsx

@@ -1,149 +1,124 @@
-import React, { useEffect, useState } from 'react'
-import yaml from 'js-yaml'
-import styles from './style.module.scss'
-import regex from '../../constants/regex'
-
-const errorMapping = {
-  BOTH: 'Invalid JSON or YAML format',
-  JSON: 'Invalid JSON format',
-  YML: 'Invalid YAML format',
-}
-
-const JsonInput = ({
-  placeholder,
-  label,
-  value,
-  onValidation,
-  onChange,
-  dataId,
-  className = '',
-  errorMessage,
-  acceptType = 'BOTH',
-  fieldIsDisabled,
-  withFooter = true,
-}) => {
-  const [isValid, setIsValid] = useState()
-  const [disabledBeautify, setDisabledBeautify] = useState(true)
-
-  const handlePrettify = (e) => {
-    if (value === '') return
-    e.preventDefault()
-    try {
-      let prettifiedData
-      if ((acceptType === 'BOTH' || acceptType === 'JSON') && isValidJson(value)) {
-        // If it's valid JSON, prettify JSON
-        prettifiedData = JSON.stringify(JSON.parse(value), null, 2)
-      } else if (acceptType === 'BOTH' || acceptType === 'YML') {
-        // If it's not valid JSON, prettify YAML
-        prettifiedData = yaml.dump(yaml.load(value), { indent: 0 })
-      }
-      onChange(prettifiedData)
-      setIsValid(true) // Reset validity status
-    } catch (error) {
-      console.error(error)
-      setIsValid(false)
-    }
-  }
-
-  // Function to check if input is valid JSON
-  const isValidJson = (str) => {
-    try {
-      JSON.parse(str)
-      return true
-    } catch (error) {
-      return false
-    }
-  }
-
-  const checkIsValid = () => {
-    if (acceptType === 'BOTH' || acceptType === 'JSON') {
-      return isValidJson(value)
-    } else if (acceptType === 'BOTH' || acceptType === 'YML') {
-      try {
-        // Try parsing as YAML
-        yaml.load(value)
-        return true
-      } catch (error) {
-        console.error(error)
-        return false
-      }
-    }
-  }
-
-  useEffect(() => {
-    try {
-      handlePrettify(value)
-    } catch {}
-  }, [])
-
-  return (
-    <div
-      className={`${styles['json-editor-container']} ${className} ${
-        fieldIsDisabled ? styles.disabled : ''
-      }`}
-    >
-      {label && <p className={`${styles['json-editor-label']}`}>{label}</p>}
-      <div
-        className={`${styles['json-editor']} ${
-          value !== '' && isValid === false ? styles.invalid : ''
-        }`}
-      >
-        <textarea
-          disabled={fieldIsDisabled}
-          data-id={dataId}
-          value={value}
-          onChange={(e) => {
-            if (fieldIsDisabled) return
-            if (regex.ASCII.test(e.target.value)) {
-              setIsValid(undefined)
-              setDisabledBeautify(true)
-              onChange(e.target.value)
-            }
-          }}
-          onPaste={(e) => {
-            if (fieldIsDisabled) return
-            if (regex.ASCII.test(e.target.value)) {
-              setIsValid(undefined)
-              setDisabledBeautify(true)
-              onChange(e.target.value)
-            }
-          }}
-          min="1"
-          placeholder={placeholder}
-        />
-        {withFooter && (
-          <div className={`${styles['actions-container']}`}>
-            <button
-              type="button"
-              className={styles.validate}
-              onClick={() => {
-                const valid = checkIsValid()
-                setIsValid(valid)
-                onValidation(valid)
-                setDisabledBeautify(!checkIsValid())
-              }}
-              data-id={`${dataId}-VALIDATE-BUTTON`}
-              disabled={value === ''}
-            >
-              Validate
-            </button>
-            <button
-              type="button"
-              disabled={value === '' || disabledBeautify}
-              data-id={`${dataId}-BEAUTIFY-BUTTON`}
-              className={styles.beautify}
-              onClick={handlePrettify}
-            >
-              Beautify
-            </button>
-          </div>
-        )}
-      </div>
-      {(errorMessage || (value !== '' && isValid === false)) && (
-        <p className={styles['error-message']}>{errorMessage || errorMapping[acceptType]}</p>
-      )}
-    </div>
-  )
-}
-
-export default JsonInput
+import React, { useEffect, useState } from 'react'
+import yaml from 'js-yaml'
+import styles from './style.module.scss'
+
+const JsonInput = ({
+  placeholder,
+  label,
+  value,
+  onValidation,
+  onChange,
+  dataId,
+  className = '',
+  errorMessage,
+  acceptType = 'BOTH',
+  fieldIsDisabled,
+}) => {
+  const [isValid, setIsValid] = useState()
+  const [disabledBeautify, setDisabledBeautify] = useState(true)
+
+  const handlePrettify = (e) => {
+    if (value === '') return
+    e.preventDefault()
+    try {
+      let prettifiedData
+      if ((acceptType === 'BOTH' || acceptType === 'JSON') && isValidJson(value)) {
+        // If it's valid JSON, prettify JSON
+        prettifiedData = JSON.stringify(JSON.parse(value), null, 2)
+      } else if (acceptType === 'BOTH' || acceptType === 'YML') {
+        // If it's not valid JSON, prettify YAML
+        prettifiedData = yaml.dump(yaml.load(value), { indent: 0 })
+      }
+      onChange(prettifiedData)
+      setIsValid(true) // Reset validity status
+    } catch (error) {
+      console.error(error)
+      setIsValid(false)
+    }
+  }
+
+  // Function to check if input is valid JSON
+  const isValidJson = (str) => {
+    try {
+      JSON.parse(str)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  const checkIsValid = () => {
+    if (acceptType === 'BOTH' || acceptType === 'JSON') {
+      return isValidJson(value)
+    } else if (acceptType === 'BOTH' || acceptType === 'YML') {
+      try {
+        // Try parsing as YAML
+        yaml.load(value)
+        return true
+      } catch (error) {
+        console.error(error)
+        return false
+      }
+    }
+  }
+
+  useEffect(() => {
+    try {
+      handlePrettify(value)
+    } catch {}
+  }, [])
+
+  return (
+    <div className={`${styles['json-editor-container']} ${className}`}>
+      {label && <p className={`${styles['json-editor-label']}`}>{label}</p>}
+      <div
+        className={`${styles['json-editor']} ${
+          value !== '' && isValid === false ? styles.invalid : ''
+        }`}
+      >
+        <textarea
+          data-id={dataId}
+          value={value}
+          onChange={(e) => {
+            if (fieldIsDisabled) return
+            setIsValid(undefined)
+            setDisabledBeautify(true)
+            onChange(e.target.value)
+          }}
+          min="1"
+          placeholder={placeholder}
+        />
+        <div className={`${styles['actions-container']}`}>
+          <button
+            type="button"
+            className={styles.validate}
+            onClick={() => {
+              const valid = checkIsValid()
+              setIsValid(valid)
+              onValidation(valid)
+              setDisabledBeautify(!checkIsValid())
+            }}
+            data-id={`${dataId}-VALIDATE-BUTTON`}
+            disabled={value === ''}
+          >
+            Validate
+          </button>
+          <button
+            type="button"
+            disabled={value === '' || disabledBeautify}
+            data-id={`${dataId}-BEAUTIFY-BUTTON`}
+            className={styles.beautify}
+            onClick={handlePrettify}
+          >
+            Beautify
+          </button>
+        </div>
+      </div>
+      {(errorMessage || (value !== '' && isValid === false)) && (
+        <p className={styles['error-message']}>{errorMessage || 'Invalid JSON or YAML format'}</p>
+      )}
+    </div>
+  )
+}
+
+export default JsonInput

package/src/components/JsonInput/style.module.scss

@@ -1,133 +1,123 @@
-.json-editor-container {
-  overflow: hidden;
-  border-bottom-right-radius: 0.3125rem;
-  border-bottom-left-radius: 0.3125rem;
-
-  .json-editor-label {
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.25rem;
-    margin-bottom: 0.3125rem;
-  }
-
-  .json-editor {
-    display: flex;
-    flex-direction: column;
-    background-color: #142452;
-    width: 100%;
-    outline: 1px solid transparent;
-    position: relative;
-    overflow: hidden;
-
-    .actions-container {
-      width: 100%;
-      height: 5rem;
-      padding: 1.25rem;
-      border-radius: 0 0 0.3125rem 0.3125rem;
-      background: #101e47;
-      display: flex;
-      flex-direction: row;
-      gap: 1.25rem;
-      align-items: center;
-
-      .validate {
-        color: #fff;
-        text-align: center;
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.25rem;
-        width: 8.75rem;
-        padding: 0.625rem 2.25rem;
-        background-color: rgba(240, 248, 255, 0);
-        border-radius: 0.3125rem;
-        border: 0.0625rem solid #4d75d8;
-        cursor: pointer;
-
-        &:disabled {
-          color: #babdcc;
-          border-color: #a2a5b6;
-        }
-      }
-
-      .beautify {
-        color: #fff;
-        text-align: center;
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.25rem;
-        width: 8.75rem;
-        padding: 0.625rem 2.25rem;
-        background-color: rgba(240, 248, 255, 0);
-        border-radius: 0.3125rem;
-        border: 1px solid #babdcc;
-        cursor: pointer;
-
-        &:disabled {
-          color: #a2a5b6;
-          border-color: #a2a5b6;
-        }
-      }
-    }
-
-    textarea {
-      width: 100%;
-      padding: 1.25rem;
-      font-size: 0.875rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 1.25rem;
-      color: white;
-      height: 25rem;
-      background-color: #142452;
-      border: none;
-      resize: none;
-
-      &:focus,
-      &:focus-within,
-      &:focus-visible &:active {
-        outline: none;
-        border: none;
-      }
-
-      &::-webkit-scrollbar {
-        width: 0.5rem;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: #828699;
-        border: none;
-        border-color: transparent;
-        border-top-left-radius: 0;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: #d8dae5;
-        border: none;
-        border-color: transparent;
-        border-radius: 0;
-      }
-    }
-
-    &.invalid {
-      outline: 1px solid #ce2828 !important;
-    }
-  }
-
-  .error-message {
-    color: #ce2828;
-    font-size: 0.75rem;
-    line-height: 1.25rem;
-    margin-top: 0.625rem;
-  }
-
-  &.disabled {
-    .json-editor {
-      textarea {
-        background-color: white;
-        color: #12131a;
-      }
-    }
-  }
-}
+.json-editor-container {
+  .json-editor-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    margin-bottom: 0.3125rem;
+  }
+
+  .json-editor {
+    display: flex;
+    flex-direction: column;
+    background-color: #142452;
+    width: 100%;
+    border-radius: 0.3125rem;
+    margin-bottom: -0.5rem;
+    outline: 1px solid transparent;
+    position: relative;
+
+    .actions-container {
+      width: 100%;
+      height: 5rem;
+      padding: 1.25rem;
+      border-radius: 0 0 0.3125rem 0.3125rem;
+      background: #101e47;
+      display: flex;
+      flex-direction: row;
+      gap: 1.25rem;
+      align-items: center;
+
+      .validate {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 0.0625rem solid #4d75d8;
+        cursor: pointer;
+
+        &:disabled {
+          color: #babdcc;
+          border-color: #a2a5b6;
+        }
+      }
+
+      .beautify {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 1px solid #babdcc;
+        cursor: pointer;
+
+        &:disabled {
+          color: #a2a5b6;
+          border-color: #a2a5b6;
+        }
+      }
+    }
+
+    textarea {
+      width: 100%;
+      padding: 1.25rem;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      color: white;
+      height: 25rem;
+      background-color: #142452;
+      border: none;
+      resize: none;
+      border-radius: 0.3125rem;
+
+      &:focus,
+      &:focus-within,
+      &:focus-visible &:active {
+        outline: none;
+        border: none;
+      }
+
+      &::-webkit-scrollbar {
+        width: 0.5rem;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #828699;
+        border: none;
+        border-color: transparent;
+        border-top-right-radius: 0.25rem;
+        border-top-left-radius: 0;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #d8dae5;
+        border: none;
+        border-color: transparent;
+        border-radius: 0;
+      }
+    }
+
+    &.invalid {
+      outline: 1px solid #ce2828 !important;
+    }
+  }
+
+  .error-message {
+    color: #ce2828;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: 0.625rem;
+  }
+}