2914 graphql api documentation (#3065)

* Remove dead code

* Create playground component

* Remove useless call to action

* Fix graphiql theme

* Fix style

* Split components

* Move headers to headers form

* Fix nodes in open-api components

* Remove useless check

* Clean code

* Fix css differences

* Keep carret when fetching schema

packages/twenty-docs/src/components/playground.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import TokenForm, { TokenFormProps } from '../components/token-form';
+
+const Playground = (
+  {
+    children,
+    setOpenApiJson,
+    setToken
+  }: Partial<React.PropsWithChildren | TokenFormProps>
+) => {
+  const [isTokenValid, setIsTokenValid] = useState(false)
+  return (
+    <>
+      <TokenForm
+        setOpenApiJson={setOpenApiJson}
+        setToken={setToken}
+        isTokenValid={isTokenValid}
+        setIsTokenValid={setIsTokenValid}
+      />
+      {
+        isTokenValid && children
+      }
+    </>
+  )
+}
+
+export default Playground;

packages/twenty-docs/src/components/token-form.css

@@ -0,0 +1,77 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90vh;
+}
+
+.form {
+    text-align: center;
+    padding: 50px;
+}
+
+.link {
+    color: #16233f;
+    text-decoration: none;
+    position: relative;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+[data-theme='dark'] .link {
+    color: #a3c0f8;
+}
+
+.input {
+    padding: 6px;
+    margin: 20px 0 5px 0;
+    max-width: 460px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #f3f3f3;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+[data-theme='dark'] .input {
+    background-color: #16233f;
+}
+
+.invalid {
+    border: 1px solid #f83e3e;
+}
+
+.token-invalid {
+    color: #f83e3e;
+    font-size: 12px;
+}
+
+.not-visible {
+    visibility: hidden;
+}
+
+.loader {
+    color: #16233f;
+    font-size: 2rem;
+    animation: animate 2s infinite;
+}
+
+[data-theme='dark'] .loader {
+    color: #a3c0f8;
+}
+
+@keyframes animate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(720deg);
+    }
+}
+
+.loader-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+}

packages/twenty-docs/src/components/token-form.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { parseJson } from 'nx/src/utils/json';
+import tokenForm from '!css-loader!./token-form.css';
+import { TbLoader2 } from 'react-icons/tb';
+
+export type TokenFormProps = {
+  setOpenApiJson?: (json: object) => void,
+  setToken?: (token: string) => void,
+  isTokenValid: boolean,
+  setIsTokenValid: (boolean) => void,
+}
+
+const TokenForm = (
+  {
+    setOpenApiJson,
+    setToken,
+    isTokenValid,
+    setIsTokenValid,
+  }: TokenFormProps
+) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const token = parseJson(localStorage.getItem('TryIt_securitySchemeValues'))?.bearerAuth ?? ''
+
+  const updateToken = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    localStorage.setItem(
+      'TryIt_securitySchemeValues',
+      JSON.stringify({bearerAuth: event.target.value}),
+    )
+    await submitToken(event.target.value)
+  }
+
+  const validateToken = (openApiJson) => setIsTokenValid(!!openApiJson.tags)
+
+  const getJson = async (token: string ) => {
+    setIsLoading(true)
+
+    return await fetch(
+      'https://api.twenty.com/open-api',
+      {headers: {Authorization: `Bearer ${token}`}}
+    )
+      .then((res)=> res.json())
+      .then((result)=> {
+        validateToken(result)
+        setIsLoading(false)
+
+        return result
+      })
+      .catch(() => setIsLoading(false))
+  }
+
+  const submitToken = async (token) => {
+    if (isLoading) return
+
+    const json = await getJson(token)
+
+    setToken && setToken(token)
+
+    setOpenApiJson && setOpenApiJson(json)
+  }
+
+  useEffect(()=> {
+    (async ()=> {
+      await submitToken(token)
+    })()
+  },[])
+
+  // We load playground style using useEffect as it breaks remaining docs style
+  useEffect(() => {
+    const styleElement = document.createElement('style');
+    styleElement.innerHTML = tokenForm.toString();
+    document.head.append(styleElement);
+
+    return () => styleElement.remove();
+  }, []);
+
+  return !isTokenValid && (
+    <div>
+      <div className='container'>
+        <form className="form">
+          <label>
+            To load your playground schema, <a className='link' href='https://app.twenty.com/settings/developers/api-keys'>generate an API key</a> and paste it here:
+          </label>
+          <p>
+            <input
+              className={(token && !isLoading) ? 'input invalid' : 'input'}
+              type='text'
+              readOnly={isLoading}
+              placeholder='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIyMD...'
+              defaultValue={token}
+              onChange={updateToken}
+            />
+            <span className={`token-invalid ${(!token || isLoading )&& 'not-visible'}`}>Token invalid</span>
+            <div className='loader-container'>
+              <TbLoader2 className={`loader ${!isLoading && 'not-visible'}`} />
+            </div>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default TokenForm;