fumadocs-openapi 10.2.2 → 10.2.3

package/dist/playground/components/inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputs.js","names":["value"],"sources":["../../../src/playground/components/inputs.tsx"],"sourcesContent":["'use client';\nimport { type ComponentProps, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { ChevronDown, Plus, Trash2, X } from 'lucide-react';\nimport { useController, useFieldArray, useFormContext } from 'react-hook-form';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/ui/components/select';\nimport { Input, labelVariants } from '@/ui/components/input';\nimport { getDefaultValue } from '../get-default-values';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from 'fumadocs-ui/components/ui/button';\nimport { FormatFlags, schemaToString } from '@/utils/schema-to-string';\nimport { anyFields, useFieldInfo, useResolvedSchema, useSchemaScope } from '@/playground/schema';\nimport type { ParsedSchema } from '@/utils/schema';\n\nfunction FieldLabel(props: ComponentProps<'label'>) {\n  return (\n    <label {...props} className={cn('w-full inline-flex items-center gap-0.5', props.className)}>\n      {props.children}\n    </label>\n  );\n}\n\nfunction FieldLabelName({\n  required = false,\n  ...props\n}: ComponentProps<'span'> & { required?: boolean }) {\n  return (\n    <span {...props} className={cn(labelVariants(), 'font-mono me-auto', props.className)}>\n      {props.children}\n      {required && <span className=\"text-red-400/80 mx-1\">*</span>}\n    </span>\n  );\n}\n\nfunction FieldLabelType(props: ComponentProps<'code'>) {\n  return (\n    <code {...props} className={cn('text-xs text-fd-muted-foreground', props.className)}>\n      {props.children}\n    </code>\n  );\n}\n\nexport function ObjectInput({\n  field: _field,\n  fieldName,\n  ...props\n}: {\n  field: Exclude<ParsedSchema, boolean>;\n  fieldName: string;\n} & ComponentProps<'div'>) {\n  const field = useResolvedSchema(_field);\n\n  return (\n    <div {...props} className={cn('grid grid-cols-1 gap-4 @md:grid-cols-2', props.className)}>\n      {Object.entries(field.properties ?? {}).map(([key, child]) => (\n        <FieldSet\n          key={key}\n          name={key}\n          field={child}\n          fieldName={`${fieldName}.${key}`}\n          isRequired={field.required?.includes(key)}\n        />\n      ))}\n      {(field.additionalProperties || field.patternProperties) && (\n        <DynamicProperties\n          fieldName={fieldName}\n          filterKey={(v) => !field.properties || !Object.keys(field.properties).includes(v)}\n          getType={(key) => {\n            for (const pattern in field.patternProperties) {\n              if (key.match(RegExp(pattern))) {\n                return field.patternProperties[pattern];\n              }\n            }\n\n            if (field.additionalProperties) return field.additionalProperties;\n\n            return anyFields;\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport function JsonInput({ fieldName }: { fieldName: string }) {\n  const controller = useController({\n    name: fieldName,\n  });\n  const [error, setError] = useState<string | null>(null);\n  const [value, setValue] = useState(() => JSON.stringify(controller.field.value, null, 2));\n\n  return (\n    <div className=\"flex flex-col bg-fd-secondary text-fd-secondary-foreground overflow-hidden border rounded-lg\">\n      <textarea\n        {...controller.field}\n        value={value}\n        className=\"p-2 h-[240px] text-sm font-mono resize-none focus-visible:outline-none\"\n        onChange={(v) => {\n          setValue(v.target.value);\n          try {\n            controller.field.onChange(JSON.parse(v.target.value));\n            setError(null);\n          } catch (e) {\n            if (e instanceof Error) setError(e.message);\n          }\n        }}\n      />\n      <p className=\"p-2 text-xs font-mono border-t text-red-400 empty:hidden\">{error}</p>\n    </div>\n  );\n}\n\nfunction DynamicProperties({\n  fieldName,\n  filterKey = () => true,\n  getType = () => anyFields,\n}: {\n  fieldName: string;\n  filterKey?: (key: string) => boolean;\n  getType: (key: string) => ParsedSchema;\n}) {\n  const { control, setValue, getValues } = useFormContext();\n  const [nextName, setNextName] = useState('');\n  const [properties, setProperties] = useState<string[]>(() => {\n    const value = getValues(fieldName);\n    if (value) return Object.keys(value).filter(filterKey);\n\n    return [];\n  });\n\n  const onAppend = () => {\n    const name = nextName.trim();\n    if (name.length === 0) return;\n\n    setProperties((p) => {\n      if (p.includes(name) || !filterKey(name)) return p;\n      const type = getType(name);\n\n      setValue(`${fieldName}.${name}`, getDefaultValue(type));\n      setNextName('');\n      return [...p, name];\n    });\n  };\n\n  return (\n    <>\n      {properties.map((item) => {\n        const type = getType(item);\n\n        return (\n          <FieldSet\n            key={item}\n            name={item}\n            field={type}\n            fieldName={`${fieldName}.${item}`}\n            toolbar={\n              <button\n                type=\"button\"\n                aria-label=\"Remove Item\"\n                className={cn(\n                  buttonVariants({\n                    color: 'outline',\n                    size: 'icon-xs',\n                  }),\n                )}\n                onClick={() => {\n                  setProperties((p) => p.filter((prop) => prop !== item));\n                  control.unregister(`${fieldName}.${item}`);\n                }}\n              >\n                <Trash2 />\n              </button>\n            }\n          />\n        );\n      })}\n      <div className=\"flex gap-2 col-span-full\">\n        <Input\n          value={nextName}\n          placeholder=\"Enter Property Name\"\n          onChange={(e) => setNextName(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onAppend();\n              e.preventDefault();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          className={cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'px-4')}\n          onClick={onAppend}\n        >\n          New\n        </button>\n      </div>\n    </>\n  );\n}\n\nexport function FieldInput({\n  field,\n  fieldName,\n  isRequired,\n  ...props\n}: HTMLAttributes<HTMLElement> & {\n  field: Exclude<ParsedSchema, boolean>;\n  isRequired?: boolean;\n  fieldName: string;\n}) {\n  const form = useFormContext();\n  const {\n    field: { value, onChange, ...restField },\n    fieldState,\n  } = useController({\n    control: form.control,\n    name: fieldName,\n  });\n\n  if (field.type === 'null') return;\n\n  if (field.type === 'string' && field.format === 'binary') {\n    return (\n      <div {...props}>\n        <label\n          htmlFor={fieldName}\n          className={cn(\n            buttonVariants({\n              color: 'secondary',\n              className: 'w-full h-9 gap-2 truncate',\n            }),\n          )}\n        >\n          {value instanceof File ? (\n            <>\n              <span className=\"text-fd-muted-foreground text-xs\">Selected</span>\n              <span className=\"truncate w-0 flex-1 text-end\">{value.name}</span>\n            </>\n          ) : (\n            <span className=\"text-fd-muted-foreground\">Upload</span>\n          )}\n        </label>\n        <input\n          id={fieldName}\n          type=\"file\"\n          multiple={false}\n          onChange={(e) => {\n            if (!e.target.files) return;\n            onChange(e.target.files.item(0));\n          }}\n          hidden\n          {...restField}\n        />\n      </div>\n    );\n  }\n\n  if (field.type === 'boolean') {\n    return (\n      <Select\n        value={String(value)}\n        onValueChange={(value) => onChange(value === 'undefined' ? undefined : value === 'true')}\n        disabled={restField.disabled}\n      >\n        <SelectTrigger id={fieldName} className={props.className} {...restField}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"true\">True</SelectItem>\n          <SelectItem value=\"false\">False</SelectItem>\n          {!isRequired && <SelectItem value=\"undefined\">Unset</SelectItem>}\n        </SelectContent>\n      </Select>\n    );\n  }\n\n  const isNumber = field.type === 'integer' || field.type === 'number';\n\n  return (\n    <div {...props} className={cn('flex flex-row gap-2', props.className)}>\n      <Input\n        id={fieldName}\n        placeholder=\"Enter value\"\n        type={isNumber ? 'number' : 'text'}\n        step={field.type === 'integer' ? 1 : undefined}\n        value={value ?? ''}\n        onChange={(e) => {\n          if (isNumber && !Number.isNaN(e.target.valueAsNumber)) {\n            onChange(e.target.valueAsNumber);\n          } else if (!isNumber) {\n            onChange(e.target.value);\n          }\n        }}\n        {...restField}\n      />\n      {fieldState.isDirty && (\n        <button\n          type=\"button\"\n          // TODO: `react-hook-form` doesn't support setting a value to `undefined` (aka remove the value), if there's a default value defined.\n          // the default value is kept by `react-hook-form` internally, we cannot manipulate it.\n          // hence, we can only support resetting to the default value.\n          // perhaps when we migrate to Tanstack Form, we can reconsider this.\n          onClick={() => form.resetField(fieldName)}\n          className=\"text-fd-muted-foreground\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function FieldSet({\n  field: _field,\n  fieldName,\n  toolbar,\n  name,\n  isRequired,\n  depth = 0,\n  slotType,\n  collapsible = true,\n  ...props\n}: HTMLAttributes<HTMLElement> & {\n  isRequired?: boolean;\n  name?: ReactNode;\n  field: ParsedSchema;\n  fieldName: string;\n  depth?: number;\n\n  slotType?: ReactNode;\n  toolbar?: ReactNode;\n  collapsible?: boolean;\n}) {\n  const { readOnly, writeOnly } = useSchemaScope();\n  const field = useResolvedSchema(_field);\n  const [show, setShow] = useState(!collapsible);\n  const { info, updateInfo } = useFieldInfo(fieldName, field, depth);\n\n  if (_field === false) return;\n  if (field.readOnly && !readOnly) return;\n  if (field.writeOnly && !writeOnly) return;\n\n  if (info.unionField) {\n    const union = field[info.unionField]!;\n    const showSelect = union.length > 1;\n\n    return (\n      <FieldSet\n        {...props}\n        name={name}\n        fieldName={fieldName}\n        isRequired={isRequired}\n        field={union[info.oneOf]}\n        depth={depth + 1}\n        slotType={showSelect ? false : slotType}\n        toolbar={\n          <>\n            {showSelect && (\n              <select\n                className=\"text-xs font-mono\"\n                value={info.oneOf}\n                onChange={(e) => {\n                  updateInfo({\n                    oneOf: Number(e.target.value),\n                  });\n                }}\n              >\n                {union.map((item, i) => (\n                  <option key={i} value={i} className=\"bg-fd-popover text-fd-popover-foreground\">\n                    {schemaToString(item, undefined, FormatFlags.UseAlias)}\n                  </option>\n                ))}\n              </select>\n            )}\n            {toolbar}\n          </>\n        }\n      />\n    );\n  }\n\n  if (Array.isArray(field.type)) {\n    const showSelect = field.type.length > 1;\n\n    return (\n      <FieldSet\n        {...props}\n        name={name}\n        fieldName={fieldName}\n        isRequired={isRequired}\n        field={{\n          ...field,\n          type: info.selectedType,\n        }}\n        depth={depth + 1}\n        slotType={showSelect ? false : slotType}\n        toolbar={\n          <>\n            {showSelect && (\n              <select\n                className=\"text-xs font-mono\"\n                value={info.selectedType}\n                onChange={(e) => {\n                  updateInfo({\n                    selectedType: e.target.value,\n                  });\n                }}\n              >\n                {field.type.map((item) => (\n                  <option\n                    key={item}\n                    value={item}\n                    className=\"bg-fd-popover text-fd-popover-foreground\"\n                  >\n                    {item}\n                  </option>\n                ))}\n              </select>\n            )}\n            {toolbar}\n          </>\n        }\n      />\n    );\n  }\n\n  const showBn = collapsible && (\n    <button\n      type=\"button\"\n      onClick={() => setShow((prev) => !prev)}\n      className={cn(\n        buttonVariants({\n          size: 'icon-xs',\n          color: 'ghost',\n          className: 'text-fd-muted-foreground -ms-1',\n        }),\n      )}\n    >\n      <ChevronDown className={cn(show && 'rotate-180')} />\n    </button>\n  );\n\n  if (field.type === 'object' || info.intersection) {\n    return (\n      <fieldset\n        {...props}\n        className={cn('flex flex-col gap-1.5 col-span-full @container', props.className)}\n      >\n        <FieldLabel htmlFor={fieldName}>\n          {showBn}\n          <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n          {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n          {toolbar}\n        </FieldLabel>\n        {show && (\n          <ObjectInput\n            field={info.intersection?.merged ?? field}\n            fieldName={fieldName}\n            {...props}\n            className={cn(\n              'rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm',\n              props.className,\n            )}\n          />\n        )}\n      </fieldset>\n    );\n  }\n\n  if (field.type === 'array') {\n    return (\n      <fieldset {...props} className={cn('flex flex-col gap-1.5 col-span-full', props.className)}>\n        <FieldLabel htmlFor={fieldName}>\n          {showBn}\n          <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n          {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n          {toolbar}\n        </FieldLabel>\n        {show && (\n          <ArrayInput\n            fieldName={fieldName}\n            items={field.items ?? anyFields}\n            {...props}\n            className={cn(\n              'rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm',\n              props.className,\n            )}\n          />\n        )}\n      </fieldset>\n    );\n  }\n  return (\n    <fieldset {...props} className={cn('flex flex-col gap-1.5', props.className)}>\n      <FieldLabel htmlFor={fieldName}>\n        <FieldLabelName required={isRequired}>{name}</FieldLabelName>\n        {slotType ?? <FieldLabelType>{schemaToString(field)}</FieldLabelType>}\n        {toolbar}\n      </FieldLabel>\n      <FieldInput field={field} fieldName={fieldName} isRequired={isRequired} />\n    </fieldset>\n  );\n}\n\nfunction ArrayInput({\n  fieldName,\n  items,\n  ...props\n}: {\n  fieldName: string;\n  items: ParsedSchema;\n} & ComponentProps<'div'>) {\n  const name = fieldName.split('.').at(-1) ?? '';\n  const { fields, append, remove } = useFieldArray({\n    name: fieldName,\n  });\n\n  return (\n    <div {...props} className={cn('flex flex-col gap-2', props.className)}>\n      {fields.map((item, index) => (\n        <FieldSet\n          key={item.id}\n          name={\n            <span className=\"text-fd-muted-foreground\">\n              {name}[{index}]\n            </span>\n          }\n          field={items}\n          isRequired\n          fieldName={`${fieldName}.${index}`}\n          toolbar={\n            <button\n              type=\"button\"\n              aria-label=\"Remove Item\"\n              className={cn(\n                buttonVariants({\n                  color: 'outline',\n                  size: 'icon-xs',\n                }),\n              )}\n              onClick={() => remove(index)}\n            >\n              <Trash2 />\n            </button>\n          }\n        />\n      ))}\n      <button\n        type=\"button\"\n        className={cn(\n          buttonVariants({\n            color: 'secondary',\n            className: 'gap-1.5 py-2',\n            size: 'sm',\n          }),\n        )}\n        onClick={() => {\n          append(getDefaultValue(items));\n        }}\n      >\n        <Plus className=\"size-4\" />\n        New Item\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/playground/components/oauth-dialog.js

@@ -1,177 +1,273 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '../../ui/components/dialog.js';
-import { useForm } from 'react-hook-form';
-import { Input, labelVariants } from '../../ui/components/input.js';
-import { useQuery } from '../../utils/use-query.js';
-import { useEffect, useState } from 'react';
-import { cn } from '../../utils/cn.js';
-import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/components/select.js';
+import { cn } from "../../utils/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
+import { Input, labelVariants } from "../../ui/components/input.js";
+import { useQuery } from "../../utils/use-query.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../ui/components/dialog.js";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+
+//#region src/playground/components/oauth-dialog.tsx
 const FlowTypes = {
-    password: {
-        name: 'Resource Owner Password Flow',
-        description: 'Authenticate using username and password.',
-    },
-    clientCredentials: {
-        name: 'Client Credentials',
-        description: 'Intended for the server-to-server authentication.',
-    },
-    authorizationCode: {
-        name: 'Authorization code',
-        description: 'Authenticate with 3rd party services',
-    },
-    implicit: {
-        name: 'Implicit',
-        description: 'Retrieve the access token directly.',
-    },
+	password: {
+		name: "Resource Owner Password Flow",
+		description: "Authenticate using username and password."
+	},
+	clientCredentials: {
+		name: "Client Credentials",
+		description: "Intended for the server-to-server authentication."
+	},
+	authorizationCode: {
+		name: "Authorization code",
+		description: "Authenticate with 3rd party services"
+	},
+	implicit: {
+		name: "Implicit",
+		description: "Retrieve the access token directly."
+	}
 };
-export function OauthDialog({ scheme, scopes, setToken, children, open, setOpen, }) {
-    const [type, setType] = useState(() => {
-        return Object.keys(scheme.flows)[0];
-    });
-    const form = useForm({
-        defaultValues: {
-            clientId: '',
-            clientSecret: '',
-            username: '',
-            password: '',
-        },
-    });
-    const authCodeCallback = useQuery(async (code, state) => {
-        const value = scheme.flows.authorizationCode;
-        const res = await fetch(value.tokenUrl, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-            },
-            body: new URLSearchParams({
-                grant_type: 'authorization_code',
-                code,
-                // note: `state` could be invalid, but server will check it
-                redirect_uri: state.redirect_uri,
-                client_id: state.client_id,
-                client_secret: state.client_secret,
-            }),
-        });
-        if (!res.ok)
-            throw new Error(await res.text());
-        const { access_token, token_type = 'Bearer' } = (await res.json());
-        setToken(`${token_type} ${access_token}`);
-        setOpen(false);
-    });
-    useEffect(() => {
-        if (scheme.flows.authorizationCode) {
-            const params = new URLSearchParams(window.location.search);
-            const state = params.get('state');
-            const code = params.get('code');
-            if (state && code) {
-                const parsedState = JSON.parse(state);
-                setOpen(true);
-                form.setValue('clientId', parsedState.client_id);
-                form.setValue('clientSecret', parsedState.client_secret);
-                authCodeCallback.start(code, parsedState);
-                window.history.replaceState(null, '', window.location.pathname);
-                return;
-            }
-        }
-        if (scheme.flows.implicit && window.location.hash.length > 1) {
-            const params = new URLSearchParams(window.location.hash.slice(1));
-            const state = params.get('state');
-            const token = params.get('access_token');
-            const type = params.get('token_type') ?? 'Bearer';
-            if (state && token) {
-                const parsedState = JSON.parse(state);
-                form.setValue('clientId', parsedState.client_id);
-                setToken(`${type} ${token}`);
-                window.history.replaceState(null, '', window.location.pathname);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- first page load only
-    }, []);
-    const authorize = useQuery(async (values) => {
-        if (type === 'implicit') {
-            const value = scheme.flows[type];
-            const params = new URLSearchParams();
-            params.set('response_type', 'token');
-            params.set('client_id', values.clientId);
-            params.set('redirect_uri', window.location.href);
-            params.set('scope', scopes.join('+'));
-            params.set('state', JSON.stringify({
-                client_id: values.clientId,
-                redirect_uri: window.location.href,
-            }));
-            window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
-            return;
-        }
-        if (type === 'authorizationCode') {
-            const value = scheme.flows[type];
-            const params = new URLSearchParams();
-            params.set('response_type', 'code');
-            params.set('client_id', values.clientId);
-            params.set('redirect_uri', window.location.href);
-            params.set('scope', scopes.join('+'));
-            params.set('state', JSON.stringify({
-                client_id: values.clientId,
-                client_secret: values.clientSecret,
-                redirect_uri: window.location.href,
-            }));
-            window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
-            return;
-        }
-        let res;
-        if (type === 'password') {
-            const value = scheme.flows[type];
-            res = await fetch(value.tokenUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: new URLSearchParams({
-                    grant_type: 'password',
-                    username: values.username,
-                    password: values.password,
-                    scope: scopes.join('+'),
-                }),
-            });
-        }
-        if (type === 'clientCredentials') {
-            const value = scheme.flows[type];
-            res = await fetch(value.tokenUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: new URLSearchParams({
-                    grant_type: 'client_credentials',
-                    client_id: values.clientId,
-                    client_secret: values.clientSecret,
-                    scope: scopes.join('+'),
-                }),
-            });
-        }
-        if (res) {
-            if (!res.ok)
-                throw new Error(await res.text());
-            const { access_token, token_type = 'Bearer' } = (await res.json());
-            setToken(`${token_type} ${access_token}`);
-            setOpen(false);
-        }
-    });
-    const onSubmit = form.handleSubmit((values) => {
-        return authorize.start(values);
-    });
-    const isLoading = authorize.isLoading || authCodeCallback.isLoading;
-    const error = authCodeCallback.error ?? authorize.error;
-    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [children, _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Authorization" }), _jsx(DialogDescription, { children: "Obtain the access token for API." })] }), _jsxs("form", { className: "flex flex-col gap-6", onSubmit: (e) => {
-                            void onSubmit(e);
-                            e.stopPropagation();
-                        }, children: [_jsxs(Select, { value: type, onValueChange: setType, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.keys(scheme.flows).map((key) => {
-                                            const { name, description } = FlowTypes[key];
-                                            return (_jsxs(SelectItem, { value: key, children: [_jsx("p", { className: "font-medium", children: name }), _jsx("p", { className: "text-fd-muted-foreground", children: description })] }, key));
-                                        }) })] }), (type === 'authorizationCode' ||
-                                type === 'clientCredentials' ||
-                                type === 'implicit') && (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_id", className: cn(labelVariants()), children: "Client ID" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client ID of your OAuth application." }), _jsx(Input, { id: "client_id", placeholder: "Enter value", type: "text", autoComplete: "off", disabled: isLoading, ...form.register('clientId', { required: true }) })] })), (type === 'authorizationCode' || type === 'clientCredentials') && (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_secret", className: cn(labelVariants()), children: "Client Secret" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client secret of your OAuth application." }), _jsx(Input, { id: "client_secret", placeholder: "Enter value", type: "password", autoComplete: "off", disabled: isLoading, ...form.register('clientSecret', { required: true }) })] })), type === 'password' && (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "username", className: cn(labelVariants()), children: "Username" }), _jsx(Input, { id: "username", placeholder: "Enter value", type: "text", disabled: isLoading, autoComplete: "off", ...form.register('username', { required: true }) })] }), _jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "password", className: cn(labelVariants()), children: "Client Secret" }), _jsx(Input, { id: "password", placeholder: "Enter value", type: "password", autoComplete: "off", disabled: isLoading, ...form.register('password', { required: true }) })] })] })), error ? (_jsx("p", { className: "text-red-400 font-medium text-sm", children: String(error) })) : null, _jsx("button", { type: "submit", disabled: isLoading, className: cn(buttonVariants({
-                                    color: 'primary',
-                                })), children: authCodeCallback.isLoading ? 'Fetching token...' : 'Submit' })] })] })] }));
+function OauthDialog({ scheme, scopes, setToken, children, open, setOpen }) {
+	const [type, setType] = useState(() => {
+		return Object.keys(scheme.flows)[0];
+	});
+	const form = useForm({ defaultValues: {
+		clientId: "",
+		clientSecret: "",
+		username: "",
+		password: ""
+	} });
+	const authCodeCallback = useQuery(async (code, state) => {
+		const value = scheme.flows.authorizationCode;
+		const res = await fetch(value.tokenUrl, {
+			method: "POST",
+			headers: { "Content-Type": "application/x-www-form-urlencoded" },
+			body: new URLSearchParams({
+				grant_type: "authorization_code",
+				code,
+				redirect_uri: state.redirect_uri,
+				client_id: state.client_id,
+				client_secret: state.client_secret
+			})
+		});
+		if (!res.ok) throw new Error(await res.text());
+		const { access_token, token_type = "Bearer" } = await res.json();
+		setToken(`${token_type} ${access_token}`);
+		setOpen(false);
+	});
+	useEffect(() => {
+		if (scheme.flows.authorizationCode) {
+			const params = new URLSearchParams(window.location.search);
+			const state = params.get("state");
+			const code = params.get("code");
+			if (state && code) {
+				const parsedState = JSON.parse(state);
+				setOpen(true);
+				form.setValue("clientId", parsedState.client_id);
+				form.setValue("clientSecret", parsedState.client_secret);
+				authCodeCallback.start(code, parsedState);
+				window.history.replaceState(null, "", window.location.pathname);
+				return;
+			}
+		}
+		if (scheme.flows.implicit && window.location.hash.length > 1) {
+			const params = new URLSearchParams(window.location.hash.slice(1));
+			const state = params.get("state");
+			const token = params.get("access_token");
+			const type$1 = params.get("token_type") ?? "Bearer";
+			if (state && token) {
+				const parsedState = JSON.parse(state);
+				form.setValue("clientId", parsedState.client_id);
+				setToken(`${type$1} ${token}`);
+				window.history.replaceState(null, "", window.location.pathname);
+			}
+		}
+	}, []);
+	const authorize = useQuery(async (values) => {
+		if (type === "implicit") {
+			const value = scheme.flows[type];
+			const params = new URLSearchParams();
+			params.set("response_type", "token");
+			params.set("client_id", values.clientId);
+			params.set("redirect_uri", window.location.href);
+			params.set("scope", scopes.join("+"));
+			params.set("state", JSON.stringify({
+				client_id: values.clientId,
+				redirect_uri: window.location.href
+			}));
+			window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
+			return;
+		}
+		if (type === "authorizationCode") {
+			const value = scheme.flows[type];
+			const params = new URLSearchParams();
+			params.set("response_type", "code");
+			params.set("client_id", values.clientId);
+			params.set("redirect_uri", window.location.href);
+			params.set("scope", scopes.join("+"));
+			params.set("state", JSON.stringify({
+				client_id: values.clientId,
+				client_secret: values.clientSecret,
+				redirect_uri: window.location.href
+			}));
+			window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
+			return;
+		}
+		let res;
+		if (type === "password") {
+			const value = scheme.flows[type];
+			res = await fetch(value.tokenUrl, {
+				method: "POST",
+				headers: { "Content-Type": "application/x-www-form-urlencoded" },
+				body: new URLSearchParams({
+					grant_type: "password",
+					username: values.username,
+					password: values.password,
+					scope: scopes.join("+")
+				})
+			});
+		}
+		if (type === "clientCredentials") {
+			const value = scheme.flows[type];
+			res = await fetch(value.tokenUrl, {
+				method: "POST",
+				headers: { "Content-Type": "application/x-www-form-urlencoded" },
+				body: new URLSearchParams({
+					grant_type: "client_credentials",
+					client_id: values.clientId,
+					client_secret: values.clientSecret,
+					scope: scopes.join("+")
+				})
+			});
+		}
+		if (res) {
+			if (!res.ok) throw new Error(await res.text());
+			const { access_token, token_type = "Bearer" } = await res.json();
+			setToken(`${token_type} ${access_token}`);
+			setOpen(false);
+		}
+	});
+	const onSubmit = form.handleSubmit((values) => {
+		return authorize.start(values);
+	});
+	const isLoading = authorize.isLoading || authCodeCallback.isLoading;
+	const error = authCodeCallback.error ?? authorize.error;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onOpenChange: setOpen,
+		children: [children, /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Authorization" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Obtain the access token for API." })] }), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-6",
+			onSubmit: (e) => {
+				onSubmit(e);
+				e.stopPropagation();
+			},
+			children: [
+				/* @__PURE__ */ jsxs(Select, {
+					value: type,
+					onValueChange: setType,
+					children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(scheme.flows).map((key) => {
+						const { name, description } = FlowTypes[key];
+						return /* @__PURE__ */ jsxs(SelectItem, {
+							value: key,
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium",
+								children: name
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-fd-muted-foreground",
+								children: description
+							})]
+						}, key);
+					}) })]
+				}),
+				(type === "authorizationCode" || type === "clientCredentials" || type === "implicit") && /* @__PURE__ */ jsxs("fieldset", {
+					className: "flex flex-col gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("label", {
+							htmlFor: "client_id",
+							className: cn(labelVariants()),
+							children: "Client ID"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-fd-muted-foreground text-sm",
+							children: "The client ID of your OAuth application."
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							id: "client_id",
+							placeholder: "Enter value",
+							type: "text",
+							autoComplete: "off",
+							disabled: isLoading,
+							...form.register("clientId", { required: true })
+						})
+					]
+				}),
+				(type === "authorizationCode" || type === "clientCredentials") && /* @__PURE__ */ jsxs("fieldset", {
+					className: "flex flex-col gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("label", {
+							htmlFor: "client_secret",
+							className: cn(labelVariants()),
+							children: "Client Secret"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-fd-muted-foreground text-sm",
+							children: "The client secret of your OAuth application."
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							id: "client_secret",
+							placeholder: "Enter value",
+							type: "password",
+							autoComplete: "off",
+							disabled: isLoading,
+							...form.register("clientSecret", { required: true })
+						})
+					]
+				}),
+				type === "password" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("fieldset", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "username",
+						className: cn(labelVariants()),
+						children: "Username"
+					}), /* @__PURE__ */ jsx(Input, {
+						id: "username",
+						placeholder: "Enter value",
+						type: "text",
+						disabled: isLoading,
+						autoComplete: "off",
+						...form.register("username", { required: true })
+					})]
+				}), /* @__PURE__ */ jsxs("fieldset", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "password",
+						className: cn(labelVariants()),
+						children: "Client Secret"
+					}), /* @__PURE__ */ jsx(Input, {
+						id: "password",
+						placeholder: "Enter value",
+						type: "password",
+						autoComplete: "off",
+						disabled: isLoading,
+						...form.register("password", { required: true })
+					})]
+				})] }),
+				error ? /* @__PURE__ */ jsx("p", {
+					className: "text-red-400 font-medium text-sm",
+					children: String(error)
+				}) : null,
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: isLoading,
+					className: cn(buttonVariants({ color: "primary" })),
+					children: authCodeCallback.isLoading ? "Fetching token..." : "Submit"
+				})
+			]
+		})] })]
+	});
 }
-export const OauthDialogTrigger = DialogTrigger;
+const OauthDialogTrigger = DialogTrigger;
+
+//#endregion
+export { OauthDialog, OauthDialogTrigger };
+//# sourceMappingURL=oauth-dialog.js.map

package/dist/playground/components/oauth-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-dialog.js","names":["type"],"sources":["../../../src/playground/components/oauth-dialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/ui/components/dialog';\nimport type { OpenAPIV3_1 } from 'openapi-types';\nimport { useForm } from 'react-hook-form';\nimport { Input, labelVariants } from '@/ui/components/input';\nimport { useQuery } from '@/utils/use-query';\nimport { type ReactNode, useEffect, useState } from 'react';\nimport { cn } from '@/utils/cn';\nimport { buttonVariants } from 'fumadocs-ui/components/ui/button';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/ui/components/select';\n\ntype FlowType = keyof OpenAPIV3_1.OAuth2SecurityScheme['flows'];\n\nexport interface AuthDialogProps {\n  scheme: OpenAPIV3_1.OAuth2SecurityScheme;\n  scopes: string[];\n\n  open: boolean;\n  setOpen: (v: boolean) => void;\n  setToken: (token: string) => void;\n  children: ReactNode;\n}\n\ninterface FormValues {\n  clientId: string;\n  clientSecret: string;\n  username: string;\n  password: string;\n}\n\ninterface AuthCodeState {\n  redirect_uri: string;\n  client_id: string;\n  client_secret: string;\n}\n\ninterface ImplicitState {\n  redirect_uri: string;\n  client_id: string;\n}\n\nconst FlowTypes = {\n  password: {\n    name: 'Resource Owner Password Flow',\n    description: 'Authenticate using username and password.',\n  },\n  clientCredentials: {\n    name: 'Client Credentials',\n    description: 'Intended for the server-to-server authentication.',\n  },\n  authorizationCode: {\n    name: 'Authorization code',\n    description: 'Authenticate with 3rd party services',\n  },\n  implicit: {\n    name: 'Implicit',\n    description: 'Retrieve the access token directly.',\n  },\n} as const;\n\nexport function OauthDialog({\n  scheme,\n  scopes,\n  setToken,\n  children,\n  open,\n  setOpen,\n}: AuthDialogProps) {\n  const [type, setType] = useState(() => {\n    return Object.keys(scheme.flows)[0] as FlowType;\n  });\n\n  const form = useForm<FormValues>({\n    defaultValues: {\n      clientId: '',\n      clientSecret: '',\n      username: '',\n      password: '',\n    },\n  });\n\n  const authCodeCallback = useQuery(async (code: string, state: AuthCodeState) => {\n    const value = scheme.flows.authorizationCode!;\n\n    const res = await fetch(value.tokenUrl, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/x-www-form-urlencoded',\n      },\n      body: new URLSearchParams({\n        grant_type: 'authorization_code',\n        code,\n        // note: `state` could be invalid, but server will check it\n        redirect_uri: state.redirect_uri,\n        client_id: state.client_id,\n        client_secret: state.client_secret,\n      }),\n    });\n\n    if (!res.ok) throw new Error(await res.text());\n    const { access_token, token_type = 'Bearer' } = (await res.json()) as {\n      access_token: string;\n      token_type?: string;\n    };\n\n    setToken(`${token_type} ${access_token}`);\n    setOpen(false);\n  });\n\n  useEffect(() => {\n    if (scheme.flows.authorizationCode) {\n      const params = new URLSearchParams(window.location.search);\n      const state = params.get('state');\n      const code = params.get('code');\n\n      if (state && code) {\n        const parsedState = JSON.parse(state) as AuthCodeState;\n        setOpen(true);\n\n        form.setValue('clientId', parsedState.client_id);\n        form.setValue('clientSecret', parsedState.client_secret);\n        authCodeCallback.start(code, parsedState);\n        window.history.replaceState(null, '', window.location.pathname);\n        return;\n      }\n    }\n\n    if (scheme.flows.implicit && window.location.hash.length > 1) {\n      const params = new URLSearchParams(window.location.hash.slice(1));\n      const state = params.get('state');\n      const token = params.get('access_token');\n      const type = params.get('token_type') ?? 'Bearer';\n\n      if (state && token) {\n        const parsedState = JSON.parse(state) as ImplicitState;\n\n        form.setValue('clientId', parsedState.client_id);\n        setToken(`${type} ${token}`);\n        window.history.replaceState(null, '', window.location.pathname);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- first page load only\n  }, []);\n\n  const authorize = useQuery(async (values: FormValues) => {\n    if (type === 'implicit') {\n      const value = scheme.flows[type]!;\n\n      const params = new URLSearchParams();\n      params.set('response_type', 'token');\n      params.set('client_id', values.clientId);\n      params.set('redirect_uri', window.location.href);\n      params.set('scope', scopes.join('+'));\n      params.set(\n        'state',\n        JSON.stringify({\n          client_id: values.clientId,\n          redirect_uri: window.location.href,\n        } satisfies ImplicitState),\n      );\n\n      window.location.replace(`${value.authorizationUrl}?${params.toString()}`);\n      return;\n    }\n    if (type === 'authorizationCode') {\n      const value = scheme.flows[type]!;\n\n      const params = new URLSearchParams();\n      params.set('response_type', 'code');\n      params.set('client_id', values.clientId);\n      params.set('redirect_uri', window.location.href);\n      params.set('scope', scopes.join('+'));\n      params.set(\n        'state',\n        JSON.stringify({\n          client_id: values.clientId,\n          client_secret: values.clientSecret,\n          redirect_uri: window.location.href,\n        } satisfies AuthCodeState),\n      );\n\n      window.location.replace(`${value.authorizationUrl}?${params.toString()}`);\n      return;\n    }\n\n    let res;\n    if (type === 'password') {\n      const value = scheme.flows[type]!;\n\n      res = await fetch(value.tokenUrl, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/x-www-form-urlencoded',\n        },\n        body: new URLSearchParams({\n          grant_type: 'password',\n          username: values.username,\n          password: values.password,\n          scope: scopes.join('+'),\n        }),\n      });\n    }\n\n    if (type === 'clientCredentials') {\n      const value = scheme.flows[type]!;\n\n      res = await fetch(value.tokenUrl, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/x-www-form-urlencoded',\n        },\n        body: new URLSearchParams({\n          grant_type: 'client_credentials',\n          client_id: values.clientId,\n          client_secret: values.clientSecret,\n          scope: scopes.join('+'),\n        }),\n      });\n    }\n\n    if (res) {\n      if (!res.ok) throw new Error(await res.text());\n\n      const { access_token, token_type = 'Bearer' } = (await res.json()) as {\n        access_token: string;\n        token_type?: string;\n      };\n\n      setToken(`${token_type} ${access_token}`);\n      setOpen(false);\n    }\n  });\n\n  const onSubmit = form.handleSubmit((values) => {\n    return authorize.start(values);\n  });\n\n  const isLoading = authorize.isLoading || authCodeCallback.isLoading;\n  const error = authCodeCallback.error ?? authorize.error;\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      {children}\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Authorization</DialogTitle>\n          <DialogDescription>Obtain the access token for API.</DialogDescription>\n        </DialogHeader>\n        <form\n          className=\"flex flex-col gap-6\"\n          onSubmit={(e) => {\n            void onSubmit(e);\n            e.stopPropagation();\n          }}\n        >\n          <Select value={type} onValueChange={setType as (s: string) => void}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {Object.keys(scheme.flows).map((key) => {\n                const { name, description } = FlowTypes[key as FlowType];\n\n                return (\n                  <SelectItem key={key} value={key}>\n                    <p className=\"font-medium\">{name}</p>\n                    <p className=\"text-fd-muted-foreground\">{description}</p>\n                  </SelectItem>\n                );\n              })}\n            </SelectContent>\n          </Select>\n\n          {(type === 'authorizationCode' ||\n            type === 'clientCredentials' ||\n            type === 'implicit') && (\n            <fieldset className=\"flex flex-col gap-1.5\">\n              <label htmlFor=\"client_id\" className={cn(labelVariants())}>\n                Client ID\n              </label>\n              <p className=\"text-fd-muted-foreground text-sm\">\n                The client ID of your OAuth application.\n              </p>\n              <Input\n                id=\"client_id\"\n                placeholder=\"Enter value\"\n                type=\"text\"\n                autoComplete=\"off\"\n                disabled={isLoading}\n                {...form.register('clientId', { required: true })}\n              />\n            </fieldset>\n          )}\n          {(type === 'authorizationCode' || type === 'clientCredentials') && (\n            <fieldset className=\"flex flex-col gap-1.5\">\n              <label htmlFor=\"client_secret\" className={cn(labelVariants())}>\n                Client Secret\n              </label>\n              <p className=\"text-fd-muted-foreground text-sm\">\n                The client secret of your OAuth application.\n              </p>\n              <Input\n                id=\"client_secret\"\n                placeholder=\"Enter value\"\n                type=\"password\"\n                autoComplete=\"off\"\n                disabled={isLoading}\n                {...form.register('clientSecret', { required: true })}\n              />\n            </fieldset>\n          )}\n          {type === 'password' && (\n            <>\n              <fieldset className=\"flex flex-col gap-1.5\">\n                <label htmlFor=\"username\" className={cn(labelVariants())}>\n                  Username\n                </label>\n                <Input\n                  id=\"username\"\n                  placeholder=\"Enter value\"\n                  type=\"text\"\n                  disabled={isLoading}\n                  autoComplete=\"off\"\n                  {...form.register('username', { required: true })}\n                />\n              </fieldset>\n              <fieldset className=\"flex flex-col gap-1.5\">\n                <label htmlFor=\"password\" className={cn(labelVariants())}>\n                  Client Secret\n                </label>\n                <Input\n                  id=\"password\"\n                  placeholder=\"Enter value\"\n                  type=\"password\"\n                  autoComplete=\"off\"\n                  disabled={isLoading}\n                  {...form.register('password', { required: true })}\n                />\n              </fieldset>\n            </>\n          )}\n          {error ? <p className=\"text-red-400 font-medium text-sm\">{String(error)}</p> : null}\n          <button\n            type=\"submit\"\n            disabled={isLoading}\n            className={cn(\n              buttonVariants({\n                color: 'primary',\n              }),\n            )}\n          >\n            {authCodeCallback.isLoading ? 'Fetching token...' : 'Submit'}\n          </button>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const OauthDialogTrigger = DialogTrigger;\n"],"mappings":"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"}