@digi-frontend/dgate-api-documentation 4.1.8 → 4.2.0

package/dist/index.cjs

@@ -711,7 +711,8 @@ const OverflowTooltip = ({ title, children, className, style, placement }) => {
 	const checkOverflow = (0, react.useCallback)(() => {
 		const el = ref.current;
 		if (!el) return;
-		setIsOverflowing(el.scrollWidth > el.clientWidth);
+		const target = el.firstElementChild ?? el;
+		setIsOverflowing(target.scrollWidth > target.clientWidth);
 	}, []);
 	(0, react.useEffect)(() => {
 		checkOverflow();
@@ -1301,7 +1302,7 @@ const ApiCard = ({ api, viewStyle }) => {
 			borderRadius: token.borderRadiusSM,
 			border: `1px solid ${token.colorBorderSecondary}`,
 			minWidth: "6.25rem",
-			maxWidth: "fit-content",
+			maxWidth: "100%",
 			svg: { path: { fill: "#4D75D9" } }
 		},
 		[scope("list-title")]: {
@@ -1314,6 +1315,9 @@ const ApiCard = ({ api, viewStyle }) => {
 			fontFamily: token.fontFamily,
 			cursor: "pointer",
 			transition: "color 0.2s ease-in",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
 			"&:hover": {
 				color: `${token.colorPrimary} !important`,
 				textDecoration: "underline"
@@ -1401,6 +1405,7 @@ const ApiCard = ({ api, viewStyle }) => {
 				className: cx("list-container"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(antd.Flex, {
 					gap: token.marginSM,
+					style: { minWidth: 0 },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MethodChip, { method: api.method }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd_es_typography_Title_js.default, {
 						className: cx("list-title"),
 						level: 4,
@@ -2209,6 +2214,39 @@ const MainContent$1 = ({ searchEnabled, handleResetSearch, handleVisitLandingPag
 	}));
 };
 //#endregion
+//#region src/assets/icons/md_left_icon.tsx
+const MdLeftIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 18 18",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	stroke: "rgba(0,0,0,0.45)",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M8.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5H11.25C15 16.5 16.5 15 16.5 11.25V9.75",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M12.0299 2.26592L6.11991 8.17592C5.89491 8.40092 5.66991 8.84342 5.62491 9.16592L5.30241 11.4234C5.18241 12.2409 5.75991 12.8109 6.57741 12.6984L8.83491 12.3759C9.14991 12.3309 9.59241 12.1059 9.82491 11.8809L15.7349 5.97092C16.7549 4.95092 17.2349 3.76592 15.7349 2.26592C14.2349 0.765922 13.0499 1.24592 12.0299 2.26592Z",
+			strokeWidth: "1.5",
+			strokeMiterlimit: "10",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M11.1826 3.11328C11.6851 4.90578 13.0876 6.30828 14.8876 6.81828",
+			strokeWidth: "1.5",
+			strokeMiterlimit: "10",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
+//#endregion
 //#region src/view/components/ApiPage/components/ApiDocumentationBar.tsx
 const { useBreakpoint: useBreakpoint$4 } = antd.Grid;
 const { Title: Title$6 } = antd.Typography;
@@ -2268,10 +2306,11 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 			background: token.colorBgLayout,
 			padding: "4px 4px",
 			borderRadius: token.borderRadius,
-			gap: 8
+			gap: 4
 		},
 		[scope("switcher-item")]: {
 			display: "flex",
+			justifyContent: "center",
 			alignItems: "center",
 			gap: 8,
 			padding: "8px 12px",
@@ -2326,11 +2365,13 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 					title: apiName,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title$6, {
 						level: 3,
-						ellipsis: true,
 						style: {
 							margin: 0,
 							fontWeight: 600,
-							color: token.colorTextHeading
+							color: token.colorTextHeading,
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis"
 						},
 						children: apiName
 					})
@@ -2385,7 +2426,7 @@ const ApiDocumentationBar = ({ apiName, mode, onModeChange, onReset, onSave, has
 					onClick: () => onModeChange("edit"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: cx("switcher-icon"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.EditOutlined, {})
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MdLeftIcon, {})
 					}), "Edit"]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					className: cx("switcher-item", mode === "view" ? "switcher-item-active" : ""),
@@ -2723,42 +2764,42 @@ function useDebounce(value, delay = 500) {
 //#region src/view/components/ApiPage/components/AddParameterDrawer.tsx
 const PARAM_IN_OPTIONS = [
 	{
-		label: "QUERY",
+		label: "Query",
 		value: "query"
 	},
 	{
-		label: "HEADER",
+		label: "Header",
 		value: "header"
 	},
 	{
-		label: "PATH",
+		label: "Path",
 		value: "path"
 	}
 ];
 const RESPONSE_PARAM_IN_OPTIONS = PARAM_IN_OPTIONS.filter((o) => o.value === "header");
 const PARAM_TYPE_OPTIONS = [
 	{
-		label: "STRING",
+		label: "String",
 		value: "string"
 	},
 	{
-		label: "NUMBER",
+		label: "Number",
 		value: "number"
 	},
 	{
-		label: "INTEGER",
+		label: "Integer",
 		value: "integer"
 	},
 	{
-		label: "BOOLEAN",
+		label: "Boolean",
 		value: "boolean"
 	},
 	{
-		label: "ARRAY",
+		label: "Array",
 		value: "array"
 	},
 	{
-		label: "OBJECT",
+		label: "Object",
 		value: "object"
 	}
 ];
@@ -3465,27 +3506,6 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			}));
 		});
 	}, [openResponsePanels, responseBodySchemas]);
-	(0, react$1.useEffect)(() => {
-		if (!openResponsePanels.size) return;
-		openResponsePanels.forEach((epId) => {
-			const code = selectedStatusCodes[epId];
-			if (!code) return;
-			const ep = Object.values(endpointsByTag).flat().find((e) => e.id === epId);
-			if (!ep?.responses?.[code]?.content) return;
-			const content = ep.responses[code].content;
-			const schema = Object.values(content)[0]?.schema;
-			if (!schema) return;
-			const json = JSON.stringify(schema, null, 2);
-			setEditableResponseContent((prev) => ({
-				...prev,
-				[epId]: json
-			}));
-		});
-	}, [
-		selectedStatusCodes,
-		openResponsePanels,
-		endpointsByTag
-	]);
 	const handleValidate = (content) => {
 		try {
 			JSON.parse(content);
@@ -4069,7 +4089,6 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 			alignItems: "center",
 			justifyContent: "center",
 			width: "100%",
-			flex: 1,
 			minHeight: 0,
 			"& .ant-empty": {
 				margin: 0,
@@ -4516,7 +4535,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																className: cx("param-detail-label"),
 																children: "Parameter Name"
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTooltip, {
 																title: param.name,
 																placement: "bottom",
 																children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4598,7 +4617,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Parameter Name"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTooltip, {
 																	title: param.name,
 																	placement: "bottom",
 																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4671,13 +4690,11 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Description"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTooltip, {
 																	title: param.description || "—",
 																	placement: "bottom",
-																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																		className: cx("param-detail-value", "param-detail-value--ellipsis"),
-																		children: param.description || "—"
-																	})
+																	className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																	children: param.description || "—"
 																})]
 															})
 														]
@@ -5087,7 +5104,7 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Parameter Name"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTooltip, {
 																	title: param.name,
 																	placement: "bottom",
 																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5160,13 +5177,11 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 																	className: cx("param-detail-label"),
 																	children: "Description"
-																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tooltip, {
+																}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTooltip, {
 																	title: param.description || "—",
 																	placement: "bottom",
-																	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																		className: cx("param-detail-value", "param-detail-value--ellipsis"),
-																		children: param.description || "—"
-																	})
+																	className: cx("param-detail-value", "param-detail-value--ellipsis"),
+																	children: param.description || "—"
 																})]
 															})
 														]
@@ -5581,8 +5596,11 @@ const EndpointsSection = ({ endpointsByTag, collapsed = false, onToggleCollapse,
 										if (!schema) return null;
 										let displayData;
 										if (contentEntry.example !== void 0) displayData = contentEntry.example;
-										else if (contentEntry.examples !== void 0) displayData = Array.isArray(contentEntry.examples) ? contentEntry.examples[0] : contentEntry.examples;
-										else if (hasAnyExample(schema)) displayData = generateExampleFromSchema(schema);
+										else if (contentEntry.examples !== void 0) {
+											const firstKey = Object.keys(contentEntry.examples)[0];
+											const firstExample = contentEntry.examples[firstKey];
+											displayData = firstExample?.value ?? firstExample;
+										} else if (hasAnyExample(schema)) displayData = generateExampleFromSchema(schema);
 										else displayData = schema;
 										return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											className: cx("code-panel"),
@@ -7277,7 +7295,6 @@ const AddTagDrawer = ({ open, onClose, mode, initialValues, onAddTag, onEditTag,
 			alignItems: "center",
 			position: "relative",
 			paddingTop: 20,
-			paddingBottom: 8,
 			paddingLeft: 24,
 			paddingRight: 24,
 			width: "100%"
@@ -9056,8 +9073,11 @@ function CodeboxSidebar$1() {
 				const contentEntry = responseObj?.content ? Object.values(responseObj.content)[0] : void 0;
 				let displayData;
 				if (contentEntry?.example !== void 0) displayData = contentEntry.example;
-				else if (contentEntry?.examples !== void 0) displayData = Array.isArray(contentEntry.examples) ? contentEntry.examples[0] : contentEntry.examples;
-				else if (contentEntry?.schema && hasAnyExample(contentEntry.schema)) displayData = generateExampleFromSchema(contentEntry.schema);
+				else if (contentEntry?.examples !== void 0) {
+					const firstKey = Object.keys(contentEntry.examples)[0];
+					const firstExample = contentEntry.examples[firstKey];
+					displayData = firstExample?.value ?? firstExample;
+				} else if (contentEntry?.schema && hasAnyExample(contentEntry.schema)) displayData = generateExampleFromSchema(contentEntry.schema);
 				else if (contentEntry?.schema) displayData = contentEntry.schema;
 				else displayData = responseObj;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Codebox$1, { code: JSON.stringify(displayData, null, 2) || "" });
@@ -9115,7 +9135,15 @@ const transformOpenApiToDocs = (api) => {
 		};
 		if (entry.requestBody?.content) {
 			const resolvedContent = {};
-			for (const [contentType, contentValue] of Object.entries(entry.requestBody.content)) resolvedContent[contentType] = { schema: resolveSchema(contentValue.schema, api.components) ?? contentValue.schema };
+			for (const [contentType, contentValue] of Object.entries(entry.requestBody.content)) {
+				const resolvedSchema = resolveSchema(contentValue.schema, api.components) ?? contentValue.schema;
+				const resolvedExample = contentValue.example !== void 0 ? contentValue.example : resolvedSchema.example;
+				resolvedContent[contentType] = {
+					schema: resolvedSchema,
+					...resolvedExample !== void 0 && { example: resolvedExample },
+					...contentValue.examples !== void 0 && { examples: contentValue.examples }
+				};
+			}
 			entry.requestBody = {
 				...entry.requestBody,
 				content: resolvedContent
@@ -9125,7 +9153,15 @@ const transformOpenApiToDocs = (api) => {
 			const resolvedResponses = {};
 			for (const [code, responseValue] of Object.entries(entry.responses)) if (responseValue.content) {
 				const resolvedContent = {};
-				for (const [contentType, contentValue] of Object.entries(responseValue.content)) resolvedContent[contentType] = { schema: resolveSchema(contentValue.schema, api.components) ?? contentValue.schema };
+				for (const [contentType, contentValue] of Object.entries(responseValue.content)) {
+					const resolvedSchema = resolveSchema(contentValue.schema, api.components) ?? contentValue.schema;
+					const resolvedExample = contentValue.example !== void 0 ? contentValue.example : resolvedSchema.example;
+					resolvedContent[contentType] = {
+						schema: resolvedSchema,
+						...resolvedExample !== void 0 && { example: resolvedExample },
+						...contentValue.examples !== void 0 && { examples: contentValue.examples }
+					};
+				}
 				resolvedResponses[code] = {
 					...responseValue,
 					content: resolvedContent
@@ -9308,7 +9344,6 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			alignItems: "center",
 			position: "relative",
 			paddingTop: 20,
-			paddingBottom: 8,
 			paddingLeft: 24,
 			paddingRight: 24,
 			width: "100%"
@@ -9485,7 +9520,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			Object.entries(methods).forEach(([method, operation]) => {
 				const responses = operation.responses;
 				if (!responses) return;
-				const schema = responses["200" in responses ? "200" : Object.keys(responses)[0]]?.content?.["application/json"]?.schema;
+				const schema = responses["200" in responses ? "200" : Object.keys(responses)[0]]?.content?.["application/json"]?.example;
 				const epId = pathMethodToId[`${path}||${method}`];
 				if (epId && schema) result[epId] = schema;
 			});
@@ -9775,7 +9810,7 @@ const ConsoleDocumentationLayout = ({ data, preSelectedApi, handleVisitLandingPa
 			const statusCode = "200" in responses ? "200" : Object.keys(responses)[0];
 			if (!responses[statusCode]) return;
 			if (!responses[statusCode].content) responses[statusCode].content = {};
-			responses[statusCode].content["application/json"] = { schema };
+			responses[statusCode].content["application/json"] = { example: schema };
 		});
 		try {
 			await onSave?.(cloned);
@@ -10789,8 +10824,11 @@ function CodeboxSidebar() {
 				const contentEntry = responseObj?.content ? Object.values(responseObj.content)[0] : void 0;
 				let displayData;
 				if (contentEntry?.example !== void 0) displayData = contentEntry.example;
-				else if (contentEntry?.examples !== void 0) displayData = Array.isArray(contentEntry.examples) ? contentEntry.examples[0] : contentEntry.examples;
-				else if (contentEntry?.schema && hasAnyExample(contentEntry.schema)) displayData = generateExampleFromSchema(contentEntry.schema);
+				else if (contentEntry?.examples !== void 0) {
+					const firstKey = Object.keys(contentEntry.examples)[0];
+					const firstExample = contentEntry.examples[firstKey];
+					displayData = firstExample?.value ?? firstExample;
+				} else if (contentEntry?.schema && hasAnyExample(contentEntry.schema)) displayData = generateExampleFromSchema(contentEntry.schema);
 				else if (contentEntry?.schema) displayData = contentEntry.schema;
 				else displayData = responseObj;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Codebox, { code: JSON.stringify(displayData, null, 2) || "" });