docs: generate documentation for UI components (#5849)

* added tool to generate spec files for React components * use typedoc for missing descriptions and types * improvements and fixes * improvements * added doc comments for half of the components * add custom resolver + more doc comments * added all tsdocs * general improvements * add specs to UI docs * added github action * remove unnecessary api route * Added readme for react-docs-generator * remove comment * Update packages/design-system/ui/src/components/currency-input/currency-input.tsx Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> * remove description of aria fields + add generate script --------- Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
2023-12-13 16:02:41 +02:00
parent edc49bfe1d
commit 245e5c9a69
288 changed files with 6029 additions and 1447 deletions
--- a/www/apps/ui/src/components/component-reference.tsx
+++ b/www/apps/ui/src/components/component-reference.tsx
@@ -0,0 +1,81 @@
+import { Documentation } from "react-docgen"
+import { Suspense } from "react"
+import { Spinner } from "@medusajs/icons"
+import { PropTable } from "./props-table"
+import { Container, clx } from "@medusajs/ui"
+import { Feedback } from "./feedback"
+import { MarkdownContent } from "docs-ui"
+import { components } from "./mdx-components"
+
+type ComponentReferenceProps = {
+  mainComponent: string
+  componentsToShow?: string[]
+  specsSrc?: string
+}
+
+const ComponentReference = ({
+  mainComponent,
+  componentsToShow = [mainComponent],
+  specsSrc,
+}: ComponentReferenceProps) => {
+  if (!specsSrc) {
+    return <></>
+  }
+
+  const specs = JSON.parse(specsSrc) as Documentation[]
+
+  return (
+    <>
+      {componentsToShow.map((component, index) => {
+        const componentSpec = specs?.find(
+          (spec) => spec.displayName === component
+        )
+        const hasProps =
+          componentSpec?.props && Object.keys(componentSpec.props).length > 0
+        return (
+          <Suspense
+            fallback={
+              <div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
+                <Spinner className="animate-spin" />
+              </div>
+            }
+            key={index}
+          >
+            {componentSpec && (
+              <>
+                {componentsToShow.length > 1 && (
+                  <h3 className={clx("h3-docs mb-2 mt-10 text-medusa-fg-base")}>
+                    {componentSpec.displayName || component}
+                  </h3>
+                )}
+                {componentSpec.description && (
+                  <MarkdownContent components={components}>
+                    {componentSpec.description}
+                  </MarkdownContent>
+                )}
+                {hasProps && (
+                  <>
+                    <Container className="mb-6 mt-8 overflow-hidden p-0">
+                      <Suspense
+                        fallback={
+                          <div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
+                            <Spinner className="animate-spin" />
+                          </div>
+                        }
+                      >
+                        <PropTable props={componentSpec.props!} />
+                      </Suspense>
+                    </Container>
+                    <Feedback title={`props of ${component}`} />
+                  </>
+                )}
+              </>
+            )}
+          </Suspense>
+        )
+      })}
+    </>
+  )
+}
+
+export { ComponentReference }