@salesforcedevs/docs-components 1.29.0-alpha1 → 1.29.0-llm-alpha

package/src/modules/doc/apiPlayground/apiPlayground.html

@@ -1,136 +0,0 @@
-<template>
-    <div class="playground-container">
-        <div class="playground-header">
-            <span class={methodBadgeClass}>{operation.method}</span>
-            <span class="operation-path">{operation.path}</span>
-        </div>
-
-        <template lwc:if={showServerSelector}>
-            <div class="field-group">
-                <label class="field-label" for="server-select">Server</label>
-                <select id="server-select" class="server-select" aria-label="Server" onchange={handleServerChange}>
-                    <template for:each={serverOptions} for:item="server">
-                        <option key={server.value} value={server.value}>
-                            {server.label}
-                        </option>
-                    </template>
-                </select>
-            </div>
-        </template>
-
-        <template lwc:if={hasPathParams}>
-            <div class="params-section">
-                <h4 class="section-title">Path Parameters</h4>
-                <template for:each={pathParams} for:item="param">
-                    <div class="field-group" key={param.name}>
-                        <label class="field-label">
-                            {param.name}
-                            <template lwc:if={param.required}>
-                                <span class="required-marker">*</span>
-                            </template>
-                        </label>
-                        <input
-                            type="text"
-                            class="field-input"
-                            data-param={param.name}
-                            value={param.value}
-                            placeholder={param.description}
-                            onchange={handleParamChange}
-                        />
-                    </div>
-                </template>
-            </div>
-        </template>
-
-        <template lwc:if={hasQueryParams}>
-            <div class="params-section">
-                <h4 class="section-title">Query Parameters</h4>
-                <template for:each={queryParams} for:item="param">
-                    <div class="field-group" key={param.name}>
-                        <label class="field-label">
-                            {param.name}
-                            <template lwc:if={param.required}>
-                                <span class="required-marker">*</span>
-                            </template>
-                        </label>
-                        <input
-                            type="text"
-                            class="field-input"
-                            data-param={param.name}
-                            value={param.value}
-                            placeholder={param.description}
-                            onchange={handleParamChange}
-                        />
-                    </div>
-                </template>
-            </div>
-        </template>
-
-        <template lwc:if={hasHeaderParams}>
-            <div class="params-section">
-                <h4 class="section-title">Headers</h4>
-                <template for:each={headerParams} for:item="param">
-                    <div class="field-group" key={param.name}>
-                        <label class="field-label">
-                            {param.name}
-                            <template lwc:if={param.required}>
-                                <span class="required-marker">*</span>
-                            </template>
-                        </label>
-                        <input
-                            type="text"
-                            class="field-input"
-                            data-param={param.name}
-                            value={param.value}
-                            placeholder={param.description}
-                            onchange={handleParamChange}
-                        />
-                    </div>
-                </template>
-            </div>
-        </template>
-
-        <template lwc:if={hasRequestBody}>
-            <div class="params-section">
-                <h4 class="section-title">Request Body</h4>
-                <textarea
-                    class="body-textarea"
-                    value={requestBody}
-                    onchange={handleBodyChange}
-                    rows="8"
-                ></textarea>
-            </div>
-        </template>
-
-        <div class="actions">
-            <dx-button
-                variant="brand"
-                onclick={handleSendRequest}
-                disabled={loading}
-            >
-                <template lwc:if={loading}>Sending...</template>
-                <template lwc:else>Send Request</template>
-            </dx-button>
-        </div>
-
-        <template lwc:if={hasError}>
-            <div class="error-display">
-                <p class="error-message">{error}</p>
-            </div>
-        </template>
-
-        <template lwc:if={hasResponse}>
-            <div class="response-section">
-                <div class="response-header">
-                    <span class={responseStatusClass}>
-                        {response.status} {response.statusText}
-                    </span>
-                    <span class="response-duration">{response.duration}ms</span>
-                </div>
-                <dx-code-block
-                    language={responseLanguage}
-                >{formattedResponseBody}</dx-code-block>
-            </div>
-        </template>
-    </div>
-</template>

package/src/modules/doc/apiPlayground/apiPlayground.ts

@@ -1,240 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import type {
-    OperationDefinition,
-    ParameterDefinition
-} from "docUtils/openApiParser";
-import {
-    generateSampleFromSchema,
-    resolveRef
-} from "docUtils/openApiParser";
-import {
-    buildRequestUrl,
-    executeRequest
-} from "docUtils/apiRequestExecutor";
-import type { ApiResponse } from "docUtils/apiRequestExecutor";
-
-type ParamState = {
-    name: string;
-    in: string;
-    value: string;
-    required: boolean;
-    description: string;
-};
-
-export default class ApiPlayground extends LightningElement {
-    @api operation!: OperationDefinition;
-    @api spec: any;
-
-    @track paramStates: ParamState[] = [];
-    @track requestBody = "";
-    @track selectedServer = "";
-    @track response: ApiResponse | null = null;
-    @track error: string | null = null;
-    @track loading = false;
-
-    private initialized = false;
-
-    renderedCallback(): void {
-        if (!this.initialized && this.operation) {
-            this.initialized = true;
-            this.initializeState();
-        }
-    }
-
-    private initializeState(): void {
-        this.paramStates = (this.operation.parameters ?? []).map(
-            (param: ParameterDefinition) => ({
-                name: param.name,
-                in: param.in,
-                value: param.example !== undefined ? String(param.example) : "",
-                required: param.required,
-                description: param.description
-            })
-        );
-
-        if (this.operation.requestBody) {
-            const content = this.operation.requestBody.content;
-            const jsonContent = content?.["application/json"];
-            if (jsonContent?.schema) {
-                const sample = generateSampleFromSchema(
-                    jsonContent.schema,
-                    this.spec
-                );
-                if (sample !== undefined) {
-                    this.requestBody = JSON.stringify(sample, null, 2);
-                }
-            }
-        }
-
-        if (this.servers.length > 0) {
-            this.selectedServer = this.servers[0].url;
-        }
-    }
-
-    get servers(): Array<{ url: string; description: string }> {
-        return (this.spec?.servers ?? []).map((s: any) => ({
-            url: s.url ?? "",
-            description: s.description ?? s.url ?? ""
-        }));
-    }
-
-    get showServerSelector(): boolean {
-        return this.servers.length > 1;
-    }
-
-    get serverOptions(): Array<{ label: string; value: string }> {
-        return this.servers.map((s) => ({
-            label: s.description || s.url,
-            value: s.url
-        }));
-    }
-
-    get pathParams(): ParamState[] {
-        return this.paramStates.filter((p) => p.in === "path");
-    }
-
-    get queryParams(): ParamState[] {
-        return this.paramStates.filter((p) => p.in === "query");
-    }
-
-    get headerParams(): ParamState[] {
-        return this.paramStates.filter((p) => p.in === "header");
-    }
-
-    get hasPathParams(): boolean {
-        return this.pathParams.length > 0;
-    }
-
-    get hasQueryParams(): boolean {
-        return this.queryParams.length > 0;
-    }
-
-    get hasHeaderParams(): boolean {
-        return this.headerParams.length > 0;
-    }
-
-    get hasRequestBody(): boolean {
-        return this.operation?.requestBody !== null && this.operation?.requestBody !== undefined;
-    }
-
-    get methodBadgeClass(): string {
-        const method = this.operation?.method?.toLowerCase() ?? "get";
-        return `method-badge method-${method}`;
-    }
-
-    get responseStatusClass(): string {
-        if (!this.response) {
-            return "status-code";
-        }
-        const status = this.response.status;
-        if (status >= 200 && status < 300) {
-            return "status-code status-success";
-        }
-        if (status >= 400 && status < 500) {
-            return "status-code status-client-error";
-        }
-        if (status >= 500) {
-            return "status-code status-server-error";
-        }
-        return "status-code";
-    }
-
-    get hasResponse(): boolean {
-        return this.response !== null;
-    }
-
-    get hasError(): boolean {
-        return this.error !== null;
-    }
-
-    get formattedResponseBody(): string {
-        if (!this.response?.body) {
-            return "";
-        }
-        try {
-            return JSON.stringify(JSON.parse(this.response.body), null, 2);
-        } catch {
-            return this.response.body;
-        }
-    }
-
-    get responseLanguage(): string {
-        if (!this.response?.body) {
-            return "text";
-        }
-        try {
-            JSON.parse(this.response.body);
-            return "json";
-        } catch {
-            return "text";
-        }
-    }
-
-    handleParamChange(event: Event): void {
-        const target = event.target as HTMLInputElement;
-        const paramName = target.dataset.param;
-        this.paramStates = this.paramStates.map((p) =>
-            p.name === paramName ? { ...p, value: target.value } : p
-        );
-    }
-
-    handleBodyChange(event: Event): void {
-        const target = event.target as HTMLTextAreaElement;
-        this.requestBody = target.value;
-    }
-
-    handleServerChange(event: Event): void {
-        const target = event.target as HTMLSelectElement;
-        this.selectedServer = target.value;
-    }
-
-    async handleSendRequest(): Promise<void> {
-        this.loading = true;
-        this.response = null;
-        this.error = null;
-
-        try {
-            const pathParams: Record<string, string> = {};
-            const queryParams: Record<string, string> = {};
-            const headers: Record<string, string> = {};
-
-            for (const param of this.paramStates) {
-                if (param.in === "path") {
-                    pathParams[param.name] = param.value;
-                } else if (param.in === "query") {
-                    queryParams[param.name] = param.value;
-                } else if (param.in === "header") {
-                    headers[param.name] = param.value;
-                }
-            }
-
-            const serverUrl =
-                this.selectedServer || this.servers[0]?.url || "";
-            const url = buildRequestUrl(
-                serverUrl,
-                this.operation.path,
-                pathParams,
-                queryParams
-            );
-
-            if (this.hasRequestBody && this.requestBody) {
-                headers["Content-Type"] =
-                    headers["Content-Type"] || "application/json";
-            }
-
-            this.response = await executeRequest({
-                url,
-                method: this.operation.method,
-                headers,
-                body: this.hasRequestBody ? this.requestBody : undefined
-            });
-        } catch (err: any) {
-            this.error =
-                err?.message?.includes("fetch")
-                    ? "Network error: The request failed. This may be due to CORS restrictions or a network issue."
-                    : err?.message || "An unexpected error occurred.";
-        } finally {
-            this.loading = false;
-        }
-    }
-}

package/src/modules/docUtils/apiRequestExecutor/apiRequestExecutor.ts

@@ -1,96 +0,0 @@
-export type ApiRequest = {
-    url: string;
-    method: string;
-    headers: Record<string, string>;
-    body?: string;
-};
-
-export type ApiResponse = {
-    status: number;
-    statusText: string;
-    headers: Record<string, string>;
-    body: string;
-    duration: number;
-};
-
-export type RequestExecutor = (request: ApiRequest) => Promise<ApiResponse>;
-
-export function buildRequestUrl(
-    serverUrl: string,
-    pathTemplate: string,
-    pathParams: Record<string, string>,
-    queryParams: Record<string, string>
-): string {
-    let url = pathTemplate;
-    for (const [key, value] of Object.entries(pathParams)) {
-        url = url.replace(`{${key}}`, encodeURIComponent(value));
-    }
-
-    const fullUrl = `${serverUrl.replace(/\/$/, "")}${url}`;
-
-    const queryEntries = Object.entries(queryParams).filter(
-        ([, v]) => v !== ""
-    );
-    if (queryEntries.length === 0) {
-        return fullUrl;
-    }
-
-    const searchParams = new URLSearchParams();
-    for (const [key, value] of queryEntries) {
-        searchParams.append(key, value);
-    }
-    return `${fullUrl}?${searchParams.toString()}`;
-}
-
-export const directFetchExecutor: RequestExecutor = async (
-    request: ApiRequest
-): Promise<ApiResponse> => {
-    const start = performance.now();
-
-    const fetchOptions: RequestInit = {
-        method: request.method,
-        headers: request.headers,
-        mode: "cors"
-    };
-
-    if (
-        request.body &&
-        request.method !== "GET" &&
-        request.method !== "HEAD"
-    ) {
-        fetchOptions.body = request.body;
-    }
-
-    const response = await fetch(request.url, fetchOptions);
-    const duration = Math.round(performance.now() - start);
-
-    const responseHeaders: Record<string, string> = {};
-    response.headers.forEach((value, key) => {
-        responseHeaders[key] = value;
-    });
-
-    let body: string;
-    try {
-        body = await response.text();
-    } catch {
-        body = "";
-    }
-
-    return {
-        status: response.status,
-        statusText: response.statusText,
-        headers: responseHeaders,
-        body,
-        duration
-    };
-};
-
-let currentExecutor: RequestExecutor = directFetchExecutor;
-
-export function setRequestExecutor(executor: RequestExecutor): void {
-    currentExecutor = executor;
-}
-
-export function executeRequest(request: ApiRequest): Promise<ApiResponse> {
-    return currentExecutor(request);
-}

package/src/modules/docUtils/openApiParser/openApiParser.ts

@@ -1,187 +0,0 @@
-export type ParameterDefinition = {
-    name: string;
-    in: "path" | "query" | "header" | "cookie";
-    required: boolean;
-    description: string;
-    schema: any;
-    example?: any;
-};
-
-export type RequestBodyDefinition = {
-    description: string;
-    required: boolean;
-    content: Record<string, { schema: any }>;
-};
-
-export type OperationDefinition = {
-    operationId: string;
-    method: string;
-    path: string;
-    summary: string;
-    description: string;
-    parameters: ParameterDefinition[];
-    requestBody: RequestBodyDefinition | null;
-    responses: Record<string, any>;
-    tags: string[];
-};
-
-export function resolveRef(ref: string, spec: any): any {
-    if (!ref || !ref.startsWith("#/")) {
-        return ref;
-    }
-    const parts = ref.replace("#/", "").split("/");
-    let current = spec;
-    for (const part of parts) {
-        current = current?.[part];
-        if (current === undefined) {
-            return undefined;
-        }
-    }
-    return current;
-}
-
-export function generateSampleFromSchema(schema: any, spec: any): any {
-    if (!schema) {
-        return undefined;
-    }
-
-    if (schema.$ref) {
-        return generateSampleFromSchema(resolveRef(schema.$ref, spec), spec);
-    }
-
-    if (schema.example !== undefined) {
-        return schema.example;
-    }
-
-    if (schema.default !== undefined) {
-        return schema.default;
-    }
-
-    if (schema.enum && schema.enum.length > 0) {
-        return schema.enum[0];
-    }
-
-    switch (schema.type) {
-        case "string":
-            return schema.format === "date"
-                ? "2024-01-01"
-                : schema.format === "date-time"
-                  ? "2024-01-01T00:00:00Z"
-                  : schema.format === "email"
-                    ? "user@example.com"
-                    : schema.format === "uri"
-                      ? "https://example.com"
-                      : "string";
-        case "integer":
-            return schema.minimum ?? 0;
-        case "number":
-            return schema.minimum ?? 0.0;
-        case "boolean":
-            return false;
-        case "array":
-            if (schema.items) {
-                return [generateSampleFromSchema(schema.items, spec)];
-            }
-            return [];
-        case "object": {
-            const result: Record<string, any> = {};
-            if (schema.properties) {
-                for (const [key, propSchema] of Object.entries(
-                    schema.properties
-                )) {
-                    result[key] = generateSampleFromSchema(
-                        propSchema as any,
-                        spec
-                    );
-                }
-            }
-            return result;
-        }
-        default:
-            return null;
-    }
-}
-
-function resolveParameter(param: any, spec: any): ParameterDefinition {
-    const resolved = param.$ref ? resolveRef(param.$ref, spec) : param;
-    return {
-        name: resolved.name ?? "",
-        in: resolved.in ?? "query",
-        required: resolved.required ?? false,
-        description: resolved.description ?? "",
-        schema: resolved.schema ?? {},
-        example: resolved.example
-    };
-}
-
-export function parseOpenApiSpec(spec: any): OperationDefinition[] {
-    if (!spec?.paths) {
-        return [];
-    }
-
-    const operations: OperationDefinition[] = [];
-    const httpMethods = [
-        "get",
-        "post",
-        "put",
-        "delete",
-        "patch",
-        "options",
-        "head"
-    ];
-
-    for (const [path, pathItem] of Object.entries(spec.paths)) {
-        const pathObj = pathItem as any;
-        const pathLevelParams: any[] = pathObj.parameters ?? [];
-
-        for (const method of httpMethods) {
-            const operation = pathObj[method];
-            if (!operation) {
-                continue;
-            }
-
-            const operationParams = (operation.parameters ?? []).map(
-                (p: any) => resolveParameter(p, spec)
-            );
-            const pathParams = pathLevelParams
-                .map((p: any) => resolveParameter(p, spec))
-                .filter(
-                    (pp) =>
-                        !operationParams.some(
-                            (op: ParameterDefinition) => op.name === pp.name
-                        )
-                );
-
-            const mergedParams = [...pathParams, ...operationParams];
-
-            let requestBody: RequestBodyDefinition | null = null;
-            if (operation.requestBody) {
-                const rb = operation.requestBody.$ref
-                    ? resolveRef(operation.requestBody.$ref, spec)
-                    : operation.requestBody;
-                if (rb) {
-                    requestBody = {
-                        description: rb.description ?? "",
-                        required: rb.required ?? false,
-                        content: rb.content ?? {}
-                    };
-                }
-            }
-
-            operations.push({
-                operationId:
-                    operation.operationId ?? `${method}_${path.replace(/\//g, "_")}`,
-                method: method.toUpperCase(),
-                path,
-                summary: operation.summary ?? "",
-                description: operation.description ?? "",
-                parameters: mergedParams,
-                requestBody,
-                responses: operation.responses ?? {},
-                tags: operation.tags ?? []
-            });
-        }
-    }
-
-    return operations;
-}