refactor: upgrade prettier and format code accordingly

.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",
       {

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);

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;
   }

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>

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',

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;

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(

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({

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()}

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>,
       );

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