@digi-frontend/dgate-api-documentation 1.0.18 → 1.0.20

package/dist/styles.css

@@ -1,4 +1,103 @@
-.methodAccordion {
+.apiInfoForm {
+  display: grid;
+  padding: 1.25rem 1.875rem;
+  gap: 1.25rem;
+}
+.apiInfoForm .paramsTable .paramDescContainer {
+  display: flex;
+}
+.apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
+  height: inherit;
+  width: 1px;
+  background-color: #d8dae5;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
+  stroke-width: 0.1;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
+  padding: 0;
+  margin-right: 1.25rem;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  color: #12131a;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
+  margin-block: auto;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
+  fill: #12131a;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
+  padding: 0;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
+  margin-block: auto;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
+  width: 1.125rem;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) {
+  margin-block: auto;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg {
+  width: 1.125rem;
+}
+.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg path {
+  fill: #3aaa35;
+}
+.apiInfoForm .paramsTable .editDescTooltipContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+.apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
+  margin-inline: 0.625rem;
+}
+.apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #d8dae5;
+}
+.apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
+  content: "*";
+  color: red;
+  transform: translateX(0.125rem);
+}
+.apiInfoForm .apiDocRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem;
+}
+.apiInfoForm .apiInfoForm_tagsChips {
+  margin-top: -1.25rem;
+}
+.apiInfoForm .editDescTooltipContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+.apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
+  margin-inline: 0.625rem;
+}
+.apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #d8dae5;
+}
+.apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
+  content: "*";
+  color: red;
+  transform: translateX(0.125rem);
+}.methodAccordion {
   border: none !important;
   box-shadow: none !important;
   margin-bottom: 0 !important;
@@ -106,6 +205,15 @@
 .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
   width: 1.125rem;
 }
+.methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn:not(:global(.disabled)):global(.success) :global(.endBtnIcon) {
+  margin-block: auto;
+}
+.methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn:not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg {
+  width: 1.125rem;
+}
+.methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn:not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg path {
+  fill: #3aaa35;
+}
 .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent {
   display: flex;
   flex-direction: column;
@@ -262,6 +370,29 @@
 }
 .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
   background-color: #ebecf2;
+}.containerTitleDrawer {
+  height: 64px;
+  min-height: 64px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f1f2f6;
+  padding: 0 30px 0 30px;
+  width: 100%;
+}
+.containerTitleDrawer span {
+  color: #12131a;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  letter-spacing: 0em;
+}
+.containerTitleDrawer svg path {
+  stroke: #000 !important;
+}
+.containerTitleDrawer .closeIcon {
+  cursor: pointer;
 }.tooltip-custom-wrapper {
   display: flex;
 }
@@ -352,106 +483,6 @@
   z-index: 20000000000;
   top: -0.6rem;
   transform-origin: center !important;
-}#common-dialog.dialog-content-wrapper {
-  overflow: visible !important;
-  max-height: 100%;
-  width: 22.1875rem;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root {
-  overflow: visible !important;
-  border-radius: 0.625rem;
-  max-height: 100%;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
-  padding: 0 1.875rem !important;
-  overflow: visible !important;
-  max-height: 100%;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
-  position: relative;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
-  position: absolute;
-  z-index: 1;
-  top: 1.5rem;
-  right: 0;
-  transform: translate(0.625rem, -0.625rem);
-  cursor: pointer;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
-  display: flex;
-  padding-top: 0.5rem;
-  position: relative;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
-  margin-top: 1rem;
-  margin-bottom: 1.5rem;
-  margin-inline: auto;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
-  stroke: #12131a;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
-  stroke: #12131a;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
-  fill: #12131a;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
-  stroke: #faad14;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
-  stroke: #faad14;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
-  stroke: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
-  stroke: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
-  fill: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.875rem;
-  text-align: center;
-  margin-bottom: 0.625rem;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
-  color: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
-  color: #faad14;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
-  display: flex;
-  gap: 1.25rem;
-  margin-top: 1.875rem;
-}.containerTitleDrawer {
-  height: 64px;
-  min-height: 64px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f1f2f6;
-  padding: 0 30px 0 30px;
-  width: 100%;
-}
-.containerTitleDrawer span {
-  color: #12131a;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 25px;
-  letter-spacing: 0em;
-}
-.containerTitleDrawer svg path {
-  stroke: #000 !important;
-}
-.containerTitleDrawer .closeIcon {
-  cursor: pointer;
 }:root {
   --white: #fff;
   --Gray-5: #f1f2f6;
@@ -687,10 +718,83 @@
 .tableSectionContainer .descArrow path,
 .tableSectionContainer .defaultSortArrow path {
   fill: var(--Gray-50);
-}p.apiName {
-  font-size: 40px;
-  line-height: 30px;
+}#common-dialog.dialog-content-wrapper {
+  overflow: visible !important;
+  max-height: 100%;
+  width: 22.1875rem;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root {
+  overflow: visible !important;
+  border-radius: 0.625rem;
+  max-height: 100%;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
+  padding: 0 1.875rem !important;
+  overflow: visible !important;
+  max-height: 100%;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
+  position: relative;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
+  position: absolute;
+  z-index: 1;
+  top: 1.5rem;
+  right: 0;
+  transform: translate(0.625rem, -0.625rem);
+  cursor: pointer;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
+  display: flex;
+  padding-top: 0.5rem;
+  position: relative;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  margin-inline: auto;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
+  stroke: #12131a;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
+  stroke: #12131a;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
+  fill: #12131a;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
+  stroke: #faad14;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
+  stroke: #faad14;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
+  stroke: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
+  stroke: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
+  fill: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
+  font-size: 1.5rem;
   font-weight: 500;
+  line-height: 1.875rem;
+  text-align: center;
+  margin-bottom: 0.625rem;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
+  color: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
+  color: #faad14;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
+  display: flex;
+  gap: 1.25rem;
+  margin-top: 1.875rem;
 }.json-editor-container {
   overflow: hidden;
   border-bottom-right-radius: 0.3125rem;
@@ -802,96 +906,6 @@
 .json-editor-container.disabled .json-editor textarea {
   background-color: white;
   color: #12131a;
-}.apiInfoForm {
-  display: grid;
-  padding: 1.25rem 1.875rem;
-  gap: 1.25rem;
-}
-.apiInfoForm .paramsTable .paramDescContainer {
-  display: flex;
-}
-.apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
-  height: inherit;
-  width: 1px;
-  background-color: #d8dae5;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
-  stroke-width: 0.1;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
-  padding: 0;
-  margin-right: 1.25rem;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
-  display: flex;
-  align-items: center;
-  padding: 0;
-  color: #12131a;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
-  margin-block: auto;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
-  fill: #12131a;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
-  padding: 0;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
-  margin-block: auto;
-}
-.apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
-  width: 1.125rem;
-}
-.apiInfoForm .paramsTable .editDescTooltipContent {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-.apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
-  margin-inline: 0.625rem;
-}
-.apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding: 0.75rem 1.25rem;
-  border-bottom: 1px solid #d8dae5;
-}
-.apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
-  content: "*";
-  color: red;
-  transform: translateX(0.125rem);
-}
-.apiInfoForm .apiDocRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.25rem;
-}
-.apiInfoForm .apiInfoForm_tagsChips {
-  margin-top: -1.25rem;
-}
-.apiInfoForm .editDescTooltipContent {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-.apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
-  margin-inline: 0.625rem;
-}
-.apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding: 0.75rem 1.25rem;
-  border-bottom: 1px solid #d8dae5;
-}
-.apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
-  content: "*";
-  color: red;
-  transform: translateX(0.125rem);
 }:root {
   --white: #fff;
   --Gray-5: #f1f2f6;
@@ -997,4 +1011,8 @@
 }
 .drawerItemContainer .color-red {
   color: var(--color-error);
+}p.apiName {
+  font-size: 40px;
+  line-height: 30px;
+  font-weight: 500;
 }

package/dist/types/components/MethodAccordion/MethodAccordion.d.ts

@@ -1,9 +1,10 @@
 import { TransformedMethod } from '../../types/layout.type';
-declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, }: {
+import { Tags } from '@entities/openApi';
+declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, tags, }: {
     method: TransformedMethod;
     path: string;
-    setFieldValue?: (key: string, value: string) => void;
+    setFieldValue?: (key: string, value: string | string[]) => void;
     readOnly?: boolean;
-    handleSave: () => void;
+    tags: Tags[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default MethodsAccordion;

package/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.18",
+ "name": "@digi-frontend/dgate-api-documentation",
+  "version": "1.0.20",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.module.scss

@@ -55,6 +55,19 @@
             }
           }
         }
+
+        &:not(:global(.disabled)):global(.success) {
+          :global(.endBtnIcon) {
+            margin-block: auto;
+
+            svg {
+              width: 1.125rem;
+              path {
+                fill: #3aaa35;
+              }
+            }
+          }
+        }
       }
     }
 

package/src/components/InfoForm/InfoForm.tsx

@@ -36,12 +36,12 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
   }, [])
 
   useEffect(() => {
-    setTableRecords(generateTableData(tableData))
+    setTableRecords(generateTableRecords(tableData))
   }, [tableData])
 
   useEffect(() => {
     if (values.tags && values.tags.length) {
-      setTableRecords(generateTableData(values.tags))
+      setTableRecords(generateTableRecords(values.tags))
       setTableData(values.tags)
     }
   }, [values.tags])
@@ -77,7 +77,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
 
   const saveNewRow = (tag) => {
     setTableData([...tableData, tag])
-    const oldTags = values.tags || [];
+    const oldTags = values.tags || []
     setFieldValue(`tags`, [...oldTags, tag])
   }
 
@@ -88,7 +88,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
     setOpenDeleteDialog(true)
   }
 
-  const generateTableData = (items) => {
+  const generateTableRecords = (items) => {
     return items.map((item, index) => ({
       id: index,
       tagName: item.name,
@@ -131,10 +131,19 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               </div>
             }
           >
-            {readOnly ? (
-              <Button className={styles.editDescBtn} variant="link" color="action">
-                {item.description ? item.description.substring(0, 12) : '-'}
-                {item.description && item.description.length > 12 ? '...' : ''}
+            {readOnly || values.tags[index].description ? (
+              <Button
+                className={styles.editDescBtn}
+                variant="link"
+                color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+              >
+                {values.tags[index].description
+                  ? values.tags[index].description.substring(0, 12)
+                  : '-'}
+                {values.tags[index].description && values.tags[index].description.length > 12
+                  ? '...'
+                  : ''}
               </Button>
             ) : (
               <Button
@@ -143,7 +152,9 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 color="action"
                 endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
               >
-                {readOnly || item.description ? 'View Description' : 'Add Description'}
+                {readOnly || values.tags[index].description
+                  ? 'View Description'
+                  : 'Add Description'}
               </Button>
             )}
           </Tooltip>
@@ -210,22 +221,22 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               </div>
             }
           >
-            {readOnly ? (
+            {readOnly || values.tags[index].externalDocs?.description ? (
               <Button
                 className={styles.editDescBtn}
                 variant="link"
                 color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
                 onClick={() => {
-                  const a = document.createElement('a')
-                  a.href = item.externalDocs?.url
-                  a.target="_blank"
-                  a.click()
+                  setDescription(item.externalDocs?.description)
+                  setURL(item.externalDocs?.url)
                 }}
               >
-                {item?.externalDocs?.description
-                  ? item?.externalDocs?.description?.substring(0, 12)
+                {values.tags[index].externalDocs?.description
+                  ? values.tags[index].externalDocs?.description?.substring(0, 12)
                   : '-'}
-                {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                {values.tags[index].externalDocs?.description &&
+                values.tags[index].externalDocs?.description?.length > 12
                   ? '...'
                   : ''}
               </Button>

package/src/components/LivePreview/LivePreview.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styles from './LivePreview.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
-
 import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
@@ -122,12 +121,37 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
 
           <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
           {values.paths.map((path) => (
-            <div className={styles.methodsContainer}>
-              {path.methods
+            <div className={styles.methodsContainer} key={path.path}>
+              {Object.entries(
+                path.methods
                 .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)
-                .map((method, methodIndex) => (
-                  <MethodsAccordion readOnly method={method} path={path.path} />
-                ))}
+                .reduce((groupedMethods, method) => {
+                  // Handle methods without tags
+                  const tags = method.tags?.length ? method?.tags : ['default'];
+                  
+                  tags.forEach((tag) => {
+                    if (!groupedMethods[tag]) {
+                      groupedMethods[tag] = [];
+                    }
+                    groupedMethods[tag].push(method);
+                  });
+                  
+                  return groupedMethods;
+                }, {})
+              ).map(([tag, methods]) => (
+                <div key={tag}>
+                  <h3>{tag}</h3>
+                  {methods?.map((method, methodIndex) => (
+                    <MethodsAccordion
+                      readOnly
+                      method={method}
+                      path={path.path}
+                      tags={values.tags}
+                      handleSave={() => null}
+                    />
+                  ))}
+                </div>
+              ))}
             </div>
           ))}
         </div>

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -134,6 +134,19 @@
                 }
               }
             }
+
+            &:not(:global(.disabled)):global(.success) {
+              :global(.endBtnIcon) {
+                margin-block: auto;
+
+                svg {
+                  width: 1.125rem;
+                  path {
+                    fill: #3aaa35;
+                  }
+                }
+              }
+            }
           }
         }
       }