@salesforcedevs/docs-components 1.29.0-alpha1 → 1.29.0

package/src/modules/doc/apiPlayground/apiPlayground.css

@@ -1,186 +0,0 @@
-:host {
-    display: block;
-}
-
-.playground-container {
-    border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
-    border-radius: 8px;
-    padding: 20px;
-    margin: 16px 0;
-    background: var(--dx-g-color-surface-primary, #ffffff);
-}
-
-.playground-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-}
-
-.method-badge {
-    display: inline-block;
-    padding: 4px 10px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: #fff;
-    letter-spacing: 0.5px;
-}
-
-.method-get {
-    background-color: #61affe;
-}
-
-.method-post {
-    background-color: #49cc90;
-}
-
-.method-put {
-    background-color: #fca130;
-}
-
-.method-delete {
-    background-color: #f93e3e;
-}
-
-.method-patch {
-    background-color: #50e3c2;
-}
-
-.method-options,
-.method-head {
-    background-color: #9012fe;
-}
-
-.operation-path {
-    font-family: var(--dx-g-font-family-mono, monospace);
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--dx-g-color-text-primary, #181818);
-}
-
-.params-section {
-    margin-bottom: 16px;
-}
-
-.section-title {
-    font-size: 13px;
-    font-weight: 600;
-    margin: 0 0 8px 0;
-    color: var(--dx-g-color-text-secondary, #444);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.field-group {
-    margin-bottom: 12px;
-}
-
-.field-label {
-    display: block;
-    font-size: 13px;
-    font-weight: 500;
-    margin-bottom: 4px;
-    color: var(--dx-g-color-text-primary, #181818);
-}
-
-.required-marker {
-    color: #f93e3e;
-    margin-left: 2px;
-}
-
-.field-input,
-.server-select {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
-    border-radius: 4px;
-    font-size: 14px;
-    font-family: var(--dx-g-font-family-mono, monospace);
-    background: var(--dx-g-color-surface-primary, #ffffff);
-    color: var(--dx-g-color-text-primary, #181818);
-    box-sizing: border-box;
-}
-
-.field-input:focus,
-.server-select:focus {
-    outline: none;
-    border-color: var(--dx-g-color-brand, #0070d2);
-    box-shadow: 0 0 0 1px var(--dx-g-color-brand, #0070d2);
-}
-
-.body-textarea {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid var(--dx-g-color-border-primary, #e0e0e0);
-    border-radius: 4px;
-    font-size: 13px;
-    font-family: var(--dx-g-font-family-mono, monospace);
-    background: var(--dx-g-color-surface-primary, #ffffff);
-    color: var(--dx-g-color-text-primary, #181818);
-    resize: vertical;
-    box-sizing: border-box;
-}
-
-.body-textarea:focus {
-    outline: none;
-    border-color: var(--dx-g-color-brand, #0070d2);
-    box-shadow: 0 0 0 1px var(--dx-g-color-brand, #0070d2);
-}
-
-.actions {
-    margin: 16px 0;
-}
-
-.error-display {
-    margin-top: 16px;
-    padding: 12px;
-    border-radius: 4px;
-    background-color: #fef0ef;
-    border: 1px solid #f93e3e;
-}
-
-.error-message {
-    color: #c23934;
-    font-size: 13px;
-    margin: 0;
-}
-
-.response-section {
-    margin-top: 16px;
-}
-
-.response-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 8px;
-}
-
-.status-code {
-    font-weight: 700;
-    font-size: 14px;
-    padding: 2px 8px;
-    border-radius: 4px;
-}
-
-.status-success {
-    color: #256029;
-    background-color: #e6f9ec;
-}
-
-.status-client-error {
-    color: #974b00;
-    background-color: #fff3e0;
-}
-
-.status-server-error {
-    color: #c23934;
-    background-color: #fef0ef;
-}
-
-.response-duration {
-    font-size: 12px;
-    color: var(--dx-g-color-text-tertiary, #999);
-}

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);
-}