ApiSchemaParamSubdetails() — supabase Function Reference

Source Code

apps/docs/features/docs/Reference.ui.tsx lines 466–578

export function ApiSchemaParamSubdetails({
  schema,
  className,
}: {
  schema: ISchema
  className?: string
}) {
  if (
    !('enum' in schema) &&
    'type' in schema &&
    (['boolean', 'number', 'integer'].includes(schema.type) ||
      (schema.type === 'string' &&
        !('minLength' in schema || 'maxLength' in schema || 'pattern' in schema)) ||
      (schema.type === 'array' &&
        'type' in schema.items &&
        ['boolean', 'number', 'integer', 'string', 'file'].includes(schema.items.type)))
  ) {
    return null
  }

  const subContent =
    'enum' in schema
      ? schema.enum
      : 'anyOf' in schema
        ? schema.anyOf
        : 'oneOf' in schema
          ? schema.oneOf
          : 'allOf' in schema
            ? schema.allOf
            : 'type' in schema && schema.type === 'string'
              ? ['minLength', 'maxLength', 'pattern']
                  .filter((key) => key in schema)
                  .map((key) => ({
                    constraint: key,
                    value: schema[key],
                  }))
              : []

  return (
    <Collapsible_Shadcn_>
      <CollapsibleTrigger_Shadcn_
        className={cn(
          'group',
          'w-fit rounded-full',
          'px-5 py-1',
          'border border-default',
          'flex items-center gap-2',
          'text-left text-sm text-foreground-light',
          'hover:bg-surface-100',
          'data-[state=open]:w-full',
          'data-[state=open]:rounded-b-none data-[state=open]:rounded-tl-lg data-[state=open]:rounded-tr-lg',
          'transition [transition-property:width,background-color]',
          className
        )}
      >
        <XCircle
          size={14}
          className={cn(
            'text-foreground-muted',
            'group-data-[state=closed]:rotate-45',
            'transition-transform'
          )}
        />
        {'enum' in schema
          ? 'Accepted values'
          : 'allOf' in schema || 'anyOf' in schema || 'oneOf' in schema
            ? 'Options'
            : schema.type === 'array'
              ? 'Items'
              : schema.type === 'object'
                ? 'Object schema'
                : 'Details'}
      </CollapsibleTrigger_Shadcn_>
      <CollapsibleContent_Shadcn_>
        {'type' in schema && schema.type === 'object' ? (
          <div className={cn('border-b border-x border-fault', 'rounded-b-lg', 'p-5')}>
            <ApiSchema schema={schema} />
          </div>
        ) : (
          <ul className={cn('border-b border-x border-default', 'rounded-b-lg')}>
            {subContent.map((detail: any, index: number) => (
              <li
                key={index}
                className={cn(
                  'px-5 py-3',
                  'border-t border-default first:border-t-0',
                  'flex flex-col gap-3'
                )}
              >
                {'enum' in schema ? (
                  <span className="font-mono text-sm font-medium text-foreground">
                    {String(detail)}
                  </span>
                ) : 'type' in schema && schema.type === 'string' ? (
                  <span className="text-sm text-foreground flex items-baseline gap-2">
                    <span className="font-mono text-sm font-medium text-foreground">
                      {detail.constraint}
                    </span>
                    {detail.value}
                  </span>
                ) : 'anyOf' in schema || 'allOf' in schema || 'oneOf' in schema ? (
                  <ApiSchemaParamDetails
                    param={{ name: '', schema: detail, required: !detail.nullable, in: 'body' }}
                  />
                ) : null}
              </li>
            ))}
          </ul>
        )}
      </CollapsibleContent_Shadcn_>
    </Collapsible_Shadcn_>
  )
}