Merge pull request #29 from OnedocLabs/ffo-48-include-documentation-f…

…or-the-react-print-library-with Ffo 48 include documentation for the react print library with
OnedocLabs · Jun 4, 2024 · 4ec476e · 4ec476e
2 parents bde5353 + 1c21749
commit 4ec476e
Show file tree

Hide file tree

Showing 83 changed files with 1,632 additions and 904 deletions.
diff --git a/docgen/buildExample.tsx b/docgen/buildExample.tsx
@@ -25,12 +25,13 @@ export const buildExample = async (
     markdown += `${example.description}\n\n`;
   }
 
-  markdown += `<Frame type="glass"><img src="${paths.imagePath}" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>\n\n`;
+  markdown += `<Frame background="subtle"><img src="${paths.imagePath}" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>\n\n`;
 
   // Check if the folder docs/previews contain the image
 
-  markdown += `<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-\`\`\`jsx template.tsx
+  markdown += `<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
+<CodeBlock title="template.tsx">
+\`\`\`jsx
 import { ${component}${
     example.imports ? `, ${example.imports.join(", ")}` : ""
   } } from "@fileforge/react-print";${
@@ -39,10 +40,13 @@ import { ${component}${
 
 ${snippet}
 \`\`\`
-\`\`\`css base.css
+</CodeBlock>
+<CodeBlock title="styles.css">
+\`\`\`css
 ${baseCss}
 \`\`\`
-</CodeGroup></div>\n\n`;
+</CodeBlock>
+</CodeBlocks></div>\n\n`;
 
   // markdown += `<a href="${pdfPath}">Download the PDF example ↓</a>\n\n`;
 

diff --git a/docgen/buildFileMarkdown.ts b/docgen/buildFileMarkdown.ts
@@ -6,6 +6,7 @@ import {
 import { ComponentDoc } from "react-docgen-typescript";
 import { buildExample } from "./buildExample";
 import { formatCamelCaseToTitle, safePropType } from "./utils";
+import { doc } from "prettier";
 
 export const buildFileMarkdown = async (
   docConfig: ExtendedDocConfig,
@@ -45,7 +46,10 @@ ${docConfig.description ? `description: "${docConfig.description}"` : ""}
 
     let { client, server } = componentInfo || { client: true, server: true };
 
-    markdown += `## ${componentName}\n\n`;
+    // markdown += `## ${componentName}\n\n`;
+    if (component && component.description) {
+      markdown += `${component.description}\n\n`;
+    }
 
     markdown += `Support\n\n`;
 
@@ -64,12 +68,8 @@ ${docConfig.description ? `description: "${docConfig.description}"` : ""}
     server ? check : noCheck
   }<span>Server-side</span></div></div>\n\n`;
 
-    if (component && component.description) {
-      markdown += `${component.description}\n\n`;
-    }
 
     if (Object.keys(examples).length > 0) {
-      markdown += `### Examples\n\n`;
 
       if (examples.default) {
         markdown += `#### Preview\n\n`;
@@ -84,6 +84,8 @@ ${docConfig.description ? `description: "${docConfig.description}"` : ""}
         markdown += exampleMarkdown;
       }
 
+      markdown += `### Examples\n\n`;
+
       if (Object.keys(examples).filter((key) => key !== "default").length > 0) {
         for (const [exampleName, example] of Object.entries(examples)) {
           if (exampleName === "default") {
@@ -108,23 +110,23 @@ ${docConfig.description ? `description: "${docConfig.description}"` : ""}
       markdown += `\`\`\`jsx\nimport { ${componentName} } from "@fileforge/react-print";\n\`\`\`\n\n`;
     }
 
-    if (
-      component &&
-      component.props &&
-      Object.keys(component.props).length > 0
-    ) {
-      markdown += `### API\n\n<ResponseField name="Props">\n<Expandable defaultOpen={true} title="Show available props">\n`;
-
-      Object.entries(component.props).forEach(([propName, prop]) => {
-        markdown += `<ResponseField name="${propName}" type="${safePropType(
-          prop.type.name
-        )}" required={${prop.required}}>\n\n${
-          prop.description
-        }\n\n${prop.defaultValue ? `Default: \`${JSON.stringify(prop.defaultValue.value)}\`\n\n` : ""}</ResponseField>\n`;
-      });
-
-      markdown += `</Expandable></ResponseField>\n`;
-    }
+    // if (
+    //   component &&
+    //   component.props &&
+    //   Object.keys(component.props).length > 0
+    // ) {
+    //   markdown += `### API\n\n<ResponseField name="Props">\n<Expandable defaultOpen={true} title="Show available props">\n`;
+
+    //   Object.entries(component.props).forEach(([propName, prop]) => {
+    //     markdown += `<ResponseField name="${propName}" type="${safePropType(
+    //       prop.type.name
+    //     )}" required={${prop.required}}>\n\n${
+    //       prop.description
+    //     }\n\n${prop.defaultValue ? `Default: \`${JSON.stringify(prop.defaultValue.value)}\`\n\n` : ""}</ResponseField>\n`;
+    //   });
+
+    //   markdown += `</Expandable></ResponseField>\n`;
+    // }
   }
 
   return markdown;

diff --git a/docgen/buildTemplates.tsx b/docgen/buildTemplates.tsx
@@ -88,7 +88,7 @@ ${attributes.icon ? `icon: ${attributes.icon}` : ""}
 category: ${attributes.category || "Uncategorized"}
 ---\n\n`;
 
-      markdown += `<Frame type="glass"><img src="${paths.imagePath}" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>\n\n`;
+      markdown += `<Frame background="subtle"><img src="${paths.imagePath}" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>\n\n`;
 
       markdown += `\`\`\`jsx
 ${await formatSnippet(body)}

diff --git a/docgen/docs.yml b/docgen/docs.yml
@@ -0,0 +1,172 @@
+instances:
+  - url: 'https://fileforge.docs.buildwithfern.com'
+    custom-domain: 'https://docs.fileforge.com'
+title: Fileforge
+tabs:
+  welcome:
+    display-name: Welcome
+  react-print:
+    display-name: react-print
+    icon: fa-brands fa-react
+  API:
+    display-name: API Reference
+    icon: fa-solid fa-bolt
+  SDK:
+    display-name: SDK Reference
+    icon: fa-solid fa-code
+  help:
+    display-name: Help Center
+    icon: fa-solid fa-question
+navigation:
+  - tab: welcome
+    layout:
+      - section: Get Started
+        contents:
+          - page: Welcome
+            path: ./pages/overview/introduction.mdx
+            slug: welcome
+  - tab: react-print
+    layout:
+      - section: Welcome
+        contents:
+          - page: Getting Started
+            path: ./react-print-pdf/docs/introduction.mdx
+            slug: getting-started
+            icon: fa-solid fa-hand-wave
+          - page: Setup
+            path: ./react-print-pdf/docs/getting-started/setup.mdx
+            slug: setup
+            icon: fa-solid fa-hammer
+      - section: Contributing
+        contents:
+          - page: Contributing
+            path: ./react-print-pdf/docs/contributing.mdx
+            slug: contributing
+            icon: fa-solid fa-code-pull-request
+      - section: Components
+        contents: []
+      - section: Examples
+        contents:
+          - section: Invoices
+            contents:
+              - page: Invoice
+                path: ./react-print-pdf/docs/ui/templates/invoice.mdx
+                slug: invoice
+              - page: Invoice Advanced
+                path: ./react-print-pdf/docs/ui/templates/invoice-advanced.mdx
+                slug: invoice-advanced
+            icon: fa-solid fa-file-invoice
+          - section: Legal
+            contents:
+              - page: NDA Markdown
+                path: ./react-print-pdf/docs/ui/templates/nda-markdown.mdx
+                slug: nda-markdown
+            icon: fa-solid fa-file-signature
+          - section: Receipts
+            contents:
+              - page: Receipt
+                path: ./react-print-pdf/docs/ui/templates/receipt.mdx
+                slug: receipt
+            icon: fa-solid fa-receipt
+          - section: Reports
+            contents:
+              - page: Report Charts
+                path: ./react-print-pdf/docs/ui/templates/report-charts.mdx
+                slug: report-charts
+            icon: fa-solid fa-chart-line
+          - section: Scientific
+            contents:
+              - page: Scientific Report
+                path: ./react-print-pdf/docs/ui/templates/scientific-report.mdx
+                slug: scientific-report
+            icon: fa-solid fa-flask
+  - tab: API
+    layout:
+      - section: Introduction
+        contents:
+          - page: Getting started
+            path: ./pages/api-reference/introduction.mdx
+            slug: api-reference
+          - page: Authentication
+            path: ./pages/api-reference/authentication.mdx
+            slug: authentication
+      - api: API Reference
+        snippets:
+          typescript: '@fileforge/client'
+  - tab: SDK
+    layout:
+      - section: Getting Started
+        contents:
+          - page: Getting Started
+            path: ./pages/sdk-reference/introduction.mdx
+            slug: sdk-reference
+      - section: Node
+        contents:
+          - page: Getting Started
+            path: ./pages/sdk-reference/node/introduction.mdx
+            slug: node-sdk-reference
+          - page: Error Handling
+            path: ./pages/sdk-reference/node/errors.mdx
+            slug: node-error-handling
+          - section: PDF
+            contents:
+            - page: fromDocx
+              path: ./pages/sdk-reference/node/PDF/fromDocx.mdx
+              slug: from-docx
+            - page: generate
+              path: ./pages/sdk-reference/node/PDF/generate.mdx
+              slug: generate-from-html
+            - page: merge
+              path: ./pages/sdk-reference/node/PDF/merge.mdx
+              slug: merge
+            - section: Form
+              contents:
+              - page: detect
+                path: ./pages/sdk-reference/node/Form/detect.mdx
+                slug: detect
+              - page: mark
+                path: ./pages/sdk-reference/node/Form/mark.mdx
+                slug: mark
+              - page: fill
+                path: ./pages/sdk-reference/node/Form/fill.mdx
+                slug: fill
+              - section: Types
+                contents:
+                - page: FormFillRequestOptionsFieldsItem
+                  path: ./pages/sdk-reference/node/Form/Types/formFillRequestOptionsFieldsItem.mdx
+                  slug: formFillRequestOptionsFieldsItem
+                - page: FormDetectResponseItem
+                  path: ./pages/sdk-reference/node/Form/Types/FormDetectResponseItem.mdx
+                  slug: formDetectResponseItem
+  - tab: help
+    layout:
+      - section: HTML to PDF
+        contents:
+          - page: Generate a PDF with react-print
+            path: >-
+              ./pages/help_center/html_to_pdf/generate-pdf-from-html-react-print.mdx
+            slug: generate-pdf-from-html
+          - page: Generate a PDF with assets
+            path: ./pages/help_center/html_to_pdf/generate-pdf-from-html-assets.mdx
+            slug: generate-pdf-from-html-assets
+          - page: Generate a hosted PDF
+            path: ./pages/help_center/html_to_pdf/generate-hosted-pdf-from-html.mdx
+            slug: generate-hosted-pdf
+colors:
+  accentPrimary: '#AD8AFF'
+  background:
+    dark: '#000000'
+    light: '#ffffff'
+logo:
+  dark: ./assets/logo-white.svg
+  light: ./assets/logo-black.svg
+favicon: ./assets/favicon.png
+layout:
+  searchbar-placement: header
+navbar-links:
+  - type: minimal
+    text: Support
+    url: 'mailto:contact@onedoclabs.com'
+  - type: outlined
+    text: Get Started
+    url: 'https://app.onedoclabs.com/login'