Api docs

src/app/docs/codes.ts

@@ -0,0 +1,87 @@
+export const basicApiFetchCode = {
+  js: `const res = await fetch("https://mock-data-generator-jet.vercel.app/api/generator", {
+  method: "POST",
+  body: JSON.stringify({
+    count: 10,
+    fields: ["firstName", "lastName"],
+  })
+});
+
+const data = await res.json();
+console.log(data.value);`,
+
+  py: `import requests
+
+response = requests.post("https://mock-data-generator-jet.vercel.app/api/generator", json={
+  "count": 10,
+  "fields": ["firstName", "lastName"],
+})
+
+data = response.json()
+print(data["value"])`,
+
+  res: `[
+  { firstName: 'Estelle', lastName: 'Turcotte' },
+  { firstName: 'Shaun', lastName: 'Wilkinson' },
+  { firstName: 'Archie', lastName: 'Russel' },
+  { firstName: 'Ruben', lastName: 'Emard' },
+  { firstName: 'Barbara', lastName: 'Hahn' },
+  { firstName: 'Nikki', lastName: 'Okuneva' },
+  { firstName: 'Johnnie', lastName: 'Howe' },
+  { firstName: 'Molly', lastName: 'Runolfsson' },
+  { firstName: 'Sherman', lastName: 'Schowalter' },
+  { firstName: 'Earl', lastName: 'Klein' }
+]`,
+};
+
+export const seedApiFetchCode = {
+  js: `const res = await fetch("https://mock-data-generator-jet.vercel.app/api/generator", {
+  method: "POST",
+  body: JSON.stringify({
+    count: 5,
+    fields: ["avatar", "email", "password"],
+    seed: 123,
+  })
+});
+
+const data = await res.json();
+console.log(data.value);`,
+  py: `import requests
+
+response = requests.post("https://mock-data-generator-jet.vercel.app/api/generator", json={
+  "count": 5,
+  "fields": ["avatar", "email", "password"],
+  "seed": 123,
+})
+
+data = response.json()
+print(data["value"])`,
+
+  res: `[
+  {
+    avatar: 'https://avatars.githubusercontent.com/u/28613933',
+    email: 'Chris84@gmail.com',
+    password: 'aqi83WueYU0cbUE'
+  },
+  {
+    avatar: 'https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/71.jpg',
+    email: 'Gabriel.Murray@hotmail.com',
+    password: 'xpBFcBiYbF7AQ_q'
+  },
+  {
+    avatar: 'https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/68.jpg',
+    email: 'Jeannie_Kuvalis11@hotmail.com',
+    password: 'UrEB1oAUWRw4Rv9'
+  },
+  {
+    avatar: 'https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/female/512/34.jpg',
+    email: 'Jeffrey.Moore@hotmail.com',
+    password: 'VmFf0ZsI4KUyWLh'
+  },
+  {
+    avatar: 'https://avatars.githubusercontent.com/u/43857224',
+    email: 'Jasmine_Langosh@hotmail.com',
+    password: 'gdp0kucJJiVXnAy'
+  }
+]`
+}

src/app/docs/page.tsx

@@ -1,68 +1,133 @@
-import { CodeBlock, CodeGroup } from "@prose-ui/next";
+import { cn } from "@/utilities";
+import { CodeGroup, Card, CodeBlock, Callout } from "@prose-ui/next";
+import { basicApiFetchCode, seedApiFetchCode } from "./codes";
 import * as Prism from "prismjs";
+import "prismjs/components/prism-python";
 
-export default function DocsPage() {
-  const code = `const x = 'Hello world';
-console.log(x);
-
-const y = 'Hello world';
-console.log(y);
-
-const z = 'Hello world';
-console.log(z);`;
-  const highlightedCode = Prism.highlight(code, Prism.languages.javascript, "javascript");
-  const highlightedCodeWithLines = `<code>${highlightedCode.split('\n').reduce((acc, line) => {
-    return acc + `<span class="line">${line}</span>`;
-  }, '')}</code>`;
+const highlightCode = (code: string, language: string) => {
+  return `<pre><code>${Prism.highlight(code, Prism.languages[language], language).split("\n").reduce((acc, el) => {
+    return acc + `<span class="line">${el}</span>`;
+  }, "")}</code></pre>`;
+};
 
-  const secondCode = `typescript
-const x = 'Hello world';
-console.log(x);
+export default function DocsPage() {
+  return (
+    <div className={cn("prose-ui", "center")}>
+      <h1>API docs</h1>
+      <Card title="API documentation" icon="scroll-text" color="var(--color-brand-primary)">
+        Our web application provides an API that allows you to generate sample
+        data using `faker`, an npm library. This makes it easy to quickly create
+        test records, mocks, or prototype data without having to build them by
+        hand.
+      </Card>
 
-const y = 'Hello world';
-console.log(y);
+      <h3>Example code to fetch API</h3>
+      <CodeGroup tabs={[{
+        title: "Basic API fetch code",
+        variants: {
+          javascript: {
+            code: basicApiFetchCode.js,
+            highlightedCode: highlightCode(basicApiFetchCode.js, "javascript"),
+            showLineNumbers: true,
+          },
+          python: {
+            code: basicApiFetchCode.py,
+            highlightedCode: highlightCode(basicApiFetchCode.py, "python"),
+            showLineNumbers: true,
+          }
+        },
+      }]} languages={[
+        { value: "javascript", label: "JavaScript" },
+        { value: "python", label: "Python" }
+      ]} />
 
-const z = 'Hello world';
-console.log(z);`;
+      <h3>In console you should see:</h3>
+      <CodeBlock title="Result" code={basicApiFetchCode.res} language="json" highlightedCode={highlightCode(basicApiFetchCode.res, "javascript")}>test</CodeBlock>
+      <Callout variant="warning" title="Note">
+        Values in your console can be a bit different because seed is not set and data is generated randomly.
+      </Callout>
 
-  const secondHighlightedCode = Prism.highlight(secondCode, Prism.languages.javascript, "javascript");
-  const secondHighlightedCodeWithLines = `<code>${secondHighlightedCode.split('\n').reduce((acc, line) => {
-    return acc + `<span class="line">${line}</span>`;
-  }, '')}</code>`;
+      <h3>You can change count of records, fields and seed:</h3>
+      <CodeGroup tabs={[
+        {
+          title: "Seed API fetch code",
+          variants: {
+            javascript: {
+              code: seedApiFetchCode.js,
+              highlightedCode: highlightCode(seedApiFetchCode.js, "javascript"),
+              showLineNumbers: true,
+            },
+            python: {
+              code: seedApiFetchCode.py,
+              highlightedCode: highlightCode(seedApiFetchCode.py, "python"),
+              showLineNumbers: true,
+            },
+          },
+        }
+      ]} languages={[
+        { value: "javascript", label: "JavaScript" },
+        { value: "python", label: "Python" }
+      ]} />
 
-  return (
-    <>
-      <h1>Docs</h1>
-      <div className="prose-ui">
-        <CodeBlock language="js" title="Code block title" showLineNumbers code={code} highlightedCode={highlightedCodeWithLines}>
-          test
-        </CodeBlock>
+      <h3>In console you will get:</h3>
+      <CodeBlock title="Result" code={seedApiFetchCode.res} language="json" highlightedCode={highlightCode(seedApiFetchCode.res, "javascript")}>test</CodeBlock>
+      <Callout variant="info" title="Info">
+        <ul>
+          <li>Count can be between 1 and 300.</li>
+          <li>You can use as many fields as you need.</li>
+          <li>Seed is optional, if you don&apos;t set it, data will be generated randomly.</li>
+        </ul>
+      </Callout>
 
-        <CodeGroup
-          groupId="example"
-          languages={[
-            { value: "javascript", label: "JavaScript" },
-            { value: "typescript", label: "TypeScript" },
-          ]}
-          tabs={[
-            {
-              title: "Basic",
-              variants: {
-                javascript: {
-                  code: code,
-                  highlightedCode: highlightedCodeWithLines,
-                  showLineNumbers: true,
-                },
-                typescript: {
-                  code: secondCode,
-                  highlightedCode: secondHighlightedCodeWithLines,
-                  showLineNumbers: true,
-                },
-              },
-            }
-          ]}
-        />
+      <h3>All working fields</h3>
+      <div className="prose-ui-table-div">
+        <table>
+          <thead>
+            <tr>
+              <th>Column name</th>
+              <th>Column value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>&quot;firstName&quot;</td>
+              <td>First name of user like &quot;John&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;lastName&quot;</td>
+              <td>Last name of user like &quot;Doe&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;fullName&quot;</td>
+              <td>Full name of user like &quot;John Doe&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;email&quot;</td>
+              <td>Email of user like &quot;john.doe@example.com&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;username&quot;</td>
+              <td>Username of user like &quot;john_doe&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;password&quot;</td>
+              <td>Password of user like &quot;password123&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;avatar&quot;</td>
+              <td>Avatar of user like &quot;https://example.com/avatar.png&quot;</td>
+            </tr>
+            <tr>
+              <td>&quot;phrase&quot;</td>
+              <td>Phrase of user with computer science terms</td>
+            </tr>
+            <tr>
+              <td>&quot;anytime&quot;</td>
+              <td>Random date and time</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-    </>
-  );
+    </div>
+  )
 }

src/app/styles/_config.scss

@@ -50,6 +50,8 @@ $props: (
   size-xl: 128px,
   size-xxl: 256px,
   size-xxxl: 384px,
+  size-xxxxl: 512px,
+  size-xxxxxl: 640px,
 
   size-10: 10%,
   size-20: 20%,
@@ -113,6 +115,16 @@ $spacing: (
 );
 
 $widths: (
+  100px: 100px,
+  200px: 200px,
+  300px: 300px,
+  400px: 400px,
+  500px: 500px,
+  600px: 600px,
+  700px: 700px,
+  800px: 800px,
+  900px: 900px,
+  1000px: 1000px,
   10: 10%,
   20: 20%,
   30: 30%,

src/app/styles/components/_code.scss

@@ -1,7 +1 @@
-@layer components {
-
-  .code-group,
-  .code-block {
-    border: 1px solid var(--color-bg-disabled);
-  }
-}
+@layer components {}

src/app/styles/components/_header.scss

@@ -57,10 +57,12 @@
       z-index: 10000;
       padding: var(--space-m);
       transition: 0.5s;
-      text-align: center;
+      flex-direction: column;
+      gap: var(--space-s);
+      align-items: center;
 
       @media (max-width: 768px) {
-        display: block;
+        display: flex;
       }
 
       &.hidden {

src/app/styles/components/_prose-ui-style.scss

@@ -1,5 +1,33 @@
 @layer components {
   .prose-ui {
     background-color: var(--color-bg-primary);
+
+    &.center {
+      width: var(--size-100);
+      padding: 0 var(--size-10);
+
+      @media (max-width: 768px) {
+        padding: 0 var(--space-m);
+      }
+    }
+
+    .code-group,
+    .code-block {
+      border: 1px solid var(--color-bg-disabled);
+    }
+
+    .prose-ui-table-div {
+      overflow-x: auto;
+      max-width: var(--size-100);
+    }
+
+    table {
+      text-align: left;
+
+      th,
+      td {
+        padding: var(--space-s) var(--space-m);
+      }
+    }
   }
 }

src/app/styles/utilities/_position.scss

@@ -40,4 +40,12 @@
   .justify-self-center {
     justify-self: center;
   }
+
+  .flex-column {
+    flex-direction: column;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
 }

src/app/styles/utilities/_sizes.scss

@@ -5,5 +5,9 @@
     .width-#{"" + $key} {
       width: $value;
     }
+
+    .max-width-#{"" + $key} {
+      max-width: $value;
+    }
   }
 }