fix: resolves 10 of 14 SonarCloud code smells

library/jest.setup.js

@@ -1,12 +1,22 @@
-const { TextDecoder, TextEncoder } = require('util');
+const { TextDecoder, TextEncoder } = process.getBuiltinModule('util');
 
 // jsdom does not implement the Encoding API, so suites using the
 // `@jest-environment jsdom` docblock run without TextDecoder/TextEncoder.
 // protobufjs v8, pulled in by @asyncapi/protobuf-schema-parser, constructs a
 // TextDecoder at module scope, which makes those suites fail to load.
-if (typeof global.TextDecoder === 'undefined') {
-  global.TextDecoder = TextDecoder;
-}
-if (typeof global.TextEncoder === 'undefined') {
-  global.TextEncoder = TextEncoder;
+
+if (global.TextDecoder === undefined) {
+  Object.defineProperty(global, 'TextDecoder', {
+    value: TextDecoder,
+    writable: true,
+    configurable: true,
+  });
 }
+
+if (global.TextEncoder === undefined) {
+  Object.defineProperty(global, 'TextEncoder', {
+    value: TextEncoder,
+    writable: true,
+    configurable: true,
+  });
+}

library/src/components/Extensions.tsx

@@ -42,14 +42,12 @@ export const Extensions: React.FunctionComponent<Props> = ({
     <div>
       <div className="flex py-2">
         <div className="min-w-1/4">
-          <>
-            <CollapseButton
-              onClick={() => setExpanded((prev) => !prev)}
-              expanded={expanded}
-            >
-              <span className={`break-anywhere text-sm ${name}`}>{name}</span>
-            </CollapseButton>
-          </>
+          <CollapseButton
+            onClick={() => setExpanded((prev) => !prev)}
+            expanded={expanded}
+          >
+            <span className={`break-anywhere text-sm ${name}`}>{name}</span>
+          </CollapseButton>
         </div>
       </div>
       <div

library/src/components/Schema/Schema.tsx

@@ -232,6 +232,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                   <div className="flex gap-1">
                     {rulesExist && (
                       <button
+                        type="button"
                         className={`text-sm font-semibold text-gray-900 ${tabOpen == 'RULES' ? 'bg-gray-400' : 'bg-gray-200'} p-2 rounded-t cursor-pointer`}
                         onClick={() => setTabOpen('RULES')}
                         role="tab"
@@ -243,6 +244,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                     )}
                     {conditionsExist && (
                       <button
+                        type="button"
                         className={`text-sm font-semibold text-gray-900 ${tabOpen == 'CONDITIONS' ? 'bg-gray-400' : 'bg-gray-200'} p-2 rounded-t cursor-pointer`}
                         onClick={() => setTabOpen('CONDITIONS')}
                         role="tab"

library/src/components/supportedExtensions/XExtension.tsx

@@ -7,7 +7,7 @@ import { ExtensionComponentProps } from '../../types';
  */
 export default function XExtension({
   propertyValue,
-}: ExtensionComponentProps<string>) {
+}: Readonly<ExtensionComponentProps<string>>) {
   return (
     <a
       title={`https://x.com/${propertyValue}`}

library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import { ReactNode } from 'react';
+import React, { useEffect, useState, type ReactNode } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { ErrorObject } from '../../types';
 import { Error } from '../Error/Error';

library/src/styles/default.css

@@ -22,12 +22,6 @@
     @apply lg:w-56;
   }
 
-  /*.container\:xl .sidebar--content {
-    @apply absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-  }*/
-
   .container\:base .panel-item {
     @apply 2xl:flex;
   }