From ed6685580e16dd8f6b7f214957e1ee215002ae0e Mon Sep 17 00:00:00 2001
From: Kenneth Aasan <k.aasan@sportradar.com>
Date: Wed, 24 Apr 2024 09:45:04 +0200
Subject: [PATCH] refactor: upgrade prettier and format code accordingly (#997)

---
 .eslintrc.json                                |   6 +-
 .gitpod.yml                                   |   2 +-
 .prettierignore                               |   1 +
 library/e2e/plugins/index.js                  |   2 +-
 library/loaders/remove-hashbag-loader.js      |   2 +-
 library/src/components/Bindings.tsx           |   2 +-
 library/src/components/Schema.tsx             | 102 +++++++++---------
 library/src/components/Tags.tsx               |   2 +-
 .../containers/Messages/MessageExample.tsx    |   2 +-
 library/src/containers/Messages/Messages.tsx  |   6 +-
 .../src/containers/Operations/Operation.tsx   |  28 +++--
 .../src/containers/Operations/Operations.tsx  |   6 +-
 library/src/containers/Schemas/Schemas.tsx    |   8 +-
 library/src/containers/Servers/Security.tsx   |   7 +-
 library/src/containers/Servers/Servers.tsx    |   6 +-
 library/src/containers/Sidebar/Sidebar.tsx    |  55 ++++------
 library/src/contexts/useSpec.ts               |   5 +-
 library/src/helpers/message.ts                |  33 +++---
 library/src/helpers/schema.ts                 |  32 +++---
 library/src/helpers/sidebar.ts                |   8 +-
 library/src/helpers/specification.ts          |   6 +-
 library/tailwind.config.js                    |   4 +-
 library/webpack.config.js                     |   4 +-
 package-lock.json                             |  98 +++++++++++++++--
 package.json                                  |   6 +-
 playground/components/FetchSchema.tsx         |   4 +-
 playground/components/Tab.tsx                 |   2 +-
 playground/components/Tabs.tsx                |   2 +-
 playground/components/styled.ts               |  14 ++-
 web-component/src/AsyncApiWebComponent.tsx    |   4 +-
 30 files changed, 265 insertions(+), 194 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index dabc669f2..4cd2f8290 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -20,8 +20,8 @@
     "@typescript-eslint",
     "@typescript-eslint/tslint",
     "sonarjs",
-    "jest"
-    // "prettier" uncomment when prettier is upgraded to the newest version
+    "jest",
+    "prettier"
   ],
   "settings": {
     "next": {
@@ -39,7 +39,7 @@
   },
   "root": true,
   "rules": {
-    // "prettier/prettier": "error" uncomment when prettier is upgraded to the newest version
+    "prettier/prettier": "error",
     "jest/expect-expect": [
       "error",
       {
diff --git a/.gitpod.yml b/.gitpod.yml
index 738349d00..f7d3bc69f 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -6,4 +6,4 @@ tasks:
 # List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
 ports:
   - port: 3000
-    onOpen: open-preview
\ No newline at end of file
+    onOpen: open-preview
diff --git a/.prettierignore b/.prettierignore
index 14e3dce0c..988b27454 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -21,3 +21,4 @@ lerna-debug.log*
 /.github
 
 playground/.next/
+playground/out/
diff --git a/library/e2e/plugins/index.js b/library/e2e/plugins/index.js
index 72005749b..5ab0413d2 100644
--- a/library/e2e/plugins/index.js
+++ b/library/e2e/plugins/index.js
@@ -23,6 +23,6 @@ const webpackOptions = {
   },
 };
 
-module.exports = on => {
+module.exports = (on) => {
   on('file:preprocessor', wp({ webpackOptions }));
 };
diff --git a/library/loaders/remove-hashbag-loader.js b/library/loaders/remove-hashbag-loader.js
index 43960049f..75df48679 100644
--- a/library/loaders/remove-hashbag-loader.js
+++ b/library/loaders/remove-hashbag-loader.js
@@ -1,6 +1,6 @@
 /**
  * Make sure code does not contain properties such as `#property`
  */
-module.exports = function(source) {
+module.exports = function (source) {
   return source.replace(/^#! .*\n/, '');
 };
diff --git a/library/src/components/Bindings.tsx b/library/src/components/Bindings.tsx
index 7b77e7c88..f40deb37f 100644
--- a/library/src/components/Bindings.tsx
+++ b/library/src/components/Bindings.tsx
@@ -17,7 +17,7 @@ export const Bindings: React.FunctionComponent<Props> = ({
     return null;
   }
 
-  const renderedBindings = bindings.all().map(binding => {
+  const renderedBindings = bindings.all().map((binding) => {
     const bindingValue = binding.value();
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const schema = SchemaHelpers.jsonToSchema(bindingValue);
diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
index 328d6cd27..2f632085c 100644
--- a/library/src/components/Schema.tsx
+++ b/library/src/components/Schema.tsx
@@ -98,14 +98,14 @@ export const Schema: React.FunctionComponent<Props> = ({
             {isExpandable && !isCircular && !isArray ? (
               <>
                 <CollapseButton
-                  onClick={() => setExpanded(prev => !prev)}
+                  onClick={() => setExpanded((prev) => !prev)}
                   expanded={expanded}
                 >
                   {renderedSchemaName}
                 </CollapseButton>
                 <button
                   type="button"
-                  onClick={() => setDeepExpand(prev => !prev)}
+                  onClick={() => setDeepExpand((prev) => !prev)}
                   className="ml-1 text-sm text-gray-500"
                 >
                   {deepExpand ? 'Collapse all' : 'Expand all'}
@@ -184,7 +184,7 @@ export const Schema: React.FunctionComponent<Props> = ({
 
                   {/* constraints */}
                   {!!constraints.length &&
-                    constraints.map(c => (
+                    constraints.map((c) => (
                       <span
                         className="bg-purple-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs"
                         key={c}
@@ -280,42 +280,48 @@ export const Schema: React.FunctionComponent<Props> = ({
             <SchemaProperties schema={schema} />
             <SchemaItems schema={schema} />
 
-            {schema.oneOf()?.map((s, idx) => (
-              <Schema
-                key={idx}
-                schema={s}
-                schemaName={SchemaHelpers.applicatorSchemaName(
-                  idx,
-                  'Adheres to',
-                  'Or to',
-                  s.title(),
-                )}
-              />
-            ))}
-            {schema.anyOf()?.map((s, idx) => (
-              <Schema
-                key={idx}
-                schema={s}
-                schemaName={SchemaHelpers.applicatorSchemaName(
-                  idx,
-                  'Can adhere to',
-                  'Or to',
-                  s.title(),
-                )}
-              />
-            ))}
-            {schema.allOf()?.map((s, idx) => (
-              <Schema
-                key={idx}
-                schema={s}
-                schemaName={SchemaHelpers.applicatorSchemaName(
-                  idx,
-                  'Consists of',
-                  'And of',
-                  s.title(),
-                )}
-              />
-            ))}
+            {schema
+              .oneOf()
+              ?.map((s, idx) => (
+                <Schema
+                  key={idx}
+                  schema={s}
+                  schemaName={SchemaHelpers.applicatorSchemaName(
+                    idx,
+                    'Adheres to',
+                    'Or to',
+                    s.title(),
+                  )}
+                />
+              ))}
+            {schema
+              .anyOf()
+              ?.map((s, idx) => (
+                <Schema
+                  key={idx}
+                  schema={s}
+                  schemaName={SchemaHelpers.applicatorSchemaName(
+                    idx,
+                    'Can adhere to',
+                    'Or to',
+                    s.title(),
+                  )}
+                />
+              ))}
+            {schema
+              .allOf()
+              ?.map((s, idx) => (
+                <Schema
+                  key={idx}
+                  schema={s}
+                  schemaName={SchemaHelpers.applicatorSchemaName(
+                    idx,
+                    'Consists of',
+                    'And of',
+                    s.title(),
+                  )}
+                />
+              ))}
             {schema.not() && (
               <Schema schema={schema.not()} schemaName="Cannot adhere to:" />
             )}
@@ -415,14 +421,12 @@ interface AdditionalPropertiesProps {
   schema: SchemaInterface;
 }
 
-const AdditionalProperties: React.FunctionComponent<AdditionalPropertiesProps> = ({
-  schema,
-}) => {
+const AdditionalProperties: React.FunctionComponent<
+  AdditionalPropertiesProps
+> = ({ schema }) => {
   if (
-    schema
-      .extensions()
-      .get(SchemaHelpers.extRenderAdditionalInfo)
-      ?.value() === false
+    schema.extensions().get(SchemaHelpers.extRenderAdditionalInfo)?.value() ===
+    false
   ) {
     return null;
   }
@@ -495,10 +499,8 @@ const AdditionalItems: React.FunctionComponent<AdditionalItemsProps> = ({
   schema,
 }) => {
   if (
-    schema
-      .extensions()
-      .get(SchemaHelpers.extRenderAdditionalInfo)
-      ?.value() === false
+    schema.extensions().get(SchemaHelpers.extRenderAdditionalInfo)?.value() ===
+    false
   ) {
     return null;
   }
diff --git a/library/src/components/Tags.tsx b/library/src/components/Tags.tsx
index 3cc94fe7a..8ddb26789 100644
--- a/library/src/components/Tags.tsx
+++ b/library/src/components/Tags.tsx
@@ -14,7 +14,7 @@ export const Tags: React.FunctionComponent<Props> = ({ tags }) => {
 
   return (
     <ul className="flex flex-wrap leading-normal">
-      {tags.all().map(tag => (
+      {tags.all().map((tag) => (
         <li className="inline-block mt-2 mr-2" key={tag.name()}>
           <Tag tag={tag} />
         </li>
diff --git a/library/src/containers/Messages/MessageExample.tsx b/library/src/containers/Messages/MessageExample.tsx
index 6818da632..d2fcb7c63 100644
--- a/library/src/containers/Messages/MessageExample.tsx
+++ b/library/src/containers/Messages/MessageExample.tsx
@@ -64,7 +64,7 @@ export const Example: React.FunctionComponent<ExampleProps> = ({
     <div className="mt-4">
       <div>
         <CollapseButton
-          onClick={() => setExpanded(prev => !prev)}
+          onClick={() => setExpanded((prev) => !prev)}
           expanded={expanded}
           chevronProps={{
             className: 'fill-current text-gray-200',
diff --git a/library/src/containers/Messages/Messages.tsx b/library/src/containers/Messages/Messages.tsx
index ed8fe8469..876835837 100644
--- a/library/src/containers/Messages/Messages.tsx
+++ b/library/src/containers/Messages/Messages.tsx
@@ -10,11 +10,7 @@ export const Messages: React.FunctionComponent = () => {
   const asyncapi = useSpec();
   const config = useConfig();
   const messages =
-    !asyncapi.components().isEmpty() &&
-    asyncapi
-      .components()
-      .messages()
-      .all();
+    !asyncapi.components().isEmpty() && asyncapi.components().messages().all();
 
   if (!messages || messages.length === 0) {
     return null;
diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
index 78dfad2c3..d262a3a1a 100644
--- a/library/src/containers/Operations/Operation.tsx
+++ b/library/src/containers/Operations/Operation.tsx
@@ -23,7 +23,7 @@ interface Props {
   channel: ChannelInterface;
 }
 
-export const Operation: React.FunctionComponent<Props> = props => {
+export const Operation: React.FunctionComponent<Props> = (props) => {
   const { type = PayloadType.SEND, operation, channelName, channel } = props;
   const config = useConfig();
   if (!operation || !channel) {
@@ -50,7 +50,7 @@ export const Operation: React.FunctionComponent<Props> = props => {
           <div className="mt-2 text-sm">
             <p>Available only on servers:</p>
             <ul className="flex flex-wrap leading-normal">
-              {servers.map(server => (
+              {servers.map((server) => (
                 <li className="inline-block mt-2 mr-2" key={server.id()}>
                   <a
                     href={`#${CommonHelpers.getIdentifier(
@@ -161,7 +161,7 @@ export const Operation: React.FunctionComponent<Props> = props => {
   );
 };
 
-export const OperationInfo: React.FunctionComponent<Props> = props => {
+export const OperationInfo: React.FunctionComponent<Props> = (props) => {
   const { type = PayloadType.SEND, operation, channelName, channel } = props;
   const config = useConfig();
   const operationSummary = operation.summary();
@@ -170,14 +170,12 @@ export const OperationInfo: React.FunctionComponent<Props> = props => {
   const specV = useSpec().version();
   const version = specV.localeCompare('2.6.0', undefined, { numeric: true });
   const isAsyncAPIv2 = version === 0;
-  const {
-    borderColor,
-    typeLabel,
-  } = CommonHelpers.getOperationDesignInformation({
-    type,
-    config,
-    isAsyncAPIv2,
-  });
+  const { borderColor, typeLabel } =
+    CommonHelpers.getOperationDesignInformation({
+      type,
+      config,
+      isAsyncAPIv2,
+    });
   return (
     <>
       <div className="mb-4">
@@ -235,7 +233,7 @@ export const OperationInfo: React.FunctionComponent<Props> = props => {
   );
 };
 
-export const OperationReplyInfo: React.FunctionComponent<Props> = props => {
+export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
   const { type = PayloadType.SEND, operation } = props;
   const [showMessages, setShowMessages] = useState(false);
   const [showChannel, setShowChannel] = useState(false);
@@ -297,7 +295,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = props => {
                 <div className="mt-2">
                   {explicitChannel && (
                     <CollapseButton
-                      onClick={() => setShowChannel(prev => !prev)}
+                      onClick={() => setShowChannel((prev) => !prev)}
                       expanded={showChannel}
                     >
                       <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-none">
@@ -321,7 +319,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = props => {
             {replyMessages.isEmpty() === false && (
               <div className="p-4">
                 <CollapseButton
-                  onClick={() => setShowMessages(prev => !prev)}
+                  onClick={() => setShowMessages((prev) => !prev)}
                   expanded={showMessages}
                 >
                   <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-none">
@@ -403,7 +401,7 @@ export const OperationReplyChannelInfo: React.FunctionComponent<Props> = ({
         <div className="mt-2 text-sm">
           <p>Available only on servers:</p>
           <ul className="flex flex-wrap leading-normal">
-            {servers.map(server => (
+            {servers.map((server) => (
               <li className="inline-block mt-2 mr-2" key={server.id()}>
                 <a
                   href={`#${CommonHelpers.getIdentifier(
diff --git a/library/src/containers/Operations/Operations.tsx b/library/src/containers/Operations/Operations.tsx
index bac3c011c..a185f2acb 100644
--- a/library/src/containers/Operations/Operations.tsx
+++ b/library/src/containers/Operations/Operations.tsx
@@ -5,16 +5,14 @@ import { CommonHelpers } from '../../helpers';
 import { OPERATIONS_TEXT } from '../../constants';
 
 export const Operations: React.FunctionComponent = () => {
-  const operations = useSpec()
-    .operations()
-    .all();
+  const operations = useSpec().operations().all();
   const config = useConfig();
 
   if (!Object.keys(operations).length) {
     return null;
   }
 
-  const operationsList: React.ReactNodeArray = operations.map(operation => {
+  const operationsList: React.ReactNodeArray = operations.map((operation) => {
     const channel = operation.channels().all()[0];
     const channelAddress = channel?.address() ?? '';
     const operationId = CommonHelpers.getOperationIdentifier({
diff --git a/library/src/containers/Schemas/Schemas.tsx b/library/src/containers/Schemas/Schemas.tsx
index 844f3c592..8b62261e7 100644
--- a/library/src/containers/Schemas/Schemas.tsx
+++ b/library/src/containers/Schemas/Schemas.tsx
@@ -10,11 +10,7 @@ export const Schemas: React.FunctionComponent = () => {
   const asyncapi = useSpec();
   const config = useConfig();
   const schemas =
-    !asyncapi.components().isEmpty() &&
-    asyncapi
-      .components()
-      .schemas()
-      .all();
+    !asyncapi.components().isEmpty() && asyncapi.components().schemas().all();
 
   if (!schemas || schemas.length === 0) {
     return null;
@@ -29,7 +25,7 @@ export const Schemas: React.FunctionComponent = () => {
         {SCHEMAS_TEXT}
       </h2>
       <ul>
-        {schemas.map(schema => (
+        {schemas.map((schema) => (
           <li
             className="mb-4"
             key={schema.id()}
diff --git a/library/src/containers/Servers/Security.tsx b/library/src/containers/Servers/Security.tsx
index 2174636e3..39cb91d19 100644
--- a/library/src/containers/Servers/Security.tsx
+++ b/library/src/containers/Servers/Security.tsx
@@ -37,7 +37,7 @@ export const Security: React.FunctionComponent<Props> = ({
     }
   } else {
     const securities: React.ReactNodeArray = Object.values(security)
-      .map(requirement => {
+      .map((requirement) => {
         const requirements = requirement.all();
         const key = Object.keys(requirements)[0];
         const def = securitySchemes[Number(key)];
@@ -102,10 +102,7 @@ function collectSecuritySchemas(
     }
     if (securitySchema.openIdConnectUrl()) {
       schemas.push(
-        <Href
-          href={securitySchema.openIdConnectUrl()!}
-          className="underline"
-        >
+        <Href href={securitySchema.openIdConnectUrl()!} className="underline">
           Connect URL
         </Href>,
       );
diff --git a/library/src/containers/Servers/Servers.tsx b/library/src/containers/Servers/Servers.tsx
index b0a6f5923..f17dff0ee 100644
--- a/library/src/containers/Servers/Servers.tsx
+++ b/library/src/containers/Servers/Servers.tsx
@@ -7,9 +7,7 @@ import { CommonHelpers } from '../../helpers';
 import { SERVERS_TEXT } from '../../constants';
 
 export const Servers: React.FunctionComponent = () => {
-  const servers = useSpec()
-    .servers()
-    .all();
+  const servers = useSpec().servers().all();
   const config = useConfig();
 
   if (!servers.length) {
@@ -25,7 +23,7 @@ export const Servers: React.FunctionComponent = () => {
         {SERVERS_TEXT}
       </h2>
       <ul>
-        {servers.map(server => {
+        {servers.map((server) => {
           const serverName = server.id();
           return (
             <li
diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx
index e65eee678..af0900152 100644
--- a/library/src/containers/Sidebar/Sidebar.tsx
+++ b/library/src/containers/Sidebar/Sidebar.tsx
@@ -17,10 +17,7 @@ export const Sidebar: React.FunctionComponent = () => {
 
   const info = asyncapi.info();
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const logo = info
-    .extensions()
-    .get('x-logo')
-    ?.value();
+  const logo = info.extensions().get('x-logo')?.value();
   const components = asyncapi.components();
   const messages = components?.messages().all();
   const schemas = components?.schemas().all();
@@ -97,7 +94,7 @@ export const Sidebar: React.FunctionComponent = () => {
     <SidebarContext.Provider value={{ setShowSidebar }}>
       <div
         className="burger-menu rounded-full h-16 w-16 bg-white fixed bottom-16 right-8 flex items-center justify-center z-30 cursor-pointer shadow-md bg-teal-500"
-        onClick={() => setShowSidebar(prev => !prev)}
+        onClick={() => setShowSidebar((prev) => !prev)}
         data-lol={showSidebar}
       >
         <svg
@@ -177,7 +174,7 @@ const ServersList: React.FunctionComponent = () => {
   if (showServers === 'byDefault') {
     return (
       <ul className="text-sm mt-2">
-        {servers.map(server => (
+        {servers.map((server) => (
           <ServerItem serverName={server.id()} key={server.id()} />
         ))}
       </ul>
@@ -186,21 +183,18 @@ const ServersList: React.FunctionComponent = () => {
 
   let specTagNames: string[];
   if (showServers === 'bySpecTags') {
-    specTagNames = (
-      asyncapi
-        .info()
-        .tags()
-        .all() ?? []
-    ).map(tag => tag.name());
+    specTagNames = (asyncapi.info().tags().all() ?? []).map((tag) =>
+      tag.name(),
+    );
   } else {
     const serverTagNamesSet = new Set<string>();
-    servers.forEach(server => {
-      server.tags().forEach(t => serverTagNamesSet.add(t.name()));
+    servers.forEach((server) => {
+      server.tags().forEach((t) => serverTagNamesSet.add(t.name()));
     });
     specTagNames = Array.from(serverTagNamesSet);
   }
 
-  const serializedServers: TagObject[] = servers.map(server => ({
+  const serializedServers: TagObject[] = servers.map((server) => ({
     name: server.id(),
     tags: server.tags(),
     data: {},
@@ -246,7 +240,7 @@ const OperationsList: React.FunctionComponent = () => {
   const showOperations = sidebarConfig?.showOperations ?? 'byDefault';
 
   const processedOperations: TagObject<OperationItemProps>[] = operations.map(
-    operation => {
+    (operation) => {
       const operationChannel = operation.channels();
       const operationHrefId = CommonHelpers.getOperationIdentifier({
         operation,
@@ -292,19 +286,16 @@ const OperationsList: React.FunctionComponent = () => {
 
   let operationTagNames: string[];
   if (showOperations === 'bySpecTags') {
-    operationTagNames = (
-      asyncapi
-        .info()
-        .tags()
-        .all() ?? []
-    ).map(tag => tag.name());
+    operationTagNames = (asyncapi.info().tags().all() ?? []).map((tag) =>
+      tag.name(),
+    );
   } else {
     const operationTagNamesSet = new Set<string>();
-    operations.forEach(operation => {
+    operations.forEach((operation) => {
       operation
         .tags()
         .all()
-        .forEach(t => operationTagNamesSet.add(t.name()));
+        .forEach((t) => operationTagNamesSet.add(t.name()));
     });
     operationTagNames = Array.from(operationTagNamesSet);
   }
@@ -347,14 +338,12 @@ const OperationItem: React.FunctionComponent<OperationItemProps> = ({
   const specV = useSpec().version();
   const version = specV.localeCompare('2.6.0', undefined, { numeric: true });
   const isAsyncAPIv2 = version === 0;
-  const {
-    typeLabel,
-    backgroundColor,
-  } = CommonHelpers.getOperationDesignInformation({
-    type,
-    config,
-    isAsyncAPIv2,
-  });
+  const { typeLabel, backgroundColor } =
+    CommonHelpers.getOperationDesignInformation({
+      type,
+      config,
+      isAsyncAPIv2,
+    });
 
   return (
     <li key={`menu-operation-list-${operationHrefId}`}>
@@ -410,7 +399,7 @@ const ItemsByTagItem: React.FunctionComponent<ItemsByTagItemProps> = ({
   return (
     <div>
       <CollapseButton
-        onClick={() => setExpand(prev => !prev)}
+        onClick={() => setExpand((prev) => !prev)}
         chevronProps={{
           className: expand ? '-rotate-180' : '-rotate-90',
         }}
diff --git a/library/src/contexts/useSpec.ts b/library/src/contexts/useSpec.ts
index 785448d7f..92b863166 100644
--- a/library/src/contexts/useSpec.ts
+++ b/library/src/contexts/useSpec.ts
@@ -1,10 +1,9 @@
 import React, { useContext } from 'react';
 import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
-export const SpecificationContext = React.createContext<
-  AsyncAPIDocumentInterface
+export const SpecificationContext =
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
->(null as any);
+  React.createContext<AsyncAPIDocumentInterface>(null as any);
 
 export function useSpec() {
   return useContext(SpecificationContext);
diff --git a/library/src/helpers/message.ts b/library/src/helpers/message.ts
index 8e78deded..aa9bc487d 100644
--- a/library/src/helpers/message.ts
+++ b/library/src/helpers/message.ts
@@ -19,15 +19,18 @@ export class MessageHelpers {
   static sanitizeExample(schema: any): any {
     if (typeof schema === 'object' && schema && !Array.isArray(schema)) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      return Object.entries(schema).reduce((obj, [propertyName, property]) => {
-        if (
-          !propertyName.startsWith('x-parser-') &&
-          !propertyName.startsWith('x-schema-private-')
-        ) {
-          obj[propertyName] = this.sanitizeExample(property);
-        }
-        return obj;
-      }, {} as Record<string, unknown>);
+      return Object.entries(schema).reduce(
+        (obj, [propertyName, property]) => {
+          if (
+            !propertyName.startsWith('x-parser-') &&
+            !propertyName.startsWith('x-schema-private-')
+          ) {
+            obj[propertyName] = this.sanitizeExample(property);
+          }
+          return obj;
+        },
+        {} as Record<string, unknown>,
+      );
     }
     return schema;
   }
@@ -37,9 +40,9 @@ export class MessageHelpers {
   ): MessageExample[] | undefined {
     const examples = msg.examples().all();
 
-    if (examples.some(e => e.hasPayload())) {
+    if (examples.some((e) => e.hasPayload())) {
       const messageExamples = examples
-        .flatMap(e => {
+        .flatMap((e) => {
           if (!e.payload()) {
             return;
           }
@@ -59,7 +62,7 @@ export class MessageHelpers {
     const payload = msg.payload();
     if (payload?.examples()) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      return payload.examples()?.map(example => ({ example }));
+      return payload.examples()?.map((example) => ({ example }));
     }
 
     return undefined;
@@ -69,9 +72,9 @@ export class MessageHelpers {
     msg: MessageInterface,
   ): MessageExample[] | undefined {
     const examples = msg.examples().all();
-    if (examples.some(e => e.hasHeaders())) {
+    if (examples.some((e) => e.hasHeaders())) {
       const messageExamples = examples
-        .flatMap(e => {
+        .flatMap((e) => {
           if (!e.hasHeaders()) {
             return;
           }
@@ -91,7 +94,7 @@ export class MessageHelpers {
     const headers = msg.headers();
     if (headers?.examples()) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      return headers.examples()?.map(example => ({ example }));
+      return headers.examples()?.map((example) => ({ example }));
     }
     return undefined;
   }
diff --git a/library/src/helpers/schema.ts b/library/src/helpers/schema.ts
index 176c72a3d..12846eab9 100644
--- a/library/src/helpers/schema.ts
+++ b/library/src/helpers/schema.ts
@@ -88,7 +88,7 @@ export class SchemaHelpers {
 
     let type = this.inferType(schema);
     if (Array.isArray(type)) {
-      return type.map(t => this.toType(t, schema)).join(' | ');
+      return type.map((t) => this.toType(t, schema)).join(' | ');
     }
     type = this.toType(type, schema);
     const combinedType = this.toCombinedType(schema);
@@ -220,7 +220,7 @@ export class SchemaHelpers {
       return undefined;
     }
     const obj: Record<string, Record<string, unknown>> = {};
-    urlVariables.all().forEach(variable => {
+    urlVariables.all().forEach((variable) => {
       obj[variable.id()] = { ...(variable.json() || {}) };
       obj[variable.id()].type = 'string';
     });
@@ -242,7 +242,7 @@ export class SchemaHelpers {
       return undefined;
     }
     const obj: Record<string, Record<string, unknown>> = {};
-    parameters.all().forEach(parameter => {
+    parameters.all().forEach((parameter) => {
       const parameterSchema = parameter.schema();
       obj[parameter.id()] = { ...(parameterSchema?.json() ?? {}) };
       obj[parameter.id()].description = parameter.hasDescription()
@@ -384,15 +384,16 @@ export class SchemaHelpers {
     items: SchemaInterface[],
     schema: SchemaInterface,
   ): string {
-    const types = items.map(item => this.toSchemaType(item)).join(', ');
+    const types = items.map((item) => this.toSchemaType(item)).join(', ');
     const additionalItems = schema.additionalItems();
     if (additionalItems !== undefined && additionalItems !== false) {
       const additionalType =
         additionalItems === true
           ? SchemaCustomTypes.ANY
           : this.toSchemaType(additionalItems);
-      return `tuple<${types ||
-        SchemaCustomTypes.UNKNOWN}, ...optional<${additionalType}>>`;
+      return `tuple<${
+        types || SchemaCustomTypes.UNKNOWN
+      }, ...optional<${additionalType}>>`;
     }
     return `tuple<${types || SchemaCustomTypes.UNKNOWN}>`;
   }
@@ -419,7 +420,7 @@ export class SchemaHelpers {
       if (Array.isArray(types)) {
         // if types have `integer` and `number` types, `integer` is unnecessary
         if (types.includes('integer') && types.includes('number')) {
-          types = types.filter(t => t !== 'integer');
+          types = types.filter((t) => t !== 'integer');
         }
         return types.length === 1 ? types[0] : types;
       }
@@ -433,12 +434,12 @@ export class SchemaHelpers {
     }
     const enumValue = schema.enum();
     if (Array.isArray(enumValue) && enumValue.length) {
-      const inferredType = Array.from(new Set(enumValue.map(e => typeof e)));
+      const inferredType = Array.from(new Set(enumValue.map((e) => typeof e)));
       return inferredType.length === 1 ? inferredType[0] : inferredType;
     }
 
     const schemaKeys = Object.keys(schema.json() || {}) || [];
-    const hasInferredTypes = jsonSchemaKeywords.some(key =>
+    const hasInferredTypes = jsonSchemaKeywords.some((key) =>
       schemaKeys.includes(key),
     );
     if (hasInferredTypes === true) {
@@ -544,17 +545,20 @@ export class SchemaHelpers {
       return {
         type: 'array',
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        items: value.map(v => this.jsonFieldToSchema(v)),
+        items: value.map((v) => this.jsonFieldToSchema(v)),
         [this.extRenderAdditionalInfo]: false,
       };
     }
     return {
       type: 'object',
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      properties: Object.entries(value).reduce((obj, [k, v]) => {
-        obj[k] = this.jsonFieldToSchema(v);
-        return obj;
-      }, {} as Record<string, unknown>),
+      properties: Object.entries(value).reduce(
+        (obj, [k, v]) => {
+          obj[k] = this.jsonFieldToSchema(v);
+          return obj;
+        },
+        {} as Record<string, unknown>,
+      ),
       [this.extRenderAdditionalInfo]: false,
     };
   }
diff --git a/library/src/helpers/sidebar.ts b/library/src/helpers/sidebar.ts
index 02485632e..4ac5dabd6 100644
--- a/library/src/helpers/sidebar.ts
+++ b/library/src/helpers/sidebar.ts
@@ -20,11 +20,11 @@ export function filterObjectsByTags<T>(
 ): SortedReturnType {
   const taggedObjects = new Set<TagObject>();
   const tagged = new Map<string, TagObject[]>();
-  tags.forEach(tag => {
+  tags.forEach((tag) => {
     const taggedForTag: TagObject[] = [];
-    objects.forEach(obj => {
+    objects.forEach((obj) => {
       const objTags = obj.tags;
-      const nameTags = (objTags.all() ?? []).map(t => t.name());
+      const nameTags = (objTags.all() ?? []).map((t) => t.name());
       const hasTag = nameTags.includes(tag);
       if (hasTag) {
         taggedForTag.push(obj);
@@ -37,7 +37,7 @@ export function filterObjectsByTags<T>(
   });
 
   const untagged: TagObject[] = [];
-  objects.forEach(obj => {
+  objects.forEach((obj) => {
     if (!taggedObjects.has(obj)) {
       untagged.push(obj);
     }
diff --git a/library/src/helpers/specification.ts b/library/src/helpers/specification.ts
index cfb770d47..121de9e46 100644
--- a/library/src/helpers/specification.ts
+++ b/library/src/helpers/specification.ts
@@ -64,7 +64,7 @@ export class SpecificationHelpers {
     }
     const tagsArr = Array.isArray(tags) ? tags : [tags];
     return tagsToCheck.some((tag: TagInterface) =>
-      tagsArr.some(t => t.name() === tag.name()),
+      tagsArr.some((t) => t.name() === tag.name()),
     );
   }
 
@@ -78,7 +78,7 @@ export class SpecificationHelpers {
         operation
           .tags()
           .all()
-          .forEach(tag => tags.set(tag.name(), tag));
+          .forEach((tag) => tags.set(tag.name(), tag));
       }
     });
     return Array.from(tags.values());
@@ -94,7 +94,7 @@ export class SpecificationHelpers {
         server
           .tags()
           .all()
-          .forEach(tag => {
+          .forEach((tag) => {
             if (tags[tag.name()]) {
               tags[tag.name()].push(_);
             } else {
diff --git a/library/tailwind.config.js b/library/tailwind.config.js
index ea5d3af61..885e9bd11 100644
--- a/library/tailwind.config.js
+++ b/library/tailwind.config.js
@@ -136,12 +136,12 @@ module.exports = {
       '5xl': '3rem',
       '6xl': '4rem',
     },
-    borderColor: theme => ({
+    borderColor: (theme) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.gray.400', 'currentColor'),
     }),
     extend: {
-      typography: theme => ({
+      typography: (theme) => ({
         DEFAULT: {
           css: {
             pre: {
diff --git a/library/webpack.config.js b/library/webpack.config.js
index 9fddc67b5..88947645b 100644
--- a/library/webpack.config.js
+++ b/library/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 const umdBundle = {
diff --git a/package-lock.json b/package-lock.json
index 29a80798d..10d2ab96e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,12 +19,13 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
+        "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-sonarjs": "^0.25.1",
         "lerna": "^8.1.2",
         "markdown-toc": "^1.2.0",
         "markdownlint-cli": "^0.17.0",
-        "prettier": "^1.18.2",
+        "prettier": "^3.2.5",
         "react-split": "^2.0.9",
         "tslib": "^1.10.0",
         "typescript": "^5.3.3"
@@ -4492,6 +4493,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.25",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
@@ -11213,6 +11226,36 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.8.6"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.34.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
@@ -11744,6 +11787,12 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -21303,15 +21352,30 @@
       }
     },
     "node_modules/prettier": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/pretty-bytes": {
@@ -24604,6 +24668,28 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/synckit": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/synckit/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
     "node_modules/tailwindcss": {
       "version": "2.2.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
diff --git a/package.json b/package.json
index c90cc6930..bc8e158df 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "build:webcomponent": "cd web-component && npm run bundle",
     "build:playground": "cd playground && npm run build",
     "lint": "eslint --max-warnings 0 .",
-    "lint:fix": "eslint --max-warnings 0 . --fix",
+    "lint:fix": "eslint --max-warnings 0 . --fix && npm run format",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,html,css,yaml,yml}\"",
     "markdownlint": "markdownlint **/*.md",
     "prepublishOnly": "npm run build",
     "gen-readme-toc": "markdown-toc -i README.md",
@@ -53,12 +54,13 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-sonarjs": "^0.25.1",
     "lerna": "^8.1.2",
     "markdown-toc": "^1.2.0",
     "markdownlint-cli": "^0.17.0",
-    "prettier": "^1.18.2",
+    "prettier": "^3.2.5",
     "react-split": "^2.0.9",
     "tslib": "^1.10.0",
     "typescript": "^5.3.3"
diff --git a/playground/components/FetchSchema.tsx b/playground/components/FetchSchema.tsx
index 62aa6871d..1611aedcc 100644
--- a/playground/components/FetchSchema.tsx
+++ b/playground/components/FetchSchema.tsx
@@ -24,7 +24,7 @@ class FetchSchema extends Component<Props, State> {
         <InputField
           value={link}
           placeholder="Link for external schema"
-          onChange={e => this.setState({ link: e.target.value })}
+          onChange={(e) => this.setState({ link: e.target.value })}
         />
         <Button type="button" onClick={this.fetchSchemaFromExternalResources}>
           Fetch schema
@@ -35,7 +35,7 @@ class FetchSchema extends Component<Props, State> {
 
   private fetchSchemaFromExternalResources = async () => {
     try {
-           new URL(this.state.link);
+      new URL(this.state.link);
     } catch (e) {
       return;
     }
diff --git a/playground/components/Tab.tsx b/playground/components/Tab.tsx
index dd9ef90e5..0a46bd414 100644
--- a/playground/components/Tab.tsx
+++ b/playground/components/Tab.tsx
@@ -17,7 +17,7 @@ class Tab extends Component<TabProps> {
     return (
       <TabWrapper key={tabIndex}>
         <TabLink
-          onClick={event => {
+          onClick={(event) => {
             event.preventDefault();
             if (parentCallback && tabIndex) {
               parentCallback(tabIndex);
diff --git a/playground/components/Tabs.tsx b/playground/components/Tabs.tsx
index fd077ab7f..9e1c384f6 100644
--- a/playground/components/Tabs.tsx
+++ b/playground/components/Tabs.tsx
@@ -58,7 +58,7 @@ class Tabs extends Component<Props, State> {
     const children = []
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
       .concat(...(this.props.children as any))
-      .filter(child => child !== null && child !== undefined);
+      .filter((child) => child !== null && child !== undefined);
 
     return (
       <TabsWrapper>
diff --git a/playground/components/styled.ts b/playground/components/styled.ts
index 99bd9ad3a..2ef6c674f 100644
--- a/playground/components/styled.ts
+++ b/playground/components/styled.ts
@@ -105,7 +105,7 @@ export const RefreshIcon = styled.div<RefreshIconProps>`
   font-weight: 700;
   color: #f77669;
   transition: 0.2s all linear;
-  opacity: ${props => (props.$show ? '1' : '0')};
+  opacity: ${(props) => (props.$show ? '1' : '0')};
   animation-name: spin;
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
@@ -145,7 +145,7 @@ export const TabLink = styled.div<TabLinkProps>`
   padding: 19px 0 15px;
   border: none;
   position: relative;
-  color: ${props => (props.$active ? '#c3e88d' : '#f77669')};
+  color: ${(props) => (props.$active ? '#c3e88d' : '#f77669')};
   font-size: 14px;
   outline: none;
   transition: 0.2s color linear;
@@ -161,7 +161,7 @@ export const TabLink = styled.div<TabLinkProps>`
     bottom: 0;
     display: block;
     position: absolute;
-    height: ${props => (props.$active ? '3px' : '0px')};
+    height: ${(props) => (props.$active ? '3px' : '0px')};
     width: 100%;
     border-radius: 2px;
     background-color: #c3e88d;
@@ -199,7 +199,9 @@ export const InputField = styled.input`
   border: 3px solid #f77669;
   color: #f77669;
   border-radius: 6px;
-  transition: 0.2s border, color linear;
+  transition:
+    0.2s border,
+    color linear;
   font-size: 14px;
 
   &:hover {
@@ -219,7 +221,9 @@ export const Button = styled.button`
   font-size: 14px;
   margin-left: 12px;
   white-space: nowrap;
-  transition: 0.2s border, color linear;
+  transition:
+    0.2s border,
+    color linear;
   cursor: pointer;
 
   &:hover {
diff --git a/web-component/src/AsyncApiWebComponent.tsx b/web-component/src/AsyncApiWebComponent.tsx
index ef744ffec..9bcb139ab 100644
--- a/web-component/src/AsyncApiWebComponent.tsx
+++ b/web-component/src/AsyncApiWebComponent.tsx
@@ -53,9 +53,7 @@ export interface AsyncApiWebComponentProps extends AsyncApiProps {
   schemaUrl: string;
 }
 
-export class AsyncApiWebComponent extends React.Component<
-  AsyncApiWebComponentProps
-> {
+export class AsyncApiWebComponent extends React.Component<AsyncApiWebComponentProps> {
   private lastUrlCheck: number = Date.now();
 
   shouldComponentUpdate(nextProps: Readonly<AsyncApiWebComponentProps>) {