mintlify 1.1.6 → 1.1.8

package/bin/mint/client/src/ui/TopLevelLink.tsx

@@ -0,0 +1,122 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import Link from 'next/link';
+import { forwardRef } from 'react';
+
+import { config } from '@/config';
+import {
+  getAnchorBackgroundColor,
+  getAnchorHoverBackgroundColor,
+  getAnchorShadowColor,
+  getAnchorTextColor,
+} from '@/utils/brands';
+import { isBrandFontAwesomeIcon } from '@/utils/fontAwesome';
+
+type TopLevelProps = {
+  href: string;
+  i: number;
+  isActive: boolean;
+  children?: any;
+  className?: string;
+  color?: string;
+  onClick?: (el: any) => void;
+  icon?: any;
+  shadow?: string;
+  mobile?: boolean;
+  name?: string;
+  as?: string;
+};
+
+const TopLevelAnchor = forwardRef(
+  ({ children, href, className, icon, isActive, onClick, color, i }: TopLevelProps, ref: any) => {
+    const activeBackgroundColor =
+      config.classes?.activeAnchors ?? getAnchorBackgroundColor(i, color);
+    const hoverBackgroundColor = config.classes?.anchors ?? getAnchorHoverBackgroundColor(i, color);
+    const shadowColor = getAnchorShadowColor(i, color);
+    return (
+      <li>
+        <a
+          ref={ref}
+          href={href}
+          onClick={onClick}
+          className={clsx(
+            'group flex items-center lg:text-sm lg:leading-6',
+            className,
+            isActive
+              ? ['font-semibold', getAnchorTextColor(i, color)]
+              : 'font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
+          )}
+        >
+          <div
+            className={clsx(
+              `mr-4 rounded-md ring-slate-900/5 group-hover:ring-slate-900/10 dark:group-hover:highlight-white/10`,
+              shadowColor || 'shadow-primary/40',
+              hoverBackgroundColor,
+              isActive
+                ? [activeBackgroundColor, 'highlight-slate-700/10 dark:highlight-white/10']
+                : 'bg-slate-300 highlight-slate-700/5 dark:bg-slate-800 dark:highlight-white/5'
+            )}
+          >
+            {icon}
+          </div>
+          {children}
+        </a>
+      </li>
+    );
+  }
+);
+
+export function TopLevelLink({ ...props }: TopLevelProps) {
+  const { href, as } = props;
+  if (/^https?:\/\//.test(href)) {
+    return <TopLevelAnchor {...props} />;
+  }
+
+  return (
+    <Link href={href} as={as} passHref>
+      <TopLevelAnchor {...props} />
+    </Link>
+  );
+}
+
+export function StyledTopLevelLink({
+  href,
+  as,
+  name,
+  icon,
+  color,
+  isActive,
+  i,
+  ...props
+}: TopLevelProps) {
+  const isBrandIcon = isBrandFontAwesomeIcon(icon);
+  const iconPrefix = isBrandIcon ? 'fab' : 'fad';
+  const Icon =
+    icon == null ? (
+      <div className="h-6 w-px"></div>
+    ) : (
+      <FontAwesomeIcon
+        className={clsx(
+          `h-6 w-6 p-1 text-white secondary-opacity group-hover:fill-primary-dark dark:group-hover:text-white`,
+          isBrandIcon && 'fa-secondary',
+          isActive ? 'dark:text-white' : 'dark:text-slate-500',
+          color == null && 'dark:group-hover:text-white'
+        )}
+        icon={[iconPrefix, icon.toLowerCase()]}
+      />
+    );
+  return (
+    <TopLevelLink
+      {...props}
+      as={as}
+      href={href}
+      className="mb-4"
+      icon={Icon}
+      isActive={isActive}
+      color={color}
+      i={i}
+    >
+      {name ?? href}
+    </TopLevelLink>
+  );
+}

package/bin/mint/client/src/utils/api.ts

@@ -0,0 +1,252 @@
+import { AxiosRequestHeaders } from 'axios';
+import isAbsoluteUrl from 'is-absolute-url';
+
+import { ParamProps } from '@/components/Param';
+import { config } from '@/config';
+import { Component } from '@/enums/components';
+import { openApi } from '@/openapi';
+import { ApiComponent } from '@/ui/Api';
+
+export type MediaType = 'json' | 'form';
+
+export type Child = {
+  props: ParamProps & { mdxType: string };
+};
+
+export type Children = Child[];
+
+export type Param = {
+  name: string;
+  placeholder?: string;
+  required?: boolean;
+  type?: string;
+  enum?: string[];
+  format?: string;
+};
+
+export type ParamGroup = {
+  name: string;
+  params: Param[];
+};
+
+const paramTypeToNameMap: Record<string, string> = {
+  auth: 'Authorization',
+  query: 'Query',
+  path: 'Path',
+  body: 'Body',
+};
+
+const getPlaceholderFromObjectOrString = (value: any): undefined => {
+  return (typeof value === 'string' && value) || value?.value?.toString();
+};
+
+const removeEmpty = (obj?: Object) => {
+  if (!obj) return obj;
+
+  return Object.fromEntries(Object.entries(obj).filter(([_, v]) => v || v === false));
+};
+
+const potentiallAddPathParams = (inputUrl: string, inputData: Record<string, any>) => {
+  let url = inputUrl;
+  if (inputData.Path) {
+    Object.entries(inputData.Path).forEach(([pathName, pathValue]: [string, any]) => {
+      if (!pathValue) {
+        return;
+      }
+      url = url.replace(`{${pathName}}`, pathValue);
+    });
+  }
+
+  return url;
+};
+
+const getApiBody = (obj: Object, media: MediaType) => {
+  if (media === 'form') {
+    let cleanedObj = removeEmpty(obj);
+    const bodyFormData = new FormData();
+    for (var key in cleanedObj) {
+      bodyFormData.append(key, cleanedObj[key]);
+    }
+
+    return bodyFormData;
+  }
+  return removeEmpty(obj);
+};
+
+export const getApiContext = (
+  apiBase: string,
+  path: string,
+  inputData: Record<string, any>,
+  media: MediaType
+): { url: string; body?: Object; params?: Object; headers?: AxiosRequestHeaders } => {
+  const endpoint = `${apiBase}${path}`;
+  const url = potentiallAddPathParams(endpoint, inputData);
+  const body = getApiBody(inputData.Body, media);
+  const params = removeEmpty(inputData.Query);
+  const headers: AxiosRequestHeaders = {};
+
+  if (inputData.Authorization) {
+    const authEntires = Object.entries(inputData.Authorization);
+    if (config.api?.auth?.method === 'basic' && authEntires.length === 2) {
+      let [[usernameField, username], [, password]]: any = authEntires;
+      // Get order based on username:password
+      if (
+        (config.api.auth.name && config.api.auth.name.split(':')[0] !== usernameField) ||
+        (!config.api.auth.name && usernameField.toLowerCase() !== 'username')
+      ) {
+        // switch orders
+        const temp = username;
+        username = password;
+        password = temp;
+      }
+      headers.Authorization =
+        'Basic ' + Buffer.from(`${username}:${password}`, 'utf8').toString('base64');
+    } else {
+      authEntires.forEach(([authName, authValue]: [string, any]) => {
+        if (authName === 'Bearer') {
+          headers.Authorization = `Bearer ${authValue}`;
+          return;
+        }
+
+        headers[authName] = authValue;
+      });
+    }
+  }
+
+  return { url, body, params, headers };
+};
+
+export const extractMethodAndEndpoint = (api: string) => {
+  const methodRegex = /^get|post|put|delete|patch/i;
+  const foundMethod = api.trim().match(methodRegex);
+
+  const endIndexOfMethod = foundMethod ? api.indexOf(foundMethod[0]) + foundMethod[0].length : 0;
+
+  return {
+    method: foundMethod ? foundMethod[0].toUpperCase() : undefined,
+    endpoint: api.substring(endIndexOfMethod).trim(),
+  };
+};
+
+export const extractBaseAndPath = (endpoint: string, apiBaseIndex = 0) => {
+  let fullEndpoint;
+  const baseUrl =
+    config.api?.baseUrl ?? openApi?.servers?.map((server: { url: string }) => server.url);
+  if (isAbsoluteUrl(endpoint)) {
+    fullEndpoint = endpoint;
+  } else if (baseUrl) {
+    const selectedBase = Array.isArray(baseUrl) ? baseUrl[apiBaseIndex] : baseUrl;
+    fullEndpoint = `${selectedBase}${endpoint}`;
+  } else {
+    throw new Error('Invalid endpoint');
+  }
+
+  const url = new URL(fullEndpoint);
+  const base = url.origin;
+  const path = fullEndpoint.substring(fullEndpoint.indexOf(base) + base.length);
+
+  return {
+    path,
+    base,
+  };
+};
+
+export const getParamGroupsFromAPIComponents = (
+  apiComponents?: ApiComponent[],
+  auth?: string
+): ParamGroup[] => {
+  const groups: Record<string, Param[]> = {};
+
+  // Add auth if configured
+  if (auth?.toLowerCase() !== 'none') {
+    if (config.api?.auth?.name) {
+      groups.Authorization = [
+        {
+          name: config.api.auth.name,
+          required: true,
+        },
+      ];
+    }
+
+    if (config.api?.auth?.method === 'basic') {
+      const name = config.api.auth.name || 'username:password';
+      groups.Authorization = name.split(':').map((section) => {
+        return {
+          name: section,
+          required: true,
+        };
+      });
+    }
+
+    if (config.api?.auth?.method?.toLowerCase() === 'bearer' || auth?.toLowerCase() === 'bearer') {
+      groups.Authorization = [
+        {
+          name: 'Bearer',
+          required: true,
+        },
+      ];
+    }
+  }
+
+  const paramFields = apiComponents
+    ?.filter((apiComponent) => apiComponent.type === Component.ParamField)
+    .map((apiComponent) => {
+      const attributesMap: Record<any, any> = {};
+      apiComponent?.attributes?.forEach((attribute: any) => {
+        attributesMap[attribute.name] = attribute.value;
+      });
+
+      return attributesMap;
+    });
+
+  paramFields?.forEach((paramField) => {
+    let paramType;
+    if (paramField?.query) {
+      paramType = 'query';
+    } else if (paramField?.path) {
+      paramType = 'path';
+    } else if (paramField?.body) {
+      paramType = 'body';
+    }
+
+    if (!paramType) {
+      return;
+    }
+
+    const groupName = paramTypeToNameMap[paramType];
+    const existingGroup = groups[groupName];
+
+    const { query, body, path } = paramField;
+
+    let name = query || body || path;
+
+    if (!name) {
+      return;
+    }
+
+    const { placeholder, default: defaultValue, required, type, enum: enumValues } = paramField;
+
+    const param = {
+      name,
+      placeholder:
+        getPlaceholderFromObjectOrString(placeholder) ||
+        getPlaceholderFromObjectOrString(defaultValue),
+      required: required === null || required === true, // intentionally check for just null or true
+      type,
+      enum: enumValues,
+    };
+
+    if (existingGroup) {
+      groups[groupName] = [...existingGroup, param];
+    } else {
+      groups[groupName] = [param];
+    }
+  });
+
+  return Object.entries(groups).map(([groupName, params]) => {
+    return {
+      name: groupName,
+      params,
+    };
+  });
+};

package/bin/mint/client/src/utils/brands.ts

@@ -0,0 +1,217 @@
+// For PostCSS parsers
+export const getAnchorBackgroundColor = (i: number, color?: string) => {
+  if (!color) {
+    return 'bg-primary';
+  }
+
+  switch (i) {
+    case 0:
+      return 'bg-anchor-0';
+    case 1:
+      return 'bg-anchor-1';
+    case 2:
+      return 'bg-anchor-2';
+    case 3:
+      return 'bg-anchor-3';
+    case 4:
+      return 'bg-anchor-4';
+    case 5:
+      return 'bg-anchor-5';
+    case 6:
+      return 'bg-anchor-6';
+    case 7:
+      return 'bg-anchor-7';
+    case 8:
+      return 'bg-anchor-8';
+    case 9:
+      return 'bg-anchor-9';
+    case 10:
+      return 'bg-anchor-10';
+    default:
+      return 'bg-primary';
+  }
+};
+
+export const getAnchorHoverBackgroundColor = (i: number, color?: string) => {
+  if (!color) {
+    return 'group-hover:bg-primary';
+  }
+
+  switch (i) {
+    case 0:
+      return 'group-hover:bg-anchor-0';
+    case 1:
+      return 'group-hover:bg-anchor-1';
+    case 2:
+      return 'group-hover:bg-anchor-2';
+    case 3:
+      return 'group-hover:bg-anchor-3';
+    case 4:
+      return 'group-hover:bg-anchor-4';
+    case 5:
+      return 'group-hover:bg-anchor-5';
+    case 6:
+      return 'group-hover:bg-anchor-6';
+    case 7:
+      return 'group-hover:bg-anchor-7';
+    case 8:
+      return 'group-hover:bg-anchor-8';
+    case 9:
+      return 'group-hover:bg-anchor-9';
+    case 10:
+      return 'group-hover:bg-anchor-10';
+    default:
+      return 'group-hover:bg-primary';
+  }
+};
+
+export const getAnchorTextColor = (i: number, color?: string) => {
+  if (!color) {
+    return 'text-primary dark:text-primary-light';
+  }
+
+  switch (i) {
+    case 0:
+      return 'text-anchor-0';
+    case 1:
+      return 'text-anchor-1';
+    case 2:
+      return 'text-anchor-2';
+    case 3:
+      return 'text-anchor-3';
+    case 4:
+      return 'text-anchor-4';
+    case 5:
+      return 'text-anchor-5';
+    case 6:
+      return 'text-anchor-6';
+    case 7:
+      return 'text-anchor-7';
+    case 8:
+      return 'text-anchor-8';
+    case 9:
+      return 'text-anchor-9';
+    case 10:
+      return 'text-anchor-10';
+    default:
+      return 'text-primary dark:text-primary-light';
+  }
+};
+
+export const getAnchorShadowColor = (i: number, color?: string) => {
+  if (!color) {
+    return 'shadow-primary/40';
+  }
+
+  switch (i) {
+    case 0:
+      return 'shadow-anchor-0/40';
+    case 1:
+      return 'shadow-anchor-1/40';
+    case 2:
+      return 'shadow-anchor-2/40';
+    case 3:
+      return 'shadow-anchor-3/40';
+    case 4:
+      return 'shadow-anchor-4/40';
+    case 5:
+      return 'shadow-anchor-5/40';
+    case 6:
+      return 'shadow-anchor-6/40';
+    case 7:
+      return 'shadow-anchor-7/40';
+    case 8:
+      return 'shadow-anchor-8/40';
+    case 9:
+      return 'shadow-anchor-9/40';
+    case 10:
+      return 'shadow-anchor-10/40';
+    default:
+      return 'shadow-primary/40';
+  }
+};
+
+export const getMethodDotsColor = (method?: string) => {
+  switch (method?.toUpperCase()) {
+    case 'GET':
+      return 'bg-green-600/80 dark:bg-green-400/80';
+    case 'POST':
+      return 'bg-blue-600/80 dark:bg-blue-400/80';
+    case 'PUT':
+      return 'bg-yellow-600/80 dark:bg-yellow-400/80';
+    case 'DELETE':
+      return 'bg-red-600/80 dark:bg-red-400/80';
+    case 'PATCH':
+      return 'bg-orange-600/80 dark:bg-orange-400/80';
+    default:
+      return 'bg-slate-600 dark:bg-slate-400/80';
+  }
+};
+
+export const getMethodBgColor = (method?: string) => {
+  switch (method?.toUpperCase()) {
+    case 'GET':
+      return 'bg-green-600';
+    case 'POST':
+      return 'bg-blue-600';
+    case 'PUT':
+      return 'bg-yellow-600';
+    case 'DELETE':
+      return 'bg-red-600';
+    case 'PATCH':
+      return 'bg-orange-600';
+    default:
+      return 'bg-slate-600';
+  }
+};
+
+export const getMethodBgColorWithHover = (method?: string) => {
+  switch (method?.toUpperCase()) {
+    case 'GET':
+      return 'bg-green-600 hover:bg-green-800 disabled:bg-green-700';
+    case 'POST':
+      return 'bg-blue-600 hover:bg-blue-800 disabled:bg-blue-700';
+    case 'PUT':
+      return 'bg-yellow-600 hover:bg-yellow-800 disabled:bg-yellow-700';
+    case 'DELETE':
+      return 'bg-red-600 hover:bg-red-800 disabled:bg-red-700';
+    case 'PATCH':
+      return 'bg-orange-600 hover:bg-orange-800 disabled:bg-orange-700';
+    default:
+      return 'bg-slate-600 hover:bg-slate-800 disabled:bg-slate-700';
+  }
+};
+
+export const getMethodTextColor = (method?: string) => {
+  switch (method?.toUpperCase()) {
+    case 'GET':
+      return 'text-green-600 dark:text-green-500';
+    case 'POST':
+      return 'text-blue-600 dark:text-blue-500';
+    case 'PUT':
+      return 'text-yellow-600 dark:text-yellow-500';
+    case 'DELETE':
+      return 'text-red-600 dark:text-red-500';
+    case 'PATCH':
+      return 'text-orange-600 dark:text-orange-500';
+    default:
+      return 'text-slate-600 dark:text-slate-500';
+  }
+};
+
+export const getMethodBorderColor = (method?: string) => {
+  switch (method?.toUpperCase()) {
+    case 'GET':
+      return 'border-green-600 dark:border-green-500';
+    case 'POST':
+      return 'border-blue-600 dark:border-blue-500';
+    case 'PUT':
+      return 'border-yellow-600 dark:border-yellow-500';
+    case 'DELETE':
+      return 'border-red-600 dark:border-red-500';
+    case 'PATCH':
+      return 'border-orange-600 dark:border-orange-500';
+    default:
+      return 'border-slate-600 dark:border-slate-500';
+  }
+};

package/bin/mint/client/src/utils/castArray.ts

@@ -0,0 +1,3 @@
+export function castArray(value: any) {
+  return Array.isArray(value) ? value : [value]
+}

package/bin/mint/client/src/utils/childrenArray.ts

@@ -0,0 +1,3 @@
+export const childrenArray = (children: any) => {
+  return Array.isArray(children) ? children.flat() : [children];
+};

package/bin/mint/client/src/utils/fit.ts

@@ -0,0 +1,27 @@
+export function fit(
+  parentWidth: number,
+  parentHeight: number,
+  childWidth: number,
+  childHeight: number,
+  scale = 1,
+  offsetX = 0.5,
+  offsetY = 0.5
+) {
+  const childRatio = childWidth / childHeight
+  const parentRatio = parentWidth / parentHeight
+  let width = parentWidth * scale
+  let height = parentHeight * scale
+
+  if (childRatio < parentRatio) {
+    height = width / childRatio
+  } else {
+    width = height * childRatio
+  }
+
+  return {
+    width: Math.round(width),
+    height: Math.round(height),
+    left: Math.round((parentWidth - width) * offsetX),
+    top: Math.round((parentHeight - height) * offsetY),
+  }
+}