| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import React from "react"; |
| 3 |
|
| 4 |
/** |
| 5 |
* Design-accurate, inert mock of Pro's API Docs screen (react-src/admin/api-docs/ |
| 6 |
* components/ApiTable.js over there). It exists only to sit blurred behind the |
| 7 |
* lock panel, so nothing here fetches or reacts — it is a picture of the real |
| 8 |
* table, built from the same `bd-dc-*` table shell Free already ships for Doc |
| 9 |
* Categories, plus the API-specific column classes in api-docs-teaser.scss. |
| 10 |
*/ |
| 11 |
|
| 12 |
const ViewIcon = () => ( |
| 13 |
<svg width="13" height="13" viewBox="0 0 15 14" fill="none" aria-hidden="true"> |
| 14 |
<path d="M11.5 7.66667V11.6667C11.5 12.0203 11.3595 12.3594 11.1095 12.6095C10.8594 12.8595 10.5203 13 10.1667 13H2.83333C2.47971 13 2.14057 12.8595 1.89052 12.6095C1.64048 12.3594 1.5 12.0203 1.5 11.6667V4.33333C1.5 3.97971 1.64048 3.64057 1.89052 3.39052C2.14057 3.14048 2.47971 3 2.83333 3H6.83333M9.5 1H13.5M13.5 1V5M13.5 1L6.16667 8.33333" stroke="currentColor" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" /> |
| 15 |
</svg> |
| 16 |
); |
| 17 |
|
| 18 |
const EditIcon = () => ( |
| 19 |
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true"> |
| 20 |
<path d="M8.5 1.5L11.5 4.5L4 12H1V9L8.5 1.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" /> |
| 21 |
</svg> |
| 22 |
); |
| 23 |
|
| 24 |
const TrashIcon = () => ( |
| 25 |
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true"> |
| 26 |
<path d="M1.5 3H11.5M4.5 3V2A.5.5 0 015 1.5H8A.5.5 0 018.5 2V3M5 5.5V9.5M8 5.5V9.5M2.5 3L3 11A.5.5 0 003.5 11.5H9.5A.5.5 0 0010 11L10.5 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" /> |
| 27 |
</svg> |
| 28 |
); |
| 29 |
|
| 30 |
const REFERENCES = [ |
| 31 |
{ title: "Payments API", source: __( "URL sync", "betterdocs" ), endpoints: 42, published: true }, |
| 32 |
{ title: "Petstore (OpenAPI 3.1)", source: __( "Upload", "betterdocs" ), endpoints: 19, published: true }, |
| 33 |
{ title: "Webhooks Reference", source: __( "URL sync", "betterdocs" ), endpoints: 8, published: true }, |
| 34 |
{ title: "Internal Admin API", source: __( "Upload", "betterdocs" ), endpoints: 27, published: false, postman: true } |
| 35 |
]; |
| 36 |
|
| 37 |
const METHODS = [ |
| 38 |
{ verb: "GET", path: "/v1/customers/{id}" }, |
| 39 |
{ verb: "POST", path: "/v1/customers" }, |
| 40 |
{ verb: "PATCH", path: "/v1/customers/{id}" }, |
| 41 |
{ verb: "DELETE", path: "/v1/customers/{id}" } |
| 42 |
]; |
| 43 |
|
| 44 |
export default function ApiDocsMock() { |
| 45 |
return ( |
| 46 |
<div className="bd-apit-mock"> |
| 47 |
<div className="bd-dc-tree-card"> |
| 48 |
<div className="bd-dc-table-header bd-apit-thead"> |
| 49 |
<div className="bd-apit-c bd-apit-c-name">{ __( "Name", "betterdocs" ) }</div> |
| 50 |
<div className="bd-apit-c bd-apit-c-endpoints">{ __( "Endpoints", "betterdocs" ) }</div> |
| 51 |
<div className="bd-apit-c bd-apit-c-status">{ __( "Status", "betterdocs" ) }</div> |
| 52 |
<div className="bd-apit-c bd-apit-c-actions">{ __( "Actions", "betterdocs" ) }</div> |
| 53 |
</div> |
| 54 |
<div className="bd-dc-table-body"> |
| 55 |
{ REFERENCES.map( ( item, i ) => ( |
| 56 |
<div className="bd-dc-row bd-apit-row" key={ i }> |
| 57 |
<div className="bd-apit-c bd-apit-c-name"> |
| 58 |
<span className="bd-dc-name bd-apit-name">{ item.title }</span> |
| 59 |
<div className="bd-dc-meta-row"> |
| 60 |
<span className="bd-apit-source">{ item.source }</span> |
| 61 |
{ item.postman && <span className="bd-apit-chip bd-apit-chip--postman">{ __( "Postman", "betterdocs" ) }</span> } |
| 62 |
</div> |
| 63 |
</div> |
| 64 |
<div className="bd-apit-c bd-apit-c-endpoints"> |
| 65 |
<span className="bd-apit-count">{ item.endpoints }</span> |
| 66 |
</div> |
| 67 |
<div className="bd-apit-c bd-apit-c-status"> |
| 68 |
<span className={ `bd-apit-status bd-apit-status--${ item.published ? "publish" : "draft" }` }> |
| 69 |
{ item.published ? __( "Published", "betterdocs" ) : __( "Draft", "betterdocs" ) } |
| 70 |
</span> |
| 71 |
</div> |
| 72 |
<div className="bd-apit-c bd-apit-c-actions"> |
| 73 |
{ item.published && <span className="bd-dc-row-action bd-dc-row-action-icon"><ViewIcon /></span> } |
| 74 |
<span className="bd-dc-row-action bd-dc-row-action-icon"><EditIcon /></span> |
| 75 |
<span className="bd-dc-row-action bd-dc-row-action-icon bd-dc-row-action-delete"><TrashIcon /></span> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
) ) } |
| 79 |
</div> |
| 80 |
</div> |
| 81 |
|
| 82 |
{/* A slice of the rendered reference, so the lock panel's promise |
| 83 |
("endpoints become real docs") has a picture attached. */} |
| 84 |
<div className="bd-apit-preview"> |
| 85 |
<div className="bd-apit-preview-head"> |
| 86 |
<span className="bd-apit-preview-title">{ __( "Payments API", "betterdocs" ) }</span> |
| 87 |
<span className="bd-apit-chip">{ __( "OpenAPI 3.1", "betterdocs" ) }</span> |
| 88 |
</div> |
| 89 |
<div className="bd-apit-endpoints"> |
| 90 |
{ METHODS.map( ( m, i ) => ( |
| 91 |
<div className="bd-apit-endpoint" key={ i }> |
| 92 |
<span className={ `bd-apit-verb bd-apit-verb--${ m.verb.toLowerCase() }` }>{ m.verb }</span> |
| 93 |
<code className="bd-apit-path">{ m.path }</code> |
| 94 |
<span className="bd-apit-tryit">{ __( "Try it", "betterdocs" ) }</span> |
| 95 |
</div> |
| 96 |
) ) } |
| 97 |
</div> |
| 98 |
</div> |
| 99 |
</div> |
| 100 |
); |
| 101 |
} |
| 102 |
|
