Spaces:

enzostvs
/

hub-api-playground

Running on CPU Upgrade

App Files Files Community

enzostvs HF staff commited on Nov 2, 2023

Commit

ff1a29c

•

1 Parent(s): 53e1fd3

add snippet + rework UI/UX

Browse files

Files changed (11) hide show

components/editor/main/endpoint.tsx +9 -4
components/editor/main/index.tsx +2 -1
components/editor/main/parameter.tsx +10 -5
components/editor/main/request.tsx +102 -80
components/editor/main/snippet/curl.tsx +1 -0
components/editor/main/snippet/index.tsx +125 -0
components/editor/main/tabs.tsx +66 -0
components/input/input.tsx +16 -6
components/input/toggle.tsx +22 -5
utils/datas/api_collections.ts +6 -0
utils/type.ts +2 -1

components/editor/main/endpoint.tsx CHANGED Viewed

@@ -28,17 +28,22 @@ export const Endpoint = ({
   };
   return (
-    <div className="bg-slate-900 w-full">
-      <div className="bg-slate-950/50 p-3 rounded-lg flex items-center justify-between">
         <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
           <Method method={method} />
-          <div className="flex items-center justify-start gap-1">
             {path_formatted.map((p, i) => {
               return p.editable ? (
                 <Parameter
                   key={i}
                   value={p.content}
-                  onChange={(value) => handleChange(value, p.key)}
                 />
               ) : (
                 <p key={i} className="text-slate-300">

   };
   return (
+    <div className="bg-slate-950/40 w-full px-4 xl:px-6 pt-5">
+      <div className="bg-slate-950 p-3 rounded-lg flex items-center justify-between">
         <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
           <Method method={method} />
+          <div className="flex items-center justify-start gap-1 flex-wrap">
             {path_formatted.map((p, i) => {
               return p.editable ? (
                 <Parameter
                   key={i}
                   value={p.content}
+                  onChange={(value, currentValue) =>
+                    handleChange(
+                      value,
+                      currentValue === p.key ? p.key : currentValue
+                    )
+                  }
                 />
               ) : (
                 <p key={i} className="text-slate-300">

components/editor/main/index.tsx CHANGED Viewed

@@ -47,7 +47,6 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
       <div className="h-full grid grid-cols-1 xl:grid-cols-3">
         <Request
           parameters={formattedParameters}
-          body={endpoint?.body}
           formattedBody={formattedBody}
           onParamsChange={(k: string, v: string | boolean) => {
             setFormattedParameters({
@@ -55,6 +54,8 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
               [k]: v,
             });
           }}
           onBodyChange={(b: Options) => setFormattedBody(b)}
         >
           <Endpoint

       <div className="h-full grid grid-cols-1 xl:grid-cols-3">
         <Request
           parameters={formattedParameters}
           formattedBody={formattedBody}
           onParamsChange={(k: string, v: string | boolean) => {
             setFormattedParameters({
               [k]: v,
             });
           }}
+          endpoint={endpoint}
+          formattedEndpoint={formattedEndpoint}
           onBodyChange={(b: Options) => setFormattedBody(b)}
         >
           <Endpoint

components/editor/main/parameter.tsx CHANGED Viewed

@@ -1,19 +1,24 @@
-import { useMemo, useState } from "react";
-import classNames from "classnames";
-import { on } from "events";
 interface Props {
   value: string;
-  onChange: (value: string) => void;
 }
 export const Parameter: React.FC<Props> = ({ value, onChange }) => {
   const [state, setState] = useState(value);
   return (
     <input
       type="text"
       className="bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80 max-w-[80px] text-center truncate"
-      onBlur={() => onChange(state)}
       value={state}
       onChange={(e) => setState(e.target.value)}
     />

+import { useState } from "react";
+import { useUpdateEffect } from "react-use";
 interface Props {
   value: string;
+  onChange: (value: string, currentValue: string) => void;
 }
 export const Parameter: React.FC<Props> = ({ value, onChange }) => {
   const [state, setState] = useState(value);
+  const [previousValue, setPreviousValue] = useState<string | undefined>(
+    undefined
+  );
   return (
     <input
       type="text"
       className="bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80 max-w-[80px] text-center truncate"
+      onBlur={() => {
+        onChange(state, previousValue ?? `{${value}}`);
+        setPreviousValue(state as string);
+      }}
       value={state}
       onChange={(e) => setState(e.target.value)}
     />

components/editor/main/request.tsx CHANGED Viewed

@@ -5,24 +5,32 @@ import { Options } from "redaxios";
 import { Toggle } from "@/components/input/toggle";
 import { TextInput } from "@/components/input/input";
 import { usePersistentState } from "@/utils/usePersistentState";
-import { Body } from "@/utils/type";
 import { useUpdateEffect } from "react-use";
 export const Request = ({
   parameters,
-  body,
   formattedBody,
   onBodyChange,
   children,
   onParamsChange,
 }: {
-  parameters: any;
   children: React.ReactElement;
-  body: Array<Body> | undefined;
   formattedBody: Options | undefined;
   onBodyChange: (o: Options) => void;
   onParamsChange: (key: string, value: string | boolean) => void;
 }) => {
   const [headers, setHeaders] = usePersistentState("headers", {
     Authorization: "",
   });
@@ -32,89 +40,103 @@ export const Request = ({
   useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
   return (
-    <div className="h-full bg-slate-900 px-4 xl:px-6 py-5 overflow-auto">
       {children}
-      {parameters && (
-        <div className="mt-6 grid grid-cols-2 gap-6 w-full">
-          <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
-            Optional parameters
-          </p>
-          {parameters &&
-            Object.entries(parameters).map(([key, value]) => (
-              <div
-                key={key}
-                className="flex items-center justify-between gap-2"
-              >
-                {typeof value === "boolean" ? (
-                  <div>
-                    <Toggle
-                      checked={value}
                       label={key}
                       onChange={(e) => onParamsChange(key, e)}
                     />
-                  </div>
-                ) : (
-                  <TextInput
-                    value={value as string}
-                    label={key}
-                    placeholder="value"
-                    onChange={(e) => onParamsChange(key, e)}
-                  />
-                )}
-              </div>
-            ))}
-        </div>
-      )}
-      {body?.length && (
-        <div className="mt-6 grid grid-cols-2 gap-6 w-full">
-          <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
-            Body
-          </p>
-          {body?.length &&
-            body.map((b, key) => (
-              <div
-                key={key}
-                className="flex items-center justify-between gap-2"
-              >
-                {typeof b.defaultValue === "boolean" ? (
-                  <div>
-                    <Toggle
-                      checked={b.defaultValue}
                       label={b.key}
-                      // subLabel={b.label}
                       onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
                     />
-                  </div>
-                ) : (
-                  <TextInput
-                    value={
-                      (formattedBody?.[
-                        b.key as keyof typeof formattedBody
-                      ] as string) ?? (b.defaultValue as string)
-                    }
-                    label={b.key}
-                    subLabel={b.label}
-                    placeholder="value"
-                    onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
-                  />
-                )}
-              </div>
-            ))}
-        </div>
-      )}
-      <div className="mt-8 grid grid-cols-1 gap-6 w-full">
-        <p className="text-slate-200 uppercase text-xs font-semibold">
-          Headers
-        </p>
-        <TextInput
-          value={headers?.Authorization}
-          label="Authorization"
-          placeholder="Authorization"
-          onlyAlphaNumeric={false}
-          onChange={(Authorization) =>
-            setHeaders({ ...headers, Authorization })
-          }
-        />
       </div>
     </div>
   );

 import { Toggle } from "@/components/input/toggle";
 import { TextInput } from "@/components/input/input";
 import { usePersistentState } from "@/utils/usePersistentState";
+import { ApiRoute, Body } from "@/utils/type";
 import { useUpdateEffect } from "react-use";
+import { Snippet } from "./snippet";
+import { Tabs } from "./tabs";
 export const Request = ({
   parameters,
   formattedBody,
+  formattedEndpoint,
   onBodyChange,
+  endpoint,
   children,
   onParamsChange,
 }: {
+  parameters: Record<string, any>;
   children: React.ReactElement;
   formattedBody: Options | undefined;
+  endpoint: ApiRoute;
+  formattedEndpoint: string;
   onBodyChange: (o: Options) => void;
   onParamsChange: (key: string, value: string | boolean) => void;
 }) => {
+  const [tab, setTab] = useState<"headers" | "parameters" | "body" | "snippet">(
+    endpoint?.parameters ? "parameters" : endpoint?.body ? "body" : "headers"
+  );
   const [headers, setHeaders] = usePersistentState("headers", {
     Authorization: "",
   });
   useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
   return (
+    <div className="h-full bg-slate-900 pb-5 overflow-auto">
       {children}
+      <Tabs active={tab} setActive={setTab} endpoint={endpoint} />
+      <div className="px-4 xl:px-6">
+        {tab === "parameters" && parameters && (
+          <div className="mt-6 grid grid-cols-2 gap-6 w-full">
+            <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
+              Optional parameters
+            </p>
+            {parameters &&
+              Object.entries(parameters).map(([key, value]) => (
+                <div
+                  key={key}
+                  className="flex items-center justify-between gap-2"
+                >
+                  {typeof value === "boolean" ? (
+                    <div>
+                      <Toggle
+                        checked={value}
+                        label={key}
+                        tooltip={endpoint?.tooltips?.[key]}
+                        onChange={(e) => onParamsChange(key, e)}
+                      />
+                    </div>
+                  ) : (
+                    <TextInput
+                      value={value as string}
                       label={key}
+                      tooltip={endpoint?.tooltips?.[key]}
+                      placeholder="value"
                       onChange={(e) => onParamsChange(key, e)}
                     />
+                  )}
+                </div>
+              ))}
+          </div>
+        )}
+        {tab === "body" && endpoint?.body?.length && (
+          <div className="mt-6 grid grid-cols-2 gap-6 w-full">
+            <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
+              Body
+            </p>
+            {endpoint?.body?.length &&
+              endpoint?.body.map((b, key) => (
+                <div
+                  key={key}
+                  className="flex items-center justify-between gap-2"
+                >
+                  {typeof b.defaultValue === "boolean" ? (
+                    <div>
+                      <Toggle
+                        checked={b.defaultValue}
+                        label={b.key}
+                        onChange={(e) =>
+                          setBodyForm({ ...bodyForm, [b.key]: e })
+                        }
+                      />
+                    </div>
+                  ) : (
+                    <TextInput
+                      value={
+                        (formattedBody?.[
+                          b.key as keyof typeof formattedBody
+                        ] as string) ?? (b.defaultValue as string)
+                      }
                       label={b.key}
+                      placeholder="value"
                       onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
                     />
+                  )}
+                </div>
+              ))}
+          </div>
+        )}
+        {tab === "headers" && (
+          <div className="mt-8 grid grid-cols-1 gap-6 w-full">
+            <p className="text-slate-200 uppercase text-xs font-semibold">
+              Headers
+            </p>
+            <TextInput
+              value={headers?.Authorization}
+              label="Authorization"
+              placeholder="Authorization"
+              onlyAlphaNumeric={false}
+              onChange={(Authorization) =>
+                setHeaders({ ...headers, Authorization })
+              }
+            />
+          </div>
+        )}
+        {tab === "snippet" && (
+          <Snippet
+            endpoint={{ ...endpoint, path: formattedEndpoint }}
+            parameters={parameters}
+            body={formattedBody}
+          />
+        )}
       </div>
     </div>
   );

components/editor/main/snippet/curl.tsx ADDED Viewed

	@@ -0,0 +1 @@


1	+ export const Curl = {};

components/editor/main/snippet/index.tsx ADDED Viewed

	@@ -0,0 +1,125 @@

+import { ApiRoute } from "@/utils/type";
+import classNames from "classnames";
+import { useState } from "react";
+import Highlight from "react-highlight";
+import { Options } from "redaxios";
+const LANGUAGES = ["curl", "javascript", "python"];
+export const Snippet = ({
+  endpoint,
+  parameters,
+  body,
+}: {
+  endpoint: ApiRoute;
+  parameters?: Record<string, any>;
+  body?: Options | undefined;
+}) => {
+  const [language, setLanguage] = useState<string>(LANGUAGES[0]);
+  const generateRequestFromEndpoint = () => {
+    const { method, path } = endpoint;
+    const needBody = ["post", "put", "patch", "delete"].includes(
+      method.toLocaleLowerCase()
+    );
+    if (language === "curl") {
+      if (needBody && body) {
+        return (
+          `curl -X ${method.toLocaleUpperCase()} ${path} \\` +
+          "\n" +
+          `  -H "Content-Type: application/json" \\` +
+          "\n" +
+          `  -d '${JSON.stringify(body, null, 2)}'`
+        );
+      }
+      if (parameters) {
+        return (
+          `curl -X ${method.toLocaleUpperCase()} ${path}?` +
+          Object.entries(parameters)
+            .map(([key, value]) => `${key}=${value}`)
+            .join("&")
+        );
+      }
+      return `curl -X ${method.toLocaleUpperCase()} ${path}`;
+    }
+    if (language === "javascript") {
+      if (needBody && body) {
+        return `const response = await fetch("${path}", {
+  method: "${method.toLocaleUpperCase()}",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify(${JSON.stringify(body, null, 2)}),
+});`;
+      }
+      if (parameters) {
+        return `const response = await fetch("${path}?${Object.entries(
+          parameters
+        )
+          .map(([key, value]) => `${key}=${value}`)
+          .join("&")}", {
+  method: "${method.toLocaleUpperCase()}",
+});`;
+      }
+    }
+    if (language === "python") {
+      if (needBody && body) {
+        return `import requests
+  response = requests.${method.toLocaleLowerCase()}("${path}", json=${JSON.stringify(
+          body,
+          null,
+          2
+        )})`;
+      }
+      if (parameters) {
+        return `import requests
+  response = requests.${method.toLocaleLowerCase()}("${path}", params={
+    ${Object.entries(parameters)
+      .map(([key, value]) => `${key}: ${value}`)
+      .join(",\n    ")}
+  })`;
+      }
+    }
+    return "";
+  };
+  return (
+    <div className="mt-8 grid grid-cols-1 gap-4 w-full">
+      <p className="text-slate-200 uppercase text-xs font-semibold">Snippet</p>
+      <div className="bg-slate-950/50 rounded-xl overflow-hidden">
+        <ul className="bg-slate-950 flex items-center justify-start">
+          {LANGUAGES.map((lang, key) => (
+            <li
+              key={key}
+              className={classNames(
+                "py-4 text-slate-300 text-xs font-semibold px-6 border-r border-slate-900 cursor-pointer hover:bg-slate-900/80 transition-all duration-75",
+                {
+                  "bg-slate-900/50 hover:!bg-slate-900/50": lang === language,
+                }
+              )}
+              onClick={() => setLanguage(lang)}
+            >
+              {lang}
+            </li>
+          ))}
+        </ul>
+        <main className="px-6 py-6">
+          <Highlight
+            className={`${language} text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed`}
+          >
+            {generateRequestFromEndpoint()}
+          </Highlight>
+          {/* <pre className="text-slate-300 text-xs font-medium">
+            {generateCurlRequestFromEndpoint()}
+          </pre> */}
+        </main>
+      </div>
+    </div>
+  );
+};

components/editor/main/tabs.tsx ADDED Viewed

	@@ -0,0 +1,66 @@

+import { ApiRoute } from "@/utils/type";
+import classNames from "classnames";
+// const TABS = ["headers", "parameters", "body", "snippet"];
+export const Tabs = ({
+  active,
+  setActive,
+  endpoint,
+}: {
+  active: "headers" | "parameters" | "body" | "snippet";
+  setActive: (active: "headers" | "parameters" | "body" | "snippet") => void;
+  endpoint: ApiRoute;
+}) => {
+  return (
+    <ul className="flex items-center justify-center gap-6 bg-slate-950/40">
+      <li
+        className={classNames(
+          "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
+          {
+            "!border-slate-100 !text-slate-100": "headers" === active,
+          }
+        )}
+        onClick={() => setActive("headers")}
+      >
+        Headers
+      </li>
+      {endpoint?.parameters && (
+        <li
+          className={classNames(
+            "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
+            {
+              "!border-slate-100 !text-slate-100": "parameters" === active,
+            }
+          )}
+          onClick={() => setActive("parameters")}
+        >
+          Parameters
+        </li>
+      )}
+      {endpoint?.body && (
+        <li
+          className={classNames(
+            "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
+            {
+              "!border-slate-100 !text-slate-100": "body" === active,
+            }
+          )}
+          onClick={() => setActive("body")}
+        >
+          Body
+        </li>
+      )}
+      <li
+        className={classNames(
+          "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
+          {
+            "!border-slate-100 !text-slate-100": "snippet" === active,
+          }
+        )}
+        onClick={() => setActive("snippet")}
+      >
+        Snippet
+      </li>
+    </ul>
+  );
+};

components/input/input.tsx CHANGED Viewed

@@ -1,20 +1,21 @@
 import React, { ChangeEvent, useState } from "react";
 import { useUpdateEffect } from "react-use";
 interface Props {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
   label?: string;
   onlyAlphaNumeric?: boolean;
-  subLabel?: string;
 }
 export const TextInput: React.FC<Props> = ({
   value: initialValue,
   onChange,
   placeholder,
-  subLabel,
   onlyAlphaNumeric = true,
   label,
 }) => {
@@ -33,10 +34,19 @@ export const TextInput: React.FC<Props> = ({
   return (
     <div className="w-full relative grid grid-cols-1 gap-2.5">
-      <label className="text-slate-400 text-sm font-medium capitalize">
-        {label}:
-      </label>
-      {/* {subLabel && <p className="text-slate-600 text-xs">{subLabel}</p>} */}
       <input
         type="text"
         value={value}

 import React, { ChangeEvent, useState } from "react";
 import { useUpdateEffect } from "react-use";
+import { HiInformationCircle } from "react-icons/hi";
 interface Props {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
+  tooltip?: string;
   label?: string;
   onlyAlphaNumeric?: boolean;
 }
 export const TextInput: React.FC<Props> = ({
   value: initialValue,
   onChange,
   placeholder,
+  tooltip,
   onlyAlphaNumeric = true,
   label,
 }) => {
   return (
     <div className="w-full relative grid grid-cols-1 gap-2.5">
+      <div className="flex items-center justify-start gap-2 relative">
+        {tooltip && (
+          <div className="group cursor-pointer">
+            <HiInformationCircle className="text-slate-500 group-hover:text-slate-300 text-xl" />
+            <div className="bg-slate-950/90 z-10 rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
+              {tooltip}
+            </div>
+          </div>
+        )}
+        <label className="text-slate-400 text-sm font-medium capitalize">
+          {label}:
+        </label>
+      </div>
       <input
         type="text"
         value={value}

components/input/toggle.tsx CHANGED Viewed

@@ -1,23 +1,40 @@
 import classNames from "classnames";
 import { useState } from "react";
 import { useUpdateEffect } from "react-use";
 interface Props {
   label: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
 }
-export const Toggle: React.FC<Props> = ({ label, onChange, checked }) => {
   const [checkedState, setCheckedState] = useState(checked);
   useUpdateEffect(() => onChange(checkedState), [checkedState]);
   return (
-    <div className="w-full flex items-center justify-start gap-2.5">
-      <label className="text-slate-400 text-sm font-medium capitalize">
-        {label}:
-      </label>
       <div
         className={classNames(
           "w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",

 import classNames from "classnames";
 import { useState } from "react";
+import { HiInformationCircle } from "react-icons/hi";
 import { useUpdateEffect } from "react-use";
 interface Props {
   label: string;
   checked: boolean;
+  tooltip?: string;
   onChange: (checked: boolean) => void;
 }
+export const Toggle: React.FC<Props> = ({
+  label,
+  onChange,
+  checked,
+  tooltip,
+}) => {
   const [checkedState, setCheckedState] = useState(checked);
   useUpdateEffect(() => onChange(checkedState), [checkedState]);
   return (
+    <div className="w-full flex items-center justify-start gap-2.5 relative">
+      <div className="flex items-center justify-start gap-2">
+        {tooltip && (
+          <div className="group cursor-pointer">
+            <HiInformationCircle className="text-slate-500 group-hover:text-slate-300 text-xl" />
+            <div className="bg-slate-950/90 z-10 min-w-[200px] rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
+              {tooltip}
+            </div>
+          </div>
+        )}
+        <label className="text-slate-400 text-sm font-medium capitalize">
+          {label}:
+        </label>
+      </div>
       <div
         className={classNames(
           "w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",

utils/datas/api_collections.ts CHANGED Viewed

@@ -15,6 +15,12 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
       limit: 5,
       full: true,
       config: true
     }
   }, {
     method: 'GET',

       limit: 5,
       full: true,
       config: true
+    },
+    tooltips: {
+      search: "Filter based on substrings for repos and their usernames, such as resnet or microsoft",
+      full: "Whether to fetch most model data, such as all tags, the files, etc.",
+      config: "Whether to also fetch the repo config.",
+      filter: "Filter based on tags, such as text-classification or spacy."
     }
   }, {
     method: 'GET',

utils/type.ts CHANGED Viewed

@@ -8,7 +8,8 @@ export interface ApiRoute {
   method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
   path: string,
   parameters?: any,
-  body?: Array<Body>
 }
 export interface Body {

   method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
   path: string,
   parameters?: any,
+  body?: Array<Body>,
+  tooltips?: Record<string, string>
 }
 export interface Body {